/* =====================================================================
   LAPC · Calistenia & Coaching — Sistema de diseño
   Un solo archivo. Editá los tokens de abajo y cambia todo el sitio.
   ===================================================================== */

/* ------------------------------ 1. TOKENS ------------------------------ */
:root{
  /* Superficies (oscuro cálido, no negro puro: es más agradable a la vista) */
  --bg:        #0C0B0A;
  --bg-1:      #131211;
  --bg-2:      #1A1917;
  --bg-3:      #232120;

  /* Líneas */
  --line:      rgba(237,234,227,.10);
  --line-2:    rgba(237,234,227,.20);

  /* Texto */
  --fg:        #F2EFE9;
  --fg-2:      #B9B3A8;
  --fg-3:      #8B857B;

  /* Acento */
  --gold:      #E3A33B;
  --gold-2:    #F3C877;
  --gold-3:    #B57F22;
  --gold-soft: rgba(227,163,59,.12);
  --gold-line: rgba(227,163,59,.32);

  /* Tipografía */
  --f-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-quote:   'Fraunces', Georgia, 'Times New Roman', serif;

  /* Ritmo */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:      1240px;
  --maxw-text: 68ch;
  --sec-y:     clamp(4.5rem, 9vw, 8.5rem);
  --radius:    14px;
  --radius-lg: 22px;

  /* Movimiento */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ------------------------------ 2. RESET ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  /* 17px de base: este sitio lo van a leer personas de 70 años. */
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:800; line-height:1.06; letter-spacing:-.025em; }
/* El navegador le mete márgenes propios a estos: si no los sacás, rompen las grillas. */
p,figure,figcaption,blockquote,dl,dt,dd{ margin:0; }
::selection{ background:var(--gold); color:#0C0B0A; }

/* Foco visible y coherente en todo el sitio (accesibilidad) */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* Grano sutil sobre todo el sitio: le saca el aspecto "plano de plantilla" */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------- 3. UTILIDADES --------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:880px; }
.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.bg-1{ background:var(--bg-1); }
.bg-2{ background:var(--bg-2); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.center{ text-align:center; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:1000;
  background:var(--gold); color:#0C0B0A; padding:.75rem 1.25rem;
  border-radius:0 0 10px 10px; font-weight:700; transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

/* --------------------------- 4. TIPOGRAFÍA --------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-body); font-size:.75rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.25rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.6; flex:none;
}
.eyebrow--plain::before{ display:none; }

.d1{ font-size:clamp(2.05rem, 6.6vw, 5.4rem); }
.d2{ font-size:clamp(1.8rem, 5vw, 3.8rem); }
.h2 { font-size:clamp(1.6rem, 3.9vw, 3rem); }
.h3 { font-size:clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing:-.015em; line-height:1.25; }
.h4 { font-size:1.05rem; letter-spacing:-.01em; font-weight:700; }

/* Saltos de línea que solo tienen sentido en pantallas anchas.
   En celular estorban, así que se apagan y el texto fluye solo. */
.br-desk{ display:none; }
@media (min-width:900px){ .br-desk{ display:inline; } }

.lead{
  font-size:clamp(1.075rem, 1.5vw, 1.3rem);
  line-height:1.65; color:var(--fg-2); max-width:60ch;
}
.body{ color:var(--fg-2); max-width:var(--maxw-text); }
.body + .body{ margin-top:1.15rem; }
.body strong, .lead strong{ color:var(--fg); font-weight:600; }
.gold{ color:var(--gold); }
.dim{ color:var(--fg-3); }
.small{ font-size:.875rem; line-height:1.6; }

/* Marca tipográfica del sitio: subrayado dorado tipo resaltador */
.mark{
  color:var(--fg); position:relative; white-space:nowrap;
  background-image:linear-gradient(var(--gold-line), var(--gold-line));
  background-repeat:no-repeat;
  background-size:100% .32em;
  background-position:0 88%;
}

/* ----------------------------- 5. BOTONES ----------------------------- */
.btn{
  --btn-bg:var(--gold); --btn-fg:#0C0B0A; --btn-bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.6rem; min-height:52px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:100px;
  font-family:var(--f-body); font-weight:600; font-size:1rem; letter-spacing:-.005em;
  text-align:center; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(227,163,59,.55); }
.btn:active{ transform:translateY(0); }
.btn svg{ flex:none; }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--line-2); }
.btn--ghost:hover{ --btn-bd:var(--gold); --btn-fg:var(--gold); box-shadow:none; }

