/*
 * Cursos AB — diseño editorial premium (Inter unificado, aire, sombras suaves)
 */

:root {
    --bs-primary: #5c1418;
    --bs-primary-rgb: 92, 20, 24;
    --ab-primary: #5c1418;
    --ab-secondary: #1f1f1f;
    --ab-accent-blue: #3d6ea8;
    --ab-text: #2b2b2b;
    --ab-text-muted: #5f6368;
    --ab-white: #ffffff;
    --ab-cream-panel: #f7f5f2;
    --ab-footer-bg: #383838;
    --ab-footer-bar: #2a2a2a;
    --ab-link-gold: #e8cf7a;
    --ab-accent-heading: #1e3a5f;
    --ab-gradient-1: #e8cf7a;
    --ab-gradient-2: #6b3a8a;
    --ab-gradient-3: #5c1418;
    --ab-gradient-mid: #9a7348;
    --ab-gradient-soft: #b89462;
    /* Hero Fondo-abstracto-rojo — muestreados del fondo */
    --hero-rust-deep: #6b2412;
    --hero-rust: #7a3018;
    --hero-ember: #983018;
    --hero-terracotta: #a84822;

    --border-subtle: 1px solid rgba(0, 0, 0, 0.08);
    --border-hairline: 1px solid #e6e4e1;

    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;
    --sp-11: 6rem;

    /* Ritmo vertical ampliado (≈ x2 respecto al anterior compacto) */
    --section-y: clamp(4rem, 9vw, 7rem);
    --section-y-tight: clamp(2.75rem, 6vw, 4.5rem);
    --section-inner-max: 72rem;
    --section-inline-padding: clamp(1rem, 2.5vw, 2rem);
    --fondo2-content-max: min(56rem, 100%);
    --fs-fondo2-lead: clamp(1.625rem, 2.8vw, 2.4rem);
    --fs-fondo2-cta: clamp(2.375rem, 3.45vw, 3rem);
    --fs-media-lead: clamp(1.75rem, 3.4vw, 3.125rem);
    --fs-section-title: clamp(1.375rem, 1.425vw + 1.02rem, 1.92rem);
    --carousel-main-max: none;

    --fs-caption: 0.6875rem;
    --fs-small: 0.8125rem;
    --fs-body: 1.0625rem;
    --fs-body-lg: 1.125rem;
    --fs-lead: clamp(1.0625rem, 1.35vw, 1.125rem);
    --fs-subhead: clamp(0.9375rem, 1.25vw, 1rem);
    --fs-h3: clamp(0.9375rem, 1.35vw, 1.0625rem);
    --fs-h2-section: clamp(0.8125rem, 1.15vw + 0.35rem, 1rem);
    /* Hero: kicker ~32 % y subtítulo ~38 % del titular (misma escala vw) */
    --fs-hero-title: clamp(2.25rem, 5.6vw + 0.35rem, 5.5rem);
    --fs-hero-kicker: clamp(1rem, 1.75vw + 0.4rem, 1.75rem);
    --fs-hero-sub: clamp(1.125rem, 2.25vw + 0.45rem, 2.125rem);
    --fs-price: clamp(1.65rem, 3vw, 2.15rem);

    --lh-tight: 1.18;
    --lh-snug: 1.38;
    --lh-body: 1.65;
    --lh-heading: 1.32;

    --radius-ui: 10px;

    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.08);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ab-text);
    background: var(--ab-white);
    -webkit-font-smoothing: antialiased;
}

/* === Criterio único de márgenes (Bootstrap .container) === */
.site-header .container,
.site-footer .container,
.site-main .landing-container {
    width: 100%;
    max-width: var(--section-inner-max);
    margin-inline: auto;
    padding-inline: var(--section-inline-padding);
    box-sizing: border-box;
}

/* Ancestros con overflow ≠ visible rompen position:sticky (Polypane / MDN) */
.site-main.site-main--stack {
    overflow: visible;
}

html,
body {
    overflow-x: clip;
    overflow-y: auto;
}

.site-main > section {
    position: relative;
}

.site-main > section .landing-container {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.site-main .landing-row {
    --bs-gutter-x: 1.5rem;
}

.site-main .landing-col {
    min-width: 0;
}

.site-main .landing-col img.img-fluid,
.site-main .landing-col > .img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
}

/* fondo2: miniaturas completas (altura máxima, sin recorte lateral) */
.site-main .section-fondo2 .cuaderno-thumb.img-fluid {
    width: auto !important;
    height: auto !important;
    max-height: var(--fondo2-thumb-h) !important;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
}

.site-main .section-fondo2 .cuaderno-thumb--practice.img-fluid,
.site-main .section-fondo2 .cuaderno-thumb--preview.img-fluid {
    width: var(--fondo2-thumb-box-w) !important;
    max-width: var(--fondo2-thumb-box-w) !important;
    height: var(--fondo2-thumb-box-h) !important;
    max-height: var(--fondo2-thumb-box-h) !important;
    object-fit: contain;
    object-position: center center;
}

/* Ritmo común: las secciones respiran por padding interno, no por márgenes externos variables. */
.site-main > section:not(.section-hero) {
    margin-block: 0 !important;
}

/* -------------------------------------------------------------------------
   Apilamiento por capas (JS: stack-scroll.js) — desktop ≥992px
   Host reserva altura; .stack-pin-layer fija top:0 cuando .is-stack-pin-active
   ------------------------------------------------------------------------- */
.site-main--stack > section {
    margin-block: 0;
}

