/* ============================================================
   peakbnb — landing
   Color, tipografía y forma salen de peakbnb-tokens.css.
   Acá no se define ningún valor de marca nuevo.
   ============================================================ */

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

/* --pk-blue (#3d7ef7) con texto blanco da 3,80:1 y WCAG AA pide 4,5:1.
   Se usa el mismo azul un punto más oscuro —el que el sistema ya define
   como hover— que da 4,81:1 y a ojo es idéntico. El token no se toca. */
:root{
  --pk-blue-aa:       #2f6fd6;
  --pk-blue-aa-hover: #2a63c0;

  --w-max: 1560px;
  --pad:   clamp(20px, 4vw, 72px);
  --sec:   clamp(76px, 7vw, 124px);

  --ease: cubic-bezier(.22,.68,.28,1);
  --z-nav: 50;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:104px;
}

body{
  margin:0;
  background:var(--pk-white);
  color:var(--pk-midnight);
  font-family:var(--pk-font);
  font-size:var(--pk-web-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* height:auto es obligatorio: sin él, el atributo height del <img> le gana
   al aspect-ratio y la foto se estira a su alto nominal. */
img{max-width:100%;height:auto;display:block}

::selection{background:var(--pk-midnight);color:var(--pk-white)}

:focus-visible{outline:2px solid var(--pk-blue);outline-offset:3px;border-radius:3px}

/* Un <svg> sin width se estira al ancho del padre y dibuja el logo centrado
   adentro. El aspect-ratio del viewBox le devuelve su ancho real.
   El viewBox lleva unos píxeles de aire porque el trazo llegaba justo al
   borde y el redondeo del ancho recortaba la última columna de la "b". */
.logo{
  aspect-ratio:1344.1 / 267.42;
  width:auto;
  flex:0 0 auto;
  color:var(--pk-midnight);
  display:block;
  overflow:visible;
}

/* ---------- Layout ---------- */

.wrap{
  width:100%;
  max-width:var(--w-max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.sec{ padding-block:var(--sec) }
/* Sobre el wash, el gris muted cae a 4,13:1 y no llega a AA. El texto
   secundario sube un escalón de tinta en estas secciones. */
.sec--reporte{ background:var(--pk-wash) }
.sec--reporte .sub, .sec--reporte .meta{ color:var(--pk-body) }

/* ---------- Tipografía ---------- */

.display{
  font-weight:var(--pk-w-bold);
  line-height:var(--pk-display-lh);
  letter-spacing:var(--pk-display-track);
  word-spacing:var(--pk-display-word);
  color:var(--pk-midnight);
  margin:0;
  font-size:clamp(40px,10.5vw,124px);
}

.title{
  font-weight:var(--pk-w-bold);
  font-size:clamp(32px,5.4vw,64px);
  line-height:1.02;
  letter-spacing:-.038em;
  word-spacing:.03em;
  color:var(--pk-midnight);
  margin:0;
  max-width:17ch;
  text-wrap:balance;
}

h3{ font-weight:var(--pk-w-medium); font-size:21px; line-height:1.25; letter-spacing:-.015em; margin:0 }

.sub{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.45;
  color:var(--pk-muted);
  margin:0;
  max-width:44ch;
  text-wrap:pretty;
}

p{ margin:0; color:var(--pk-body); line-height:1.55; text-wrap:pretty }
.lede{ max-width:56ch; font-size:clamp(16px,1.15vw,18px) }
.meta{ font-size:var(--pk-web-meta); color:var(--pk-muted); margin:0 }

.num{ letter-spacing:var(--pk-num-track); font-variant-numeric:tabular-nums }

/* Un guion invita al navegador a cortar ahí. En los términos que son el
   producto —co-hosting, check-in— partirlos se lee como un error. */
.nb{ white-space:nowrap }

/* ---------- Botones y links ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:15px 32px;
  border-radius:var(--pk-r-pill);
  font-family:var(--pk-font); font-size:16px; font-weight:var(--pk-w-medium);
  letter-spacing:-.01em; text-decoration:none; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background-color .26s var(--ease), transform .26s var(--ease),
             box-shadow .26s var(--ease);
}
.btn--primary{ background:var(--pk-blue-aa); color:var(--pk-white) }

.link{
  color:var(--pk-midnight); text-decoration:none;
  font-weight:var(--pk-w-medium); position:relative;
  display:inline-block; padding-block:4px;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(1); transform-origin:left;
  transition:transform .34s var(--ease);
}
.link:hover::after{ transform:scaleX(0); transform-origin:right }

/* Links de navegación: blanco táctil de 44px. Los que viven dentro de una
   frase no, ahí un padding grande los hace pisarse entre líneas. */
.hero__cta .link{
  display:inline-flex; align-items:center; min-height:44px; padding-block:0;
}
.hero__cta .link::after{ bottom:11px }

/* ============================================================
   NAV — píldora flotante
   ============================================================ */

.nav{
  position:fixed; z-index:var(--z-nav);
  top:14px; left:0; right:0;
  padding-inline:var(--pad);
  pointer-events:none;
  opacity:0; transform:translateY(-14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.nav.is-visible{ opacity:1; transform:none; pointer-events:auto }

.nav__pill{
  max-width:var(--w-max); margin-inline:auto;
  display:flex; align-items:center; gap:24px;
  padding:9px 9px 9px 26px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--pk-line);
  border-radius:var(--pk-r-pill);
}

.nav__logo{
  display:flex; align-items:center; text-decoration:none;
  color:var(--pk-midnight);           /* si no, hereda el azul de link */
  flex:0 0 auto; min-height:44px;
}
.nav__logo .logo{ height:19px }

.nav__logo .logo{ transition:transform .45s var(--ease) }
.nav__logo:hover .logo{ transform:translateX(2px) }

.nav__links{ display:none; margin-left:auto; gap:30px }
@media (min-width:940px){ .nav__links{ display:flex } }
.nav__links a{
  color:var(--pk-body); text-decoration:none; font-size:15px;
  font-weight:var(--pk-w-medium); letter-spacing:-.01em;
  display:inline-flex; align-items:center; min-height:44px;
  position:relative;
  transition:color .24s var(--ease);
}
/* El subrayado se dibuja desde la izquierda y se retira por la derecha:
   el mismo gesto que los links del cuerpo, para que el sitio hable igual. */
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav__links a:hover{ color:var(--pk-midnight) }
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__cta{ margin-left:auto; min-height:44px; padding:11px 26px; font-size:15px }
@media (min-width:940px){ .nav__cta{ margin-left:0 } }

/* El azul no cambia de tono: se carga. Una capa clara barre el botón de
   izquierda a derecha al entrar, y al salir se retira por la derecha, así
   el gesto va siempre para el mismo lado en vez de rebobinar. */
.btn--primary{ position:relative; overflow:hidden; isolation:isolate }
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.16);
  transform:scaleX(0); transform-origin:right;
  transition:transform .44s var(--ease);
}
.btn--primary:hover::before{ transform:scaleX(1); transform-origin:left }
.btn--primary:active::before{ background:rgba(255,255,255,.24) }

/* Sobre midnight el botón es blanco: la capa que carga va en tinta. */
.sec--cierre .btn--primary::before{ background:rgba(10,21,33,.1) }
.sec--cierre .btn--primary:active::before{ background:rgba(10,21,33,.16) }

/* ============================================================
   HERO
   ============================================================ */

.hero{ padding-top:clamp(40px,5vw,68px); padding-bottom:clamp(48px,5vw,72px); overflow:clip }
.hero__logo{ height:25px; margin-bottom:clamp(52px,8vw,104px) }

.hero__h1{ margin-bottom:clamp(28px,3vw,40px) }

/* En desktop la bajada y el CTA van a la derecha del bloque del titular:
   el ancho grande se usa, en vez de dejar un tercio vacío. */
@media (min-width:1040px){
  .hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:0 clamp(40px,5vw,88px) }
  .hero__logo{ grid-column:1 / -1 }
  .hero__h1{ grid-column:1; margin-bottom:0 }
  .hero__aside{ grid-column:2; align-self:end; padding-bottom:10px }
}

.hero__sub{ margin-bottom:32px }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px }

/* ---------- El arco de teléfonos ----------
   Marco de iPhone 15 Pro dibujado en CSS: canto de titanio, bisel negro,
   Dynamic Island y botones laterales. Todo proporcional a --tw, así el
   teléfono escala sin deformarse.
   El degradado del canto es la única excepción a "cero gradientes": no es
   un fondo de página, es el metal del objeto que se está representando. */

.fan{
  /* El recorte es contra la caja de padding, no contra el contenido: por eso
     el aire de arriba se agrega como padding y se devuelve como margen
     negativo. Sin él, al scrollear los laterales suben por encima del borde
     de la caja y el recorte les comía el bisel —una franja blanca sobre el
     canto del teléfono—. El margen compensa el padding, así la posición en
     reposo no se mueve ni un pixel. */
  --aire:40px;
  margin-top:calc(clamp(48px,6vw,84px) - var(--aire));
  padding-top:var(--aire);
  overflow:clip;
  position:relative;
}

.fan__row{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(8px,1.2vw,20px);
  padding-inline:var(--pad);
}

.tel{
  --tw:clamp(150px,17.5vw,268px);
  --r:calc(var(--tw) * .143);      /* radio real del 15 Pro sobre su ancho */
  --ty:0px;
  /* Un solo aire para todos los cortes de la pantalla: arriba y abajo de
     cada línea divisoria, y entre el anfitrión y la barra. Con un valor por
     bloque el ritmo vertical salía disparejo. */
  --sep:calc(var(--tw) * .052);
  flex:0 0 auto;
  width:var(--tw);
  aspect-ratio:71 / 146;           /* proporción física del 15 Pro */
  border-radius:var(--r);
  padding:calc(var(--tw) * .0135); /* el canto de titanio que se ve */
  position:relative;
  margin-top:var(--ty);
  /* Canto de titanio: claro en los bordes, oscuro en las caras. */
  background:
    linear-gradient(96deg,
      #6d6f75 0%, #c9ccd2 3%, #f2f3f6 7%, #b9bcc3 13%,
      #8d9096 50%,
      #b9bcc3 87%, #f2f3f6 93%, #c9ccd2 97%, #6d6f75 100%);
  box-shadow:0 24px 48px -12px rgba(10,21,33,.28), 0 4px 12px rgba(10,21,33,.1);
}

/* Botones laterales: volumen y botón de acción a la izquierda, encendido
   a la derecha. Son lo que más delata a un mockup dibujado a ojo. */
.tel::before, .tel::after{
  content:""; position:absolute;
  width:calc(var(--tw) * .0105);
  background:linear-gradient(180deg,#7e8188,#c2c5cb 30%,#c2c5cb 70%,#7e8188);
  border-radius:1px;
}
.tel::before{                       /* izquierda: acción + volumen */
  left:calc(var(--tw) * -.0045);
  top:calc(var(--tw) * .30);
  height:calc(var(--tw) * .40);
}
.tel::after{                        /* derecha: encendido */
  right:calc(var(--tw) * -.0045);
  top:calc(var(--tw) * .40);
  height:calc(var(--tw) * .23);
}

.tel__scr{
  height:100%;
  border-radius:calc(var(--r) - var(--tw) * .0135);
  background:#000;                  /* bisel */
  padding:calc(var(--tw) * .0125);
  overflow:hidden;
}
.tel__view{
  height:100%;
  border-radius:calc(var(--r) - var(--tw) * .026);
  background:var(--pk-white);
  overflow:hidden;
  position:relative;
  /* Columna: foto arriba, barra abajo y el cuerpo estirándose en el medio.
     Es lo que permite anclar las filas de abajo a una altura fija. */
  display:flex; flex-direction:column;
}

.tel__island{
  position:absolute; z-index:2;
  top:calc(var(--tw) * .035);
  left:50%; transform:translateX(-50%);
  width:calc(var(--tw) * .30);
  height:calc(var(--tw) * .088);
  background:#05070a;
  border-radius:var(--pk-r-pill);
}

/* ---------- La pantalla: un anuncio, no una foto con epígrafe ----------
   Todo se mide en fracciones de --tw, el ancho del teléfono, así que las
   cinco pantallas son idénticas a cualquier tamaño y en el teléfono siguen
   siendo anuncios completos aunque queden tapadas a medias. */

/* La foto es la que absorbe la diferencia de alto entre un anuncio y otro.
   Antes el sobrante se acumulaba como un hueco blanco debajo del título:
   una ficha de un renglón dejaba 36px de nada. Ahora el cuerpo mide lo que
   mide su contenido y la foto se queda con lo que sobra —13px más o menos
   de foto no se notan, 13px de hueco sí—. Como el cuerpo y la barra van al
   pie, las reseñas y el anfitrión siguen cayendo a la misma altura en los
   cinco sin necesidad de márgenes automáticos. */
.tel__foto{ position:relative; flex:1 1 0; min-height:calc(var(--tw) * .6) }
/* La foto ocupa todo lo que sobra: es lo que más vende de la pantalla, y
   sin la descripción el texto entra holgado. */
.tel__view img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }

/* Los controles de la app, encima de la foto. */
.tel__cromo{
  position:absolute; top:calc(var(--tw) * .108); z-index:2;
  display:flex; gap:calc(var(--tw) * .028);
}
.tel__cromo--izq{ left:calc(var(--tw) * .045) }
.tel__cromo--der{ right:calc(var(--tw) * .045) }
.tel__ic{
  width:calc(var(--tw) * .1); aspect-ratio:1;
  border-radius:50%; background:var(--pk-white);
  display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(10,21,33,.24);
}
.tel__ic svg{
  width:58%; height:58%;
  fill:none; stroke:var(--pk-midnight); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Guardado: el corazón se rellena. No están todos: un anuncio guardado por
   todo el mundo se lee como decoración. */
.tel__ic.is-like svg{ fill:var(--pk-midnight) }

.tel__cont{
  position:absolute; z-index:2;
  right:calc(var(--tw) * .045); bottom:calc(var(--tw) * .085);
  background:rgba(10,21,33,.74); color:var(--pk-white);
  border-radius:calc(var(--tw) * .02);
  padding:calc(var(--tw) * .012) calc(var(--tw) * .034);
  font-size:calc(var(--tw) * .038); letter-spacing:var(--pk-num-track);
}

/* El cuerpo sube sobre la foto con la esquina redondeada, como la app. */
.tel__body{
  position:relative; z-index:1;
  margin-top:calc(var(--tw) * -.055);
  border-radius:calc(var(--tw) * .07) calc(var(--tw) * .07) 0 0;
  background:var(--pk-white);
  /* El aire de abajo es el que separa al anfitrión de la línea de la barra:
     sin él quedaba pegado. */
  padding:calc(var(--tw) * .058) calc(var(--tw) * .055) var(--sep);
  flex:0 0 auto;
}
.tel__t{
  font-size:calc(var(--tw) * .066);
  font-weight:var(--pk-w-bold); letter-spacing:-.022em;
  line-height:1.16; color:var(--pk-midnight);
  margin-bottom:calc(var(--tw) * .022);
}
.tel__loc{
  font-size:calc(var(--tw) * .044); color:var(--pk-muted);
  line-height:1.3; margin-bottom:calc(var(--tw) * .012);
}
.tel__meta{
  font-size:calc(var(--tw) * .042); color:var(--pk-body);
  line-height:1.3;
}

/* La fila de números: nota, destacado y reseñas. */
.tel__stats{
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(var(--tw) * .015);
  margin-top:var(--sep);
  padding-top:var(--sep);
  border-top:1px solid var(--pk-line);
}
.tel__stat{ display:grid; justify-items:center; gap:calc(var(--tw) * .006); text-align:center }
.tel__stat b{
  font-size:calc(var(--tw) * .058); font-weight:var(--pk-w-bold);
  color:var(--pk-midnight); line-height:1;
}
.tel__stat i{ font-style:normal; font-size:calc(var(--tw) * .034); color:var(--pk-muted); line-height:1.2 }
.tel__estrellas{ color:var(--pk-midnight); font-size:calc(var(--tw) * .028); letter-spacing:.04em }

.tel__fav{
  display:flex; align-items:center; gap:calc(var(--tw) * .008);
  font-size:calc(var(--tw) * .034); font-weight:var(--pk-w-bold);
  color:var(--pk-midnight); line-height:1.15; text-align:center;
}
.tel__laurel{
  width:calc(var(--tw) * .042); height:calc(var(--tw) * .085);
  fill:none; stroke:var(--pk-midnight); stroke-width:1.6;
  stroke-linecap:round; flex:0 0 auto;
}
.tel__laurel--d{ transform:scaleX(-1) }

/* El anfitrión, sin foto: el ícono alcanza y no hay que inventar una cara. */
.tel__host{
  display:flex; align-items:center; gap:calc(var(--tw) * .04);
  margin-top:var(--sep);
  padding-top:var(--sep);
  border-top:1px solid var(--pk-line);
}
.tel__avatar{
  width:calc(var(--tw) * .112); aspect-ratio:1; border-radius:50%;
  background:var(--pk-wash); display:grid; place-items:center; flex:0 0 auto;
}
.tel__avatar svg{ width:64%; height:64%; fill:none; stroke:var(--pk-muted); stroke-width:1.8 }
.tel__quien{ display:grid; gap:calc(var(--tw) * .004); min-width:0 }
.tel__quien b{
  font-size:calc(var(--tw) * .046); font-weight:var(--pk-w-medium);
  color:var(--pk-midnight); line-height:1.2;
}
.tel__quien i{ font-style:normal; font-size:calc(var(--tw) * .038); color:var(--pk-muted); line-height:1.2 }


/* La barra de acción al pie, con el botón en nuestro azul. */
.tel__bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(var(--tw) * .03);
  padding:calc(var(--tw) * .042) calc(var(--tw) * .05);
  border-top:1px solid var(--pk-line);
  background:var(--pk-white);
}
.tel__fechas{
  font-size:calc(var(--tw) * .036); color:var(--pk-muted);
  line-height:1.25; min-width:0;
}
/* La tinta del sistema, no un azul nuevo: adentro del teléfono el botón no
   es NUESTRA acción sino la interfaz que estamos mostrando, y en el azul de
   acción competía con el botón real del hero. */
.tel__btn{
  background:var(--pk-midnight); color:var(--pk-white);
  border-radius:var(--pk-r-pill);
  padding:calc(var(--tw) * .036) calc(var(--tw) * .058);
  font-size:calc(var(--tw) * .046); font-weight:var(--pk-w-medium);
  white-space:nowrap; flex:0 0 auto; line-height:1.2;
}

/* El arco: el central arriba y los costados bajando, sin rotación.
   Rotarlos hacía que la esquina de cada uno invadiera el texto del vecino. */
.tel--1{ --ty:calc(var(--tw) * .15) }
.tel--2{ --ty:calc(var(--tw) * .058) }
.tel--3{ --ty:0px }
.tel--4{ --ty:calc(var(--tw) * .058) }
.tel--5{ --ty:calc(var(--tw) * .15) }

@media (max-width:1080px){ .tel--1,.tel--5{ display:none } }
@media (max-width:640px){
  /* Sin recorte: en el teléfono el arco entero entra en pantalla, y si se
     recorta el de adelante queda pegado a la línea de la sección. */
  .fan{ overflow:visible }
  .fan__row{ gap:0 }
  .tel{ --tw:min(52vw,206px); z-index:3 }
  /* Los laterales se solapan por detrás, pero siguen siendo anuncios
     completos: lo que tapa el de adelante no importa, lo que importa es que
     se lea que los tres son publicaciones y no fotos. */
  .tel--2,.tel--4{ --tw:min(37vw,148px); --ty:calc(var(--tw) * .2); z-index:1 }
  .tel--2{ margin-right:calc(var(--tw) * -.44) }
  .tel--4{ margin-left:calc(var(--tw) * -.44) }
}

.fan__cap{
  text-align:center; margin-top:22px; padding-inline:var(--pad);
  font-size:var(--pk-web-meta); color:var(--pk-muted);
}
.fan__cap b{ color:var(--pk-midnight); font-weight:var(--pk-w-medium) }
/* Después de la regla base, si no la pisa: en el teléfono el epígrafe
   necesita más aire porque el teléfono llega mucho más abajo. */
@media (max-width:640px){ .fan__cap{ margin-top:60px } }

/* ============================================================
   CABECERAS DE SECCIÓN
   ============================================================ */

.head{ margin-bottom:clamp(44px,5vw,80px) }
.head .sub{ margin-top:18px }
.head--split{ display:grid; gap:20px; margin-bottom:clamp(40px,4.5vw,64px) }
@media (min-width:900px){
  .head--split{ grid-template-columns:1fr 1fr; gap:48px; align-items:end }
  .head--split .sub{ margin-top:0; padding-bottom:6px }
}

/* ============================================================
   LA TERCERA OPCIÓN
   ============================================================ */

/* Tres tarjetas y las tres blancas. La nuestra no se distingue por llenarse
   de color —eso ya lo probamos y pesaba demasiado en la segunda sección de
   la página— sino por tener más: una pastilla con el isotipo, la grilla de
   puntos que ya usa el diagrama de servicios, tres marcas que se dibujan
   solas, un haz que recorre el borde y la elevación.

   Todo en midnight, nada en azul: el azul de esta pantalla ya lo gasta el
   CTA del nav y el sistema admite un solo azul saturado por pieza. */

.opciones{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
@media (min-width:900px){
  .opciones{ grid-template-columns:1fr 1.14fr 1fr; align-items:start }
  .opcion--esta{ order:2; margin-top:calc(-1 * clamp(18px,2.2vw,30px)) }
  .opcion:nth-child(2){ order:3 }
}

.opcion{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--pk-line);
  border-radius:var(--pk-r-card);
  padding:clamp(26px,2.8vw,36px);
  background:var(--pk-white);
  transition:border-color .34s var(--ease), transform .34s var(--ease),
             box-shadow .34s var(--ease);
}
.opcion:hover{
  border-color:var(--pk-midnight);
  box-shadow:0 14px 30px -22px rgba(10,21,33,.4);
}

.opcion__eq{
  display:block; font-size:12.5px; font-weight:var(--pk-w-medium);
  color:var(--pk-muted); margin-bottom:12px;
}
.opcion__k{
  font-size:clamp(19px,1.85vw,24px); font-weight:var(--pk-w-bold);
  letter-spacing:-.028em; line-height:1.14; color:var(--pk-midnight);
  margin-bottom:14px;
}
.opcion__d{ font-size:15px; max-width:46ch; line-height:1.55 }
/* Más aire entre el bloque de arriba y el remate: apretados se leían como
   un solo párrafo largo. */
.opcion__pie{
  margin-top:auto; padding-top:22px;
  font-size:13.5px; color:var(--pk-muted);
}
.opcion__pie b{ font-weight:var(--pk-w-medium); color:var(--pk-midnight) }
.opcion:not(.opcion--esta) .opcion__pie{
  border-top:1px solid var(--pk-line); margin-top:clamp(34px,3.4vw,46px);
}

/* ---- La tercera ---- */
.opcion--esta{
  border-color:rgba(10,21,33,.3);
  padding:clamp(28px,3vw,40px);
  box-shadow:0 18px 40px -24px rgba(10,21,33,.35);
  background:
    radial-gradient(var(--pk-line) 1px, transparent 1px) center / 19px 19px,
    var(--pk-white);
}
.opcion--esta:hover{
  border-color:var(--pk-midnight);
  transform:translateY(-4px);
  box-shadow:0 26px 52px -26px rgba(10,21,33,.45);
}
.opcion__pill{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:var(--pk-midnight); color:var(--pk-white);
  border-radius:var(--pk-r-pill); padding:7px 15px 7px 12px;
  font-size:12.5px; font-weight:var(--pk-w-medium); white-space:nowrap;
  margin-bottom:18px;
}
.opcion__pill .logo-mark{ height:11px; color:var(--pk-white) }

.opcion--esta .opcion__d{ font-size:15.5px }
.opcion--esta .opcion__pie{
  border-top:1px solid var(--pk-line); margin-top:clamp(30px,3vw,40px);
}

/* Las tres cosas que sí conseguís, con el tilde dibujado a mano. */
.gana{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px }
.gana li{
  position:relative; padding-left:28px;
  font-size:14.5px; color:var(--pk-midnight); line-height:1.3;
}
.gana li::before{
  content:""; position:absolute; left:2px; top:.28em;
  width:13px; height:7px;
  border-left:1.6px solid var(--pk-midnight);
  border-bottom:1.6px solid var(--pk-midnight);
  transform:rotate(-45deg);
}

/* El haz que recorre el borde. El anillo es un pseudo-elemento con la
   máscara compuesta: el gradiente cónico gira y sólo se ve en el borde.
   Si el navegador no soporta @property el ángulo no anima y queda un borde
   con un degradé fijo, que también se ve bien. */
@property --haz{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.opcion__haz{
  position:absolute; inset:-1px; border-radius:inherit;
  padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--haz),
    transparent 0 72%, rgba(10,21,33,.55) 82%, rgba(10,21,33,.9) 86%,
    rgba(10,21,33,.55) 90%, transparent 96% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
}

.opciones__pie{
  margin-top:clamp(30px,3.4vw,46px);
  max-width:74ch; font-size:clamp(15px,1.15vw,17px);
}
.opciones__pie b{ font-weight:var(--pk-w-bold); color:var(--pk-midnight) }
.opciones__pie i{ font-style:italic; color:var(--pk-muted) }

/* ============================================================
   SERVICIOS — dos columnas enfrentadas
   ============================================================ */

.lado{
  font-size:clamp(22px,2.3vw,30px); font-weight:var(--pk-w-bold);
  letter-spacing:-.03em; color:var(--pk-midnight); margin-bottom:22px;
}

/* El isotipo solo: el mismo trazo del logo, con su propio viewBox. */
.logo-mark{
  aspect-ratio:307 / 195; width:auto; flex:0 0 auto;
  color:var(--pk-midnight); display:block; overflow:visible;
}

/* ============================================================
   REPARTO — la red de un lado, el tablero del otro
   ============================================================ */

.reparto{ display:grid; gap:clamp(40px,4vw,64px) }
@media (min-width:1000px){
  /* stretch y no start: las dos columnas terminan a la misma altura, que es
     lo único que hace que el bloque se lea prolijo. El aire que le sobra a
     la red queda repartido alrededor del diagrama. */
  .reparto{ grid-template-columns:minmax(0,1fr) minmax(0,330px); align-items:stretch }
  .red, .tablero{ display:flex; flex-direction:column }
  .red__caja, .tablero__caja{ flex:1 }
}

/* ---------- La red ---------- */
.red__caja{
  position:relative;
  border:1px solid var(--pk-line);
  border-radius:var(--pk-r-card);
  padding:clamp(22px,2.6vw,38px);
  /* La grilla de puntos es la superficie del diagrama, no decoración
     suelta: da la escala y hace que los cables se lean como un tendido. */
  background-image:radial-gradient(var(--pk-line) 1px, transparent 1px);
  background-size:19px 19px;
  background-position:center;
  display:grid; gap:clamp(18px,2.4vw,34px);
  align-items:center; justify-items:center;
}
@media (min-width:760px){
  .red__caja{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) }
}
/* Con ocho nodos el diagrama necesita respirar, y los cables necesitan
   recorrido para que el codo se lea. */
@media (min-width:1000px){
  .red__caja{ gap:clamp(30px,3.6vw,58px) }
}

.red__cables{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.cable{
  fill:none; stroke:var(--pk-line); stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}
.cable--pulso{
  stroke:var(--pk-midnight); stroke-width:1.6;
  stroke-dasharray:9 100; stroke-dashoffset:109;
  opacity:.55;
}

/* ---------- El centro ---------- */
.red__yo{
  position:relative; z-index:2;
  display:grid; place-items:center;
  width:clamp(92px,9vw,116px); aspect-ratio:1;
  background:var(--pk-white);
  border:1px solid var(--pk-line);
  border-radius:calc(var(--pk-r-card) * 2.4);
  box-shadow:0 14px 30px -16px rgba(10,21,33,.3);
}
.red__yo .logo-mark{ width:52% }

/* ---------- Los nodos ---------- */
.red__lado{ list-style:none; margin:0; padding:0; display:grid; gap:12px; width:100%; z-index:2 }
/* En el teléfono: el logo en el medio y los servicios en dos columnas,
   cuatro arriba y cuatro abajo. Los cables pasan por debajo de las
   tarjetas —quedan tapados, salvo en el hueco que rodea al logo— y ahí es
   donde se ven, abriéndose en abanico. Por eso ese hueco es más grande que
   el resto de las separaciones. */
@media (max-width:759px){
  .red__caja{ padding:18px 12px; gap:30px }
  .red__lado{ grid-template-columns:1fr 1fr; width:auto; gap:9px }
  .nodo{ padding:11px 12px; gap:9px }
  .nodo__t i{ display:none }
  .nodo__t b{ font-size:13px }
  .nodo__ic{ width:28px; height:28px }
  .nodo__ic svg{ width:16px; height:16px }
  /* Un poco más grande: los cuatro cables de cada lado tienen que entrar
     sobre la parte recta del borde, y con 80px esa parte era muy corta. */
  .red__yo{ width:94px }
}

.nodo{
  position:relative;
  display:flex; align-items:center; gap:13px;
  padding:13px 16px;
  background:var(--pk-white);
  border:1px solid var(--pk-line);
  border-radius:var(--pk-r-card);
  /* Un solo gesto, tranquilo: el borde se marca y la tarjeta se despega
     apenas. Sin relleno de tinta en el ícono ni cambio de color del trazo:
     con todo junto era demasiado para pasar el mouse por encima. */
  transition:transform .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease);
}
.nodo:hover{
  transform:translateY(-2px);
  border-color:rgba(10,21,33,.42);
  box-shadow:0 10px 24px -16px rgba(10,21,33,.35);
}
.nodo__ic{
  position:relative; overflow:hidden;
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:calc(var(--pk-r-card) * 1.2);
  background:var(--pk-wash);
}
.nodo__ic svg{
  position:relative; z-index:1;
  width:19px; height:19px;
  fill:none; stroke:var(--pk-midnight); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.nodo__t{ display:grid; gap:2px; min-width:0 }
.nodo__t b{
  font-size:15px; font-weight:var(--pk-w-bold);
  letter-spacing:-.018em; color:var(--pk-midnight); line-height:1.2;
}
.nodo__t i{
  font-style:normal; font-size:12.5px; color:var(--pk-muted); line-height:1.3;
}

/* ---------- El tablero ---------- */
.tablero__caja{
  border:1px solid var(--pk-line);
  border-radius:var(--pk-r-card);
  padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column;
}
/* Cabecera: el mismo par rótulo + bajada que usan las tarjetas de datos
   del reporte, para que los dos objetos de producto de la página hablen
   igual. Sin pastilla y sin nada que parpadee. */
.tablero__cab{
  display:flex; align-items:baseline; gap:10px;
  padding-bottom:18px; flex-wrap:wrap;
}
.tablero__t{
  font-size:13px; font-weight:var(--pk-w-bold);
  letter-spacing:-.015em; color:var(--pk-midnight);
}
.tablero__meta{ font-size:11.5px; color:var(--pk-muted) }

.ctrl{
  display:grid; gap:14px;
  padding:18px 4px;
  margin-inline:-4px;
  border-top:1px solid var(--pk-line);
}
.ctrl:last-of-type{ padding-bottom:22px }
.ctrl__k{
  font-size:14.5px; font-weight:var(--pk-w-medium);
  color:var(--pk-midnight); line-height:1.35;
}
.ctrl__g{ display:block }

/* Un control por tipo de decisión, y los tres se tocan: un valor que se
   corre, unas fechas que se pintan y unas reglas que se prenden.

   --pn (0 a 1) es la posición de la barra. Va registrada para que se pueda
   animar en la entrada: sin @property un custom property no interpola. */
@property --pn{ syntax:'<number>'; initial-value:0; inherits:true }

.ctrl__g--slider{ position:relative; height:28px; display:block; --pn:.58 }
/* El range va encima, invisible y a todo lo ancho: se queda con el teclado,
   el touch y el lector de pantalla. El pulgar mide lo mismo que la perilla
   dibujada para que el mapeo de la posición coincida. */
.ctrl__rango{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:pointer; z-index:2;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ctrl__rango::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%;
}
.ctrl__rango::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:50% }
.ctrl__rango:focus-visible ~ .ctrl__perilla{
  outline:2px solid var(--pk-blue); outline-offset:3px;
}

.ctrl__pista, .ctrl__llena{
  position:absolute; left:0; top:13px; height:2px; border-radius:2px;
}
.ctrl__pista{ right:0; background:var(--pk-line) }
.ctrl__llena{ width:calc(var(--pn) * 100%); background:var(--pk-midnight) }
.ctrl__perilla{
  position:absolute; top:8px;
  left:calc(6px + (100% - 12px) * var(--pn));
  width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:var(--pk-midnight);
  box-shadow:0 0 0 3px var(--pk-white);
}
.ctrl__g--slider:hover .ctrl__perilla{ box-shadow:0 0 0 3px var(--pk-white), 0 0 0 5px rgba(10,21,33,.14) }
.ctrl__perilla{ transition:box-shadow .26s var(--ease) }

.ctrl__g--cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; max-width:230px }
.dia{
  display:block; width:100%; aspect-ratio:1; min-height:26px;
  padding:0; border:0; border-radius:4px; cursor:pointer;
  background:var(--pk-line);
  transition:background-color .26s var(--ease), transform .18s var(--ease);
}
.dia:hover{ background:rgba(10,21,33,.32); transform:scale(1.12) }
.dia.on{ background:var(--pk-midnight) }
.dia.on:hover{ background:rgba(10,21,33,.78) }