.btn--lg{ padding:1.15rem 2.1rem; min-height:60px; font-size:1.05rem; }
.btn--full{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Enlace con flecha */
.arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; color:var(--gold); font-size:.95rem;
}
.arrow svg{ transition:transform .3s var(--ease); }
.arrow:hover svg{ transform:translateX(5px); }

/* ------------------------------ 6. HEADER ------------------------------ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(12,11,10,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:76px;
}
@media (min-width:1000px){ .header__inner{ height:86px; } }

/* Logotipo tipográfico (sirve tal cual hasta que tengas un logo dibujado) */
.logo{ display:flex; align-items:center; gap:.7rem; flex:none; }
.logo__mark{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1rem, 2.4vw, 1.18rem);
  letter-spacing:-.03em; line-height:1.1; color:var(--fg); white-space:nowrap;
}
.logo__mark span{ color:var(--gold); }
.logo__sub{
  display:none; padding-left:.7rem; border-left:1px solid var(--line-2);
  font-size:.6rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--fg-3); line-height:1.45; white-space:nowrap;
}
@media (min-width:560px){ .logo__sub{ display:block; } }

.nav{ display:none; }
@media (min-width:1000px){
  .nav{ display:flex; align-items:center; gap:.35rem; }
  .nav a{
    padding:.6rem .95rem; border-radius:100px;
    font-size:.9rem; font-weight:500; color:var(--fg-2);
    transition:color .2s var(--ease), background .2s var(--ease);
  }
  .nav a:hover{ color:var(--fg); background:rgba(255,255,255,.05); }
  .nav a[aria-current="page"]{ color:var(--gold); }
}
.header__cta{ display:none; }
@media (min-width:1000px){
  .header__cta{ display:inline-flex; padding:.8rem 1.4rem; min-height:46px; font-size:.92rem; }
}

/* Botón hamburguesa */
/* Flex con gap explícito, no grid: así la distancia entre barras es exacta
   y las diagonales de la "X" cierran justo en el centro. */
.burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:46px; height:46px; flex:none;
  border:1px solid var(--line-2); border-radius:12px;
}
@media (min-width:1000px){ .burger{ display:none; } }
.burger span{
  display:block; width:20px; height:2px; background:var(--fg); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menú móvil */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--bg); padding:96px var(--gutter) 2.5rem;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  /* La visibilidad se apaga RECIÉN al terminar el fundido de salida, pero se
     enciende al instante al abrir: si no, el foco del teclado no puede entrar. */
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  overflow-y:auto;
}
.drawer.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
@media (min-width:1000px){ .drawer{ display:none !important; } }
.drawer__link{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em;
}
.drawer__link i{
  font-style:normal; font-family:var(--f-body); font-size:.7rem;
  font-weight:600; color:var(--gold); letter-spacing:.1em;
}
.drawer__foot{ margin-top:auto; padding-top:2rem; display:grid; gap:.85rem; }
body.is-locked{ overflow:hidden; }

/* ------------------------------- 7. HERO ------------------------------- */
.hero{ position:relative; display:flex; align-items:flex-end; isolation:isolate; overflow:hidden; }
.hero--home{ min-height:min(100svh, 940px); padding-block:clamp(7rem,17vw,9rem) clamp(2.5rem,6vw,4rem); }
.hero--page{ min-height:min(78svh, 760px); padding-block:clamp(7rem,17vw,9rem) clamp(2.25rem,5vw,3.5rem); }

