/* =========================================================
   Wuawuara · Home v1.0 RC
   CSS limpio para Landing + Archivo 3+3 + Pointer
   ========================================================= */

:root{
  --black:#050505;
  --cream:#f3ecde;
  --cream-soft:#f8f2e8;
  --cream-2:#d8c8ae;
  --ink:#0d0d0b;
  --muted:rgba(243,236,222,.68);
  --muted-ink:rgba(13,13,11,.62);
  --line-light:rgba(243,236,222,.18);
  --line-dark:rgba(13,13,11,.12);
  --green:#6BE0AE;
  --green-ui:#5FA48F;
  --green-dark:#236E5B;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--black);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.35;
  overflow-x:hidden;
}

body.is-intro{overflow:hidden}

a{
  color:inherit;
  text-decoration:none;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  font-family:inherit;
}

::selection{
  background:rgba(107,224,174,.34);
  color:var(--ink);
}

/* =========================================================
   Fallback / Base Shell
   ========================================================= */

.presence-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:90;
  pointer-events:none;
  will-change:transform;
}

.site{
  position:relative;
  z-index:1;
  min-height:100vh;
  background:var(--cream);
  color:var(--ink);
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}

.site.is-visible,
.fallback-visible .site{
  opacity:1;
  visibility:visible;
  transition:opacity 1.1s ease, visibility 0s;
}

.fallback-visible .intro{
  display:none;
}

.noscript{
  position:fixed;
  z-index:999;
  left:24px;
  right:24px;
  bottom:24px;
  padding:14px;
  background:#111;
  color:var(--cream);
  border:1px solid #333;
}

/* =========================================================
   Intro
   ========================================================= */

.intro{
  position:fixed;
  inset:0;
  z-index:80;
  overflow:hidden;
  background:
    radial-gradient(circle at 58% 42%,#101010 0%,#050505 42%,#000 100%);
  color:var(--cream);
  transition:opacity 1.15s ease, visibility 1.15s ease;
}

.intro.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.intro__grain{
  position:absolute;
  inset:-20%;
  opacity:.18;
  background-image:
    radial-gradient(circle at 25% 15%,rgba(243,236,222,.10) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 50%,rgba(243,236,222,.06) 0 1px,transparent 1px);
  background-size:19px 19px,31px 31px;
  animation:grain 8s steps(7) infinite;
}

@keyframes grain{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(-2%,1%)}
  60%{transform:translate(1%,-1%)}
}

.intro-logo{
  position:absolute;
  z-index:3;
  top:clamp(24px,4vw,52px);
  left:clamp(22px,4vw,64px);
  display:flex;
  align-items:center;
  gap:14px;
  color:rgba(243,236,222,.62);
  font-size:11px;
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.intro-logo .ww-mark{
  color:#fff;
  font-family:var(--serif);
  font-size:30px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.16em;
  text-transform:none;
}

.intro-copy{
  position:absolute;
  z-index:3;
  left:clamp(22px,8vw,132px);
  bottom:clamp(96px,16vh,190px);
  max-width:min(1180px,86vw);
  pointer-events:none;
}

.intro-copy__index{
  margin-bottom:18px;
  color:var(--green-ui);
  font-size:12px;
  font-weight:900;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(14px);
}

.intro-copy h1{
  max-width:1120px;
  margin:0 0 22px;
  color:var(--cream);
  font-family:var(--serif);
  font-size:clamp(58px,10.4vw,164px);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.036em;
  opacity:0;
  transform:translateY(30px);
  filter:blur(14px);
}

.intro-copy p{
  max-width:760px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:clamp(16px,2vw,28px);
  line-height:1.45;
  opacity:0;
  transform:translateY(14px);
  filter:blur(9px);
}

.intro-copy.is-visible .intro-copy__index,
.intro-copy.is-visible h1,
.intro-copy.is-visible p{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity .92s ease,
    transform 1s var(--ease),
    filter 1s ease;
}

.intro-copy.is-visible p{transition-delay:.14s}

.intro__hint{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  color:rgba(243,236,222,.46);
  font-size:10px;
  letter-spacing:.42em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .6s ease;
}

.intro__hint.is-visible{
  opacity:1;
  animation:pulseHint 2.4s ease-in-out infinite;
}

@keyframes pulseHint{
  0%,100%{opacity:.28}
  50%{opacity:.86}
}

.intro__skip{display:none!important}

.lamp-reveal{
  position:fixed;
  inset:0;
  z-index:79;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%,
    var(--cream) 0 8%,
    rgba(243,236,222,.92) 23%,
    rgba(243,236,222,.50) 45%,
    rgba(243,236,222,0) 68%);
  transform:scale(.08);
  transition:transform 1.25s var(--ease), opacity .85s ease;
}

