/* ============================================================
   ESTRUCTURA de la invitación. Usa SOLO variables de la variante
   (css/variantes/*.css): aquí no hay colores, tipografías ni
   medidas propias de un diseño.

   SOLO CELULAR (regla permanente, docs/DISENO.md): no se escriben
   estilos para tablet ni computadora; ahí solo se ve .solo-celular.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: var(--t-base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-fondo) var(--imagen-textura, none) top center / 100% auto repeat-y;
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-weight: var(--peso-texto);
  line-height: var(--interlineado);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.bloqueado { overflow: hidden; }

h1, h2, h3, p { margin: 0; font-weight: inherit; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

/* Letras espaciadas en mayúsculas: fechas, horas, etiquetas. */
.mayus {
  text-transform: uppercase;
  letter-spacing: var(--espaciado-mayus);
  font-size: var(--t-chico);
  font-weight: var(--peso-fuerte);
}

/* ---------- pantallas completas ---------- */
.pantalla {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-lateral);
  background: var(--c-fondo);
}
.pantalla h1 { font-family: var(--f-titulo); font-size: var(--t-titulo); color: var(--c-primario); line-height: 1.1; }
.pantalla p { font-style: italic; color: var(--c-texto-suave); }
.giro {
  width: 34px; height: 34px;
  border: 1.5px solid var(--c-linea);
  border-top-color: var(--c-acento);
  border-radius: 50%;
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- sobre de entrada ---------- */
.sobre {
  background: var(--c-sobre);
  color: var(--c-sobre-texto);
  overflow: hidden;
  perspective: 1400px;
  padding: 0;
}
.sobre-solapa {
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  width: 100%;
  transform-origin: top center;
  transition: transform var(--anim-sobre) var(--anim-curva), opacity var(--anim-sobre) ease;
}
.sobre-solapa polygon { fill: var(--c-sobre-solapa); }
.sobre-solapa polyline { fill: none; stroke: var(--c-sobre-linea); stroke-width: 1.2; }
.sobre .sobre-para, .sobre .sobre-indicacion { color: var(--c-sobre-texto); }
.sobre-para {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  font-style: normal;
  color: var(--c-sobre-texto);
}
.sobre-para .mayus { display: block; opacity: 0.75; margin-bottom: 0.3rem; }
.sobre-para-nombre { font-size: var(--t-grande); font-style: italic; }
.sobre-sello {
  position: absolute;
  top: 58%;
  left: 50%;
  width: min(46vw, 190px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--anim-sobre) var(--anim-curva), opacity calc(var(--anim-sobre) * 0.6) ease;
}
.sobre-sello img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.35));
  animation: latido 2.6s ease-in-out infinite;
}
/* Sin sello cargado: sello dorado dibujado, con el logo adentro si hay. */
.sello-dibujado {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff3 0%, transparent 45%), var(--c-acento);
  box-shadow: inset 0 0 0 6px rgb(0 0 0 / 0.08), inset 0 0 0 9px rgb(255 255 255 / 0.18), 0 8px 18px rgb(0 0 0 / 0.35);
  animation: latido 2.6s ease-in-out infinite;
}
.sello-dibujado img { width: 62%; height: 62%; object-fit: contain; filter: none; animation: none; }
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.sobre-indicacion {
  position: absolute;
  left: 0; right: 0;
  top: calc(58% + min(23vw, 95px) + var(--e-3));
  color: var(--c-sobre-texto);
  opacity: 0.8;
  animation: respirar 2.6s ease-in-out infinite;
}
@keyframes respirar { 50% { opacity: 0.45; } }

