/* ==========================================================================
   ENTELADOS JL · Sistema de diseño
   Metodología: mobile first (base = móvil, se amplía con min-width).
   Identidad: negro ciruela del flyer + rosa de marca + oro rosa del logotipo.
   Tema: oscuro por identidad de marca (se bloquea con color-scheme: dark).

   Escala de radios (se respeta en TODA la página):
     botones, chips y swatches ..... pill (999px)
     medios y tarjetas ............. --r-lg (24px)
     campos de formulario .......... --r-sm (14px)
     firma de marca ................ arco (999px 999px 24px 24px)

   Escala z-index: contenido 1-3 · header 50 · float 55 · menú 60
                   progreso 70 · grano 90 · preloader 100
   ========================================================================== */

/* ───────────────────────── 0. FUENTES (autohospedadas) ─────────────────────────
   Subconjunto "latin" (cubre todo el español: á é í ó ú ñ ü ¿ ¡).
   Bodoni Moda y Jost son variables: un archivo por estilo cubre todos los pesos. */
@font-face {
    font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url('assets/fonts/bodoni-moda-latin-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 500; font-display: swap;
    src: url('assets/fonts/bodoni-moda-latin-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
    src: url('assets/fonts/jost-latin.woff2') format('woff2');
}

/* Íconos: Phosphor recortado a los 21 glifos que usa la página (3 KB en lugar de 148 KB).
   Si necesitas un ícono nuevo: agrega su regla ::before abajo y regenera el subconjunto de la fuente
   (pyftsubset sobre Phosphor.woff2), o enlaza la hoja completa de Phosphor Icons. */
@font-face {
    font-family: 'Phosphor'; font-style: normal; font-weight: 400; font-display: block;
    src: url('assets/fonts/phosphor-subset.woff2') format('woff2');
}
.ph {
    font-family: 'Phosphor' !important; font-style: normal; font-weight: normal; font-variant: normal;
    text-transform: none; line-height: 1; letter-spacing: 0; speak: never;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ph-arrow-left::before { content: "\e058"; }
.ph-arrow-right::before { content: "\e06c"; }
.ph-arrow-up::before { content: "\e08e"; }
.ph-arrow-up-right::before { content: "\e092"; }
.ph-arrows-out-simple::before { content: "\e0a6"; }
.ph-caret-down::before { content: "\e136"; }
.ph-hammer::before { content: "\e80e"; }
.ph-map-pin::before { content: "\e316"; }
.ph-palette::before { content: "\e6c8"; }
.ph-phone::before { content: "\e3b8"; }
.ph-plus::before { content: "\e3d4"; }
.ph-scissors::before { content: "\eae0"; }
.ph-seal-check::before { content: "\e606"; }
.ph-shield-check::before { content: "\e40c"; }
.ph-sparkle::before { content: "\e6a2"; }
.ph-wrench::before { content: "\e5d4"; }
.ph-x::before { content: "\e4f6"; }
.ph-warning-circle::before { content: "\e4e2"; }
.ph-instagram-logo::before { content: "\e2d0"; }
.ph-facebook-logo::before { content: "\e226"; }
.ph-tiktok-logo::before { content: "\eaf2"; }

/* ───────────────────────── 1. TOKENS ───────────────────────── */
:root {
    color-scheme: dark;

    /* Superficies */
    --bg: #0d0a0d;
    --bg-2: #130e12;
    --surface: #171218;
    --surface-2: #211921;
    --line: rgba(244, 214, 218, .12);
    --line-strong: rgba(244, 214, 218, .26);

    /* Texto */
    --text: #f6eeeb;
    --muted: #bcaab0;

    /* Acento único: rosa de marca (y su gradiente oro rosa del logotipo) */
    --rose: #e48f9b;
    --rose-soft: #f4c3c9;
    --gold: #e8c8b8;
    --on-rose: #1a0d12;
    --metal: linear-gradient(115deg, #f6dccf 0%, #eaa6af 34%, #e48f9b 52%, #c9917f 76%, #f0d0c1 100%);

    /* Tipografía */
    --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
    --font-body: 'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-display: clamp(2.35rem, 1.1rem + 4.3vw, 4.9rem);
    --fs-h2: clamp(2rem, 1.1rem + 3.6vw, 4.2rem);

    /* Forma y movimiento */
    --r-sm: 14px;
    --r-lg: 24px;
    --pill: 999px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-io: cubic-bezier(.76, 0, .24, 1);

    /* Layout */
    --header-h: 64px;
    --gutter: 1.25rem;
    --max: 1360px;

    /* z-index */
    --z-header: 50;
    --z-float: 55;
    --z-menu: 60;
    --z-progress: 70;
    --z-grain: 90;
    --z-preloader: 100;
}

@media (min-width: 1024px) {
    :root { --header-h: 76px; --gutter: 2.5rem; }
}

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* ───────────────────────── 2. RESET + BASE ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--header-h);
    overflow-x: clip;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-loading, html.has-modal { overflow: hidden; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.7 var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* Grano de película: capa fija, sin eventos (no pesa en el scroll) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--rose); color: var(--on-rose); }

:focus-visible {
    outline: 2px solid var(--rose-soft);
    outline-offset: 3px;
    border-radius: 6px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; left: 1rem; top: -4rem; z-index: 200;
    padding: .8rem 1.2rem; border-radius: var(--pill);
    background: var(--rose); color: var(--on-rose); font-weight: 500;
    transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ───────────────────────── 3. TIPOGRAFÍA ───────────────────────── */
.display, .h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -.014em;
    text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.05; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }

em { font-style: italic; color: var(--rose); font-weight: 400; }

/* Acabado "oro rosa": el degradado se aplica también a cada palabra dividida por JS */
.foil,
.foil .wi,
.foil .ch {
    background: var(--metal);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.foil .wi, .foil .ch { background-size: 100% 100%; }
.foil { padding-right: .06em; padding-bottom: .08em; animation: foilShift 9s ease-in-out infinite alternate; }
@keyframes foilShift { to { background-position: 100% 0; } }

.eyebrow {
    display: inline-flex; align-items: center; gap: .85rem;
    font: 500 .68rem/1.3 var(--font-body);
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold);
}
@media (min-width: 480px) {
    .eyebrow { font-size: .72rem; letter-spacing: .26em; }
}
.eyebrow-line { width: 36px; height: 1px; background: var(--metal); flex: none; }

.lede {
    font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem);
    color: var(--muted);
    max-width: 46ch;
}

/* Divisor de palabras (JS). La máscara recorta el deslizamiento hacia arriba */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .16em; margin: 0 -.07em -.16em; }
.wi { display: inline-block; will-change: transform; }
.mw { display: inline; }
.ch { display: inline-block; will-change: transform; }

