/* =========================================================
   Denoty · Custom styles
   Plataforma de invitaciones digitales inspirada en Greenvelope.
========================================================= */

[x-cloak] { display: none !important; }

html, body { scroll-behavior: smooth; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

/* ===== Premium mobile UX utilities ===== */

/* Touch target: elimina 300ms tap-delay, da feedback inmediato */
.tap-target {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(74, 44, 52, 0.08);
    user-select: none;
}

/* Scrollbar oculta para filas de chips/filtros horizontales */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Safe-area para flotantes (notch + home-indicator iOS) */
.wa-sticky {
    right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    box-shadow:
        0 18px 32px -10px rgba(37, 211, 102, .45),
        0 8px 16px -6px rgba(74, 44, 52, .25);
}
@media (min-width: 640px) {
    .wa-sticky {
        right: calc(1.5rem + env(safe-area-inset-right));
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}

/* Hero video: aparece suavemente cuando ya está reproduciendo */
.hero-poster { transition: opacity .6s ease; }
.hero-video { transition: opacity .8s ease; }
.hero-video--ready { opacity: 1 !important; }
.hero-video--ready ~ .hero-poster,
.hero-poster:has(+ .hero-video.hero-video--ready) { opacity: 0; }

/* Balanced text para titulares (mejor wrapping de h1/h2 en mobile) */
.text-balance { text-wrap: balance; }

/* Mobile-only spacing helpers */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pl-safe { padding-left: env(safe-area-inset-left); }
.pr-safe { padding-right: env(safe-area-inset-right); }

/* Anchor offset: secciones con navegación fija (h-16 mobile / h-20 desktop) */
section[id], div[id] { scroll-margin-top: 5rem; }
@media (min-width: 1024px) {
    section[id], div[id] { scroll-margin-top: 6rem; }
}

/* Inputs / textareas en iOS: evitan zoom forzado al enfocar */
input, select, textarea {
    font-size: 16px;
}

/* Loading states más suaves para imágenes lazy */
img[loading="lazy"] {
    background-color: #f6f0e6;
}

/* Mejora overall del feel app: bordes redondeados + shadows pulidas en mobile */
@media (max-width: 640px) {
    .rounded-3xl { border-radius: 1.25rem; }
    .shadow-card { box-shadow: 0 12px 28px -16px rgba(74, 44, 52, .22); }
}

::-webkit-scrollbar             { width: 10px; height: 10px; }
::-webkit-scrollbar-track       { background: #f6f0e6; }
::-webkit-scrollbar-thumb       { background: #e8b194; border-radius: 999px; border: 2px solid #f6f0e6; }
::-webkit-scrollbar-thumb:hover { background: #cf9382; }

::selection { background: #cf9382; color: #fff; }

/* Reveal-on-scroll */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

img { transition: transform .7s ease; }

details > summary { list-style: none; outline: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary::after { content: "−"; }
details > summary::after { content: "+"; float: right; color: #cf9382; font-weight: 300; }

h1, h2, h3, h4 { letter-spacing: -0.015em; }

/* Sobre 3D: aseguramos perspectiva para la animación del flap */
.envelope-3d { perspective: 1500px; }

/* Floating elements suaves */
.float-soft { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Hover ring suave para botones primarios */
.btn-primary {
    position: relative;
}
.btn-primary::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 1px solid rgba(207, 147, 130, .25);
    opacity: 0;
    transition: opacity .3s ease;
}
.btn-primary:hover::after { opacity: 1; }

/* Cards: borde dorado sutil al pasar */
.card-gold {
    transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.card-gold:hover {
    border-color: #e6bea7;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    h1, h2 { letter-spacing: -0.02em; }
}

/* Alpine x-collapse fallback (por si no se carga el plugin) */
[x-collapse] { overflow: hidden; }

/* =========================================================
   HERO · Maison Denoty — Editorial premium
========================================================= */

/* Cinematic ken-burns drift on background video */
.hero-kenburns {
    animation: heroKenburns 24s ease-in-out infinite alternate;
    transform-origin: 50% 45%;
    filter: saturate(.82) contrast(1.02) brightness(1.02);
    will-change: transform;
}
@keyframes heroKenburns {
    0%   { transform: scale(1.08) translate3d(0, 0, 0); }
    100% { transform: scale(1.18) translate3d(-1.5%, -1%, 0); }
}

/* Soft radial vignette to focus the center type */
.hero-vignette {
    background:
        radial-gradient(ellipse at 50% 38%, rgba(253, 250, 246, 0) 0%, rgba(253, 250, 246, .35) 55%, rgba(74, 44, 52, .18) 100%);
}

/* Sequenced fade-up; each element gets its own --d delay */
.hero-stagger {
    opacity: 0;
    transform: translateY(22px);
    animation: heroFadeUp 1.1s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes heroFadeUp {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Scroll-cue: a hairline that travels down infinitely */
.hero-scroll-line > span {
    animation: heroScroll 2.6s cubic-bezier(.65, .05, .36, 1) infinite;
}
@keyframes heroScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(300%); }
}

/* Premium CTA: shadow + soft ring on hover */
.hero-cta {
    box-shadow: 0 22px 50px -25px rgba(74, 44, 52, .55), 0 2px 6px -2px rgba(74, 44, 52, .15);
}
.hero-cta::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 1px solid rgba(207, 147, 130, .35);
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
    transform: scale(.985);
}
.hero-cta:hover::after { opacity: 1; transform: scale(1); }

/* Secondary link: dual underline that swaps on hover (Vogue feel) */
.hero-link::before,
.hero-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    transition: transform .55s cubic-bezier(.65, .05, .36, 1);
}
.hero-link::before { background: rgba(207, 147, 130, .55); transform: scaleX(1); transform-origin: left; }
.hero-link::after  { background: #cf9382; transform: scaleX(0); transform-origin: right; }
.hero-link:hover::before { transform: scaleX(0); transform-origin: right; }
.hero-link:hover::after  { transform: scaleX(1); transform-origin: left; }

/* Mobile: tighten heading + breathing room around corner markers */
@media (max-width: 640px) {
    .hero-premium h1 { line-height: .94; }
}

/* Accessibility: respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .hero-kenburns,
    .hero-scroll-line > span { animation: none !important; }
    .hero-stagger {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   HERO · LA MAISON — Luxury editorial sin video
   atmósfera de perfume + tipografía editorial + microinteracción
========================================================= */

:root {
    --luxe-ink:        #f5ecdf;
    --luxe-ink-soft:   #ede0cd;
    --luxe-ivory:      #4a2c34;
    --luxe-ivory-90:   rgba(74,44,52,.92);
    --luxe-ivory-60:   rgba(74,44,52,.6);
    --luxe-ivory-30:   rgba(74,44,52,.3);
    --luxe-gold:       #b97a52;
    --luxe-gold-light: #d29f86;
    --luxe-burgundy:   #8a4f5a;
    --luxe-rose:       #e6bea7;
    --luxe-ease:       cubic-bezier(.22,.61,.36,1);
    --luxe-ease-soft:  cubic-bezier(.5,.05,.4,1);
}

.hero-luxe {
    isolation: isolate;                   /* atrapa los -z-* dentro del hero */
    background: #1a0e10;                  /* paleta oscura por defecto:
                                             evita el flash de texto oscuro
                                             sobre crema antes de que cargue
                                             el video. */
    color: var(--luxe-ivory);
    --luxe-ivory:      #fdfaf6;
    --luxe-ivory-90:   rgba(253,250,246,.92);
    --luxe-ivory-60:   rgba(253,250,246,.62);
    --luxe-ivory-30:   rgba(253,250,246,.32);
    --luxe-gold:       #c9a886;
    --luxe-gold-light: #f4dccd;
    --luxe-burgundy:   #c9a886;
    --luxe-rose:       #cf9382;
}

/* Overrides puntuales: reglas que usan hex directos */
/* Estilos fijos sobre paleta oscura (antes condicionales a .has-video).
   Se aplican siempre porque el hero ahora arranca en oscuro de fábrica. */
.hero-luxe .luxe-line--gold {
    background: linear-gradient(100deg, #e6bea7 0%, #c9a886 38%, #fff7ed 50%, #c9a886 62%, #e6bea7 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e6bea7;
}

.hero-luxe .luxe-sigil-ring   { stroke: rgba(244,220,205,.55); }
.hero-luxe .luxe-sigil-ring2  { stroke: rgba(244,220,205,.25); }
.hero-luxe .luxe-sigil-letter { fill: #f4dccd; }

.hero-luxe .luxe-cta::before {
    background: linear-gradient(180deg, rgba(244,220,205,.08), rgba(244,220,205,0));
}

.hero-luxe .luxe-cursor {
    background: #f4dccd;
    box-shadow: 0 0 18px 2px rgba(244,220,205,.45);
}
.hero-luxe .luxe-cursor.is-hovering {
    background: transparent;
    border-color: #f4dccd;
}

/* Music toggle en dark glass */
.hero-luxe .luxe-music {
    background: rgba(15,9,12,.55);
    color: #fdfaf6;
    border-color: rgba(244,220,205,.18);
}
.hero-luxe .luxe-music:hover {
    background: rgba(201,168,134,.18);
    color: #f4dccd;
    border-color: rgba(244,220,205,.5);
}
.hero-luxe .luxe-music-ring { border-color: rgba(244,220,205,.4); }

/* Letterbox en ébano */
.hero-luxe .luxe-letter {
    background: #050203;
}

/* Marble/grain atenuados; el grano en overlay (mejor sobre imagen) */
.hero-luxe .luxe-grain {
    mix-blend-mode: overlay;
    opacity: .07;
}

/* ===== 0. VIDEO LAYER ===== */
.hero-cine__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;          /* favorece composición editorial */
    z-index: 2;
    opacity: 1;
    filter: saturate(.88) contrast(1.04) brightness(.96);
    animation: heroCineDrift 50s ease-in-out infinite alternate;
    transform-origin: 50% 45%;
    will-change: transform;
}
.hero-cine__video.is-ready { opacity: 1; }

@keyframes heroCineDrift {
    0%   { transform: scale(1.04); }
    100% { transform: scale(1.12); }
}

/* Wash cálido que mantiene legibilidad del título sobre el video.
   Top casi transparente (el video respira). Bottom con peso para legibilidad. */
.hero-cine__wash {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(12,7,9,.00)  0%,
            rgba(12,7,9,.22) 32%,
            rgba(12,7,9,.55) 62%,
            rgba(12,7,9,.82) 88%,
            rgba(12,7,9,.92) 100%),
        radial-gradient(70% 55% at 50% 68%,
            rgba(8,4,6,.55) 0%,
            rgba(8,4,6,.25) 50%,
            rgba(8,4,6,0)   80%);
    opacity: 1;                              /* siempre visible:
                                                refuerza la legibilidad
                                                incluso mientras el video carga */
    transition: opacity 1.2s var(--luxe-ease);
}

/* Capas decorativas atenuadas por defecto — el video manda la atmósfera */
.hero-luxe .luxe-orbs   { opacity: .42; }
.hero-luxe .luxe-marble { opacity: .18; }
.hero-luxe .luxe-beam   { display: none; }

/* ===== 1. ORBES DE GRADIENTE — drift muy lento (multiply sobre cream) ===== */
.luxe-orbs { overflow: hidden; }
.luxe-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    will-change: transform, opacity;
    mix-blend-mode: multiply;
}
.luxe-orb--burgundy {
    width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(circle, rgba(138,79,90,.50), rgba(138,79,90,0) 65%);
    top: -10%; left: -15%;
    animation: luxeOrbA 90s ease-in-out infinite alternate, luxeOrbFade 2.4s ease-out .4s forwards;
}
.luxe-orb--champagne {
    width: 55vw; height: 55vw; max-width: 800px; max-height: 800px;
    background: radial-gradient(circle, rgba(185,122,82,.35), rgba(185,122,82,0) 65%);
    bottom: -20%; right: -10%;
    animation: luxeOrbB 110s ease-in-out infinite alternate, luxeOrbFade 2.6s ease-out .6s forwards;
}
.luxe-orb--rose {
    width: 45vw; height: 45vw; max-width: 700px; max-height: 700px;
    background: radial-gradient(circle, rgba(207,147,130,.40), rgba(207,147,130,0) 65%);
    top: 30%; right: 20%;
    animation: luxeOrbC 130s ease-in-out infinite alternate, luxeOrbFade 2.8s ease-out .8s forwards;
}
@keyframes luxeOrbFade { to { opacity: 1; } }
@keyframes luxeOrbA {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(12%, 8%, 0) scale(1.15); }
}
@keyframes luxeOrbB {
    0%   { transform: translate3d(0,0,0) scale(1.05); }
    100% { transform: translate3d(-15%, -6%, 0) scale(.95); }
}
@keyframes luxeOrbC {
    0%   { transform: translate3d(0,0,0) scale(.9); }
    100% { transform: translate3d(-8%, 12%, 0) scale(1.1); }
}

/* ===== 2. MARBLE / SILK — textura editorial (multiply sobre cream) ===== */
.luxe-marble {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4'/><feDisplacementMap in='SourceGraphic' scale='40'/></filter><rect width='100%25' height='100%25' filter='url(%23m)' fill='%23b97a52' opacity='.10'/></svg>");
    background-size: 1200px 1200px;
    opacity: .55;
    mix-blend-mode: multiply;
    animation: luxeMarbleDrift 80s linear infinite;
    will-change: transform;
}
@keyframes luxeMarbleDrift {
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    100% { transform: translate3d(-6%, -4%, 0) rotate(.5deg); }
}

/* ===== 3. POLVO DORADO — 12 partículas ===== */
.luxe-dust > span {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185,122,82,.85) 0%, rgba(185,122,82,0) 70%);
    opacity: 0;
    mix-blend-mode: multiply;
    will-change: transform, opacity;
}
.luxe-dust > span:nth-child(1)  { left: 8%;  top: 78%; animation: luxeDust 22s linear  3.6s infinite; }
.luxe-dust > span:nth-child(2)  { left:18%;  top: 92%; animation: luxeDust 26s linear  4.2s infinite; width: 3px; height: 3px; }
.luxe-dust > span:nth-child(3)  { left:27%;  top: 70%; animation: luxeDust 19s linear  4.8s infinite; }
.luxe-dust > span:nth-child(4)  { left:38%;  top: 88%; animation: luxeDust 28s linear  5.4s infinite; width: 3px; height: 3px; }
.luxe-dust > span:nth-child(5)  { left:48%;  top: 95%; animation: luxeDust 24s linear  6.0s infinite; }
.luxe-dust > span:nth-child(6)  { left:58%;  top: 72%; animation: luxeDust 21s linear  3.9s infinite; }
.luxe-dust > span:nth-child(7)  { left:67%;  top: 90%; animation: luxeDust 27s linear  4.5s infinite; width: 3px; height: 3px; }
.luxe-dust > span:nth-child(8)  { left:74%;  top: 80%; animation: luxeDust 23s linear  5.1s infinite; }
.luxe-dust > span:nth-child(9)  { left:82%;  top: 94%; animation: luxeDust 29s linear  5.7s infinite; }
.luxe-dust > span:nth-child(10) { left:90%;  top: 76%; animation: luxeDust 20s linear  6.3s infinite; width: 3px; height: 3px; }
.luxe-dust > span:nth-child(11) { left:14%;  top: 96%; animation: luxeDust 25s linear  4.0s infinite; }
.luxe-dust > span:nth-child(12) { left:60%;  top: 98%; animation: luxeDust 30s linear  5.5s infinite; width: 3px; height: 3px; }
@keyframes luxeDust {
    0%   { transform: translate3d(0, 0, 0)      scale(.7);  opacity: 0; }
    12%  { opacity: .9; }
    50%  { transform: translate3d(-30px, -55vh, 0) scale(1); opacity: .7; }
    88%  { opacity: .35; }
    100% { transform: translate3d(40px, -110vh, 0) scale(.5); opacity: 0; }
}

/* ===== 4. HAZ DE LUZ — cruza cada ~16s (sombra champagne sobre cream) ===== */
.luxe-beam {
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -50%;
    width: 60vw;
    background: linear-gradient(110deg,
        transparent 38%,
        rgba(185,122,82,.10) 49%,
        rgba(138,79,90,.18)  50%,
        rgba(185,122,82,.10) 51%,
        transparent 62%);
    filter: blur(28px);
    mix-blend-mode: multiply;
    opacity: 0;
    animation: luxeBeam 16s var(--luxe-ease-soft) 5.5s infinite;
    pointer-events: none;
}
@keyframes luxeBeam {
    0%   { transform: translateX(0) skewX(-14deg);   opacity: 0; }
    18%  { opacity: .85; }
    55%  { opacity: .35; }
    100% { transform: translateX(220vw) skewX(-14deg); opacity: 0; }
}

/* ===== 5. VIÑETA + GRANO (calidez en los bordes, no oscuridad) ===== */
.luxe-vignette {
    z-index: 2;
    background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(138,79,90,.10) 72%, rgba(138,79,90,.22) 100%);
}
.luxe-grain {
    z-index: 3;
    opacity: .06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    animation: luxeGrainShift 1.6s steps(4) infinite;
}
@keyframes luxeGrainShift {
    0%   { transform: translate3d(0,0,0); }
    25%  { transform: translate3d(-4%, 2%, 0); }
    50%  { transform: translate3d(3%, -3%, 0); }
    75%  { transform: translate3d(-2%, 4%, 0); }
    100% { transform: translate3d(0,0,0); }
}

/* ===== 6. LETTERBOX — 1.8vh, banda parchment editorial ===== */
.luxe-letter {
    position: absolute;
    left: 0; right: 0;
    height: 1.8vh;
    max-height: 22px;
    background: linear-gradient(180deg, #d9bf99, #c9a779);
    z-index: 4;
    pointer-events: none;
}
.luxe-letter--t { top: 0;    transform: translateY(-100%); animation: luxeLetT 1.4s var(--luxe-ease) .2s both; }
.luxe-letter--b { bottom: 0; transform: translateY( 100%); animation: luxeLetB 1.4s var(--luxe-ease) .2s both; }
@keyframes luxeLetT { to { transform: translateY(0); } }
@keyframes luxeLetB { to { transform: translateY(0); } }

/* ===== 7. ESQUINAS TIPOGRÁFICAS (Vogue marks) ===== */
.luxe-mark {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 9px;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--luxe-ivory-60);
    opacity: 0;
    animation: luxeMarkIn 1.1s var(--luxe-ease) .45s forwards;
}
.luxe-mark-rule {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--luxe-ivory-30);
}
.luxe-mark--tl { top: calc(env(safe-area-inset-top,0px) + 5rem); left: 1.5rem; }
.luxe-mark--tr { top: calc(env(safe-area-inset-top,0px) + 5rem); right: 1.5rem; animation-delay: .55s; }
.luxe-mark--bl { bottom: 1.6rem; left: 1.5rem; animation-delay: .7s; }
.luxe-mark--br { bottom: 1.6rem; right: 1.5rem; animation-delay: .8s; }
@keyframes luxeMarkIn {
    0%   { opacity: 0; letter-spacing: .7em; transform: translateY(4px); }
    100% { opacity: 1; letter-spacing: .5em; transform: translateY(0);   }
}
@media (min-width: 1024px) {
    .luxe-mark { font-size: 10px; letter-spacing: .55em; }
    .luxe-mark--tl { top: calc(env(safe-area-inset-top,0px) + 6rem); left: 2.5rem; }
    .luxe-mark--tr { top: calc(env(safe-area-inset-top,0px) + 6rem); right: 2.5rem; }
    .luxe-mark--bl { bottom: 2rem; left: 2.5rem; }
    .luxe-mark--br { bottom: 2rem; right: 2.5rem; }
}

/* ===== 8. SIGILO MONOGRAMA — draws on entry ===== */
.luxe-sigil {
    width: 56px;
    height: 56px;
    margin: 0 auto 2.25rem;
    opacity: 0;
    animation: luxeSigilFade 1.2s var(--luxe-ease) .7s forwards;
}
@media (min-width: 1024px) { .luxe-sigil { width: 72px; height: 72px; margin-bottom: 2.75rem; } }
.luxe-sigil svg { width: 100%; height: 100%; overflow: visible; }
.luxe-sigil-ring,
.luxe-sigil-ring2 {
    stroke: rgba(138,79,90,.55) !important;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transform-origin: center;
    transform: rotate(-90deg);
    animation: luxeSigilDraw 1.6s var(--luxe-ease) .8s forwards;
}
.luxe-sigil-ring2 { stroke: rgba(185,122,82,.32) !important; animation-delay: 1.05s; animation-duration: 1.4s; }
.luxe-sigil-letter {
    fill: var(--luxe-burgundy) !important;
    opacity: 0;
    transform-origin: 50% 50%;
    animation: luxeSigilLetter 1.0s var(--luxe-ease) 1.45s forwards;
}
@keyframes luxeSigilFade { to { opacity: 1; } }
@keyframes luxeSigilDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes luxeSigilLetter {
    0%   { opacity: 0; transform: scale(.7); }
    100% { opacity: 1; transform: scale(1);  }
}

/* ===== 9. EYEBROW ===== */
.luxe-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 10px;
    letter-spacing: .55em;
    text-transform: uppercase;
    color: var(--luxe-gold);
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
    opacity: 0;
    animation: luxeFadeUp 1s var(--luxe-ease) .35s forwards;
}
.luxe-eyebrow-rule {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--luxe-gold), transparent);
}
@media (min-width: 1024px) {
    .luxe-eyebrow { font-size: 11px; margin-bottom: 1.75rem; }
    .luxe-eyebrow-rule { width: 48px; }
}

