/* ==========================================================================
   CELESTRIA — Hoja de estilos
   Construida sobre el Manual de Marca Ejecutivo:
     · Dorado Celestria #C8A951 — acentos, CTA, líneas, fondos diagonales
     · Gris Oscuro      #2B2B2B — tipografía, bordes, footer
     · Blanco Puro      #FFFFFF — fondos generales
     · Playfair Display — títulos H1/H2 (mayúsculas y minúsculas)
     · Montserrat       — overlines en All Caps, cuerpo y botones
     · Parisienne       — sustituto web de Authenia Textured, solo logotipo

   Índice
   1. Tokens            7. Secciones         13. Testimonios
   2. Base              8. Botones           14. FAQ
   3. Logotipo          9. Colecciones       15. Footer
   4. Intro animada    10. Complementos      16. Responsive
   5. Header / Nav     11. Proceso           17. Accesibilidad
   6. Hero             12. Galería
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Paleta corporativa */
    --gold: #c8a951;
    --gold-soft: #e0cb92;
    --gold-wash: rgba(200, 169, 81, 0.12);
    /* Dorado profundo: misma familia, contraste AA para texto pequeño
       sobre blanco (el #C8A951 puro solo alcanza 2.3:1 en cuerpo de texto) */
    --gold-deep: #8a6e24;
    --ink: #2b2b2b;
    --white: #fff;
    --tint: #faf8f3;          /* Blanco cálido para alternar secciones */
    --muted: #5f5f5f;         /* Cuerpo secundario sobre blanco */
    --muted-dark: #b3aea4;    /* Cuerpo secundario sobre gris oscuro */
    --line: rgba(43, 43, 43, 0.1);
    --line-dark: rgba(255, 255, 255, 0.12);

    /* Tipografías */
    --font-script: 'Parisienne', 'Segoe Script', cursive;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans: 'Montserrat', 'Segoe UI', Arial, sans-serif;

    /* Escala tipográfica: cuatro jerarquías, como pide el manual */
    --fs-h1: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
    --fs-h2: clamp(1.9rem, 1.35rem + 2.2vw, 3.1rem);
    --fs-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
    --fs-body: clamp(0.95rem, 0.91rem + 0.18vw, 1.03rem);
    --fs-overline: 0.7rem;

    /* Ritmo y forma */
    --section-y: clamp(80px, 9vw, 140px);
    --gutter: clamp(20px, 4vw, 56px);
    --header-h: 92px;
    --radius: 6px;      /* "Esquinas sutilmente redondeadas" */
    --radius-sm: 4px;   /* Botones, según el CSS referencial del manual */

    --shadow-soft: 0 14px 34px rgba(43, 43, 43, 0.07);
    --shadow-lift: 0 26px 60px rgba(43, 43, 43, 0.12);
    --shadow-gold: 0 14px 30px rgba(200, 169, 81, 0.32);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);

    color-scheme: light;
}

/* ------------------------------------------------------------------ 2. Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Bloquea el scroll mientras corre la intro o está abierto el menú */
body.is-locked {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.16;
    text-wrap: balance;
    letter-spacing: -0.005em;
}

/* El manual prohíbe justificar: los párrafos van alineados a la izquierda */
p {
    text-align: left;
    text-wrap: pretty;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

/* Táctil: sin destello azul del navegador y sin zoom accidental al tocar
   dos veces un botón o un enlace. */
a, button, summary {
    -webkit-tap-highlight-color: rgba(200, 169, 81, 0.18);
    touch-action: manipulation;
}

::selection {
    background: var(--gold);
    color: var(--white);
}

:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

.section--dark :focus-visible,
.hero :focus-visible,
.footer :focus-visible {
    outline-color: var(--gold);
}

section[id],
footer[id] { scroll-margin-top: var(--header-h); }

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Overline / subtítulo indicador — Montserrat, All Caps, tracking amplio */
.overline {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 18px;
}

.overline--light { color: var(--gold); }
.section--dark .overline,
.footer .overline { color: var(--gold); }

/* Línea de separación dorada */
.rule {
    display: block;
    width: 64px;
    height: 2px;
    background: var(--gold);
    margin: 22px auto 26px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 1s var(--ease) 0.25s;
}

/* --------------------------------------------------------------- 3. Logotipo
   Reproduce el lockup del manual: palabra en cursiva, recuadro de borde
   oscuro y fondo dividido en diagonal (dorado abajo-izquierda, blanco
   arriba-derecha). No debe deformarse ni invadirse su área de respeto. */
.logo-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0.85em 0.42em;
    border: 1px solid var(--ink);
    border-radius: 2px;
    background: linear-gradient(45deg, var(--gold) 0 50%, var(--white) 50% 100%);
    /* Área de respeto: dos veces el alto de la "e" */
    margin: 0.35em;
    line-height: 1;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.logo-word {
    font-family: var(--font-script);
    font-size: 1.55rem;
    color: var(--ink);
    line-height: 1.1;
    padding-bottom: 0.06em;
    white-space: nowrap;
}

.logo-plate--iso { padding: 0.16em 0.5em 0.28em; }
.logo-plate--iso .logo-word { font-size: 3.4rem; }
.logo-plate--lg .logo-word { font-size: 2.2rem; }

.brand { text-decoration: none; display: inline-block; }

.brand:hover .logo-plate,
.brand:focus-visible .logo-plate {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------- 4. Intro animada
   Secuencia: el sello se dibuja sobre el gris de marca y las cortinas se
   retiran en diagonal, replicando el fondo dividido del logotipo. */
.intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    pointer-events: none;
}

html:not(.js) .intro { display: none; }
html.intro-done .intro { display: none; }

.intro-curtain {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transition: transform 1.15s var(--ease-curtain);
}

/* El corte entre ambas cortinas es diagonal, no horizontal */
.intro-curtain--top    { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 62%); }
.intro-curtain--bottom { clip-path: polygon(0 62%, 100% 42%, 100% 100%, 0 100%); }

html.is-ready .intro-curtain--top    { transform: translate3d(0, -102%, 0); }
html.is-ready .intro-curtain--bottom { transform: translate3d(0, 102%, 0); }

.intro-seal {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    transition: opacity 0.5s ease, transform 0.7s var(--ease);
}

