/* ==========================================================================
   boda-jamis · Portada animada
   Paleta: vino (principal), guindo, perla, beige; dorado solo en filetes.
   ========================================================================== */

@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/great-vibes-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
}

:root {
  --vino: #7A2234;
  --vino-claro: #93304A;
  --guindo: #4A1220;
  --perla: #F8F4EF;
  --beige: #EADFCF;
  --beige-claro: #F3ECE2;
  --dorado: #B08A55;
  --dorado-texto: #86643A;
  --carbon: #2A2124;
  /* Papel exterior de la invitación impresa: guindo liso */
  --vino-papel: #86283A;
  --crema: #F6EBDD;      /* letras sobre el papel vino */
  --champan: #E3C894;    /* dorado claro legible sobre vino */

  /* Tamaño de la invitación: un panel de tríptico (proporción 0,48) que entra en pantalla */
  --alto: min(92vh, calc(92vw / 0.48), 900px);
  --ancho: calc(var(--alto) * 0.48);
  --s0: 0.36; /* escala del tríptico abierto (la calcula el JS según la pantalla) */
  /* Tamaños mínimos de letra para celulares en vertical (en horizontal la tarjeta
     es más pequeña y todo se escala en proporción) */
  --min-12: 12px;
  --min-13: 13px;
  --min-17: 17px;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
}
@supports (height: 100svh) {
  :root { --alto: min(92svh, calc(92vw / 0.48), 900px); }
}

html, body { height: 100%; }
body.pagina-inicio {
  margin: 0;
  overflow: hidden;
  background-color: #2F3B27;
  color: var(--carbon);
  font-family: var(--serif);
  -webkit-tap-highlight-color: transparent;
}

/* Fondo: foto del altar en el jardín, cubre toda la pantalla en cualquier tamaño.
   Ajustes de la «transparencia» del fondo (se cambian solo aquí):
   --velo        cuánto se aclara la foto con un velo marfil (0 = foto tal cual, 1 = solo marfil)
   --saturacion  intensidad del color de la foto (1 = original; menos = verdes más suaves) */
.fondo {
  --velo: 0.42;
  --saturacion: 0.88;
  --marfil: 248, 242, 233;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* miniatura borrosa mientras llega la foto */
  background: #2F3B27 url("data:image/webp;base64,UklGRsYAAABXRUJQVlA4ILoAAABQBACdASogABIAPrVQoEsnJKMlMBgIAOAWiWQAtRs0QNgLyEnewMlnLaHAAP2177ZikmTEKqh0UhuymtLsy7Jl5Kay934tVAgcOkNqg7Q7Eix4AYFPa0hvu4zvV7Rg4Mv87FrW8Ohy7vW2FfMFqmSAR8GxGfHUWP/B9ph2kZJbddxloHQksdVZILzes3C5AsNV8hv7KNQ8ZutP7AvdE1yQEStTKItr4W1yLeZKEr7QAJshhO5MKtYAAAA=") 50% 40% / cover no-repeat;
}
.fondo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(var(--saturacion));
  transform: scale(1.07);
  animation: acercar 14s cubic-bezier(.2, .6, .2, 1) forwards;
}
/* Velo marfil: la foto queda nítida pero translúcida; el jardín acompaña sin
   opacar a la invitación. Un halo muy leve aclara un poco más detrás de ella. */
.fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 50% 50%, rgba(var(--marfil), 0.16), rgba(var(--marfil), 0) 75%),
    linear-gradient(rgba(var(--marfil), var(--velo)), rgba(var(--marfil), var(--velo)));
}
@keyframes acercar {
  to { transform: scale(1); }
}

.escena {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}
.escena > .triptico-luz,
.escena > .portada { grid-area: 1 / 1; }
.triptico-luz {
  perspective: 2400px;
  perspective-origin: 50% 45%;
}

/* -------------------------------------------------------------- Papel */
/* Papel guindo liso por ambas caras, como la tarjeta impresa */
.cara,
.portada {
  background-color: var(--vino-papel);
  background-image:
    linear-gradient(135deg, rgba(255, 236, 236, 0.11) 0%, rgba(255, 236, 236, 0) 42%, rgba(40, 6, 14, 0.20) 100%);
}