.ctrl__g--sw{ display:flex; gap:clamp(10px,2vw,18px); flex-wrap:wrap }
/* Sin rótulo: son tres interruptores y se entienden solos bajo el título
   de la fila. El nombre real vive en el aria-label. */
.regla{
  display:inline-flex; border:0; background:none; cursor:pointer;
  /* El interruptor mide 19 de alto y el mínimo táctil es 24: el relleno
     agranda el área de toque y el margen negativo lo devuelve al lugar,
     así el dibujo no se mueve. */
  padding-block:5px; margin-block:-5px;
  padding-inline:0;
}
.regla i{
  display:block; width:34px; height:19px; border-radius:var(--pk-r-pill);
  background:var(--pk-line); position:relative;
  transition:background-color .26s var(--ease);
}
.regla i::after{
  content:""; position:absolute; top:3px; left:3px;
  width:13px; height:13px; border-radius:50%; background:var(--pk-white);
  transition:transform .34s var(--ease);
}
.regla.on i{ background:var(--pk-midnight) }
.regla.on i::after{ transform:translateX(15px) }
.regla:hover i{ box-shadow:0 0 0 3px rgba(10,21,33,.09) }
.regla i{ transition:background-color .26s var(--ease), box-shadow .26s var(--ease) }

.tablero__n{
  margin-top:auto; padding-top:20px;
  border-top:1px solid var(--pk-line);
  font-size:14.5px; color:var(--pk-body);
}



