/* El Ramo · sistema visual de public-solteros/index.html (lino crudo + eucalipto,
   Cormorant Garamond + Inter), ya aprobado por la pareja. Acá se portan los mismos
   tokens y se agrega solo lo que el mockup no tenía por ser estático: pantallas de
   verdad, formularios de verdad, y estados de estar vacío/roto/sin conexión.

   NOTA DE CONTRASTE (ver el informe de la tarea 8 para los números exactos): el
   verde eucalipto y el dorado del mockup, tal cual, no llegan a 4.5:1 en texto
   chico sobre fondo claro (euca-d ronda 4.4-4.5:1 según el fondo real; el dorado
   decorativo da 2.7:1). Se agregan variantes MÁS OSCURAS solo para texto
   (--euca-label, --euca-btn, --gold-text), medidas con la fórmula de contraste
   WCAG contra los fondos reales que las usan. Los tokens originales (--euca-d,
   --euca, --gold) se conservan para bordes, íconos y fondos no-texto, donde el
   piso es 3:1 y sí lo cumplen. */
:root{
  color-scheme: light;

  --ink:#494640;
  --ink-soft:#5f5b53;
  --euca:#7d9080;
  --euca-d:#63755f;
  --euca-l:#a6b6a3;
  --euca-label:#4c5c49;   /* texto sobre fondo claro: 5.9-7.2:1 según el fondo */
  --euca-btn:#4f5f4c;     /* fondo de botón sólido con texto blanco: 6.8:1 */
  --gold:#b0904f;
  --gold-text:#6b5522;    /* texto dorado sobre fondo claro: 6.5-7.1:1 */
  --cream:#efe9dc;
  --cream-light:#f8f4ea;
  --cream-warm:#e6ddc9;
  --night:#0a1c11;
  --night-gold:#e6cf9a;
  --line:rgba(73,70,64,.16);
  --line-soft:rgba(73,70,64,.08);
  --error:#9c3b32;        /* 6.2-6.8:1 sobre crema/blanco */

  --serif:"Cormorant Garamond","Times New Roman",serif;
  --serif-i:"Cormorant Infant","Cormorant Garamond",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);

  --r-lg:16px;
  --r-md:12px;
  --r-sm:8px;

  /* zona tocable mínima: bien por encima del piso AAA de 44px (ver skill de
     accesibilidad) porque acá se usa de noche, en una fiesta, con una mano */
  --toque:56px;
}

/* El atributo `hidden` tiene que ganar SIEMPRE, incluso sobre reglas de este mismo
   archivo que fijan `display:flex` (.barra, .capaCoincidencia, .opciones): esas
   reglas tienen la misma especificidad que el `[hidden]` que agrega el navegador,
   y por orden de aparición en la hoja ganarían ellas, dejando visible algo que el
   HTML/JS marcó como oculto. Confirmado a mano: sin esta línea, la capa de
   coincidencia y la barra de navegación se veían aunque tuvieran `hidden`. */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overscroll-behavior-y:contain en las dos (html Y body: Safari de iPhone mira
   cualquiera de las dos según el caso) corta el "tirón de goma" que dispara pull-to-
   refresh al arrastrar hacia abajo desde arriba de la página. Mitigación barata para
   el mismo problema de fondo que el código recuperable: nada de esto reemplaza la
   recuperación real (ver functions/api/perfil/codigo.js), pero reduce las chances de
   que una recarga accidental pase mientras el código está en pantalla. */
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    linear-gradient(rgba(248,244,234,.86), rgba(248,244,234,.86)),
    var(--cream-light) url("../assets/linen-crudo.webp") center top/860px repeat;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  overscroll-behavior-y:contain;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.01em}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* foco visible SIEMPRE al navegar con teclado, nunca al hacer click con mouse/dedo */
:focus{outline:none}
:focus-visible{outline:3px solid var(--euca-d);outline-offset:3px;border-radius:4px}

/* ── enlace para saltar directo al contenido, para quien navega con teclado ── */
.saltar{
  position:absolute;top:-100%;left:12px;z-index:100;
  padding:12px 18px;background:var(--euca-btn);color:#fff;border-radius:0 0 8px 8px;
  font-size:14px;font-weight:600;
}
.saltar:focus{top:0}

#app{max-width:480px;margin:0 auto;padding:28px 20px 96px;min-height:100svh}