.lamp-reveal.is-open{
  opacity:1;
  transform:scale(2.4);
}

/* =========================================================
   Pointer / WhatsApp / Scroll Instruction
   ========================================================= */

.pointer-cue{
  position:fixed;
  z-index:92;
  left:var(--px,50vw);
  top:var(--py,50vh);
  transform:translate(18px,-50%) scale(.96);
  color:rgba(243,236,222,.52);
  font:600 10px/1 var(--sans);
  letter-spacing:.01em;
  text-transform:none;
  text-shadow:0 0 14px rgba(243,236,222,.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease, transform .34s cubic-bezier(.34,1.56,.64,1);
}

.pointer-cue.is-visible{
  opacity:.68;
  transform:translate(23px,-50%) scale(1);
}

body:not(.is-intro) .pointer-cue{
  display:none!important;
}

.pointer-whatsapp{
  position:fixed;
  z-index:95;
  left:var(--wx,50vw);
  top:var(--wy,50vh);
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 34%,
    #D5FFE9 0%,
    #6BE0AE 28%,
    #32B987 58%,
    #1E6756 100%);
  border:1px solid rgba(220,255,238,.72);
  color:#fff;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  pointer-events:none;
  box-shadow:0 0 0 rgba(107,224,174,0);
  transition:
    opacity .35s ease,
    transform .45s var(--ease),
    box-shadow .45s ease,
    border-color .45s ease;
}

.pointer-whatsapp::before{
  content:'';
  position:absolute;
  inset:-34px;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle,
    rgba(107,224,174,.46) 0%,
    rgba(107,224,174,.20) 44%,
    rgba(107,224,174,0) 76%);
}

.pointer-whatsapp.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
  animation:wuaw-wa-pulse 2.35s ease-in-out infinite;
}

.pointer-whatsapp:hover{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 0 52px rgba(107,224,174,1),
    0 0 124px rgba(107,224,174,.54),
    0 0 190px rgba(107,224,174,.24);
}

.pointer-whatsapp__icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  background:transparent;
  box-shadow:none;
}

.pointer-whatsapp__icon svg{
  width:40px;
  height:40px;
  display:block;
  fill:#fff;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.34));
}

.pointer-whatsapp__text{display:none!important}
body.is-intro .pointer-whatsapp{display:none!important}

@keyframes wuaw-wa-pulse{
  0%,100%{
    box-shadow:
      0 0 44px rgba(107,224,174,.82),
      0 0 116px rgba(107,224,174,.42),
      0 0 190px rgba(107,224,174,.16);
  }
  50%{
    box-shadow:
      0 0 70px rgba(107,224,174,1),
      0 0 155px rgba(107,224,174,.68),
      0 0 250px rgba(107,224,174,.28);
  }
}

.scroll-instruction{
  position:fixed;
  z-index:999;
  left:50%;
  top:50%;
  width:auto;
  max-width:calc(100vw - 36px);
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border:1px solid rgba(243,236,222,.24);
  border-radius:999px;
  background:rgba(13,13,11,.90);
  color:var(--cream);
  box-shadow:
    0 22px 70px rgba(13,13,11,.28),
    0 0 50px rgba(107,224,174,.14);
  backdrop-filter:blur(18px);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,26px) scale(.94);
  transition:opacity .46s ease, transform .56s var(--ease);
}