/* ============================================================
   CONTROL
   ============================================================ */

.pilares{ display:grid; gap:clamp(28px,3vw,48px) }
@media (min-width:820px){ .pilares{ grid-template-columns:repeat(3,1fr) } }
.pilar{ padding-top:26px; border-top:1px solid var(--pk-midnight) }
.pilar h3{ margin-bottom:12px }
.pilar p{ font-size:16px }

/* La tarjeta llega hasta donde llega todo lo demás. Antes se cortaba en
   1060px y dejaba un cuarto de la fila vacío a la derecha: el único bloque
   de la página que rompía la grilla sin motivo. Ahora sigue las mismas tres
   columnas que los pilares de arriba —cifra, qué cubre, quién lo gestiona—
   y cada texto queda en una medida de lectura cómoda en vez de estirarse. */
.cobertura{
  margin-top:clamp(48px,5vw,80px);
  display:grid; gap:22px clamp(32px,3.4vw,56px); align-items:start;
  padding:clamp(28px,3vw,44px);
  border:1px solid var(--pk-line); border-radius:var(--pk-r-card);
}
/* En el medio —tablet y notebook chica— la cifra ocupa las dos filas y los
   dos textos se apilan a su derecha. Sin el span, el segundo texto caía
   abajo de la cifra y la columna "auto" se estiraba para contenerlo: la
   grilla quedaba dada vuelta. Las tres columnas recién entran a 1280, que
   es donde cada texto llega a 54 caracteres por línea; antes de eso quedan
   demasiado angostos para leer cómodo. */