html.is-ready .intro-seal {
    opacity: 0;
    transform: translate3d(0, -18px, 0) scale(0.97);
}

.intro-seal .logo-plate {
    animation: sealIn 1.1s var(--ease) both;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* El isotipo es el protagonista de la intro: pide presencia */
.intro-seal .logo-plate--iso .logo-word {
    font-size: clamp(4rem, 9vw, 7rem);
}

.intro-name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    color: var(--white);
    margin-top: 26px;
    letter-spacing: 0.16em;
    animation: sealFade 0.9s var(--ease) 0.45s both;
}

.intro-rule {
    display: block;
    width: 120px;
    height: 1px;
    background: var(--gold);
    margin: 20px 0 16px;
    transform-origin: center;
    animation: sealLine 0.9s var(--ease) 0.6s both;
}

.intro-tagline {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted-dark);
    animation: sealFade 0.9s var(--ease) 0.8s both;
}

@keyframes sealIn {
    from { opacity: 0; transform: scale(0.82) translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes sealFade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sealLine {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* Barra de progreso de lectura */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 200;
    pointer-events: none;
}

/* --------------------------------------------------------- 5. Header / Nav */
.header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 150;
    padding: 20px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: transform 0.5s var(--ease), background 0.4s ease,
                padding 0.4s ease, box-shadow 0.4s ease;
}

.header.is-stuck {
    padding: 12px var(--gutter);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(43, 43, 43, 0.06);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 34px);
}

.nav-links a {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    position: relative;
    padding: 6px 0;
    transition: color 0.3s ease;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.header.is-stuck .nav-links a {
    color: var(--ink);
    text-shadow: none;
}

.nav-links a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.4s var(--ease);
}

.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after { width: 100%; }

.nav-links a:not(.btn):hover { color: var(--gold); }

.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 160;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.header.is-stuck .nav-toggle {
    background: transparent;
    border-color: var(--line);
}

.nav-toggle span {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.5px;
    background: var(--white);
    transform: translateX(-50%);
    transition: transform 0.4s var(--ease), background 0.3s ease;
}

.header.is-stuck .nav-toggle span { background: var(--ink); }

.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { bottom: 17px; }

body.nav-open .nav-toggle span { background: var(--white); }
body.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { bottom: 21px; transform: translateX(-50%) rotate(-45deg); }

/* ------------------------------------------------------------------ 6. Hero */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(var(--header-h) + 30px) var(--gutter) 130px;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
}

/* Capa de imagen — la mueve el motor de parallax.
   El sobremargen cubre el recorrido máximo del desplazamiento. */
.hero-media {
    position: absolute;
    inset: -24% 0;
    z-index: -3;
    will-change: transform;
}

.hero-image {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    /* Ken Burns: acercamiento lentísimo, apenas perceptible */
    transform: scale(1.14);
    animation: kenBurns 22s ease-out forwards;
}

@keyframes kenBurns {
    to { transform: scale(1); }
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Scrim en dos capas: degradado vertical para asentar el texto y
       viñeta radial para cerrar los bordes de la fotografía */
    background:
        radial-gradient(ellipse at center, transparent 20%, rgba(43, 43, 43, 0.55) 100%),
        linear-gradient(to bottom, rgba(43, 43, 43, 0.86) 0%, rgba(43, 43, 43, 0.6) 45%, rgba(43, 43, 43, 0.92) 100%);
}

/* Acento diagonal dorado — eco del fondo dividido del logotipo.
   Una esquina discreta, no una banda que cruce la composición. */
.hero-diagonal {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(45deg, rgba(200, 169, 81, 0.3) 0 13%, rgba(200, 169, 81, 0) 13.4%);
    will-change: transform;
}

.hero-content {
    position: relative;
    /* `width` es imprescindible: el hero es flex en columna con
       align-items:center, así que sin ella el bloque se dimensiona por su
       contenido. El `max-width: 56ch` del párrafo lo estiraba a ~460px y
       en móvil se salía de la pantalla (solo al cargar Montserrat, porque
       la unidad `ch` depende de la tipografía). */
    width: 100%;
    max-width: 940px;
    will-change: transform, opacity;
}

.hero-content .overline { margin-bottom: 22px; }

.hero-title {
    font-size: var(--fs-h1);
    color: var(--white);
    margin-bottom: 26px;
    /* Mayúsculas y minúsculas, según regla 4.3 del manual */
    text-transform: none;
    line-height: 1.1;
}

.hero-lead {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.88);
    max-width: 56ch;
    margin: 0 auto 40px;
    text-align: center;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Máscara de línea: el texto sube desde abajo al terminar la intro */
.mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
}

.mask > span {
    display: block;
    transform: translate3d(0, 115%, 0);
    transition: transform 1.15s var(--ease);
    transition-delay: calc(var(--step, 0) * 0.09s + 0.15s);
}

html.is-ready .mask > span { transform: translate3d(0, 0, 0); }

/* Entradas escalonadas del hero */
html.js .intro-step:not(.mask) {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
    transition-delay: calc(var(--step, 0) * 0.09s + 0.2s);
}

html.is-ready .intro-step:not(.mask) {
    opacity: 1;
    transform: none;
}

/* Indicador de scroll */
.scroll-cue {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    z-index: 3;
}

html.js .scroll-cue.intro-step {
    transform: translateX(-50%) translateY(26px);
}

html.is-ready .scroll-cue.intro-step {
    transform: translateX(-50%);
}