.pant{display:none}
.pant.activa{display:block;animation:aparecer .3s var(--ease) both}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.kicker{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--euca-label);margin-bottom:8px;
}
h1{font-size:clamp(30px,8vw,38px);margin-bottom:14px}
h2{font-size:clamp(24px,6vw,30px);margin-bottom:12px}
.texto{font-size:15px;color:var(--ink-soft);margin-bottom:8px;max-width:42ch}
.fino{font-size:12.5px;color:var(--ink-soft)}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:var(--toque);padding:14px 20px;margin-top:14px;
  border-radius:999px;border:0;background:var(--euca-btn);color:#fff;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:transform .12s ease-out;
}
.btn:active{transform:scale(.97)}
.btn--fantasma{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line)}
.btn--gold{background:var(--gold-text);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Enlace discreto (recuperar código, ver #btnPerdiCodigo): texto subrayado, sin
   fondo ni borde, para que no compita con el botón principal "Listo". Sigue con
   --toque de alto para mantener la zona tocable, aunque visualmente sea chico. */
.enlaceDiscreto{
  display:block;width:100%;min-height:var(--toque);margin-top:6px;padding:10px;
  background:transparent;border:0;text-align:center;
  font-size:12.5px;color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;
}

/* Reserva el hueco del botón de deshacer aunque no haya nada que deshacer: usar
   `hidden` ahí lo sacaba del layout (ver [hidden]{display:none!important} arriba) y
   Sí/No saltaban de lugar apenas aparecía. visibility:hidden mantiene el espacio
   fijo; el `disabled` que pone JS junto con esta clase (ver public/js/app.js) lo saca
   del foco de teclado y de lectores de pantalla sin volver a moverlo del documento. */
.invisible{visibility:hidden}

/* ── formularios ─────────────────────────────────────────────────────────── */
.campo{margin-bottom:18px}
.campo label,.campo legend{
  display:block;font-size:12px;font-weight:600;letter-spacing:.05em;
  color:var(--euca-label);margin-bottom:7px;
}
.campo input[type="text"],.campo input[type="number"],.campo select{
  width:100%;min-height:var(--toque);padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:16px;color:var(--ink);
}
.campo input:focus-visible,.campo select:focus-visible{
  outline:3px solid var(--euca-d);outline-offset:2px;border-color:var(--euca-d);
}
.campo input[type="file"]{
  width:100%;padding:12px;border:1.5px dashed var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:13.5px;min-height:var(--toque);
}
.campoResto{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);margin-top:5px}
.fotoPrevia{
  width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 24%;
  margin-top:12px;border:2px solid var(--line);
}

fieldset{border:0;padding:0}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{
  display:flex;align-items:center;gap:8px;
  min-height:var(--toque);padding:10px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;font-size:14px;color:var(--ink);
  cursor:pointer;
}
.opcion input{accent-color:var(--euca-btn);width:20px;height:20px;flex:0 0 20px}
.opcion:has(input:checked){border-color:var(--euca-btn);background:rgba(79,95,76,.08);font-weight:600}
.opcion:has(input:focus-visible){outline:3px solid var(--euca-d);outline-offset:2px}

.error{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(156,59,50,.08);border:1px solid rgba(156,59,50,.3);
  color:var(--error);font-size:13.5px;font-weight:500;
}
.aviso-info{
  margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(76,92,73,.07);border:1px solid rgba(76,92,73,.18);
  color:var(--euca-label);font-size:13px;
}

/* ── pantalla del código (pieza 1: se muestra una única vez) ───────────────── */
.codigoGrande{
  font-family:var(--serif);font-size:clamp(64px,22vw,96px);letter-spacing:.06em;
  color:var(--euca-btn);text-align:center;margin:28px 0;line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ── muro ────────────────────────────────────────────────────────────────── */
.muro{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
/* Entrada escalonada: cada tarjeta trae su propio --demora (index * 40ms, puesto
   por JS al crearla). La grilla entera apareciendo de golpe se siente muerta;
   una atrás de la otra se siente vivo. Con menos movimiento, la regla global de
   abajo colapsa animation-duration a .01ms: sigue "animando" pero en la práctica
   aparece de una, que es exactamente lo pedido (sin escalonado). */
.muroCard{
  border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--line-soft);
  opacity:0;transform:translateY(14px);
  animation:entrarMuroCard .38s var(--ease) both;
  animation-delay:var(--demora,0s);
}
@keyframes entrarMuroCard{to{opacity:1;transform:none}}
.muroCard img{aspect-ratio:1/1.08;object-fit:cover;object-position:50% 26%;width:100%;background:var(--cream)}
.muroCard__meta{padding:8px 10px 10px}
.muroCard__name{font-family:var(--serif);font-size:16px;line-height:1.2}
.muroCard__rel{font-size:10px;color:var(--euca-label);letter-spacing:.03em;margin-top:2px}

.candado{
  margin-top:20px;padding:20px 16px;border-radius:var(--r-md);text-align:center;
  background:rgba(176,144,79,.1);border:1px solid rgba(176,144,79,.3);
}
.candado__icono{width:34px;height:34px;margin:0 auto 10px;color:var(--gold-text);transition:transform .5s var(--ease),opacity .5s var(--ease)}
.candado.abriendo .candado__icono{transform:rotate(35deg) scale(1.15);opacity:0}
.candado span{display:block;font-size:12.5px;color:var(--ink-soft)}
.candado strong{
  display:block;font-family:var(--serif);font-size:19px;color:var(--gold-text);font-weight:500;margin-top:3px;
  animation:latido 60s ease-in-out infinite;
}
/* Un latido por minuto, apenas perceptible: recuerda que hay algo esperando sin
   convertirse en un elemento que parpadea todo el tiempo. El 96-100% (en vez de
   volver a 0%/100% simétrico) hace que el pulso quede al PRINCIPIO del ciclo, no
   repartido: si no, con una escala de 60s el ojo nunca llega a verlo completo. */
@keyframes latido{
  0%,4%,100%{transform:scale(1)}
  2%{transform:scale(1.07)}
}
.candado .btn{margin-top:14px}

.vacio{text-align:center;color:var(--ink-soft);font-size:14px;margin-top:24px;padding:0 12px}

/* ── mazo ────────────────────────────────────────────────────────────────── */
.mazo{position:relative;height:min(58vh,440px);margin:8px 0 20px}
.carta{
  position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  touch-action:none;will-change:transform;box-shadow:0 14px 30px -16px rgba(73,70,64,.5);
}
.carta--1{z-index:3}
.carta--2{z-index:2;transform:scale(.95) translateY(10px);opacity:.7}
.carta--3{z-index:1;transform:scale(.9) translateY(20px);opacity:.45}
.carta img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;pointer-events:none;background:var(--cream)}
.carta__velo{
  position:absolute;left:0;right:0;bottom:0;padding:38px 16px 16px;
  background:linear-gradient(transparent,rgba(15,13,10,.9));color:#f6f2e8;
}
.carta__nombre{font-family:var(--serif);font-size:25px;line-height:1.15}
.carta__vinculo{font-size:11px;color:rgba(246,242,232,.82);margin-top:2px;letter-spacing:.03em}
.carta__pregunta{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,242,232,.72);margin-top:10px}
.carta__respuesta{font-family:var(--serif-i);font-style:italic;font-size:14px;color:#f6f2e8;margin-top:3px}

.carta--1::before,.carta--1::after{
  content:"";position:absolute;top:16px;padding:5px 12px;border-radius:6px;
  font:700 12px/1 Inter,sans-serif;letter-spacing:.09em;border:2px solid;pointer-events:none;
}
.carta--1::before{content:"ME INTERESA";left:14px;transform:rotate(-12deg);
  color:#dff0dc;border-color:#dff0dc;background:rgba(20,30,20,.35);opacity:var(--si,0)}
.carta--1::after{content:"PASO";right:14px;transform:rotate(12deg);
  color:#f0e9dc;border-color:#f0e9dc;background:rgba(30,26,20,.35);opacity:var(--no,0)}

.mazoBotones{display:flex;justify-content:center;align-items:center;gap:26px}
.redondo{
  width:64px;height:64px;border-radius:50%;border:0;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -10px rgba(73,70,64,.6);transition:transform .12s ease-out;
  color:var(--ink-soft);
}
.redondo svg{width:26px;height:26px}
.redondo:active{transform:scale(.97)}
.redondo--si{background:var(--euca-btn);color:#fff}
.redondo--deshacer{width:48px;height:48px;background:var(--cream-warm);color:var(--ink-soft)}
.redondo--deshacer svg{width:20px;height:20px}

.mazoAviso{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:16px;padding:0 12px}

/* ── capa de coincidencia: el pico emocional, pantalla completa ────────────── */
.capaCoincidencia{
  position:fixed;inset:0;z-index:200;background:var(--night);color:var(--night-gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;text-align:center;overflow-y:auto;
}

/* El estallido de pétalos: div por pieza, generadas por public/js/petalos.js.
   pointer-events:none para que nunca tapen "Seguir mirando" ni "Copiar mensaje";
   z-index alto porque el pedido es que caigan POR ENCIMA de la escena, no atrás.
   Solo transform y opacity animan, así que corre en el compositor y no le pesa
   al gesto del mazo aunque esta capa esté montada sobre él. */
.capaPetalos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.petalo{
  position:absolute;top:-18px;left:var(--x);opacity:0;
  animation:caerPetalo var(--dur) ease-in var(--delay) forwards;
  will-change:transform,opacity;
}
@keyframes caerPetalo{
  0%{transform:translate(0,0) rotate(0deg);opacity:0}
  10%{opacity:.95}
  85%{opacity:.85}
  100%{transform:translate(var(--dx),115vh) rotate(var(--rot));opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .capaPetalos{display:none}
}
.coincidenciaFotos{display:flex;justify-content:center;margin-bottom:26px;height:132px}
.coincidenciaFotos img{
  width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:3px solid var(--night-gold);background:rgba(230,207,154,.12);
}
.coincidenciaFotos img:first-child{margin-right:-28px;transform:translateX(-18px)}
.coincidenciaFotos img:last-child{margin-left:-28px;transform:translateX(18px)}
.capaCoincidencia.animar .coincidenciaFotos img:first-child{animation:entraIzq .5s var(--ease) both}
.capaCoincidencia.animar .coincidenciaFotos img:last-child{animation:entraDer .5s var(--ease) both}
@keyframes entraIzq{from{transform:translateX(-70vw);opacity:0}to{transform:translateX(-18px);opacity:1}}
@keyframes entraDer{from{transform:translateX(70vw);opacity:0}to{transform:translateX(18px);opacity:1}}

.capaCoincidencia h2{font-size:clamp(34px,10vw,44px);color:var(--night-gold);margin-bottom:14px}
.coincidenciaNombre{font-family:var(--serif);font-size:22px;margin-bottom:6px}
.coincidenciaPorque{font-size:14px;color:rgba(230,207,154,.82);max-width:36ch;margin:0 auto 18px}
.capaCoincidencia .btn--gold{max-width:280px}
.empujon{
  margin-top:18px;padding:14px;border-radius:var(--r-md);max-width:340px;
  background:rgba(230,207,154,.08);border:1px solid rgba(230,207,154,.22);
}
.empujon p{font-size:13.5px;color:rgba(230,207,154,.9);margin-bottom:10px}
/* Contraste de borde contra --night, calculado con Python (misma fórmula WCAG que el
   resto del archivo, ver la nota de arriba): con alpha .35 el borde daba 2.51:1, por
   debajo del piso de 3:1 para un control no-texto. Con .45 da 3.31:1. */
.empujon .btn--fantasma{border-color:rgba(230,207,154,.45);color:var(--night-gold);min-height:48px}
.capaCoincidencia .btn:not(.btn--gold):not(.btn--fantasma){
  margin-top:22px;background:transparent;border:1.5px solid rgba(230,207,154,.4);
  color:var(--night-gold);max-width:280px;
}

@media (prefers-reduced-motion:reduce){
  .capaCoincidencia .coincidenciaFotos img{animation:none !important}
}

/* ── coincidencias (lista) ──────────────────────────────────────────────── */
.coin{
  display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line-soft);margin-bottom:10px;
}
.coin img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 58px;background:var(--cream)}
.coin h3{font-family:var(--serif);font-size:19px;line-height:1.2}
.coin p{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.coin a{color:var(--euca-label);font-weight:600;font-size:13px}

/* ── pantalla de cierre (piece 7, adaptada: ver informe) ────────────────── */
.cerradoNoche{background:var(--night);color:var(--night-gold);margin:-28px -20px 0;padding:40px 24px;min-height:100svh}
.cerradoNoche h1{color:var(--night-gold)}
/* El total que devuelve /api/cierre (pieza 7): la cifra de la que la pareja va a
   hablar durante meses, así que se destaca como número, no como texto corrido. */
.cerradoTotal{
  font-family:var(--serif);font-size:clamp(38px,11vw,52px);color:var(--night-gold);
  margin:16px 0 10px;line-height:1.1;
}
.cerradoNoche .texto{color:rgba(230,207,154,.85)}
.cerradoNoche .coin{background:rgba(230,207,154,.06);border-color:rgba(230,207,154,.2)}
.cerradoNoche .coin h3,.cerradoNoche .coin a{color:var(--night-gold)}
.cerradoNoche .coin p{color:rgba(230,207,154,.7)}

/* ── barra de navegación inferior ───────────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-around;background:var(--cream-light);
  border-top:1px solid var(--line);
  padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.barra button{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:52px;padding:6px 4px;background:transparent;border:0;border-radius:10px;
  font-size:10.5px;color:var(--ink-soft);cursor:pointer;
}
.barra button[aria-current="page"]{color:var(--euca-btn);font-weight:600}
.barra button svg{width:22px;height:22px}
.barra button:disabled{opacity:.4;cursor:not-allowed}
.coinBadge{
  position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--error);color:#fff;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

/* ── aviso de conexión ───────────────────────────────────────────────────── */
.banner{
  position:fixed;top:0;left:0;right:0;z-index:300;padding:10px 16px;
  padding-top:max(10px,env(safe-area-inset-top));
  background:var(--error);color:#fff;text-align:center;font-size:13px;font-weight:600;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

@media (min-width:480px){
  #app{padding-top:44px}
}