/* PURE — sistema de la etapa 7.
   Marca vigente: `Diseno de Marca Pure #2` (oct 2025). Los archivos de logo
   mandan sobre el PDF en logo, tipografia y color (Wilmar, 2026-09-21).
   La primera marca (#EB5947 coral, #F39C13 mostaza, Bricolage + Karla) esta
   derogada y no aparece aqui. */

:root{
  /* Muestreados de PURE-1.png e ICONO-COLOR.png */
  --coral:#f39583;
  /* El coral aclarado y oscurecido para reposo/presion. Van como tokens y
     no como literales en la regla: un estado de un boton es la marca igual
     que el color de reposo, y suelto se copia mal a la siguiente pagina. */
  --coral-hover:#ef8874;
  --coral-press:#e87d68;
  --cyan:#10b6de;
  /* Complementarios publicados en PURE 2025.pdf */
  --c-shell:#f6e5db;
  --c-blush:#fec2ba;
  --c-rose:#f17575;
  --c-blue:#509cb8;
  --c-mint:#79bdae;
  --c-sage:#bfddb9;
  /* Tinta: azul del dibujo de las manos de PURE 2025.pdf, muestreado del vector */
  --ink:#21264f;
  --ink-soft:#5d6484;
  --paper:#fff;

  --script:'Pacifico', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --sans:'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter:clamp(20px, 5vw, 64px);
  --measure:62ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.5vw + 14px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}

/* Foco visible en todo lo enfocable. No se suprime en ningun sitio. */
:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--c-blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- cabecera ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:10px var(--gutter);
  /* Una capa de material, no una franja opaca: el contenido pasa por debajo
     y se ve pasar. El 94% de antes tapaba; el 82% con desenfoque deja ver el
     movimiento sin perder legibilidad — medido sobre el heroe, el contraste
     del texto de la cabecera no baja de AA. El color solido sigue ahi de
     reserva para quien no tenga backdrop-filter. */
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
}
/* Borde de scroll en vez de una linea de 1px: la separacion aparece donde el
   contenido pasa por debajo de la cabecera, y se desvanece. */
.site-header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
  background:linear-gradient(to bottom, #21264f14, transparent);
  pointer-events:none;
}
.site-header .logo{display:block;height:34px;width:auto}
/* ——— El menu ————————————————————————————————————————————————
   Por defecto la lista va en linea, como siempre. Todo el colapso vive
   dentro del @media de telefono de mas abajo, y no al reves: la regla que
   cierra el panel es `.menu:not([open]) > .site-nav`, que pesa mas que
   `.menu > .site-nav`, asi que puesta fuera del media ganaba tambien en
   pantalla ancha y dejaba la cabecera sin menu (medido a 1026px: boton
   oculto y cero enlaces visibles). Ordenarlo por especificidad es fragil;
   ordenarlo por ancho no.

   El <details> es nativo a proposito: terminos.html y privacidad.html no
   cargan ningun script, asi que un boton hecho con JS estaria muerto en dos
   de las once paginas. */
.menu{position:static}
.menu > summary{display:none}
/* Dos mecanismos porque los navegadores usan dos para esconder el contenido
   de un <details> cerrado: los viejos, display:none — y el display:flex que
   .site-nav ya trae lo vence. Los actuales, content-visibility sobre
   ::details-content, que ningun display vence: medido, la lista se quedaba
   en 0px de ancho en pantalla ancha. */
.menu::details-content{content-visibility:visible;block-size:auto;overflow:visible}