/* Apertura: la solapa se levanta, el sello se desvanece y el sobre se va. */
.sobre.abriendo .sobre-solapa { transform: rotateX(180deg); opacity: 0; }
.sobre.abriendo .sobre-sello { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
.sobre.abriendo .sobre-indicacion, .sobre.abriendo .sobre-para { opacity: 0; transition: opacity 0.4s ease; }
.sobre.abriendo { background: transparent; transition: background var(--anim-sobre) ease calc(var(--anim-sobre) * 0.35); }

/* ---------- aviso tablet / computadora ---------- */
.solo-celular {
  background: var(--color-principal, var(--c-primario));
  color: var(--color-principal-texto, var(--c-primario-texto));
}
.solo-celular .logo { max-width: min(34vw, 320px); max-height: 30vh; margin: 0 auto; }
.solo-celular h1 { color: inherit; font-size: clamp(2.6rem, 5vw, 4rem); }
.solo-celular p { color: inherit; font-size: var(--t-grande); margin-top: var(--e-3); opacity: 0.9; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.8rem;
  margin: 0.35rem;
  border: 1px solid var(--c-primario);
  border-radius: var(--r-boton);
  background: var(--c-primario);
  color: var(--c-primario-texto);
  font-family: var(--f-texto);
  font-size: var(--t-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-mayus);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.boton:active { transform: scale(0.97); }
.boton-contorno { background: transparent; color: var(--c-primario); }

.boton-musica {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 5;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: var(--borde-fino);
  border-radius: 50%;
  background: var(--c-superficie);
  color: var(--c-acento);
  box-shadow: var(--sombra-tarjeta);
  cursor: pointer;
}
.boton-musica svg { width: 18px; height: 18px; fill: currentColor; }
.musica-oculta { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ============================================================
   INVITACIÓN
   ============================================================ */
main { overflow-x: clip; }

.seccion { padding: var(--e-seccion) var(--e-lateral); overflow-wrap: anywhere; }

.titulo, .portada-nombre, .cierre-nombre, .contador-leyenda, .tarjeta .subtitulo, .pantalla h1 { word-spacing: var(--espacio-palabras-titulo); }
.titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-titulo);
  line-height: 1.15;
  color: var(--c-primario);
  margin-bottom: var(--e-3);
}
.titulo::after {
  content: '';
  display: block;
  width: 118px;
  height: 22px;
  margin: var(--e-1) auto 0;
  background: var(--c-acento);
  -webkit-mask: var(--adorno-titulo) center / contain no-repeat;
  mask: var(--adorno-titulo) center / contain no-repeat;
}
.subtitulo { font-size: var(--t-grande); font-weight: var(--peso-fuerte); color: var(--c-primario); margin-bottom: var(--e-1); }
.texto { white-space: pre-line; font-size: var(--t-mediano); }
.suave { color: var(--c-texto-suave); }
.cursiva { font-style: italic; }
.acento { color: var(--c-acento); }
.ornamento { width: auto; max-width: 180px; max-height: 80px; margin: 0 auto var(--e-2); }
.titulo.con-ornamento::after { display: none; }

/* Separador: el filete dibujado de la variante (o la imagen del diseño). */
.separador {
  width: min(78%, 300px);
  height: 44px;
  margin: 0 auto;
  background: var(--c-acento);
  -webkit-mask: var(--adorno-separador) center / contain no-repeat;
  mask: var(--adorno-separador) center / contain no-repeat;
}
.separador-diseno img { margin: 0 auto; width: auto; max-width: min(80%, 320px); max-height: 80px; }

/* ---------- portada ---------- */
.portada {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-lateral) calc(var(--e-4) * 1.6);
  background: var(--imagen-fondo, none) center / cover no-repeat, var(--portada-fondo);
  color: var(--c-portada-texto);
  isolation: isolate;
}
/* Ramas dibujadas en las esquinas (solo si el diseño no trae fondo propio). */
.portada::before, .portada::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 62vw;
  aspect-ratio: 1;
  background: var(--c-acento);
  opacity: var(--adorno-opacidad-portada);
  -webkit-mask: var(--adorno-rama) center / contain no-repeat;
  mask: var(--adorno-rama) center / contain no-repeat;
}
.portada::before { left: -8vw; bottom: -4vw; }
.portada::after { right: -8vw; top: -4vw; transform: rotate(180deg); }
.con-fondo .portada::before, .con-fondo .portada::after { display: none; }
.portada-logo { width: min(58vw, 250px); max-height: 34vh; object-fit: contain; filter: var(--logo-filtro,) var(--sombra-logo, drop-shadow(0 4px 18px rgb(0 0 0 / 0.25))); }
/* Logo de un solo color y enmarcado (monograma en óvalo). Sin valores en la
   variante: el logo tal cual, sin marco. */