@media (min-width: 992px) {
    .site-main--stack.is-stack-ready > section {
        position: relative;
    }

    /* Host pin: espacio en el flujo del documento */
    .site-main--stack.is-stack-ready > section.stack-pin-host {
        position: relative;
        z-index: var(--stack-z, 10);
        min-height: var(--stack-min-h, 100vh);
        min-height: var(--stack-min-h, 100svh);
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host.parallax-container {
        overflow: visible;
        isolation: auto;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host .stack-pin-spacer {
        display: block;
        width: 100%;
        height: 0;
        pointer-events: none;
    }

    /* Capa en flujo normal hasta que JS activa el pin */
    .site-main--stack.is-stack-ready > section.stack-pin-host .stack-pin-layer {
        position: relative;
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
    }

    /* Pin activo: top:0 + z-index (la sección siguiente cubre por encima) */
    .site-main--stack.is-stack-ready > section.stack-pin-host.is-stack-pin-active .stack-pin-layer {
        position: fixed;
        top: var(--stack-top, 0);
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        z-index: var(--stack-z, 10);
        overflow: hidden;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host.is-stack-pin-past .stack-pin-layer {
        visibility: hidden;
        pointer-events: none;
    }

    /* Pin inferior: bottom:0 (mismo tramo scroll que top; JS refuerza top/bottom) */
    .site-main--stack.is-stack-ready > section.stack-pin-host--bottom.is-stack-pin-active .stack-pin-layer {
        position: fixed;
        top: auto !important;
        bottom: var(--stack-bottom, 0) !important;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        z-index: var(--stack-z, 10);
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host.section-escritura .stack-pin-layer,
    .site-main--stack.is-stack-ready > section.stack-pin-host.section-cuadernos .stack-pin-layer {
        background-color: #f8f5f0;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host.section-testimonios .stack-pin-layer,
    .site-main--stack.is-stack-ready > section#section-testimonios.stack-pin-host .stack-pin-layer {
        background-color: #fff;
    }

    .site-main--stack.is-stack-ready > section.section-testimonios,
    .site-main--stack.is-stack-ready > section#section-testimonios {
        background-color: #fff !important;
    }

    .site-main--stack.is-stack-ready > section.section-videos {
        background-color: transparent;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host .parallax-moving-layer:not(.landing-parallax-partitura) {
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        z-index: 0;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host .parallax-moving-layer.landing-parallax-partitura {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        min-height: 100%;
        z-index: 0;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host .landing-container {
        position: relative;
        z-index: 10;
    }

    /* Hero */
    .site-main--stack.is-stack-ready > section.stack-pin-host.section-hero .stack-pin-layer {
        background-color: transparent;
    }

    .site-main--stack.is-stack-ready > section.stack-pin-host.section-hero .stack-pin-layer::before {
        content: none;
        display: none;
    }

    /* Multimedia — ya no usa stack-pin */
    .site-main--stack.is-stack-ready > section.section-media {
        background-color: var(--ab-cream-panel);
    }

    /* Solo fondo2 cubre al hero: sombra suave en esa transición */
    .site-main--stack.is-stack-ready > section:not(.stack-pin-host) {
        position: relative;
    }

    .site-main--stack.is-stack-ready > section.section-fondo2.is-stack-covering {
        z-index: calc(var(--stack-z, 10) + 10);
    }

    .site-main--stack.is-stack-ready > section.is-stack-covering {
        box-shadow: 0 -18px 48px rgba(8, 6, 5, 0.14);
    }

    .site-main--stack.is-stack-ready > section.section-fondo2 {
        background-color: #f8f5f0;
    }

    .site-main--stack.is-stack-ready > section.section-pilares,
    .site-main--stack.is-stack-ready > section.section-media,
    .site-main--stack.is-stack-ready > section.section-escritura,
    .site-main--stack.is-stack-ready > section.section-cuadernos,
    .site-main--stack.is-stack-ready > section.section-faq {
        background-color: #f8f5f0;
    }

    .site-main--stack.is-stack-ready > section.section-carousel {
        background-color: #fff !important;
    }

    .site-main--stack.is-stack-ready > section.section-quote,
    .site-main--stack.is-stack-ready > section#section-quote,
    .site-main--stack.is-stack-ready > section.section-pago,
    .site-main--stack.is-stack-ready > section#section-pago {
        background-color: #f2ebe9 !important;
    }
}

@media (max-width: 991.98px) {
    .site-main--stack > section:not(.section-hero),
    .site-main--stack > section.stack-pin-host:not(.section-hero) .stack-pin-layer {
        top: auto !important;
        bottom: auto !important;
        min-height: auto !important;
        height: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    .site-main--stack > section.section-hero,
    .site-main--stack > section.section-hero .stack-pin-layer {
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-main--stack > section {
        position: static !important;
        top: auto !important;
        min-height: auto !important;
        z-index: auto !important;
    }
}

/* Carrusel principal — 3 diapositivas visibles a la vez */
.section-carousel {
    background-color: transparent;
}

.section-carousel .landing-container,
.section-carousel .landing-row,
.section-carousel .landing-col {
    background-color: transparent;
}

.section-carousel .landing-container {
    max-width: min(96rem, 100%);
}

.section-carousel .landing-col {
    width: 100%;
    max-width: 100%;
}

.main-carousel {
    --carousel-visible: 3;
    --carousel-gap: clamp(0.5rem, 1vw, 1rem);
    --carousel-slide-w: calc((100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible));
    --carousel-img-max-h: min(34rem, 72vh);
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(2.5rem, 4vw, 3.25rem);
}

.main-carousel__viewport {
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-ui);
}

.main-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--carousel-gap);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.main-carousel__slide {
    flex: 0 0 var(--carousel-slide-w);
    width: var(--carousel-slide-w);
    max-width: var(--carousel-slide-w);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease;
}

.main-carousel__slide.is-active {
    opacity: 1;
}

.main-carousel__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--carousel-img-max-h);
    margin-inline: auto;
    object-fit: contain;
    object-position: center center;
    background: transparent;
    box-shadow: none;
}

.main-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.main-carousel__arrow:hover {
    background: #fff;
    box-shadow: var(--shadow-float);
}

.main-carousel__arrow--prev {
    left: 0;
}

.main-carousel__arrow--next {
    right: 0;
}

.main-carousel__arrow-icon {
    display: block;
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    color: rgba(30, 28, 26, 0.75);
}

.main-carousel__arrow--prev .main-carousel__arrow-icon {
    transform: rotate(135deg);
}

.main-carousel__arrow--next .main-carousel__arrow-icon {
    transform: rotate(-45deg);
}

.main-carousel__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.main-carousel__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.main-carousel__dot.active,
.main-carousel__dot[aria-current='true'] {
    background-color: rgba(92, 20, 24, 0.55);
    transform: scale(1.15);
}

@media (min-width: 992px) {
    .main-carousel {
        --carousel-img-max-h: min(36rem, 75vh);
    }

    .section-carousel .landing-container {
        max-width: min(104rem, calc(100vw - 2 * var(--section-inline-padding)));
    }
}

/* -------------------------------------------------------------------------
   Tipografía landing — Inter en todo el sitio principal
   • Títulos de sección: sans, negrita, tipo oración
   • Leads / párrafos / UI: sans, peso medio o semibold
   • Hero: eyebrow en versalitas (CSS); titular en tipo oración
   ------------------------------------------------------------------------- */
.site-main h2.display-6,
.site-main h2.landing-title,
.site-main .landing-title,
.site-main .section-faq__title {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ab-text);
    text-transform: none;
    letter-spacing: -0.015em;
}

.site-main .section-fondo2__lead,
.site-main .landing-lead-lg {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ab-text);
}

.site-main .section-media__lead {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ab-white);
}

.site-main .section-fondo2__lead.text-secondary {
    color: var(--ab-text) !important;
}

.site-main .cuaderno-cta-line {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ab-text);
}

.site-main .landing-col h3.fs-5,
.site-main .landing-col h3.cuadernos-catalog__subtitle {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ab-text);
    text-transform: none;
    letter-spacing: -0.01em;
}

.site-main .lead {
    font-family: var(--font-sans);
    font-weight: 500;
}

/* Ajuste fino títulos largos con utilidades display-* */
.landing-title {
    text-wrap: balance;
    font-size: var(--fs-section-title);
    line-height: 1.34;
    text-align: center;
    max-width: 52rem;
    margin-inline: auto;
}

.section-pilares .landing-title {
    font-size: var(--fs-fondo2-cta);
    line-height: 1.45;
    max-width: 42rem;
}

.section-cuadernos .landing-title {
    font-size: var(--fs-fondo2-cta);
    line-height: 1.45;
    max-width: min(52rem, 96vw);
}

.section-escritura {
    --escritura-block-max: min(56rem, 92vw);
}

.section-escritura .escritura-content-block {
    width: 100%;
    max-width: var(--escritura-block-max);
    margin-inline: auto;
}

.section-escritura .landing-title {
    font-size: var(--fs-fondo2-cta);
    line-height: 1.45;
    width: 100%;
    max-width: none;
    text-wrap: pretty;
}

.section-escritura .escritura-reveal-host {
    width: 100%;
    max-width: none;
}

.site-main h2.display-6 {
    text-align: center;
    text-wrap: balance;
}

/* Cabecera: estilos en site-nav.css (vino de marca + cristal en home) */