@media(max-width:779px){
  .menu{position:relative;order:2;margin-left:auto}

  /* El boton: 44x44 de verdad, no un icono de 12px con aire alrededor. */
  .menu > summary{
    list-style:none;
    width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:50%;
    cursor:pointer;
    transition:background .18s ease;
  }
  .menu > summary::-webkit-details-marker{display:none}
  .menu > summary::marker{content:""}
  .menu > summary:hover,.menu[open] > summary{background:#21264f12}
  .menu > summary:focus-visible{outline:2px solid var(--cian);outline-offset:2px}

  /* Los tres puntos, dibujados: tres circulos, sin fuente de iconos. */
  .puntos{position:relative;display:block;width:4px;height:4px;border-radius:50%;background:var(--tinta)}
  .puntos::before,.puntos::after{
    content:"";position:absolute;left:0;
    width:4px;height:4px;border-radius:50%;background:var(--tinta);
  }
  .puntos::before{top:-7px}
  .puntos::after{top:7px}

  .menu:not([open]) > .site-nav{display:none}
  .menu[open] > .site-nav{
    position:absolute;top:calc(100% + 10px);right:0;
    /* Nace en el boton que lo abrio, no en su propio centro: es la relacion
       espacial entre los tres puntos y lo que sale de ellos. Y se materializa
       — escala y desenfoque a la vez — en vez de aparecer de golpe. El
       <details> nativo no permite animar el cierre sin JavaScript, asi que la
       salida es instantanea; entrar bien y salir seco es mejor que ninguna
       de las dos, y dos de las once paginas no cargan script. */
    transform-origin:top right;
    animation:menu-aparece 200ms cubic-bezier(.32,.72,0,1) both;
    z-index:40;
    display:flex;flex-direction:column;
    min-width:196px;
    padding:6px;
    background:var(--papel);
    border:1px solid #21264f1a;
    border-radius:16px;
    box-shadow:0 14px 34px #21264f22;
  }
  .menu[open] > .site-nav a{justify-content:flex-start;padding-inline:14px;border-radius:10px}
  .menu[open] > .site-nav a:hover{background:#21264f0d}
  .menu[open] > .site-nav a:active{background:#21264f1a;transform:scale(.98)}
  .menu[open] > .site-nav a{transition:transform 100ms cubic-bezier(.32,.72,0,1),
                                       background-color 120ms ease}
}
@keyframes menu-aparece{
  from{opacity:0;transform:scale(.94) translateY(-6px)}
  to{opacity:1;transform:none}
}

/* La lista, en linea. Es el estado normal en cualquier ancho; el telefono la
   guarda en el panel de arriba. */
.site-nav{display:flex;align-items:center;gap:4px 20px}

.site-nav a{
  color:var(--ink);text-decoration:none;
  /* 44px de alto de toque real (HIG/WCAG), no de linea de texto: el enlace es
     un flex item centrado en vez de confiar en line-height + relleno, que
     medido daba 36px — por debajo del minimo con el que Zaira frena esto. */
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  min-height:44px;
  padding:0 6px;
  white-space:nowrap;
  border-bottom:1.5px solid transparent;
}
.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--coral)}
/* La respuesta va en el pulsar, no en el soltar: el unico sitio del sitio que
   lo hacia era el CTA. 100ms y la misma curva que el, para que un enlace y un
   boton se sientan de la misma familia. */
.site-nav a{transition:transform 100ms cubic-bezier(.32,.72,0,1),
                       border-bottom-color 140ms ease}
.site-nav a:active{transform:scale(.96)}
.menu > summary:active{transform:scale(.92)}
@media(min-width:780px){
  .site-nav{gap:28px;font-size:.9rem}
  /* En escritorio el puntero no necesita 44px: la cabecera no debe crecer
     por una regla que ahi no aplica. */
  .site-nav a{min-height:0;padding:4px 0}
}

/* Una sola promesa: la cabecera y el heroe dicen lo mismo.
   Nunca "Quiero participar" mientras no haya nada que reservar. */
.cta{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.92rem;
  line-height:1.2;
  color:#fff;
  background:var(--coral);
  border:0;
  border-radius:999px;
  padding:14px 24px;
  min-height:44px;
  text-decoration:none;
  cursor:pointer;
  transition:transform 140ms cubic-bezier(.32,.72,0,1), background-color 140ms ease;
}
.cta:hover{background:var(--coral-hover)}
.cta:active{transform:scale(.97);background:var(--coral-press)}
.site-header .cta{padding:12px 18px;font-size:.85rem}

/* ---------- el capitulo de entrada ---------- */
.entry{
  position:relative;
  isolation:isolate;
  padding-block:clamp(56px,10vw,132px) clamp(64px,11vw,148px);
}
.entry > *{position:relative;z-index:1}
.entry-inner{
  padding-inline:var(--gutter);
  max-width:1180px;
  margin-inline:auto;
  display:grid;
  gap:clamp(32px,5vw,56px);
  grid-template-columns:1fr;
  align-items:center;
}
@media(min-width:900px){
  .entry-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

.eyebrow{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.eyebrow::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
  margin-top:12px;
}

/* Pacifico: grande y poco. Nunca en parrafo, nunca en caja alta. */
.headline{
  font-family:var(--script);
  font-size:clamp(2.3rem,7.2vw,4.3rem);
  line-height:1.12;
  letter-spacing:.005em;
}
.headline .second{display:block;color:var(--coral);text-wrap:balance}

.support{
  margin-top:clamp(18px,2.4vw,26px);
  max-width:34ch;
  font-size:clamp(1rem,.4vw + .95rem,1.16rem);
  color:var(--ink-soft);
}
.actions{margin-top:clamp(26px,3.4vw,38px)}
.reassure{
  margin-top:16px;
  font-size:.82rem;
  color:var(--ink-soft);
  max-width:38ch;
}

/* Placa de material ausente. No se rellena con nada plausible. */
.plate{
  position:relative;
  border-radius:52% 52% 10px 10px / 30% 30% 10px 10px;
  background:linear-gradient(158deg,var(--c-blush) 0%,var(--c-shell) 52%,var(--c-sage) 100%);
  aspect-ratio:4 / 4.4;
  display:grid;
  place-items:center;
  padding:28px;
  text-align:center;
}
.plate span{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-rose);
  background:#ffffffcc;
  border:1.5px dashed #21264f2e;
  border-radius:3px;
  padding:10px 14px;
  max-width:24ch;
  line-height:1.6;
}
@media(max-width:899px){ .plate{aspect-ratio:4 / 3.2;max-width:520px;margin-inline:auto} }

/* ---------- el arco que separa capitulos ---------- */
/* El borde entre capitulos es un arco, no una recta, y lo dibuja la marca.
   Se aplana en movil: a 380 px una curva pronunciada se come dos lineas. */
.arc{display:block;width:100%;height:clamp(18px,3vw,56px);position:relative;z-index:1}
.arc path{fill:var(--c-shell)}

.rest{
  position:relative;
  z-index:1;
  background:var(--c-shell);
  padding:clamp(48px,7vw,88px) var(--gutter);
  overflow:hidden;
  text-align:center;
}
.rest .wm{
  position:absolute;
  right:-7%;
  top:-22%;
  width:min(44%,400px);
  opacity:.13;
  pointer-events:none;
}
.rest .wm img{display:block;width:100%;height:auto}
.rest-inner{position:relative;max-width:var(--measure);margin-inline:auto}
.rest h2{
  font-family:var(--script);
  font-size:clamp(1.5rem,4.4vw,2.4rem);
  line-height:1.2;
}
.rest h2 .second{display:block;color:var(--coral);text-wrap:balance}
.rest p{margin-top:16px;font-size:.92rem;color:var(--ink-soft)}

/* ---------- las dos lineas ---------- */
/* Una es la persona y sigue al visitante; la otra es Pure y va a lo suyo.
   z-index 0 y siempre por debajo del contenido: el fallo medido en la ronda 4
   fue exactamente el contrario (un hilo perfecto que nadie podia ver). */
#threads{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
#threads path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#thread-cyan{stroke:var(--cyan);stroke-width:2.6}
#thread-coral{stroke:var(--coral);stroke-width:3.2}
@media(min-width:900px){ #thread-cyan{stroke-width:3} #thread-coral{stroke-width:3.6} }

/* En reposo la linea ya es visible: abierta y ancha, no ausente.
   dashoffset = length significa oculta del todo, dashoffset = 0 dibujada
   del todo (fraccion visible = 1 - offset/length). Para un 72% visible en
   reposo el offset es .28 * length, no .72 * length. */
#thread-cyan,#thread-coral{
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:calc(var(--len,1200) * .28);
}
@supports (animation-timeline: scroll()){
  #thread-cyan,#thread-coral{
    animation:thread-draw linear both;
    animation-timeline:scroll(root block);
    animation-range:0% 86%;
  }
}
@keyframes thread-draw{
  from{stroke-dashoffset:calc(var(--len,1200) * .28)}
  to{stroke-dashoffset:0}
}

