/* ==========================================================================
   ANIMACIONES CSS & MOTOR DE APERTURAS CEREMONIALES DE ALTA COSTURA (16 RITUALES)
   ========================================================================== */

@keyframes pulseGentle {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes spinRecord {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shimmerGold {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseHalo {
  0%, 100% { transform: scale(0.96); opacity: 0.5; }
  50% { transform: scale(1.06); opacity: 0.95; }
}

@keyframes gatesAura {
  0%, 100% { opacity: 0.4; transform: scaleX(1); }
  50% { opacity: 0.8; transform: scaleX(1.04); }
}

@keyframes vortexSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.shimmer-effect {
  background: linear-gradient(90deg, transparent, rgba(243, 229, 171, 0.25), transparent);
  background-size: 200% 100%;
  animation: shimmerGold 3s infinite;
}

.float-animation {
  animation: floatCard 4s ease-in-out infinite;
  will-change: transform;
}

/* GPU Layer Optimizations */
.envelope-wrapper-3d,
.envelope-flap-top,
.envelope-sacred-seal,
.envelope-invitation-letter,
.tilt-card-3d,
.hero-photo-frame,
.reveal-card,
.envelope-classic-card,
.monumental-gates-chassis, .gate-door-3d,
.parchment-scroll-chassis, .scroll-rod-3d, .parchment-sheet-core,
.opera-theatre-chassis, .curtain-panel-3d,
.luxury-giftbox-chassis, .giftbox-lid-3d, .giftbox-body-3d,
.cyber-vault-chassis, .cyber-hud-center, .orbit-ring,
.origami-envelope-chassis, .envelope-tri-flap-3d, .envelope-letter-card,
.botanical-pod-chassis, .blooming-peony-3d, .petal-leaf,
.mist-portal-chassis, .mist-cloud-core, .mist-swirl-layer,
.baroque-mirror-chassis,
.antique-book-chassis,
.victorian-lockbox-chassis, .floating-key-3d,
.armillary-astrolabe-chassis,
.gatsby-fan-chassis, .fan-plumes-array,
.french-gatefold-chassis, .gatefold-leaf-3d,
.alchemical-vortex-chassis, .vortex-runic-disk {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* ==========================================================================
   DISEÑO VISUAL Y MORFOLOGÍA DE LAS 16 APERTURAS CEREMONIALES
   ========================================================================== */

.envelope-stage-container {
  width: min(92vw, calc(78dvh * 0.86), 460px);
  /* Altura guiada por el contenido: en pantallas bajas la tarjeta clasica
     necesita ~530px y con aspect-ratio fijo se recortaban la estrella (arriba)
     y el prompt (abajo). Las otras 15 aperturas fijan su propia altura de
     chassis, no dependen de esto. */
  min-height: min(66dvh, 420px);
  max-height: 94dvh;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  margin: auto;
}

.opening-stage {
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  perspective: 1000px;
  box-sizing: border-box;
}

.monumental-gates-chassis,
.parchment-scroll-chassis,
.opera-theatre-chassis,
.luxury-giftbox-chassis,
.cyber-vault-chassis,
.origami-envelope-chassis,
.botanical-pod-chassis,
.mist-portal-chassis,
.baroque-mirror-chassis,
.antique-book-chassis,
.victorian-lockbox-chassis,
.armillary-astrolabe-chassis,
.gatsby-fan-chassis,
.french-gatefold-chassis,
.alchemical-vortex-chassis {
  max-height: 100%;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

/* Visibilidad Exclusiva por Atributo data-opening */
[data-opening="wax-seal"] .stage-wax-seal { display: flex; }
[data-opening="golden-gates"] .stage-golden-gates { display: flex; }
[data-opening="parchment"] .stage-parchment { display: flex; }
[data-opening="silk-curtain"] .stage-silk-curtain { display: flex; }
[data-opening="gift-box"] .stage-gift-box { display: flex; }
[data-opening="magnetic-seal"] .stage-magnetic-seal { display: flex; }
[data-opening="envelope-flap"] .stage-envelope-flap { display: flex; }
[data-opening="petal-explosion"] .stage-petal-explosion { display: flex; }
[data-opening="mist-dissolve"] .stage-mist-dissolve { display: flex; }
[data-opening="golden-mirror"] .stage-golden-mirror { display: flex; }
[data-opening="antique-book"] .stage-antique-book { display: flex; }
[data-opening="vintage-key"] .stage-vintage-key { display: flex; }
[data-opening="celestial-burst"] .stage-celestial-burst { display: flex; }
[data-opening="feather-fan"] .stage-feather-fan { display: flex; }
[data-opening="french-gatefold"] .stage-french-gatefold { display: flex; }
[data-opening="gold-dust-vortex"] .stage-gold-dust-vortex { display: flex; }

/* ==========================================================================
   TINTA DE CEREMONIA SEGUN LA SUPERFICIE REAL DEL CHASIS
   ==========================================================================
   Las carrocerías de apertura se diseñaron sobre el SOBRE OSCURO del ritual
   original, con tinta clara (oro pálido #E9D8A6, blanco, #F0F4F8). Quince de
   los dieciséis rituales apoyan ese mismo texto sobre la tarjeta clara del
   chasis, donde esa tinta queda ilegible.

   Medido por píxeles en la pantalla de apertura (0.4 megapíxeles de muestra,
   16 rituales, superficies estimadas con el anillo de relleno alrededor del
   texto para no contaminar la medida con el propio glifo):

     ritual            texto                     antes      superficie
     magnetic-seal     .cyber-monogram           1.04:1    rgb(252,251,247)
     golden-gates      .pediment-title           1.39:1    rgb(253,253,252)
     vintage-key       .lockbox-monogram         1.39:1    rgb(254,253,252)
     antique-book      .book-monogram            1.39:1    rgb(254,253,251)
     gold-dust-vortex  .vortex-monogram          1.39:1    rgb(253,253,252)
     celestial-burst   .celestial-monogram       1.40:1    rgb(254,254,253)
     envelope-flap     .envelope-prompt          1.50:1    rgb(255,255,255)
     vintage-key       .envelope-prompt          1.79:1    rgb(254,253,251)
     petal-explosion   .botanical-monogram       1.86:1    rgb(253,253,252)
     antique-book      .envelope-prompt          1.89:1    rgb(254,253,251)
     mist-dissolve     .mist-monogram            1.96:1    rgb(253,253,252)
     parchment         .parchment-title-top      2.30:1    rgb(250,247,242)
     parchment         .parchment-date-stamp     2.30:1    rgb(250,247,242)
     silk-curtain      .proscenium-monogram      2.34:1    rgb(197,160,89)
     magnetic-seal     .hud-status-text          2.06:1    rgb(252,250,247)
     antique-book      .book-embossed-title      2.42:1    rgb(254,253,252)
     golden-mirror     .mirror-date-sub          2.83:1    rgb(100,88,67)
     french-gatefold   .envelope-prompt          3.06:1    rgb(254,253,252)
     gold-dust-vortex  .envelope-prompt          4.21:1    rgb(253,251,249)

   Se corrige reencaminando esos textos a los tokens de TEXTO que ya están
   auditados contra pergamino (y que cada tema redefine, así que la corrección
   es correcta en los 28 temas sin tocar los metales decorativos):
     --gold-text   #8D6B2C → 4.60:1   (oro legible)
     --text-muted  #6E6259 → 5.53:1   (aviso secundario)
     --text-primary#221D18 → 14.6:1   (tinta plena; también segura si la
                                       superficie resulta ser una banda dorada,
                                       donde --text-muted solo daría 2.40:1)

   NO se tocan los rituales que ya cumplían, ni los monogramas que se leen bien
   (wax-seal, gift-box, feather-fan, french-gatefold, silk-curtain .stage-names,
   golden-mirror .mirror-engraved-title, envelope-flap .letter-monogram).
   ========================================================================== */

/* Aviso de apertura sobre tarjeta clara */
.monumental-gates-chassis .envelope-prompt,
.origami-envelope-chassis .envelope-prompt,
.antique-book-chassis .envelope-prompt,
.victorian-lockbox-chassis .envelope-prompt,
.french-gatefold-chassis .envelope-prompt,
.alchemical-vortex-chassis .envelope-prompt { color: var(--text-muted); }

/* Aviso sobre banda dorada: el pardo apagado solo daría 2.40:1 */
.opera-theatre-chassis .envelope-prompt { color: var(--text-primary); }

/* El pulso original (`pulsePrompt`, en main.css) anima la OPACIDAD hasta 0.6. Con tinta
   oscura sobre tarjeta clara eso hunde el aviso por debajo de AA en el valle de su propio
   latido: #6E6259 da 5.67:1 al 100% y 2.45:1 al 60%. Se conserva el latido, pero se mueve
   a la escala, que no afecta al contraste. */
@keyframes pulsoAvisoTinta {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.monumental-gates-chassis .envelope-prompt,
.origami-envelope-chassis .envelope-prompt,
.antique-book-chassis .envelope-prompt,
.victorian-lockbox-chassis .envelope-prompt,
.french-gatefold-chassis .envelope-prompt,
.alchemical-vortex-chassis .envelope-prompt,
.opera-theatre-chassis .envelope-prompt { animation: pulsoAvisoTinta 2s ease-in-out infinite; }

/* Monograma «S & A» en oro sobre tarjeta clara */
.monumental-gates-chassis .pediment-title,
.victorian-lockbox-chassis .lockbox-monogram,
.antique-book-chassis .book-monogram,
.alchemical-vortex-chassis .vortex-monogram,
.armillary-astrolabe-chassis .celestial-monogram { color: var(--gold-text); }

/* Monograma sobre banda dorada o tarjeta clara: tinta plena, válida en ambas */
.opera-theatre-chassis .proscenium-monogram { color: var(--text-primary); }

/* Monograma blanco del arca digital, sobre tarjeta clara */
.cyber-vault-chassis .cyber-monogram { color: var(--text-primary); }
.cyber-vault-chassis .hud-status-text { color: #227295; } /* 5.03:1 sobre pergamino */

/* Monogramas de color propio: se conserva el tono y se baja la luz.
   Escalado multiplicativo del RGB, que mantiene la razón entre canales; bajar la
   saturación en HSL convertía el rosa pálido #FDA4AF en carmesí #DC051F. */
.botanical-pod-chassis .botanical-monogram { color: #8B5A60; } /* rosa polvoriento · 5.27:1 */
.mist-portal-chassis .mist-monogram { color: #535A7E; }        /* periwinkle apagado · 6.27:1 */

/* Títulos y sellos de fecha en oro sobre pergamino */
.parchment-scroll-chassis .parchment-title-top,
.parchment-scroll-chassis .parchment-date-stamp,
.antique-book-chassis .book-embossed-title { color: var(--gold-text); }

/* Fecha grabada sobre el bronce del espejo: el oro #C5A059 daba 2.83:1,
   se aclara el oro en lugar de oscurecer el bronce, que es el material. */
.baroque-mirror-chassis .mirror-date-sub { color: #E4D3B3; } /* 4.72:1 */

/* Botones Actuadores Universales de Apertura */
.opening-actuator {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  user-select: none;
  z-index: 20;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.opening-actuator:hover {
  transform: scale(1.05);
}

.opening-actuator:active {
  transform: scale(0.96);
}

/* 1. WAX SEAL (Sello de Lacre Real Italiano) */
.envelope-classic-card {
  background: var(--envelope-box-bg, rgba(16, 20, 26, 0.92));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-lg, 20px);
  padding: 48px 28px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  width: 100%;
  transform-style: preserve-3d;
  position: relative;
}

.sacred-geometry-medallion {
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary, #C5A059);
}

.wax-seal-wrapper {
  margin: 18px auto 12px;
}

.wax-seal-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #B91C1C 0%, #7F1D1D 60%, #450A0A 100%);
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF2B2;
}

.wax-seal-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   FRACTURA DEL LACRE (ritual `wax-seal`)
   ==========================================================================
   Antes este ritual era la plantilla común: el sello crecía, se desenfocaba y
   la tarjeta entera acababa en `filter: blur(16px)`. Un lacre no se desenfoca:
   SE PARTE. Es literalmente lo que significa lacrar una carta.

   Estas dos capas son las dos mitades del mismo sello, cortadas por una línea
   irregular que encaja (los vértices de una son los de la otra invertidos). Las
   crea el guion en tiempo de ejecución clonando `#sealImage`, NO con una URL
   fija: el sello puede ser el JPG de la boda o un SVG procedural con la cera y
   las iniciales del tema (`.is-procedural-seal`), y una URL fija lo rompería.

   `clip-path` corta la fractura y el `border-radius: 50%` del <img> conserva el
   contorno circular, así que quedan dos trozos de lacre redondos con un corte
   dentado en medio.
   ========================================================================== */
.lacre-mitad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.lacre-mitad > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Los vértices recorren la misma línea dentada: la mitad alta la baja y la baja
   la sube, de modo que encajan y el corte se lee como una fractura, no como un
   tajo recto. */
.lacre-mitad--alta {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 44%,
    90% 48%, 79% 41%, 68% 50%, 57% 43%, 46% 51%,
    35% 44%, 24% 51%, 13% 45%, 4% 50%, 0% 46%
  );
}

.lacre-mitad--baja {
  clip-path: polygon(
    0% 46%, 4% 50%, 13% 45%, 24% 51%, 35% 44%, 46% 51%,
    57% 43%, 68% 50%, 79% 41%, 90% 48%, 100% 44%,
    100% 100%, 0% 100%
  );
}

/* El destello de la fractura. Ocupa el lugar que antes ocupaba el desenfoque: es
   luz, no borrosidad, y por eso se lee como un lacre que cede. */
.lacre-destello {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 242, 178, 0.95) 0%,
    rgba(255, 215, 0, 0.42) 36%,
    rgba(255, 215, 0, 0) 70%
  );
}

/* 2. GOLDEN GATES (Portón Monumental de Palacio) */
.monumental-gates-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 410px);
  background: radial-gradient(circle at 50% 30%, var(--bg-card, #12151B) 0%, var(--bg-card-alt, #080A0E) 100%);
  border: 1.5px solid var(--gold-primary, #C5A059);
  border-radius: 200px 200px 22px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  transform-style: preserve-3d;
}

.gates-pediment-arch {
  text-align: center;
  margin-bottom: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pediment-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
  margin-bottom: 4px;
}

.pediment-title {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.2rem;
  color: var(--gold-light, #EEDAA2);
  letter-spacing: 4px;
}

.gates-grand-doors-frame {
  position: relative;
  width: 100%;
  flex: 1;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.gate-door-3d {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, var(--bg-card, #12151B) 0%, var(--bg-card-alt, #080A0E) 100%);
  border: 1.5px solid var(--gold-primary, #C5A059);
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0,0,0,0.85);
}

.gate-door-3d.gate-door-left {
  left: 0;
  border-radius: 130px 0 0 10px;
  transform-origin: left center;
  border-right: 1px dashed var(--gold-light, #EEDAA2);
}

.gate-door-3d.gate-door-right {
  right: 0;
  border-radius: 0 130px 10px 0;
  transform-origin: right center;
  border-left: 1px dashed var(--gold-light, #EEDAA2);
}

.gate-filigree-svg {
  width: 100%;
  height: 100%;
}

.btn-actuator-knocker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  background: radial-gradient(circle at 35% 35%, #FFE5A3 0%, #D4AF37 50%, #8A6414 100%);
  border: 1.5px solid #FFF2B2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 36px rgba(0,0,0,0.9);
  color: #0A0D14;
  z-index: 25;
}

.knocker-lion-head {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   LUZ DE LA APERTURA DE LAS PUERTAS (ritual `golden-gates`)
   ==========================================================================
   Antes, este ritual era: la aldaba crecía, las hojas giraban 125° y la
   carrocería acababa en `blur(12px)`. Una puerta monumental no gira y se
   desenfoca: PESA — se resiste, cede, barre y se detiene.

   Y antes de que las hojas se muevan, la luz de dentro asoma por la junta. Estos
   dos elementos la aportan y los crea el guion en tiempo de ejecución:
     - `.puertas-trasluz` va DETRÁS de las hojas (el marco lo recibe con `prepend`),
       así que sólo se ve por el hueco que se abre.
     - `.puerta-rendija` va DELANTE (se añade al final), porque tiene que verse
       justo cuando las hojas aún están cerradas. La aldaba tiene `z-index: 25`,
       así que sigue por encima.
   ========================================================================== */
.puertas-trasluz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    58% 74% at 50% 58%,
    rgba(255, 242, 178, 0.95) 0%,
    rgba(212, 175, 55, 0.55) 44%,
    rgba(212, 175, 55, 0) 78%
  );
}

.puerta-rendija {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 7px;
  margin-left: -3.5px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 242, 178, 0) 0%,
    rgba(255, 242, 178, 0.98) 22%,
    #FFF8DB 50%,
    rgba(255, 242, 178, 0.98) 78%,
    rgba(255, 242, 178, 0) 100%
  );
  box-shadow: 0 0 18px 4px rgba(255, 229, 163, 0.7);
}

/* 3. PARCHMENT (Desenrollado de Pergamino Imperial) */
.parchment-scroll-chassis {
  width: 100%;
  min-height: clamp(280px, 66dvh, 390px);
  height: clamp(280px, 66dvh, 390px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.scroll-rod-3d {
  width: 108%;
  height: 22px;
  background: linear-gradient(90deg, #6B4E1B 0%, #FFE5A3 50%, #6B4E1B 100%);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.9);
  position: relative;
  z-index: 10;
}

.parchment-sheet-core {
  width: 100%;
  flex: 1;
  background: var(--bg-parchment, #181512);
  border-left: 1.5px solid #C5A059;
  border-right: 1.5px solid #C5A059;
  box-shadow: 0 15px 40px rgba(0,0,0,0.8);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-primary, #FFFFFF);
}

.parchment-watermark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--gold-light, #EEDAA2);
}

.parchment-title-top {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: #C5A059;
  font-weight: 700;
}

.parchment-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.8rem;
  color: var(--text-primary, #FFFFFF);
  letter-spacing: 3px;
  margin: 6px 0;
}

.parchment-date-stamp {
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  color: #C5A059;
  border-top: 1px solid rgba(197, 160, 89, 0.4);
  border-bottom: 1px solid rgba(197, 160, 89, 0.4);
  padding: 3px 12px;
}

.btn-actuator-scroll-seal {
  margin: 12px auto 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at 35% 35%, #991B1B 0%, #4A0E0E 100%);
  border: 1.5px solid #D4AF37;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  color: #FFF2B2;
  position: relative;
}

/* 4. SILK CURTAIN (Telón de Ópera & Terciopelo) */
.opera-theatre-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 390px);
  background: var(--bg-card-alt, #080A0E);
  border: 2px solid var(--gold-primary, #C5A059);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 35px 95px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
}

.theatre-proscenium-arch {
  height: 40px;
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.2) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gold-primary, #C5A059);
}

.proscenium-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 1.4rem;
  color: var(--gold-light, #EEDAA2);
}

.theatre-curtains-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.curtain-panel-3d {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background: linear-gradient(135deg, #3A0C16 0%, #1A050A 60%, #3A0C16 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  border-bottom: 3px solid var(--gold-primary, #C5A059);
}

.curtain-panel-3d.curtain-panel-left { left: 0; transform-origin: left center; }
.curtain-panel-3d.curtain-panel-right { right: 0; transform-origin: right center; }

.velvet-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  background: linear-gradient(90deg, rgba(0,0,0,0.5), transparent, rgba(255,255,255,0.12));
}
.velvet-fold.fold-1 { left: 10%; }
.velvet-fold.fold-2 { left: 45%; }
.velvet-fold.fold-3 { left: 75%; }

.stage-invitation-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
  z-index: 1;
}

.btn-actuator-tassel {
  margin: 10px auto;
  width: 50px; height: 50px;
  background: radial-gradient(circle at 35% 35%, #D4AF37 0%, #8A6414 100%);
  border: 1.5px solid #FFE5A3;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  color: #0A0D14;
}

/* 5. GIFT BOX (Caja Joyero Satín de Alta Costura) */
.luxury-giftbox-chassis {
  width: 100%;
  max-width: 320px;
  height: clamp(280px, 66dvh, 360px);
  position: relative;
  perspective: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.giftbox-body-3d {
  width: 100%;
  height: 240px;
  background: linear-gradient(135deg, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid var(--gold-primary, #C5A059);
  border-radius: 14px;
  position: relative;
  box-shadow: 0 25px 70px rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.giftbox-lid-3d {
  position: absolute;
  top: 15px;
  left: -10px;
  right: -10px;
  height: 48px;
  background: linear-gradient(135deg, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid var(--gold-light, #EEDAA2);
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.85);
  z-index: 10;
}

.lid-ribbon-vert, .box-ribbon-vert {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 28px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #997531, #FFE5A3, #997531);
}

.lid-ribbon-horiz, .box-ribbon-horiz {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 28px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #997531, #FFE5A3, #997531);
}

.lid-3d-bow-knot {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-light, #EEDAA2);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.giftbox-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.8rem;
  color: var(--gold-light, #EEDAA2);
  z-index: 2;
}

.btn-actuator-bow {
  margin-top: 25px;
  width: 65px; height: 65px;
  background: radial-gradient(circle at 35% 35%, #FFF0BD 0%, #D4AF37 100%);
  border: 1.5px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  color: #0A0D14;
}

/* 6. MAGNETIC SEAL (Cofre Biométrico Cyber HUD) */
.cyber-vault-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 380px);
  background: var(--bg-card-alt, #080A0E);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cyber-hud-center {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(56, 189, 248, 0.6);
}
.hud-orbit-ring.ring-outer { inset: 0; animation: spinSlow 10s linear infinite; }
.hud-orbit-ring.ring-inner { inset: 20px; border-style: dotted; animation: spinSlow 6s linear infinite reverse; }

.hud-scanner-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #38BDF8;
}

.hud-status-text {
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: #38BDF8;
  font-weight: 700;
  margin-top: 4px;
}

.cyber-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.4rem;
  color: #FFFFFF;
  letter-spacing: 4px;
  margin: 10px 0;
}

.btn-actuator-hud {
  width: 65px; height: 65px;
  background: rgba(8, 12, 20, 0.8);
  border: 1.5px solid #38BDF8;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg);
  margin-top: 20px;
  color: #38BDF8;
}

.btn-actuator-hud svg {
  transform: rotate(-45deg);
}

/* 7. ENVELOPE FLAP (Sobre Origami Tridimensional) */
.origami-envelope-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 370px);
  background: var(--bg-card, #12151B);
  border: 1px solid var(--gold-primary, #C5A059);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.9);
  backdrop-filter: blur(24px);
  position: relative;
  perspective: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.envelope-tri-flap-3d {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--bg-card-alt, #080A0E), var(--bg-card, #12151B));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-top: 2px solid var(--gold-light, #EEDAA2);
  transform-origin: top center;
  z-index: 10;
  box-shadow: 0 8px 25px rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  padding-top: 15px;
}

.flap-apex-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
}

.envelope-letter-card {
  width: 82%;
  height: 180px;
  background: #FAF7F2;
  border-radius: 8px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1E232B;
  z-index: 2;
}

.letter-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.4rem;
  color: #8E7037;
  letter-spacing: 2px;
}

.letter-tag {
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  color: #666;
  font-weight: 600;
}

.btn-actuator-flap-seal {
  margin-top: 20px;
  width: 65px; height: 65px;
  background: radial-gradient(circle at 35% 35%, #FAF7F2, #D4C3A3);
  border: 1.5px solid #8E7037;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  /* El pardo #8E7037 sobre su propio gradiente marfil->tostado daba 4.34:1 en el borde
     claro y 2.68:1 en el tostado: la etiqueta "Abrir Sobre" no alcanzaba AA en ninguno
     de los dos extremos. Se oscurece el mismo tono: 8.26:1 y 5.10:1. */
  color: #5C4722;
  z-index: 15;
}

/* 8. PETAL EXPLOSION (Rosetón de Cerezo & Explosión) */
.botanical-pod-chassis {
  width: 100%;
  max-width: 320px;
  height: clamp(280px, 66dvh, 360px);
  background: radial-gradient(circle, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid rgba(253, 164, 175, 0.4);
  border-radius: 160px;
  box-shadow: 0 30px 85px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.blooming-peony-3d {
  width: 130px;
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.petal-leaf {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA4AF;
}
.petal-leaf.l1 { transform: rotate(0deg) translateY(-25px); }
.petal-leaf.l2 { transform: rotate(72deg) translateY(-25px); }
.petal-leaf.l3 { transform: rotate(144deg) translateY(-25px); }
.petal-leaf.l4 { transform: rotate(216deg) translateY(-25px); }
.petal-leaf.l5 { transform: rotate(288deg) translateY(-25px); }

.petal-center-rose {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F43F5E;
  z-index: 2;
}

.botanical-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.4rem;
  color: #FDA4AF;
  letter-spacing: 3px;
  margin: 10px 0;
}

.btn-actuator-petal {
  width: 65px; height: 65px;
  background: radial-gradient(circle at 35% 35%, #FFE4E6, #F43F5E);
  border: 1.5px solid #FDA4AF;
  border-radius: 50% 0 50% 50%;
  box-shadow: 0 14px 30px rgba(0,0,0,0.85);
  transform: rotate(45deg);
  margin-top: 15px;
  display: flex; align-items: center; justify-content: center;
  color: #881337;
}

.btn-actuator-petal svg {
  transform: rotate(-45deg);
}

/* 9. MIST DISSOLVE (Portal de Runas & Bruma Mística) */
.mist-portal-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 380px);
  background: radial-gradient(circle, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid rgba(165, 180, 252, 0.4);
  border-radius: 180px;
  box-shadow: 0 30px 85px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mist-cloud-core {
  width: 130px;
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crystal-orb-center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A5B4FC;
  animation: pulseHalo 2.5s infinite ease-in-out;
}

.mist-swirl-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 180, 252, 0.15) 0%, transparent 70%);
}
.mist-swirl-layer.swirl-1 { animation: spinSlow 8s linear infinite; }
.mist-swirl-layer.swirl-2 { animation: spinSlow 12s linear infinite reverse; }

.mist-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.4rem;
  color: #A5B4FC;
  letter-spacing: 3px;
  margin: 10px 0;
}

.btn-actuator-orb {
  width: 65px; height: 65px;
  background: radial-gradient(circle at 35% 35%, #FFF, #A5B4FC, #4F46E5);
  border: 1.5px solid #EEF2FF;
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  margin-top: 15px;
  color: #1E1B4B;
}

/* 10. GOLDEN MIRROR (Espejo Veneciano Barroco) */
.baroque-mirror-chassis {
  width: 100%;
  max-width: 310px;
  height: clamp(280px, 66dvh, 390px);
  background: var(--gold-soft-gradient, linear-gradient(135deg, #1A1712, #0E0C09));
  border: 2px solid var(--gold-primary, #C5A059);
  border-radius: 160px;
  box-shadow: 0 35px 90px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mirror-beveled-glass {
  text-align: center;
  padding: 20px;
}

.mirror-engraved-title {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 3rem;
  color: var(--gold-light, #EEDAA2);
  letter-spacing: 3px;
}

.mirror-date-sub {
  font-size: 0.74rem;
  letter-spacing: 2px;
  color: var(--gold-primary, #C5A059);
  margin-top: 4px;
}

.btn-actuator-mirror {
  margin-top: 15px;
  width: 60px; height: 85px;
  background: linear-gradient(135deg, #FFF, #E5C07B);
  border: 1.5px solid #D4AF37;
  border-radius: 30px 30px 50px 50px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  color: #5C4010;
}

/* 11. ANTIQUE BOOK (Grimorio / Libro de Amor en Cuero) */
.antique-book-chassis {
  width: 100%;
  max-width: 310px;
  height: clamp(280px, 66dvh, 390px);
  background: linear-gradient(135deg, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid var(--gold-primary, #C5A059);
  border-radius: 4px 18px 18px 4px;
  box-shadow: 0 35px 95px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.book-spine-leather {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  background: var(--bg-card-alt, #080A0E);
  border-right: 1.5px solid var(--gold-primary, #C5A059);
}

.book-embossed-title {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.82rem;
  letter-spacing: 4px;
  color: var(--gold-primary, #C5A059);
  font-weight: 700;
}

.book-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.8rem;
  color: var(--gold-light, #EEDAA2);
  margin: 8px 0;
}

.btn-actuator-book-clasp {
  margin-top: 15px;
  width: 75px; height: 40px;
  background: #381A10;
  border: 1.5px solid #D4AF37;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  color: #D4AF37;
}

/* ==========================================================================
   EL LIBRO TIENE TAPA Y TIENE PÁGINAS (ritual `antique-book`)
   ==========================================================================
   La coreografía anterior giraba el libro ENTERO 135° y acababa en `blur(14px)`, y el
   motivo de fondo era estructural: `.book-cover-leather` no tenía ni una regla de estilo,
   así que no había ninguna tapa que abrir — sólo el fondo de la carrocería. «Abrir» no
   revelaba nada porque no había nada dentro.

   Aquí se le da lo que un libro tiene: una tapa de cuero que gira sobre el lomo y un
   cuadernillo de páginas detrás. `.libro-paginas` y `.libro-hoja` las crea el guion en
   tiempo de ejecución, así que su sitio en el orden de pintado lo fija este z-index:
   páginas por debajo de la tapa (3), y los mandos por encima de todo (6), o el broche y
   el aviso quedarían tapados por las hojas.
   ========================================================================== */
.book-cover-leather {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 24px;
  border-radius: 2px 16px 16px 2px;
  background: linear-gradient(135deg, #3A2418 0%, #2A1810 55%, #180E07 100%);
  border: 1.5px solid var(--gold-primary, #C5A059);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* El lomo está a la izquierda: la tapa gira desde ahí. */
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 3;
}

/* Esquinas metálicas: al abrirse reciben la luz, y eso se anima. */
.book-corner {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background: radial-gradient(circle at 35% 35%, #FFE5A3 0%, #D4AF37 58%, #8A6414 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

.book-corner.corner-tl { top: 7px; left: 7px; }
.book-corner.corner-tr { top: 7px; right: 7px; }
.book-corner.corner-bl { bottom: 7px; left: 7px; }
.book-corner.corner-br { bottom: 7px; right: 7px; }

/* El broche cuelga del canto de la tapa y gira sobre su propia bisagra. */
.book-metal-clasp {
  position: absolute;
  right: -15px;
  top: 50%;
  margin-top: -18px;
  width: 28px;
  height: 36px;
  border-radius: 3px 7px 7px 3px;
  background: linear-gradient(135deg, #FFE5A3 0%, #D4AF37 52%, #8A6414 100%);
  border: 1px solid #FFF2B2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A2418;
  transform-origin: left center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
}

/* El cuadernillo que aparece al abrir la tapa. */
.libro-paginas {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 26px;
  border-radius: 2px 14px 14px 2px;
  background: linear-gradient(100deg, #F3E7CE 0%, #FBF4E4 45%, #E8D9BC 100%);
  box-shadow: inset 0 0 22px rgba(120, 92, 50, 0.3);
  opacity: 0;
  z-index: 2;
}

/* Hojas sueltas: son las que abanican al abrirse, y lo que más lee como «libro». */
.libro-hoja {
  position: absolute;
  top: 18px;
  right: 17px;
  bottom: 18px;
  left: 27px;
  border-radius: 2px 12px 12px 2px;
  background: linear-gradient(96deg, #F8F0DD 0%, #FFFBF0 60%, #EADFC7 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform-origin: left center;
  backface-visibility: hidden;
  z-index: 2;
}

/* Los mandos por encima de las hojas. */
.antique-book-chassis > .btn-actuator-book-clasp,
.antique-book-chassis > .envelope-prompt {
  position: relative;
  z-index: 6;
}

/* 12. VINTAGE KEY (Cofre Victoriano & Llave de Oro) */
.victorian-lockbox-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 370px);
  background: linear-gradient(135deg, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid var(--gold-primary, #C5A059);
  border-radius: 18px;
  box-shadow: 0 35px 95px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.floating-key-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
  animation: pulseHalo 3s infinite ease-in-out;
}

.lockbox-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.6rem;
  color: var(--gold-light, #EEDAA2);
  margin: 10px 0;
}

.btn-actuator-key {
  width: 65px; height: 65px;
  background: radial-gradient(circle at 35% 35%, #2A1F30, #0E0810);
  border: 1.5px solid #D4AF37;
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  margin-top: 15px;
  color: #FFE5A3;
}

/* 13. CELESTIAL BURST (Astrolabio Cósmico & Supernova) */
.armillary-astrolabe-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 380px);
  background: radial-gradient(circle, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid var(--gold-primary, #C5A059);
  border-radius: 50%;
  box-shadow: 0 35px 95px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.astrolabe-3d-rings {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold-primary, #C5A059);
}
.orbit-ring.ring-x { inset: 0; animation: spinSlow 8s linear infinite; }
.orbit-ring.ring-y { inset: 15px; border-style: dashed; animation: spinSlow 12s linear infinite reverse; }
.orbit-ring.ring-z { inset: 30px; animation: spinSlow 6s linear infinite; }

.supernova-sun-core {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
  z-index: 2;
}

.celestial-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.4rem;
  color: var(--gold-light, #EEDAA2);
  margin: 10px 0;
}

.btn-actuator-sun {
  width: 65px; height: 65px;
  background: radial-gradient(circle at 35% 35%, var(--gold-light, #EEDAA2), var(--gold-primary, #C5A059));
  border: 1.5px dotted #FEF9C3;
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  margin-top: 15px;
  color: #3A2005;
}

/* 14. FEATHER FAN (Abanico Imperial de Plumas Gatsby) */
.gatsby-fan-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding-bottom: 20px;
}

.fan-plumes-array {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
  margin-bottom: 10px;
}

.fan-pivot-crest {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.4rem;
  color: var(--gold-light, #EEDAA2);
  margin-bottom: 10px;
}

.btn-actuator-fan {
  width: 80px; height: 45px;
  background: linear-gradient(180deg, var(--bg-card, #12151B), #065F46);
  border-radius: 40px 40px 0 0;
  border: 1.5px solid #34D399; border-bottom: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  margin-top: 10px;
  color: #A7F3D0;
}

/* 15. FRENCH GATEFOLD (Tríptico Francés con Faja) */
.french-gatefold-chassis {
  width: 100%;
  height: clamp(280px, 66dvh, 380px);
  background: var(--bg-card, #12151B);
  border: 1.5px solid var(--gold-primary, #C5A059);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 35px 95px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gatefold-doors-wrapper {
  position: absolute;
  inset: 0;
  perspective: 1000px;
}

.gatefold-leaf-3d {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, var(--bg-card-alt, #080A0E), var(--bg-card, #12151B));
  border: 1.5px solid var(--gold-primary, #C5A059);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
}
.gatefold-leaf-3d.leaf-left { left: 0; border-radius: 12px 0 0 12px; transform-origin: left center; }
.gatefold-leaf-3d.leaf-right { right: 0; border-radius: 0 12px 12px 0; transform-origin: right center; }

.gatefold-satin-bellyband {
  position: relative;
  z-index: 10;
  padding: 14px 28px;
  background: linear-gradient(90deg, #997531, #FFE5A3, #997531);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.8);
}

.bellyband-seal {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.2rem;
  color: #07090C;
}

.btn-actuator-gatefold {
  margin-top: 15px;
  width: 65px; height: 65px;
  background: linear-gradient(135deg, #FFF2B2, #C5A059);
  border: 1.5px solid #FFF8DB;
  border-radius: 12px;
  transform: rotate(45deg);
  box-shadow: 0 14px 32px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 15;
  color: #2E1A04;
}

.btn-actuator-gatefold svg {
  transform: rotate(-45deg);
}

/* 16. GOLD DUST VORTEX (Vórtice Alquímico de Oro) */
.alchemical-vortex-chassis {
  width: 100%;
  max-width: 440px;
  min-height: clamp(290px, 68dvh, 440px);
  height: clamp(290px, 68dvh, 440px);
  background: radial-gradient(circle, var(--bg-card, #12151B), var(--bg-card-alt, #080A0E));
  border: 1.5px solid var(--gold-light, #EEDAA2);
  border-radius: 50%;
  box-shadow: 0 35px 95px rgba(0,0,0,0.95);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px;
  box-sizing: border-box;
}

.vortex-rings-wrapper {
  width: 110px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vortex-runic-disk {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed var(--gold-light, #EEDAA2);
}
.vortex-runic-disk.disk-1 { inset: 0; animation: spinSlow 5s linear infinite; }
.vortex-runic-disk.disk-2 { inset: 16px; animation: spinSlow 3s linear infinite reverse; }

.vortex-eye-core {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #EEDAA2);
}

.vortex-monogram {
  font-family: var(--font-editorial, 'Bodoni Moda', serif);
  font-size: 2.2rem;
  color: var(--gold-light, #EEDAA2);
  margin: 6px 0;
}

.btn-actuator-vortex {
  width: auto;
  min-height: 44px;
  padding: 8px 24px;
  background: radial-gradient(circle at 35% 35%, #FFF, var(--gold-primary, #C5A059), #422006);
  border: 1.5px solid var(--gold-light, #EEDAA2);
  border-radius: 24px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  color: #1A0D02;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-actuator-vortex:hover {
  transform: scale(1.04);
  box-shadow: 0 18px 36px rgba(197, 160, 89, 0.4);
}

.btn-actuator-vortex .vortex-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.alchemical-vortex-chassis .envelope-prompt {
  margin-top: 10px;
  max-width: 280px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
  /* El oro claro de --gold-light sobre la tarjeta clara daba 4.21:1 y, en el valle del
     pulso, menos todavia. Esta regla vive despues del bloque de tinta de ceremonia, asi
     que si no se corrige aqui revierte aquella correccion. */
  color: var(--text-muted);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ==========================================================================
   SISTEMA DE ILUMINACIÓN FOTOREALISTA POR EMISIÓN FÍSICA (MIX-BLEND-MODE)
   Sustituye completamente box-shadow glows por conos y halos de luz fotónicos.
   ========================================================================== */
.envelope-classic-card::after,
.monumental-gates-chassis::after,
.opera-theatre-chassis::after,
.cyber-vault-chassis::after,
.botanical-pod-chassis::after,
.mist-portal-chassis::after,
.baroque-mirror-chassis::after,
.armillary-astrolabe-chassis::after,
.alchemical-vortex-chassis::after,
.french-gatefold-chassis::after,
.victorian-lockbox-chassis::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle at 50% 50%, rgba(238, 218, 162, 0.16) 0%, rgba(197, 160, 89, 0.04) 45%, transparent 70%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}

/* Micro-textura Film Grain Awwwards */
.envelope-classic-card::before,
.monumental-gates-chassis::before,
.opera-theatre-chassis::before,
.cyber-vault-chassis::before,
.botanical-pod-chassis::before,
.mist-portal-chassis::before,
.alchemical-vortex-chassis::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: -1;
  border-radius: inherit;
}