.scroll-cue-line {
    width: 1px;
    height: 46px;
    background: rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.scroll-cue-line::after {
    content: '';
    position: absolute;
    inset: -50% 0 auto 0;
    height: 50%;
    background: var(--gold);
    animation: cueDrop 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes cueDrop {
    0%   { top: -50%; }
    100% { top: 100%; }
}

/* ------------------------------------------------------------ 7. Secciones */
.section {
    position: relative;
    padding: var(--section-y) var(--gutter);
    overflow: hidden;
}

.section--tint { background: var(--tint); }

.section--dark {
    background: var(--ink);
    color: var(--white);
}

.section--dark h2,
.section--dark h3 { color: var(--white); }

.section-header {
    max-width: 760px;
    margin: 0 auto clamp(52px, 6vw, 80px);
    text-align: center;
}

.section-header h2 { font-size: var(--fs-h2); }

.section-header p {
    color: var(--muted);
    text-align: center;
    margin-inline: auto;
    max-width: 62ch;
}

.section--dark .section-header p { color: var(--muted-dark); }

/* Flex en lugar de `text-align` para que el bloque admita dos botones sin
   que el espacio en blanco del HTML decida la separación. Con un solo botón
   el resultado es idéntico al de antes: centrado. */
.section-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: clamp(48px, 5vw, 68px);
}

/* Manchas decorativas: sutiles, con parallax propio */
.deco {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.deco--1 {
    width: clamp(240px, 32vw, 460px);
    aspect-ratio: 1;
    background: rgba(200, 169, 81, 0.2);
    top: -80px;
    left: -120px;
}

.deco--2 {
    width: clamp(200px, 26vw, 360px);
    aspect-ratio: 1;
    background: rgba(43, 43, 43, 0.07);
    bottom: 40px;
    right: -110px;
}

.deco--dark {
    width: clamp(260px, 34vw, 520px);
    aspect-ratio: 1;
    background: rgba(200, 169, 81, 0.14);
    top: 8%;
    right: -140px;
}

/* Reveal al hacer scroll — el estado oculto solo existe si hay JS */
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease); }

html.js .reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition-delay: calc(var(--i, 0) * 0.09s);
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Salida: el elemento se retira hacia el lado por el que se fue.
   `from-below` lo marca el observador según por dónde entró. */
html.js .reveal:not(.is-visible) { transform: translate3d(0, -28px, 0); }
html.js .reveal.from-below:not(.is-visible) { transform: translate3d(0, 36px, 0); }

/* Escalonado interno de los encabezados de sección */
html.js .section-header.reveal .overline,
html.js .section-header.reveal h2,
html.js .section-header.reveal p {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

html.js .section-header.reveal h2 { transition-delay: 0.12s; }
html.js .section-header.reveal p  { transition-delay: 0.32s; }

html.js .section-header.reveal.is-visible .overline,
html.js .section-header.reveal.is-visible h2,
html.js .section-header.reveal.is-visible p {
    opacity: 1;
    transform: none;
}

.reveal.is-visible .rule { transform: scaleX(1); }

/* -------------------------------------------------------------- 8. Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 15px 32px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
                background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* Destello dorado al pasar el cursor */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
    transform: translateX(-140%);
    transition: transform 0.8s var(--ease);
    pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateX(140%); }

/* CTA principal — tal cual lo define el manual */
.btn-primary {
    background: var(--gold);
    color: var(--white);
    box-shadow: var(--shadow-gold);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: #b8973f;
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(200, 169, 81, 0.42);
}

.btn-outline {
    background: transparent;
    color: var(--gold-deep);
    border-color: var(--gold);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--gold);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
}

.btn-ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    transform: translateY(-3px);
}

.btn-sm { padding: 11px 22px; font-size: 0.68rem; }

.plan--dark .btn-outline,
.section--dark .btn-outline { color: var(--gold); }

/* ---------------------------------------------------------- 9. Colecciones */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

/* La portada tiene cuatro paquetes, pero Vid Maker vende tres descargas y un
   plan mensual. Sin estas variantes las tarjetas se estirarían para rellenar
   cuatro columnas y quedarían desproporcionadas. */
.pricing-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Una sola tarjeta centrada, sin ocupar todo el ancho del contenedor */
.pricing-grid--1 {
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
}

/* Dos planes mensuales: no deben estirarse al ancho completo de la sección */
.pricing-grid--2 {
    max-width: 840px;
    margin-inline: auto;
}

/* "/ mes" junto al importe: debe leerse como nota, no como parte del precio */
.plan-per {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.plan--dark .plan-per { color: var(--muted-dark); }

.plan {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px 30px 34px;
    position: relative;
    overflow: hidden;
    /* Explícito porque los planes mensuales de Vid Maker viven dentro de
       `.addons`, que centra su contenido; sin esto heredarían ese centrado. */
    text-align: left;
    transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease),
                border-color 0.55s ease, opacity 1s var(--ease);
}

.plan:hover,
.plan:focus-within {
    transform: translateY(-12px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(200, 169, 81, 0.6);
}

/* Al pasar el cursor aparece un filo dorado en el borde superior */
.plan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}

.plan:hover::before,
.plan:focus-within::before { transform: scaleX(1); }

.plan-name {
    font-size: var(--fs-h3);
    margin-bottom: 14px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.plan-price .amount {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.7rem + 1.1vw, 2.7rem);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Símbolo de moneda: en Montserrat y elevado, para que no se lea como el
   "$" serif de Playfair (que se percibe como dólar). El prefijo "MX$" deja
   explícito que el precio está en pesos mexicanos. */
.currency {
    font-family: var(--font-sans);
    font-size: 0.4em;
    font-weight: 600;
    letter-spacing: 0.04em;
    vertical-align: 0.9em;
    margin-right: 0.04em;
    color: var(--muted);
}

.plan--dark .currency { color: var(--muted-dark); }
.addon-price .currency { color: inherit; opacity: 0.8; }

.plan-save {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-deep);
    margin-top: 6px;
}

.plan-note {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 10px;
}

.plan-rule {
    display: block;
    width: 34px;
    height: 1px;
    background: var(--gold);
    margin: 24px 0;
}

.plan-features {
    list-style: none;
    flex: 1 1 auto;
    margin-bottom: 32px;
}

.plan-features li {
    font-size: 0.87rem;
    color: var(--muted);
    padding: 11px 0 11px 20px;
    border-bottom: 1px solid var(--line);
    position: relative;
    line-height: 1.55;
}

/* Viñeta de estrella dorada, uno de los iconos de marca */
.plan-features li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 11px;
    font-size: 0.7rem;
    color: var(--gold);
}

.plan-features li:last-child { border-bottom: none; }

/* Tarjeta destacada */
.plan--featured {
    border-color: var(--gold);
    box-shadow: 0 18px 44px rgba(200, 169, 81, 0.18);
}

/* Esquina diagonal dorada: cita directa del fondo dividido del logotipo */
.plan-corner {
    position: absolute;
    top: 0;
    left: 0;
    /* Se mantiene por debajo del padding de la tarjeta para no tocar el texto */
    width: 56px;
    height: 56px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.9;
}