/* Estados iniciales: solo cuando GSAP está disponible (html.anim) */
html.anim [data-reveal] { opacity: 0; }
html.anim [data-split] { visibility: hidden; }
html.anim [data-hero='in'] { opacity: 0; }
/* Estado inicial del manifiesto: contraste ≥ 3:1 incluso antes de "encenderse" con el scroll */
html.anim .mw { opacity: .38; }
html.anim em .mw { opacity: .62; }

html.force-ready [data-reveal], html.force-ready [data-hero='in'] { opacity: 1 !important; transform: none !important; }
html.force-ready [data-split] { visibility: visible !important; }
html.force-ready .wi, html.force-ready .ch { transform: none !important; }
html.force-ready .mw { opacity: 1 !important; }
html.force-ready #preloader { display: none !important; }
/* Sin JavaScript no hay quien retire el preloader: se oculta por CSS */
html.no-js #preloader { display: none !important; }

/* ───────────────────────── 4. BOTONES ───────────────────────── */
.btn {
    --x: 50%; --y: 50%;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .7em;
    min-height: 52px;
    padding: .95rem 1.55rem;
    border-radius: var(--pill);
    font: 500 .96rem/1.15 var(--font-body);
    letter-spacing: .015em;
    text-align: center;
    isolation: isolate; overflow: hidden;
    transition: box-shadow .5s var(--ease-out), border-color .4s, background-color .4s, color .4s, filter .3s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { scale: .97; }
.btn i { font-size: 1.15em; transition: translate .5s var(--ease-out); }
.btn:hover i { translate: 4px 0; }

.btn-primary {
    background: var(--metal);
    background-size: 220% 100%;
    color: var(--on-rose);
    box-shadow: 0 14px 34px -12px rgba(228, 143, 155, .65), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-primary::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%);
    opacity: 0; scale: .6;
    transition: opacity .45s, scale .7s var(--ease-out);
}
.btn-primary:hover { box-shadow: 0 20px 44px -12px rgba(228, 143, 155, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-primary:hover::before { opacity: .5; scale: 1.5; }

.btn-ghost {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--rose); background: rgba(228, 143, 155, .1); }

.btn-sm { min-height: 44px; padding: .65rem 1.15rem; font-size: .88rem; }
.btn-block { width: 100%; }

/* ───────────────────────── 5. PRELOADER ───────────────────────── */
#preloader {
    position: fixed; inset: 0; z-index: var(--z-preloader);
    display: grid; place-items: center;
    background: var(--bg);
    overflow: hidden;
}
.pl-curtain { position: absolute; inset: 0; display: flex; }
.pl-fold {
    flex: 1; position: relative;
    background: linear-gradient(90deg, #0a070a 0%, #1f1520 15%, #110c10 34%, #261b25 52%, #0f0b0f 70%, #1c131b 88%, #0a070a 100%);
    box-shadow: inset 0 -90px 130px -70px rgba(228, 143, 155, .16), 0 40px 90px rgba(0, 0, 0, .6);
    will-change: transform;
}
.pl-fold::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--metal); opacity: .6;
}
.pl-core { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.pl-emblem { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.pl-ring, .pl-spin { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-track { fill: none; stroke: var(--line); stroke-width: 1.2; }
.pl-fill {
    fill: none; stroke-width: 2; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
}
.pl-spin circle {
    fill: none; stroke-width: 1.4; stroke-linecap: round;
    stroke-dasharray: 16 84;
    transform-origin: 50% 50%;
    animation: spin 1.7s linear infinite;
}
.pl-logo { width: 118px; height: 118px; filter: drop-shadow(0 0 26px rgba(228, 143, 155, .35)); animation: breathe 3.2s ease-in-out infinite; }
.pl-title { font: italic 400 1.15rem/1.2 var(--font-display); color: var(--muted); }
.pl-count { font: 400 2.4rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.pl-count small { font-size: 1rem; margin-left: .15em; color: var(--rose); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.05); } }

/* ───────────────────────── 6. HEADER + MENÚ ───────────────────────── */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-progress); pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--metal); transform: scaleX(0); transform-origin: 0 50%; }