.portada-logo, .seccion-cierre .logo {
  aspect-ratio: var(--logo-proporcion, auto);
  padding: var(--logo-marco-espacio, 0);
  border: var(--logo-marco, 0);
  border-radius: var(--logo-marco-radio, 0);
  outline: var(--logo-marco, 0);
  outline-offset: var(--logo-marco-doble, 0);
}
.seccion-cierre .logo { filter: var(--logo-filtro, none); object-fit: contain; }
.portada-nombre {
  font-family: var(--f-nombres, var(--f-titulo));
  font-size: var(--t-portada-nombre);
  line-height: 1.1;
  text-transform: var(--nombres-mayus, none);
  letter-spacing: var(--nombres-espaciado, normal);
  text-shadow: var(--sombra-portada-texto, 0 2px 16px rgb(0 0 0 / 0.25));
}
.portada-nombre img { max-width: 88vw; margin: 0 auto; }
.portada-fecha { font-size: var(--t-mediano); letter-spacing: 0.4em; font-weight: var(--peso-texto); }
.portada-bajar {
  position: absolute;
  bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
  left: 50%;
  width: 18px; height: 18px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0.8;
  animation: bajar 2.2s ease-in-out infinite;
}
@keyframes bajar { 50% { transform: translateX(-50%) translateY(8px) rotate(45deg); opacity: 0.35; } }

/* ---------- bienvenida: fecha y pase ---------- */
.fecha-larga { font-size: var(--t-grande); margin-bottom: 0.2rem; }
.pase {
  position: relative;
  margin: var(--e-4) auto 0;
  max-width: 20rem;
  padding: var(--e-3) var(--e-2);
  border: var(--borde-fino);
  border-radius: var(--r-tarjeta);
  background: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.pase::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: var(--borde-fino);
  border-radius: calc(var(--r-tarjeta) - 4px);
  pointer-events: none;
}
.pase-nombre { font-size: var(--t-grande); font-style: italic; margin: 0.35rem 0; }
.pase-cantidad { color: var(--c-acento); }

/* ---------- personas (padres, padrinos) ---------- */
.personas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.personas .nombre { font-size: var(--t-grande); }
.finado { color: var(--c-acento); font-weight: var(--peso-texto); }

/* ---------- citas (mensaje, agradecimiento) ---------- */
.cita { position: relative; font-size: var(--t-grande); font-style: italic; line-height: 1.45; max-width: 22rem; margin: 0 auto; }
.cita::before, .cita::after {
  display: block;
  font-family: var(--f-comillas, var(--f-texto));
  font-style: normal;
  font-size: 3.6rem;
  line-height: 0.5;
  color: var(--c-acento);
}
.cita::before { content: '“'; margin-bottom: var(--e-2); }
.cita::after { content: '”'; margin-top: var(--e-3); }

/* Foto de sección enmarcada en arco (mensaje, lugares…). */
.foto-arco {
  width: min(72vw, 300px);
  margin: 0 auto var(--e-4);
  padding: 7px;
  border: var(--borde-fino);
  border-radius: 999px 999px var(--r-foto) var(--r-foto);
  background: var(--foto-tinte, transparent) content-box;
}
.foto-arco img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--r-foto) var(--r-foto); }

/* ---------- contador sobre foto ---------- */
.contador {
  position: relative;
  padding: calc(var(--e-seccion) * 1.4) var(--e-lateral);
  color: var(--c-contador-texto, var(--c-portada-texto));
  background: var(--contador-fondo, var(--portada-fondo));
  isolation: isolate;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.contador-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.contador::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--velo-foto); }