.plan-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--ink);
    padding: 6px 14px;
    border-radius: 100px;
}

/* Sobre la tarjeta oscura el distintivo tiene el mismo `--ink` de fondo que la
   propia tarjeta y desaparece: ahí va en dorado con texto oscuro. */
.plan--dark .plan-tag {
    background: var(--gold);
    color: var(--ink);
}

/* Tarjeta oscura */
.plan--dark {
    background: var(--ink);
    border-color: var(--ink);
}

.plan--dark .plan-name,
.plan--dark .plan-price .amount { color: var(--white); }
.plan--dark .plan-price,
.plan--dark .plan-note,
.plan--dark .plan-features li { color: var(--muted-dark); }
.plan--dark .plan-features li { border-bottom-color: var(--line-dark); }
.plan--dark .plan-save { color: var(--gold); }

.plan--dark .is-highlight {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--gold);
}

/* --- Selector de tipo de evento (modal de paquetes) ---
   Paso intermedio entre "Seleccionar" y el formulario. A diferencia del
   modal de demo —que ocupa la pantalla porque enmarca una invitación— este
   es una tarjeta centrada: la decisión es breve y conviene que se siga
   viendo el paquete de fondo. */
.event-modal[hidden] { display: none; }

.event-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: var(--gutter);
}

.event-modal-veil {
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 27, 0.72);
    backdrop-filter: blur(3px);
    animation: eventVeilIn 0.4s ease both;
}

.event-modal-panel {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - var(--gutter) * 2);
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(34px, 4.5vw, 52px) clamp(24px, 4vw, 48px) clamp(28px, 3.5vw, 40px);
    text-align: center;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.42);
    animation: eventPanelIn 0.5s var(--ease) both;
}

@keyframes eventVeilIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes eventPanelIn {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

/* Misma esquina diagonal que la tarjeta destacada: el modal se lee como
   continuación del paquete que lo abrió, no como una ventana ajena. */
.event-modal-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.9;
    pointer-events: none;
}

.event-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.event-modal-close:hover,
.event-modal-close:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.event-modal-plan { color: var(--gold-deep); }

/* Más contenido que un H2 de sección: `--fs-h2` llega a 3.1rem y aquí
   desbordaría la tarjeta en pantallas anchas. */
.event-modal-title {
    font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem);
    margin-top: 10px;
}

/* `.rule` nace en scaleX(0) y solo lo expande `.reveal.is-visible`; el panel
   no es un reveal, así que sin esto la línea dorada nunca aparecería. */
.event-modal-panel .rule {
    margin: 18px auto;
    transform: none;
}

.event-modal-lead {
    color: var(--muted);
    font-size: 0.94rem;
    max-width: 44ch;
    margin: 0 auto clamp(26px, 3vw, 34px);
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.event-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 96px;
    padding: 16px 10px;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: transform 0.4s var(--ease), border-color 0.4s ease,
                background 0.4s ease, box-shadow 0.4s var(--ease);
}

.event-option:hover,
.event-option:focus-visible {
    transform: translateY(-4px);
    background: var(--white);
    border-color: var(--gold);
    box-shadow: 0 14px 30px rgba(200, 169, 81, 0.24);
}

.event-option-name {
    font-family: var(--font-display);
    font-size: 1.06rem;
    color: var(--ink);
    line-height: 1.2;
}

.event-option-hint {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.event-option:hover .event-option-hint,
.event-option:focus-visible .event-option-hint { color: var(--gold-deep); }

.event-modal-foot {
    margin-top: clamp(22px, 2.5vw, 30px);
    font-size: 0.82rem;
    color: var(--muted);
}

.event-modal-foot a {
    color: var(--gold-deep);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.event-modal-foot a:hover,
.event-modal-foot a:focus-visible { color: var(--ink); }

/* ------------------------------------------------------- 10. Complementos */
.addons {
    margin-top: clamp(70px, 8vw, 110px);
    text-align: center;
}

.addons-title {
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    margin-bottom: 42px;
}

.addons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}

.addon {
    flex: 0 1 320px;
    background: var(--white);
    border: 1px solid rgba(200, 169, 81, 0.5);
    border-radius: var(--radius);
    padding: 32px 26px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
                opacity 1s var(--ease);
}

.addon::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 90px;
    height: 90px;
    background: var(--gold-wash);
    border-radius: 50%;
    transition: transform 0.6s var(--ease);
}

.addon:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
}

.addon:hover::after { transform: scale(1.6); }

.addon h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.addon-price {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--gold-deep);
    font-variant-numeric: tabular-nums;
}

.addon-note {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 12px;
}

/* --- Capacidades (Vid Maker) ---
   Seis bloques de texto sin precio ni CTA: `.addon` no encaja porque su
   jerarquía gira alrededor del importe. Aquí manda el título y el párrafo. */
.specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.spec {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px 30px;
    position: relative;
    overflow: hidden;
    transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease),
                border-color 0.55s ease;
}

.spec:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
    border-color: rgba(200, 169, 81, 0.6);
}

/* Filo dorado superior, igual que en las tarjetas de paquete */
.spec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}

.spec:hover::before { transform: scaleX(1); }

.spec h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.spec p {
    color: var(--muted);
    font-size: 0.92rem;
}

/* ------------------------------------------------------------ 11. Proceso */
.steps {
    list-style: none;
    max-width: 840px;
    margin: 0 auto;
    position: relative;
}

/* Riel dorado que conecta los pasos */
.steps::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 46px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    opacity: 0.5;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    margin-bottom: 34px;
}

.step:last-child { margin-bottom: 0; }

.step-num {
    flex: 0 0 auto;
    min-width: 94px;
    text-align: right;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.9rem + 1.8vw, 3.4rem);
    line-height: 1;
    color: var(--gold);
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
    background: var(--ink);
    padding: 4px 0;
    position: relative;
    z-index: 1;
    transition: opacity 0.5s ease;
    will-change: transform;
}

.step:hover .step-num { opacity: 1; }

.step-body {
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-dark);
    border-left: 2px solid transparent;
    border-radius: var(--radius);
    padding: 26px 30px;
    transition: background 0.45s ease, border-color 0.45s ease, transform 0.45s var(--ease);
}