/* ===== STAGE — composición ligeramente bajo el centro
   reposa sobre la franja más oscura del wash del video (legibilidad inmediata) ===== */
.hero-luxe-stage {
    position: relative;
    margin-top: 6vh;
    padding: clamp(1.25rem, 4vh, 3rem) clamp(.5rem, 2vw, 1.25rem) clamp(1.25rem, 4vh, 3rem);
}
.hero-luxe-stage::before {
    content: '';
    position: absolute;
    inset: -4% -8% -4% -8%;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 50% 55%,
            rgba(6,3,5,.55) 0%,
            rgba(6,3,5,.28) 42%,
            rgba(6,3,5,0)   78%);
    pointer-events: none;
    opacity: 1;                              /* siempre activo: refuerza
                                                el contraste del texto
                                                desde el primer instante */
}
@media (min-width: 1024px) {
    .hero-luxe-stage { margin-top: 9vh; }
}
@media (max-width: 639px) {
    .hero-luxe-stage { margin-top: 8vh; }
    .hero-luxe-stage::before { inset: -2% -4% -2% -4%; }
}

/* ===== LEAD — declaración visible y rápida (debe leerse en <2s) ===== */
.luxe-lead {
    display: block;
    max-width: 22ch;
    margin: 0 auto;
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(1.65rem, 4.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: var(--luxe-ivory);
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
    opacity: 0;
    animation: luxeLeadIn 1s var(--luxe-ease) .55s forwards;
}
.luxe-lead-p1,
.luxe-lead-p2 {
    display: block;
}
.luxe-lead-p2 {
    font-style: italic;
    color: var(--luxe-gold-light);
    background: linear-gradient(100deg, #f4dccd 0%, #e6bea7 38%, #fff7ed 50%, #e6bea7 62%, #f4dccd 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: luxeGoldShine 7s var(--luxe-ease-soft) 2.8s infinite;
}
@keyframes luxeLeadIn {
    0%   { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ===== 10. TÍTULO EDITORIAL — palabra a palabra ===== */
.luxe-title {
    color: var(--luxe-ivory);
    line-height: .94;
    letter-spacing: -0.025em;
    font-size: clamp(2.6rem, 12.5vw, 8rem);
    text-wrap: balance;
}
.luxe-line {
    display: block;
    overflow: hidden;
    padding: 0 .04em;
}
.luxe-line--gold {
    font-style: italic;
    background: linear-gradient(100deg, #8a4f5a 0%, #b97a52 38%, #6f3f47 50%, #b97a52 62%, #8a4f5a 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8a4f5a;
    animation: luxeGoldShine 6s var(--luxe-ease-soft) 4s infinite;
}
.luxe-word {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform, opacity;
    animation: luxeWordRise 1.05s var(--luxe-ease) forwards;
    animation-delay: calc(1.45s + var(--w, 0) * 110ms);
}
.luxe-line--gold .luxe-word {
    animation-delay: calc(2.10s + (var(--w, 0) - 2) * 110ms);
}
.luxe-word + .luxe-word { margin-left: .26em; }
@keyframes luxeWordRise {
    0%   { transform: translateY(110%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@keyframes luxeGoldShine {
    0%   { background-position: 100% 0; }
    55%  { background-position: -20% 0; }
    100% { background-position: -20% 0; }
}

/* ===== 11. HAIRLINE dorada que se dibuja ===== */
.luxe-rule {
    display: block;
    width: 80px;
    height: 1px;
    margin: 1.6rem auto 1.4rem;
    background: linear-gradient(90deg, transparent, var(--luxe-gold), transparent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    animation: luxeRule 1.1s var(--luxe-ease) 1.45s forwards;
}
@keyframes luxeRule {
    0%   { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

/* ===== 12. SUBTÍTULO ===== */
.luxe-sub {
    max-width: 48ch;
    margin: 0 auto;
    color: var(--luxe-ivory-90);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
    opacity: 0;
    filter: blur(6px);
    animation: luxeSubIn 1.1s var(--luxe-ease) 1.05s forwards;
}
@keyframes luxeSubIn {
    0%   { opacity: 0; filter: blur(6px); transform: translateY(8px); }
    100% { opacity: 1; filter: blur(0);   transform: translateY(0);   }
}

/* ===== 13. CTAs ===== */
.luxe-ctas {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    opacity: 0;
    animation: luxeFadeUp 1s var(--luxe-ease) 1.7s forwards;
}

/* Variante "floor": anclado al pie del hero, a la misma línea base
   que las marcas de esquina (.luxe-mark--bl / --br) */
.luxe-ctas--floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.6rem;
    z-index: 6;
    margin-top: 0;
    padding: 0 1.5rem;
    pointer-events: none;            /* el contenedor no captura clics — */
}
.luxe-ctas--floor > * { pointer-events: auto; }   /* pero los CTAs sí */
@media (min-width: 1024px) {
    .luxe-ctas--floor { bottom: 2rem; padding: 0 2.5rem; }
}
@media (max-width: 639px) {
    /* En móvil ocultamos las marcas inferiores; el CTA queda solo y centrado */
    .luxe-ctas--floor { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 640px) {
    .luxe-ctas { flex-direction: row; gap: 2rem; margin-top: 3rem; }
}
@keyframes luxeFadeUp {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* CTA primario — ghost editorial con borde que se dibuja en hover */
.luxe-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 2rem;
    min-height: 56px;
    color: var(--luxe-ivory);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-weight: 500;
    background: transparent;
    transition: color .5s ease, letter-spacing .6s var(--luxe-ease), transform .5s var(--luxe-ease);
    isolation: isolate;
    overflow: hidden;
}
.luxe-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(138,79,90,.06), rgba(138,79,90,0));
    opacity: 0;
    transition: opacity .5s ease;
    z-index: -1;
}
.luxe-cta:hover {
    color: var(--luxe-burgundy);
    letter-spacing: .4em;
    transform: translateY(-2px);
}
.luxe-cta:hover::before { opacity: 1; }

/* Frame: 4 aristas que se dibujan secuencialmente */
.luxe-cta-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.luxe-cta-edge {
    position: absolute;
    background: var(--luxe-gold);
    transition: transform .55s var(--luxe-ease);
}
.luxe-cta-edge--t { top: 0;    left: 0; right: 0; height: 1px; transform: scaleX(1); transform-origin: left;   }
.luxe-cta-edge--r { top: 0;    right: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top;    }
.luxe-cta-edge--b { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: right;  }
.luxe-cta-edge--l { top: 0;    left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: bottom; }

/* Estado base: solo borde superior visible (look editorial) */
/* En hover: dibujan en secuencia clockwise */
.luxe-cta:hover .luxe-cta-edge--r { transform: scaleY(1); transition-delay: .05s; }
.luxe-cta:hover .luxe-cta-edge--b { transform: scaleX(1); transition-delay: .15s; transform-origin: left; }
.luxe-cta:hover .luxe-cta-edge--l { transform: scaleY(1); transition-delay: .25s; transform-origin: top; }

.luxe-cta-arrow { width: 22px; height: 11px; color: var(--luxe-gold); transition: transform .5s var(--luxe-ease); }
.luxe-cta:hover .luxe-cta-arrow { transform: translateX(4px); }

/* CTA secundario — fantasma con doble underline tipo Vogue */
.luxe-ghost {
    position: relative;
    padding: .5rem .25rem .85rem;
    color: var(--luxe-ivory-90);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    transition: color .4s ease;
}
.luxe-ghost::before,
.luxe-ghost::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    transition: transform .6s var(--luxe-ease);
}
.luxe-ghost::before { background: var(--luxe-ivory-30); transform: scaleX(1); transform-origin: left;  }
.luxe-ghost::after  { background: var(--luxe-gold);     transform: scaleX(0); transform-origin: right; }
.luxe-ghost:hover         { color: var(--luxe-gold-light); }
.luxe-ghost:hover::before { transform: scaleX(0); transform-origin: right; }
.luxe-ghost:hover::after  { transform: scaleX(1); transform-origin: left;  }

/* ===== 14. SCROLL CUE ===== */
.luxe-scroll {
    position: absolute;
    bottom: calc(1.6rem + 1.8vh);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    color: var(--luxe-ivory-60);
    text-decoration: none;
    opacity: 0;
    animation: luxeFadeUp 1.2s var(--luxe-ease) 3.8s forwards;
    z-index: 6;
    transition: color .4s ease;
}
.luxe-scroll:hover { color: var(--luxe-gold-light); }
.luxe-scroll-label {
    font-size: 9px;
    letter-spacing: .5em;
    text-transform: uppercase;
}
.luxe-scroll-line {
    display: block;
    width: 1px;
    height: 48px;
    background: var(--luxe-ivory-30);
    position: relative;
    overflow: hidden;
}
.luxe-scroll-line > span {
    position: absolute;
    left: 0; right: 0;
    top: -50%;
    height: 50%;
    background: var(--luxe-gold);
    animation: luxeScroll 2.8s var(--luxe-ease-soft) infinite;
}
@keyframes luxeScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(300%); }
}

/* ===== 15. MUSIC BTN — warm glass minimal (cream theme) ===== */
.luxe-music {
    position: absolute;
    right: calc(1.25rem + env(safe-area-inset-right));
    bottom: calc(1.25rem + env(safe-area-inset-bottom) + 1.8vh);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,247,233,.55);
    color: var(--luxe-burgundy);
    border: 1px solid rgba(138,79,90,.22);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    cursor: pointer;
    opacity: 0;
    animation: luxeFadeUp 1.4s var(--luxe-ease) 3.6s forwards;
    transition: background .35s ease, border-color .35s ease, transform .35s ease, color .35s ease;
    touch-action: manipulation;
}
.luxe-music:hover {
    background: rgba(185,122,82,.18);
    border-color: rgba(138,79,90,.45);
    color: #4a2c34;
    transform: translateY(-2px);
}
.luxe-music[aria-pressed="true"] {
    background: rgba(185,122,82,.28);
    border-color: rgba(138,79,90,.6);
    color: #4a2c34;
}
.luxe-music-icon { display: inline-flex; align-items: center; justify-content: center; }
.luxe-music-svg  { width: 16px; height: 16px; }
.luxe-music-svg--on { display: none; }
.luxe-music[aria-pressed="true"] .luxe-music-svg--off { display: none; }
.luxe-music[aria-pressed="true"] .luxe-music-svg--on  { display: inline-block; }
.luxe-music-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(138,79,90,.45);
    opacity: 0;
    pointer-events: none;
}
.luxe-music[aria-pressed="true"] .luxe-music-ring {
    opacity: 1;
    animation: luxeMusicPulse 2.4s ease-out infinite;
}
@keyframes luxeMusicPulse {
    0%   { transform: scale(1);    opacity: .6; }
    100% { transform: scale(1.32); opacity: 0;  }
}

/* ===== 16. CURSOR FOLLOWER (desktop) — burgundy sobre cream ===== */
.luxe-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--luxe-burgundy);
    box-shadow: 0 0 18px 2px rgba(185,122,82,.38);
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity .4s ease, width .3s ease, height .3s ease;
}
.luxe-cursor.is-active { opacity: .85; }
.luxe-cursor.is-hovering {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--luxe-burgundy);
    box-shadow: none;
}
@media (hover: none), (max-width: 1023px) {
    .luxe-cursor { display: none; }
}

/* ===== 17. MOBILE — simplificar capas pesadas ===== */
@media (max-width: 640px) {
    .luxe-orb--rose             { display: none; }
    .luxe-marble                { opacity: .22; }
    .luxe-dust > span:nth-child(n+7) { display: none; }
    .luxe-beam                  { display: none; }
    .luxe-letter                { height: 1.2vh; }
    .luxe-mark--tl,
    .luxe-mark--tr              { font-size: 8px; letter-spacing: .4em; }
    .luxe-mark--bl,
    .luxe-mark--br              { display: none; }
    .luxe-sigil                 { margin-bottom: 1.5rem; }
    .luxe-rule                  { margin: 1.5rem auto 1.25rem; }
    .luxe-sub                   { max-width: 28ch; }
    .luxe-music                 { width: 40px; height: 40px; }
    .luxe-scroll                { bottom: calc(1rem + 1.2vh); }
}

/* ===== 18. PRINT ===== */
@media print {
    .luxe-orbs, .luxe-marble, .luxe-dust, .luxe-light,
    .luxe-vignette, .luxe-grain, .luxe-letter,
    .luxe-music, .luxe-cursor, .luxe-scroll { display: none !important; }
    .luxe-word { transform: none !important; opacity: 1 !important; }
}

/* ===== 19. REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .luxe-orb, .luxe-marble, .luxe-dust > span, .luxe-beam,
    .luxe-grain, .luxe-letter, .luxe-mark, .luxe-eyebrow,
    .luxe-word, .luxe-rule, .luxe-sub, .luxe-ctas,
    .luxe-scroll, .luxe-music, .luxe-sigil,
    .luxe-sigil-ring, .luxe-sigil-ring2, .luxe-sigil-letter,
    .luxe-lead, .luxe-lead-p2,
    .luxe-line--gold { animation: none !important; }
    .luxe-orb { opacity: 1; }
    .luxe-letter--t, .luxe-letter--b { transform: translateY(0); }
    .luxe-mark, .luxe-eyebrow, .luxe-sub, .luxe-ctas, .luxe-scroll, .luxe-music, .luxe-sigil, .luxe-lead { opacity: 1; transform: none; filter: none; }
    .luxe-word { transform: none; opacity: 1; }
    .luxe-sigil-ring, .luxe-sigil-ring2 { stroke-dashoffset: 0; }
    .luxe-sigil-letter { opacity: 1; transform: none; }
    .luxe-rule { transform: scaleX(1); opacity: 1; }
    .luxe-line--gold {
        background: none;
        -webkit-text-fill-color: #8a4f5a;
        color: #8a4f5a;
    }
}

/* ===== 20. ZOMBIE STYLES — bloque legacy del hero cinematic anterior ===== */
.hero-cinematic {
    background:
        radial-gradient(120% 80% at 50% 35%, rgba(74,44,52,.55) 0%, rgba(13,7,9,.92) 70%, #0a0507 100%),
        #0a0507;
}

/* Slow ken-burns: 60s de respiración cinematográfica */
.hero-kenburns-slow {
    animation: heroKenburnsSlow 60s ease-in-out infinite alternate;
    transform-origin: 50% 45%;
    filter: saturate(.78) contrast(1.04) brightness(.88);
    will-change: transform, filter;
}
@keyframes heroKenburnsSlow {
    0%   { transform: scale(1.08) translate3d(0, 0, 0); }
    100% { transform: scale(1.22) translate3d(-2%, -1.5%, 0); }
}

/* Wash cinematográfico oscuro: deja respirar el video con vela suave */
.hero-cine-wash {
    background:
        linear-gradient(180deg, rgba(10,5,7,.65) 0%, rgba(10,5,7,.25) 35%, rgba(10,5,7,.55) 75%, rgba(10,5,7,.85) 100%);
}

/* Viñeta editorial — funde los bordes en negro/borgoña */
.hero-cine-vignette {
    background:
        radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(10,5,7,.35) 70%, rgba(10,5,7,.85) 100%);
}

/* Letterbox bars — entran lentamente, look cine 2.39:1 */
.hero-letterbox {
    position: absolute;
    left: 0; right: 0;
    height: 6vh;
    max-height: 64px;
    background: #050203;
    z-index: 4;
    transform-origin: center;
    animation: heroLetterbox 1.6s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: .15s;
}
.hero-letterbox--top    { top: 0;    transform: translateY(-100%); }
.hero-letterbox--bottom { bottom: 0; transform: translateY( 100%); animation-name: heroLetterboxB; }
@keyframes heroLetterbox  { to { transform: translateY(0); } }
@keyframes heroLetterboxB { to { transform: translateY(0); } }

/* "Tela moviéndose" — silk drift con gradiente cónico y blur muy bajo */
.hero-silk {
    background:
        conic-gradient(from 0deg at 50% 50%,
            rgba(244,220,205,.00) 0%,
            rgba(244,220,205,.10) 12%,
            rgba(207,147,130,.06) 28%,
            rgba(244,220,205,.14) 45%,
            rgba(207,147,130,.04) 62%,
            rgba(244,220,205,.10) 80%,
            rgba(244,220,205,.00) 100%);
    mix-blend-mode: screen;
    opacity: .55;
    filter: blur(40px);
    animation: heroSilkDrift 28s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
    will-change: transform, filter;
}
@keyframes heroSilkDrift {
    0%   { transform: rotate(0deg) scale(1.25); }
    50%  { transform: rotate(8deg) scale(1.35); }
    100% { transform: rotate(-6deg) scale(1.4); }
}

/* Reflejos: dos haces de luz que cruzan la escena lentamente */
.hero-reflect-beam {
    position: absolute;
    top: -20%;
    bottom: -20%;
    width: 40vw;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    filter: blur(28px);
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255,235,210,.18) 48%,
        rgba(255,255,255,.32) 50%,
        rgba(255,235,210,.18) 52%,
        transparent 65%);
}
.hero-reflect-beam--a {
    left: -45%;
    animation: heroReflect 14s cubic-bezier(.5,.05,.4,1) 3.2s infinite;
}
.hero-reflect-beam--b {
    right: -45%;
    width: 55vw;
    animation: heroReflect2 18s cubic-bezier(.5,.05,.4,1) 7s infinite;
}
@keyframes heroReflect {
    0%   { transform: translateX(0) skewX(-12deg); opacity: 0; }
    20%  { opacity: .9; }
    60%  { opacity: .35; }
    100% { transform: translateX(220vw) skewX(-12deg); opacity: 0; }
}
@keyframes heroReflect2 {
    0%   { transform: translateX(0) skewX(12deg); opacity: 0; }
    25%  { opacity: .7; }
    100% { transform: translateX(-200vw) skewX(12deg); opacity: 0; }
}