.site-header {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
    height: var(--header-h);
    border-bottom: 1px solid transparent;
    transition: transform .8s var(--ease-out), background-color .5s, border-color .5s, backdrop-filter .5s;
}
.site-header.is-scrolled {
    background: rgba(13, 10, 13, .72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-101%); }
html.menu-open .site-header { z-index: 65; transform: none; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.header-in {
    height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { width: 40px; height: 40px; }
.brand-text { display: grid; line-height: 1; }
.brand-text b { font: 500 1.4rem/1 var(--font-display); color: var(--rose); letter-spacing: .01em; }
.brand-text span { font: 500 .6rem/1 var(--font-body); letter-spacing: .36em; text-transform: uppercase; margin-top: .28rem; }

.nav-desktop { display: none; }
.header-cta { display: none; }

.burger {
    position: relative; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: rgba(13, 10, 13, .4);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.burger span {
    position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--text);
    transition: transform .6s var(--ease-out);
}
.burger span:nth-child(1) { top: 20px; }
.burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--header-h) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    background:
        radial-gradient(80% 50% at 90% 0%, rgba(228, 143, 155, .16), transparent 70%),
        var(--bg);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .9s var(--ease-io), visibility 0s .9s;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .9s var(--ease-io), visibility 0s; }
.menu-nav { display: grid; }
.menu-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0; border-bottom: 1px solid var(--line);
    font: 400 clamp(2rem, 9vw, 2.8rem)/1.1 var(--font-display);
    opacity: 0; translate: 0 36px;
    transition: opacity .7s var(--ease-out), translate .9s var(--ease-out), color .3s;
}
.menu-nav a i { font-size: 1.4rem; color: var(--rose); }
.menu-nav a:hover { color: var(--rose-soft); }
.menu.is-open .menu-nav a { opacity: 1; translate: 0 0; }
.menu.is-open .menu-nav a:nth-child(1) { transition-delay: .30s; }
.menu.is-open .menu-nav a:nth-child(2) { transition-delay: .36s; }
.menu.is-open .menu-nav a:nth-child(3) { transition-delay: .42s; }
.menu.is-open .menu-nav a:nth-child(4) { transition-delay: .48s; }
.menu.is-open .menu-nav a:nth-child(5) { transition-delay: .54s; }
.menu.is-open .menu-nav a:nth-child(6) { transition-delay: .60s; }
.menu-foot { display: grid; gap: 1rem; justify-items: start; }
.menu-foot p { color: var(--muted); }

@media (min-width: 640px) {
    .header-cta { display: inline-flex; margin-left: auto; margin-right: .4rem; }
}
@media (min-width: 1024px) {
    .burger, .menu { display: none; }
    .nav-desktop { display: flex; gap: 2.2rem; margin-inline: auto; }
    .nav-desktop a {
        position: relative; padding: .5rem 0;
        font: 500 .74rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
        color: var(--muted); transition: color .3s;
    }
    .nav-desktop a::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
        background: var(--metal); transform: scaleX(0); transform-origin: 100% 50%;
        transition: transform .6s var(--ease-out);
    }
    .nav-desktop a:hover { color: var(--text); }
    .nav-desktop a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
    .header-cta { margin-left: 0; margin-right: 0; }
}

/* ───────────────────────── 7. HERO ───────────────────────── */
.hero {
    --tone: 232, 132, 140;
    --mx: 70%; --my: 40%;
    position: relative; isolation: isolate; overflow: clip;
    min-height: 100dvh;
    display: flex; align-items: center;
    padding-block: calc(var(--header-h) + 1.1rem) 2.2rem;
}
.silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Tamaño en unidades de viewport (no en % del hero): así no cambia si el hero crece al cargar las fuentes (CLS) */
.hero-glow {
    position: absolute; left: -15vw; top: -15svh; width: 130vw; height: 130svh; z-index: -2; pointer-events: none;
    background:
        radial-gradient(45% 45% at 72% 38%, rgba(var(--tone), .32), transparent 70%),
        radial-gradient(35% 35% at 10% 90%, rgba(201, 145, 127, .20), transparent 72%),
        radial-gradient(30% 30% at 92% 96%, rgba(var(--tone), .14), transparent 70%);
    animation: glowDrift 24s ease-in-out infinite alternate;
}
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--tone), .13), transparent 65%);
    mix-blend-mode: screen;
}
@keyframes glowDrift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.hero-grid { position: relative; z-index: 1; display: grid; gap: 1.8rem; align-items: center; }
.hero-copy { display: grid; gap: 1.25rem; justify-items: start; }
.hero-copy .lede { max-width: 44ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; width: 100%; }
.cta-row .btn { flex: 1 1 100%; }