@media (min-width:760px){
  .cobertura{ grid-template-columns:minmax(190px,auto) 1fr }
  .cobertura__cifra{ grid-row:span 2 }
}
@media (min-width:1280px){
  /* Los dos textos se centran contra la cifra, que es alta. Alineados
     arriba dejaban un hueco de 150px al pie de la tarjeta: el mismo vacío
     de antes, movido para adentro. */
  .cobertura{ grid-template-columns:minmax(210px,auto) 1fr 1fr; align-items:center }
  .cobertura__cifra{ grid-row:auto }
}

.cobertura__cifra h3{ margin-bottom:14px }
.cobertura__n{ display:flex; align-items:baseline; gap:12px; margin:0 }
.cobertura__n .num{
  font-size:clamp(64px,9vw,116px); font-weight:var(--pk-w-bold);
  line-height:.85; color:var(--pk-midnight);
}
.cobertura__u{
  font-size:clamp(13px,1.1vw,16px); color:var(--pk-muted);
  line-height:1.2; font-weight:var(--pk-w-medium);
}
.cobertura > p{ font-size:16px }

/* ============================================================
   MERCADO
   ============================================================ */

.mercado{ display:grid; gap:clamp(36px,4vw,72px); align-items:center }
@media (min-width:900px){ .mercado{ grid-template-columns:minmax(0,1fr) clamp(400px,37vw,545px) } }
.mercado__txt .lede{ margin-top:24px }
.fuente{ margin-top:26px; font-size:var(--pk-web-meta); color:var(--pk-muted) }
.fuente b{ color:var(--pk-midnight); font-weight:var(--pk-w-bold) }
/* ---- El globo ----
   Canvas cuadrado. Grande, no gigante: 470 de tope en desktop y todo el
   ancho disponible en el teléfono. El disco de fondo lo pinta el CSS, así
   que si el JS no corre no queda un hueco blanco, y cuando sí corre hace
   de sombra de la esfera. */
.globo{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,2vw,24px);
}
.globo__c{
  display:block; width:100%; max-width:545px; aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
              rgba(210,210,215,.13) 0 66%, transparent 67%);
}
.globo__cap{
  font-size:var(--pk-web-meta); color:var(--pk-muted);
  text-align:center; max-width:38ch; margin:0;
}
.globo__cap b{ color:var(--pk-midnight); font-weight:var(--pk-w-medium) }

/* Las cifras: cada una con su rótulo arriba, el número grande y una línea
   que lo explica. Sin cajas: la hairline superior es la que agrupa. */