.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(12,11,10,.88) 0%, rgba(12,11,10,.42) 32%, rgba(12,11,10,.80) 72%, var(--bg) 100%),
    linear-gradient(90deg, rgba(12,11,10,.86) 0%, rgba(12,11,10,.30) 62%, rgba(12,11,10,.55) 100%);
}
.hero__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.hero__title{ max-width:16ch; }
.hero--page .hero__title{ max-width:19ch; }
.hero__lead{ margin-top:1.6rem; max-width:54ch; }
.hero__actions{ margin-top:2.4rem; }
.hero__note{
  margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem 1.35rem;
  font-size:.85rem; color:var(--fg-3);
}
.hero__note li{ display:flex; align-items:center; gap:.45rem; }
.hero__note li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }

/* Indicador de scroll */
.scrollhint{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:none; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-3); align-items:center; gap:.6rem; flex-direction:column;
}
@media (min-width:900px){ .scrollhint{ display:flex; } }
.scrollhint i{ display:block; width:1px; height:38px; background:linear-gradient(var(--gold), transparent); }

/* ------------------- 8. LOS 4 ACCESOS (grilla portal) ------------------- */
.portal{ display:grid; gap:2px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:680px){ .portal{ grid-template-columns:1fr 1fr; } }
@media (min-width:1180px){ .portal{ grid-template-columns:repeat(4,1fr); } }

.portal__item{
  position:relative; isolation:isolate; overflow:hidden; background:var(--bg-1);
  min-height:clamp(300px, 42vw, 440px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.6rem,3vw,2.2rem);
  transition:background .4s var(--ease);
}
.portal__item img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; filter:grayscale(1) brightness(.5) contrast(1.05);
  transform:scale(1.04);
  transition:transform .8s var(--ease-out), filter .6s var(--ease);
}
.portal__item::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,11,10,.30) 0%, rgba(12,11,10,.62) 45%, rgba(12,11,10,.94) 100%);
  transition:background .5s var(--ease);
}
.portal__item:hover img, .portal__item:focus-visible img{
  transform:scale(1.11); filter:grayscale(.15) brightness(.62) contrast(1.05);
}
.portal__item:hover::after{
  background:linear-gradient(180deg, rgba(12,11,10,.18) 0%, rgba(12,11,10,.55) 42%, rgba(12,11,10,.95) 100%);
}
.portal__n{
  position:absolute; top:clamp(1.4rem,3vw,2rem); left:clamp(1.6rem,3vw,2.2rem);
  font-family:var(--f-display); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; color:var(--gold);
}
.portal__title{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(1.4rem, 2.1vw, 1.72rem);
}
.portal__desc{
  margin-top:.7rem; color:var(--fg-2); font-size:.94rem; line-height:1.55;
  max-width:30ch;
}
.portal__go{
  margin-top:1.3rem; display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
}
.portal__go svg{ transition:transform .3s var(--ease); }
.portal__item:hover .portal__go svg{ transform:translateX(6px); }

/* --------------------------- 9. MANIFIESTO --------------------------- */
.manifesto{ position:relative; overflow:hidden; }
.manifesto__bg{ position:absolute; inset:0; z-index:0; }
.manifesto__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.32); }
.manifesto__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(12,11,10,.80) 40%, rgba(12,11,10,.88) 60%, var(--bg) 100%);
}
.manifesto .wrap{ position:relative; z-index:1; }

.quote{
  font-family:var(--f-quote); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem, 4.1vw, 3rem); line-height:1.24; letter-spacing:-.02em;
  color:var(--fg); max-width:22ch; margin:0;
}
.quote--wide{ max-width:26ch; }
.quote__cite{
  display:block; margin-top:1.6rem; font-family:var(--f-body); font-style:normal;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}