/* Home: la capa parallax del hero sube bajo el header fijo */
body.home .section-hero.parallax-container,
body.front-page .section-hero.parallax-container {
    overflow: visible;
}

body.home .section-hero .parallax-moving-layer,
body.front-page .section-hero .parallax-moving-layer,
.site-main--stack.is-stack-ready > section.stack-pin-host.section-hero .parallax-moving-layer {
    top: calc(-1 * var(--header-bar-min-height)) !important;
    height: calc(100vh + var(--header-bar-min-height)) !important;
    height: calc(100svh + var(--header-bar-min-height)) !important;
    min-height: calc(100vh + var(--header-bar-min-height)) !important;
    min-height: calc(100svh + var(--header-bar-min-height)) !important;
}

/* Hero — velo sobre imagen; altura y espaciado vía utilidades Bootstrap (.min-vh-100 .py-5) */
.section-hero {
    position: relative;
    background-size: cover;
    background-position: center center;
}

.section-hero::before {
    content: none;
    display: none;
}

@media (min-width: 1025px) {
    .section-hero:not(.parallax-container) {
        background-attachment: fixed;
    }
}

@media (max-width: 1024px) {
    .section-fondo2,
    .section-media,
    .section-pilares,
    .section-escritura,
    .section-cuadernos {
        background-attachment: scroll !important;
    }
}

/* Hero: contenedor ancho; bloque centrado verticalmente */
.section-hero .landing-container {
    max-width: min(96rem, 100%);
}

.section-hero .landing-row {
    align-items: center !important;
    min-height: min(100vh, 100dvh);
    padding-block: clamp(2rem, 5vh, 3.25rem) !important;
}

/* Home: cabecera fija — reservar altura para que «Curso de» no quede detrás del menú */
body.home .section-hero .landing-container,
body.front-page .section-hero .landing-container {
    box-sizing: border-box;
    min-height: min(100vh, 100dvh);
    padding-top: var(--header-bar-min-height);
}

body.home .section-hero .landing-row,
body.front-page .section-hero .landing-row {
    min-height: calc(min(100vh, 100dvh) - var(--header-bar-min-height));
    padding-top: clamp(1.25rem, 3.5vh, 2.5rem) !important;
    padding-bottom: clamp(2rem, 5vh, 3.25rem) !important;
}

.section-hero .landing-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

.section-hero .hero-text-block {
    width: min(92vw, 88rem);
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    /* Ligero ajuste óptico; en < 4K se anula para no chocar con el menú fijo */
    transform: translateY(calc(-1 * clamp(1rem, 3vh, 2.5rem)));
}

/* Por debajo de ~4K: sin empujar el bloque hacia arriba (evita ocultar el kicker) */
@media (max-width: 2560px) {
    .section-hero .hero-text-block {
        transform: translateY(calc(-1 * clamp(0.35rem, 1vh, 1rem)));
    }
}

@media (max-width: 1600px) {
    .section-hero .hero-text-block {
        transform: none;
    }
}

.section-hero .hero-title-wrap,
.section-hero .hero-title,
.section-hero .hero-title__text {
    text-align: center;
}

.hero-kicker {
    font-family: var(--font-sans);
    font-size: var(--fs-hero-kicker);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: clamp(1.75rem, 4.5vw, 3rem) !important;
    text-align: center;
}

.hero-title-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.hero-title {
    font-family: var(--font-sans);
    font-size: var(--fs-hero-title);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
}

.hero-title__line {
    display: block;
    width: 100%;
}

.hero-title__line--typed {
    margin-top: 0.06em;
}

.hero-title__text {
    display: inline;
    text-align: center;
}

.hero-title__cursor {
    display: inline-block;
    width: 0;
    min-height: 0.92em;
    margin-left: 0.12em;
    vertical-align: baseline;
    border-right: 2px solid rgba(255, 180, 140, 0.95);
    animation: cursor-parpadeo 0.8s step-end infinite;
    transition: opacity 0.35s ease;
}

.hero-title__line--typed.is-typed-complete .hero-title__cursor {
    opacity: 0;
    visibility: hidden;
    animation: none;
    border-color: transparent;
}

.hero-subtitle-wrap {
    margin-top: clamp(0.75rem, 2vw, 1.25rem);
    text-align: center;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: var(--fs-hero-sub);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: balance;
    text-align: center;
}

.hero-cta-wrap {
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.btn-hero-curso {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 1.75vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    text-decoration: none;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    padding: 0.72rem clamp(1.75rem, 4.5vw, 2.5rem);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.btn-hero-curso:hover,
.btn-hero-curso:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.82);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.btn-hero-curso:active {
    transform: translateY(0);
}

#section-pago {
    scroll-margin-top: calc(var(--header-bar-min-height, 3.75rem) + 1rem);
}

/* Botón volver arriba */
.scroll-to-top {
    position: fixed;
    right: clamp(1rem, 2.5vw, 1.35rem);
    bottom: clamp(1rem, 2.5vw, 1.35rem);
    z-index: 1020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #454545 0%, #323232 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.65rem);
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
    background: linear-gradient(145deg, #525252 0%, #3a3a3a 100%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
}

.scroll-to-top svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
    .btn-hero-curso,
    .scroll-to-top {
        transition: none;
    }

    .btn-hero-curso:hover,
    .btn-hero-curso:focus-visible {
        transform: none;
    }
}

@keyframes cursor-parpadeo {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: rgba(255, 180, 140, 0.95);
    }
}

/* Fondos partitura */
.section-fondo2,
.section-media,
.section-pilares,
.section-escritura,
.section-cuadernos {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Tras el hero: partitura en flujo hasta top:0; JS la fija durante el bloque posterior. */
body.home .site-main--stack,
body.front-page .site-main--stack {
    position: relative;
    z-index: 0;
    background: transparent;
}

.landing-below-hero {
    position: relative;
}

.landing-below-hero > .landing-partitura-sticky {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.landing-below-hero.is-partitura-fixed > .landing-partitura-sticky {
    position: fixed;
    inset: 0;
}

.landing-below-hero.is-partitura-bottom > .landing-partitura-sticky {
    position: absolute;
    top: auto;
    bottom: 0;
}

.landing-below-hero > .landing-scroll-over-partitura {
    position: relative;
    z-index: 1;
}

/* Sin z-index en hero/wrap: stack-scroll.js asigna capas (hero 10, fondo2 cubre a 20). */
body.home .section-hero,
body.front-page .section-hero {
    position: relative;
    background-color: transparent;
}

body.home .section-hero .stack-pin-layer,
body.front-page .section-hero .stack-pin-layer {
    background-color: transparent;
}

@media (min-width: 992px) {
    /*
     * El bloque posterior completo sube sobre el hero pinneado (z-index 10):
     * partitura (z:0 dentro del bloque) tapa el hero y el contenido (z:1)
     * tapa la partitura. Evita ver textos de fondo2 mezclados con el hero.
     */
    .site-main--stack.is-stack-ready .landing-below-hero {
        z-index: 11;
    }
}

.site-main--stack .landing-scroll-over-partitura > section {
    margin-block: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
}

.site-main--stack .landing-scroll-over-partitura .section-carousel,
.site-main--stack .landing-scroll-over-partitura .section-media,
.site-main--stack .landing-scroll-over-partitura #section-testimonios.section-testimonios {
    background: transparent !important;
    background-color: transparent !important;
}

/* Bandas con fondo propio (sobre la partitura fija) */
.site-main--stack .landing-scroll-over-partitura #section-quote.section-quote,
.site-main--stack .landing-scroll-over-partitura #section-pago.section-pago {
    --quote-band-bg: #f2ebe9;
    background: var(--quote-band-bg) !important;
    background-color: var(--quote-band-bg) !important;
}