.cifras{
  margin:clamp(56px,6vw,96px) 0 0;
  display:grid; gap:clamp(28px,3vw,44px);
}
@media (min-width:640px){ .cifras{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .cifras{ grid-template-columns:repeat(4,1fr) } }

.cifra{ margin:0; padding-top:20px; border-top:1px solid var(--pk-midnight) }
.cifra dt{
  font-size:var(--pk-web-meta); color:var(--pk-muted);
  font-weight:var(--pk-w-medium); margin-bottom:14px;
}
.cifra dd{ margin:0 0 14px; display:flex; align-items:baseline; gap:9px }
.cifra__n{
  font-size:clamp(46px,5.4vw,76px); font-weight:var(--pk-w-bold);
  line-height:.9; color:var(--pk-midnight);
}
.cifra__u{ font-size:clamp(15px,1.3vw,19px); color:var(--pk-muted); font-weight:var(--pk-w-medium) }
.cifra p{ font-size:14px; line-height:1.45; color:var(--pk-muted); max-width:30ch }

/* ============================================================
   SOSTENERLO
   ============================================================ */

.dos{ display:grid; gap:clamp(36px,4vw,72px); align-items:center }
@media (min-width:900px){ .dos{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) } }
.dos__img{ margin:0 }
.dos__img img{ width:100%; border-radius:var(--pk-r-image); aspect-ratio:16/11; object-fit:cover }
@media (min-width:900px){ .dos__img img{ max-height:440px } }
.dos__txt .lede{ margin-top:28px }

.barra-dato{ margin-top:32px }
.barra-dato__track{
  height:8px; border-radius:var(--pk-r-pill);
  background:var(--pk-line); overflow:hidden;
}
.barra-dato__fill{
  display:block; height:100%; width:var(--pct);
  background:var(--pk-midnight); border-radius:var(--pk-r-pill);
  transform-origin:left;
}
.barra-dato__lbl{ margin-top:16px; font-size:16px; max-width:52ch }
.barra-dato__lbl b{ color:var(--pk-midnight); font-weight:var(--pk-w-bold) }

/* ============================================================
   REPORTE — el tablero de datos
   ============================================================ */

.sec--reporte{ background:var(--pk-wash) }
.reporte{ display:grid; gap:clamp(40px,4vw,72px); align-items:center }
@media (min-width:960px){ .reporte{ grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:start } }
.reporte__txt .lede{ margin-top:24px }

.trae{ list-style:none; margin:32px 0 0; padding:0 }
.trae li{
  padding:15px 0; border-bottom:1px solid rgba(10,21,33,.12);
  font-size:16px; color:var(--pk-midnight);
}
.trae li:first-child{ border-top:1px solid rgba(10,21,33,.12) }

/* ============================================================
   TABLERO DE DATOS — el reporte como lo que uno mira, no como PDF
   ============================================================
   Cuatro tarjetas de datos sobre el wash. Ninguna lleva un importe: las
   cifras son operativas, están rotuladas como ejemplo, y la liquidación
   muestra su estructura con los operadores y nada más. */

.tablero-datos{ display:grid; gap:14px }
@media (min-width:620px){
  .tablero-datos{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) }
  .td__top, .dato--curva, .dato--liq{ grid-column:1 / -1 }
}

.td__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:2px;
}
.td__top .logo{ height:15px }
.tag{
  font-size:11px; font-weight:var(--pk-w-medium); color:var(--pk-body);
  border:1px solid var(--pk-line); border-radius:var(--pk-r-pill);
  padding:5px 13px; background:var(--pk-white);
}

.dato{
  background:var(--pk-white);
  border:1px solid var(--pk-line);
  border-radius:var(--pk-r-card);
  padding:clamp(18px,2vw,24px);
  display:flex; flex-direction:column;
}
.dato__h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.dato__k{
  font-size:13px; font-weight:var(--pk-w-bold);
  letter-spacing:-.015em; color:var(--pk-midnight);
}
.dato__sub{ font-size:11.5px; color:var(--pk-muted) }
.dato__pie{ font-size:11px; color:var(--pk-muted); margin-top:12px }

.dato__n{
  font-size:clamp(30px,3.6vw,44px); font-weight:var(--pk-w-bold);
  line-height:1; color:var(--pk-midnight); letter-spacing:var(--pk-num-track);
  margin-top:14px; display:flex; align-items:baseline; gap:10px;
}
.dato__n i{
  font-style:normal; font-size:12.5px; color:var(--pk-muted);
  font-weight:var(--pk-w-medium); letter-spacing:0;
}

/* ---------- A · la curva ---------- */
.curva{ margin-top:16px }
.curva__lienzo{ position:relative }
.curva svg{ display:block; width:100%; height:clamp(130px,15vw,190px) }
.curva__reja line{ stroke:var(--pk-line); stroke-width:1; stroke-dasharray:2 5 }
.curva__area{ fill:url(#gr-area) }
.curva__linea{
  fill:none; stroke:var(--pk-midnight); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* El cursor recorre los seis meses solo: la posición vive en dos variables
   del lienzo y las tres piezas la siguen con la misma transición. */
.curva__vert, .curva__punto, .curva__tag{
  transition:left 1.05s var(--ease), top 1.05s var(--ease),
             opacity .5s var(--ease);
}
.curva__vert{
  position:absolute; left:var(--x); top:9%; bottom:11%;
  width:0; border-left:1px dashed var(--pk-midnight); opacity:.4;
}
.curva__punto{
  position:absolute; left:var(--x); top:var(--y);
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--pk-white);
  border:2px solid var(--pk-midnight);
}
.curva__tag{
  position:absolute; left:var(--x); top:8px; transform:translateX(-50%);
  font-size:11px; font-weight:var(--pk-w-medium); color:var(--pk-white);
  background:var(--pk-midnight); border-radius:var(--pk-r-pill);
  padding:4px 10px; letter-spacing:var(--pk-num-track); white-space:nowrap;
}
.curva__ejes{
  list-style:none; margin:6px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr);
  font-size:10.5px; color:var(--pk-muted); text-align:center;
}

/* ---------- B · el mes ---------- */
.mes__cifras{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px }
.mes__cifras b{
  display:block; font-size:clamp(24px,2.8vw,32px); font-weight:var(--pk-w-bold);
  line-height:1; color:var(--pk-midnight); letter-spacing:var(--pk-num-track);
}
.mes__cifras b i{
  font-style:normal; font-size:.48em; color:var(--pk-muted);
  font-weight:var(--pk-w-medium);
}
.mes__cifras span{ display:block; font-size:11.5px; color:var(--pk-muted); margin-top:7px; line-height:1.3 }

/* Barras finas y separadas: a ancho completo se leen como bloques y no
   como un gráfico. */
.barras{
  display:flex; align-items:flex-end; gap:clamp(12px,2.4vw,22px);
  height:96px; margin-top:auto; padding-top:20px;
}
.barra{ flex:0 1 56px; display:flex; flex-direction:column; justify-content:flex-end; height:100% }
.barra i{
  display:block; height:var(--h); background:var(--pk-line);
  border-radius:4px 4px 0 0; transform-origin:bottom;
}
/* La semana más alta va en midnight y no en azul: el azul es el color de la
   acción y en esta pantalla ya lo lleva el CTA del nav. */
.barra--alta i{ background:var(--pk-midnight) }
.barra span{
  font-size:10.5px; color:var(--pk-muted); text-align:center;
  margin-top:8px; line-height:1;
}

/* ---------- C · las reseñas ---------- */
/* Se llena en loop: sale despacio, agarra velocidad en el medio, frena al
   llegar al 94% —el 4,9 sobre 5— y se achica hasta desaparecer. Después
   vuelve a empezar. Una sola propiedad animada, sin opacidades ni brillos.
   Arranca a las doce y el hueco queda arriba, que es donde se ve. */
.anillo{ position:relative; width:126px; margin:18px auto 0 }
.anillo svg{ display:block; width:100%; transform:rotate(-90deg) }
.anillo__base{ fill:none; stroke:var(--pk-wash); stroke-width:9 }
.anillo__arco{
  fill:none; stroke:var(--pk-blue-aa); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:94 100; stroke-dashoffset:0;
}
.anillo__n{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; color:var(--pk-midnight); letter-spacing:var(--pk-num-track);
  line-height:1; text-align:center;
}
.anillo__n b{ font-size:30px; font-weight:var(--pk-w-bold) }
.anillo__n i{ font-style:normal; font-size:11.5px; color:var(--pk-muted);
              font-weight:var(--pk-w-medium); letter-spacing:0 }

.categorias{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px }
.categorias li{
  display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px;
  align-items:center; font-size:12.5px; color:var(--pk-body);
}
.categorias span{ width:8px; height:8px; border-radius:2px; background:var(--pk-midnight) }
.categorias li:nth-child(2) span{ background:rgba(10,21,33,.55) }
.categorias li:nth-child(3) span{ background:var(--pk-line) }
.categorias b{ font-weight:var(--pk-w-medium); color:var(--pk-midnight) }

/* ---------- D · la liquidación ---------- */
.dato--liq .liq:first-of-type{ margin-top:14px }

/* Sin columna de importes: el operador va en una canaleta a la izquierda y
   la línea es sólo el concepto. Se lee como una liquidación, no como el
   resumen de nadie. */
.liq{
  display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px;
  align-items:baseline; padding:9px 0; font-size:13px; color:var(--pk-body);
}
.liq i{
  font-style:normal; color:var(--pk-muted); text-align:center;
  font-variant-numeric:tabular-nums;
}
.liq--tot{ border-top:1px solid var(--pk-line); margin-top:6px; padding-top:14px }
.liq--tot i{ color:var(--pk-midnight) }
.liq--tot span{ color:var(--pk-midnight); font-weight:var(--pk-w-medium); font-size:15px }

/* ============================================================
   PASOS
   ============================================================ */

.pasos{ list-style:none; margin:0; padding:0; counter-reset:p; display:grid; gap:0 }
.paso{
  counter-increment:p;
  display:grid; gap:6px 32px;
  padding:clamp(24px,2.6vw,34px) 0;
  border-top:1px solid var(--pk-line);
}
.paso:last-child{ border-bottom:1px solid var(--pk-line) }
@media (min-width:820px){
  .paso{ grid-template-columns:64px minmax(0,340px) minmax(0,1fr); align-items:baseline }
}
.paso::before{
  content:counter(p,decimal-leading-zero);
  font-size:clamp(15px,1.4vw,19px); font-weight:var(--pk-w-bold);
  color:var(--pk-line); letter-spacing:var(--pk-num-track);
  transition:color .5s var(--ease);
}
.paso:hover::before{ color:var(--pk-midnight) }
.paso h3{ font-size:clamp(18px,1.7vw,23px); font-weight:var(--pk-w-bold); letter-spacing:-.022em }
.paso p{ font-size:16px; max-width:56ch }

/* ============================================================
   FAQ
   ============================================================ */

.faq{ border-top:1px solid var(--pk-line); max-width:900px }
.faq details{ border-bottom:1px solid var(--pk-line) }
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:26px 52px 26px 0; min-height:44px;
  font-size:clamp(17px,1.6vw,22px); font-weight:var(--pk-w-medium);
  letter-spacing:-.018em; line-height:1.3; color:var(--pk-midnight);
}
.faq summary::-webkit-details-marker{ display:none }
/* El "+" no se apaga: gira media vuelta entero y la barra vertical se
   encoge hasta desaparecer en el centro. Las dos barras usan la misma
   transición y cambian juntas, así que el cierre es un solo movimiento y
   no dos. */
