/* ==========================================================================
   BASE DE LAS INVITACIONES — SeqLogic
   Estructura y comportamiento que comparten TODOS los temas.
   Aquí no hay colores propios: todo sale de las variables de abajo, y
   cada tema las reescribe en su `tema.css`.

   EL CONTRATO DE COLOR (regla 60-30-10)
   ---------------------------------------------------------------------------
   --papel / --papel-hondo   60%  fondos. El color que más se ve.
   --marca / --marca-claro   30%  títulos, iconos, detalles.
   --acento / --acento-hondo 10%  SOLO botones y lo que convierte.

   Cada tema DEBE verificar el contraste de --tinta, --tinta-suave, --marca
   y --acento contra --papel. Mínimo 4.5:1 (WCAG AA). Se anota medido en el
   comentario de cada tema, no "a ojo".
   ========================================================================== */

:root{
  --papel:#FFFFFF;
  --papel-hondo:#F4F4F4;
  --tinta:#1A1A1A;
  --tinta-suave:#5A5A5A;
  --marca:#444444;
  --marca-claro:#777777;
  --acento:#C92760;
  --acento-hondo:#9E1E4C;

  --f-display:system-ui, sans-serif;
  --f-texto:system-ui, sans-serif;

  --radio:18px;
  --sombra:0 6px 20px -6px rgba(0,0,0,.18);
  --sombra-alta:0 16px 40px -12px rgba(0,0,0,.26);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
/* Mientras la entrada está cerrada, la página de atrás no se mueve */
body.cerrado{ overflow:hidden; height:100dvh; }

/* Lo que el núcleo esconde, se queda escondido aunque su clase traiga display propio
   (la foto grande sin foto: antes "no se veía" solo porque no tenía marco). */
[hidden]{ display:none !important; }

img,svg,video,iframe{ max-width:100%; }
h1,h2{ margin:0; font-family:var(--f-display); font-weight:600; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA
   El gancho: lo que el invitado toca para abrir. Cada tema le pone su
   forma y su animación; esto es nada más el acomodo.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  position:fixed; inset:0;
  z-index:60;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.2rem;
  padding:1.5rem;
  background:var(--papel);
  transition:opacity .7s ease, visibility .7s, background-color .8s ease;
}
.entrada--fuera{ opacity:0; visibility:hidden; pointer-events:none; }

.entrada__para{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.entrada__nombre{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.4rem,6.5vw,2rem);
  color:var(--marca);
  margin-bottom:.6rem;
  text-align:center;
}

.gancho{
  border:0; padding:0; background:none;
  cursor:pointer;
  display:block;
  -webkit-tap-highlight-color:transparent;
}
.gancho svg, .gancho img{ display:block; width:100%; height:auto; }

.entrada__pista{
  margin-top:1.2rem;
  font-family:var(--f-display); font-weight:500;
  font-size:1.05rem;
  color:var(--acento);
  text-align:center;
}
.entrada__marcador{
  font-size:.85rem; color:var(--tinta-suave);
  letter-spacing:.16em; min-height:1.4em;
}


/* ══════════════════════════════════════════════════════════════════════
   LA INVITACIÓN
   ══════════════════════════════════════════════════════════════════════ */
.carta{ opacity:0; transition:opacity .8s ease; }
.carta.visible{ opacity:1; }

.seccion{
  padding:3.2rem 1.5rem;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.seccion.alterna{ max-width:none; background:var(--papel-hondo); }
.seccion.alterna > *{ max-width:640px; margin-left:auto; margin-right:auto; }

.etiqueta{
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:600;
}
.titulo{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.7rem,7.5vw,2.4rem);
  color:var(--marca);
  margin:.3rem 0 1.4rem;
}


/* ══════════ PORTADA ══════════ */
.portada{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.1rem;
  padding:3.5rem 1.5rem 4.5rem;
  text-align:center;
}
.portada__arriba{ font-family:var(--f-display); font-size:1.05rem; color:var(--tinta-suave); letter-spacing:.08em; }
.portada__nombre{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.4rem,13vw,4.2rem);
  line-height:1.05;
  color:var(--marca);
  margin:.3rem 0 1.1rem;
}
.portada__fecha{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:.7rem 1.2rem;
  border-top:3px solid var(--acento);
  border-bottom:3px solid var(--acento);
}
.portada__fecha .fcol{
  display:flex; flex-direction:column;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.portada__fecha .fcol small{ font-size:.72rem; opacity:.85; }
.portada__fecha .fnum{
  font-family:var(--f-display); font-weight:700;
  font-size:2.7rem; line-height:1; color:var(--acento);
}
.portada__lugar{ margin-top:1rem; font-size:.92rem; color:var(--tinta-suave); }
.portada__flecha{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); }
.portada__flecha span{
  display:block; width:14px; height:14px;
  border-right:3px solid var(--marca); border-bottom:3px solid var(--marca);
  transform:rotate(45deg);
  animation:bajar 1.9s ease-in-out infinite;
}
@keyframes bajar{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5; }
  50%    { transform:rotate(45deg) translate(5px,5px); opacity:1; }
}


