/* paginas.css · estilos de registro y gracias. Solo var(--…) de tokens.css; ningún HEX aquí.
   Registro: tramo A, igual a materiales/mockup-final/estilos.css (mockup v4) con las decisiones del tramo A
   (desplegable a 16 px, desenfoque solo en escritorio, sin encogimiento, foco visible, hover solo con mouse).
   Gracias: tramo B, igual al mockup v4 con las mismas reglas (y contador que no mueve el botón). */

/* ---------- base ---------- */
*{box-sizing:border-box}
:root{color-scheme:light}  /* el teléfono no debe oscurecer ni invertir la página */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--soft);color:var(--mid);font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p,h1{margin:0}
a{color:var(--azul)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pagina{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}

/* ---------- aura Amanecer: luz que se mueve muy lento detrás de todo ---------- */
.aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura i{position:absolute;border-radius:50%}
.aura .a1{width:560px;height:560px;top:-300px;right:-260px;background:var(--aura-1)}
.aura .a2{width:640px;height:640px;bottom:-330px;left:-300px;background:var(--aura-2)}
.aura .a3{width:520px;height:520px;top:52%;right:-300px;background:var(--aura-3)}
@media (prefers-reduced-motion:no-preference){
  .aura i{will-change:transform}
  .aura .a1{animation:deriva1 26s ease-in-out infinite alternate}
  .aura .a2{animation:deriva2 32s ease-in-out infinite alternate}
  .aura .a3{animation:deriva3 29s ease-in-out infinite alternate}
  .aura{animation:entra 1.2s ease-out both}
}
@keyframes deriva1{to{transform:translate(-90px,70px) scale(1.12)}}
@keyframes deriva2{to{transform:translate(110px,-60px) scale(1.08)}}
@keyframes deriva3{to{transform:translate(-120px,-50px) scale(1.15)}}
@keyframes entra{from{opacity:0}}

/* ---------- el brazo (decorativo; dos copias: celular y escritorio) ---------- */
.brazo{position:absolute;right:0;height:84px;width:auto;overflow:visible;z-index:1}
.brazo g{transform-box:view-box}
.brazo .b-trazo{stroke:var(--azul)}
.brazo .b-pieza,.brazo .b-union{fill:var(--azul)}
.brazo .b-union,.brazo .b-anillo{stroke:var(--soft)}
.b-hombro{transform-origin:252px 80px}
.b-codo{transform-origin:180px 36px}
.b-muneca{transform-origin:122px 60px}
.b-dedo-a{transform-origin:115px 72px;transform:rotate(9deg)}
.b-dedo-b{transform-origin:129px 72px;transform:rotate(-9deg)}
@media (prefers-reduced-motion:no-preference){
  .b-hombro{animation:hombro 12s cubic-bezier(.45,0,.25,1) infinite}
  .b-codo{animation:codo 12s cubic-bezier(.45,0,.25,1) infinite}
  .b-muneca{animation:muneca 12s cubic-bezier(.45,0,.25,1) infinite}
  .b-dedo-a{animation:dedoA 12s cubic-bezier(.45,0,.25,1) infinite}
  .b-dedo-b{animation:dedoB 12s cubic-bezier(.45,0,.25,1) infinite}
}
/* 0–10 % quieto · voltea a un lado · al otro · baja · cierra la pinza · vuelve · ~40 % de descanso */
@keyframes hombro{0%,10%{transform:rotate(0)}20%{transform:rotate(-8deg)}31%{transform:rotate(6deg)}40%,52%{transform:rotate(2deg)}62%,100%{transform:rotate(0)}}
@keyframes codo{0%,33%{transform:rotate(0)}42%,52%{transform:rotate(12deg)}62%,100%{transform:rotate(0)}}
@keyframes muneca{0%,10%{transform:rotate(0)}20%{transform:rotate(10deg)}31%{transform:rotate(-8deg)}40%,100%{transform:rotate(0)}}
@keyframes dedoA{0%,42%{transform:rotate(9deg)}46%,53%{transform:rotate(-7deg)}58%,100%{transform:rotate(9deg)}}
@keyframes dedoB{0%,42%{transform:rotate(-9deg)}46%,53%{transform:rotate(7deg)}58%,100%{transform:rotate(-9deg)}}

/* ---------- logo de letras en chip midnight ---------- */
.cabecera{height:var(--cab-h,48px);display:flex;align-items:center}
.chip{display:inline-flex;align-items:center;background:var(--mid);border-radius:8px;padding:var(--chip-pad,9px 12px)}
.logo-svg{display:block;height:var(--logo-h,12px);width:auto}
.logo-svg .l{fill:var(--soft)}
.logo-svg .l-ia{fill:var(--acid)}
/* Bajo 375 px el brazo se corre a la derecha lo que le falta a la pantalla: la pinza nunca toca el chip
   (medido en todo el ciclo de 12 s; a 360 px rozaba y a 320 se metía ~40 px). Desde 375 px, igual al mockup. */
.brazo-cel{top:calc(var(--aire-top) - 30px);right:min(0px,100vw - 375px)}
.brazo-esc{display:none}

/* ---------- registro · celular ---------- */
.cuerpo{position:relative;z-index:2;max-width:440px;margin:0 auto;padding:var(--aire-top) 16px 24px;display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.registro{margin-top:var(--aire)}
.texto{display:flex;flex-direction:column;container-type:inline-size}
/* Tamaño de la PUV: 8.5 % del ancho de la columna, con tope. El primer valor es el respaldo para iOS < 16 (sin cqi):
   en celular la columna mide el ancho de la pantalla menos 32 px. */
.puv{font-size:min(25.5px,calc((min(100vw,440px) - 32px) * .085));font-size:min(25.5px,8.5cqi);font-weight:900;line-height:1.08;letter-spacing:-.03em}
.puv .bandera{display:block;white-space:nowrap;color:var(--azul)}
.bajada{margin-top:4px;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance} /* si se parte, en dos líneas parejas */
.fecha{margin-top:var(--aire-chico);font-size:14px;line-height:1.3}
.fecha .dia{font-weight:600}
.fecha .dia,.fecha .horas{white-space:nowrap} /* el día y las horas no se parten por dentro ("8 / PM") */
.fecha .sep{display:none}
.online{margin-top:2px;font-size:13px;line-height:1.3;color:var(--texto-2)} /* gris oscuro: sobre el aura el gris no llegaba a 4.5 a 1 (Victor, 7-nov) */
.col-form{position:relative}

/* Tarjeta: blanca al 90 % con borde Ice Blue, sin sombra. Sin desenfoque en celular (se agrega en escritorio). */
.formulario{margin-top:var(--aire);position:relative;border-radius:var(--radio-tarjeta);padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--tarjeta);border:1.5px solid var(--hielo)}
.campo{position:relative;display:flex;align-items:stretch;height:var(--campo-h);border:1px solid var(--borde-campo);border-radius:var(--radio-campo);background:var(--blanco);font-size:14px;color:var(--gris);-webkit-tap-highlight-color:transparent} /* sin transición: borde y halo de foco aparecen juntos y al instante; sin destello al tocar */
.campo span{width:74px;flex:none;padding:0 12px;display:flex;align-items:center;border-right:1px solid var(--divisor-campo)}
.campo input{flex:1 1 0;min-width:0;border:0;background:transparent;padding:0 12px;font:inherit;font-size:16px;color:var(--mid);outline:none}
.campo:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px var(--anillo-campo)}
/* Autocompletar del teléfono: el campo sigue blanco con texto midnight */
.campo input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--blanco) inset;-webkit-text-fill-color:var(--mid);caret-color:var(--mid)}
.campo input:autofill{box-shadow:0 0 0 40px var(--blanco) inset}
/* Desplegable del perfil: 16 px siempre (en iPhone, menos de 16 px hace zoom al tocar); gris mientras no se elige */
.campo-select select{flex:1 1 0;min-width:0;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0 38px 0 12px;font:inherit;font-size:16px;color:var(--mid);outline:none;cursor:pointer;text-overflow:ellipsis;
  background-image:var(--flecha-select);background-repeat:no-repeat;background-position:right 14px center}
