/* ═══════════════════════════════════════════════════════════
   WEBNEST — EMBER ON VOID
   Design system core. Every page loads this file.
   ═══════════════════════════════════════════════════════════ */

:root {
  --void:   #F5F3EE;
  --carbon: #ECE9E1;
  --smoke:  #E2DED4;
  --bone:   #161616;
  --ash:    #6F6E75;
  --accent:  #007BFF;
  --accent-deep: #0057C2; /* hover/fill tone — white text passes AA on this, not on --accent */
  --accent-dim: rgba(0,123,255,.14);
  --line:   rgba(22,22,22,.14);

  --pad: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 76px;

  --f-display: 'Archivo Black', 'Archivo', sans-serif;
  --f-serif:   'Instrument Serif', Georgia, serif;
  --f-mono:    'Space Mono', monospace;
  --f-body:    'Inter', -apple-system, sans-serif;

  --ease-out:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; overflow-x:clip; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

body {
  background:var(--void); color:var(--bone);
  font-family:var(--f-body); font-weight:400; line-height:1.6;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
::selection { background:var(--accent); color:var(--void); }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { all:unset; cursor:pointer; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--void); }
::-webkit-scrollbar-thumb { background:var(--accent); }

/* ── TEXTURE ── */
body::after {
  content:''; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.38; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel--carbon {
  background-image:radial-gradient(rgba(22,22,22,.06) 1px, transparent 1px);
  background-size:26px 26px;
}
.tex-grid {
  background-image:
    linear-gradient(rgba(22,22,22,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,22,22,.05) 1px, transparent 1px);
  background-size:72px 72px;
}

/* ── TYPE SYSTEM ── */
.t-display {
  font-family:var(--f-display); font-weight:400;
  text-transform:uppercase; line-height:.82; letter-spacing:-.015em;
}
.t-serif {
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; line-height:1;
}
.t-mono {
  font-family:var(--f-mono); font-size:.68rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.22em; color:var(--ash);
}
.t-accent { color:var(--accent); }
.t-stroke {
  color:transparent;
  -webkit-text-stroke:1.5px var(--bone);
}

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:transform .5s var(--ease-out);
}
.nav.hidden { transform:translateY(-110%); }
.nav.scrolled {
  background:rgba(245,243,238,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-brand {
  font-family:var(--f-display); font-size:1.15rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--bone); display:flex; align-items:baseline; gap:2px;
}
.nav-brand sup { font-family:var(--f-mono); font-size:.5rem; color:var(--accent); -webkit-text-stroke:0; }
.nav-meta { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); }
@media(max-width:820px){ .nav-meta{display:none} }
.nav-right { display:flex; align-items:center; gap:2rem; }
.nav-burger {
  display:flex; flex-direction:column; gap:6px; padding:10px 0;
  color:var(--bone);
}
.nav-burger span { display:block; width:34px; height:2px; background:currentColor; transition:transform .45s var(--ease-out), opacity .3s, width .45s var(--ease-out); }
.nav-burger:hover span:nth-child(1){ width:22px; }
.nav-burger:hover span:nth-child(2){ width:28px; }
body.menu-open .nav-burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); width:34px; }
body.menu-open .nav-burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); width:34px; }

/* ── MENU OVERLAY (color-block wipe) ── */
.menu { position:fixed; inset:0; z-index:800; visibility:hidden; }
.menu-layer { position:absolute; inset:0; transform:translateY(-101%); will-change:transform; }
.menu-layer.l1 { background:var(--accent); }
.menu-layer.l2 { background:var(--carbon); }
.menu-layer.l3 { background:var(--void); display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); }
.menu-links { list-style:none; display:flex; flex-direction:column; }
.menu-link {
  position:relative; display:inline-flex; align-items:baseline; gap:1.5rem;
  font-family:var(--f-display); font-size:clamp(2.6rem, 8vw, 7rem);
  line-height:1.06; text-transform:uppercase; color:var(--bone);
  width:fit-content; overflow:hidden;
  transition:color .4s var(--ease-out), letter-spacing .5s var(--ease-out);
}
.menu-link .idx { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.2em; color:var(--ash); }
.menu-link:hover { color:var(--accent); letter-spacing:.01em; }
.menu-foot { margin-top:3.5rem; display:flex; gap:2.5rem; flex-wrap:wrap; }
.menu-foot a { font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); transition:color .3s; }
.menu-foot a:hover { color:var(--accent); }

