/*
 * Tema Vino & Marfil (2026-11-06, prompt de Mario con referencias en
 * referencias-boda/): romántico y elegante con un toque gótico botánico.
 *
 * - Intro oscura y de cine: el sobre vino con su lacre dorado flota sobre un
 *   bosque con niebla (la foto de la intro o la de la portada).
 * - Cuerpo claro: marfil con tarjetas de papel, filigranas vino tinto
 *   (adornos/esquina-filigrana-*.svg), títulos en versales con un corazón
 *   debajo (adornos/divisor-corazon.svg) y botones en píldora vino.
 * - Ritmo claro/oscuro: el itinerario, las polaroids y el cierre van sobre la
 *   noche vino, y la portada se corta con papel rasgado (adornos/rasgado.svg).
 *
 * Va después de invitacion.css y solo pinta lo que cambia. Los colores salen
 * de la paleta (Vino & Marfil, Vino gótico bosque o Vino & Rosa polvo en
 * assets/estilos.js; con un color libre también funciona).
 */

html[data-tema='vino'] {
  --v: var(--cartulina-media, #6b0f1e);
  --v-hondo: var(--cartulina-honda, #4a0a12);
  --v-acento: var(--cartulina-luz, #8e2436);
  --v-noche: var(--sombra, #2a0509);
  --v-linea: var(--verde-luz, #b86a76);
  --v-rosa: var(--salvia-clara, #e5d6d6);
  --v-papel: var(--algodon, #fffdf9);
  --v-oro: var(--oro, #c9a15b);
  --v-oro-claro: var(--oro-claro, #ecd49c);
  --v-dorado: radial-gradient(circle at 34% 28%, #fff4cf, var(--v-oro-claro) 22%, var(--v-oro) 55%, #8b6522 100%);
  --entre-pliegos: clamp(76px, 12vh, 128px);
}

html[data-tema='vino'] body {
  font-size: 1.08rem;
}

/* Una banda oscura de lado a lado sin cambiar el ancho del bloque. */
html[data-tema='vino'] .pliego-programa,
html[data-tema='vino'] .pliego-preguntas,
html[data-tema='vino'] .pliego-polaroids,
html[data-tema='vino'] .remite {
  background: var(--v-noche);
  box-shadow: 0 0 0 100vmax var(--v-noche);
  clip-path: inset(0 -100vmax);
}

/* ---------- La intro: el bosque con niebla y el sobre vino ---------- */

html[data-tema='vino'] .niebla {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--v-noche) 55%, transparent), color-mix(in srgb, #0d130e 35%, transparent) 45%, color-mix(in srgb, var(--v-noche) 80%, transparent)),
    var(--intro-foto, none) center / cover no-repeat,
    linear-gradient(#1e2a1f, #0d130e);
}

/* Tres velos de niebla que cruzan muy despacio (solo transform y opacity). */
html[data-tema='vino'] .niebla span {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 46%;
  background:
    radial-gradient(40% 50% at 30% 50%, rgba(235, 232, 228, 0.34), transparent 70%),
    radial-gradient(35% 45% at 72% 55%, rgba(235, 232, 228, 0.26), transparent 70%);
  animation: niebla 46s linear infinite;
}

html[data-tema='vino'] .niebla span:nth-child(1) { top: 8%; }
html[data-tema='vino'] .niebla span:nth-child(2) { top: 38%; animation-duration: 62s; animation-direction: reverse; opacity: 0.8; }
html[data-tema='vino'] .niebla span:nth-child(3) { top: 62%; animation-duration: 54s; opacity: 0.9; }

@keyframes niebla {
  from { transform: translateX(-12%); }
  to { transform: translateX(12%); }
}

html[data-tema='vino'] .escena-atras {
  z-index: 0;
}

/* La intro en columna: los textos arriba, el sobre en el espacio que queda
   libre y los nombres justo debajo, con «Toca el sobre» al pie; nada se
   monta, sea cual sea la pantalla. assets/invitacion.js (medirIntro) mide
   lo que ocupan los textos y lo deja en --i-arriba, --i-nombres y --i-abajo;
   sin eso, valen estos de reserva. */
html[data-tema='vino'] .escena {
  --i-top: max(4svh, calc(env(safe-area-inset-top) + 16px));
  --i-sep: clamp(10px, 2.4svh, 26px);
  --i-arriba: calc(var(--i-top) + 130px);
  --i-nombres: 60px;
  --i-abajo: 70px;
  /* El alto libre para el sobre, y su ancho (apaisado, 0.68 de alto) */
  --i-libre: calc(100svh - var(--i-arriba) - var(--i-nombres) - var(--i-abajo) - 3 * var(--i-sep));
  --sobre-w: min(88vw, 560px, max(170px, var(--i-libre) / 0.68));
  --sobre-h: calc(var(--sobre-w) * 0.68);
  /* Centro del sobre: en medio del espacio libre */
  --sobre-cy: calc(var(--i-arriba) + var(--i-sep) + (100svh - var(--i-arriba) - var(--i-nombres) - var(--i-abajo) - 3 * var(--i-sep)) / 2);
}

/* El sobre deja de llenar la pantalla: flota, apaisado, en el espacio libre.
   Sus piezas se miden contra el propio sobre (cqw/cqh). */
html[data-tema='vino'] .escena-capa .sobre {
  container-type: size;
  inset: auto 0;
  top: max(calc(var(--i-arriba) + var(--i-sep)), calc(var(--sobre-cy) - var(--sobre-h) / 2));
  margin: 0 auto;
  width: var(--sobre-w);
  height: var(--sobre-h);
  --margen: 6cqw;
  --arriba: 7cqh;
  --sello-postal: 17cqw;
  --sello-cierre: 18cqw;
  border-radius: 3px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  animation: flotar 6s ease-in-out infinite;
}

html[data-tema='vino'].abriendo .escena-capa .sobre {
  animation: none;
}

@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

html[data-tema='vino'] .sobre-numero {
  font-size: 2.6cqw;
}

html[data-tema='vino'] .sobre-direccion {
  top: 40%;
}

html[data-tema='vino'] .sobre-para {
  font-size: 3cqw;
}

html[data-tema='vino'] .sobre-nombre {
  font-size: calc(9.5cqw * var(--escala-mano));
}

html[data-tema='vino'] .sobre-cupos {
  font-size: 2.8cqw;
}

html[data-tema='vino'] .sobre-carta {
  top: 9cqh;
}

/* El forro de adentro, 1px más chico que el sobre: así su borde claro no se
   asoma como un hilo alrededor del bolsillo (las dos capas miden lo mismo y
   el suavizado de los bordes lo dejaba ver). */
html[data-tema='vino'] .sobre-interior {
  inset: 1px;
}

/* Al abrir, el título y los nombres se van antes de que la carta suba: van
   en la capa de adelante y, si no, quedan pintados encima de la carta. */
html[data-tema='vino'] .intro-textos,
html[data-tema='vino'] .intro-nombres {
  transition: opacity 0.45s ease, translate 0.45s ease;
}

html[data-tema='vino'].abriendo .intro-textos {
  opacity: 0;
  translate: 0 -10px;
}

html[data-tema='vino'].abriendo .intro-nombres {
  opacity: 0;
  translate: 0 10px;
}

html[data-tema='vino'] .solapa-remite {
  margin-top: 9cqh;
  font-size: calc(6cqw * var(--escala-mano));
}

/* «Abrir aquí», con una ramita, abajo a la izquierda del sobre. */
html[data-tema='vino'] .sobre-abrir {
  display: block;
  position: absolute;
  left: var(--margen);
  bottom: 8cqh;
  padding-left: 3.4em;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: 3.4cqw;
  color: var(--v-oro-claro);
  background: linear-gradient(var(--v-oro-claro), var(--v-oro-claro)) left center / 2.6em 1px no-repeat;
}

/* El lacre dorado con las iniciales. */
html[data-tema='vino'] .sobre-sello-cierre {
  background: var(--v-dorado);
  color: #6e4b14;
  box-shadow:
    inset 0 0 0 calc(var(--sello-cierre) * 0.07) rgba(255, 240, 200, 0.35),
    inset 0 -3px 6px rgba(110, 75, 20, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.45);
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
}

html[data-tema='vino'] .intro-textos {
  display: grid;
  justify-items: center;
  gap: 4px;
  position: absolute;
  left: 16px;
  right: 16px;
  top: var(--i-top);
  text-align: center;
  color: #f6efe6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Las letras de la intro se achican también con el alto de la pantalla */
html[data-tema='vino'] .intro-arriba {
  margin: 0;
  max-width: 24ch;
  font-family: var(--f-texto);
  font-size: clamp(0.88rem, min(0.9rem + 0.6vw, 2.9svh), 1.3rem);
  line-height: 1.3;
}

html[data-tema='vino'] .intro-frase {
  margin: 0;
  font-family: var(--f-mano);
  font-size: calc(clamp(1.8rem, min(1.6rem + 3vw, 7.6svh), 3.6rem) * var(--escala-mano));
  line-height: 1.1;
}

html[data-tema='vino'] .intro-nombres {
  display: block;
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(max(calc(var(--i-arriba) + var(--i-sep)), calc(var(--sobre-cy) - var(--sobre-h) / 2)) + var(--sobre-h) + var(--i-sep));
  margin: 0;
  line-height: 1.15;
  text-align: center;
  font-family: var(--f-mano);
  font-size: calc(clamp(1.7rem, min(1.5rem + 2.6vw, 6.6svh), 3.2rem) * var(--escala-mano));
  color: #f6efe6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

html[data-tema='vino'] .intro-nombres i {
  font-style: normal;
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .escena-pista {
  color: color-mix(in srgb, #f6efe6 85%, transparent);
}

/* ---------- Títulos, tarjetas y botones ---------- */

html[data-tema='vino'] .pliego-titulo {
  font-family: var(--f-grabada);
  font-size: clamp(1.45rem, 1rem + 2.2vw, 2.3rem);
  letter-spacing: 0.2em;
  line-height: 1.15;
  color: var(--tinta-sobre);
  text-align: center;
}

html[data-tema='vino'] .pliego-titulo::after {
  width: 150px;
  height: 15px;
  margin: 16px auto 0;
  border: 0;
  background: var(--salvia);
  -webkit-mask: url('adornos/divisor-corazon.svg') center / contain no-repeat;
  mask: url('adornos/divisor-corazon.svg') center / contain no-repeat;
}

html[data-tema='vino'] .tarjeta {
  background: var(--papel-claro), var(--v-papel);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 22px 40px -28px color-mix(in srgb, var(--v-noche) 60%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--v-noche) 22%, transparent);
}

html[data-tema='vino'] .tarjeta::before {
  border-color: color-mix(in srgb, var(--v) 30%, transparent);
}

/* La filigrana: cuatro esquinas de volutas y la cresta arriba, en vino. */
html[data-tema='vino'] .filigrana {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background: var(--v);
  -webkit-mask:
    url('adornos/esquina-filigrana-tl.svg') left top / 62px no-repeat,
    url('adornos/esquina-filigrana-tr.svg') right top / 62px no-repeat,
    url('adornos/esquina-filigrana-bl.svg') left bottom / 62px no-repeat,
    url('adornos/esquina-filigrana-br.svg') right bottom / 62px no-repeat,
    url('adornos/cresta-filigrana.svg') center top / 120px no-repeat;
  mask:
    url('adornos/esquina-filigrana-tl.svg') left top / 62px no-repeat,
    url('adornos/esquina-filigrana-tr.svg') right top / 62px no-repeat,
    url('adornos/esquina-filigrana-bl.svg') left bottom / 62px no-repeat,
    url('adornos/esquina-filigrana-br.svg') right bottom / 62px no-repeat,
    url('adornos/cresta-filigrana.svg') center top / 120px no-repeat;
}

html[data-tema='vino'] .tarjeta-filigrana {
  padding: 64px 34px 52px;
}

html[data-tema='vino'] .boton-pildora {
  min-height: 46px;
  padding: 0 24px;
  border-color: var(--v);
  font-family: var(--f-grabada);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-papel);
  background: var(--v);
}

html[data-tema='vino'] .boton-pildora:hover {
  color: var(--v-papel);
  background: var(--v-acento);
}

html[data-tema='vino'] .boton-pildora .icono {
  width: 18px;
  height: 18px;
}

html[data-tema='vino'] .tarjeta-marca {
  display: none;
}

/* ---------- La portada después de la tarjeta: foto a todo lo alto ---------- */

html[data-tema='vino'] .album {
  width: 100%;
  margin-top: 0;
}

html[data-tema='vino'] .album-encabezado {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  top: clamp(36px, 8svh, 80px);
  color: #fffdf9;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

html[data-tema='vino'] .album-frase {
  font-family: var(--f-grabada);
  font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.05rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: inherit;
}

html[data-tema='vino'] .album-titulo {
  font-family: var(--f-mano);
  font-weight: 400;
  font-size: calc(clamp(2.8rem, 1.8rem + 5vw, 5.4rem) * var(--escala-mano));
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

html[data-tema='vino'] .album-fecha {
  font-family: var(--f-grabada);
  letter-spacing: 0.24em;
  color: inherit;
}

html[data-tema='vino'] .album-flor {
  display: none;
}

html[data-tema='vino'] .album-pagina {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

html[data-tema='vino'] .album-principal {
  grid-column: 1 / -1;
  height: min(100svh, 980px);
  aspect-ratio: auto;
  -webkit-mask: url('adornos/rasgado.svg') bottom / 100% 26px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 25px) no-repeat;
  mask: url('adornos/rasgado.svg') bottom / 100% 26px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 25px) no-repeat;
}

html[data-tema='vino'] .album-principal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 4, 7, 0.55), transparent 38%, transparent 70%, rgba(20, 4, 7, 0.35));
}

html[data-tema='vino'] .album-secundaria {
  width: min(100% - 8px, 360px);
  justify-self: end;
  aspect-ratio: 4 / 5;
  margin-top: 28px;
}

html[data-tema='vino'] .album-secundaria + .album-secundaria {
  justify-self: start;
  margin-top: 72px;
}

html[data-tema='vino'] .album-ventana .foto,
html[data-tema='vino'] .album-ventana .foto-marco,
html[data-tema='vino'] .album-ventana .foto-boton,
html[data-tema='vino'] .album-ventana img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html[data-tema='vino'] .album-ventana img {
  object-fit: cover;
}

html[data-tema='vino'] .album-ventana .esquina,
html[data-tema='vino'] .album-ventana::before,
html[data-tema='vino'] .album-secundaria::after {
  display: none;
}

/* ---------- Invitación formal ---------- */

html[data-tema='vino'] .tarjeta-formal {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

html[data-tema='vino'] .formal-encabezado,
html[data-tema='vino'] .formal-rotulo {
  margin: 0;
  font-family: var(--f-grabada);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--v);
}

html[data-tema='vino'] .formal-nombres {
  margin: 0;
  font-family: var(--f-mano);
  font-weight: 400;
  font-size: calc(clamp(2.6rem, 2rem + 3vw, 3.6rem) * var(--escala-mano));
  line-height: 1.05;
  color: var(--v-hondo);
}

html[data-tema='vino'] .formal-nombres i {
  display: block;
  font-style: normal;
  font-size: 0.6em;
  color: var(--v-linea);
}

html[data-tema='vino'] .formal-texto {
  margin: 0;
  max-width: 28ch;
  font-size: 1.18rem;
  line-height: 1.45;
}

html[data-tema='vino'] .formal-fecha {
  margin: 4px 0 0;
  font-family: var(--f-grabada);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--v);
}

html[data-tema='vino'] .formal-padres p {
  margin: 4px 0 0;
}

html[data-tema='vino'] .formal-verso {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--tinta-suave);
}

html[data-tema='vino'] .formal-verso p {
  margin: 0;
}

html[data-tema='vino'] .formal-verso footer {
  margin-top: 6px;
  font-style: normal;
  font-size: 0.9rem;
}

/* La tarjeta sale del sobre al llegar (se reparte desde abajo). */
html[data-tema='vino'].scroll-vivo .tarjeta-formal {
  animation: salir-del-sobre linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}

@keyframes salir-del-sobre {
  from { transform: translateY(70px) rotate(1.2deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- El gran día: tira de la fecha, corazón y cuenta regresiva ---------- */

html[data-tema='vino'] .tarjeta-calendario {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 36px 24px 32px;
}

html[data-tema='vino'] .tira-fecha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  font-family: var(--f-grabada);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v);
}

html[data-tema='vino'] .tira-fecha span:first-child,
html[data-tema='vino'] .tira-fecha span:last-child {
  padding: 8px 0;
  border-top: 1px solid var(--v-linea);
  border-bottom: 1px solid var(--v-linea);
  text-align: center;
}

html[data-tema='vino'] .tira-dia {
  font-family: var(--f-cifras);
  font-size: 2.8rem;
  letter-spacing: 0;
  line-height: 1;
}

html[data-tema='vino'] .calendario-anillo {
  display: none;
}

html[data-tema='vino'] .calendario-corazon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

html[data-tema='vino'] .calendario-corazon path {
  fill: var(--v);
}

html[data-tema='vino'] .calendario-el-dia {
  position: relative;
  z-index: 0;
  color: var(--v-papel);
  font-weight: 600;
}

html[data-tema='vino'] .cuenta-vino {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

html[data-tema='vino'] .cuenta-faltan {
  margin: 0;
  font-family: var(--f-grabada);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--v);
}

html[data-tema='vino'] .cuenta-regresiva {
  color: var(--v-hondo);
}

html[data-tema='vino'] .cuenta-cifra {
  font-family: var(--f-cifras);
  font-weight: 500;
}

html[data-tema='vino'] .calendario-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  margin: 0;
}

html[data-tema='vino'] .calendario-acciones[hidden] {
  display: none;
}

/* ---------- Polaroids sobre la noche vino ---------- */

html[data-tema='vino'] .pliego-polaroids {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 40px;
  width: min(100% - 32px, 760px);
  margin: var(--entre-pliegos) auto 0;
  padding: 72px 0;
}

html[data-tema='vino'] .pliego-polaroids[hidden] {
  display: none;
}

html[data-tema='vino'] .polaroids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 18px;
}

html[data-tema='vino'] .polaroid {
  width: min(40vw, 200px);
  padding: 10px 10px 38px;
  background: #fbf8f2;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.8);
  rotate: var(--giro, 0deg);
  transition: rotate 0.6s cubic-bezier(.2, .8, .2, 1);
}

html[data-tema='vino'] .polaroid:nth-child(even) {
  margin-top: 34px;
}

html[data-tema='vino'] .polaroid .foto,
html[data-tema='vino'] .polaroid .foto-marco,
html[data-tema='vino'] .polaroid .foto-boton {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background: none;
}

html[data-tema='vino'] .polaroid .foto-marco {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

html[data-tema='vino'] .polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.9s ease;
}

html[data-tema='vino'] .polaroid .esquina,
html[data-tema='vino'] .polaroid figcaption {
  display: none;
}

html[data-tema='vino'] .polaroid.revelada {
  rotate: 0deg;
}

html[data-tema='vino'] .polaroid.revelada img {
  filter: none;
}

/* Caen sobre la mesa al llegar. */
html[data-tema='vino'].scroll-vivo .polaroids:not(.caidas) .polaroid {
  opacity: 0;
}

html[data-tema='vino'] .polaroids.caidas .polaroid {
  animation: caer 1.1s var(--d, 0ms) cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes caer {
  from { transform: translateY(-46vh) rotate(18deg); opacity: 0; }
  60% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

html[data-tema='vino'] .polaroids-frase {
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.4;
  color: #f3e6d8;
}

/* ---------- Itinerario sobre la noche vino, con iconos ---------- */

html[data-tema='vino'] .pliego-programa {
  padding: 72px 0;
  color: #f3e6d8;
}

html[data-tema='vino'] .pliego-programa .pliego-titulo {
  color: #f3e6d8;
}

html[data-tema='vino'] .pliego-programa .pliego-titulo::after {
  background: var(--v-linea);
}

html[data-tema='vino'] .tarjeta-programa {
  color: #f3e6d8;
  background: none;
  box-shadow: none;
}

html[data-tema='vino'] .tarjeta-programa::before {
  display: none;
}

html[data-tema='vino'] .dia-momento {
  grid-template-columns: 21px 48px 1fr;
  grid-template-areas:
    'punto icono hora'
    '. icono texto';
}

html[data-tema='vino'] .dia-icono {
  display: grid;
  place-items: center;
  grid-area: icono;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--v-oro) 70%, transparent);
  border-radius: 50%;
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .dia-icono .icono {
  width: 22px;
  height: 22px;
}

html[data-tema='vino'] .dia-hora {
  font-family: var(--f-grabada);
  letter-spacing: 0.12em;
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .dia-titulo {
  color: #fbf6ee;
}

html[data-tema='vino'] .dia-detalle {
  color: color-mix(in srgb, #f3e6d8 80%, transparent);
}

html[data-tema='vino'] .dia-punto {
  background: var(--v-noche);
  border-color: var(--v-linea);
}

html[data-tema='vino'] .alcanzado .dia-punto {
  background: var(--v-oro);
  border-color: var(--v-oro);
}

html[data-tema='vino'] .dia::before {
  background: color-mix(in srgb, var(--v-linea) 45%, transparent);
}

html[data-tema='vino'] .dia-hilo {
  background: var(--v-oro);
}

/* ---------- Preguntas frecuentes: la misma banda del itinerario ---------- */

html[data-tema='vino'] .pliego.pliego-preguntas {
  --linea: color-mix(in srgb, var(--v-linea) 55%, transparent);
  /* Sobre la banda oscura, también el aviso de «aún no hay preguntas» */
  --tinta: #fbf6ee;
  --tinta-suave: color-mix(in srgb, #f3e6d8 80%, transparent);
  width: min(100% - 32px, 1080px);
  margin-inline: auto;
  padding: 80px 0 88px;
  color: #f3e6d8;
  border-block: 0;
}

html[data-tema='vino'] .pliego-preguntas .pliego-titulo {
  color: #f3e6d8;
}

html[data-tema='vino'] .pliego-preguntas .pliego-titulo::after {
  background: var(--v-linea);
}

html[data-tema='vino'] .pregunta summary {
  font-family: var(--f-texto);
  font-size: clamp(1.12rem, 1.02rem + 0.4vw, 1.3rem);
  color: #fbf6ee;
}

html[data-tema='vino'] .pregunta-signo::before,
html[data-tema='vino'] .pregunta-signo::after {
  background: var(--v-oro-claro);
}

html[data-tema='vino'] .pregunta-respuesta p {
  color: color-mix(in srgb, #f3e6d8 82%, transparent);
}

html[data-tema='vino'] .pregunta summary:focus-visible {
  outline-color: var(--v-oro-claro);
}

/* ---------- Foto con frase (parallax) ---------- */

html[data-tema='vino'] .parallax {
  position: relative;
  display: grid;
  place-items: center;
  height: min(80svh, 760px);
  margin-top: var(--entre-pliegos);
  overflow: hidden;
}

/* Las bandas de lado a lado (itinerario, polaroids, preguntas) y la foto con
   frase se tocan: sin una franja del fondo del bosque entre ellas. */
html[data-tema='vino'] :is(.pliego-programa, .pliego-polaroids, .pliego-preguntas, .parallax) + :is(.pliego-programa, .pliego-polaroids, .pliego-preguntas, .parallax) {
  margin-top: 0;
}

html[data-tema='vino'] .parallax[hidden] {
  display: none;
}

html[data-tema='vino'] .parallax-foto {
  position: absolute;
  inset: -70px 0;
  background-position: center;
  background-size: cover;
  will-change: transform;
}

html[data-tema='vino'] .parallax-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(color-mix(in srgb, var(--v-noche) 45%, transparent), color-mix(in srgb, var(--v-noche) 55%, transparent));
}

html[data-tema='vino'] .parallax-frase {
  position: relative;
  max-width: 20ch;
  margin: 0 16px;
  text-align: center;
  font-family: var(--f-mano);
  font-size: calc(clamp(2rem, 1.4rem + 3vw, 3.6rem) * var(--escala-mano));
  line-height: 1.15;
  color: #fffdf9;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

html[data-tema='vino'] .parallax-frase p {
  margin: 0;
}

html[data-tema='vino'] .parallax-frase footer {
  margin-top: 12px;
  font-family: var(--f-grabada);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Vestimenta, regalos y dudas: tarjetas de papel ---------- */

html[data-tema='vino'] .forro {
  background: none;
  box-shadow: none;
  padding-top: 0;
}

html[data-tema='vino'] .vegetal {
  background: var(--papel-claro), var(--v-papel);
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--v-noche) 60%, transparent);
}

html[data-tema='vino'] .vegetal::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--v) 30%, transparent);
  pointer-events: none;
}

html[data-tema='vino'] .titulo-grabado {
  font-family: var(--f-grabada);
  letter-spacing: 0.2em;
  color: var(--v-hondo);
}

html[data-tema='vino'] .silueta {
  color: var(--v);
}

/* ---------- Comparte el momento ---------- */

html[data-tema='vino'] .tarjeta-social {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 40px 28px;
  text-align: center;
}

html[data-tema='vino'] .social-icono {
  width: 34px;
  height: 34px;
  color: var(--v);
}

html[data-tema='vino'] .social-hashtag {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
}

html[data-tema='vino'] .hashtag {
  font-family: var(--f-grabada);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--v-hondo);
}

html[data-tema='vino'] .social-playlist {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

html[data-tema='vino'] .social-playlist p {
  margin: 0;
  font-style: italic;
}

/* ---------- Cierre: camafeo, frase, «¡Gracias!» y el pie ---------- */

html[data-tema='vino'] .remite {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-top: 72px;
  color: #f3e6d8;
}

html[data-tema='vino'] .remite-solapa {
  display: none;
}

html[data-tema='vino'] .remite-camafeo:not([hidden]) {
  display: block;
}

/* El marco barroco rosa dorado (adornos/marco-barroco.webp, la imagen que
   escogió Mario el 2026-11-08): la foto va detrás, en la ventana del marco,
   y el marco encima. Sobre el recorte de 443 × 601 px la ventana empieza en
   x 69, y 117 y mide 304 × 399; la foto entra 3 px por debajo de la moldura
   para que en el borde no se vea el fondo. */
html[data-tema='vino'] .camafeo-marco {
  position: relative;
  width: min(80vw, 360px);
  aspect-ratio: 443 / 601;
}

html[data-tema='vino'] .camafeo-marco::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('adornos/marco-barroco.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

html[data-tema='vino'] .camafeo-foto {
  position: absolute;
  left: 14.9%;    /* (69 − 3) / 443 */
  top: 18.97%;    /* (117 − 3) / 601 */
  width: 69.98%;  /* (304 + 6) / 443 */
  height: 67.39%; /* (399 + 6) / 601 */
  overflow: hidden;
  background: var(--v-hondo);
}

/* El encuadre de cada foto sale de config.js (assets/invitacion.js lo pone
   en línea); sin encuadre, el centro. */
html[data-tema='vino'] .camafeo-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

html[data-tema='vino'] .remite-frase:not([hidden]) {
  display: block;
  max-width: 30ch;
  margin-top: 12px;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
  line-height: 1.45;
  text-align: center;
}

html[data-tema='vino'] .remite-frase p {
  margin: 0;
}

html[data-tema='vino'] .remite-gracias:not([hidden]) {
  display: block;
  margin: 0;
  font-family: var(--f-mano);
  font-size: calc(clamp(2.6rem, 2rem + 3vw, 3.8rem) * var(--escala-mano));
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .remite-sello {
  display: none;
}

html[data-tema='vino'] .remite-con,
html[data-tema='vino'] .remite-firma {
  color: #f3e6d8;
}

html[data-tema='vino'] .remite-volver {
  color: color-mix(in srgb, #f3e6d8 80%, transparent);
}

html[data-tema='vino'] .remite-pie {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--v-linea) 40%, transparent);
  font-family: var(--f-grabada);
  letter-spacing: 0.24em;
  font-size: 0.8rem;
  color: color-mix(in srgb, #f3e6d8 75%, transparent);
}

html[data-tema='vino'] .monograma {
  font-family: var(--f-mano);
  font-size: 2.2rem;
  letter-spacing: 0;
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .monograma i {
  font-style: normal;
  margin: 0 0.1em;
  font-size: 0.7em;
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html[data-tema='vino'] .niebla span,
  html[data-tema='vino'] .escena-capa .sobre,
  html[data-tema='vino'] .polaroids.caidas .polaroid,
  html[data-tema='vino'] .tarjeta-formal {
    animation: none !important;
  }
}

/* Lo escrito en el frente del sobre, en oro claro sobre el vino. */
html[data-tema='vino'] .sobre-frente {
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .sobre-nombre,
html[data-tema='vino'] .sobre-para,
html[data-tema='vino'] .sobre-cupos,
html[data-tema='vino'] .sobre-numero {
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .sobre-rubrica path {
  stroke: var(--v-oro-claro);
}

html[data-tema='vino'] .remite-firma i {
  color: var(--v-oro-claro);
}

html[data-tema='vino'] .calendario-acciones .boton-pildora {
  letter-spacing: 0.08em;
  padding: 0 18px;
}

html[data-tema='vino'] .cuenta-nombre {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

/* En pantalla ancha la portada sigue a todo lo ancho, con las dos fotos
   chicas debajo, una a cada lado (le gana a la grilla de tres del álbum). */
@media (min-width: 900px) {
  html[data-tema='vino'] .album-pagina {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    align-items: start;
  }

  html[data-tema='vino'] .album-principal {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  html[data-tema='vino'] .album-secundaria:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  html[data-tema='vino'] .album-secundaria:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  html[data-tema='vino'] .album[data-cuantas='2'] .album-secundaria {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

html[data-tema='vino'] .calendario-el-dia .cifra {
  position: relative;
  color: var(--v-papel);
}

html[data-tema='vino'] .pliego-texto {
  justify-items: center;
}

/* Sin ramo ni destellos (pedido de Mario, 2026-11-06: que siga la
   referencia). Los otros temas los conservan. */
html[data-tema='vino'] .ramo-lugar,
html[data-tema='vino'] .destellos {
  display: none;
}

/* ==========================================================================
   Correcciones de Mario (2026-11-07): como el video de referencia, con aire
   de crepúsculo: toda la página sobre el bosque oscuro con niebla, el sobre
   que se abre por la solapa, la invitación que sale de su sobre, polaroids a
   color que entran desde la izquierda, la vestimenta como una lámina y todo
   más junto, sin vacíos.
   ========================================================================== */

html[data-tema='vino'] {
  --entre-pliegos: clamp(56px, 8vh, 96px);
}

/* La página va sobre el mismo marfil de la lámina de vestimenta
   (2026-11-07; antes, el bosque oscuro): lo escrito directo sobre ella va en
   tinta vino. Las bandas vino tinto (itinerario, polaroids, preguntas,
   cierre) y el sobre de la intro siguen igual. */
html[data-tema='vino'] {
  --fondo-pagina: #f8f3ec;
  background: var(--fondo-pagina);
}

html[data-tema='vino'] body {
  --tinta-sobre: var(--v-hondo, #4a0a12);
  --salvia: var(--v-linea, #b86a76);
  background: var(--fondo-pagina);
}

/* El marfil, quieto detrás de toda la página, con la misma luz de papel
   que la lámina de vestimenta. */
html[data-tema='vino'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse at 50% 100%, #f3ece2, transparent 75%),
    var(--fondo-pagina);
}

/* Sin la tarjeta de portada ni las fotos chicas del álbum: después del sobre
   viene la foto a todo lo alto, como en el video (las fotos siguen en las
   polaroids). */
html[data-tema='vino'] .portada,
html[data-tema='vino'] .album-secundaria {
  display: none;
}

html[data-tema='vino'] .album-principal {
  height: 100svh;
  max-height: none;
}

/* ---------- El sobre de la intro: la solapa con el lacre ---------- */

html[data-tema='vino'] .solapa-remite {
  display: none;
}

html[data-tema='vino'] .sobre-abrir.sobre-abrir-dorso {
  z-index: 2;
  left: auto;
  bottom: auto;
  right: calc(50% + var(--sello-cierre) / 2 + 3cqw);
  top: calc(54% - 0.7em);
  transition: opacity 0.3s;
}

html[data-tema='vino'] .sobre-para-dorso {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  bottom: 9cqh;
  text-align: center;
  font-family: var(--f-mano);
  font-size: calc(5.2cqw * var(--escala-mano));
  line-height: 1.1;
  color: var(--v-oro-claro);
  transition: opacity 0.3s;
}

html[data-tema='vino'].abriendo .sobre-abrir-dorso,
html[data-tema='vino'].abriendo .sobre-para-dorso {
  opacity: 0;
}

/* ==========================================================================
   El sobre de la intro y la carta que sale de él (2026-11-07)
   - El sobre, de terciopelo rojo con oro: doble filete dorado, filigrana en
     las esquinas de abajo y el filo de la solapa dorado.
   - La carta, blanca con borde vino: un ramo de rosas vino arriba y los
     nombres en caligrafía vino.
   Todo se mide contra el sobre (cqw), así que escala con él.
   ========================================================================== */

html[data-tema='vino'] .escena-capa .sobre {
  --oro-gala: linear-gradient(135deg, #8b6522 0%, #e9cf8a 28%, #b8913f 50%, #f1d999 74%, #a07a2e 100%);
  --terciopelo: radial-gradient(ellipse 90% 85% at 50% 65%, #8e1b2c 0%, #66101f 55%, #420713 100%);
  --vino-carta: #6e1322;
}

/* ---------- El sobre: el bolsillo de terciopelo ---------- */

html[data-tema='vino'] .sobre-bolsillo {
  background:
    var(--pliegues) 0 0 / 100% 100%,
    var(--grano),
    var(--terciopelo);
}

/* Doble filete dorado a lo largo del borde */
html[data-tema='vino'] .sobre-bolsillo::before {
  content: '';
  position: absolute;
  inset: 3.2cqw;
  border: 1px solid #d4af66;
  box-shadow:
    inset 0 0 0 0.8cqw transparent,
    inset 0 0 0 calc(0.8cqw + 1px) color-mix(in srgb, #d4af66 70%, transparent);
  pointer-events: none;
}

/* Filigrana de oro en las dos esquinas de abajo */
html[data-tema='vino'] .sobre-bolsillo::after {
  content: '';
  position: absolute;
  inset: 1.4cqw;
  background: var(--oro-gala);
  -webkit-mask: url('adornos/esquina-filigrana-bl.svg') left bottom / 15cqw no-repeat, url('adornos/esquina-filigrana-br.svg') right bottom / 15cqw no-repeat;
  mask: url('adornos/esquina-filigrana-bl.svg') left bottom / 15cqw no-repeat, url('adornos/esquina-filigrana-br.svg') right bottom / 15cqw no-repeat;
  pointer-events: none;
}

/* ---------- La solapa: terciopelo con el filo dorado ---------- */

/* El fondo de la solapa es oro; encima, el terciopelo un poco más chico deja
   ver un filo dorado a lo largo de los dos lados de la V. */
html[data-tema='vino'] .solapa-forma {
  background: var(--oro-gala);
}

html[data-tema='vino'] .solapa-forma::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(1.8% 0, 98.2% 0, 50% 95.5%);
  background:
    var(--grano),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.14)),
    radial-gradient(ellipse 80% 90% at 50% 20%, #861a2a 0%, #5e0d1b 70%, #470915 100%);
}

/* La cresta de filigrana dorada, arriba al centro de la solapa */
html[data-tema='vino'] .solapa-forma::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 4cqh;
  width: 26cqw;
  height: 9cqw;
  translate: -50% 0;
  background: var(--oro-gala);
  -webkit-mask: url('adornos/cresta-filigrana.svg') center top / contain no-repeat;
  mask: url('adornos/cresta-filigrana.svg') center top / contain no-repeat;
}

/* ---------- La carta: blanca, con borde vino y un ramo de rosas ---------- */

html[data-tema='vino'] .sobre-carta {
  overflow: hidden;
  border: 1.1cqw solid var(--vino-carta);
  border-bottom: 0;
  background: var(--papel-claro), #fffdf9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 -2px 12px -2px rgba(0, 0, 0, 0.45);
}

/* Un filete vino fino por dentro del borde */
html[data-tema='vino'] .sobre-carta::before {
  inset: 2cqw 2cqw -2px;
  border: 1px solid color-mix(in srgb, var(--vino-carta) 35%, transparent);
  border-bottom: 0;
}

/* El ramo: las láminas de rosas teñidas de vino, asomando por arriba */
html[data-tema='vino'] .sobre-carta::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4cqw;
  right: -4cqw;
  top: -2cqw;
  height: 22cqw;
  pointer-events: none;
  /* Varias láminas encimadas para un ramo tupido de lado a lado */
  background:
    url('flores/rosa-centifolia-foliacea-600.webp') 50% -9cqw / 30cqw auto no-repeat,
    url('flores/rosa-indica-fragrans-600.webp') 22% -8cqw / 30cqw auto no-repeat,
    url('flores/rosa-centifolia-foliacea-600.webp') 80% -7cqw / 29cqw auto no-repeat,
    url('flores/rosa-multiflora-carnea-600.webp') left -6cqw top -6cqw / 30cqw auto no-repeat,
    url('flores/rosa-indica-fragrans-600.webp') right -6cqw top -7cqw / 30cqw auto no-repeat,
    url('flores/rosa-multiflora-carnea-600.webp') 64% -4cqw / 26cqw auto no-repeat,
    url('flores/rosa-alba-regalis-600.webp') 36% -5cqw / 24cqw auto no-repeat;
  /* Rosas teñidas de vino hondo y hojas oscuras */
  filter: sepia(0.35) saturate(2.5) brightness(0.52) contrast(1.28) hue-rotate(-16deg);
  -webkit-mask: linear-gradient(to bottom, #000 70%, transparent);
  mask: linear-gradient(to bottom, #000 70%, transparent);
}

html[data-tema='vino'] .carta-gala {
  display: grid;
  justify-items: center;
  gap: 0.6cqw;
  position: absolute;
  z-index: 2;
  left: 6cqw;
  right: 6cqw;
  top: 19.5cqw;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

html[data-tema='vino'] .carta-gala p {
  margin: 0;
}

html[data-tema='vino'] .carta-gala-arriba {
  font-family: var(--f-grabada);
  font-size: 2.2cqw;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vino-carta) 80%, #000);
}

/* Los nombres lado a lado en caligrafía vino, con el & en medio */
html[data-tema='vino'] .carta-gala-nombres {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2.4cqw;
  font-family: var(--f-mano);
  font-size: calc(8.4cqw * var(--escala-mano));
  line-height: 1.05;
  white-space: nowrap;
  color: var(--vino-carta);
}

html[data-tema='vino'] .carta-gala-nombres i {
  font-family: var(--f-mano);
  font-style: normal;
  font-size: 0.8em;
  color: #b8913f;
}

/* ---------- La invitación formal: el sobre abierto y la carta al lado ----------
   Después de abrir la intro, el mismo sobre de terciopelo rojo con oro, ya
   abierto y dejado a un lado, y la carta blanca con borde vino y su ramo,
   como si la hubieran sacado y dejado sobre la mesa. De fondo, el bosque al
   atardecer (assets/fondos/arboles-fondo.jpg). */

html[data-tema='vino'] .pliego-formal {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: clamp(72px, 11vh, 120px) 16px clamp(64px, 9vh, 104px);
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(20, 8, 10, 0.18), rgba(20, 8, 10, 0.05) 40%, rgba(20, 8, 10, 0.32)),
    url('fondos/arboles-fondo.jpg') center 40% / cover no-repeat,
    #6f6a63;
  box-shadow: inset 0 24px 40px -24px rgba(0, 0, 0, 0.45);
}

/* La mesa: el sobre arriba a la izquierda y la carta abajo, montada un poco
   sobre él; en pantalla ancha, lado a lado. */
html[data-tema='vino'] .formal-sobre {
  --vino-carta: #6e1322;
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 0;
}

/* ---------- El sobre abierto ---------- */

html[data-tema='vino'] .formal-envoltura {
  container-type: inline-size;
  position: relative;
  z-index: 0;
  justify-self: start;
  width: min(66%, 320px);
  aspect-ratio: 1 / 0.68;
  margin: calc(min(60vw, 320px) * 0.34) 0 0 3%;
  rotate: -8deg;
  filter: drop-shadow(0 18px 22px rgba(20, 5, 8, 0.45)) drop-shadow(0 3px 5px rgba(20, 5, 8, 0.3));
}

/* La solapa abierta hacia arriba, con su filo dorado */
html[data-tema='vino'] .formal-solapa {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: block;
  width: 100%;
  height: 50%;
  margin-bottom: -1px;
  overflow: visible;
}

/* El forro de adentro, que se ve por la V del bolsillo */
html[data-tema='vino'] .formal-sobre-fondo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(30, 0, 8, 0.55), rgba(30, 0, 8, 0.15) 55%),
    var(--forro-img, none) 0 0 / 30cqw,
    #4a0915;
}

/* El bolsillo de terciopelo, con doble filete y filigrana de oro */
html[data-tema='vino'] .formal-bolsillo {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  background:
    var(--pliegues) 0 0 / 100% 100%,
    var(--grano),
    radial-gradient(ellipse 90% 85% at 50% 65%, #8e1b2c 0%, #66101f 55%, #420713 100%);
}

html[data-tema='vino'] .formal-bolsillo::before {
  content: '';
  position: absolute;
  inset: 3.2cqw;
  border: 1px solid #d4af66;
  box-shadow:
    inset 0 0 0 0.8cqw transparent,
    inset 0 0 0 calc(0.8cqw + 1px) color-mix(in srgb, #d4af66 70%, transparent);
}

html[data-tema='vino'] .formal-bolsillo::after {
  content: '';
  position: absolute;
  inset: 1.4cqw;
  background: linear-gradient(135deg, #8b6522 0%, #e9cf8a 28%, #b8913f 50%, #f1d999 74%, #a07a2e 100%);
  -webkit-mask: url('adornos/esquina-filigrana-bl.svg') left bottom / 15cqw no-repeat, url('adornos/esquina-filigrana-br.svg') right bottom / 15cqw no-repeat;
  mask: url('adornos/esquina-filigrana-bl.svg') left bottom / 15cqw no-repeat, url('adornos/esquina-filigrana-br.svg') right bottom / 15cqw no-repeat;
}

/* El filo dorado de la V del bolsillo */
html[data-tema='vino'] .formal-bolsillo-filo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- La carta: blanca, con borde vino y el ramo arriba ---------- */

html[data-tema='vino'] .formal-sobre .tarjeta-formal {
  /* El ancho de la carta: con él se mide el ramo (cqw) y el aire de arriba */
  --ancho-carta: min(100vw - 72px, 400px);
  container-type: inline-size;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  justify-self: end;
  width: var(--ancho-carta);
  margin: -6% 4% 0 0;
  padding: calc(var(--ancho-carta) * 0.4) 26px 44px;
  border: 9px solid var(--vino-carta);
  border-radius: 2px;
  background: var(--papel-claro), #fffdf9;
  box-shadow:
    0 30px 44px -26px rgba(20, 5, 8, 0.6),
    0 4px 10px -4px rgba(20, 5, 8, 0.35);
  /* Recién sacada del sobre: llega desde él y se acomoda */
  translate: -18% -30%;
  rotate: -10deg;
  opacity: 0;
  transition:
    translate 1.3s cubic-bezier(.2, .7, .2, 1),
    rotate 1.3s cubic-bezier(.2, .7, .2, 1),
    opacity 0.5s ease;
  animation: none;
}

html[data-tema='vino'] .formal-sobre.fuera .tarjeta-formal {
  translate: 0 0;
  rotate: 2.5deg;
  opacity: 1;
}

/* Un filete vino fino por dentro del borde */
html[data-tema='vino'] .tarjeta-formal::before {
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--vino-carta) 30%, transparent);
}

/* El ramo de rosas vino, de lado a lado arriba (en lugar de la filigrana) */
html[data-tema='vino'] .tarjeta-formal .filigrana {
  inset: -2px -2cqw auto;
  height: 38cqw;
  background:
    url('flores/rosa-centifolia-foliacea-600.webp') 50% -13cqw / 32cqw auto no-repeat,
    url('flores/rosa-indica-fragrans-600.webp') 18% -11.5cqw / 32cqw auto no-repeat,
    url('flores/rosa-centifolia-foliacea-600.webp') 84% -10cqw / 30cqw auto no-repeat,
    url('flores/rosa-multiflora-carnea-600.webp') left -8.5cqw top -8.5cqw / 32cqw auto no-repeat,
    url('flores/rosa-indica-fragrans-600.webp') right -9cqw top -10.5cqw / 32cqw auto no-repeat,
    url('flores/rosa-multiflora-carnea-600.webp') 66% -6.4cqw / 28cqw auto no-repeat,
    url('flores/rosa-alba-regalis-600.webp') 34% -7.7cqw / 26cqw auto no-repeat;
  filter: sepia(0.35) saturate(2.5) brightness(0.52) contrast(1.28) hue-rotate(-16deg);
  -webkit-mask: linear-gradient(to bottom, #000 68%, transparent);
  mask: linear-gradient(to bottom, #000 68%, transparent);
}

/* El lacre quedó roto al abrir el sobre: la carta va sin él */
html[data-tema='vino'] .formal-lacre {
  display: none;
}

html[data-tema='vino'] .tarjeta-formal :is(.formal-encabezado, .formal-rotulo, .formal-fecha) {
  color: color-mix(in srgb, var(--vino-carta) 85%, #000);
}

html[data-tema='vino'] .tarjeta-formal .formal-nombres {
  color: var(--vino-carta);
}

html[data-tema='vino'] .tarjeta-formal .formal-nombres i {
  color: #b8913f;
}

/* En pantalla ancha: el sobre a la izquierda y la carta a su derecha */
@media (min-width: 860px) {
  html[data-tema='vino'] .formal-sobre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }

  html[data-tema='vino'] .formal-envoltura {
    justify-self: end;
    width: min(100%, 430px);
    margin: 150px -40px 0 0;
    rotate: -9deg;
  }

  html[data-tema='vino'] .formal-sobre .tarjeta-formal {
    --ancho-carta: min(46vw, 470px);
    justify-self: start;
    margin: 0;
    padding-inline: 30px;
    padding-bottom: 48px;
    translate: -55% 8%;
    rotate: -12deg;
  }

  html[data-tema='vino'] .formal-sobre.fuera .tarjeta-formal {
    translate: 0 0;
    rotate: 2.5deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tema='vino'] .tarjeta-formal {
    transition: none;
  }
}

/* ---------- Polaroids: a color, grandes, entran desde la izquierda ---------- */

html[data-tema='vino'] .pliego-polaroids {
  width: min(100% - 24px, 1240px);
  padding: 64px 0;
  gap: 36px;
}

html[data-tema='vino'] .polaroids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px 14px;
  width: 100%;
}

html[data-tema='vino'] .polaroid {
  width: auto;
  padding: 10px 10px 40px;
}

html[data-tema='vino'] .polaroid .foto-marco {
  aspect-ratio: auto;
}

html[data-tema='vino'] .polaroid img {
  height: auto;
  object-fit: contain;
  filter: none;
}

html[data-tema='vino'] .polaroids.caidas .polaroid {
  animation: entrar-izquierda 1.15s var(--d, 0ms) cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes entrar-izquierda {
  from { transform: translateX(-120vw) rotate(-10deg); opacity: 0; }
  35% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

@media (min-width: 900px) {
  html[data-tema='vino'] .polaroids {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
  }

  html[data-tema='vino'] .polaroid {
    padding: 14px 14px 52px;
  }
}

/* ---------- Más junto: bloques y tarjetas más anchos ---------- */

html[data-tema='vino'] .pliego {
  width: min(100% - 32px, 1080px);
}

html[data-tema='vino'] .tarjeta {
  width: min(100%, 560px);
}

html[data-tema='vino'] .tarjeta-calendario {
  width: min(100%, 600px);
}

/* ---------- El cierre sobre la noche vino, liso ---------- */

/* Sin el estampado del forro (las rosas y los lirios blancos): Mario lo pidió
   liso el 2026-11-08 para que el marco del camafeo se vea solo. */
html[data-tema='vino'] .remite {
  box-shadow: none;
  clip-path: none;
  background: var(--v-noche);
}

/* El sobre de la invitación formal va de lado a lado (le gana al ancho de
   los bloques). */
html[data-tema='vino'] .pliego.pliego-formal {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Itinerario en pantalla ancha: hora, punto del hilo, icono y momento, como
   en el video (el hilo sigue pasando por los puntos). */
@media (min-width: 640px) {
  html[data-tema='vino'] .dia-momento {
    grid-template-columns: 8.5rem 21px 44px 1fr;
    grid-template-areas: 'hora punto icono texto';
    column-gap: 18px;
    align-items: center;
  }

  html[data-tema='vino'] .dia-hora,
  html[data-tema='vino'] .dia-punto,
  html[data-tema='vino'] .dia-texto {
    margin-top: 0;
  }
}