.scroll-instruction.is-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.scroll-instruction span:last-child{
  color:rgba(243,236,222,.86);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.scroll-instruction__icon{
  position:relative;
  flex:0 0 auto;
  width:18px;
  height:28px;
  border:1px solid rgba(243,236,222,.60);
  border-radius:999px;
}

.scroll-instruction__icon::before{
  content:'';
  position:absolute;
  left:50%;
  top:6px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(243,236,222,.88);
  transform:translateX(-50%);
  animation:scrollDot 1.35s ease-in-out infinite;
}

@keyframes scrollDot{
  0%{top:6px;opacity:.25}
  40%{opacity:1}
  100%{top:16px;opacity:.15}
}

body.is-intro .scroll-instruction{display:none!important}

/* =========================================================
   Navigation
   ========================================================= */

.nav{
  position:sticky;
  top:0;
  z-index:60;
  height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 clamp(20px,4vw,72px);
  background:rgba(243,236,222,.80);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(13,13,11,.08);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  letter-spacing:-.045em;
}

.brand-dot{
  width:12px;
  height:12px;
  display:inline-block;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 6px rgba(13,13,11,.06);
  animation:tinyBreath 4s ease-in-out infinite;
}

@keyframes tinyBreath{
  0%,100%{transform:scale(.86)}
  50%{transform:scale(1.08)}
}

.nav-links{
  display:flex;
  gap:28px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
}

.nav-links a{
  opacity:.48;
  transition:opacity .3s ease;
}

.nav-links a.is-active,
.nav-links a:hover{
  opacity:1;
}

.nav-cta{
  justify-self:end;
  padding:13px 22px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:13px;
  font-weight:950;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}

.nav-cta:hover{
  background:var(--ink);
  color:var(--cream);
  transform:translateY(-2px);
}

/* =========================================================
   Sections / Typography
   ========================================================= */

.section{
  position:relative;
  overflow:hidden;
  padding:clamp(106px,13vw,205px) clamp(20px,4vw,72px);
  border-bottom:1px solid rgba(13,13,11,.08);
}

.dark-section{
  background:var(--black);
  color:var(--cream);
  border-bottom-color:rgba(243,236,222,.09);
}

.hero{
  min-height:calc(100vh - 82px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow,
.section-num{
  margin:0 0 20px;
  color:var(--green-ui);
  font-size:12px;
  font-weight:950;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.dark-section .section-num,
.final-cta .section-num{
  color:var(--green-ui);
}

.backword{
  position:absolute;
  z-index:0;
  left:-.07em;
  top:7%;
  color:rgba(13,13,11,.035);
  font-family:var(--sans);
  font-size:clamp(120px,25vw,450px);
  font-weight:950;
  line-height:.72;
  letter-spacing:-.095em;
  pointer-events:none;
  white-space:nowrap;
  transform:translateX(var(--drift,0px));
  transition:transform 1.2s var(--ease);
}

.dark-section .backword{
  color:rgba(243,236,222,.052);
}

.cinema-title,
.section h3{
  position:relative;
  z-index:2;
  max-width:1320px;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(48px,7.35vw,118px);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.034em;
}

.split h3,
.questions h3,
.cases h3,
.dossier h3,
.final-cta h3{
  font-size:clamp(46px,6.95vw,108px);
  line-height:.96;
  letter-spacing:-.032em;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(260px,680px) auto;
  gap:48px;
  align-items:end;
  margin-top:44px;
}

.note-text,
.hero-grid p,
.final-cta p,
.section-intro{
  max-width:760px;
  font-size:clamp(18px,1.85vw,27px);
  line-height:1.5;
  letter-spacing:-.025em;
}

.section-intro{
  margin:26px 0 0;
  color:var(--muted-ink);
}

.dark-section .section-intro{
  color:var(--muted);
}

.primary-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 28px;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  font-weight:950;
  white-space:nowrap;
  box-shadow:0 26px 70px rgba(13,13,11,.13);
  transition:transform .25s ease, box-shadow .25s ease;
}

.primary-link:hover{
  transform:translateY(-3px);
  box-shadow:0 32px 90px rgba(13,13,11,.20);
}

.primary-link.final{
  padding:21px 36px;
  font-size:clamp(20px,2vw,30px);
}

.hero-scroll-hint{display:none!important}

.split{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(44px,8vw,150px);
  align-items:start;
}

/* =========================================================
   Cards / Grids
   ========================================================= */

.symptom-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:64px;
  background:rgba(243,236,222,.14);
}

.symptom-list article,
.question-map article,
.before-after>div,
.dossier-table>div{
  position:relative;
  overflow:hidden;
}

.symptom-list article{
  min-height:260px;
  padding:28px;
  background:#080807;
  border:1px solid rgba(243,236,222,.08);
}

.symptom-list span,
.question-map span,
.before-after span,
.dossier-table span{
  color:var(--green);
  font-size:12px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.symptom-list strong{
  display:block;
  margin-top:28px;
  font-family:var(--serif);
  font-size:clamp(27px,2.8vw,46px);
  line-height:.95;
  letter-spacing:-.055em;
}

.symptom-list p,
.before-after p,
.dossier-table p{
  color:var(--muted);
}

.symptom-list p{margin-top:26px}

.question-map{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:60px;
  background:rgba(13,13,11,.12);
}

.question-map::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(13,13,11,.12),transparent 30%);
  pointer-events:none;
}

.question-map article{
  min-height:245px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px;
  background:var(--cream);
  transition:transform .45s var(--ease),background .45s ease;
}

.question-map article:hover{
  z-index:2;
  transform:translateY(-8px);
  background:var(--cream-soft);
}

.question-map strong{
  font-family:var(--serif);
  font-size:clamp(27px,2.5vw,40px);
  line-height:1;
  letter-spacing:-.055em;
}

.symptom-list article::before,
.question-map article::before,
.before-after>div::before,
.dossier-table>div::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:2px;
  background:currentColor;
  opacity:.85;
  transition:width .85s var(--ease);
}