.hero-visual { order: -1; position: relative; justify-self: center; width: min(62vw, 290px); perspective: 1200px; }
.arch { position: relative; aspect-ratio: 4 / 4.7; transform-style: preserve-3d; }
.arch-clip {
    position: absolute; inset: 0; overflow: hidden; isolation: isolate;
    border-radius: 999px 999px var(--r-lg) var(--r-lg);
    background: var(--surface);
}
.hs { position: absolute; inset: 0; }
.hs img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 42%; }
html:not(.anim) .hs:not(:first-child) { display: none; }

/* Borde de oro rosa con brillo que viaja alrededor del arco */
.arch-ring {
    position: absolute; inset: -11px; pointer-events: none;
    border-radius: 999px 999px calc(var(--r-lg) + 11px) calc(var(--r-lg) + 11px);
    padding: 1px;
    background:
        conic-gradient(from var(--a), transparent 0 58%, rgba(228, 143, 155, .9) 80%, #fff 90%, transparent 100%),
        linear-gradient(var(--line-strong), var(--line-strong));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: ringSpin 7s linear infinite;
}
@keyframes ringSpin { to { --a: 360deg; } }

.badge-wrap {
    position: absolute; left: -16%; bottom: 4%;
    width: clamp(88px, 30%, 142px); aspect-ratio: 1;
}
.badge { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 28s linear infinite; }
.badge-bg { fill: rgba(13, 10, 13, .82); stroke: var(--line-strong); stroke-width: 1; }
.badge text { font: 500 11.4px var(--font-body); letter-spacing: .2em; text-transform: uppercase; fill: var(--gold); }
.badge-logo { position: absolute; inset: 24%; width: 52%; height: 52%; }

.hero-caption { display: none; }

.cta-row .btn-ghost { flex: 0 0 auto; }
.hero .eyebrow-line { display: none; }

@media (min-width: 480px) {
    .cta-row .btn { flex: 0 0 auto; }
    .hero .eyebrow-line { display: block; }
}
@media (min-width: 768px) {
    .hero-visual { width: min(44vw, 380px); }
    .hero-caption { display: block; margin-top: 1.6rem; text-align: center; font: italic 400 1.08rem/1.2 var(--font-display); color: var(--muted); }
    .hero-caption em { display: inline-block; }
}
@media (min-width: 1024px) {
    .hero { padding-block: calc(var(--header-h) + 1.5rem) 3rem; }
    .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 4rem; }
    .hero-copy { gap: 1.6rem; }
    /* Titular en 2 líneas: la 1.ª mide ≈ 11.2em, así que la fuente se escala con el ancho de la columna */
    .hero .display { font-size: clamp(2.8rem, 4.4vw, 4.2rem); }
    .hero .display .line { display: block; white-space: nowrap; }
    .hero-visual { order: 0; width: min(100%, 440px); justify-self: end; }
    .arch { aspect-ratio: 4 / 5; }
}