/* ---------------------- 10. PILARES DEL MÉTODO ---------------------- */
.pilares{ display:grid; gap:1.5rem; margin-top:3.5rem; }
@media (min-width:820px){ .pilares{ grid-template-columns:repeat(3,1fr); gap:1.25rem; } }

.pilar{
  position:relative; padding:2.2rem 1.9rem 2rem;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.pilar:hover{ border-color:var(--gold-line); transform:translateY(-4px); background:var(--bg-2); }
.pilar__n{
  font-family:var(--f-display); font-size:.75rem; font-weight:700;
  letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:1.5rem;
}
.pilar__icon{
  width:44px; height:44px; margin-bottom:1.35rem; display:grid; place-items:center;
  border-radius:12px; background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--gold);
}
.pilar h3{ margin-bottom:.85rem; }
.pilar p{ color:var(--fg-2); font-size:.97rem; }
.pilar__foot{
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--fg-3);
}

/* ---------------------- 11. TARJETAS GENÉRICAS ---------------------- */
.grid{ display:grid; gap:1.25rem; }
.grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
@media (min-width:680px){
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1020px){
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
}

.card{
  padding:1.9rem 1.7rem; background:var(--bg-1);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover{ border-color:var(--line-2); background:var(--bg-2); }
.card h3, .card h4{ margin-bottom:.7rem; }
.card p{ color:var(--fg-2); font-size:.95rem; }
.card__icon{
  width:40px; height:40px; margin-bottom:1.2rem; display:grid; place-items:center;
  border-radius:10px; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line);
}
.card--flat{ background:transparent; }
.card--flat:hover{ background:transparent; border-color:var(--gold-line); }

/* Tarjeta "no": para las secciones de lo que NO hacemos */
.card--no{ border-style:dashed; }
.card--no h4{ color:var(--fg-2); }
.card--no p{ color:var(--fg-3); font-size:.9rem; }
.card--no .card__icon{ background:transparent; border-color:var(--line); color:var(--fg-3); }

/* ------------------------- 12. LISTA DE CHECKS ------------------------- */
.checks{ display:grid; gap:1.05rem; margin-top:2rem; }
.checks li{ display:flex; gap:.95rem; align-items:flex-start; color:var(--fg-2); }
.checks li b{ color:var(--fg); font-weight:600; }
.checks svg{ flex:none; margin-top:.32em; color:var(--gold); }

/* -------------------------- 13. SPLIT (2 col) -------------------------- */
.split{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:940px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--wide-text{ grid-template-columns:1.15fr .85fr; }
  .split--wide-media{ grid-template-columns:.85fr 1.15fr; }
  .split--flip > *:first-child{ order:2; }
}
.split__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.split__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split__media--wide img{ aspect-ratio:3/2; }
.split__media--square img{ aspect-ratio:1/1; }
.split__media::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(180deg, transparent 55%, rgba(12,11,10,.45) 100%);
}
.split__tag{
  position:absolute; z-index:2; left:1.1rem; bottom:1.1rem;
  background:rgba(12,11,10,.78); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:100px;
  padding:.55rem 1rem; font-size:.78rem; color:var(--fg-2);
}

/* ------------------- 13 bis. ARCHIVO (fotos de 2013) ------------------- */
/* Fotos viejas en blanco y negro: se leen como documento, no como foto mala.
   Cada fila reparte el ancho según la proporción de cada foto (--r = ancho/alto),
   así las de una misma fila quedan a la misma altura sin recortarle nada a nadie. */