.symptom-list article.is-awake::before,
.question-map article.is-awake::before,
.before-after>div.is-awake::before,
.dossier-table>div.is-awake::before{
  width:100%;
}

.before-after{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin-top:18px;
  background:rgba(243,236,222,.15);
}

.before-after>div{
  padding:28px;
  background:#090908;
  border:1px solid rgba(243,236,222,.08);
}

.before-after strong{
  display:block;
  margin-top:16px;
  font-family:var(--serif);
  font-size:clamp(31px,3.4vw,58px);
  line-height:.9;
  letter-spacing:-.06em;
}

.dossier-table{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:60px;
  background:rgba(243,236,222,.13);
}

.dossier-table>div{
  min-height:220px;
  padding:26px;
  background:#080807;
  border:1px solid rgba(243,236,222,.08);
}

/* =========================================================
   Archivo del Laboratorio · 3 + 3
   ========================================================= */

.archive-section .section-intro{
  max-width:720px;
  margin-bottom:clamp(42px,6vw,86px);
}

.archive-preview{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch;
  margin-top:clamp(44px,6vw,86px);
}

.archive-preview-card{
  position:relative;
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  padding:clamp(24px,2.4vw,36px);
  border:1px solid rgba(13,13,11,.14);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(243,236,222,.74),rgba(236,229,216,.62));
  color:var(--ink);
  cursor:default;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:
    transform .45s var(--ease),
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease,
    opacity .45s ease;
}

.archive-preview-card:hover{
  transform:translateY(-8px);
  border-color:rgba(13,13,11,.32);
  background:
    linear-gradient(180deg,rgba(248,242,232,.96),rgba(239,232,219,.82));
  box-shadow:
    0 28px 80px rgba(13,13,11,.12),
    inset 0 0 0 1px rgba(13,13,11,.05);
}

.archive-preview-card.is-available{
  cursor:pointer;
}

.archive-preview-card.is-available::after{
  content:'Abrir expediente →';
  position:absolute;
  right:28px;
  bottom:28px;
  color:rgba(13,13,11,.72);
  font:900 11px/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.archive-preview-card.is-locked{
  opacity:.58;
}

.archive-preview-num{
  color:rgba(13,13,11,.62);
  font:700 clamp(42px,4.2vw,68px)/1 var(--serif);
  letter-spacing:-.04em;
}

.archive-preview-num--open{
  display:inline-flex;
  align-items:flex-start;
  gap:18px;
  color:rgba(13,13,11,.86);
}

.archive-preview-arrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:.56em;
  line-height:1;
  opacity:.92;
  transform:translateY(.08em);
  transition:transform .45s var(--ease), opacity .35s ease;
}

.archive-preview-card.is-available:hover .archive-preview-arrow{
  transform:translate(4px,-4px) rotate(18deg);
}

.archive-preview-sketch{
  height:clamp(145px,14vw,210px);
  margin:16px 0 22px;
  border:0;
  background:transparent;
  box-shadow:none;
  opacity:.72;
}

.archive-preview-sketch svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.archive-preview-sketch svg path{
  fill:none;
  stroke:rgba(13,13,11,.24);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}

.archive-preview-sketch svg text{
  fill:rgba(13,13,11,.28);
  font:800 11px/1 var(--sans);
  letter-spacing:.18em;
}

.archive-preview-card.is-available .archive-preview-sketch svg path{
  stroke:rgba(13,13,11,.32);
}