/* -------------------------------------------------------------- Hojas en 3D */
.triptico {
  position: relative;
  width: var(--ancho);
  height: var(--alto);
  transform-style: preserve-3d;
  transform: scale(var(--s0));
  visibility: hidden;
}
.panel {
  position: absolute;
  top: 0;
  width: var(--ancho);
  height: var(--alto);
  transform-style: preserve-3d;
}
.panel--centro { left: 0; }
.panel--izq { left: calc(var(--ancho) * -1); transform-origin: 100% 50%; }
.panel--der { left: var(--ancho); transform-origin: 0 50%; }
.cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Sombra de cada hoja: la separa del fondo luminoso del jardín */
  --sombra-cara: 0 0 0 1px rgba(74, 18, 32, 0.1), 0 3px 10px rgba(42, 33, 36, 0.14), 0 22px 44px -22px rgba(42, 33, 36, 0.55);
  box-shadow: 0 1px 0 rgba(255, 225, 225, 0.16) inset, var(--sombra-cara);
  overflow: hidden;
  /* Capa propia: Chrome no recalcula la cara oculta de hijos sin capa cuando el
     giro del panel corre en el compositor */
  will-change: transform;
}
.cara--fuera { transform: rotateY(180deg); }
/* Sombra cálida que pasa por la hoja mientras gira */
.cara__sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(62, 38, 26, 0.55), rgba(62, 38, 26, 0.22));
  opacity: 0;
  pointer-events: none;
}
/* Pliegue: sombra suave en el doblez */
.panel--izq .cara--dentro { box-shadow: inset -16px 0 20px -16px rgba(30, 4, 10, 0.5), var(--sombra-cara); }
.panel--der .cara--dentro { box-shadow: inset 16px 0 20px -16px rgba(30, 4, 10, 0.5), var(--sombra-cara); }
.panel--centro .cara--dentro {
  box-shadow: inset 16px 0 20px -18px rgba(30, 4, 10, 0.45), inset -16px 0 20px -18px rgba(30, 4, 10, 0.45), var(--sombra-cara);
}

/* Hoja izquierda con punta, como el recorte de la invitación impresa.
   La cara de afuera está girada 180°: su punta queda a la derecha de sus coordenadas. */
.panel--izq .cara--dentro { clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 69%); }
.panel--izq .cara--fuera { clip-path: polygon(0 0, 78% 0, 100% 69%, 78% 100%, 0 100%); }

/* -------------------------------------------------------------- Tarjetas impresas
   Copia de la invitación impresa, pegada sobre cada hoja guindo. Todas las medidas
   dependen del ancho de la tarjeta (--u), así se ve igual en cualquier pantalla. */
.impreso {
  --u: calc(var(--ancho) / 100);
  --tinta-impresa: #7C1F2C;
  --oro-impreso: #DDA03C;
  position: absolute;
  inset: calc(var(--u) * 4.2);
  overflow: hidden;
  background-color: #FFFDF8;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%, rgba(234, 223, 207, 0.35)),
    url("../img/papel.webp");
  background-blend-mode: normal, multiply;
  box-shadow: 0 1px 2px rgba(20, 4, 8, 0.35), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) calc(var(--u) * -1) rgba(20, 4, 8, 0.5);
  color: #2A2124;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: lining-nums;
}
:where(.impreso) p { margin: 0; }
/* Filete naranja dorado */
.impreso::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 2.2);
  border: max(1px, calc(var(--u) * 0.32)) solid var(--oro-impreso);
  pointer-events: none;
}
.impreso--izq { clip-path: polygon(24% 0, 100% 0, 100% 100%, 24% 100%, 0 69%); }
.impreso--izq::before { display: none; }
.impreso__filete {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--oro-impreso);
  stroke-width: max(1px, calc(var(--u) * 0.32));
}
.impreso__contenido {
  position: absolute;
  inset: calc(var(--u) * 5) calc(var(--u) * 5.5);
  display: flex;
  flex-direction: column;
}
.impreso--izq .impreso__contenido { left: calc(var(--u) * 23); right: calc(var(--u) * 6); }
.impreso__titulo { color: var(--tinta-impresa); font-size: calc(var(--u) * 4.4); }
.impreso__nombre { font-size: calc(var(--u) * 3.95); }