.campo-select select:invalid{color:var(--gris)}
.campo-select option{color:var(--mid)}

/* Error de campo: dentro del campo, sin sumar altura. No recibe toques: tocar el mensaje abre el campo. */
.campo .error{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;font-style:normal;font-weight:500;color:var(--texto-error);background:var(--blanco);padding-left:6px;display:none;pointer-events:none;white-space:nowrap}
.campo-select .error{left:12px;right:38px;line-height:24px;padding:0;overflow:hidden;text-overflow:ellipsis} /* sobre el texto inicial, antes de la flecha; 24 px de alto para taparlo completo (con menos asomaban restos) */

/* Errores sin JavaScript (A3): marcadores ocultos al inicio de .cuerpo; con JavaScript, clase .con-error */
.marca{display:none}
#error-nombre:target ~ .registro .campo-nombre,#error-correo:target ~ .registro .campo-correo,#error-perfil:target ~ .registro .campo-select,.campo.con-error{border-color:var(--rojo)}
#error-nombre:target ~ .registro .campo-nombre .error,#error-correo:target ~ .registro .campo-correo .error,#error-perfil:target ~ .registro .campo-select .error,.campo.con-error .error{display:block}
/* Sin JavaScript: al tocar el campo el mensaje se quita para poder corregir */
#error-nombre:target ~ .registro .campo-nombre:focus-within .error,#error-correo:target ~ .registro .campo-correo:focus-within .error,#error-perfil:target ~ .registro .campo-select:focus-within .error{display:none}
/* Campo trampa (A1): fuera de pantalla, nunca suma altura */
.trampa{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* Botón. Error general (A3): reemplaza el texto; con JavaScript, clase en el botón; sin JavaScript, marcador :target */
.boton{height:var(--boton-h);border:0;border-radius:var(--radio-boton);background:var(--azul);color:var(--blanco);font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.005em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
.boton .t-intentos,.boton .t-envio,.boton .t-enviando{display:none}
#error-intentos:target ~ .registro .boton .t-normal,#error-envio:target ~ .registro .boton .t-normal{display:none}
#error-intentos:target ~ .registro .boton .t-intentos,#error-envio:target ~ .registro .boton .t-envio{display:inline}
/* Con JavaScript: data-estado en el botón (enviando, intentos, envio) */
.boton[data-estado] .t-normal{display:none}
.boton[data-estado="intentos"] .t-intentos,.boton[data-estado="envio"] .t-envio,.boton[data-estado="enviando"] .t-enviando{display:inline}
@media (hover:hover) and (pointer:fine){.boton:hover{background:var(--azul-700)}}  /* solo con mouse: en el celular no se queda pegado */
.boton:active{background:var(--azul-700);transition:none}        /* al presionar cambia de color al instante; no se encoge. Al soltar vuelve en 0.15 s */
.boton:focus-visible{outline:3px solid var(--acid);outline-offset:-6px} /* anillo Acid por dentro del azul: ahí sí se ve */

.desc{margin-top:22px;font-size:16px;line-height:1.5;color:var(--texto-2);text-wrap:pretty}
.pie{margin-top:auto;padding-top:28px}
.pie p{border-top:1px solid var(--linea);padding-top:12px;font-size:13px;line-height:1.4;color:var(--texto-2)} /* gris oscuro: contraste ≥ 4.5 sobre el aura */
.pie a{display:inline-block;padding:4px 0;margin:-4px 0;color:var(--texto-2)} /* área de toque ≥ 24 px sin mover nada; se distingue por el subrayado */
.pie a:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:2px}

/* pantallas bajas (375×553 y similares): campos y botón 2 px más compactos */
@media (max-width:899px) and (max-height:600px){:root{--campo-h:42px;--boton-h:48px}}

/* ---------- gracias · celular (centrada a propósito: es una confirmación que se lee como frase) ----------
   Tramo B: igual al mockup v4, con las reglas del tramo A (grises en --texto-2, hover solo con mouse, sin encogerse). */
.g-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--aire) - 18px) 0 var(--aire-chico)}
.g-logo{margin-top:0;--logo-h:15px;--chip-pad:11px 16px}
.g-fecha{margin-top:8px;font-size:14px;line-height:1.35}
.g-fecha .dia{font-weight:700}
.g-fecha .dia,.g-fecha .horas{white-space:nowrap}
.g-fecha .sep{display:none}
.g-felic{margin-top:var(--aire);font-size:17px;font-weight:600;line-height:1.3;color:var(--azul);text-wrap:balance}
.g-h1{margin-top:6px;font-size:28px;font-weight:900;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.g-razon{margin-top:10px;font-size:16px;line-height:1.42;color:var(--texto-2);text-wrap:pretty}
.g-refuerzo{margin-top:var(--aire-chico);font-size:16px;font-weight:700;line-height:1.3}

/* Botón verde: link normal al link propio del grupo. Nunca se esconde ni se desactiva. */
.g-boton{margin-top:12px;align-self:stretch;height:56px;border-radius:var(--radio-boton);background:var(--verde);color:var(--mid);display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
.g-icono{flex:none}
@media (hover:hover) and (pointer:fine){.g-boton:hover{background:var(--verde-hover)}}  /* solo con mouse */
.g-boton:active{background:var(--verde-hover);transition:none}  /* al presionar cambia al instante; no se encoge */
/* Foco: el Acid casi no se ve sobre verde ni sobre el fondo claro, así que va entre dos aros midnight
   (opción A, elegida por Victor en la primera aprobación del tramo B) */
.g-boton:focus-visible{outline:3px solid var(--acid);outline-offset:2px;box-shadow:0 0 0 7px var(--mid)}

/* Contador (A5). Se esconde con visibility para no soltar su espacio: la columna está centrada en la altura y,
   si el contador desapareciera, el botón subiría. Los avisos ocupan ese mismo hueco y no suman altura. */
.contador{position:relative;margin-top:var(--aire-chico);display:flex;align-items:baseline;justify-content:center;gap:8px}
.contador .t{font-size:14px;color:var(--texto-2)} /* gris oscuro: contraste ≥ 4.5 sobre el aura, como el pie */
/* El número ocupa siempre dos cifras: de 10 a 9 el texto no se mueve */
.contador .n{min-width:2ch;text-align:left;font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--azul);font-variant-numeric:tabular-nums}
html:not(.js) .contador .t,html:not(.js) .contador .n,
.contador:not([data-estado="cuenta"]) .t,.contador:not([data-estado="cuenta"]) .n{visibility:hidden} /* sin JavaScript no hay cuenta (A3) */
.contador .avisos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;font-size:15px;font-weight:600;line-height:1.3;color:var(--texto-2)}
.g-pagina .pie p{text-align:center}
/* Pantallas bajas: en gracias el logo queda más cerca del brazo; el brazo sube para que la pinza no lo toque
   en ningún punto del ciclo de 12 s (medido: 9–10 px de aire; el mockup llegaba a 1–2 px). Correrlo a la derecha no alcanzaba.
   Bajo 360 px queda como el mockup: subirlo lo que hace falta dejaba solo un dedo a la vista. */