.archive-preview-card.is-available .archive-preview-sketch svg text{
  fill:rgba(13,13,11,.38);
}

.archive-preview-card.is-available:hover .archive-preview-sketch svg path{
  stroke:rgba(13,13,11,.42);
}

.archive-preview-card.is-available:hover .archive-preview-sketch svg text{
  fill:rgba(13,13,11,.48);
}

.archive-preview-card.is-locked .archive-preview-sketch{
  opacity:.42;
}

.archive-preview-card strong{
  max-width:92%;
  margin-top:8px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(34px,3.7vw,62px);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.045em;
}

.archive-preview-card em,
.archive-preview-card small{
  color:rgba(13,13,11,.52);
  font-style:normal;
  font-size:12px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.archive-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
}

.archive-status span{
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 18px rgba(90,141,124,.36);
}

.archive-preview-card.is-available small.archive-status{
  color:rgba(59,127,106,.9);
}

.archive-preview-card--more{
  display:none!important;
  opacity:0;
  transform:translateY(28px) scale(.985);
}

.archive-preview.is-expanded .archive-preview-card--more{
  display:flex!important;
  opacity:.58;
  transform:none;
  animation:archiveMoreIn .72s var(--ease) both;
}

.archive-preview.is-expanded .archive-preview-card--more:nth-last-child(3){animation-delay:.04s}
.archive-preview.is-expanded .archive-preview-card--more:nth-last-child(2){animation-delay:.10s}
.archive-preview.is-expanded .archive-preview-card--more:nth-last-child(1){animation-delay:.16s}

@keyframes archiveMoreIn{
  from{opacity:0;transform:translateY(32px) scale(.98);filter:blur(10px)}
  to{opacity:.58;transform:none;filter:none}
}

.archive-more-btn{
  position:relative!important;
  z-index:4!important;
  left:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:clamp(28px,4vw,54px) auto 0!important;
  padding:15px 22px!important;
  min-width:210px!important;
  border:1px solid rgba(13,13,11,.18)!important;
  border-radius:999px!important;
  background:rgba(243,236,222,.54)!important;
  color:rgba(13,13,11,.72)!important;
  backdrop-filter:blur(16px)!important;
  font:900 11px/1 var(--sans)!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  transform:translateX(-50%)!important;
  transition:
    transform .35s var(--ease),
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    box-shadow .35s ease!important;
}

.archive-more-btn:hover,
.archive-more-btn.is-open{
  transform:translateX(-50%) translateY(-3px)!important;
  background:rgba(13,13,11,.90)!important;
  border-color:rgba(13,13,11,.72)!important;
  color:var(--cream)!important;
  box-shadow:0 24px 70px rgba(13,13,11,.14)!important;
}

.archive-more-btn::after{
  content:'↓'!important;
  display:inline-block!important;
  margin-left:12px!important;
  font-size:inherit!important;
  transition:transform .35s var(--ease)!important;
}

.archive-more-btn.is-open::after{
  transform:rotate(180deg)!important;
}

.archive-preview.is-expanded + .archive-more-btn{
  margin-top:clamp(34px,5vw,64px)!important;
}

/* =========================================================
   Final CTA / Footer
   ========================================================= */

.final-cta{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--black);
  color:var(--cream);
}

.final-cta h3{
  max-width:1120px;
}

.final-cta p{
  color:var(--muted);
}

.final-dot{
  width:16px;
  height:16px;
  margin-bottom:36px;
  border-radius:50%;
  background:var(--cream);
  box-shadow:
    0 0 0 14px rgba(243,236,222,.06),
    0 0 48px rgba(243,236,222,.30);
  animation:finalPulse 3.8s ease-in-out infinite;
}

@keyframes finalPulse{
  0%,100%{transform:scale(.9);opacity:.65}
  50%{transform:scale(1.15);opacity:1}
}

.site-footer{
  padding:40px clamp(20px,4vw,72px);
  background:var(--black);
  color:rgba(243,236,222,.72);
}

.footer-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-width:760px;
}