.archivo{ margin-top:clamp(4rem,8vw,6rem); }
.archivo__fila{ display:flex; flex-direction:column; gap:1.25rem; }
.archivo__fila + .archivo__fila{ margin-top:1.25rem; }
@media (min-width:680px){
  .archivo__fila{ flex-direction:row; align-items:flex-start; }
  .archivo__fila > figure{ flex:var(--r,1) 1 0; min-width:0; }
}
.archivo img{
  width:100%; border-radius:var(--radius); border:1px solid var(--line);
  filter:grayscale(1) sepia(.18) contrast(1.06) brightness(.9);
  transition:filter .6s ease;
}
.archivo figure:hover img{ filter:none; }
.archivo figcaption{ margin-top:.7rem; font-size:.86rem; line-height:1.55; color:var(--fg-3); }
.archivo figcaption b{ color:var(--fg-2); font-weight:600; }

/* ---------------------------- 14. NÚMEROS ---------------------------- */
.stats{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
@media (min-width:560px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--bg-1); padding:2rem 1.6rem; text-align:center; }
.stat__n{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.04em; line-height:1;
  font-size:clamp(2.2rem,4.2vw,3.1rem); color:var(--gold);
}
.stat__l{ margin-top:.7rem; font-size:.85rem; color:var(--fg-2); line-height:1.45; }

/* --------------------------- 15. TIMELINE --------------------------- */
.timeline{ display:grid; gap:0; margin-top:3rem; }
.tl{ position:relative; padding:0 0 2.4rem 3.4rem; border-left:1px solid var(--line); }
.tl:last-child{ border-left-color:transparent; padding-bottom:0; }
.tl__dot{
  position:absolute; left:-13px; top:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--bg); border:1px solid var(--gold-line);
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:.66rem; font-weight:700; color:var(--gold);
}
.tl h4{ margin-bottom:.55rem; }
.tl p{ color:var(--fg-2); font-size:.96rem; max-width:60ch; }
.tl__meta{
  display:block; margin-bottom:.4rem; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
}

/* -------------------------- 16. TESTIMONIOS -------------------------- */
.testis{ display:grid; gap:1.25rem; margin-top:3rem; }
@media (min-width:820px){ .testis{ grid-template-columns:repeat(3,1fr); } }
.testi{
  display:flex; flex-direction:column;
  padding:2rem 1.8rem; background:var(--bg-1);
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.testi__stars{ display:flex; gap:.2rem; color:var(--gold); margin-bottom:1.25rem; }
.testi__text{
  font-family:var(--f-quote); font-style:italic; font-size:1.1rem; line-height:1.55;
  color:var(--fg); flex:1;
}
.testi__who{
  margin-top:1.6rem; padding-top:1.25rem; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.9rem;
}
.testi__av{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--gold-soft); border:1px solid var(--gold-line);
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:.9rem; color:var(--gold);
}
.testi__name{ font-weight:600; font-size:.95rem; line-height:1.3; }
.testi__meta{ font-size:.82rem; color:var(--fg-3); }

/* ----------------------------- 17. FAQ ----------------------------- */
.faq{ margin-top:2.5rem; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.02rem,1.5vw,1.15rem);
  letter-spacing:-.015em; line-height:1.35;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold); }
.faq summary .pm{
  flex:none; width:26px; height:26px; margin-top:.1rem; position:relative;
  border:1px solid var(--line-2); border-radius:50%;
  transition:border-color .25s var(--ease);
}
.faq summary .pm::before, .faq summary .pm::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:10px; height:1.5px; background:var(--gold); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.faq summary .pm::after{ transform:rotate(90deg); }
.faq details[open] summary .pm{ border-color:var(--gold-line); }
.faq details[open] summary .pm::after{ transform:rotate(0); opacity:0; }
.faq__a{ padding:0 0 1.6rem; color:var(--fg-2); max-width:70ch; font-size:.97rem; }
.faq__a p + p{ margin-top:.9rem; }

/* ---------------------------- 18. AVISO ---------------------------- */
.note{
  position:relative; padding:1.9rem 1.8rem 1.9rem 2.1rem;
  background:var(--gold-soft); border:1px solid var(--gold-line);
  border-radius:var(--radius); overflow:hidden;
}
.note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); }
.note h4{ color:var(--gold); margin-bottom:.7rem; }
.note p{ color:var(--fg-2); font-size:.96rem; }
.note p + p{ margin-top:.8rem; }
.note--neutral{ background:var(--bg-2); border-color:var(--line-2); }
.note--neutral::before{ background:var(--line-2); }
.note--neutral h4{ color:var(--fg); }