/* ───────────────────────── 8. MARQUEE (único) ───────────────────────── */
.marquee {
    overflow: hidden; padding-block: 1.4rem;
    border-block: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
html:not(.anim) .marquee-track { animation: marquee 48s linear infinite; }
.marquee-set { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; flex: none; }
.marquee-set li { font: italic 400 clamp(1.4rem, 1rem + 1.7vw, 2.5rem)/1 var(--font-display); white-space: nowrap; }
.marquee-set .sep { color: var(--rose); font-style: normal; font-size: 1.1em; display: grid; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────────────────────── 9. MANIFIESTO ───────────────────────── */
.manifesto { padding-block: clamp(6rem, 15vw, 12rem); }
.manifesto-text {
    max-width: 21em;
    font: 400 clamp(1.85rem, 1.05rem + 3.5vw, 4.1rem)/1.17 var(--font-display);
    letter-spacing: -.012em;
    text-wrap: balance;
}
.manifesto-cta { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ───────────────────────── 10. EXPANSIÓN (imagen que se abre) ───────────────────────── */
.expand {
    position: relative; isolation: isolate; overflow: clip;
    min-height: 100dvh; background: var(--bg);
}
.expand-frame { position: absolute; inset: 0; }
.expand-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Velo en capas: oscurece arriba y abajo y deja un núcleo suave detrás del título para que se lea sobre cualquier foto */
.expand-scrim {
    position: absolute; inset: 0;
    background:
        radial-gradient(70% 34% at 50% 44%, rgba(13, 10, 13, .55), transparent 78%),
        linear-gradient(180deg, rgba(13, 10, 13, .55) 0%, rgba(13, 10, 13, .3) 40%, rgba(13, 10, 13, .45) 62%, rgba(13, 10, 13, .9) 100%);
}
.expand-title {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 .5rem 8vh; text-align: center; color: #fff;
    font-size: clamp(2.3rem, 1rem + 6.4vw, 8.2rem);
    line-height: 1;
    text-shadow: 0 4px 34px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .35);
}
.expand-title .l, .expand-title .r { display: block; }
.expand-title em { color: #ffd0d6; }
.expand-cap {
    position: absolute; left: 0; right: 0; bottom: clamp(1.8rem, 7vh, 4.4rem); z-index: 3;
    display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding-inline: var(--gutter);
}
.expand-cap p { max-width: 34ch; font-size: clamp(1rem, .95rem + .4vw, 1.2rem); text-shadow: 0 2px 20px rgba(0, 0, 0, .55); }

/* Sin GSAP: se muestra el estado final, a pantalla completa */
html.anim .expand-frame { will-change: clip-path; }
html.anim .expand-scrim { opacity: 0; }
html.anim .expand-cap { opacity: 0; }

/* ───────────────────────── 11. ESTILOS (scroll horizontal) ───────────────────────── */
.styles { position: relative; padding-block: clamp(5rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem); }
.styles-head { display: grid; gap: 1rem; justify-items: start; margin-bottom: 2.2rem; }
.styles-intro { color: var(--muted); max-width: 42ch; }
.styles-progress { display: none; }

.styles-track {
    display: flex; gap: 1.1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 var(--gutter) 1rem;
    -webkit-overflow-scrolling: touch;
}
.styles-track::-webkit-scrollbar { display: none; }
.style-card { flex: 0 0 min(78vw, 340px); scroll-snap-align: center; display: flex; flex-direction: column; gap: 1.2rem; }

.style-media {
    position: relative; display: block; width: 100%; aspect-ratio: 3 / 3.9;
    border-radius: 999px 999px var(--r-lg) var(--r-lg);
    overflow: hidden; isolation: isolate; background: var(--surface);
    cursor: zoom-in;
}
.style-media img {
    position: absolute; top: 0; left: -10%; width: 120%; height: 100%; max-width: none;
    object-fit: cover; transition: filter .6s;
}
.style-media:hover img { filter: brightness(1.1) saturate(1.1); }
.zoom {
    position: absolute; right: 14%; bottom: 1.1rem; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.15rem;
    background: rgba(13, 10, 13, .62); border: 1px solid var(--line-strong);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: scale .5s var(--ease-out), background-color .3s, color .3s;
}
.style-media:hover .zoom { scale: 1.1; background: var(--rose); color: var(--on-rose); }

.style-body { display: flex; flex: 1; flex-direction: column; }
.style-body h3 { font: 400 clamp(1.55rem, 1.2rem + 1vw, 2.15rem)/1.1 var(--font-display); }
.style-body p { margin: .6rem 0 1rem; color: var(--muted); font-size: .97rem; }

/* El enlace se ancla al fondo de la tarjeta: así todos quedan a la misma altura */
.link-cta {
    position: relative; display: inline-flex; align-items: center; gap: .6rem;
    align-self: flex-start; margin-top: auto; padding-bottom: .25rem;
    font-weight: 500; color: var(--rose);
}
.link-cta::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
    transform: scaleX(.35); transform-origin: 0 50%; transition: transform .6s var(--ease-out);
}
.link-cta:hover::after { transform: scaleX(1); }
.link-cta i { transition: translate .5s var(--ease-out); }
.link-cta:hover i { translate: 5px 0; }

.style-end {
    justify-content: center; align-items: flex-start;
    padding: 2rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: radial-gradient(120% 90% at 50% 0%, rgba(228, 143, 155, .16), transparent 70%), var(--surface);
}
.style-end-in { display: grid; gap: 1.2rem; justify-items: start; }
.style-end h3 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); }
.style-end p { color: var(--muted); }

@media (min-width: 640px) {
    .style-card { flex-basis: 320px; }
}

/* Modo "pan": el JS fija la sección y mueve el carril al hacer scroll */
.styles.is-pan {
    --mh: min(50vh, 520px);
    height: 100dvh; min-height: 620px;
    padding-block: calc(var(--header-h) + .8rem) 1.2rem;
    display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
    overflow: clip;
}
.styles.is-pan .styles-head { margin-bottom: 0; }
.styles.is-pan .styles-intro { display: none; }
.styles.is-pan .styles-track {
    overflow: visible; scroll-snap-type: none; width: max-content; gap: clamp(1.6rem, 3vw, 3rem);
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    padding-bottom: 0; will-change: transform;
}
.styles.is-pan .style-card { flex: none; width: calc(var(--mh) * .78); }
.styles.is-pan .style-media { aspect-ratio: auto; height: var(--mh); }
.styles.is-pan .style-end { width: calc(var(--mh) * .95); height: var(--mh); align-self: flex-start; }
.styles.is-pan .styles-progress {
    display: block; position: absolute; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    top: calc(var(--header-h) + 2.6rem); width: clamp(110px, 14vw, 200px); height: 1px; background: var(--line-strong);
}
.styles-progress span { display: block; height: 3px; margin-top: -1px; background: var(--metal); transform: scaleX(0); transform-origin: 0 50%; }

/* ───────────────────────── 12. DIFERENCIALES (bento) ───────────────────────── */
.pillars { padding-block: clamp(5rem, 10vw, 9rem); }
.pillars .h2 { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 14em; }