/* ══════════ SALUDO ══════════ */
.saludo__nombre{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.5rem,7vw,2.1rem);
  color:var(--tinta);
  margin:.3rem 0 .6rem;
}
.saludo__pases{
  display:inline-block;
  padding:.35rem 1rem;
  border-radius:999px;
  background:var(--marca); color:#fff;
  font-weight:700; font-size:.88rem;
}


/* ══════════ BUSCA TU NOMBRE (link general) ══════════
   Un solo link para todos: quien no trae link personal escribe su apellido.
   Usa las variables del tema, así que se viste solo en cada diseño. */
.saludo__pases[hidden]{ display:none; }
/* Va en su propia tarjeta de papel: en varios temas el saludo vive sobre un bloque de
   color, y ahí las letras del tema no se leerían. Dentro de la tarjeta siempre contrastan. */
.buscar{
  display:grid; gap:.65rem; max-width:420px; margin:1.6rem auto 0; text-align:center;
  padding:1.1rem 1rem 1rem;
  background:var(--papel); color:var(--tinta);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.buscar__campo{ font-size:.95rem; color:var(--tinta-suave); }
.buscar__campo b{ display:block; color:var(--tinta); font-weight:700; font-size:1.05rem; }
.buscar__entrada{
  width:100%;
  padding:.85rem 1rem;
  font-family:var(--f-texto); font-size:1.05rem; text-align:center;
  border:2px solid var(--marca-claro); border-radius:var(--radio);
  background:transparent; color:var(--tinta);
  -webkit-appearance:none; appearance:none;
}
.buscar__entrada::placeholder{ color:var(--tinta-suave); opacity:.85; }
.buscar__entrada:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 24%, transparent);
}
.buscar__lista{ display:grid; gap:.5rem; }
.buscar__lista:empty{ display:none; }
.buscar__opcion{ width:100%; }
.buscar__nota{ font-size:.84rem; color:var(--tinta-suave); min-height:1.3em; }
.campo input[aria-invalid="true"]{ border-color:#C0392B; }


/* ══════════ LA FOTO GRANDE ══════════ */
.momento{ position:relative; padding:1rem 1.5rem 2.4rem; display:flex; justify-content:center; overflow:hidden; }
.momento__foto{
  display:block;
  width:min(86%,380px); height:auto;
  border-radius:var(--radio);
  border:7px solid #fff;
  box-shadow:var(--sombra-alta);
}
.flotantes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }


/* ══════════ CUENTA REGRESIVA ══════════ */
.cuenta__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.cuenta__caja{
  background:var(--papel);
  border:3px solid var(--marca-claro);
  border-radius:var(--radio);
  padding:.8rem .2rem .6rem;
  box-shadow:var(--sombra);
}
.cuenta__caja .n{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.5rem,7vw,2.1rem); line-height:1;
  color:var(--acento);
}
.cuenta__caja .l{
  display:block; margin-top:.25rem;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:600;
}


/* ══════════ DEDICATORIA ══════════ */
.dedicatoria__texto{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.1rem,4.8vw,1.35rem); line-height:1.55;
  color:var(--tinta);
  margin-bottom:1.4rem;
}
.dedicatoria__firma{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:var(--marca); }