.site-main--stack.is-stack-ready .landing-scroll-over-partitura > .section-fondo2.is-stack-covering {
    position: relative;
    z-index: 20;
    box-shadow: 0 -18px 48px rgba(8, 6, 5, 0.14);
}

.site-main--stack .landing-scroll-over-partitura > .section-fondo2 {
    background: transparent !important;
    background-color: transparent !important;
}

/* Partitura + velo crema (capa .landing-parallax-partitura; URL vía --partitura-url en inline) */
.landing-parallax-partitura {
    --partitura-veil-a: 0.56;
    --partitura-veil-b: 0.62;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 253, 251, var(--partitura-veil-a)) 0%,
            rgba(248, 245, 240, var(--partitura-veil-b)) 48%,
            rgba(255, 253, 251, var(--partitura-veil-a)) 100%
        ),
        var(--partitura-url);
    background-size: cover, cover;
    background-position: 58% 42%, 58% 42%;
    background-repeat: no-repeat, no-repeat;
}

.site-main > section:not(.section-hero) .parallax-moving-layer.landing-parallax-partitura,
.section-fondo2 .landing-parallax-partitura {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

[data-parallax-subtle] .parallax-moving-layer.landing-parallax-partitura {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    min-height: 100%;
}

[data-parallax-subtle] .parallax-moving-layer:not(.landing-parallax-partitura) {
    top: -12%;
    height: 124%;
    will-change: transform;
    backface-visibility: hidden;
}

@media (max-width: 991.98px) {
    .landing-parallax-partitura {
        --partitura-veil-a: 0.44;
        --partitura-veil-b: 0.5;
        background-position: center 36%, center 36%;
    }

    .site-main > section:not(.section-hero) .parallax-moving-layer.landing-parallax-partitura {
        transform: none !important;
        will-change: auto;
    }

    /*
     * Móvil: la capa absolute no hereda la altura del contenido (queda arriba).
     * Grid apila fondo + .landing-container en la misma celda → misma altura.
     */
    .site-main > section.section-has-partitura.parallax-container {
        display: grid;
        grid-template-areas: 'partitura-stack';
        align-items: stretch;
    }

    .site-main > section.section-has-partitura.parallax-container > .landing-parallax-partitura,
    .site-main > section.section-has-partitura.parallax-container > .landing-container {
        grid-area: partitura-stack;
    }

    .site-main > section.section-has-partitura.parallax-container > .landing-parallax-partitura {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        height: 100%;
        min-height: 100%;
        align-self: stretch;
        justify-self: stretch;
        z-index: 0;
    }

    .site-main > section.section-has-partitura.parallax-container > .landing-container {
        position: relative;
        z-index: 1;
    }

    .section-fondo2.parallax-container {
        overflow: visible;
    }
}

.section-media {
    background-color: var(--ab-cream-panel);
}

.section-media.parallax-container,
.section-pilares.parallax-container,
.section-escritura.parallax-container,
.section-cuadernos.parallax-container,
.section-faq.parallax-container {
    background-color: transparent;
}

/* Scroll fluido: ritmo vertical sin forzar 100vh en cada bloque */
.section-media .landing-row,
.section-pilares .landing-row,
.section-escritura .landing-row,
.section-carousel .landing-row,
.section-videos .landing-row,
.section-quote .landing-row,
.section-cuadernos .landing-row,
.section-pago .landing-row,
.section-faq .landing-row {
    min-height: auto !important;
    padding-block: var(--section-y) !important;
}

.section-media .landing-row {
    padding-block: clamp(3rem, 7vw, 5rem) !important;
}

.section-pilares .landing-row {
    padding-block: clamp(2.75rem, 6.5vw, 4.75rem) !important;
}

@media (min-width: 1025px) {
    .section-hero .parallax-moving-layer,
    .section-hero:not(.parallax-container) {
        background-attachment: fixed;
    }
}

/* Fondo panel multimedia (tarjeta = Bootstrap .card) */
.card-multimedia-bg {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    background-color: #a84822;
    background-image:
        radial-gradient(ellipse 88% 78% at 50% 42%, rgba(255, 175, 95, 0.55) 0%, rgba(232, 120, 55, 0.18) 45%, rgba(0, 0, 0, 0) 68%),
        linear-gradient(168deg, #7a3018 0%, #b85328 24%, #e8924a 52%, #c45a28 78%, #6b2412 100%),
        url('../images/Rectangulo-naranja-para-fondo-1-1.webp');
    background-size: cover, cover, cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        0 14px 44px rgba(139, 50, 20, 0.32),
        0 4px 18px rgba(0, 0, 0, 0.14);
}

.section-media__col--copy {
    align-self: center;
}

.section-media .section-media__lead {
    font-size: var(--fs-media-lead);
    line-height: 1.58;
    color: var(--ab-white);
    text-align: center;
    letter-spacing: 0.01em;
}

/* Tablet + cuadernos — 2 filas × 2 columnas, sin solapamiento */
.section-fondo2__group {
    /* Vídeo + cuadernos (+30 % sobre escala actual) */
    --fondo2-tablet-h: clamp(35rem, 57vh, 47.5rem);
    --fondo2-phone-h: clamp(28.5rem, 47vh, 36.5rem);
    --fondo2-visual-w: calc(var(--fondo2-tablet-h) * 9 / 16);
    --fondo2-thumb-h: calc(var(--fondo2-phone-h) * 0.92);
    --fondo2-practice-thumb-h: calc(var(--fondo2-thumb-h) * 1.3);
    --fondo2-thumb-box-h: var(--fondo2-practice-thumb-h);
    --fondo2-thumb-box-w: min(calc(var(--fondo2-practice-thumb-h) * 400 / 464), 100%);
    --fondo2-inner-pad: clamp(0.35rem, 1.2vw, 0.85rem);
    --fondo2-pad-block: clamp(1.25rem, 3vh, 2rem);
    --fondo2-col-gap: clamp(1.1rem, 2.8vw, 2rem);
    --fondo2-row-gap: clamp(1.75rem, 3.5vh, 2.75rem);
    --fondo2-stack-gap: 0.75rem;
    --fondo2-badge-slot-h: 2.5rem;
    --fondo2-cell-pad-inner: clamp(0.35rem, 1.2vw, 0.65rem);
    width: 100%;
    max-width: var(--fondo2-content-max);
    margin-inline: auto;
    padding: var(--fondo2-pad-block) var(--fondo2-inner-pad);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.25rem, 2.5vh, 2rem);
}

.section-fondo2__grid {
    display: flex;
    flex-direction: column;
    gap: var(--fondo2-row-gap);
    width: 100%;
}

.section-fondo2__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fondo2-col-gap);
    width: 100%;
}

.section-fondo2__row--top {
    align-items: stretch;
}

.section-fondo2__row--bottom {
    align-items: end;
}