.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.tile {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 270px; display: flex; align-items: flex-end;
    border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
}
.tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tile-a::before, .tile-c::before, .tile-d::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(13, 10, 13, .08) 18%, rgba(13, 10, 13, .9) 100%);
}
.tile::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .1), transparent 62%);
    opacity: 0; transition: opacity .5s;
}
.tile:hover::after { opacity: 1; }
.tile-in { position: relative; z-index: 1; display: grid; gap: .55rem; padding: 1.5rem; }
.tile-ico { font-size: 1.8rem; color: var(--rose); }
.tile h3 { font: 400 clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem)/1.12 var(--font-display); }
.tile p { max-width: 38ch; font-size: .97rem; color: #e1d3d7; }

.tile-b {
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(228, 143, 155, .22), transparent 62%),
        var(--surface);
}
.tile-b::before {
    content: ''; position: absolute; right: -28px; top: -28px; z-index: -1;
    width: 170px; height: 170px; opacity: .2;
    background: url('assets/brand/logo-entelados-jl-sm.webp') center / contain no-repeat;
}
/* Malla de color: rosa, violeta, turquesa y carmín (las telas que más se piden) */
.tile-c {
    background:
        radial-gradient(75% 75% at 10% 14%, rgba(196, 126, 146, .95), transparent 70%),
        radial-gradient(75% 75% at 92% 20%, rgba(112, 88, 176, .95), transparent 70%),
        radial-gradient(75% 75% at 82% 86%, rgba(34, 148, 168, .9), transparent 70%),
        radial-gradient(75% 75% at 14% 90%, rgba(184, 38, 62, .9), transparent 70%),
        #1a1319;
}

.trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem;
    margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line);
}
.trust li { display: grid; gap: .35rem; align-content: start; }
.trust i { font-size: 1.7rem; color: var(--rose); }
.trust strong { font-weight: 500; line-height: 1.3; }
.trust span { color: var(--muted); font-size: .92rem; line-height: 1.5; }

@media (min-width: 640px) {
    .bento { grid-template-columns: 1fr 1fr; }
    .tile-a, .tile-d { grid-column: 1 / -1; }
    .tile-a { min-height: 420px; }
}
@media (min-width: 1024px) {
    .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(280px, 1fr)); }
    .tile-a { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 0; }
    .tile-b { grid-column: 3; grid-row: 1; }
    .tile-c { grid-column: 4; grid-row: 1; }
    .tile-d { grid-column: 3 / 5; grid-row: 2; }
    .tile-in { padding: 1.8rem; }
    .trust { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* ───────────────────────── 13. COLOR (selector con fotos reales) ───────────────────────── */
.studio { position: relative; overflow: clip; padding-block: clamp(5rem, 10vw, 9rem); }
.studio-grid { display: grid; gap: 2.6rem; align-items: center; }
.stage-wrap { position: relative; width: min(100%, 500px); margin-inline: auto; }
.stage-glow {
    position: absolute; inset: 10% -10% -4% -10%; z-index: 0; border-radius: 50%;
    background: rgb(232, 132, 140); filter: blur(90px); opacity: .38;
    transition: background-color 1.1s ease;
}
.stage {
    position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: var(--r-lg); border: 1px solid var(--line-strong);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .85);
    background: var(--surface);
}
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-img:not(.is-on) { clip-path: inset(100% 0 0 0); }

.studio-copy { display: grid; gap: 1.2rem; justify-items: start; }
.studio-text { color: var(--muted); max-width: 42ch; }
.swatches { display: flex; flex-wrap: wrap; gap: .85rem; padding: .4rem .3rem; }
.swatch {
    position: relative; width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%), rgb(var(--c));
    border: 1px solid rgba(255, 255, 255, .3);
    transition: scale .5s var(--ease-out);
}
.swatch::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1.5px solid var(--rose); opacity: 0; scale: .8;
    transition: opacity .4s, scale .5s var(--ease-out);
}
.swatch.is-active::after { opacity: 1; scale: 1; }
.swatch:hover { scale: 1.1; }
.studio-name { color: var(--muted); }
.studio-name strong { color: var(--text); font-weight: 500; }

@media (min-width: 1024px) {
    .studio-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
    .stage-wrap { margin-inline: 0; }
}

/* ───────────────────────── 14. EN MOVIMIENTO (videos) ───────────────────────── */
.reel { padding-block: clamp(5rem, 10vw, 9rem); }
.reel-intro { margin-top: 1rem; color: var(--muted); max-width: 44ch; }
.reel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.reel-w1, .reel-w2 { grid-column: 1 / -1; }
.reel-media {
    position: relative; overflow: hidden; background: var(--surface);
    border-radius: var(--r-lg); border: 1px solid var(--line);
}
.reel-p .reel-media { aspect-ratio: 9 / 16; }
.reel-w1 .reel-media, .reel-w2 .reel-media { aspect-ratio: 16 / 9; }
.reel-media video { width: 100%; height: 100%; object-fit: cover; }
.reel-item figcaption { margin-top: .7rem; font: italic 400 1.05rem/1.3 var(--font-display); color: var(--muted); }
.reel-cta { display: flex; justify-content: center; margin-top: clamp(2.2rem, 5vw, 3.5rem); }