.faq summary::before, .faq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:15px; height:1.5px; background:var(--pk-midnight);
  border-radius:1px;
  transition:transform .5s cubic-bezier(.34,.9,.28,1);
}
.faq summary::before{ transform:translateY(-50%) rotate(0deg) }
.faq summary::after{ transform:translateY(-50%) rotate(90deg) }
.faq details[open] summary::before{ transform:translateY(-50%) rotate(180deg) }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(180deg) scaleX(0) }
.faq__a{ padding:0 0 28px; max-width:64ch }
.faq__a p + p{ margin-top:14px }

/* ============================================================
   CIERRE Y FORMULARIO
   ============================================================ */

.sec--cierre{ background:var(--pk-midnight) }
.sec--cierre .title{ color:var(--pk-white) }
.sec--cierre .sub{ color:rgba(255,255,255,.72) }

.cierre{ display:grid; gap:clamp(40px,4vw,80px) }
@media (min-width:900px){ .cierre{ grid-template-columns:minmax(0,1fr) minmax(0,520px) } }
.cierre__txt .sub{ margin-top:22px }

.oferta{
  margin-top:36px; max-width:440px;
  border:1px solid rgba(255,255,255,.24); border-radius:var(--pk-r-card);
  padding:22px 24px;
}
.oferta b{ color:var(--pk-white); font-weight:var(--pk-w-bold); font-size:18px }
.oferta p{ color:rgba(255,255,255,.72); font-size:15px; margin-top:6px }

.cierre__alt{ margin-top:32px; font-size:15px; color:rgba(255,255,255,.72) }
.cierre__alt .link{ color:var(--pk-white) }

.form{ display:grid; gap:18px }
.field{ display:grid; gap:8px }
.field label{ font-size:13px; font-weight:var(--pk-w-medium); color:rgba(255,255,255,.86) }
.field .opt{ color:rgba(255,255,255,.55); font-weight:var(--pk-w-regular) }
.field input, .field textarea{
  font-family:var(--pk-font);
  font-size:16px;                    /* menos de 16 y iOS hace zoom al enfocar */
  color:var(--pk-white);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--pk-r-card);
  padding:14px 16px; width:100%; min-height:52px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:118px; line-height:1.5 }
.field input:hover, .field textarea:hover{ border-color:rgba(255,255,255,.4) }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--pk-white); background:rgba(255,255,255,.1);
}
.field input:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--pk-blue-soft); outline-offset:2px }
/* Al 45% el placeholder daba 4,35:1 sobre el midnight y AA pide 4,5. */
.field ::placeholder{ color:rgba(255,255,255,.58); opacity:1 }

.form .btn{ margin-top:4px }
@media (min-width:560px){ .form .btn{ justify-self:start; padding-inline:48px } }
.sec--cierre .btn--primary{ background:var(--pk-white); color:var(--pk-midnight) }