.section-fondo2__slot {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Columna izquierda: contenido hacia el centro (borde interior derecho) */
.section-fondo2__slot--tablet,
.section-fondo2__slot--practice {
    align-items: flex-end;
    padding-inline-start: 0.15rem;
    padding-inline-end: var(--fondo2-cell-pad-inner);
    overflow: visible;
}

.section-fondo2 {
    overflow: visible;
    background-color: transparent;
}

.section-fondo2.parallax-container {
    overflow: visible;
}

/* Escritura — diagrama de bolas proporcional al mockup */
.section-escritura .escritura-reveal-host {
    margin-inline: auto;
}

.section-escritura .escritura-reveal-media {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.section-fondo2__slot--lead,
.section-fondo2__slot--preview {
    align-items: flex-start;
    padding-inline-start: var(--fondo2-cell-pad-inner);
    padding-inline-end: 0.15rem;
}

.section-fondo2__slot--lead {
    justify-content: center;
    align-self: stretch;
}

.section-fondo2__slot--lead .section-fondo2__lead {
    margin: 0;
}

.section-fondo2__stack--device {
    padding-top: 0;
    padding-bottom: 0;
    gap: 12px;
    overflow: visible;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}

.section-fondo2__stack--device .section-fondo2__tablet-media {
    margin-inline: auto;
    width: auto;
    max-width: 100%;
}

.section-fondo2__stack--device .section-fondo2__badge {
    align-self: center;
    margin-top: 0;
}

.section-fondo2__row--bottom .section-fondo2__slot--practice,
.section-fondo2__row--bottom .section-fondo2__slot--preview {
    justify-content: flex-end;
}

.section-fondo2__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fondo2-stack-gap);
    width: fit-content;
    max-width: 100%;
}

@media (min-width: 992px) {
    .section-fondo2__slot--lead {
        padding-bottom: calc(var(--fondo2-badge-slot-h) + var(--fondo2-stack-gap) + 0.5rem);
    }

    .section-fondo2__slot--lead .section-fondo2__lead {
        display: flex;
        align-items: center;
        min-height: var(--fondo2-tablet-h);
        transform: translateY(-8%);
    }
}

.section-fondo2__stack--thumb {
    gap: var(--fondo2-stack-gap);
}

/* Sin badge abajo: reserva el mismo hueco que la columna derecha */
.section-fondo2__slot--practice .section-fondo2__stack--thumb {
    padding-bottom: calc(var(--fondo2-badge-slot-h) + var(--fondo2-stack-gap));
    justify-content: flex-end;
}

.section-fondo2__stack--thumb > .cuaderno-thumb {
    display: block;
    width: auto !important;
    height: auto !important;
    max-height: var(--fondo2-thumb-h) !important;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
}

.section-fondo2__stack--thumb > .cuaderno-thumb--practice,
.section-fondo2__stack--thumb > .cuaderno-thumb--preview {
    width: var(--fondo2-thumb-box-w) !important;
    max-width: var(--fondo2-thumb-box-w) !important;
    height: var(--fondo2-thumb-box-h) !important;
    max-height: var(--fondo2-thumb-box-h) !important;
    object-fit: contain;
    object-position: center center;
}

.section-fondo2__badge {
    flex-shrink: 0;
}

.section-fondo2__lead {
    font-family: var(--font-sans);
    font-size: var(--fs-fondo2-lead);
    font-weight: 700;
    line-height: 1.52;
    letter-spacing: 0.01em;
    color: var(--ab-text);
    width: 100%;
    max-width: min(25rem, 100%);
    margin: 0;
    text-align: start;
}

@media (min-width: 992px) {
    .section-fondo2__group {
        max-width: min(64rem, 96%);
    }

    .section-fondo2__lead {
        padding-block: 0;
        max-width: min(34rem, 100%);
        font-size: clamp(1.875rem, 3.18vw + 0.42rem, 3.2rem);
        line-height: 1.28;
        letter-spacing: 0.005em;
    }
}

.section-fondo2__group .cuaderno-cta-line {
    font-size: var(--fs-fondo2-cta);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    color: var(--ab-text);
}

.section-fondo2 .badge-pages {
    font-size: clamp(0.8125rem, 1.15vw, 0.9375rem);
    padding: 0.5rem 0.95rem;
}

/* Medios fondo2: sin panel semitransparente ni sombra de tarjeta */
.section-fondo2 .fondo2-reveal-piece,
.section-fondo2 .section-fondo2__stack,
.section-fondo2 .section-fondo2__tablet-media,
.section-fondo2 .section-fondo2__tablet-video,
.section-fondo2 .cuaderno-thumb {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
}

.section-fondo2 .cuaderno-thumb--practice,
.section-fondo2 .cuaderno-thumb--preview {
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .section-fondo2__row {
        grid-template-columns: 1fr;
        row-gap: clamp(1rem, 2.5vh, 1.5rem);
        align-items: center;
    }

    .section-fondo2__slot--tablet,
    .section-fondo2__slot--practice,
    .section-fondo2__slot--lead,
    .section-fondo2__slot--preview {
        align-items: center;
        padding-inline: 0.15rem;
    }

    .section-fondo2__slot--practice .section-fondo2__stack--thumb {
        padding-bottom: 0;
    }

    .section-fondo2__slot--lead {
        align-items: center;
    }

    .section-fondo2__lead {
        text-align: center;
        max-width: 20rem;
    }

    .section-fondo2 .section-fondo2__tablet-video {
        width: min(var(--fondo2-visual-w), 96vw);
        max-height: min(var(--fondo2-tablet-h), 88vh);
    }

    .section-fondo2__slot--lead .section-fondo2__lead {
        min-height: auto;
        display: block;
    }
}

/* Titulares legacy */
.section-heading-accent {
    color: var(--ab-accent-heading);
}

.cuaderno-cta-line {
    font-family: var(--font-sans);
    font-size: var(--fs-fondo2-cta);
    font-weight: 700;
    line-height: 1.45;
    text-wrap: balance;
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 0;
    padding-top: clamp(1.5rem, 3.5vw, 2.25rem);
    border-top: 1px solid rgba(45, 42, 38, 0.06);
    color: var(--ab-text);
}

/* Marcos dispositivos (~45–50% escala previa) */
.tablet-frame {
    position: relative;
    width: min(100%, 178px);
    margin: var(--sp-2) auto;
    aspect-ratio: 9 / 16;
    background: #111;
    border: 6px solid rgba(36, 36, 36, 0.78);
    border-radius: var(--radius-ui);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.tablet-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tablet-camera {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #444;
    border-radius: 50%;
    z-index: 3;
    border: 1px solid #111;
}

.tablet-home {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid #555;
    border-radius: 50%;
    z-index: 3;
}

@media (max-width: 767px) {
    .tablet-frame {
        max-width: 156px;
        border-width: 6px;
    }

    .tablet-home {
        width: 14px;
        height: 14px;
    }
}

.video-horizontal-frame {
    position: relative;
    width: min(100%, 308px);
    margin: var(--sp-3) auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 5px solid rgba(36, 36, 36, 0.72);
    border-radius: var(--radius-ui);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.video-horizontal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .video-horizontal-frame {
        border-width: 6px;
    }
}

.badge-pages {
    display: inline-block;
    background-color: var(--ab-accent-blue);
    color: var(--ab-white) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 6px;
}

.cuaderno-thumb {
    max-width: min(200px, 72vw);
}

/* Vídeo: contenedor ajustado al ancho real del MP4 (badge centrado bajo el video) */
.section-fondo2 .section-fondo2__tablet-media {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 0;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    vertical-align: top;
}

.section-fondo2 .section-fondo2__tablet-video {
    width: auto;
    max-width: min(var(--fondo2-visual-w), 100%);
    height: auto;
    max-height: var(--fondo2-tablet-h);
    display: block;
    margin-inline: auto;
    vertical-align: top;
    background: transparent;
}

.section-fondo2__tablet-media--interactive {
    position: relative;
    width: min(var(--fondo2-visual-w), 100%);
    max-width: 100%;
    height: auto;
    line-height: 0;
}

.section-fondo2__tablet-media--interactive .section-fondo2__tablet-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: var(--fondo2-tablet-h);
}