@media (min-width: 1024px) {
    .reel-grid { grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: start; }
    .reel-p { grid-column: span 3; }
    .reel-p:nth-of-type(2) { margin-top: 5rem; }
    .reel-p:nth-of-type(3) { margin-top: 2rem; }
    .reel-p:nth-of-type(4) { margin-top: 7rem; }
    .reel-w1 { grid-column: 1 / 6; margin-top: 1rem; }
    .reel-w2 { grid-column: 6 / 13; margin-top: 4rem; }
}

/* ───────────────────────── 15. PROCESO ───────────────────────── */
.process { padding-block: clamp(5rem, 10vw, 9rem); }
.process-head { display: grid; gap: 1rem; justify-items: start; margin-bottom: clamp(1.4rem, 4vw, 3rem); }
.process-grid { display: grid; align-items: start; }

.process-stage {
    position: sticky; top: calc(var(--header-h) + .4rem); z-index: 2;
    margin-inline: calc(var(--gutter) * -1);
    padding: .6rem var(--gutter) 1.4rem;
    background: linear-gradient(180deg, var(--bg) 72%, rgba(13, 10, 13, 0));
}
.process-frame {
    position: relative; height: 34dvh; overflow: hidden;
    border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--surface);
}
.pf {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-io);
}
.pf.is-on { clip-path: inset(0); }

.steps { position: relative; padding: 1.5rem 0 0 1.6rem; --p: 0; }
.steps::before, .steps::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; }
.steps::before { background: var(--line); }
.steps::after { background: var(--metal); transform: scaleY(var(--p)); transform-origin: 50% 0; }
/* El paso inactivo baja de color y opacidad, pero conserva contraste AA (≥ 4.5:1) */
.step {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .9rem;
    min-height: 44vh; opacity: .74; transition: opacity .7s;
}
.step.is-active { opacity: 1; }
.step h3 { font: 400 clamp(1.8rem, 1.2rem + 1.7vw, 2.7rem)/1.1 var(--font-display); color: var(--muted); transition: color .6s; }
.step.is-active h3 { color: var(--text); }
.step p { color: var(--muted); max-width: 44ch; }
.step .btn { margin-top: .6rem; }

@media (min-width: 1024px) {
    .process-grid { grid-template-columns: .92fr 1.08fr; gap: 5rem; }
    .process-stage {
        top: calc(var(--header-h) + 3vh); margin: 0; padding: 0; background: none;
        height: min(76vh, 680px);
    }
    .process-frame { height: 100%; }
    .steps { padding-left: 2.4rem; }
    .step { min-height: 72vh; }
}

/* ───────────────────────── 16. PREGUNTAS ───────────────────────── */
.faq { padding-block: clamp(5rem, 10vw, 9rem); }
.faq-wrap { display: grid; gap: 2.4rem; max-width: 1020px; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.45rem 0; text-align: left;
    font: 400 clamp(1.2rem, 1rem + .9vw, 1.75rem)/1.25 var(--font-display);
}
.faq-q span { transition: color .3s; }
.faq-q:hover span { color: var(--rose-soft); }
.faq-q i {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid var(--line-strong); border-radius: 50%; font-size: 1.1rem;
    transition: rotate .6s var(--ease-out), background-color .3s, color .3s, border-color .3s;
}
.faq-item.is-open .faq-q i { rotate: 135deg; background: var(--rose); color: var(--on-rose); border-color: var(--rose); }
.faq-a {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .6s var(--ease-out), visibility 0s .6s;
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .6s var(--ease-out), visibility 0s; }
.faq-a p { padding-bottom: 1.6rem; color: var(--muted); max-width: 64ch; }