.step:hover .step-body {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--gold);
    transform: translateX(8px);
}

.step-body h3 {
    font-size: var(--fs-h3);
    color: var(--white);
    margin-bottom: 10px;
}

.step-body p {
    color: var(--muted-dark);
    font-size: 0.92rem;
    max-width: 60ch;
}

/* Compromiso */
.pledge {
    max-width: 840px;
    margin: clamp(60px, 7vw, 90px) auto 0;
    padding: clamp(32px, 4vw, 48px);
    border: 1px solid rgba(200, 169, 81, 0.35);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Esquina diagonal dorada, mismo recurso que la tarjeta destacada */
.pledge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 84px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.85;
}

.pledge ul {
    list-style: none;
    display: inline-block;
    text-align: left;
}

.pledge li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
}

.pledge li:last-child { margin-bottom: 0; }

.pledge li::before {
    content: '✦';
    color: var(--gold);
    font-size: 0.8rem;
    line-height: 1.9;
    flex-shrink: 0;
}

/* ------------------------------------------------------------ 12. Galería */
/* Retícula 2×2: con auto-fit el cuarto mosaico quedaba huérfano en una fila */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    min-height: 340px;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    /* Respaldo de marca por si una fotografía no carga */
    background: var(--ink) linear-gradient(45deg, rgba(200, 169, 81, 0.35) 0 22%, transparent 22.4%);
    isolation: isolate;
}

/* Contenedor con sobremedida: el motor de parallax lo desplaza dentro del
   marco. El margen (20%) debe superar el recorrido máximo del parallax
   (velocidad × media pantalla) o se vería el borde del contenedor. */
.tile-media {
    position: absolute;
    inset: -20% 0;
    z-index: -2;
    will-change: transform;
}

.tile-image {
    position: absolute;
    inset: 0;
    background-image: var(--tile-image);
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 1.4s var(--ease);
}

.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(43, 43, 43, 0.94) 0%, rgba(43, 43, 43, 0.35) 52%, rgba(43, 43, 43, 0.05) 100%);
    transition: opacity 0.5s ease;
}

.tile-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(24px, 3vw, 38px);
    color: var(--white);
    display: block;
}

.tile-body .overline { margin-bottom: 10px; }

.tile-body h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    color: var(--white);
    margin-bottom: 8px;
}

.tile-body p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s var(--ease), opacity 0.5s ease, margin 0.6s var(--ease);
}

.tile-link {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    padding-right: 26px;
    position: relative;
}

.tile-link::after {
    content: '→';
    position: absolute;
    right: 0;
    transition: transform 0.4s var(--ease);
}

.tile:hover .tile-image,
.tile:focus-visible .tile-image { transform: scale(1.07); }

.tile:hover .tile-body p,
.tile:focus-visible .tile-body p {
    max-height: 90px;
    opacity: 1;
    margin-bottom: 16px;
}

.tile:hover .tile-link::after,
.tile:focus-visible .tile-link::after { transform: translateX(7px); }

/* ------------------------------------------------------- 13. Testimonios */
.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
}

.quote {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 46px 30px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
                border-color 0.5s ease, opacity 1s var(--ease);
}

/* Comilla decorativa en Playfair */
.quote::before {
    content: '\201C';
    position: absolute;
    top: 14px;
    left: 26px;
    font-family: var(--font-display);
    font-size: 4.6rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.32;
    transition: opacity 0.5s ease;
}

.quote:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
    border-color: rgba(200, 169, 81, 0.5);
}

.quote:hover::before { opacity: 0.6; }

.quote blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--muted);
    flex: 1 1 auto;
    margin-bottom: 24px;
}

