/* Registro de invitados (/registro/). CONTRATO §10.
   Oscura y en una sola columna de ~440 px: la abre casi siempre un teléfono
   recién salido de escanear un boleto, muchas veces de noche. Sin nada que
   descargar aparte de las fuentes del sitio. Donde hay fotos NADA es simétrico
   (el gusto de Roy): cada polaroid trae su giro y sus cuatro márgenes desde
   registro.js como variables CSS (la CSP prohíbe estilos en línea en el HTML,
   pero no las propiedades puestas por el CSSOM). */
:root{
  --fondo:#14110B;--fondo2:#1E1A12;--capa:rgba(243,237,224,.045);--capa2:rgba(243,237,224,.08);
  --texto:#F3EDE0;--texto2:rgba(243,237,224,.68);--linea:rgba(243,237,224,.14);
  --oro:#C5B358;--oro2:#D8C48A;--oro3:#EFE3B8;--error:#E7A08F;--bien:#A9D1B0;
  --papel:#FBF8F1;
  --canal:clamp(18px,5vw,28px);--radio:14px;--curva:cubic-bezier(.2,.8,.3,1);
  color-scheme:dark;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fondo)}
body{margin:0;min-height:100vh;color:var(--texto);font-family:'Outfit',system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.65;
  background:radial-gradient(120% 60% at 18% 0%,#2A2416 0%,rgba(42,36,22,0) 62%),linear-gradient(180deg,var(--fondo) 0%,var(--fondo2) 100%) fixed;
  overflow-wrap:anywhere;overflow-x:clip} /* las polaroids giradas, al entrar, asoman unos px: nunca scroll lateral */
img{max-width:100%;height:auto;display:block}
a{color:var(--oro2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--oro3)}
:focus-visible{outline:2px solid var(--oro3);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:'Cormorant',Georgia,serif;font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0 0 1em}
b,strong{font-weight:500}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-80px;z-index:60;background:var(--oro3);color:var(--fondo);padding:10px 16px;border-radius:999px;font-size:13px}
.saltar:focus{top:12px}

/* ---- armazón: una columna centrada ---- */
.cab,main,.pie{width:100%;max-width:calc(440px + 2*var(--canal));margin:0 auto;padding-left:var(--canal);padding-right:var(--canal)}
.cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px}
.cab-marca{line-height:0;border-radius:6px}
.cab-marca img{width:52px;height:52px}
.cab-enlace{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--texto2);text-decoration:none;padding:10px 14px 9px;border:1px solid var(--linea);border-radius:999px}
.cab-enlace:hover{color:var(--oro3);border-color:var(--oro2)}
.firma{font-family:'Italianno',cursive;font-size:34px;line-height:1;color:var(--oro);margin:0 0 6px}

/* ---- estado 1: el PIN ---- */
.acceso{padding:clamp(34px,9vh,72px) 0 12px;animation:subir .7s var(--curva) both}
.acceso h1{font-size:clamp(40px,11vw,54px);letter-spacing:-.005em}
.instruccion{font-size:18px;line-height:1.5;color:var(--texto);margin:14px 0 30px;max-width:30ch}
.pin-form{display:grid;gap:10px}
.pin-etiqueta{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--oro2)}
.pin-campo{width:100%;min-width:0;font:500 clamp(24px,7.4vw,30px)/1.2 'Outfit',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto);background:rgba(0,0,0,.28);border:1px solid rgba(243,237,224,.28);border-radius:var(--radio);padding:16px 18px;caret-color:var(--oro3);
  transition:border-color .2s ease,box-shadow .2s ease}