@media (min-width:360px) and (max-width:899px) and (max-height:600px){.g-pagina .brazo-cel{top:calc(var(--aire-top) - 38px)}}

/* ---------- escritorio (registro y gracias) ---------- */
@media (min-width:900px){
  :root{--cab-h:84px;--logo-h:17px;--chip-pad:12px 16px;--campo-h:52px;--boton-h:56px}
  .aura .a1{width:900px;height:900px;top:-480px;right:-380px}
  .aura .a2{width:1000px;height:1000px;bottom:-560px;left:-420px}
  .aura .a3{width:760px;height:760px;top:30%;right:-200px}
  .cuerpo{max-width:1160px;padding:18px 40px 28px}
  .brazo-cel{display:none}
  .brazo-esc{display:block;top:-217px;right:calc(-1 * max(40px, (100vw - 1160px) / 2 + 40px));height:220px}
  .registro{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;align-content:center;align-items:start;margin-top:0;padding:28px 0}
  /* respaldo sin cqi: la columna de la PUV mide el ancho útil menos el formulario (400) y el hueco (56) */
  .puv{font-size:min(52px,calc((min(100vw,1160px) - 536px) * .085));font-size:min(52px,8.5cqi);line-height:1.05;letter-spacing:-.03em;text-wrap:pretty}
  .bajada{margin-top:12px;font-size:26px}
  .fecha{margin-top:24px;font-size:17px}
  .fecha .sep{display:inline} .fecha br{display:none}
  .online{font-size:15px;margin-top:4px}
  .col-form{margin-top:6px}
  .formulario{margin-top:0;padding:22px;gap:12px;border-radius:22px;
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
  .campo span{width:88px;font-size:15px}
  .boton{font-size:18px}
  .desc{margin-top:20px;font-size:16px;line-height:1.55;padding:0 4px}
  .pie{padding-top:0}

  /* gracias · escritorio */
  .g-pagina .cuerpo{max-width:1000px}
  .g-pagina .cabecera{height:24px}
  .g-col{flex:1;justify-content:center;margin-top:0;padding:24px 0}
  .g-felic{margin-top:48px;font-size:24px}
  .g-logo{margin-top:0;--logo-h:30px;--chip-pad:18px 26px;border-radius:12px}
  .g-fecha{margin-top:12px;font-size:18px} .g-fecha .sep{display:inline} .g-fecha br{display:none}
  .g-h1{margin-top:8px;font-size:60px;letter-spacing:-.03em}
  .g-razon{margin-top:14px;font-size:20px;max-width:34ch}
  .g-refuerzo{margin-top:26px;font-size:19px}
  .g-boton{margin-top:14px;align-self:center;width:440px;height:62px;font-size:20px}
  .contador{margin-top:18px}
  .contador .n{font-size:42px}
  .contador .avisos{font-size:17px}
  .g-pagina .brazo-cel{display:block;top:-6px;height:200px}
}