/* Grano 35mm sutil */
.hero-grain {
    z-index: 5;
    pointer-events: none;
    opacity: .085;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    animation: heroGrainShift 1.6s steps(4) infinite;
}
@keyframes heroGrainShift {
    0%   { transform: translate3d(0,0,0); }
    25%  { transform: translate3d(-4%, 2%, 0); }
    50%  { transform: translate3d(3%, -3%, 0); }
    75%  { transform: translate3d(-2%, 4%, 0); }
    100% { transform: translate3d(0,0,0); }
}

/* Sobre abriéndose: stage centrado, escala según viewport */
.hero-envelope-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 70vw);
    aspect-ratio: 14/10;
    z-index: 1;
    pointer-events: none;
    perspective: 1400px;
    opacity: 0;
    animation: heroEnvFade 1.6s ease-out .4s both;
}
.hero-envelope {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 30px 50px rgba(10,5,7,.55));
}
.hero-env-flap {
    transform-origin: 140px 70px;
    transform: rotateX(0deg);
    animation: heroEnvOpen 2.6s cubic-bezier(.55,.06,.32,1) 1.8s both;
}
.hero-env-seal {
    transform-origin: 140px 128px;
    animation: heroEnvSeal 1.2s cubic-bezier(.22,.61,.36,1) 1.55s both;
    opacity: 0;
}
.hero-env-sheen {
    opacity: 0;
    animation: heroEnvSheen 3.6s ease-out 3.4s both;
}
@keyframes heroEnvFade {
    0%   { opacity: 0; transform: translate(-50%, -45%) scale(.94); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes heroEnvOpen {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(-178deg); }
}
@keyframes heroEnvSeal {
    0%   { opacity: 0; transform: scale(.4); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: .85; transform: scale(1); }
}
@keyframes heroEnvSheen {
    0%   { opacity: 0; transform: translateX(-110%); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(110%); }
}

/* Eyebrow con marcas tipográficas */
.hero-cine-eyebrow {
    position: relative;
}
.hero-cine-mark {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244,220,205,.7), transparent);
}