.form__note{ font-size:13px; color:rgba(255,255,255,.55); line-height:1.45 }
.form__status{ font-size:15px; line-height:1.45; color:rgba(255,255,255,.86) }
.form__status[data-state="ok"]{ color:var(--pk-white); font-weight:var(--pk-w-medium) }
.form__status[data-state="error"]{ color:#ffb4ab }

/* ============================================================
   FOOTER
   ============================================================ */

.footer{ padding-block:clamp(56px,6vw,88px); background:var(--pk-midnight) }
.footer .logo{ color:var(--pk-white) }
.footer__d{ margin-top:16px; max-width:36ch; font-size:13px; color:rgba(255,255,255,.6) }
.footer .link{ color:rgba(255,255,255,.82) }
.footer .link:hover{ color:var(--pk-white) }
.footer__bottom{
  padding-top:28px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between;
}
.footer .meta{ color:rgba(255,255,255,.6) }

/* ============================================================
   OFERTA FUNDACIONAL — vive dentro del formulario
   ============================================================ */

.oferta{
  display:flex; align-items:flex-start; gap:20px;
  padding-bottom:24px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.oferta__n{
  font-size:clamp(52px,6vw,74px); font-weight:var(--pk-w-bold);
  line-height:.82; color:var(--pk-white); flex:0 0 auto;
  display:flex; align-items:flex-start;
}
.oferta__n i{ font-style:normal; font-size:.46em; margin-top:.12em; margin-left:.04em }
.oferta__t b{ display:block; color:var(--pk-white); font-weight:var(--pk-w-bold); font-size:19px; letter-spacing:-.02em }
.oferta__t p{ color:rgba(255,255,255,.72); font-size:15px; margin-top:7px; max-width:38ch }

/* ============================================================
   FOOTER
   ============================================================ */

.footer__cols{
  display:grid; gap:40px;
  padding-bottom:clamp(40px,4vw,56px);
}
@media (min-width:760px){ .footer__cols{ grid-template-columns:repeat(3,1fr); gap:48px } }

.footer__col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px }
.footer__h{
  font-size:var(--pk-web-meta); font-weight:var(--pk-w-medium);
  color:rgba(255,255,255,.5); margin:0 0 7px;
  letter-spacing:.01em;
}
.footer__col .link{ color:rgba(255,255,255,.86); font-size:15px; font-weight:var(--pk-w-regular) }
.footer__col .link:hover{ color:var(--pk-white) }
.footer__d{ font-size:14px; color:rgba(255,255,255,.6); line-height:1.5; max-width:32ch; margin:0 }

/* El wordmark cierra la página. Es una firma, no un titular: por eso va
   al pie y recortado por abajo, apoyado en el borde. */
.footer__firma{
  overflow:hidden;
  padding-top:0;
  margin-bottom:clamp(20px,2.4vw,32px);
}
.footer__firma .logo{
  width:100%; height:auto;
  color:rgba(255,255,255,.14);
  margin-bottom:-2.5%;
}

.footer__bottom{
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between;
}

/* ============================================================
   MOVIMIENTO
   ------------------------------------------------------------
   Dos mecanismos, y no se mezclan:

   1. REVELADOS de entrada → IntersectionObserver (.js-anim + .is-in).
      Una animación ligada al scroll se reproduce hacia atrás al subir,
      y con fill-mode forwards el elemento se ve normal antes del rango
      y salta al estado inicial al entrar: parpadea. El observer entra
      una sola vez y no vuelve atrás.
      El escondido lo habilita .js-anim, que agrega el JS: sin JS, o en
      un render sin scroll, la página se ve completa.

   2. EFECTOS CONTINUOS ligados al scroll → animation-timeline.
      Sólo donde el movimiento ES la respuesta al scroll: el parallax
      de los teléfonos.

   Cada sección tiene su propio gesto. El mismo fade repetido en todas
   es lo que se lee como plantilla.
   ============================================================ */

/* ---------- 1. Revelados ---------- */

.js-anim [data-rev]{
  opacity:0;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.js-anim [data-rev].is-in{ opacity:1; transform:none }

/* La tercera opción tiene su propio gesto, abajo: el eje se traza, las dos
   laterales se corren hacia afuera y la del medio sube por el hueco. */

.js-anim .pilar{ transform:translateY(24px) }
.js-anim .pilar:nth-of-type(2){ --d:110ms }
.js-anim .pilar:nth-of-type(3){ --d:220ms }

.js-anim .cobertura{ transform:scale(.97) }
.js-anim .cifra{ transform:translateY(20px) }
.js-anim .paso{ transform:translateX(-22px) }

/* En pantallas angostas el gesto lateral empuja el contenido fuera del
   viewport mientras entra. Ahí el movimiento pasa a ser vertical. */
@media (max-width:700px){
  .js-anim .paso{ transform:translateY(20px) }
}
.js-anim .oferta{ transform:translateY(16px) }
.js-anim .barra-dato,
.js-anim .trae,
.js-anim .globo,
.js-anim .dos__img{ transform:translateY(18px) }

/* ---------- Gestos propios de cada sección ---------- */

/* Los nodos entran uno por uno desde el centro hacia afuera: la red se
   arma, no aparece. Y recién cuando están todos empieza a correr el pulso
   por los cables. */
/* La entrada va como animación y NO como transición con retardo. Con
   transición, el retardo del escalonado se le pega también al hover: el
   octavo nodo tardaba casi un segundo en reaccionar al mouse, y encima
   esta regla —que viene más abajo en la hoja— le pisaba la duración a la
   del hover, así que el ícono y el borde nunca coincidían.
   Con fill-mode backwards el estado inicial vale sólo antes de arrancar y
   después el nodo queda libre para su propia transición. */
.js-anim .red .nodo{ opacity:0 }
.js-anim .red.is-in .nodo{
  opacity:1;
  animation:entrar-nodo .55s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 90ms + 260ms);
}
@keyframes entrar-nodo{
  from{ opacity:0; transform:translateY(10px) scale(.96) }
  to  { opacity:1; transform:none }
}

.js-anim .red .red__yo{ opacity:0 }
.js-anim .red.is-in .red__yo{
  opacity:1;
  animation:entrar-centro .6s var(--ease) backwards;
}
@keyframes entrar-centro{
  from{ opacity:0; transform:scale(.86) }
  to  { opacity:1; transform:none }
}

/* El escondido va detrás del gate, como todo lo demás: sin JS de
   animación —o con reduced-motion— los cables se ven, no desaparecen. */
.cable{ transition:opacity .5s var(--ease) .12s, stroke .35s var(--ease) }
.js-anim .red .cable{ opacity:0 }
.js-anim .red.is-in .cable{ opacity:1 }
.cable--pulso{ animation:none }
@media (prefers-reduced-motion:no-preference){
  /* Retardo NEGATIVO: cada pulso arranca ya avanzado, así apenas aparece el
     cuadro los ocho están en marcha en vez de tener que esperar a que
     salgan. Y el paso es la duración dividida por la cantidad de cables,
     que es lo que los reparte parejo por el ciclo y evita que se junten. */
  .js-anim .red.is-in .cable--pulso{
    animation:pulso 3.4s linear infinite;
    animation-delay:calc(var(--i,0) * -425ms);
  }
}
@keyframes pulso{
  from{ stroke-dashoffset:109 }
  to  { stroke-dashoffset:0 }
}

/* El tablero se enciende: la barra se corre, las fechas se pintan una a
   una y las reglas se prenden. Todo se apaga en cuanto el visitante toca
   algo —la clase is-tocado— para que la entrada no le pise la mano. */
.ctrl__g--slider{ transition:--pn .8s var(--ease) .3s }
.js-anim .tablero .ctrl__g--slider{ --pn:0 }
.js-anim .tablero.is-in .ctrl__g--slider{ --pn:.58 }
.ctrl__g--slider.is-tocado{ transition:none }

.dia{ transition-delay:calc(var(--d,0) * 130ms + 520ms) }
.js-anim .tablero .ctrl__g--cal:not(.is-tocado) .dia.on{ background:var(--pk-line) }
.js-anim .tablero.is-in .ctrl__g--cal:not(.is-tocado) .dia.on{ background:var(--pk-midnight) }
.ctrl__g--cal.is-tocado .dia{ transition-delay:0s }

.regla i, .regla i::after{ transition-delay:calc(var(--d,0) * 120ms + 700ms) }
.js-anim .tablero .ctrl__g--sw:not(.is-tocado) .regla.on i{ background:var(--pk-line) }
.js-anim .tablero .ctrl__g--sw:not(.is-tocado) .regla.on i::after{ transform:none }
.js-anim .tablero.is-in .ctrl__g--sw:not(.is-tocado) .regla.on i{ background:var(--pk-midnight) }
.js-anim .tablero.is-in .ctrl__g--sw:not(.is-tocado) .regla.on i::after{ transform:translateX(15px) }
.ctrl__g--sw.is-tocado .regla i,
.ctrl__g--sw.is-tocado .regla i::after{ transition-delay:0s }



/* La barra del 38% se llena. */
.barra-dato__fill{ transform-origin:left; transition:transform 1.15s var(--ease) .1s }
.js-anim .barra-dato .barra-dato__fill{ transform:scaleX(0) }
.js-anim .barra-dato.is-in .barra-dato__fill{ transform:scaleX(1) }

/* ---- El tablero de datos ----
   Las tarjetas entran escalonadas y adentro cada gráfico hace lo suyo: la
   curva se dibuja de izquierda a derecha, el área aparece por debajo, el
   cursor cae después, las barras crecen desde la base y el anillo barre
   desde las doce. */
.dato{ transition:opacity .6s var(--ease), transform .6s var(--ease) }
.js-anim .tablero-datos .dato{ opacity:0; transform:translateY(16px) }
.js-anim .tablero-datos.is-in .dato{ opacity:1; transform:none }
.js-anim .tablero-datos.is-in .dato:nth-of-type(2){ transition-delay:.09s }
.js-anim .tablero-datos.is-in .dato:nth-of-type(3){ transition-delay:.18s }
.js-anim .tablero-datos.is-in .dato:nth-of-type(4){ transition-delay:.27s }

/* El recorte se abre de izquierda a derecha y arrastra a la línea y al
   área juntas: el gráfico se dibuja, no aparece. */
.curva__clip{ transform-box:fill-box; transform-origin:left center; transition:transform 1.6s var(--ease) .35s }
.js-anim .tablero-datos .curva__clip{ transform:scaleX(0) }
.js-anim .tablero-datos.is-in .curva__clip{ transform:none }

.js-anim .tablero-datos .curva__vert,
.js-anim .tablero-datos .curva__punto,
.js-anim .tablero-datos .curva__tag{ opacity:0; transition-delay:1.35s }
.js-anim .tablero-datos.is-in .curva__vert{ opacity:.4 }
.js-anim .tablero-datos.is-in .curva__punto,
.js-anim .tablero-datos.is-in .curva__tag{ opacity:1 }

/* ---- Lo que no se detiene ----
   Tres detalles que siguen corriendo después de la entrada, para que el
   tablero se lea como algo vivo y no como una captura. El cursor de la
   curva lo mueve el JS; estos dos son CSS. */
@media (prefers-reduced-motion:no-preference){
  /* Una semana se enciende por vez, en orden. */
  .js-anim .tablero-datos.is-in .barra:not(.barra--alta) i{
    animation:semana 6s var(--ease) infinite;
    animation-delay:calc(var(--i,0) * .5s + 1.8s);
  }
  /* Y un brillo recorre el arco de las reseñas. */
}
@keyframes semana{
  0%, 66%, 100%{ background:var(--pk-line) }
  74%, 84%{ background:rgba(10,21,33,.42) }
}

.barra i{ transition:transform .75s var(--ease); transition-delay:calc(var(--i,0) * 110ms + 400ms) }
.js-anim .tablero-datos .barra i{ transform:scaleY(0) }
.js-anim .tablero-datos.is-in .barra i{ transform:scaleY(1) }

/* El arco no usa transición: es una animación en loop. El estado base ya
   es el arco completo, así que con prefers-reduced-motion —o sin JS— se ve
   el 94% quieto y no un anillo vacío. */
@media (prefers-reduced-motion:no-preference){
  .js-anim .tablero-datos.is-in .anillo__arco{
    animation:llenar 5.4s cubic-bezier(.62,0,.38,1) infinite .4s;
  }
}
/* Con punta redonda, un guion de largo cero igual dibuja un punto del ancho
   del trazo: al cerrar el ciclo quedaba una marca azul saltando del final al
   principio. Por eso los dos extremos llevan opacidad: se apaga en el 4%
   final —cuando ya no queda casi nada dibujado— y se enciende en el 3%
   inicial. No se lee como un desvanecido, se lee como que terminó. */
@keyframes llenar{
  0%   { stroke-dasharray:0 100;  stroke-dashoffset:0;   opacity:0 }
  3%   { stroke-dasharray:3 100;  stroke-dashoffset:0;   opacity:1 }
  42%  { stroke-dasharray:94 100; stroke-dashoffset:0;   opacity:1 }
  56%  { stroke-dasharray:94 100; stroke-dashoffset:0;   opacity:1 }   /* se queda a la vista */
  86%  { stroke-dasharray:3 100;  stroke-dashoffset:-91; opacity:1 }   /* la cola alcanza a la punta */
  90%  { stroke-dasharray:0 100;  stroke-dashoffset:-94; opacity:0 }
  100% { stroke-dasharray:0 100;  stroke-dashoffset:-94; opacity:0 }   /* y el anillo queda vacío */
}

.dato--liq .liq{ transition:opacity .5s var(--ease); transition-delay:calc(var(--l,0) * 90ms + 500ms) }
.js-anim .tablero-datos .dato--liq .liq{ opacity:0 }
.js-anim .tablero-datos.is-in .dato--liq .liq{ opacity:1 }

/* Las tres entran escalonadas, de izquierda a derecha en el orden en que
   se leen. La nuestra llega última y entra desde un poco más abajo: es la
   conclusión, no una más de la fila. */
/* La entrada va como animación y NO como transición. Con transición, el
   retardo del escalonado se le pegaba también al hover: la tarjeta del
   medio tenía --i:2, así que tardaba 240ms en reaccionar al mouse. Con
   fill-mode backwards el estado inicial vale sólo antes de arrancar y
   después la tarjeta queda libre para su propia transición. */
.js-anim .opciones .opcion{ opacity:0 }
.js-anim .opciones.is-in .opcion{
  opacity:1;
  animation:entrar-opcion .62s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 120ms);
}
@keyframes entrar-opcion{
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:1; transform:none }
}
.js-anim .opciones.is-in .opcion--esta{ animation-name:entrar-esta }
@keyframes entrar-esta{
  from{ opacity:0; transform:translateY(30px) scale(.985) }
  to  { opacity:1; transform:none }
}

/* Y adentro de la nuestra, tres detalles más que llegan después de la
   tarjeta: la pastilla cae, los tildes se dibujan uno por uno y recién
   entonces empieza a correr el haz por el borde. */
.opcion__pill{ transition:opacity .5s var(--ease) .48s, transform .5s var(--ease) .48s }
.js-anim .opciones .opcion__pill{ opacity:0; transform:translateY(-8px) }
.js-anim .opciones.is-in .opcion__pill{ opacity:1; transform:none }

.gana li::before{
  clip-path:inset(0 0 0 0);
  transition:clip-path .45s var(--ease);
  transition-delay:calc(var(--m,0) * 130ms + 700ms);
}
.js-anim .opciones .gana li::before{ clip-path:inset(0 100% 0 0) }
.js-anim .opciones.is-in .gana li::before{ clip-path:inset(0 0 0 0) }

.gana li{ transition:opacity .45s var(--ease); transition-delay:calc(var(--m,0) * 130ms + 640ms) }
.js-anim .opciones .gana li{ opacity:0 }
.js-anim .opciones.is-in .gana li{ opacity:1 }

@media (prefers-reduced-motion:no-preference){
  .js-anim .opciones.is-in .opcion__haz{
    animation:aparecer-haz .6s var(--ease) 1.3s forwards,
              girar-haz 5.5s linear 1.3s infinite;
  }
}
@keyframes aparecer-haz{ to{ opacity:1 } }
@keyframes girar-haz{ to{ --haz:360deg } }