/* ══════════ REJILLA DE TARJETAS (qué habrá / detalles) ══════════ */
.tarjetas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.9rem; }
.tarjeta{
  background:var(--papel);
  border-radius:var(--radio);
  padding:1.2rem .7rem 1rem;
  box-shadow:var(--sombra);
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.tarjeta__icono{ color:var(--marca); width:44px; height:44px; display:block; }
.tarjeta__icono svg{ width:100%; height:100%; }
.tarjeta b{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; }
.tarjeta small{ color:var(--tinta-suave); font-size:.8rem; }


/* ══════════ GALERÍA ══════════ */
.galeria__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.foto{ margin:0; }
.foto--ancha{ grid-column:1 / -1; }
.foto img, .foto__hueco{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radio);
  border:5px solid #fff;
  box-shadow:var(--sombra);
}
.foto--ancha img, .foto--ancha .foto__hueco{ aspect-ratio:16/10; }
/* Si quedan fotos nones después de la ancha, la última no se queda sola a media fila */
.galeria__grid .foto:last-child:nth-child(even){ grid-column:1 / -1; }
.galeria__grid .foto:last-child:nth-child(even) img{ aspect-ratio:16/10; }
.foto__hueco{
  display:grid; place-items:center;
  background:var(--papel-hondo);
  color:var(--tinta-suave); font-size:.85rem; font-weight:600;
}
.galeria__nota{ margin-top:.9rem; font-size:.82rem; color:var(--tinta-suave); }