.footer-inner>div{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-inner p{
  margin:0;
  color:rgba(243,236,222,.78);
  font-family:var(--serif);
  font-size:clamp(20px,2vw,32px);
  font-style:italic;
}

.footer-wa{
  width:max-content;
  color:rgba(243,236,222,.66);
  transition:color .3s ease;
}

.footer-wa:hover{
  color:var(--cream);
}

/* =========================================================
   Reveals
   ========================================================= */

.reveal-mask,
.reveal-line,
[data-card]{
  opacity:0;
  transform:translateY(40px);
  filter:blur(12px);
  transition:
    opacity 1s ease,
    transform 1s var(--ease),
    filter 1s ease;
}

.is-inview .reveal-mask,
.is-inview .reveal-line,
.is-inview [data-card]{
  opacity:1;
  transform:none;
  filter:none;
}

.is-inview .reveal-line:nth-child(2),
.is-inview [data-card]:nth-child(2){transition-delay:.08s}

.is-inview .reveal-line:nth-child(3),
.is-inview [data-card]:nth-child(3){transition-delay:.16s}

.is-inview [data-card]:nth-child(4){transition-delay:.24s}
.is-inview [data-card]:nth-child(5){transition-delay:.32s}
.is-inview [data-card]:nth-child(6){transition-delay:.40s}
.is-inview [data-card]:nth-child(7){transition-delay:.48s}
.is-inview [data-card]:nth-child(8){transition-delay:.56s}

.is-inview .backword{
  --drift:34px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:980px){
  .nav{
    grid-template-columns:1fr auto;
  }

  .nav-links{
    display:none;
  }

  .nav-cta{
    padding:10px 14px;
    font-size:12px;
  }

  .section{
    padding:96px 20px;
  }

  .hero-grid,
  .split{
    grid-template-columns:1fr;
  }

  .cinema-title,
  .section h3{
    font-size:clamp(44px,12.5vw,82px);
    line-height:.98;
  }

  .intro-copy{
    bottom:120px;
  }

  .intro-copy h1{
    font-size:clamp(54px,15.5vw,92px);
    line-height:.96;
    letter-spacing:-.03em;
  }

  .intro__hint{
    left:20px;
    transform:none;
    letter-spacing:.22em;
  }

  .backword{
    font-size:29vw;
  }

  .symptom-list,
  .question-map,
  .dossier-table,
  .archive-preview{
    grid-template-columns:1fr;
  }

  .archive-preview-card{
    min-height:330px;
  }

  .archive-preview-card.is-available::after{
    position:static;
    display:block;
    margin-top:20px;
  }

  .archive-more-btn{
    width:100%!important;
    left:auto!important;
    transform:none!important;
  }

  .archive-more-btn:hover,
  .archive-more-btn.is-open{
    transform:translateY(-2px)!important;
  }

  .presence-canvas{
    z-index:50;
  }

  .intro .presence-canvas{
    z-index:90;
  }

  .pointer-whatsapp,
  .pointer-whatsapp__icon{
    width:56px;
    height:56px;
  }

  .pointer-whatsapp__icon svg{
    width:34px;
    height:34px;
  }
}

@media(max-width:700px){
  .scroll-instruction{
    top:54%;
    padding:12px 14px;
  }

  .scroll-instruction span:last-child{
    font-size:10px;
    letter-spacing:.12em;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }

  .reveal-mask,
  .reveal-line,
  [data-card],
  .intro-copy__index,
  .intro-copy h1,
  .intro-copy p{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

/* =========================================================
   Footer · Wuawuara Signature Final
   Cierre de laboratorio: logo grande, centrado y con aire.
   ========================================================= */
.site-footer{
  position:relative;
  overflow:hidden;
  padding:clamp(96px,11vw,170px) clamp(20px,4vw,72px) clamp(80px,8vw,126px)!important;
  background:
    radial-gradient(circle at 50% 24%, rgba(243,236,222,.055), transparent 32%),
    radial-gradient(circle at 50% 72%, rgba(107,224,174,.055), transparent 30%),
    #050505!important;
  color:rgba(243,236,222,.78)!important;
  border-top:1px solid rgba(243,236,222,.075);
}
.site-footer::before{
  content:'';
  position:absolute;
  inset:-30%;
  background-image:
    radial-gradient(circle at 25% 20%,rgba(243,236,222,.08) 0 1px,transparent 1px),
    radial-gradient(circle at 76% 60%,rgba(243,236,222,.045) 0 1px,transparent 1px);
  background-size:26px 26px,41px 41px;
  opacity:.14;
  pointer-events:none;
}
.footer-inner{
  position:relative;
  z-index:2;
  max-width:min(980px,92vw)!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(28px,4vw,48px)!important;
  text-align:center!important;
}
.footer-inner>div{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
}
.footer-logo{
  width:clamp(190px,18vw,320px)!important;
  max-width:82vw!important;
  height:auto!important;
  display:block!important;
  opacity:.92;
  filter:
    drop-shadow(0 0 30px rgba(243,236,222,.10))
    drop-shadow(0 26px 80px rgba(0,0,0,.38));
  transform:translateZ(0);
}
.footer-inner p{
  max-width:900px!important;
  margin:0!important;
  color:rgba(243,236,222,.84)!important;
  font-family:var(--serif)!important;
  font-size:clamp(34px,4.6vw,76px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  font-style:italic!important;
  text-wrap:balance;
}
.footer-wa{
  width:max-content!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:clamp(2px,1vw,10px)!important;
  padding:14px 20px!important;
  border:1px solid rgba(243,236,222,.14);
  border-radius:999px;
  background:rgba(243,236,222,.035);
  color:rgba(243,236,222,.62)!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:.04em;
  transition:transform .35s var(--ease), color .35s ease, border-color .35s ease, background .35s ease;
}
.footer-wa:hover{
  transform:translateY(-2px);
  color:#fff!important;
  border-color:rgba(107,224,174,.36);
  background:rgba(107,224,174,.08);
}
@media(max-width:700px){
  .site-footer{
    padding:88px 20px 72px!important;
  }
  .footer-logo{
    width:clamp(178px,54vw,260px)!important;
  }
  .footer-inner p{
    font-size:clamp(32px,10.8vw,56px)!important;
    line-height:1.03!important;
  }
  .footer-wa{
    font-size:12px!important;
    letter-spacing:.02em!important;
  }
}


/* =========================================================
   WUAWUARA · Mobile emergency fix v18.2
   Corrige cortes de texto, CTA y pointer en mobile.
   ========================================================= */
@media (max-width: 700px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  .presence-canvas{
    opacity:.46!important;
  }

  .pointer-cue{
    opacity:.38!important;
    transform:translate(16px,-50%) scale(.9)!important;
    font-size:9px!important;
  }

  .pointer-cue.is-visible{
    opacity:.50!important;
  }

  body.wuaw-mobile-autostart .pointer-cue.is-visible{
    animation:wuaw-mobile-cue-blink .32s ease-in-out 0s 4 alternate both;
  }

  @keyframes wuaw-mobile-cue-blink{
    from{opacity:.15; filter:blur(1px);}
    to{opacity:.72; filter:blur(0);}
  }

  .scroll-instruction,
  .hero-scroll-hint{
    display:none!important;
  }

  .nav{
    height:78px;
    padding:0 24px;
  }

  .section{
    width:100%;
    max-width:100%;
    padding-left:22px!important;
    padding-right:22px!important;
    overflow:hidden;
  }

  .hero{
    min-height:auto!important;
    padding-top:96px!important;
    padding-bottom:92px!important;
  }

  .cinema-title,
  .section h3{
    width:100%;
    max-width:100%;
    font-size:clamp(58px,17.2vw,76px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
    overflow-wrap:normal;
  }

  .hero-grid{
    width:100%;
    max-width:100%;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:34px!important;
    margin-top:52px!important;
  }

  .note-text,
  .hero-grid p,
  .section-intro,
  .final-cta p{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:clamp(21px,6.1vw,26px)!important;
    line-height:1.46!important;
    letter-spacing:-.035em!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    text-wrap:pretty;
  }

  .primary-link{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    padding:18px 22px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.08!important;
    font-size:clamp(18px,5.3vw,23px)!important;
    border-radius:999px!important;
    overflow:hidden!important;
  }

  .symptom-list,
  .question-map,
  .dossier-table,
  .archive-preview{
    width:100%!important;
    max-width:100%!important;
  }

  .archive-preview-card{
    width:100%!important;
    min-height:auto!important;
    padding:24px!important;
    border-radius:22px!important;
  }

  .archive-preview-card strong{
    font-size:clamp(42px,13vw,56px)!important;
  }

  .archive-preview-sketch{
    height:118px!important;
    margin:14px 0 18px!important;
  }
}

@media (max-width: 390px){
  .cinema-title,
  .section h3{
    font-size:clamp(54px,16.4vw,70px)!important;
  }

  .note-text,
  .hero-grid p,
  .section-intro,
  .final-cta p{
    font-size:clamp(20px,5.7vw,24px)!important;
  }
}