/* Cada cifra dibuja su hairline antes de que aparezca el número. */
.cifra{ position:relative }
.cifra::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:1px;
  background:var(--pk-midnight); transform-origin:left;
  transition:transform .8s var(--ease);
}
.js-anim .cifra::before{ transform:scaleX(0) }
.js-anim .cifra.is-in::before{ transform:scaleX(1) }

/* ---------- Hover ---------- */


/* ---------- 2. Carga del hero ---------- */

@keyframes subir-arco{
  from{ transform:translateY(92px); opacity:0 }
  to  { transform:none; opacity:1 }
}
.tel{ animation:subir-arco 1.05s var(--ease) both }
.tel--3{ animation-delay:.06s }
.tel--2,.tel--4{ animation-delay:.17s }
.tel--1,.tel--5{ animation-delay:.28s }

.line{ display:block; overflow:hidden }
@keyframes subir{ from{ transform:translateY(102%) } to{ transform:none } }
.line > span{ display:block; animation:subir .95s cubic-bezier(.16,.84,.28,1) both; animation-delay:var(--d,0ms) }

/* ---------- 3. Parallax del arco ----------
   Al bajar, los costados suben y el central baja: el arco se invierte.
   Esto SÍ es scroll-linked, porque el movimiento es la respuesta directa
   al scroll y tiene que poder ir y volver. */

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference) and (min-width:641px){
    @keyframes arco-sube-mucho{ to{ transform:translateY(-52px) } }
    @keyframes arco-sube-poco{ to{ transform:translateY(-30px) } }
    @keyframes arco-baja{      to{ transform:translateY(20px) } }

    .tel--1, .tel--5{
      animation:subir-arco 1.05s var(--ease) both,
                arco-sube-mucho linear both;
      animation-timeline:auto, scroll(root block);
      animation-range:normal, 0 640px;
    }
    .tel--2, .tel--4{
      animation:subir-arco 1.05s var(--ease) both,
                arco-sube-poco linear both;
      animation-timeline:auto, scroll(root block);
      animation-range:normal, 0 640px;
    }
    .tel--3{
      animation:subir-arco 1.05s var(--ease) both,
                arco-baja linear both;
      animation-timeline:auto, scroll(root block);
      animation-range:normal, 0 640px;
    }
    .tel--1,.tel--5{ animation-delay:.28s, 0s }
    .tel--2,.tel--4{ animation-delay:.17s, 0s }
    .tel--3{ animation-delay:.06s, 0s }

    /* El scroll deja al teléfono en posiciones fraccionadas —545,8 · 472,52
       · 399,23…—. Sin capa propia, el navegador dibuja el marco con
       antialiasing en la posición real pero pega el texto a la grilla de
       píxeles enteros: el texto salta de a un píxel mientras el marco se
       mueve suave, y se ve como si la parte blanca se moviera adentro del
       teléfono. Con capa propia el contenido se rasteriza una sola vez y
       después se mueve entero, marco y texto juntos. */
    .tel{ will-change:transform }
  }

  /* En el teléfono el arco es de tres y el recorrido de scroll es más corto,
     así que el movimiento se mide contra ese recorrido y no contra el de
     escritorio: con los 640px de allá, en mobile se completaba recién
     pasada la sección y el arco parecía quieto. El central baja menos que
     en escritorio porque abajo tiene el epígrafe y no un borde. */
  @media (prefers-reduced-motion: no-preference) and (max-width:640px){
    @keyframes arco-sube-mob{ to{ transform:translateY(-34px) } }
    @keyframes arco-baja-mob{ to{ transform:translateY(14px) } }

    .tel--2, .tel--4{
      animation:subir-arco 1.05s var(--ease) both,
                arco-sube-mob linear both;
      animation-timeline:auto, scroll(root block);
      animation-range:normal, 0 460px;
      animation-delay:.17s, 0s;
    }
    .tel--3{
      animation:subir-arco 1.05s var(--ease) both,
                arco-baja-mob linear both;
      animation-timeline:auto, scroll(root block);
      animation-range:normal, 0 460px;
      animation-delay:.06s, 0s;
    }
    .tel{ will-change:transform }
  }
}

/* ---------- FAQ ---------- */
/* details no anima su altura por sí solo: el contenido se mide con un
   grid de 0fr a 1fr, que sí es animable. */

.faq details{ overflow:hidden }
.faq__a{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .5s var(--ease), opacity .32s var(--ease) .1s;
  /* Sin esto la fila mide 0 pero el envoltorio conserva su padding, y al
     cerrar quedaban 28px que recién desaparecían al quitar el atributo
     open: un salto seco justo al final del cierre. */
  overflow:hidden;
}
.faq__a > *{ min-height:0 }
/* El contenido no sólo crece: entra desde un poco más arriba, así el texto
   acompaña a la altura en vez de aparecer de golpe cuando ya hay lugar. */
.faq__in{ transition:transform .5s var(--ease) }

.js-anim .faq details[open] .faq__a{ grid-template-rows:1fr; opacity:1 }
/* Mientras se cierra, el details sigue abierto para que la salida se vea. */
.js-anim .faq details:not([open]) .faq__a,
.js-anim .faq details.is-closing .faq__a{ grid-template-rows:0fr; opacity:0 }
/* El cierre no usa la misma curva que la apertura. Con una ease-out la
   altura se desploma al principio y después queda una cola de píxeles que
   no se ve pero sí se espera: eso era lo que se sentía trabado. Acá la
   curva termina de moverse cuando termina. */
.js-anim .faq details.is-closing .faq__a{
  transition:grid-template-rows .4s cubic-bezier(.65,0,.35,1),
             opacity .26s var(--ease);
}
.js-anim .faq details:not([open]) .faq__in,
.js-anim .faq details.is-closing .faq__in{ transform:translateY(-10px) }
.faq details.is-closing summary::before{ transform:translateY(-50%) rotate(0deg) }
.faq details.is-closing summary::after{ transform:translateY(-50%) rotate(90deg) scaleX(1) }
/* El padding vive en un envoltorio, si no queda aire cuando está cerrado. */
.faq__a{ padding:0 }
/* El aire de abajo NO puede ser padding del item del grid: el padding es
   incompresible, así que la fila nunca bajaba de 28px por más que valiera
   0fr, y el cierre terminaba con un salto seco de esos 28px. Va como
   margen del último párrafo, que sí se colapsa a cero, y overflow:hidden
   le saca al item su tamaño mínimo automático. */
.faq__in{ padding:0; max-width:64ch; overflow:hidden }
.faq__in > :last-child{ margin-bottom:28px }
.faq__in p + p{ margin-top:14px }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .nav{ transition:none }
  .js-anim [data-rev]{ opacity:1; transform:none }
}

/* ---------- Qué pasa después de enviar ----------
   Baja la fricción del formulario: dice qué ocurre al mandarlo, que es
   la duda que frena a alguien que todavía no habló con nadie. */
.despues{
  list-style:none; counter-reset:d;
  margin:38px 0 0; padding:0;
  max-width:46ch;
}
.despues li{
  counter-increment:d;
  position:relative;
  padding:16px 0 16px 40px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:15px; line-height:1.5;
  color:rgba(255,255,255,.68);
}
.despues li:last-child{ border-bottom:1px solid rgba(255,255,255,.16) }
.despues li::before{
  content:counter(d);
  position:absolute; left:0; top:17px;
  font-size:13px; font-weight:var(--pk-w-bold);
  color:rgba(255,255,255,.42);
  letter-spacing:var(--pk-num-track);
}
.despues b{ color:var(--pk-white); font-weight:var(--pk-w-medium) }


/* ============================================================
   PÁGINA LEGAL
   ------------------------------------------------------------
   Un documento para leer, no una pieza de diseño: una sola columna,
   medida de lectura corta y jerarquía por tamaño, sin tarjetas ni
   color. Comparte la hoja con la landing para que se sirva de caché.
   ============================================================ */

.legal__top{ padding-block:28px; border-bottom:1px solid var(--pk-line) }
/* Blanco táctil de 44px: el wordmark solo mide 22 de alto. */
.legal__marca{ display:inline-flex; align-items:center; min-height:44px }
.legal__marca .logo{ height:22px }

.legal{ padding-block:clamp(52px,6vw,88px) }
.legal .title{ max-width:20ch }
.legal__fecha{ margin-top:14px }

/* La medida va en píxeles y no en "ch": el ch se resuelve contra el
   tamaño del contenedor —17px— y no contra el de los párrafos —16px—, así
   que 68ch daban 790px, o sea 102 caracteres por línea. Medido con la
   fuente real, 570px son 74 caracteres: dentro del rango cómodo. */
.legal__cuerpo{ margin-top:clamp(38px,4vw,58px); max-width:570px }
.legal__cuerpo h2{
  font-size:clamp(19px,1.6vw,23px); font-weight:var(--pk-w-bold);
  letter-spacing:-.015em; line-height:1.25; color:var(--pk-midnight);
  margin:clamp(34px,3.4vw,48px) 0 12px;
}
.legal__cuerpo h2:first-child{ margin-top:0 }
.legal__cuerpo p{ font-size:16px; margin-bottom:12px }
.legal__cuerpo p:last-child{ margin-bottom:0 }
.legal__cuerpo b{ color:var(--pk-midnight); font-weight:var(--pk-w-medium) }

.legal__cuerpo ul{ margin:0 0 12px; padding-left:20px }
.legal__cuerpo li{ font-size:16px; color:var(--pk-body); line-height:1.55; margin-bottom:6px }
.legal__cuerpo li::marker{ color:var(--pk-line) }

/* Los dos párrafos que la ley pide textuales van marcados como cita: no
   son nuestra voz y conviene que se note. */
.legal__cita{
  border-left:2px solid var(--pk-line); padding-left:18px;
  font-size:14.5px; color:var(--pk-muted);
}

.legal__volver{ margin-top:clamp(46px,5vw,72px) }