.section-fondo2__tablet-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 12vw, 4rem);
    height: clamp(3rem, 12vw, 4rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-float);
    color: rgba(92, 20, 24, 0.9);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.25s ease;
}

.section-fondo2__tablet-play:hover {
    background: #fff;
    box-shadow: 0 0.5rem 1.75rem rgba(30, 28, 26, 0.18);
    transform: translate(-50%, -50%) scale(1.04);
}

.section-fondo2__tablet-play:focus-visible {
    outline: 2px solid rgba(92, 20, 24, 0.65);
    outline-offset: 3px;
}

.section-fondo2__tablet-media--interactive.is-playing .section-fondo2__tablet-play {
    opacity: 0;
    pointer-events: none;
}

.section-fondo2__tablet-play-icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 0.2rem;
    border-style: solid;
    border-width: 0.55rem 0 0.55rem 0.95rem;
    border-color: transparent transparent transparent currentColor;
}

.section-fondo2__tablet-media--interactive.is-playing .section-fondo2__tablet-video {
    cursor: pointer;
}

.section-fondo2 .cuaderno-thumb--practice,
.section-fondo2 .cuaderno-thumb--preview {
    width: var(--fondo2-thumb-box-w) !important;
    max-width: var(--fondo2-thumb-box-w) !important;
    height: var(--fondo2-thumb-box-h) !important;
    max-height: var(--fondo2-thumb-box-h) !important;
    object-fit: contain;
    object-position: center center;
}

.pillar-img {
    width: min(175px, 28vw);
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.bolas-texto {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-ui);
}

/* Ilustrado + vídeos — fondo crema + símbolo detrás del contenido */
.section-videos {
    position: relative;
    isolation: isolate;
    background-color: transparent;
}

.section-videos__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    background-color: transparent;
}

/* Símbolo único: tamaño natural, posicionado como en referencia */
.section-videos__symbol {
    position: absolute;
    top: -5%;
    bottom: -8%;
    right: 5%;
    left: auto;
    transform: none;
    width: auto;
    height: calc(100% + 13%);
    max-width: none !important;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    backface-visibility: hidden;
}

.section-videos .landing-container,
.section-videos .landing-col {
    position: relative;
    z-index: 2;
}

/* Gráfico «Intuitivo y simple» sin marco (solo la imagen) */
.section-videos .bolas-texto {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Ilustrado + vídeos — vertical: gráfico → tres textos → piano → fila móvil + retrato circular */
.section-videos__text-row {
    max-width: 34rem;
}

.section-videos__taglines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-inline: auto;
}

.section-videos__tagline {
    font-family: var(--font-sans);
    font-size: clamp(2.3rem, 3.4vw, 2.875rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    margin: 0;
    max-width: min(46rem, 96vw);
}

.section-videos__tagline-em {
    font-weight: 800;
    /*text-decoration: underline;*/
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.08em;
    text-decoration-skip-ink: none;
}

/* Evita viuda «e» sola antes de «imágenes» en anchos intermedios */
.section-videos__tagline-keep {
    white-space: nowrap;
}

.section-videos__tagline--wine {
    color: var(--ab-primary);
}

.section-videos__tagline--navy {
    color: var(--ab-accent-heading);
}

.section-videos .video-horizontal-frame--section {
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-soft);
}

.video-horizontal-frame--piano {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section-videos__visual {
    width: 100%;
    max-width: min(100%, 36rem);
    margin-inline: auto;
}

.section-videos__device-row {
    width: 100%;
    max-width: min(100%, 54.6rem);
    margin-inline: auto;
    --section-videos-device-h: clamp(20.8rem, 49.4vw, 29.25rem);
}

.section-videos__phone-video {
    height: var(--section-videos-device-h);
    line-height: 0;
}

.section-videos__phone-media {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.section-videos__portrait {
    flex-shrink: 0;
    width: var(--section-videos-device-h);
    height: var(--section-videos-device-h);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.section-videos__portrait-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    .section-videos__device-row {
        --section-videos-device-h: clamp(22.1rem, 44.2vw, 31.2rem);
    }
}

@media (min-width: 992px) {
    .section-videos__device-row {
        --section-videos-device-h: clamp(23.4rem, 36.4vw, 33.8rem);
    }
}

.muchacho-portrait {
    position: relative;
    width: 100%;
    max-width: 156px;
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
}

.muchacho-portrait.muchacho-portrait--card {
    max-width: 7rem;
    border: none;
    box-shadow: none;
}

.muchacho-img {
    max-width: min(320px, 78vw);
    margin-top: var(--sp-9);
    border: var(--border-hairline);
    border-radius: var(--radius-ui);
    box-shadow: var(--shadow-soft);
}

/* Retrato circular en bloque vídeos: clase dedicada (evita conflicto con .muchacho-img e img-fluid) */
.muchacho-portrait__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

/* Testimonios — bloque solapado sin decoración de fondo; imágenes +30% */
#section-testimonios.section-testimonios {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
    background: transparent;
    background-color: transparent;
    padding-block: clamp(3rem, 8vh, 5rem);
}

#section-testimonios .testimonial-overlap {
    --testimonial-slot: min(27.9rem, 74vw);
    --testimonial-overlap-x: clamp(2.925rem, 11%, 4.875rem);
    position: relative;
    z-index: 3;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    width: min(62rem, 100%);
    max-width: 100%;
    margin-inline: auto;
    gap: 0;
    background: none;
}

#section-testimonios .testimonial-overlap::before {
    content: none;
    display: none;
}

#section-testimonios .testimonial-overlap__photo,
#section-testimonios .testimonial-overlap__quote {
    flex: 0 0 var(--testimonial-slot);
    width: var(--testimonial-slot);
    max-width: var(--testimonial-slot);
    min-width: 0;
    overflow: visible;
    background-color: #fff;
}

#section-testimonios .testimonial-overlap__photo {
    position: relative;
    z-index: 1;
}

#section-testimonios .testimonial-overlap__quote {
    position: relative;
    z-index: 2;
    margin-left: calc(-1 * var(--testimonial-overlap-x));
    box-shadow: var(--shadow-float);
}

#section-testimonios .testimonial-overlap__img {
    width: 100%;
    height: auto;
    display: block;
    max-height: none;
    object-fit: contain;
}

@media (min-width: 992px) {
    #section-testimonios .testimonial-overlap {
        --testimonial-slot: min(31.3rem, 54%);
        --testimonial-overlap-x: clamp(3.575rem, 13%, 5.85rem);
        width: min(68rem, 100%);
    }
}

#section-testimonios .landing-container,
#section-testimonios .landing-row,
#section-testimonios .landing-col {
    position: relative;
    z-index: 2;
    overflow: visible;
    background: transparent;
}

#section-testimonios .landing-row {
    min-height: auto;
    padding-block: clamp(1.5rem, 4vh, 2.5rem);
}

#section-testimonios .landing-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
}