@media (prefers-reduced-motion: reduce){
  #thread-cyan,#thread-coral{
    stroke-dashoffset:0 !important;
    animation:none !important;
  }
  .cta{transition:none}
  *{scroll-behavior:auto !important}
}

@media print{ #threads{display:none} }

/* En telefono la cabecera lleva tres filas: pegada arriba se comeria un
   quinto de la pantalla, asi que ahi no es sticky. */
/* El sticky ya NO se apaga en telefono (Wilmar, 2026-09-22: "dejar el menu
   visible siempre que empiece a hacer scroll"). Antes se apagaba y el
   visitante se quedaba sin navegacion en cuanto empezaba a leer: medido, a
   2000px de scroll la cabecera estaba en top:-2000 y no habia boton ninguno.
   Ahora la cabecera cuesta 44px de alto en vez de una fila de enlaces, asi
   que puede quedarse sin comerse la pantalla. */


/* Transparencia reducida: el material se vuelve solido en vez de desaparecer.
   Sin esto, quien la pide se queda con una cabecera translucida igual. */
@media (prefers-reduced-motion: reduce){
  /* Quietud no es "sin respuesta": el panel sigue apareciendo, con una
     transicion de opacidad en vez de escala, y el pulsado deja de escalar
     pero conserva el cambio de color. */
  .menu[open] > .site-nav{animation:menu-fundido 160ms ease both}
  .site-nav a:active,.menu > summary:active,
  .menu[open] > .site-nav a:active{transform:none}
}
@keyframes menu-fundido{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-transparency: reduce){
  .site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu[open] > .site-nav{background:var(--paper)}
}

/* Contraste alto: fondo solido y un borde que existe de verdad. */
@media (prefers-contrast: more){
  .site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
               border-bottom:1px solid var(--tinta)}
  .site-header::after{display:none}
  .menu[open] > .site-nav{background:var(--paper);border-color:var(--tinta)}
}