.quote figcaption {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------- 13b. Páginas de categoría
   (bodas.html y futuras: XV años, bautizos, cumpleaños) */

/* Hero de página interna: más bajo que el de portada, el contenido manda */
.hero--page {
    min-height: min(86svh, 780px);
    /* Espacio suficiente para que el indicador de scroll no toque los CTA */
    padding-bottom: 150px;
}

.hero-image--bodas {
    background-image: url('https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
}

/* Globos sobre cielo nocturno: cálido y oscuro. El confeti sobre turquesa
   que había antes era el único hero frío y rompía la paleta dorada. */
.hero-image--xv {
    background-image: url('https://images.unsplash.com/photo-1533294455009-a77b7557d2d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
}

/* Misma imagen que el mosaico del inicio: la transición se siente continua */
.hero-image--cumple {
    background-image: url('https://images.unsplash.com/photo-1607344645866-009c320b63e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
}

/* Bautizos no tiene fotografía propia utilizable —el banner del catálogo
   trae el título incrustado y compite con el H1—, así que su hero se
   construye con la paleta de marca en lugar de recurrir a stock ajeno. */
.hero-image--bautizo {
    background-image:
        radial-gradient(circle at 20% 16%, rgba(200, 169, 81, 0.3), transparent 52%),
        radial-gradient(circle at 80% 78%, rgba(224, 203, 146, 0.2), transparent 46%),
        linear-gradient(150deg, #3c3c3c 0%, #2b2b2b 55%, #1c1c1c 100%);
}

/* La página de demos no representa una celebración concreta —reúne las cuatro
   líneas—, así que tampoco puede apoyarse en la foto de un evento. El halo
   central hace de "pantalla encendida" sin dibujar un dispositivo. */
.hero-image--demos {
    background-image:
        radial-gradient(ellipse 60% 45% at 50% 42%, rgba(200, 169, 81, 0.26), transparent 70%),
        radial-gradient(circle at 12% 88%, rgba(224, 203, 146, 0.16), transparent 42%),
        linear-gradient(165deg, #3a3a3a 0%, #2b2b2b 58%, #1b1b1b 100%);
}

/* Vid Maker es un producto de software: no hay fotografía de evento que lo
   represente sin mentir, así que su hero también se construye con la paleta.
   Las bandas diagonales evocan un carrete sin llegar a dibujarlo. */
.hero-image--video {
    background-image:
        repeating-linear-gradient(115deg, rgba(200, 169, 81, 0.07) 0 2px, transparent 2px 26px),
        radial-gradient(circle at 76% 22%, rgba(200, 169, 81, 0.32), transparent 50%),
        radial-gradient(circle at 18% 82%, rgba(224, 203, 146, 0.18), transparent 44%),
        linear-gradient(150deg, #343434 0%, #2b2b2b 52%, #191919 100%);
}

/* Sin fotografía debajo, el velo debe ser mucho más ligero */
.hero--brand .hero-veil {
    background: linear-gradient(to bottom, rgba(43, 43, 43, 0.5) 0%, rgba(43, 43, 43, 0.15) 45%, rgba(43, 43, 43, 0.7) 100%);
}

/* Nota al pie de las líneas */
.lines-note {
    max-width: 68ch;
    margin: clamp(48px, 5vw, 68px) auto 0;
    padding: 22px 26px;
    border-left: 2px solid var(--gold);
    background: rgba(200, 169, 81, 0.07);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.92rem;
    color: var(--muted);
}

.lines-note strong { color: var(--ink); font-weight: 600; }

/* Miga de pan */
.crumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 22px;
}

.crumbs a {
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.crumbs a:hover { opacity: 0.75; }
.crumbs [aria-current] { color: rgba(255, 255, 255, 0.85); }

/* --- Enlaces a otras colecciones (páginas interiores) ---
   Más ligeras que las `.tile` de la portada: aquí no se trata de detenerse a
   mirar la galería, sino de saltar rápido a otra colección. Por eso la banda
   visual es corta y el pie se limita al nombre y la flecha. */
.crosslinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

/* Dos catálogos de plantillas: a un tercio del ancho cada tarjeta quedaría
   descolgada a la izquierda, así que el par se centra. */
.crosslinks--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 840px;
    margin-inline: auto;
}

.crosslink {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease),
                border-color 0.55s ease;
}

.crosslink:hover,
.crosslink:focus-visible {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(200, 169, 81, 0.6);
}

.crosslink-visual {
    display: block;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    /* El recorte lo hace el `overflow: hidden` de la tarjeta */
    transition: transform 0.7s var(--ease);
}

.crosslink:hover .crosslink-visual,
.crosslink:focus-visible .crosslink-visual { transform: scale(1.06); }

/* Mismas imágenes que los heroes de cada colección: el salto se siente
   continuo al llegar a la otra página. */
.crosslink-visual--bodas {
    background-image: url('https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
}

.crosslink-visual--xv {
    background-image: url('https://images.unsplash.com/photo-1533294455009-a77b7557d2d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
}

.crosslink-visual--cumple {
    background-image: url('https://images.unsplash.com/photo-1607344645866-009c320b63e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
}

/* Bautizos se construye con la paleta, igual que su hero. En una banda de
   ~400px los radiales del hero se ven lavados y la tarjeta parece una imagen
   que no cargó, así que aquí van más intensos y con la trama diagonal que
   deja claro que el fondo es deliberado. */
.crosslink-visual--bautizo {
    background-image:
        repeating-linear-gradient(115deg, rgba(200, 169, 81, 0.06) 0 2px, transparent 2px 22px),
        radial-gradient(circle at 26% 18%, rgba(200, 169, 81, 0.5), transparent 56%),
        radial-gradient(circle at 80% 84%, rgba(224, 203, 146, 0.3), transparent 50%),
        linear-gradient(150deg, #454545 0%, #2b2b2b 55%, #1a1a1a 100%);
}

.crosslink-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 24px 26px 26px;
}

.crosslink-body h3 { font-size: 1.35rem; }

/* `.tile-link` usa `--gold` porque vive sobre el velo oscuro de la galería.
   Aquí el fondo es blanco y ese dorado solo da 2.3:1, así que va el profundo. */
.crosslink .tile-link { color: var(--gold-deep); }

.crosslink:hover .tile-link::after,
.crosslink:focus-visible .tile-link::after { transform: translateX(7px); }

/* --- Líneas: filas alternadas, imagen y detalle --- */
.lines {
    display: grid;
    gap: clamp(56px, 7vw, 96px);
}

.line {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

/* Alterna el lado de la imagen sin alterar el orden del HTML */
.line--flip .line-media { order: 2; }

/* El marco define la altura y recorta; el parallax mueve la imagen DENTRO
   de él. Si se moviera el marco, la fila entera se desalinearía al scroll. */
.line-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    box-shadow: var(--shadow-soft);
}

.line-media img {
    position: absolute;
    inset: -12% 0;
    width: 100%;
    height: 124%;      /* Sobremedida que cubre el recorrido del parallax */
    object-fit: cover;
    will-change: transform;
}

/* Las portadas de cumpleaños son capturas de 940×788 (casi cuadradas), no
   mockups verticales: con el marco 4/5 se recortarían por los lados. */
.lines--wide .line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lines--wide .line-media { aspect-ratio: 6 / 5; }

/* Variantes de estilo dentro de una misma línea (XV años) */
.line-variants {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.line-variant { position: relative; }

.line-variant figcaption {
    margin-top: 10px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.line--dark .line-variant figcaption { color: var(--muted-dark); }

.line-variant .line-media { aspect-ratio: 3 / 4; }

.line-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--gold);
    color: var(--white);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: 100px;
    box-shadow: var(--shadow-gold);
}

.line-body h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
    margin-bottom: 16px;
}

.line-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.line-price .amount {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.1vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.line-price .was {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--muted);
    text-decoration: line-through;
    text-transform: none;
    letter-spacing: 0;
    order: 2;
}

.line-save {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-deep);
    margin-bottom: 14px;
}

.line-desc {
    color: var(--muted);
    margin: 14px 0 22px;
    max-width: 56ch;
}

.line-more {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--muted);
    margin-bottom: 14px;
}

.line-features {
    list-style: none;
    margin-bottom: 30px;
    /* Dos columnas cuando hay espacio: nueve funciones en una sola
       columna alargan demasiado la fila */
    columns: 2;
    column-gap: 34px;
}

.line-features li {
    break-inside: avoid;
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--muted);
    padding: 0 0 14px 20px;
    position: relative;
}

.line-features li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 0.66rem;
    color: var(--gold);
}

.line-features strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* Acciones de cada línea: apartar (principal) y ver el demo en vivo.
   El demo es el único activo que las portadas estáticas no pueden dar. */
.line-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.line-demo {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 4px 26px 4px 0;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

/* Icono de "abrir vista previa" */
.line-demo::after {
    content: '⤢';
    position: absolute;
    right: 0;
    transition: transform 0.35s var(--ease);
}

.line-demo:hover,
.line-demo:focus-visible { color: var(--ink); }

.line-demo:hover::after { transform: scale(1.15); }

.line--dark .line-demo { color: var(--gold); }
.line--dark .line-demo:hover { color: var(--white); }

/* --- Modal de demo a pantalla completa --- */
.demo-modal[hidden] { display: none; }

.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    animation: demoIn 0.35s var(--ease);
}

@keyframes demoIn {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.demo-modal-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(14px, 2.5vw, 26px);
    background: var(--ink);
    border-bottom: 1px solid rgba(200, 169, 81, 0.3);
}

.demo-modal-title {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.demo-modal-open {
    font-family: var(--font-sans);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-dark);
    text-decoration: none;
    padding: 9px 14px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.demo-modal-open:hover,
.demo-modal-open:focus-visible {
    color: var(--gold);
    border-color: var(--gold);
}

.demo-modal-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.demo-modal-close:hover,
.demo-modal-close:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.demo-modal-body {
    flex: 1 1 auto;
    position: relative;
    background: var(--white);
}

.demo-modal-body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Opaco a propósito: en cuanto pinta, tapa el aviso de carga que tiene
       debajo. Así el aviso no puede quedarse encima de un demo ya visible
       aunque el evento `load` no llegue. */
    background: var(--white);
}

/* Aviso mientras carga el demo */
.demo-modal-body::before {
    content: 'Cargando invitación…';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--tint);
}

.demo-modal.is-loaded .demo-modal-body::before { display: none; }

/* Fila destacada y fila oscura */
.line--featured .line-media {
    box-shadow: 0 26px 56px rgba(200, 169, 81, 0.28);
}

.line--dark {
    background: var(--ink);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 48px);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.line--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.9;
}

.line--dark h3 { color: var(--white); }
.line--dark .line-price,
.line--dark .line-desc,
.line--dark .line-more,
.line--dark .line-features li { color: var(--muted-dark); }
.line--dark .line-price .amount { color: var(--white); }
.line--dark .line-price .was { color: var(--muted-dark); }
.line--dark .line-save { color: var(--gold); }
.line--dark .line-features strong { color: var(--white); }
.line--dark .currency { color: var(--muted-dark); }

/* Pasos compactos para páginas de categoría */
.steps--compact .step { margin-bottom: 24px; }

/* Cita destacada */
.feature-quote {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-top: 54px;
}

.feature-quote::before {
    content: '\201C';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.35;
}

.feature-quote blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 22px;
}