.contador .titulo { color: inherit; margin-bottom: var(--e-2); }
.contador .titulo::after { display: none; }
.reloj { display: flex; justify-content: center; gap: var(--e-2); }
.unidad { min-width: 3.6rem; }
.numero { display: block; font-family: var(--f-numeros); font-size: var(--t-numero); font-weight: 300; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.unidad-etiqueta { font-size: var(--t-chico); letter-spacing: 0.12em; }
.contador-leyenda { font-family: var(--f-titulo); font-size: calc(var(--t-titulo) * 0.8); margin-top: var(--e-2); }

/* ---------- lugares: tarjeta en arco ---------- */
.tarjeta-arco {
  max-width: 22rem;
  margin: 0 auto;
  padding: var(--e-4) var(--e-3) var(--e-4);
  border: var(--borde-fino);
  border-radius: var(--arco);
  background: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta-arco .foto-arco { width: 100%; margin-bottom: var(--e-3); }
.lugar-nombre { font-size: var(--t-grande); font-weight: var(--peso-fuerte); color: var(--c-primario); line-height: 1.25; margin: var(--e-1) 0; }
.lugar-direccion { color: var(--c-texto-suave); margin-bottom: var(--e-3); }

/* ---------- itinerario: línea de tiempo ---------- */
.linea-tiempo { list-style: none; margin: 0 auto; padding: 0; max-width: 17rem; text-align: left; }
.linea-tiempo li { position: relative; padding: 0 0 var(--e-3) var(--e-4); }
.linea-tiempo li::before {
  content: '';
  position: absolute;
  left: calc(var(--e-2) - 5px); top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-acento);
  box-shadow: 0 0 0 4px var(--c-fondo), 0 0 0 5px var(--c-linea);
}
.linea-tiempo li::after {
  content: '';
  position: absolute;
  left: calc(var(--e-2) - 0.5px); top: 1.4em; bottom: 0;
  border-left: var(--borde-fino);
}
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo .hora { color: var(--c-acento); display: block; }
.linea-tiempo .actividad { font-size: var(--t-grande); line-height: 1.25; }

/* ---------- datos sueltos ---------- */
.dato { margin-top: var(--e-1); }
.dato-etiqueta { display: block; margin-bottom: 0.15rem; color: var(--c-acento); }
.aviso {
  max-width: 20rem;
  margin: 0 auto;
  padding: var(--e-3) var(--e-2);
  border-top: var(--borde-fino);
  border-bottom: var(--borde-fino);
  font-style: italic;
  font-size: var(--t-mediano);
  color: var(--c-texto-suave);
}
.imagen-vestimenta { margin: var(--e-3) auto 0; border-radius: var(--r-foto); }

/* ---------- obsequios ---------- */
.regalos-intro { max-width: 21rem; margin: 0 auto var(--e-4); font-size: var(--t-mediano); font-style: italic; color: var(--c-texto-suave); }
.tarjeta {
  max-width: 22rem;
  margin: 0 auto var(--e-3);
  padding: var(--e-3) var(--e-2);
  border: var(--borde-fino);
  border-radius: var(--r-tarjeta);
  background: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta .subtitulo { font-family: var(--f-titulo); font-weight: var(--peso-texto); font-size: calc(var(--t-titulo) * 0.72); }
.tarjeta .boton { min-width: 12rem; }
.clabe { font-family: var(--f-numeros); font-size: var(--t-grande); letter-spacing: 0.06em; font-variant-numeric: lining-nums tabular-nums; margin: 0.2rem 0 var(--e-1); }

/* ---------- confirmar asistencia ---------- */
.ir-a-confirmar { margin-top: var(--e-3); }
.confirmar-plazo { max-width: 21rem; margin: 0 auto var(--e-3); font-size: var(--t-mediano); font-style: italic; color: var(--c-texto-suave); }
.confirmar-form, .confirmar-resumen { display: grid; gap: var(--e-2); }
.confirmar-para { display: grid; gap: 0.15rem; margin: 0; text-align: center; font-size: var(--t-grande); }
.confirmar-para .mayus { font-size: var(--t-chico); }
.confirmar-eleccion { display: grid; gap: var(--e-1); }
.confirmar-eleccion .boton { margin: 0; width: 100%; }
.confirmar-eleccion .boton[aria-pressed="true"] { background: var(--c-primario); color: var(--c-primario-texto); }
.confirmar-detalle { display: grid; gap: var(--e-3); padding-top: var(--e-1); }
.confirmar-pases { display: grid; gap: var(--e-1); }
.pases-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-1);
  padding: var(--e-1) 0;
  border-bottom: var(--borde-fino);
  text-align: left;
}
.pases-etiqueta { font-size: var(--t-mediano); }
.pases-de { font-size: var(--t-chico); font-style: italic; }
.pases-control { display: inline-flex; align-items: center; gap: var(--e-1); }
.pases-valor { min-width: 1.6em; font-family: var(--f-numeros); font-size: var(--t-grande); font-variant-numeric: lining-nums tabular-nums; }
.pases-boton {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--c-primario);
  border-radius: 50%;
  background: transparent;
  color: var(--c-primario);
  font-size: var(--t-grande);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pases-boton:disabled { opacity: 0.3; cursor: default; }