/* Tipografía cinematic: cada línea sube desde un overflow */
.hero-cine-title { position: relative; z-index: 2; }
.hero-cine-line {
    overflow: hidden;
    padding: 0 .04em;
}
.hero-cine-line > .hero-cine-shine {
    display: inline-block;
    transform: translateY(108%);
    opacity: 0;
    background-image: linear-gradient(100deg,
        #fdfaf6 0%,
        #fdfaf6 38%,
        #fff7ed 50%,
        #fdfaf6 62%,
        #fdfaf6 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    color: #fdfaf6;
    -webkit-text-fill-color: transparent;
    animation:
        heroCineRise  1.5s cubic-bezier(.22,.61,.36,1) 1.9s both,
        heroCineShine 4.8s cubic-bezier(.5,.05,.4,1) 3.4s infinite;
}
.hero-cine-line--gold > .hero-cine-shine {
    background-image: linear-gradient(100deg,
        #e6bea7 0%,
        #d29f86 38%,
        #fff7ed 50%,
        #d29f86 62%,
        #e6bea7 100%);
    color: #e6bea7;
    animation:
        heroCineRise  1.5s cubic-bezier(.22,.61,.36,1) 2.3s both,
        heroCineShine 5.2s cubic-bezier(.5,.05,.4,1) 4.1s infinite;
}
@keyframes heroCineRise {
    0%   { transform: translateY(108%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@keyframes heroCineShine {
    0%   { background-position: 100% 0; }
    60%  { background-position: -20% 0; }
    100% { background-position: -20% 0; }
}

/* Stagger más lento para sentir el ritmo cinematográfico */
.hero-cinematic .hero-stagger { animation-duration: 1.6s; }

/* Link "Ver la colección" — adaptado al fondo oscuro */
.hero-link--cine::before { background: rgba(244,220,205,.4); }
.hero-link--cine::after  { background: #f4dccd; }

/* Botón de música suave (esquina inferior derecha del hero) */
.hero-music-btn {
    position: absolute;
    right: calc(1.25rem + env(safe-area-inset-right));
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .95rem .55rem .65rem;
    border-radius: 999px;
    background: rgba(15,9,12,.55);
    color: #fdfaf6;
    border: 1px solid rgba(244,220,205,.22);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
    opacity: 0;
    animation: heroFadeUp 1.4s cubic-bezier(.22,.61,.36,1) 3.4s both;
    touch-action: manipulation;
}
.hero-music-btn:hover {
    background: rgba(207,147,130,.22);
    border-color: rgba(244,220,205,.42);
    color: #f4dccd;
    transform: translateY(-2px);
}
.hero-music-btn[aria-pressed="true"] {
    background: rgba(207,147,130,.32);
    border-color: rgba(244,220,205,.55);
    color: #fff7ed;
}
.hero-music-icon {
    display: inline-flex;
    width: 26px; height: 26px;
    align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(244,220,205,.12);
    color: #f4dccd;
}
.hero-music-svg--on { display: none; }
.hero-music-btn[aria-pressed="true"] .hero-music-svg--off { display: none; }
.hero-music-btn[aria-pressed="true"] .hero-music-svg--on  { display: inline-block; }
.hero-music-ring {
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 1px solid rgba(244,220,205,.35);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.hero-music-btn[aria-pressed="true"] .hero-music-ring {
    opacity: 1;
    animation: heroMusicPulse 2.2s ease-out infinite;
}
@keyframes heroMusicPulse {
    0%   { transform: scale(1);    opacity: .6; }
    100% { transform: scale(1.22); opacity: 0; }
}
[data-music-text-on][hidden] { display: none; }

/* Mobile: simplificar capas pesadas y compactar el toggle de música */
@media (max-width: 640px) {
    .hero-letterbox        { height: 4.5vh; }
    .hero-silk             { filter: blur(28px); opacity: .42; }
    .hero-reflect-beam--b  { display: none; }
    .hero-envelope-stage   { width: 80vw; opacity: .85; }
    .hero-music-btn        { padding: .45rem .8rem .45rem .55rem; font-size: 9px; letter-spacing: .24em; }
    .hero-music-btn .hero-music-label { display: none; }
}

/* Reduce-motion: cinematic se detiene, queda estática */
@media (prefers-reduced-motion: reduce) {
    .hero-kenburns-slow,
    .hero-silk,
    .hero-reflect-beam--a,
    .hero-reflect-beam--b,
    .hero-grain,
    .hero-env-flap,
    .hero-env-seal,
    .hero-env-sheen,
    .hero-cine-line > .hero-cine-shine,
    .hero-letterbox,
    .hero-music-btn { animation: none !important; }
    .hero-cine-line > .hero-cine-shine {
        transform: none; opacity: 1;
        background: none;
        -webkit-text-fill-color: currentColor;
    }
    .hero-cine-line--gold > .hero-cine-shine { color: #e6bea7; }
    .hero-letterbox--top    { transform: translateY(0); }
    .hero-letterbox--bottom { transform: translateY(0); }
    .hero-music-btn         { opacity: 1; }
    .hero-envelope-stage    { opacity: .65; }
}