.pin-campo::placeholder{color:rgba(243,237,224,.26);letter-spacing:.16em}
.pin-campo:focus{outline:none;border-color:var(--oro2);box-shadow:0 0 0 3px rgba(216,196,138,.28)}
.pin-campo[aria-invalid="true"]{border-color:var(--error)}
.pin-campo[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(231,160,143,.28)}
.pin-ayuda{font-size:14px;color:var(--texto2);margin:0}
.pin-error{font-size:15px;color:var(--error);margin:0;line-height:1.45}
.pin-error:empty{margin-top:-10px}
.sin-js{margin:22px 0 0;padding:14px 16px;border:1px solid var(--linea);border-radius:var(--radio);font-size:15px;color:var(--texto)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
  font:500 15px/1.2 'Outfit',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;text-align:center;
  color:#1A160E;background:linear-gradient(180deg,var(--oro3),var(--oro2));transition:filter .2s ease,transform .2s ease}
.boton:hover{color:#1A160E;filter:brightness(1.06)}
.boton:active{transform:translateY(1px)}
.boton[disabled]{cursor:progress;filter:saturate(.4) brightness(.8)}
.boton-sec{color:var(--oro3);background:transparent;border:1px solid rgba(216,196,138,.5);font-size:13px;min-height:46px;padding:12px 20px}
.boton-sec:hover{color:var(--fondo);background:var(--oro3);filter:none}
.pin-form .boton{margin-top:10px;width:100%}
.enlace-boton{background:none;border:0;padding:4px 2px;font:inherit;color:var(--oro2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.enlace-boton:hover{color:var(--oro3)}

/* ---- estado 2: la ficha ---- */
.ficha{padding:22px 0 8px;outline:none}
.ficha>*{animation:subir .6s var(--curva) both}
.ficha>:nth-child(2){animation-delay:.06s}.ficha>:nth-child(3){animation-delay:.12s}.ficha>:nth-child(4){animation-delay:.18s}
.bloque{margin:0 0 30px}
.sobre{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--oro2);margin:0 0 10px}
.bloque h2{font-size:30px;margin:0 0 12px}
.tarjeta{background:var(--capa);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 20px 18px}

.saludo{position:relative;margin:0 0 30px;border-radius:18px;overflow:hidden;background:var(--fondo2)}
.saludo-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.saludo-velo{position:relative;padding:34px 22px 24px;background:linear-gradient(180deg,rgba(20,17,11,.2) 0%,rgba(20,17,11,.9) 78%)}
.saludo.con-foto .saludo-velo{padding-top:110px}
.saludo h1{font-size:clamp(34px,9.6vw,44px);outline:none}
.saludo .evento{font-size:15px;color:var(--texto2);margin:10px 0 0}
.marca-ok{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bien);margin:0 0 12px}
.marca-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.marca-no{color:var(--oro2)}

.asistentes{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 0;font-size:17px}
.asistentes b{font-weight:500}
/* «¿No eres tú? Salir» (§15.4): discreto, pero un blanco de dedo de 44 px. */
.salir{margin:14px 0 0;font-size:14px;color:var(--texto2)}
.salir .enlace-boton{min-height:44px}
.cambio{margin-top:16px;padding:18px;border:1px solid var(--linea);border-radius:var(--radio);background:rgba(0,0,0,.25);display:grid;gap:14px}
.cambio fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.cambio legend{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--oro2);margin-bottom:8px;padding:0}
.opcion{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--linea);border-radius:12px;cursor:pointer}
.opcion:has(input:checked){border-color:var(--oro2);background:var(--capa2)}
.opcion input{accent-color:var(--oro2);width:18px;height:18px;margin:0;flex:0 0 auto}
.contador-personas{display:flex;align-items:center;gap:14px}
.contador-personas output{font:400 34px/1 'Cormorant',Georgia,serif;min-width:2ch;text-align:center}
.redondo{width:46px;height:46px;border-radius:50%;border:1px solid rgba(216,196,138,.5);background:transparent;color:var(--oro3);font:300 24px/1 'Outfit',sans-serif;cursor:pointer}
.redondo:disabled{opacity:.35;cursor:default}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}