.pases-incluir { justify-self: center; margin: var(--e-1) 0 0; }
.pases-nota { font-size: var(--t-mediano); margin-top: var(--e-1); }
.campo { display: grid; gap: 0.3rem; text-align: left; }
.campo-etiqueta { color: var(--c-acento); }
.campo-entrada {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: var(--borde-fino);
  border-radius: calc(var(--r-tarjeta) / 2);
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: max(16px, var(--t-mediano)); /* menos de 16px: el iPhone hace zoom al escribir */
  resize: vertical;
}
.campo-entrada:focus { outline: 2px solid var(--c-acento); outline-offset: 1px; }
.confirmar-acciones { display: grid; gap: var(--e-1); }
.confirmar-acciones .boton { margin: 0; width: 100%; }
.confirmar-acciones .boton:disabled { opacity: 0.6; cursor: default; }
.confirmar-error, .confirmar-muestra { font-size: var(--t-mediano); font-style: italic; }
.confirmar-error { color: var(--c-primario); font-weight: var(--peso-fuerte); }
.confirmar-muestra { padding: var(--e-2); border: var(--borde-fino); border-radius: calc(var(--r-tarjeta) / 2); color: var(--c-texto-suave); }
.confirmar-mensaje { font-size: var(--t-mediano); color: var(--c-texto-suave); }
.confirmar-resumen .aviso { margin-top: var(--e-1); }

/* ---------- fotos a lo ancho (intermedias) ---------- */
.intermedia { overflow: hidden; background: var(--foto-tinte, transparent); }
.intermedia img { width: 100%; }
.intermedia + .intermedia { margin-top: 3px; }

/* ---------- galería ---------- */
/* Mosaico de 3 columnas: cada grupo de 6 fotos lleva una grande (2×2),
   alternando izquierda y derecha. Las clases las pone js/secciones.js. */
.galeria {
  --celda: calc((100vw - 2 * var(--e-lateral) - 2 * 5px) / 3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(var(--celda) * 1.25);
  grid-auto-flow: dense;
  gap: 5px;
}
.galeria-celda {
  display: block;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--r-foto);
  background: var(--foto-tinte, var(--c-fondo-alterno));
  cursor: zoom-in;
}
.galeria-celda.grande-izq { grid-column: 1 / span 2; grid-row: span 2; }
.galeria-celda.grande-der { grid-column: 2 / span 2; grid-row: span 2; }
.galeria-celda.alta { grid-row: span 2; }
.galeria-celda.ancha-2 { grid-column: span 2; }
.galeria-celda.ancha-3 { grid-column: 1 / -1; }
.galeria-celda img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--anim-curva); }
.galeria-celda:active img { transform: scale(1.03); }

/* ---------- cierre ---------- */
.seccion-cierre { padding-bottom: calc(var(--e-seccion) * 2); }
.seccion-cierre .logo { width: min(40vw, 170px); margin: 0 auto var(--e-3); }
.cierre-nombre { font-family: var(--f-nombres, var(--f-titulo)); font-size: var(--t-cierre-nombre, calc(var(--t-titulo) * 1.05)); color: var(--c-primario); line-height: 1.15; text-transform: var(--nombres-mayus, none); letter-spacing: var(--nombres-espaciado, normal); }
.seccion-cierre .portada-fecha { color: var(--c-acento); margin-top: var(--e-2); }

/* Fotos entintadas (cianotipia): la foto pone las luces y sombras y el fondo
   de su marco (--foto-tinte) pone el color, con --foto-mezcla: luminosity.
   Sin valores en la variante, las fotos van a color. La foto en grande
   (visor) siempre va a color. */
.intermedia img, .contador-foto, .foto-arco img, .galeria-celda img { mix-blend-mode: var(--foto-mezcla, normal); }

/* ---------- foto en grande ---------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(18 18 14 / 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aparecer 0.3s ease;
}
@keyframes aparecer { from { opacity: 0; } }
.visor-marco { max-width: 100%; max-height: 100%; display: flex; }
.visor-foto { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; }
.visor-boton {
  position: absolute;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.4);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.visor-cerrar { top: calc(12px + env(safe-area-inset-top)); right: 12px; font-size: 1.1rem; }
.visor-anterior { left: 8px; top: 50%; transform: translateY(-50%); }
.visor-siguiente { right: 8px; top: 50%; transform: translateY(-50%); }
.visor-contador { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; color: #fff; margin: 0; letter-spacing: 0.2em; font-size: var(--t-chico); }

/* ---------- aparición suave al bajar ----------
   Cada elemento de la sección entra uno detrás de otro (--i lo pone js/app.js). */