.site-main--stack.is-stack-ready > section#section-testimonios.section-testimonios {
    z-index: 92 !important;
    background: #fff !important;
    background-color: #fff !important;
    overflow: visible !important;
    min-height: auto !important;
    box-shadow: none;
}

.site-main--stack.is-stack-ready > section#section-testimonios.stack-pin-host,
.site-main--stack.is-stack-ready > section#section-testimonios.stack-pin-host .stack-pin-layer {
    background: #fff !important;
    background-color: #fff !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
}

/* Annabell — banda full-width rompedora (referencia mockup) */
.section-quote {
    --quote-band-bg: #f2ebe9;
    --quote-rule: #5c1418;
    --quote-photo-w: clamp(12rem, 28vw, 19.5rem);
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--quote-band-bg) !important;
    padding: 0;
    overflow: hidden;
}

.section-quote__band {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.section-quote__rule,
.section-pago__rule {
    display: block;
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid var(--quote-rule);
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.section-quote__inner {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 6vw, 5.5rem);
    width: 100%;
    max-width: min(74rem, 92vw);
    margin-inline: auto;
    padding: clamp(2.75rem, 6vw, 4.25rem) clamp(1.25rem, 4vw, 2.5rem);
}

.section-quote__figure {
    flex: 0 0 auto;
    margin: 0;
    width: var(--quote-photo-w);
    max-width: var(--quote-photo-w);
}

.section-quote__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4.1;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 14px;
    border: 1px solid var(--quote-rule);
}

.section-quote__copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(28.5rem, 100%);
    margin: 0;
    padding: 0;
    border: 0;
}

.section-quote__text {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 3.05vw, 3.25rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1.28;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--ab-text);
    margin: 0 0 1.75rem;
}

.section-quote__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-quote__name {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.35;
    color: var(--ab-text);
    margin: 0;
}

.section-quote__role-line {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ab-text);
    margin: 0;
}

.site-main--stack.is-stack-ready > section#section-quote.section-quote,
.site-main--stack.is-stack-ready .landing-scroll-over-partitura > section#section-quote.section-quote {
    background: #f2ebe9 !important;
    overflow: visible !important;
}

/* Pago — banda full-width (mismo fondo y reglas que section-quote) */
.section-pago {
    --quote-band-bg: #f2ebe9;
    --quote-rule: #5c1418;
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--quote-band-bg) !important;
    padding: 0;
    overflow: hidden;
}

.section-pago__band {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.site-main--stack.is-stack-ready > section#section-pago.section-pago,
.site-main--stack.is-stack-ready .landing-scroll-over-partitura > section#section-pago.section-pago {
    background: #f2ebe9 !important;
    overflow: visible !important;
}

.rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-top: var(--sp-3);
    color: rgba(184, 148, 72, 0.72);
    opacity: 1;
}

.rating-star {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Cuadernos — mosaico 2 filas × 2 columnas */
.section-cuadernos .landing-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vh, 2.5rem);
}

.cuadernos-catalog__header {
    width: 100%;
    margin-bottom: 0;
}

.cuadernos-catalog {
    width: 100%;
    max-width: min(86.24rem, 100%);
    margin-inline: auto;
}

.cuadernos-catalog__mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        'tl tr'
        'bl br';
    column-gap: clamp(1.75rem, 4.5vw, 3.25rem);
    row-gap: clamp(2rem, 4.5vh, 3.25rem);
    align-items: end;
    width: 100%;
}

.cuadernos-catalog__cell--tl {
    grid-area: tl;
}

.cuadernos-catalog__cell--tr {
    grid-area: tr;
}

.cuadernos-catalog__cell--bl {
    grid-area: bl;
    align-self: center;
    justify-content: center;
}

.cuadernos-catalog__cell--br {
    grid-area: br;
    align-self: center;
}

.cuadernos-catalog__cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.cuadernos-catalog__cell--tl,
.cuadernos-catalog__cell--tr {
    justify-content: center;
}

.cuadernos-catalog__cell--br {
    justify-content: center;
    align-items: center;
    padding-inline: clamp(0.35rem, 2vw, 1rem);
}

.cuadernos-catalog__subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1.3125rem, 2.35vw, 1.6875rem) !important;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
    text-transform: none;
    text-align: center;
    text-wrap: balance;
}

.cuaderno-catalogo,
.cuaderno-catalogo--mixto {
    /* +40 % sobre medidas base (16.5/38vw/22.35 rem · 308 px) */
    --cuaderno-catalogo-h: clamp(23.1rem, 53.2vw, 31.29rem);
    --cuaderno-catalogo-w: min(431px, 100%);
    display: block;
    width: auto;
    max-width: var(--cuaderno-catalogo-w);
    height: var(--cuaderno-catalogo-h);
    object-fit: contain;
    object-position: center bottom;
    margin-inline: auto;
    border-radius: var(--radius-ui);
    border: none;
    box-shadow: none;
    background: transparent;
}

.section-cuadernos img.cuaderno-catalogo,
.section-cuadernos img.cuaderno-catalogo--mixto {
    width: auto;
    max-width: var(--cuaderno-catalogo-w);
    height: var(--cuaderno-catalogo-h);
    object-fit: contain;
    object-position: center bottom;
    box-shadow: none !important;
    background: transparent !important;
}

.section-cuadernos img.cuaderno-catalogo:not(.cuaderno-catalogo--mixto) {
    width: auto !important;
    max-width: var(--cuaderno-catalogo-w) !important;
    height: var(--cuaderno-catalogo-h) !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
}

/* Mixto apaisado: misma altura que los retrato; ancho según proporción del grupo */
.section-cuadernos img.cuaderno-catalogo--mixto {
    --cuaderno-catalogo-w: min(100%, calc(var(--cuaderno-catalogo-h) * 1520 / 1083));
    width: auto !important;
    max-width: var(--cuaderno-catalogo-w) !important;
    height: var(--cuaderno-catalogo-h) !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
}

/* Sin stack-pin: capa visible por si la sección queda envuelta en pin-layer legacy */
.site-main--stack.is-stack-ready > section.section-cuadernos .stack-pin-layer,
.site-main--stack.is-stack-ready > section.section-cuadernos.stack-pin-host .stack-pin-layer {
    min-height: auto;
    height: auto;
    overflow: visible;
}

.section-carousel .landing-row {
    min-height: auto !important;
    padding-block: var(--section-y) !important;
}

#pilaresCarousel {
    max-width: min(240px, 72vw);
    margin-inline: auto;
}

#pilaresCarousel .carousel-inner {
    border-radius: var(--radius-ui);
    border: none;
    box-shadow: var(--shadow-soft);
}

/* Precio */
.section-pago .landing-row {
    padding-block: clamp(2.5rem, 5.5vw, 4rem) !important;
}

.section-pago__layout {
    width: 100%;
    max-width: min(74rem, 100%);
    margin-inline: auto;
}

.section-pago__trust {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.35rem);
}

.section-pago__secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    align-self: flex-start;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: rgba(92, 20, 24, 0.08);
    border: 1px solid rgba(92, 20, 24, 0.14);
    color: var(--ab-primary);
}

.section-pago__secure-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ab-primary);
}

.section-pago__secure-label {
    font-family: var(--font-sans);
    font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-pago__trust-lead {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    line-height: var(--lh-body);
    color: var(--ab-text);
    margin: 0;
    max-width: 28rem;
}

.section-pago__trust-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 28rem;
}

.section-pago__trust-points li {
    position: relative;
    padding-left: 1.35rem;
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 1.15vw, 1rem);
    line-height: 1.45;
    color: var(--ab-text-muted);
}