/* Izquierda: padrinos y calendario */
.impreso__padrinos { margin-top: calc(var(--u) * 22); }
.impreso__grupo + .impreso__grupo { margin-top: calc(var(--u) * 8); }
.impreso__calendario { margin: auto 0 calc(var(--u) * 9); }
.impreso__mes { margin-bottom: calc(var(--u) * 1.4); font-size: calc(var(--u) * 4.6); }
.impreso table {
  width: 100%;
  border-collapse: collapse;
  color: var(--tinta-impresa);
  font-size: calc(var(--u) * 3.3);
  table-layout: fixed;
}
.impreso th {
  padding: calc(var(--u) * 0.9) 0;
  border-top: calc(var(--u) * 0.5) solid var(--tinta-impresa);
  border-bottom: calc(var(--u) * 0.5) solid var(--tinta-impresa);
  font-weight: 600;
}
.impreso td { padding: calc(var(--u) * 1.3) 0; }
.impreso tbody tr:first-child td { padding-top: calc(var(--u) * 1.8); }
.impreso__dia-boda { position: relative; }
.impreso__dia-boda svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 8.6);
  height: calc(var(--u) * 7.9);
  transform: translate(-50%, -46%);
  fill: none;
  stroke: var(--oro-impreso);
  stroke-width: 1.4;
}
.impreso__dia-boda span { position: relative; }

/* Centro: novios, padres, fecha y lugar de la ceremonia */
/* Foto de los novios: un cuarto de elipse anclado en la esquina superior izquierda,
   con el borde curvo desvanecido (medido sobre la invitación impresa) */
.impreso__foto-zona {
  --foto-w: calc(var(--u) * 78.5);   /* 90 % del filete, como en la impresa */
  --foto-h: calc(var(--foto-w) * 1.1);
  position: absolute;
  top: calc(var(--u) * 2.2);
  left: calc(var(--u) * 2.2);
  right: calc(var(--u) * 3.6);
  height: calc(var(--foto-h) + var(--u) * 2);
}
.impreso__foto {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--foto-w);
  height: var(--foto-h);
  object-fit: cover;
  object-position: 42% 30%;
  -webkit-mask: radial-gradient(ellipse 105.9% 111.2% at -5.5% -11%, #000 88%, transparent 97%);
          mask: radial-gradient(ellipse 105.9% 111.2% at -5.5% -11%, #000 88%, transparent 97%);
}
/* Forma invisible con la misma curva: el texto de la frase la rodea */
.impreso__foto-forma {
  float: left;
  width: var(--foto-w);
  height: var(--foto-h);
  shape-outside: ellipse(105.9% 111.2% at -5.5% -11%);
  shape-margin: calc(var(--u) * 1.6);
}
.impreso__frase {
  padding-top: calc(var(--foto-h) * 0.56);
  padding-right: calc(var(--u) * 1);
  font-size: calc(var(--u) * 3.9);
  line-height: 1.38;
  text-align: center;
}
.impreso__novios {
  /* justo debajo de la foto: zona de la foto (2,2 + 86,4 + 2) menos el margen del contenido (5) */
  margin-top: calc(var(--u) * 85.6);
  color: var(--tinta-impresa);
  font-family: "Great Vibes", var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--u) * 12.5);
  line-height: 1.15;
  white-space: nowrap;
}
.impreso__novios span { color: var(--oro-impreso); }
.impreso__texto { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 3.8); }
.impreso__padres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 3);
  font-size: calc(var(--u) * 3.55);
  line-height: 1.45;
}
.impreso__mensaje { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 3.5); }
.impreso__fecha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  margin-top: calc(var(--u) * 11);
}
.impreso__fecha-lado {
  padding: calc(var(--u) * 1.3) 0;
  border-top: calc(var(--u) * 0.55) solid var(--tinta-impresa);
  border-bottom: calc(var(--u) * 0.55) solid var(--tinta-impresa);
  font-size: calc(var(--u) * 4.7);
  white-space: nowrap;
}
.impreso__fecha-centro { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.impreso__fecha-centro b { font-size: calc(var(--u) * 9); font-style: normal; font-weight: 600; }
.impreso__fecha-centro small { margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 3.1); }
.impreso__lugar { margin-top: calc(var(--u) * 11); padding: 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3.4); line-height: 1.45; }