.feature-quote figcaption {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 900px) {
    .line {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    /* En una sola columna la imagen siempre va arriba */
    .line--flip .line-media,
    .line--flip .line-variants { order: 0; }
    .line-media { aspect-ratio: 3 / 2; }
    .line-variant .line-media { aspect-ratio: 3 / 4; }
    .line-features { columns: 1; }
}

/* ---------------------------------------------------------------- 14. FAQ
   Acordeón con <details>: abre y cierra sin JavaScript y es accesible
   por teclado de forma nativa. */
.faq {
    max-width: 880px;
    margin: 0 auto;
}

.faq-group + .faq-group { margin-top: 52px; }

.faq-group > .overline {
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
    list-style: none;
    transition: color 0.3s ease;
}

/* Oculta el triángulo por defecto del navegador */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary:hover { color: var(--gold-deep); }

/* Indicador + / × dibujado con dos trazos */
.faq-item summary::after {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 6px;
    background:
        linear-gradient(var(--gold) 0 0) center / 100% 1.5px no-repeat,
        linear-gradient(var(--gold) 0 0) center / 1.5px 100% no-repeat;
    transition: transform 0.4s var(--ease);
}

.faq-item[open] summary { color: var(--gold-deep); }
.faq-item[open] summary::after { transform: rotate(135deg); }

.faq-answer {
    padding: 0 46px 26px 0;
    animation: faqOpen 0.45s var(--ease);
}

.faq-answer p {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.75;
}

.faq-answer p + p,
.faq-answer ul { margin-top: 12px; }

.faq-answer ul {
    list-style: none;
    display: grid;
    gap: 12px;
}

.faq-answer li {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.75;
    padding-left: 20px;
    position: relative;
}

.faq-answer li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.66rem;
    color: var(--gold);
}

.faq-answer strong { color: var(--ink); font-weight: 600; }
.faq-answer em { font-family: var(--font-display); font-style: italic; }

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Cierre de sección */
.faq-cta {
    text-align: center;
    margin-top: clamp(48px, 5vw, 68px);
}

.faq-cta p {
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 20px;
}

/* ------------------------------------------------------------- 15. Footer */
.footer {
    background: var(--ink);
    color: var(--white);
    padding: clamp(72px, 8vw, 110px) var(--gutter) 32px;
    position: relative;
}

/* Filo dorado superior */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--gold);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.6fr 1fr;
    gap: clamp(32px, 4vw, 54px);
    margin-bottom: clamp(48px, 6vw, 70px);
}

.footer-col { min-width: 0; }
.footer-col--brand .logo-plate { margin-left: 0; }

.footer-desc {
    color: var(--muted-dark);
    font-size: 0.92rem;
    margin: 20px 0 26px;
    max-width: 40ch;
}

.footer-links,
.footer-contact { list-style: none; }

.footer-links li,
.footer-contact li { margin-bottom: 13px; }

.footer-links a,
.footer-contact a {
    color: var(--muted-dark);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.3s ease;
    position: relative;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-links a:focus-visible,
.footer-contact a:focus-visible { color: var(--gold); }

.footer-contact span {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2px;
}

.social { display: flex; gap: 12px; }

.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(200, 169, 81, 0.6);
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.35s ease, color 0.35s ease,
                transform 0.35s var(--ease), border-color 0.35s ease;
}

.social a:hover,
.social a:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
    transform: translateY(-4px);
}