/* ══════════ ITINERARIO ══════════ */
.linea{ text-align:left; position:relative; padding-left:1.2rem; }
.linea::before{
  content:""; position:absolute; left:4px; top:.6rem; bottom:.6rem;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--marca-claro),var(--acento));
}
.linea__paso{ position:relative; display:flex; gap:1rem; align-items:baseline; padding:.7rem 0 .7rem 1.2rem; }
.linea__paso::before{
  content:""; position:absolute; left:-6px; top:1.15rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--papel); border:3px solid var(--marca);
}
.linea__paso.destaca::before{ border-color:var(--acento); background:var(--acento); }
.linea__hora{ font-family:var(--f-display); font-weight:600; color:var(--acento); font-size:.95rem; min-width:3.1rem; }
.linea__que{ display:flex; flex-direction:column; }
.linea__que b{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.linea__que small{ color:var(--tinta-suave); font-size:.84rem; }


/* ══════════ LUGAR Y MAPA ══════════ */
.lugares__dir{ color:var(--tinta-suave); }
.lugares__hora{ margin-top:.3rem; font-weight:700; }
.mapa{
  margin:1.4rem 0;
  border-radius:var(--radio); overflow:hidden;
  border:5px solid #fff; box-shadow:var(--sombra);
  aspect-ratio:4/3;
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }


/* ══════════ TEXTOS SUELTOS Y NOTAS ══════════ */
.parrafo{ font-size:1.02rem; }
.parrafo--chico{ margin-top:.8rem; color:var(--tinta-suave); font-size:.9rem; }

/* ── Tu pase: el código QR de la entrada ──
   La tarjeta SIEMPRE es blanca (sea el tema que sea): un código se lee mejor en negro sobre
   blanco. Texto #1C1A17 sobre blanco: 17 · datos #5A554C sobre blanco: 7.4 (medido). */
.pase{ text-align:center; }
.pase__tarjeta{
  display:inline-grid; justify-items:center; gap:.45rem;
  margin-top:1.5rem; padding:1.1rem 1.3rem 1.25rem;
  background:#FFFFFF; color:#1C1A17;
  border:1px solid rgba(0,0,0,.1); border-radius:18px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.65);
}
.pase__qr{ display:block; width:min(62vw, 230px); height:auto; image-rendering:pixelated; }
.pase__nombre{ margin:0; font-family:var(--f-display); font-size:1.35rem; line-height:1.2; color:#1C1A17; }
.pase__datos{ margin:0; font-size:.9rem; letter-spacing:.04em; color:#5A554C; }
.pase a{ color:var(--tinta); font-weight:700; text-underline-offset:.22em; }
/* el código corto, por si el QR no se puede leer: letras grandes y separadas, fáciles de dictar */
.pase__codigo{
  width:100%; margin:.35rem 0 0; padding-top:.7rem; border-top:1px dashed rgba(0,0,0,.2);
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#5A554C;
}
.pase__codigo b{
  display:block; margin-top:.2rem; padding-left:.3em;
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  font-size:1.7rem; font-weight:700; letter-spacing:.3em; line-height:1.1; color:#1C1A17;
}
.notas__lista{ text-align:left; display:grid; gap:.7rem; }
.notas__lista li{
  background:var(--papel);
  border-left:5px solid var(--acento);
  border-radius:12px;
  padding:.75rem .95rem;
  box-shadow:var(--sombra);
  font-size:.94rem;
}


/* ══════════ FAQ ══════════ */
.faq__lista{ display:grid; gap:.6rem; text-align:left; }
.faq__item{ background:var(--papel); border-radius:14px; box-shadow:var(--sombra); overflow:hidden; }
.faq__item summary{
  cursor:pointer; list-style:none;
  padding:.9rem 2.4rem .9rem 1rem;
  font-family:var(--f-display); font-weight:500;
  position:relative;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-size:1.4rem; line-height:1; color:var(--acento);
}
.faq__item[open] summary::after{ content:"–"; }
.faq__item p{ padding:0 1rem 1rem; color:var(--tinta-suave); font-size:.93rem; }


/* ══════════ CONFIRMAR ══════════ */
.rsvp__intro{ margin-bottom:1.4rem; color:var(--tinta-suave); }
.formulario{
  display:grid; gap:.9rem; text-align:left;
  background:var(--papel);
  padding:1.4rem;
  border-radius:22px;
  box-shadow:var(--sombra-alta);
}
.formulario__quien{ text-align:center; color:var(--tinta-suave); font-size:.9rem; }
.formulario__quien b{ color:var(--tinta); }
.campo{ display:grid; gap:.35rem; }
.campo > span{ font-weight:700; font-size:.9rem; }
.campo > span small{ font-weight:400; color:var(--tinta-suave); }
.campo select,.campo textarea,.campo input{
  font-family:var(--f-texto); font-size:1rem;
  padding:.7rem .8rem;
  border:2px solid var(--papel-hondo);
  border-radius:12px;
  background:#fff; color:var(--tinta);
  width:100%;
}
.campo select:focus,.campo textarea:focus,.campo input:focus{
  outline:none; border-color:var(--marca);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}
.campo textarea{ resize:vertical; }
.campo__ayuda{ font-size:.82rem; color:var(--tinta-suave); }
#campoPases{ display:grid; gap:.9rem; }
#campoPases.oculto{ display:none; }
.formulario__nota{ text-align:center; font-size:.8rem; color:var(--tinta-suave); }

/* El botón: el ÚNICO lugar donde va el acento a tope. Por eso jala el ojo. */
.boton{
  display:inline-block;
  font-family:var(--f-display); font-weight:600; font-size:1rem;
  text-decoration:none; text-align:center;
  padding:.85rem 1.6rem;
  border:0; border-radius:999px;
  background:var(--acento); color:#fff;
  cursor:pointer;
  box-shadow:0 6px 0 var(--acento-hondo), var(--sombra);
  transition:transform .12s ease, box-shadow .12s ease;
}
.boton:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--acento-hondo), var(--sombra); }
.boton--grande{ width:100%; font-size:1.06rem; padding:1rem; }
.boton--linea{
  background:var(--papel); color:var(--marca);
  border:3px solid var(--marca);
  box-shadow:none;
}
.boton--linea:active{ transform:translateY(2px); box-shadow:none; }


/* ══════════ PIE ══════════ */
.pie{
  position:relative; text-align:center;
  padding:3.4rem 1.5rem 2.4rem;
  background:var(--marca); color:#fff;
}
.pie__nombre{ font-family:var(--f-display); font-weight:700; font-size:2rem; }
.pie__fecha{ letter-spacing:.24em; font-size:.82rem; opacity:.9; }
.pie__gracias{ margin-top:.9rem; font-size:.95rem; opacity:.95; }
.pie__folio{ margin-top:.5rem; font-size:.74rem; letter-spacing:.14em; opacity:.75; }