/* Derecha: salón, programa y códigos QR */
.impreso--der .impreso__contenido { top: calc(var(--u) * 4.5); bottom: calc(var(--u) * 4.5); }
.impreso--der .impreso__texto { margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 3.25); line-height: 1.3; }
.impreso__salon { margin-top: calc(var(--u) * 0.6); color: var(--tinta-impresa); font-size: calc(var(--u) * 5.4); line-height: 1.15; }
.impreso__azul { color: #24418A; }
.impreso__programa-titulo {
  margin-top: calc(var(--u) * 3);
  color: var(--tinta-impresa);
  font-family: "Great Vibes", var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--u) * 10);
  line-height: 1.2;
}
.impreso__programa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4.6);
  margin: calc(var(--u) * 3) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.impreso__programa::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 14.4);
  top: calc(var(--u) * 4.5);
  bottom: calc(var(--u) * 4.5);
  width: calc(var(--u) * 0.45);
  background: var(--oro-impreso);
}
.impreso__programa li {
  display: grid;
  grid-template-columns: calc(var(--u) * 13) calc(var(--u) * 3.2) minmax(0, 1fr) calc(var(--u) * 10);
  align-items: center;
  min-height: calc(var(--u) * 9);
}
.impreso__hora { padding-right: calc(var(--u) * 1); font-size: calc(var(--u) * 3.5); text-align: right; }
.impreso__punto {
  position: relative;
  justify-self: center;
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  border: calc(var(--u) * 0.45) solid var(--oro-impreso);
  border-radius: 50%;
  background: #FFFDF8;
}
.impreso__evento { padding-left: calc(var(--u) * 1.8); font-size: calc(var(--u) * 3.7); line-height: 1.15; }
.impreso__evento small { display: block; font-size: calc(var(--u) * 2.9); }
.impreso .impreso__icono {
  justify-self: center;
  width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
  fill: none;
  stroke: #C08A35;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.impreso__ubicacion {
  margin-top: auto;
  color: var(--tinta-impresa);
  font-size: calc(var(--u) * 3.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.impreso__qr { display: flex; justify-content: space-around; margin-top: calc(var(--u) * 1.4); }
.impreso__qr figure { margin: 0; }
.impreso__qr img { display: block; width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.impreso__qr figcaption { margin-top: calc(var(--u) * 0.6); font-size: calc(var(--u) * 3); }

/* -------------------------------------------------------------- Portada */
.portada {
  position: relative;
  width: var(--ancho);
  height: var(--alto);
  container-type: inline-size;
  container-name: portada;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 34px 70px -28px rgba(42, 33, 36, 0.55),
    0 10px 22px -8px rgba(42, 33, 36, 0.22);
  overflow: visible;
  isolation: isolate;
}

.portada__marco {
  position: absolute;
  inset: calc(var(--alto) * 0.016) calc(var(--ancho) * 0.034);
  pointer-events: none;
  z-index: 1;
}
/* Filete dorado doble: cuatro lados que se trazan uno tras otro */
.marco__lado {
  position: absolute;
  display: block;
  border-color: var(--champan);
  border-style: double;
  border-width: 0;
}
.marco__lado--arriba,
.marco__lado--abajo { left: 0; right: 0; height: 4px; }
.marco__lado--izq,
.marco__lado--der { top: 0; bottom: 0; width: 4px; }
.marco__lado--arriba { top: 0; border-top-width: 4px; transform-origin: 0 50%; }
.marco__lado--der { right: 0; border-right-width: 4px; transform-origin: 50% 0; }
.marco__lado--abajo { bottom: 0; border-bottom-width: 4px; transform-origin: 100% 50%; }
.marco__lado--izq { left: 0; border-left-width: 4px; transform-origin: 50% 100%; }

.portada__antetitulo {
  position: absolute;
  top: 7.6%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: max(var(--min-12), calc(var(--alto) * 0.019));
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  text-transform: uppercase;
  color: var(--champan);
  z-index: 2;
}

.portada__nombres {
  position: absolute;
  top: 10%;
  left: 7%;
  width: 86%;
  z-index: 2;
}
.nombres__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tinta { fill: var(--crema); }
.tinta-oro { fill: var(--champan); }
.portada .nombres__svg { filter: drop-shadow(0 1px 1px rgba(40, 6, 14, 0.35)); }

.portada__fecha {
  position: absolute;
  top: 35.2%;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.55em;
  font-weight: 500;
  font-size: max(var(--min-17), calc(var(--alto) * 0.032));
  letter-spacing: 0.16em;
  color: var(--crema);
  z-index: 2;
}
.portada__fecha .punto { color: var(--champan); letter-spacing: 0; }

/* Listón crema de organza con orillas de raso (como el de la invitación impresa):
   el centro es translúcido y deja ver el papel vino */
.liston {
  --alto-liston: calc(var(--alto) * 0.088);
  --centro: 67%;
  position: absolute;
  top: calc(var(--centro) - var(--alto-liston) / 2);
  left: 0;
  right: 0;
  height: var(--alto-liston);
  z-index: 3;
  pointer-events: none;
}
.liston__cinta {
  position: absolute;
  inset: 0 -1px;
  overflow: hidden;
  background:
    /* orillas de raso: brillo arriba y abajo */
    linear-gradient(to bottom, #D9C7A8 0%, #F8F0E2 38%, #E7D7BC 70%, #CBB693 100%) top / 100% 15% no-repeat,
    linear-gradient(to bottom, #CBB693 0%, #EFE3CF 34%, #F8F0E2 62%, #D2BE9C 100%) bottom / 100% 15% no-repeat,
    /* trama fina de la organza */
    repeating-linear-gradient(0deg, rgba(255, 250, 240, 0.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 250, 240, 0.06) 0 1px, transparent 1px 4px),
    /* brillo suave del centro y velo translúcido */
    linear-gradient(to bottom, rgba(255, 248, 236, 0.05) 18%, rgba(255, 248, 236, 0.30) 48%, rgba(255, 248, 236, 0.05) 82%),
    linear-gradient(rgba(218, 178, 128, 0.64), rgba(218, 178, 128, 0.64));
  box-shadow: 0 5px 12px -6px rgba(30, 4, 10, 0.55);
}
.liston__brillo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 252, 245, 0) 20%, rgba(255, 252, 245, 0.45) 50%, rgba(255, 252, 245, 0) 80%, transparent 100%);
  opacity: 0;
}
/* Vuelta del listón por detrás del borde de la tarjeta */
.liston__vuelta {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(to bottom, #A48D6C, #C9B392 18%, #8E6E5A 50%, #C9B392 82%, #A48D6C);
}
.liston__vuelta--izq { left: -6px; border-radius: 4px 0 0 4px; transform-origin: 100% 50%; }
.liston__vuelta--der { right: -6px; border-radius: 0 4px 4px 0; transform-origin: 0 50%; }

/* Ramillete: nace detrás del sello y queda metido bajo el listón */
.ramillete {
  position: absolute;
  --ancho-ramo: calc(var(--ancho) * 0.47);
  width: var(--ancho-ramo);
  height: auto;
  aspect-ratio: 520 / 640;
  /* el punto de atado (66 % del ancho, 97 % del alto de la imagen) cae en el centro del sello */
  left: calc(50% - var(--ancho-ramo) * 0.66);
  top: calc(67% - var(--ancho-ramo) * 1.2308 * 0.97);
  transform-origin: 66% 97%;
  z-index: 2;
  pointer-events: none;
}
.escena.lista .ramillete { animation: brisa 6.5s ease-in-out 0.4s infinite; }
@keyframes brisa {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.4deg); }
}

/* Sello de madera = único botón */
.sello {
  --diam: calc(var(--ancho) * 0.54);
  position: absolute;
  top: calc(67% - var(--diam) / 2);
  left: 50%;
  width: calc(var(--diam) + 40px);
  margin-left: calc((var(--diam) + 40px) / -2);
  padding: 0 0 6px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--alto) * 0.012);
  cursor: pointer;
  z-index: 4;
  color: var(--crema);
  font-family: var(--serif);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.sello__pieza {
  position: relative;
  width: var(--diam);
  height: var(--diam);
  display: block;
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
}
.sello__disco {
  position: absolute;
  inset: 4.6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 50%, #5A1828 0%, #4A1220 62%, #380C17 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 6px 14px rgba(0, 0, 0, 0.35);
}
.sello__madera {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 2px rgba(42, 20, 10, 0.45)) drop-shadow(0 10px 12px rgba(42, 20, 10, 0.25));
}
.sello__sombra {
  position: absolute;
  top: calc(var(--diam) * 0.62);
  left: 50%;
  width: calc(var(--diam) * 0.9);
  height: calc(var(--diam) * 0.42);
  margin-left: calc(var(--diam) * -0.45);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 20, 10, 0.32), rgba(42, 20, 10, 0));
  pointer-events: none;
}
.sello__texto {
  position: relative;
  font-weight: 600;
  font-size: max(var(--min-13), calc(var(--alto) * 0.02));
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--crema);
}
.sello__texto::before,
.sello__texto::after {
  content: "";
  display: inline-block;
  width: min(1.6em, calc(var(--ancho) * 0.055));
  height: 1px;
  margin: 0 0.6em 0.3em;
  vertical-align: middle;
  background: var(--champan);
}
.sello:hover .sello__pieza { transform: translateY(-3px) scale(1.02); }
.sello:active .sello__pieza { transform: translateY(1px) scale(0.97); }
.sello:focus { outline: none; }
.sello:focus-visible .sello__pieza { outline: 3px solid var(--champan); outline-offset: 6px; border-radius: 50%; }