.aviso{padding:14px 16px;border-left:3px solid var(--oro);background:rgba(197,179,88,.1);border-radius:0 12px 12px 0;font-size:15px}
.error-caja{padding:12px 14px;border-left:3px solid var(--error);background:rgba(231,160,143,.1);border-radius:0 10px 10px 0;color:var(--error);font-size:15px;margin:0}
.bien-texto{color:var(--bien);font-size:15px;margin:0}

.carta{position:relative;margin:0;padding:24px 22px 20px 26px;border-radius:4px 18px 6px 16px;background:linear-gradient(160deg,rgba(239,227,184,.1),rgba(239,227,184,.03));border:1px solid rgba(216,196,138,.22)}
.carta-texto{font-family:'Cormorant',Georgia,serif;font-size:22px;line-height:1.45;white-space:pre-line;margin:0 0 10px}
.carta-firma{font-family:'Italianno',cursive;font-size:38px;line-height:1;color:var(--oro);text-align:right;margin:0 6px 0 0}

/* ---- fotos: polaroids, nada simétrico ---- */
.fotos{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:14px 10px;padding:10px 4px 14px}
.polaroid{--giro:0deg;--mt:6px;--mr:6px;--mb:6px;--ml:6px;--dy:0px;--retardo:0s;
  display:block;margin:var(--dy) 0 0;padding:var(--mt) var(--mr) var(--mb) var(--ml);background:var(--papel);border:0;border-radius:2px;cursor:zoom-in;
  color:#3B382C;text-align:left;font:inherit;width:100%;
  transform:rotate(var(--giro));box-shadow:0 14px 28px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35);
  animation:caer .8s var(--curva) var(--retardo) both;transition:transform .35s var(--curva)}
.polaroid:hover{transform:rotate(calc(var(--giro) * .4)) scale(1.02)}
.polaroid:focus-visible{outline-offset:5px}
.polaroid img{width:100%;aspect-ratio:auto;object-fit:cover;background:#D9D2C1}
.polaroid .pie-foto{display:block;font-family:'Italianno',cursive;font-size:24px;line-height:1.1;color:#3B382C;padding:6px 2px 0}
.polaroid.ancha{grid-column:1/-1;width:86%}
.polaroid.ancha.derecha{justify-self:end}
.polaroid.ultima{grid-column:1/-1;width:62%}
.polaroid.ultima.derecha{justify-self:end}
.polaroid.ultima.centro{justify-self:center}

.visor{border:0;padding:0;background:transparent;max-width:min(94vw,900px);max-height:92vh;overflow:visible;color:var(--texto)}
.visor::backdrop{background:rgba(10,8,5,.88)}
.visor-marco{margin:0;padding:12px 12px 16px 10px;background:var(--papel);border-radius:2px;transform:rotate(-1.2deg);box-shadow:0 30px 60px -20px #000}
.visor img{max-height:76vh;width:auto;max-width:100%;margin:0 auto}
.visor figcaption{font-family:'Italianno',cursive;font-size:28px;line-height:1.1;color:#3B382C;padding:8px 4px 0}
.visor-barra{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.visor-barra .redondo{background:rgba(20,17,11,.7)}
.visor-cerrar{margin-left:auto}

/* ---- datos del evento ---- */
.datos{display:grid;gap:14px;margin:0}
.datos div{display:grid;gap:2px}
.datos dt{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--oro2)}
.datos dd{margin:0;font-size:17px;line-height:1.5}
.datos .primero{font-family:'Cormorant',Georgia,serif;font-size:26px;line-height:1.2}
.nota{font-size:14px;color:var(--texto2);white-space:pre-line;margin:14px 0 0}
.mapa{margin:18px 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--linea);aspect-ratio:4/3;background:rgba(0,0,0,.3);display:grid;place-items:center}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.05)}
.botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.botones .boton{flex:1 1 180px}

/* ---- menú (§16.2): una carta de papel oscuro, centrada, con filetes de oro ---- */
.menu-carta{position:relative;padding:30px 22px 26px;text-align:center;border-radius:6px 18px 8px 16px;
  background:linear-gradient(170deg,rgba(239,227,184,.09),rgba(239,227,184,.02));border:1px solid rgba(216,196,138,.3);
  box-shadow:inset 0 0 0 6px rgba(20,17,11,.55),inset 0 0 0 7px rgba(216,196,138,.16)}
.menu-seccion+.menu-seccion{margin-top:22px}
.menu-seccion h3{font-size:14px;font-family:'Outfit',system-ui,sans-serif;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--oro2);
  display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 12px}