.section-pago__trust-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ab-gradient-3) 0%, var(--ab-gradient-2) 100%);
}

.section-pago__card-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

.section-pago__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 2.375rem;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.section-pago__brand--amex {
    width: 4.25rem;
}

.section-pago__brand--paypal {
    width: 4rem;
}

.section-pago__brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.section-pago__panel {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(92, 20, 24, 0.1);
    border-radius: 16px;
    padding: clamp(1.35rem, 3vw, 2rem);
    box-shadow: 0 10px 32px rgba(92, 20, 24, 0.06);
}

.section-pago__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
}

.section-pago__price-note {
    font-family: var(--font-sans);
    font-size: clamp(0.8125rem, 1vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ab-text-muted);
}

.section-pago__processor-note {
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--ab-text-muted);
    text-align: center;
}

@media (min-width: 992px) {
    .section-pago__processor-note {
        text-align: start;
    }

    .section-pago__cta {
        text-align: start;
    }
}

@media (max-width: 991.98px) {
    .section-pago__trust {
        align-items: center;
        text-align: center;
    }

    .section-pago__secure-badge {
        align-self: center;
    }

    .section-pago__trust-lead,
    .section-pago__trust-points {
        max-width: 22rem;
        margin-inline: auto;
    }

    .section-pago__trust-points li {
        text-align: start;
    }

    .section-pago__card-brands {
        justify-content: center;
    }

    .section-pago__cta {
        text-align: center;
    }

    .section-pago .btn-lo-quiero {
        width: min(100%, 20rem);
    }
}

/* FAQ */
.section-faq.parallax-container {
    isolation: isolate;
    overflow: hidden;
    background-color: #f8f5f0;
}

/*
 * FAQ no usa la capa parallax genérica: el acordeón cambia la altura de la
 * sección y `background-size: cover` recalcula la partitura, causando el salto.
 */
.section-faq.parallax-container > .landing-parallax-partitura {
    display: none;
}

.section-faq.parallax-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 253, 251, 0.72) 0%,
            rgba(248, 245, 240, 0.78) 48%,
            rgba(255, 253, 251, 0.72) 100%
        ),
        var(--partitura-url);
    background-size: 100% 100%, max(72rem, 100vw) auto;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}

@media (max-width: 991.98px) {
    .site-main > section.section-faq.section-has-partitura.parallax-container {
        display: block;
    }

    .section-faq.parallax-container::before {
        background-size: 100% 100%, min(140%, 120vw) auto;
    }
}

.section-faq__content {
    width: 100%;
    max-width: min(46rem, 100%);
    position: relative;
    z-index: 1;
}

.precio-texto {
    color: var(--bs-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-price);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.precio-check {
    opacity: 1;
    color: rgba(95, 133, 116, 0.9) !important;
}

.label-pago {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ab-text-muted);
    padding: var(--sp-2) var(--sp-3);
    background-color: var(--bs-light);
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.contenedor-pago {
    transition:
        box-shadow 0.28s ease,
        background-color 0.22s ease,
        border-color 0.22s ease;
    border: 1px solid var(--bs-border-color-translucent) !important;
}

.contenedor-pago:hover {
    border-color: rgba(92, 20, 24, 0.12) !important;
    box-shadow: var(--bs-box-shadow-sm);
    background-color: var(--bs-light) !important;
}

.section-pago__cta-copy {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ab-text);
}

/* CTA «¡LO QUIERO!» — gradiente vino → óxido (colores del hero) */
.btn-lo-quiero {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.2vw, 1.125rem);
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff !important;
    background: linear-gradient(
        90deg,
        var(--ab-gradient-3) 0%,
        var(--hero-rust-deep) 26%,
        var(--hero-rust) 54%,
        var(--hero-ember) 78%,
        var(--hero-terracotta) 100%
    ) !important;
    border: none;
    border-radius: 999px;
    padding: 0.78rem clamp(2rem, 6vw, 2.85rem);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    box-shadow:
        0 0 0 2px rgba(92, 20, 24, 0.22),
        0 0 0 4px rgba(122, 48, 24, 0.12),
        0 6px 18px rgba(62, 18, 10, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition:
        transform 0.22s ease,
        box-shadow 0.28s ease,
        filter 0.22s ease;
}

.btn-lo-quiero:hover,
.btn-lo-quiero:focus-visible {
    color: #fff !important;
    transform: translateY(-2px);
    filter: none;
    box-shadow:
        0 0 0 2px rgba(92, 20, 24, 0.32),
        0 0 0 4px rgba(168, 72, 34, 0.16),
        0 10px 26px rgba(62, 18, 10, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-lo-quiero:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.faq-accordion .accordion-item {
    border: none !important;
    border-radius: var(--bs-border-radius-xl) !important;
    margin-bottom: var(--sp-2);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--bs-box-shadow-sm);
}

.faq-accordion .accordion-button {
    font-family: var(--font-sans);
    font-size: clamp(1.125rem, 1.2vw, 1.25rem);
    font-weight: 600;
    font-style: normal;
    line-height: var(--lh-snug);
    padding-block: var(--sp-4);
    padding-inline: var(--sp-4);
    background: #fff;
    color: var(--bs-body-color);
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--bs-light);
    color: var(--bs-body-color);
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-accordion .accordion-body {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1vw, 1.0625rem);
    line-height: 1.68;
    color: var(--ab-text-muted);
    font-style: normal;
    padding-block: var(--sp-3) var(--sp-5);
    padding-inline: var(--sp-4);
    background: #fff;
}

/* Botones premium (pill + hover); cubre CTAs inyectados en zona de pago */
.btn {
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.28s ease,
        transform 0.22s ease;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(92, 20, 24, 0.15);
}

.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
}

.contenedor-pago .btn,
.contenedor-pago button[type='submit'],
.contenedor-pago input[type='submit'],
.contenedor-pago input[type='button'] {
    border-radius: var(--bs-border-radius-pill);
}

/* -------------------------------------------------------------------------
   Parallax — capas independientes (fondo móvil + contenido fijo)
   ------------------------------------------------------------------------- */
.parallax-container {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.parallax-container.section-hero {
    background-color: transparent;
}

/* Hero: capa a ras del contenedor (evita franja clara arriba por top:-10%) */
.parallax-container.section-hero .parallax-moving-layer {
    top: 0;
    height: 100%;
}

.section-hero .parallax-moving-layer.section-hero__bg {
    background-image: none;
    line-height: 0;
}

.section-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
}

.parallax-moving-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: -10%;
    height: 120%;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
    backface-visibility: hidden;
    pointer-events: none;
}

.parallax-container.section-hero::before {
    z-index: 1;
}

/* Contenido por encima de la capa parallax */
.parallax-container .landing-container {
    position: relative;
    z-index: 2;
}

@media (min-width: 1025px) {
    .section-hero.parallax-container {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parallax-moving-layer.landing-parallax-partitura {
        inset: 0;
        width: auto;
        height: auto;
        min-height: 100%;
        transform: none !important;
        will-change: auto;
    }

    .parallax-moving-layer:not(.landing-parallax-partitura) {
        transform: none !important;
        will-change: auto;
        top: 0;
        height: 100%;
    }
}

@media (max-width: 767.98px) {
    .parallax-moving-layer:not(.landing-parallax-partitura) {
        transform: none !important;
        will-change: auto;
        top: 0;
        height: 100%;
    }
}