.portada__lugar {
  position: absolute;
  bottom: 8.2%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  font-size: max(var(--min-13), calc(var(--alto) * 0.022));
  letter-spacing: 0.06em;
  color: var(--champan);
  z-index: 2;
}


/* ==========================================================================
   Estados de la animación (solo con JavaScript; sin JS se ve la portada lista)
   ========================================================================== */
.js .portada { visibility: hidden; }
.js .triptico { visibility: visible; }

/* Cuando las hojas terminaron de plegarse, se muestra la portada plana */
.js .escena.armada .triptico { visibility: hidden; }
.js .escena.armada .portada { visibility: visible; }

/* Las piezas de la portada no tienen estado oculto en CSS: el JS las anima con
   relleno «hacia atrás», así que antes de su turno no se ven y al terminar quedan
   en su sitio (y sin JS se ve la portada completa). */

/* Invitación a tocar el sello: respiración suave */
.escena.lista .sello:not(:hover):not(:focus-visible) .sello__pieza { animation: respirar 2.8s ease-in-out 0.6s infinite; }
.escena.lista .sello__disco { animation: latido 2.8s ease-in-out 0.6s infinite; }
@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes latido {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(176, 138, 85, 0); }
  50% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(176, 138, 85, 0.18); }
}


@media (prefers-reduced-motion: reduce) {
  .fondo img { animation: none; transform: none; }
  .escena.lista .ramillete,
  .escena.lista .sello .sello__pieza,
  .escena.lista .sello__disco { animation: none !important; }
  .sello__pieza { transition: none; }
}