/* ───────────────────────── 17. CONTACTO ───────────────────────── */
.contact { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(5rem, 10vw, 9rem); background: var(--bg); }
.contact .silk { z-index: -2; opacity: .7; }
/* El degradado de empalme va PRIMERO (capa superior) para que no se vea costura con la sección anterior */
.contact-veil {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(180deg, var(--bg) 0%, rgba(13, 10, 13, 0) 24%, rgba(13, 10, 13, 0) 76%, #090709 100%),
        radial-gradient(80% 60% at 18% 24%, rgba(228, 143, 155, .15), transparent 70%);
}
.contact-grid { display: grid; gap: 2.8rem; align-items: center; }
.contact-copy { display: grid; gap: 1.3rem; justify-items: start; }
.contact-list { display: grid; gap: .4rem; width: 100%; }
.contact-list li { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.contact-list li > i {
    flex: none; width: 50px; height: 50px; display: grid; place-items: center;
    border: 1px solid var(--line-strong); border-radius: 50%; color: var(--rose); font-size: 1.3rem;
}
.contact-list span { display: block; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-list a, .contact-list strong { font: 400 clamp(1.35rem, 1.1rem + .9vw, 1.8rem)/1.2 var(--font-display); }
.contact-list a:hover { color: var(--rose-soft); }

.form-card {
    padding: clamp(1.4rem, 4vw, 2.5rem);
    background: rgba(23, 18, 24, .84);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: 0 50px 120px -50px #000;
}
.form-card h3 { margin-bottom: 1.4rem; font: 400 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1.1 var(--font-display); }
.field { display: grid; gap: .5rem; margin-bottom: 1.1rem; }
.field label { font-size: .88rem; font-weight: 500; }
.field label small { color: var(--muted); font-weight: 400; font-size: .85em; }
.field input, .field select, .field textarea {
    width: 100%; padding: .95rem 1rem;
    border-radius: var(--r-sm); border: 1px solid var(--line-strong);
    background: #100b10; color: var(--text); font: inherit;
    transition: border-color .3s, box-shadow .3s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #9d8b92; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(228, 143, 155, .28);
}
.field input[type='date'] { color-scheme: dark; }
.field select option { background: #171218; color: var(--text); }
.field select:invalid { color: #9d8b92; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.8rem; }
.select-wrap i { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--muted); }
.err { display: none; align-items: center; gap: .4rem; font-size: .84rem; color: #ffb3bd; }
.field.has-error .err { display: flex; }
.field.has-error input, .field.has-error select { border-color: #ff9aa8; }
.form-note { margin-top: .9rem; text-align: center; font-size: .84rem; color: var(--muted); }

.burst-dot {
    position: fixed; z-index: 120; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
    background: var(--metal);
}

@media (min-width: 1024px) {
    .contact-grid { grid-template-columns: 1.05fr .95fr; gap: 5rem; }
}

/* ───────────────────────── 18. FOOTER ───────────────────────── */
.site-footer {
    position: relative; overflow: clip;
    padding-top: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg), #090709);
}
.footer-mark {
    margin-bottom: clamp(2rem, 5vw, 4rem); text-align: center; white-space: nowrap; user-select: none;
    font: 400 clamp(2.6rem, 13vw, 12.5rem)/1 var(--font-display); letter-spacing: -.03em;
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 1rem; justify-items: start; }
.footer-brand p { max-width: 30ch; font: italic 400 1.3rem/1.3 var(--font-display); }
.footer-h { margin-bottom: 1rem; font: 500 .72rem/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.footer-grid li { margin-bottom: .55rem; color: var(--muted); }
.footer-grid li a { transition: color .3s; }
.footer-grid li a:hover { color: var(--text); }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 3rem; padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem;
}
.to-top { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); }
.to-top i { transition: translate .5s var(--ease-out); }
.to-top:hover i { translate: 0 -4px; }

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
    .footer-brand { grid-column: auto; }
}

/* Redes sociales (menú móvil, contacto y pie de página) */
.social { display: flex; gap: .75rem; }
.social a {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03);
    font-size: 1.35rem; color: var(--text);
    transition: background-color .35s, color .35s, border-color .35s, translate .5s var(--ease-out);
}
.social a:hover, .social a:focus-visible { background: var(--rose); border-color: var(--rose); color: var(--on-rose); translate: 0 -3px; }

/* ───────────────────────── 19. BOTÓN FLOTANTE WHATSAPP ───────────────────────── */
.wa-float {
    position: fixed; z-index: var(--z-float);
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem));
    width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--metal); color: var(--on-rose);
    box-shadow: 0 18px 42px -10px rgba(228, 143, 155, .65), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.wa-float .ico { width: 30px; height: 30px; }
.wa-float::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid var(--rose); animation: ping 2.7s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
.wa-tip {
    position: absolute; right: calc(100% + .8rem); top: 50%;
    padding: .6rem 1rem; border-radius: var(--pill); white-space: nowrap;
    background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); font-size: .9rem;
    opacity: 0; translate: 10px -50%; pointer-events: none;
    transition: opacity .4s, translate .5s var(--ease-out);
}
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip, .wa-float.show-tip .wa-tip { opacity: 1; translate: 0 -50%; }
html.anim .wa-float { opacity: 0; scale: .4; }

/* ───────────────────────── 20. LIGHTBOX ───────────────────────── */
.lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgba(8, 6, 8, .97); color: var(--text); overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 6, 8, .85); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 1rem; padding: 4.5rem 1rem 1.4rem; }
.lb-fig { display: grid; justify-items: center; gap: .8rem; min-height: 0; touch-action: pan-y; }
.lb-fig img { max-width: min(92vw, 1100px); max-height: calc(100dvh - 12rem); object-fit: contain; border-radius: var(--r-lg); }
.lb-fig figcaption { color: var(--muted); font: italic 400 1.05rem/1.3 var(--font-display); text-align: center; max-width: 60ch; }
.lb-btn {
    position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.3rem;
    background: rgba(23, 18, 24, .85); border: 1px solid var(--line-strong);
    transition: background-color .3s, color .3s, border-color .3s;
}
.lb-btn:hover { background: var(--rose); color: var(--on-rose); border-color: var(--rose); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev { left: .8rem; }
.lb-next { right: .8rem; }

/* ───────────────────────── 21. MOVIMIENTO REDUCIDO ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .marquee-track { animation: none !important; }
    .wa-float::before { display: none; }
}