.footer-bottom {
    border-top: 1px solid var(--line-dark);
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p,
.legal a {
    font-size: 0.8rem;
    color: #8d8880;
}

.legal a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal a:hover,
.legal a:focus-visible { color: var(--gold); }

.legal .sep { color: #4a4a4a; margin: 0 10px; }

/* ------------------------------------------------- 15b. Barra fija móvil
   Solo existe en pantallas pequeñas: en el teléfono el menú está plegado y
   los CTA de cada línea quedan lejos al hacer scroll. */
.mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    display: none;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(43, 43, 43, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(200, 169, 81, 0.35);
    transform: translate3d(0, 110%, 0);
    transition: transform 0.45s var(--ease);
}

.mobile-bar.is-visible { transform: translate3d(0, 0, 0); }

.mobile-bar .btn {
    flex: 1 1 auto;
    padding: 14px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.mobile-bar .btn-ghost {
    flex: 0 0 auto;
    padding-inline: 18px;
}

@media (max-width: 900px) {
    .mobile-bar { display: flex; }
    /* Que la barra no tape el final del footer */
    .footer { padding-bottom: 96px; }
}

/* --------------------------------------------------------- 16. Responsive */
@media (max-width: 1180px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* La regla de arriba también alcanza a las variantes de Vid Maker por
       orden de cascada; la tarjeta única debe seguir siendo única. */
    .pricing-grid--1 { grid-template-columns: minmax(0, 380px); }

    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crosslinks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    /* La regla anterior alcanza también a la variante de dos por cascada */
    .crosslinks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menú móvil
   El corte va en 1080px y no en 900: con siete enlaces más el botón, la
   navegación horizontal no cabe entre 900 y ~1040px y el CTA se salía del
   padding derecho del header. Por encima de 1080px sobran 40px, así que
   ahí la barra horizontal sigue siendo la correcta. */
@media (max-width: 1080px) {
    .nav-toggle { display: block; }

    .nav-links {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(80vw, 350px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 26px;
        padding: 110px 38px 44px;
        background: var(--ink);
        border-left: 2px solid var(--gold);
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        transition: transform 0.55s var(--ease), visibility 0.55s;
        z-index: 155;
    }

    .nav-links a,
    .header.is-stuck .nav-links a {
        color: var(--white);
        font-size: 0.86rem;
        text-shadow: none;
    }

    .nav-links .btn { color: var(--white); }

    body.nav-open .nav-links {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    /* Los enlaces entran escalonados detrás del panel, no todos de golpe */
    .nav-links a {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
        transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    }

    body.nav-open .nav-links a {
        opacity: 1;
        transform: none;
    }

    .nav-links a:nth-child(1) { transition-delay: 0.12s; }
    .nav-links a:nth-child(2) { transition-delay: 0.17s; }
    .nav-links a:nth-child(3) { transition-delay: 0.22s; }
    .nav-links a:nth-child(4) { transition-delay: 0.27s; }
    .nav-links a:nth-child(5) { transition-delay: 0.32s; }
    .nav-links a:nth-child(6) { transition-delay: 0.37s; }
    .nav-links a:nth-child(7) { transition-delay: 0.42s; }
    /* La portada llegó a ocho elementos al sumar "Video" y a nueve con "Demos" */
    .nav-links a:nth-child(8) { transition-delay: 0.47s; }
    .nav-links a:nth-child(9) { transition-delay: 0.52s; }

    body.nav-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(43, 43, 43, 0.6);
        z-index: 150;
    }
}

/* Franja justo por encima del corte móvil: la portada llega a nueve elementos
   de navegación y con la separación normal se sale del padding derecho. Aquí
   se aprietan las separaciones en lugar de recortar el menú. El rango tiene
   `min-width` para no tocar el panel móvil, que usa su propio `gap`. */
@media (min-width: 1081px) and (max-width: 1200px) {
    .nav-links { gap: 15px; }
    .nav-links a { letter-spacing: 0.12em; }
}

@media (max-width: 768px) {
    :root { --header-h: 78px; }

    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid--1 { grid-template-columns: 1fr; }
    .plan--featured { order: -1; }

    .specs { grid-template-columns: 1fr; }

    /* Tres tarjetas de 100px de ancho no se leen: pasan a una columna */
    .crosslinks { grid-template-columns: 1fr; }
    .crosslink-visual { aspect-ratio: 21 / 9; }

    .hero-actions .btn { flex: 1 1 100%; }

    .gallery { grid-template-columns: 1fr; }
    .tile { aspect-ratio: 3 / 4; max-height: 460px; }

    /* En táctil el texto de la galería va siempre visible */
    .tile-body p { max-height: 90px; opacity: 1; }

    .steps::before { left: 18px; }

    .step {
        flex-direction: column;
        gap: 12px;
    }

    .step-num {
        min-width: 0;
        text-align: left;
        padding-left: 40px;
        background: transparent;
        opacity: 1;
    }

    .step:hover .step-body { transform: none; }

    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col--brand .logo-plate { margin-inline: auto; }
    .footer-desc { margin-inline: auto; }
    .social { justify-content: center; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .legal .sep { display: none; }
    .legal a { display: block; margin-bottom: 8px; }

    /* Seis opciones en tres columnas quedan demasiado estrechas aquí */
    .event-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .plan { padding: 32px 22px 28px; }
    .quote { padding: 42px 22px 26px; }
    .logo-word { font-size: 1.3rem; }

    .event-option { min-height: 84px; padding: 14px 8px; }
    .event-option-name { font-size: 0.98rem; }
}

/* ------------------------------------------------------ 17. Accesibilidad */

/* Sin parallax, sin cortinas, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html.js .reveal,
    html.js .intro-step:not(.mask),
    .mask > span {
        opacity: 1 !important;
        transform: none !important;
    }

    .rule { transform: scaleX(1) !important; }
    .hero-image { transform: scale(1); }
    [data-parallax] { transform: none !important; }
}

@media (prefers-contrast: more) {
    :root {
        --muted: #3d3d3d;
        --muted-dark: #d6d2ca;
        --line: rgba(43, 43, 43, 0.28);
    }
}

@media print {
    .intro,
    .header,
    .scroll-progress,
    .deco,
    .scroll-cue { display: none !important; }

    body { background: #fff; color: #000; }
    .section { padding: 20px 0; break-inside: avoid; }
    .section--dark, .footer, .plan--dark { background: #fff !important; color: #000 !important; }
    .section--dark h2, .section--dark h3, .footer * { color: #000 !important; }
    a { text-decoration: underline; }
}