/* ── PANELS (section-over-section wipe) ── */
.panel { position:relative; background:var(--void); }
.panel--carbon { background:var(--carbon); }
.panel--bone   { background:var(--bone); color:var(--void); }
.panel--accent  { background:var(--accent); color:#fff; }
.panel-inner { padding:clamp(5rem,12vh,9rem) var(--pad); max-width:1680px; margin:0 auto; }

/* ── SECTION LABEL ── */
.sec-label { display:flex; align-items:center; gap:1rem; margin-bottom:3.5rem; }
.sec-label::after { content:''; flex:1; height:1px; background:currentColor; opacity:.14; }
.sec-label .n { color:var(--accent); }

/* ── BLOB CTA (SVG path-morph button) ──
   FILLED AT REST. Touch devices never see :hover, so the resting
   state must already read as a button and pass AA on its own. */
.blob-cta {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.6rem 3.2rem; isolation:isolate; white-space:nowrap;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--void); transition:color .4s var(--ease-out);
}
.blob-cta svg { position:absolute; inset:-12%; width:124%; height:124%; z-index:-1; }
.blob-cta svg path { fill:none; stroke:var(--bone); stroke-width:1; transition:stroke .4s; }
.blob-cta .blob-fill { fill:var(--bone); stroke:none; transition:fill .45s var(--ease-out); }
.blob-cta:hover { color:#fff; }
.blob-cta:hover svg path { stroke:var(--accent-deep); }
.blob-cta:hover .blob-fill { fill:var(--accent-deep); }
.blob-cta .arr { margin-left:.7rem; transition:transform .4s var(--ease-out); }
.blob-cta:hover .arr { transform:translateX(4px) rotate(-45deg); }
/* on accent (blue) panels: off-white pill, near-black text */
.blob-cta--dark { color:var(--bone); }
.blob-cta--dark svg path { stroke:var(--void); }
.blob-cta--dark .blob-fill { fill:var(--void); }
.blob-cta--dark:hover { color:var(--void); }
.blob-cta--dark:hover svg path { stroke:var(--bone); }
.blob-cta--dark:hover .blob-fill { fill:var(--bone); }

/* ── LINE LINK (underline draw) ── */
.line-link {
  position:relative; display:inline-block; padding-bottom:3px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
}
.line-link::after {
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.line-link:hover::after { transform:scaleX(1); transform-origin:left; }

/* ── SPLIT TEXT scaffolding ── */
.sp-line { display:block; overflow:hidden; }
.sp-line > span { display:inline-block; will-change:transform; }
[data-split]:not(.split-ready):not(.no-split) { visibility:hidden; }
html.no-motion [data-split] { visibility:visible !important; }
[data-split] .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.32em; margin-bottom:-.32em; }
[data-split] .w > i { display:inline-block; font-style:inherit; transform:translateY(110%); will-change:transform; }
html.no-motion [data-split] .w > i { transform:none; }

/* ── UNMASK ── */
[data-unmask] { will-change:clip-path; }

/* ── MARQUEE ── */
.marquee { overflow:hidden; white-space:nowrap; display:flex; user-select:none; }
.marquee-track { display:inline-flex; align-items:center; will-change:transform; animation:mq 26s linear infinite; }
@keyframes mq { to { transform:translateX(-50%); } }
.marquee .mq-item { display:inline-flex; align-items:center; gap:3rem; padding-right:3rem; font-family:var(--f-display); text-transform:uppercase; flex-shrink:0; }
.marquee .mq-dot { width:10px; height:10px; background:var(--accent); border-radius:50%; flex-shrink:0; }

/* ── FOOTER ── */
.footer { position:relative; z-index:10; background:var(--void); border-top:1px solid var(--line); padding:4.5rem var(--pad) 2rem; }
.footer-grid { display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; margin-bottom:4rem; }
.footer-brand { font-family:var(--f-display); font-size:clamp(3rem,9vw,8rem); line-height:.85; text-transform:uppercase; color:var(--bone); }
.footer-brand em { font-family:var(--f-serif); font-style:italic; text-transform:none; color:var(--accent); }
.footer-col h4 { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); margin-bottom:1.2rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a { font-size:.85rem; color:var(--bone); opacity:.75; transition:opacity .3s, color .3s; }
.footer-col a:hover { opacity:1; color:var(--accent); }
.footer-social { display:flex; gap:.9rem; }
.footer-social a {
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--bone); opacity:.75; transition:opacity .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.footer-social a:hover { opacity:1; color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.footer-base { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; border-top:1px solid var(--line); }
.footer-base p { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); }

/* ── FAQ ── */
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-item summary {
  list-style:none; cursor:pointer; padding:2rem 0;
  display:flex; align-items:baseline; gap:2rem;
  font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.9rem);
  text-transform:uppercase; line-height:1.1;
  transition:color .35s, padding-left .45s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--accent); padding-left:1.2rem; }
.faq-item .fq-n { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--accent); flex-shrink:0; }
.faq-item .fq-x { margin-left:auto; font-family:var(--f-mono); font-size:1.3rem; color:var(--ash); transition:transform .4s var(--ease-out), color .3s; flex-shrink:0; }
.faq-item[open] .fq-x { transform:rotate(45deg); color:var(--accent); }
.faq-item p { max-width:52rem; padding:0 0 2rem 3.6rem; color:var(--ash); font-size:.95rem; }

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:700;
  width:54px; height:54px; border-radius:50%;
  background:var(--bone); color:#fff;
  border:1px solid rgba(255,255,255,.3); /* keeps a visible edge on dark/blue panels */
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease-out), background .3s;
  opacity:0; transform:translateY(20px); pointer-events:none;
}
.wa-float.visible { opacity:1; transform:none; pointer-events:all; }
.wa-float:hover { transform:scale(1.12) rotate(8deg); background:var(--accent-deep); }

/* ── UTILITIES ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
@media(max-width:1023px){ .grid-4{grid-template-columns:1fr 1fr} }
@media(max-width:820px){ .grid-2,.grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr} }

/* ── FOCUS VISIBILITY ──
   button{all:unset} above kills the UA outline; restore it for
   keyboard users on everything, incl. the burger (the only nav). */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.panel--accent :focus-visible, .proc-card--cta :focus-visible { outline-color:#fff; }

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-split] .w > i { transform:none; }
}