.aparece > * {
  opacity: 0;
  transform: translateY(var(--anim-desplazamiento));
  transition: opacity var(--anim-duracion) var(--anim-curva), transform var(--anim-duracion) var(--anim-curva);
  transition-delay: calc(var(--i, 0) * var(--anim-escalonado));
}
.aparece.visible > * { opacity: 1; transform: none; }
/* Las fotos a lo ancho entran con un leve acercamiento. */
.intermedia.aparece > * { transform: scale(1.08); }
.intermedia.aparece.visible > * { transform: none; transition-duration: calc(var(--anim-duracion) * 1.6); }
/* Contador y portada: su fondo no se mueve, solo el contenido. */
.contador.aparece > .contador-foto { opacity: 1; transform: none; transition: none; }
.portada.aparece > .portada-bajar { opacity: 0.8; transform: translateX(-50%) rotate(45deg); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .aparece > *, .intermedia.aparece > * { opacity: 1; transform: none; transition: none; }
  .sobre-sello img, .sello-dibujado, .sobre-indicacion, .portada-bajar { animation: none; }
}

/* ============================================================
   EFECTOS — apagados por defecto. La variante los enciende con
   `--efectos: …` y js/efectos.js pone la clase `ef-<nombre>` en <html>.
   Repertorio y reglas: skill .claude/skills/efectos/.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Apertura: mientras la solapa se abre, la portada se arma en escena:
     ramas, logo, nombre, fecha y al final la flecha. */
  .ef-apertura .portada.aparece > * {
    transition-delay: calc(var(--anim-sobre) * 0.45 + var(--i, 0) * 0.35s);
    transition-duration: calc(var(--anim-duracion) * 1.2);
  }
  .ef-apertura .portada.aparece > .portada-logo { transform: scale(0.94); }
  .ef-apertura .portada.aparece.visible > .portada-logo { transform: none; }
  .ef-apertura .portada::before,
  .ef-apertura .portada::after {
    scale: 0.7;
    opacity: 0;
    transition: scale 1.8s var(--anim-curva), opacity 1.8s ease;
    transition-delay: calc(var(--anim-sobre) * 0.35);
  }
  /* ::after ya va rotada 180°: crece desde su centro. */
  .ef-apertura .portada::before { transform-origin: left bottom; }
  .ef-apertura .portada.visible::before,
  .ef-apertura .portada.visible::after { scale: 1; opacity: var(--adorno-opacidad-portada); }
  .ef-apertura .portada-bajar {
    animation: flecha-llega 1s ease calc(var(--anim-sobre) * 0.45 + 1.6s) backwards,
               bajar 2.2s ease-in-out calc(var(--anim-sobre) * 0.45 + 2.6s) infinite;
  }
  @keyframes flecha-llega { from { opacity: 0; } }

  /* Cortina: un telón del color de la página se retira hacia arriba y
     descubre la foto a lo ancho. Espera a que la foto llegue (js/efectos.js). */
  .ef-cortina .intermedia { position: relative; }
  .ef-cortina .intermedia::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-fondo);
    transform-origin: top;
    transition: transform 1.3s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
    pointer-events: none;
  }
  .ef-cortina .intermedia.visible.foto-lista::after { transform: scaleY(0); }
  .ef-cortina .intermedia + .intermedia::after { display: none; }
}

/* Papel rasgado: las fotos a lo ancho y el contador quedan entre dos bordes
   de papel rasgado del color de la página, con su fibra clara. El borde es
   dibujo, no movimiento: se ve igual con "reducir movimiento". */
.ef-papel-rasgado .intermedia { position: relative; }
.ef-papel-rasgado .intermedia::before,
.ef-papel-rasgado .contador::after {
  content: '';
  position: absolute;
  inset: -1px 0;
  z-index: 1;
  background: var(--c-fondo);
  pointer-events: none;
  -webkit-mask:
    var(--rasgado-arriba, url('../adornos/rasgado-arriba.svg')) top / 100% var(--rasgado-alto, 34px) no-repeat,
    var(--rasgado-abajo, url('../adornos/rasgado-abajo.svg')) bottom / 100% var(--rasgado-alto, 34px) no-repeat;
  mask:
    var(--rasgado-arriba, url('../adornos/rasgado-arriba.svg')) top / 100% var(--rasgado-alto, 34px) no-repeat,
    var(--rasgado-abajo, url('../adornos/rasgado-abajo.svg')) bottom / 100% var(--rasgado-alto, 34px) no-repeat;
}