/* ══════════ FIRMA SEQLOGIC ══════════ */
.seqlogic-watermark-container{
  margin-top:2.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:2rem;
  width:100%; max-width:300px;
  margin-left:auto; margin-right:auto;
}
.seqlogic-watermark-title{ font-size:.75rem; color:rgba(255,255,255,.55); letter-spacing:2px; text-transform:uppercase; }
.seqlogic-watermark{
  width:130px; height:auto; opacity:.55;
  filter:grayscale(1) brightness(2.4);
  transition:opacity .4s ease, filter .4s ease, transform .4s ease;
}
.seqlogic-watermark:hover{
  opacity:1; filter:grayscale(0) brightness(1.15) drop-shadow(0 0 10px rgba(0,144,224,.55));
  transform:scale(1.03);
}
.seqlogic-social-links{ display:flex; gap:1rem; margin-top:.5rem; justify-content:center; }
.seqlogic-social-icon{
  color:rgba(255,255,255,.75); transition:all .3s ease;
  padding:.5rem; border-radius:50%; background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.seqlogic-social-icon:hover{ transform:translateY(-3px); background:rgba(255,255,255,.2); }
.seqlogic-social-icon.facebook:hover{ color:#1877F2; background:rgba(24,119,242,.18); }
.seqlogic-social-icon.youtube:hover{ color:#FF0000; background:rgba(255,0,0,.18); }


/* ══════════ CONFETI Y FLOTANTES ══════════ */
.confeti{ position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.papelito{
  position:absolute; top:-6vh;
  width:9px; height:14px; border-radius:2px;
  opacity:0; animation:caer linear forwards;
}
.papelito--redondo{ width:13px; height:13px; border-radius:50%; }
@keyframes caer{
  0%   { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  6%   { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translate3d(var(--desvio,20px),112vh,0) rotate(720deg); opacity:0; }
}
.flotante{
  position:absolute; bottom:-16%;
  width:26px; height:33px;
  border-radius:50% 50% 50% 50% / 46% 46% 54% 54%;
  opacity:.85;
  animation:subir linear infinite;
}
.flotante::after{
  content:""; position:absolute; left:50%; top:100%;
  width:1px; height:22px; background:rgba(0,0,0,.22);
}
@keyframes subir{
  0%  { transform:translate3d(0,0,0) rotate(-4deg); opacity:0; }
  10% { opacity:.85; }
  90% { opacity:.6; }
  100%{ transform:translate3d(18px,-125%,0) rotate(5deg); opacity:0; }
}


/* ══════════ BOTÓN DE MÚSICA ══════════ */
.musica{
  position:fixed; right:1rem; bottom:1rem; z-index:50;
  width:48px; height:48px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--marca); color:#fff;
  cursor:pointer; box-shadow:var(--sombra-alta);
}
/* Sin archivo de música el botón NO existe. `hidden` le gana al grid. */
.musica[hidden]{ display:none; }
.musica svg{ width:22px; height:22px; }
.musica.apagada{ opacity:.55; }
.musica.musica--llama{ animation:latir 1.5s ease-in-out 6; }
@keyframes latir{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }


/* ══════════ APARECER AL HACER SCROLL ══════════ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.dentro{ opacity:1; transform:none; }


/* ══════════ VOLVER AL MUESTRARIO ══════════ */
.volver{
  position:fixed; left:1rem; bottom:1rem; z-index:50;
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem .5rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--tinta); text-decoration:none;
  font-size:.78rem; font-weight:700;
  box-shadow:var(--sombra);
  backdrop-filter:blur(6px);
}
.volver svg{ width:14px; height:14px; }


@media (min-width:700px){
  .seccion{ padding:4rem 2rem; }
  .galeria__grid{ grid-template-columns:repeat(4,1fr); }
  .foto--ancha{ grid-column:span 4; }
}

/* Quien pide menos movimiento, menos movimiento recibe */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .confeti{ display:none; }
  html{ scroll-behavior:auto; }
}


/* ══════════════════════════════════════════════════════════════════════
   EL GANCHO — movimiento por defecto
   Cada tema lo puede reescribir en su tema.css: la piñata se columpia,
   el globo se infla, el escudo palpita. Esto es el mínimo que funciona.
   ══════════════════════════════════════════════════════════════════════ */
.gancho{ transition:filter .3s ease; }
.gancho.golpe{ animation:sacudir .62s cubic-bezier(.36,.07,.19,.97); }
@keyframes sacudir{
  0%  { transform:rotate(0deg)   translateX(0); }
  18% { transform:rotate(-14deg) translateX(-9px) scale(.97); }
  42% { transform:rotate(11deg)  translateX(8px); }
  66% { transform:rotate(-7deg)  translateX(-4px); }
  85% { transform:rotate(3deg); }
  100%{ transform:rotate(0deg)   translateX(0); }
}
.gancho.abre{ animation:reventar .8s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes reventar{
  0%  { transform:scale(1)    rotate(0);        opacity:1; }
  25% { transform:scale(1.16) rotate(-8deg);    opacity:1; }
  100%{ transform:scale(.35)  rotate(20deg) translateY(60px); opacity:0; }
}

/* ══════════ ENTRADA VIVA (física del gancho, ver invitacion.js 2b) ══════════
   Mientras la física manda, se apagan las animaciones de CSS del gancho;
   al abrir se quita la clase y el CSS del tema hace la salida. */
.gancho--vivo{ animation:none !important; touch-action:none; }
.gancho--vivo .globo__copos{ animation:none !important; }
.lienzo-fiesta{ position:fixed; inset:0; z-index:75; pointer-events:none; }

/* ══════════ LA APUESTA (revelación) ══════════ */
.voto{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.voto__boton{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:1.3rem .6rem 1.1rem;
  font-family:var(--f-display); font-size:1.05rem; color:var(--tinta);
  background:var(--papel); border:3px solid var(--papel-hondo); border-radius:var(--radio);
  cursor:pointer; box-shadow:var(--sombra);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.voto__boton:active{ transform:scale(.97); }
.voto__boton[aria-pressed="true"]{ border-color:var(--acento); transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.voto__emoji{ font-size:2.2rem; line-height:1; }
.voto__nota{ margin-top:.9rem; font-size:.85rem; color:var(--tinta-suave); }


/* ══════════ "Agregar a mi calendario" (va debajo del botón del mapa) ══════════ */
.calendario{ display:table; margin:.8rem auto 0; }


/* ══════════ LA LUNA DE ESA NOCHE (nucleo/detalles.js) ══════════ */
.cuenta__luna{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin:1.1rem 0 0; font-size:.86rem; color:inherit; opacity:.9; }
.cuenta__luna-icono{ width:1.5rem; height:1.5rem; flex:none; }
.luna__sombra{ fill:currentColor; opacity:.22; }
.luna__luz{ fill:currentColor; }

/* ══════════ LA BARRA DEL DÍA (nucleo/detalles.js): "¡Hoy es la fiesta!" ══════════ */
.hoy{
  position:sticky; top:0; z-index:25;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem .9rem;
  padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
  background:var(--acento); color:var(--papel);
  font-family:var(--f-texto); font-size:.9rem; text-align:center;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.6);
}
.hoy b{ font-weight:700; }
.hoy a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:.2em; }


/* ══════════ DOS PIEZAS QUE SE MUEVEN CON EL DEDO (las mueve nucleo/detalles.js) ══════════
   Aquí va nada más su armazón; cada tema les pone su marco, su perilla y sus colores. */
/* ANTES Y AHORA: dos fotos encimadas; --corte dice dónde va la raya */
.comparador{ --corte:50%; position:relative; overflow:hidden; touch-action:pan-y; cursor:ew-resize; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.comparador img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.comparador__antes{ clip-path:inset(0 calc(100% - var(--corte)) 0 0); }
.comparador__raya{ position:absolute; top:0; bottom:0; left:var(--corte); width:4px; margin-left:-2px; background:#fff; pointer-events:none; }
.comparador__control{ position:absolute; left:0; bottom:0; width:100%; height:44px; margin:0; opacity:0; pointer-events:none; }
/* FIGURA GIRATORIA: la hoja de cuadros va de fondo; el tema pone  background:url(giro.webp) 0 0 / 900% 400% */
.giratorio{ touch-action:pan-y; cursor:grab; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.giratorio--agarrado{ cursor:grabbing; }


/* ══════════ SOLO EN EL MUESTRARIO: la misma invitación, en papel (antes del pie) ══════════ */
.papel__foto{ display:block; width:min(62%, 240px); margin:0 auto 1.4rem; transform:rotate(-2deg); box-shadow:var(--sombra-alta); }
.papel__foto img{ display:block; width:100%; height:auto; }
.papel .boton{ margin-top:1.1rem; }