/* ----------------------------- 19. SEDE ----------------------------- */
/* Google no deja poner el mapa en modo oscuro sin clave de API, así que lo
   invertimos y le rotamos el tono 180°: los blancos se vuelven oscuros y los
   colores vuelven a su lugar. El parque sigue verde y el pin sigue rojo. */
.mapa{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2);
  filter:invert(.92) hue-rotate(180deg) saturate(.65) contrast(.9);
}
.mapa iframe{ width:100%; height:clamp(320px,44vw,480px); border:0; }

.datos{ display:grid; gap:1.6rem; }
.dato{ display:flex; gap:1.05rem; align-items:flex-start; }
.dato__ic{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--gold);
}
.dato dt{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:.25rem; }
.dato dd{ margin:0; font-size:1rem; color:var(--fg); line-height:1.5; }
.dato dd a:hover{ color:var(--gold); }

/* ----------------------------- 20. CTA ----------------------------- */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:clamp(20px,3vw,34px);
  padding:clamp(3rem,7vw,5.5rem) clamp(1.8rem,5vw,4.5rem);
  border:1px solid var(--gold-line);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(227,163,59,.16) 0%, transparent 58%),
    radial-gradient(100% 120% at 100% 100%, rgba(227,163,59,.08) 0%, transparent 55%),
    var(--bg-1);
}
.cta__title{ max-width:19ch; }
.cta .lead{ margin-top:1.35rem; }
.cta .btn-row{ margin-top:2.4rem; }

/* ---------------------------- 21. FOOTER ---------------------------- */
.footer{ background:var(--bg-1); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer__grid{ display:grid; gap:2.5rem; }
@media (min-width:820px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem; } }
.footer h4{
  font-family:var(--f-body); font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin-bottom:1.15rem;
}
.footer__links li + li{ margin-top:.7rem; }
.footer__links a{ color:var(--fg-2); font-size:.95rem; transition:color .2s var(--ease); }
.footer__links a:hover{ color:var(--gold); }
.footer__blurb{ color:var(--fg-2); font-size:.95rem; max-width:38ch; margin-top:1.35rem; }
.social{ display:flex; gap:.65rem; margin-top:1.6rem; }
.social a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px; color:var(--fg-2);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.footer__bottom{
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-size:.82rem; color:var(--fg-3);
}

/* ------------------------ 22. WHATSAPP FLOTANTE ------------------------ */
.wafloat{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:90;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.3rem .85rem 1rem; min-height:56px;
  background:#22B858; color:#07230F; border-radius:100px; font-weight:600; font-size:.95rem;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.7);
  transform:translateY(120%); opacity:0;
  transition:transform .45s var(--ease-out), opacity .35s var(--ease), background .25s var(--ease);
}
.wafloat.is-in{ transform:none; opacity:1; }
.wafloat:hover{ background:#2ACF66; }
.wafloat span{ display:none; }
@media (min-width:560px){ .wafloat span{ display:inline; } }

/* -------------------- 23. ANIMACIONES DE ENTRADA -------------------- */
/* Ojo con el `.js`: el contenido solo se esconde si el JavaScript arrancó.
   Si el JS está apagado o falla, la página se ve entera igual. Sin esto,
   un error de script dejaría medio sitio invisible. */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .wafloat{ transform:none; opacity:1; transition:none; }
  *{ animation-duration:.001ms !important; }
}

/* ---------------------------- 24. IMPRESIÓN ---------------------------- */
@media print{
  .header,.drawer,.wafloat,.scrollhint{ display:none !important; }
  body::after{ display:none !important; }
  body{ background:#fff; color:#000; }
}