/* Movimiento ligado al dedo: sin soporte (iPhone anterior a iOS 26), quieto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Fondo profundo: la foto del contador baja más lento que el texto. */
    .ef-fondo-profundo .contador { overflow: clip; }
    .ef-fondo-profundo .contador-foto {
      scale: 1.2;
      animation: fondo-profundo linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes fondo-profundo { from { translate: 0 -8%; } to { translate: 0 8%; } }

    /* Papel rasgado (movimiento): la foto se desliza más lento que el papel,
       como vista por una rasgadura. Solo fotos sueltas: si van varias en un
       bloque, al agrandarse se taparían entre sí. */
    .ef-papel-rasgado .intermedia > img:only-child {
      scale: 1.12;
      animation: rasgadura linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes rasgadura { from { translate: 0 -5%; } to { translate: 0 5%; } }

    /* Portada que se despide: logo, nombre y fecha se quedan atrás y se
       desvanecen; las ramas se abren hacia afuera. */
    .ef-parallax-portada .portada { view-timeline: --portada; }
    .ef-parallax-portada .portada > :is(.portada-logo, .portada-nombre, .portada-fecha) {
      animation: portada-despide linear forwards;
      animation-timeline: --portada;
      animation-range: exit 0% exit 80%;
    }
    .ef-parallax-portada .portada::before,
    .ef-parallax-portada .portada::after {
      animation: rama-abajo linear forwards;
      animation-timeline: --portada;
      animation-range: exit 0% exit 100%;
    }
    .ef-parallax-portada .portada::after { animation-name: rama-arriba; }
    @keyframes portada-despide { to { translate: 0 35vh; opacity: 0; } }
    /* `translate` va antes del rotate(180deg) de ::after: cada rama lleva su dirección. */
    @keyframes rama-abajo { to { translate: -12vw 6vh; } }
    @keyframes rama-arriba { to { translate: 12vw -6vh; } }

    /* Adorno que se dibuja con el dedo: el separador se traza del centro
       hacia afuera mientras el invitado baja (adornos simétricos). */
    .ef-adorno-scroll .separador {
      --pluma: radial-gradient(closest-side, #000 60%, transparent);
      -webkit-mask: var(--adorno-separador) center / contain no-repeat, var(--pluma) center / 0% 100% no-repeat;
      -webkit-mask-composite: source-in;
      mask: var(--adorno-separador) center / contain no-repeat, var(--pluma) center / 0% 100% no-repeat;
      mask-composite: intersect;
      animation: trazar linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }
    @keyframes trazar {
      from { -webkit-mask-size: contain, 0% 100%; mask-size: contain, 0% 100%; }
      to   { -webkit-mask-size: contain, 260% 100%; mask-size: contain, 260% 100%; }
    }
  }
}

/* ---------- invitación caducada ----------
   El aviso y el catálogo de diseños. No es la invitación: se ve en
   cualquier pantalla, en una columna angosta centrada. */
.caducada {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--e-4) var(--e-lateral) calc(var(--e-4) + env(safe-area-inset-bottom));
}
.caducada-aviso { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.caducada-aviso h1 { font-family: var(--f-titulo); font-size: var(--t-titulo); color: var(--c-primario); line-height: 1.1; }
.caducada-detalle { font-style: italic; color: var(--c-texto-suave); }
.caducada-grupo { margin-bottom: var(--e-4); }
.caducada-tipo {
  font-family: var(--f-titulo);
  font-size: calc(var(--t-titulo) * 0.72);
  color: var(--c-primario);
  margin-bottom: var(--e-2);
}
.caducada-disenos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.caducada-diseno {
  display: grid;
  gap: var(--e-1);
  align-content: start;
  padding: var(--e-1) var(--e-1) var(--e-2);
  background: var(--c-superficie);
  border: var(--borde-fino);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--c-texto);
  text-decoration: none;
}
.caducada-diseno:active { transform: scale(0.98); }
/* Un solo diseño en el tipo: al centro, del mismo ancho que en pareja. */
.caducada-diseno:only-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--e-2) / 2); }
.caducada-miniatura {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(var(--r-tarjeta) - var(--e-1));
  background: var(--c-fondo-alterno);
}
.caducada-diseno-nombre { font-family: var(--f-titulo); font-size: var(--t-grande); color: var(--c-primario); line-height: 1.15; }
.caducada-pie { margin-top: var(--e-2); }
.caducada-pie .boton { text-decoration: none; white-space: nowrap; padding-inline: 1.4rem; }