.menu-seccion h3::before,.menu-seccion h3::after{content:"";flex:0 1 38px;height:1px;background:linear-gradient(90deg,transparent,rgba(216,196,138,.6),transparent)}
.menu-seccion ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.menu-seccion li{font-family:'Cormorant',Georgia,serif;font-size:21px;line-height:1.3}
.menu-nota{font-size:14px;color:var(--texto2);font-style:italic;margin:22px 0 0;white-space:pre-line}

/* ---- beneficios ---- */
.detalle{position:relative;padding:22px 20px 20px;border-radius:16px 6px 16px 10px;background:linear-gradient(145deg,#2B2415,#1B170F);border:1px dashed rgba(216,196,138,.55)}
.detalle+.detalle{margin-top:14px}
.detalle h3{font-size:25px;margin:0 0 12px}
.codigo{display:block;font:500 clamp(28px,9vw,36px)/1.1 'Outfit',system-ui,sans-serif;letter-spacing:.12em;color:var(--oro3);margin:0 0 10px;user-select:all}
.detalle.usado .codigo{color:var(--texto2);text-decoration:line-through;text-decoration-thickness:2px}
.detalle p{font-size:14.5px;color:var(--texto2);margin:0 0 6px;white-space:pre-line}

/* ---- canje de un código suelto (churros), §18 ---- */
.canje-hecho{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:clamp(30px,10vh,54px) 20px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--capa)}
.canje-ok{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:clamp(40px,13vw,64px);line-height:1.05;color:var(--bien);margin:0}

/* ---- mensaje y muro ---- */
.caja-texto{width:100%;min-height:140px;resize:vertical;font:300 17px/1.55 'Outfit',system-ui,sans-serif;color:var(--texto);background:rgba(0,0,0,.28);border:1px solid rgba(243,237,224,.28);border-radius:var(--radio);padding:14px 16px}
.caja-texto:focus{outline:none;border-color:var(--oro2);box-shadow:0 0 0 3px rgba(216,196,138,.28)}
.caja-pie{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:12px}
.contador{font-size:13px;color:var(--texto2);font-variant-numeric:tabular-nums}
.contador.cerca{color:var(--oro3)}
.mensaje-estado{margin:12px 0 0;font-size:15px}
.muro{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.muro li{padding:14px 16px;background:var(--capa);border:1px solid var(--linea);border-radius:4px 14px 12px 8px}
.muro li:nth-child(3n+2){margin-left:18px;border-radius:14px 4px 8px 12px}
.muro li:nth-child(3n){margin-right:12px}
.muro p{margin:0;white-space:pre-line}
.muro .quien{font-family:'Italianno',cursive;font-size:26px;line-height:1;color:var(--oro);margin-top:6px;text-align:right}

/* ---- conoce ---- */
.conoce{display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
.conoce a{position:relative;display:block;min-height:120px;border-radius:12px;overflow:hidden;color:var(--texto);text-decoration:none;background:var(--fondo2)}
.conoce a:first-child{grid-row:span 2;min-height:250px}
.conoce img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform .6s var(--curva),opacity .3s ease}
.conoce a:hover img{transform:scale(1.04);opacity:.75}
.conoce span{position:absolute;left:14px;right:10px;bottom:12px;font:400 24px/1.1 'Cormorant',Georgia,serif;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.otro{margin:8px 0 0;font-size:15px;color:var(--texto2)}

/* ---- contenido indexable y pie ---- */
.guia{margin:40px 0 0;padding:30px 0 0;border-top:1px solid var(--linea)}
.guia h2{font-size:30px;margin:0 0 18px}
.guia-p{margin:0 0 20px}
.guia-p h3{font-family:'Outfit',system-ui,sans-serif;font-size:16px;font-weight:500;line-height:1.4;margin:0 0 4px;color:var(--oro3)}
.guia-p p{font-size:15.5px;color:var(--texto2);margin:0}
.guia-wa{margin:26px 0 0}
.pie{padding-top:34px;padding-bottom:max(34px,env(safe-area-inset-bottom));margin-top:30px;border-top:1px solid var(--linea);font-size:14px;color:var(--texto2)}
.firma-pie{font-size:30px}
.pie-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie-nav a{color:var(--texto2);text-decoration:none;padding:6px 0}
.pie-nav a:hover{color:var(--oro3)}

/* ---- el juego de entrada, elegante (§19.7): velas, flores y bienvenida ---- */
.velas{display:flex;justify-content:center;gap:28px;margin:14px 0 6px;padding:10px 0}
.vela,.flor{background:none;border:0;padding:6px;cursor:pointer;border-radius:10px}
.vela:hover,.flor:hover{background:var(--capa)}
.vela-cuerpo{fill:var(--oro3)}
.vela-cera{fill:var(--oro2)}
.llama{fill:var(--oro);transform-origin:20px 15px;opacity:.22}
.vela-prendida .llama{opacity:1;fill:#F6C453;filter:drop-shadow(0 0 6px rgba(246,196,83,.7));animation:parpadeo 1.3s ease-in-out infinite}

/* paso 2: las flores vuelan del botón al florero */
.flor{opacity:1;transform:none;transition:opacity .6s ease,transform .6s var(--curva)}
.flor.flor-volando{opacity:0;transform:translateY(-22px) scale(.6);pointer-events:none}
.florero-svg{width:120px;max-width:70%;height:auto;display:block;margin:8px auto 0}
.florero-cuerpo{fill:var(--fondo2);stroke:var(--oro2);stroke-width:2}
.florero-cuello{fill:var(--oro2)}
.flor-tallo{stroke:var(--oro2);stroke-width:3;fill:none}
.flor-petalo{fill:var(--oro3)}
.flor-centro{fill:var(--oro)}
.flor-hueco{opacity:0;transform:scale(.4) translateY(10px);transform-origin:center;transition:opacity .7s ease .15s,transform .7s var(--curva) .15s}
.flor-hueco.colocada{opacity:1;transform:none}

/* paso 3: la mesa completa, con resplandor dorado */
.mesa{display:flex;flex-direction:column;align-items:center;border-radius:20px;padding:8px 6px 4px;transition:box-shadow 1s ease,background 1s ease}
.mesa.mesa-lista{background:radial-gradient(65% 90% at 50% 25%,rgba(197,179,88,.22),transparent 72%);box-shadow:0 0 46px 8px rgba(197,179,88,.4);animation:resplandor 1.8s ease-in-out infinite alternate}
.bienvenida{font-family:'Italianno',cursive;font-size:clamp(30px,8.5vw,42px);line-height:1.05;color:var(--oro3);text-align:center;margin:14px 0 2px;text-shadow:0 0 20px rgba(239,227,184,.5)}

@keyframes parpadeo{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}
@keyframes resplandor{from{box-shadow:0 0 30px 4px rgba(197,179,88,.3)}to{box-shadow:0 0 58px 12px rgba(197,179,88,.55)}}

@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes caer{
  from{opacity:0;transform:translateY(-26px) rotate(calc(var(--giro) * -2.2)) scale(1.06)}
  to{opacity:1;transform:rotate(var(--giro))}
}

@media (min-width:720px){
  .acceso{padding-top:80px}
  .fotos{gap:20px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .boton,.polaroid{border:1px solid CanvasText}
}