/* Tarjetas angostas (celulares pequeños o en horizontal): el rótulo se compacta
   para no salir del filete */
@container portada (max-width: 300px) {
  .sello__texto { letter-spacing: 0.18em; padding-left: 0.18em; }
  .sello__texto::before,
  .sello__texto::after { width: 0.8em; margin: 0 0.4em 0.3em; }
}
@container portada (max-width: 200px) {
  .sello__texto { letter-spacing: 0.1em; padding-left: 0.1em; }
  .sello__texto::before,
  .sello__texto::after { display: none; }
  .portada__antetitulo { letter-spacing: 0.28em; padding-left: 0.28em; }
}

/* Celular en horizontal: la invitación aprovecha toda la altura y la letra
   pequeña conserva un mínimo legible */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --alto: min(96vh, calc(92vw / 0.48), 900px);
    --min-12: 8px;
    --min-13: 8.5px;
    --min-17: 10px;
  }
  @supports (height: 100svh) {
    :root { --alto: min(96svh, calc(92vw / 0.48), 900px); }
  }
}

/* Sugerencia discreta para girar el celular (solo pantallas táctiles en horizontal) */
.girar {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 5;
  display: none;
  margin: 0;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  background: rgba(74, 18, 32, 0.88);
  color: var(--crema);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .girar { display: block; }
  .escena.abriendo .girar { display: none; }
}