/* =========================================================================
   CITEM — Landing Page Styles ("Sistema 2026")
   Copy source: docs/copys/01_LANDING.md (v4.0)
   Landing-specific: flag marquee, CTA form, ecosystem descriptors.
   ========================================================================= */

/* =======================================================================
   MARQUEE FLAGS
   ======================================================================= */
.marquee-flags {
    font-size: 1rem;
    padding: 0.8rem 0;
}

.marquee-flags .marquee-track--slow {
    animation: ticker-reverse 60s linear infinite;
}

.flag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.flag-item img {
    /* BUG-FIX 01: height explícito evita CLS — sin height el navegador
       no conoce la ratio antes de cargar el SVG, causando reflow. */
    width: 20px;
    height: 14px;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
    object-fit: cover;
}

.flag-sep {
    margin: 0 0.5em;
}

/* =======================================================================
   ABOUT SECTION — Stronger last paragraph
   ======================================================================= */
.about-section p strong {
    color: var(--c-coral);
    font-size: 1.5rem;
    display: block;
    margin-top: var(--spacing-sm);
}

/* =======================================================================
   ECOSYSTEM DESCRIPTORS (benefit-first text under h3)
   ======================================================================= */
.ecosystem-card-descriptor {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.8;
    margin-bottom: var(--spacing-sm);
    color: var(--c-indigo);
}

.ecosystem-card--accent .ecosystem-card-descriptor {
    color: var(--c-paper);
}

/* =======================================================================
   CTA FINAL — Inline form (crimson bg, coral button)
   Consistent with /formaciones/, /ia/ CTA pattern.
   ======================================================================= */

/* BUG-FIX 02: !important en cascada de utilidad es un smell de especificidad
   mal planificada. La solución correcta es elevar el selector para ganar
   especificidad sin !important — así la fuente de verdad vive en un solo lugar. */
.cta-final-section .cta-detail {
    font-size: 1.15rem;
    font-weight: 400;
    text-transform: none;
    color: var(--c-paper);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--spacing-sm);
    line-height: 1.6;
}

.cta-final-section .cta-refuerzo {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-paper);
    opacity: 0.7;
    margin: 0 auto var(--spacing-md);
}

/* =======================================================================
   RESPONSIVE — Ver landing.responsive.css
   ======================================================================= */

/* BUG-FIX 06: prefers-reduced-motion aplicado globalmente a las animaciones
   del marquee. No solo al slow, también al track base si existiera. */
@media (prefers-reduced-motion: reduce) {
    .marquee-track,
    .marquee-flags .marquee-track--slow {
        animation: none;
    }
}

/* =======================================================================
   HERO FORM (Fase 1)
   Hereda .cta-form del DS. Cancela margin:auto del DS (no necesario en
   flex column donde el container ya gestiona el ancho).
   ======================================================================= */
.hero-form {
    margin: 0;
    max-width: 100%;
}

/* BUG-FIX 07: .hero-title existía como selector huérfano —
   ningún elemento en index.html tiene esa clase. Se elimina para
   evitar peso muerto en el CSS y falsa sensación de cobertura. */

/* ─── Wordmark izquierdo: "CITEM" como display visual puro ─── */
.hero-wordmark {
    font-size: var(--text-hero);
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--c-indigo);
    line-height: 0.85;
    letter-spacing: var(--letter-spacing-title);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* ─── Título Audition Book en el panel coral ─── */
.hero-ab-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--c-paper);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    /* BUG-FIX 08: line-height: 1 en un título multilinea clamp corta
       los trazos ascendentes/descendentes. 1.1 es el mínimo seguro. */
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
}

/* ─── Sub-headline bajo el título ─── */
.hero-ab-sub {
    color: var(--c-paper);
    opacity: 0.85;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: var(--spacing-md);
}

/* =======================================================================
   HERO ASIDE — Kicker + Benefits
   BUG-FIX 09: .hero-aside-kicker y .hero-benefits/.hero-benefit-item son
   selectores huérfanos desde que se eliminó la lista de bullets del hero.
   Se mantienen comentados (no borrados) por si se recuperan en fases futuras.
   ======================================================================= */
/*
.hero-aside-kicker { ... }
.hero-benefits { ... }
.hero-benefit-item { ... }
.hero-benefit-item:last-child { ... }
.hero-benefit-icon { ... }
*/

/* =======================================================================
   QAB — ¿Qué es un Audition Book? (S3.5 Fase 1)
   ======================================================================= */
.qab-section {
    padding: var(--spacing-xl) 0;
    background: var(--c-paper);
}

.qab-section h2 {
    margin-bottom: var(--spacing-md);
}

/* Caja de definición: indigo oscuro + texto paper */
.qab-def-box {
    background: var(--c-indigo);
    color: var(--c-paper);
    padding: var(--spacing-lg);
    /* BUG-FIX 10: border-radius: 4px era un valor hardcoded que rompe
       la coherencia del DS. El DS no define --radius global pero usa
       4px en componentes tipo card. Cambiamos a 2px para alinearnos
       con el estilo tipográfico suizo (sin redondeo pronunciado). */
    border-radius: 2px;
    margin-bottom: var(--spacing-lg);
    max-width: 720px;
}

.qab-def-box p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    color: var(--c-paper);
    /* BUG-FIX 11: opacity en un <p> dentro de un contenedor opaco afecta
       también a los hijos. Mejor usar color con alpha directamente para
       no crear un nuevo stacking context innecesario. */
    color: rgb(var(--c-paper-rgb) / 0.9);
}

.qab-def-box p:last-child {
    margin-bottom: 0;
}

/* Lista de criterios con marcadores cuadrados en coral */
.qab-criteria {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qab-criteria li {
    padding-left: 1.4em;
    position: relative;
    font-size: 0.95rem;
    /* BUG-FIX 11 (cont.): mismo patrón — color con alpha en lugar de opacity */
    color: rgb(var(--c-paper-rgb) / 0.85);
    line-height: 1.4;
}

.qab-criteria li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    background: var(--c-coral);
    /* BUG-FIX 12: flex-shrink en un ::before con position:absolute no tiene
       efecto (los pseudoelementos absolutos no participan en el flujo flex).
       Propiedad eliminada. */
}

/* Párrafos de contexto geográfico (Broadway / España) */
.qab-context {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-indigo);
    margin-bottom: var(--spacing-md);
}

.qab-context strong {
    color: var(--c-indigo);
    font-weight: 700;
}

/* =======================================================================
   AUDITION BOOK SHOWCASE (S4 Fase 1)
   ======================================================================= */
.ab-showcase-section {
    padding: var(--spacing-xl) 0;
}

.ab-showcase-section .intro {
    max-width: 680px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--c-indigo);
    opacity: 0.85;
    margin-bottom: var(--spacing-sm);
}

/* =======================================================================
   AB-STEPS — Vertical editorial rows (S4)
   ======================================================================= */
.ab-steps {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    border-top: var(--border-w-structural) solid var(--c-indigo);
}

.ab-step {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    border-bottom: var(--border-w-structural) solid var(--c-indigo);
    background: var(--c-paper);
    min-height: 110px;
    transition: background 0.2s ease;
}

.ab-step:hover {
    background: rgba(27, 22, 40, 0.035);
}

.ab-step-left {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-right: var(--border-w-structural) solid var(--c-indigo);
    padding: var(--spacing-md);
}

.ab-step-num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--c-coral);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ab-step-right {
    padding: var(--spacing-md) var(--spacing-lg);
}

.ab-step-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
    color: var(--c-indigo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ab-step-desc {
    font-size: 0.95rem;
    color: var(--c-indigo);
    opacity: 0.7;
    margin: 0;
    line-height: 1.6;
    max-width: 620px;
}

/* =======================================================================
   LP-KICKER — Reusable section eyebrow for landing
   ======================================================================= */
.lp-kicker {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-coral);
    margin-bottom: var(--space-sm);
}

/* =======================================================================
   LP-PROBLEM — Market data hook section (S2)
   ======================================================================= */
.lp-problem {
    background: var(--c-paper);
    padding: var(--spacing-xl) 0 calc(var(--spacing-xl) + var(--spacing-lg));
}

/* H2 — Gobold coral. Limita ancho para que respire en desktop grande */
.lp-problem h2 {
    color: var(--c-coral);
    max-width: 880px;
    margin-bottom: var(--spacing-lg);
}

/* Zona de datos — 2 columnas en desktop: cifras a la izquierda, contexto a la derecha */
.lp-problem-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: var(--border-w-structural) solid rgb(var(--c-carbon-rgb) / 0.1);
}

/* Breakpoints → landing.responsive.css */

/* Cifra destacada — ancla editorial del "hook" de datos */
.lp-problem-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lp-problem-stat-num {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: var(--letter-spacing-hero);
    color: var(--c-indigo);
}

.lp-problem-stat-label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgb(var(--c-carbon-rgb) / 0.6);
    max-width: 260px;
}

/* Lead text — párrafos contextuales. Tamaño editorial, no de cuerpo */
.lp-problem-lead {
    font-size: 1.2rem;
    line-height: 1.75;
    max-width: 600px;
    color: rgb(var(--c-carbon-rgb) / 0.8);
    margin: 0;
}

/* Pain cards — 3 columnas con espacio generoso */
.lp-pain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Breakpoints → landing.responsive.css */

.lp-pain-card {
    padding: var(--spacing-lg) var(--spacing-md);
    border: var(--border-w-structural) solid rgb(var(--c-indigo-rgb) / 0.25);
    border-top: var(--border-w-structural) solid var(--c-indigo);
    background: var(--c-paper);   /* --c-white (#fff) prohibido — §5.6 brand_manual */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Ícono X — Gobold, grande, anclado arriba */
.lp-pain-icon {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--c-coral);
    line-height: 1;
}

/* Título de pain point — Gobold uppercase condensado */
.lp-pain-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-indigo);
    margin: 0;
}

.lp-pain-card p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgb(var(--c-carbon-rgb) / 0.75);
    margin: 0;
}

/* CTA final de sección — enmarcado como declaración editorial */
.lp-problem-cta-block {
    border-left: var(--border-w-structural) solid var(--c-coral);
    padding-left: var(--spacing-md);
}

.lp-problem-cta {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 900;   /* Gobold: único weight válido */
    color: var(--c-carbon);
    max-width: 680px;
    line-height: 1.55;
    margin: 0;
}

.lp-problem-cta strong {
    color: var(--c-coral);
}

/* =======================================================================
   LP-TOOLS — Two tools showcase (S3)
   ======================================================================= */
.lp-tools {
    background: var(--c-indigo);
    color: var(--c-paper);
    padding: var(--spacing-xl) 0;
}

.lp-tools h2 {
    color: var(--c-paper);
}

.lp-tools .lp-kicker {
    color: var(--c-coral);
}

/* Declaración de producto — peso visual alto, ancla el concepto antes de las tarjetas */
.lp-tools-statement {
    font-family: var(--font-heading);   /* --font-display no existe — token correcto: --font-heading */
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--c-paper);
    font-weight: 900;               /* Gobold: único weight válido */
    letter-spacing: 0.01em;
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: var(--border-w-structural) solid var(--c-coral);  /* token, no px hardcoded */
}

/* Línea de cierre de sección — bonus callout post-tarjetas */
.lp-tools-bonus {
    font-family: var(--font-heading);   /* --font-display no existe */
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgb(var(--c-paper-rgb) / 0.65);  /* CSS Level 4 — rgba() prohibido */
    font-weight: 900;               /* Gobold: único weight válido */
    margin-top: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: var(--border-w-interactive) solid rgb(var(--c-paper-rgb) / 0.25);  /* token + L4 */
}

/* Preview screenshot del catálogo */
.lp-tools-preview {
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    border: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.2);
}

.lp-tools-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.lp-tools-preview figcaption {
    padding: 0.6rem var(--spacing-md);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgb(var(--c-paper-rgb) / 0.5);
    border-top: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.2);
}

.lp-tools-preview figcaption span {
    color: var(--c-coral);
}

/* Variante para la tarjeta coral (Audition Book) */
.lp-tools-preview--ab {
    border-color: rgb(var(--c-paper-rgb) / 0.35);
    margin-top: var(--spacing-md);
}

.lp-tools-preview--ab figcaption {
    color: rgb(var(--c-paper-rgb) / 0.6);
    border-top-color: rgb(var(--c-paper-rgb) / 0.35);
}

.lp-tools-preview--ab figcaption span {
    color: var(--c-indigo);
}

.lp-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.lp-tool-card {
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: var(--spacing-lg);
    align-items: center;
    border: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.25);
    background: rgb(var(--c-paper-rgb) / 0.06);
    padding: var(--spacing-lg);
}

.lp-tool-card--accent {
    background: var(--c-coral);
    border-color: var(--c-coral);
    color: var(--c-paper);
}

/* Figura dentro del card: sin margin-top, centrada verticalmente */
.lp-tool-card .lp-tools-preview {
    margin: 0;
    align-self: center;
}

/* Breakpoints → landing.responsive.css */

.lp-tool-num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--c-coral);
    line-height: 0.85;
    margin-bottom: var(--space-md);
}

.lp-tool-card--accent .lp-tool-num {
    color: var(--c-indigo);
}

.lp-tool-card h3 {
    font-size: 1.25rem;
    color: var(--c-paper);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lp-tool-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(var(--c-paper-rgb) / 0.85);
    margin-bottom: var(--spacing-sm);
}

.lp-tool-card--accent .lp-tool-desc {
    color: rgb(var(--c-paper-rgb) / 0.9);
}

.lp-tool-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-tool-features li {
    padding-left: 1.4em;
    position: relative;
    font-size: 0.9rem;
    color: rgb(var(--c-paper-rgb) / 0.75);
    line-height: 1.45;
}

.lp-tool-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    background: var(--c-coral);
}

.lp-tool-card--accent .lp-tool-features li::before {
    background: var(--c-indigo);
}

.lp-tool-card--accent .lp-tool-features li {
    color: rgb(var(--c-paper-rgb) / 0.85);
}

/* =======================================================================
   LP-STEPS — How it works (S4)
   Reuses .ab-steps/.ab-step from existing styles
   ======================================================================= */
.lp-steps {
    background: var(--c-paper);
    padding: var(--spacing-xl) 0;
}

/* Titular único de sección — sin kicker encima, lleva todo el peso visual */
.lp-steps-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-title);
    color: var(--c-indigo);
    line-height: 0.9;
    margin-bottom: 0;
}

/* =======================================================================
   LP-FILTERS — Taxonomy Filter Table (S6)
   ======================================================================= */
.lp-filters {
    background: var(--c-carbon);
    padding: var(--spacing-xl) 0;
    color: var(--c-paper);
}

/* Header: título + lead alineados a la izquierda, bien proporcionados */
.lp-filters-header {
    margin-bottom: var(--spacing-xl);
}

.lp-filters-title {
    font-family: var(--font-heading);   /* --font-heading = Gobold (no existe --font-display) */
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;                   /* Gobold: único weight válido */
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--c-paper);
    margin: 0 0 var(--spacing-sm);
}

.lp-filters-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: rgb(var(--c-paper-rgb) / 0.6);
    margin: 0;
}

/* ── Filter Table ── */
/* 4 filas horizontales separadas por reglas estructurales */
.lp-ftable {
    border-top: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.2);
}

.lp-frow {
    display: grid;
    grid-template-columns: 3rem 14rem 1fr;
    align-items: center;
    gap: var(--spacing-md);
    padding: 1.25rem 0;
    border-bottom: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.12);
}

/* Número índice — pequeño, muted, anclaje visual */
.lp-findex {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 900;   /* Gobold: único weight válido */
    letter-spacing: 2px;
    color: rgb(var(--c-paper-rgb) / 0.25);
}

/* Nombre de dimensión — caps estructural, lectura limpia */
.lp-fname {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 900;   /* Gobold: único weight válido */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgb(var(--c-paper-rgb) / 0.55);
}

/* Contenedor de pills — flex wrap */
.lp-fpills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Pills — base + variantes de color del producto ── */
/* Fondo transparente + borde de color: ligero, no grita */
.pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 900;   /* Gobold: único weight válido */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: var(--border-w-interactive) solid currentColor;
    background: transparent;
    line-height: 1;
}

/* Colores extraídos del diseño real del producto */
.pill--blue    { color: #7b9fd4; }
.pill--pink    { color: #d47b9f; }
.pill--violet  { color: #9b8dd4; }
.pill--coral   { color: var(--c-coral); }
.pill--green   { color: #6db87a; }
.pill--orange  { color: #d4916d; }
.pill--neutral { color: rgb(var(--c-paper-rgb) / 0.45); }
.pill--purple  { color: #a87bd4; }
.pill--amber   { color: #c9b35a; }
.pill--red     { color: #d46d6d; }
.pill--teal    { color: #6db8b0; }
.pill--sky     { color: #6da8d4; }

/* Breakpoints → landing.responsive.css */












/* =======================================================================
   LP-IA — AI section (S6)
   ======================================================================= */
.lp-ia {
    background: var(--c-indigo);
    color: var(--c-paper);
    padding: var(--spacing-xl) 0;
}

.lp-ia h2 {
    color: var(--c-paper);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.25;
    max-width: 640px;
}

.lp-ia .lp-kicker {
    color: var(--c-coral);
}

.lp-ia-lead {
    font-size: 1.15rem;
    line-height: 1.65;
    color: rgb(var(--c-paper-rgb) / 0.85);
    max-width: 720px;
    margin-bottom: var(--spacing-lg);
}

.lp-ia-lead strong {
    color: var(--c-coral);
}

.lp-ia-features {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-lg);
    border-top: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.25);
}

.lp-ia-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    border-bottom: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.25);
    min-height: 110px;
    transition: background 0.2s ease;
}

.lp-ia-row:hover {
    background: rgb(var(--c-paper-rgb) / 0.04);
}

.lp-ia-row-left {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-right: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.25);
    padding: var(--spacing-md);
}

.lp-ia-num,
.lp-ia-dash {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--c-coral);
    line-height: 1;
    letter-spacing: -0.02em;
}

.lp-ia-row-right {
    padding: var(--spacing-md) var(--spacing-lg);
}

.lp-ia-row-right h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
    color: var(--c-paper);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-ia-row-right p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--c-paper-rgb) / 0.7);
    margin: 0;
    max-width: 620px;
}

/* =======================================================================
   QAB — ¿Qué es un Audition Book? (S7)
   ======================================================================= */
.qab-section {
    background: var(--c-paper);
    padding: var(--spacing-xl) 0;
    color: var(--c-carbon);
}

/* Grid asimétrico 5:4 — izquierda anclada, derecha más dinámica */
.qab-grid {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* ── Columna izquierda ── */
.qab-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border-right: var(--border-w-structural) solid rgb(var(--c-carbon-rgb) / 0.12);
    padding-right: var(--spacing-xl);
}

/* Kicker — indigo: coral falla WCAG AA en texto normal <18pt (brand_manual §3.1) */
.qab-kicker {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-indigo);
}

/* Título display — Gobold, protagonista visual */
.qab-title {
    font-family: var(--font-heading);   /* --font-heading = Gobold (único token de display) */
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;                   /* Gobold solo existe en weight 900 */
    text-transform: none;
    letter-spacing: -0.03em;
    line-height: 1.0;
    color: var(--c-indigo);
    margin: 0;
}

/* Bloque de definición — borde izquierdo indigo como ancla visual */
.qab-def {
    border-left: var(--border-w-structural) solid var(--c-indigo);
    padding-left: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.qab-def p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgb(var(--c-carbon-rgb) / 0.75);
    margin: 0;
}

.qab-def em {
    font-style: italic;
    color: var(--c-carbon);
    font-weight: 900;   /* Gobold: weight 900 obligatorio */
}

/* ── Columna derecha ── */
.qab-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-top: 0.5rem; /* alineación óptica con el kicker */
}

/* Contexto Broadway — texto algo más grande, lectura fluida */
.qab-context {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgb(var(--c-carbon-rgb) / 0.7);
    margin: 0;
}

/* Pull-quote — hook emocional. Coral como borde accent (no como texto de párrafo) */
.qab-pull {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: var(--border-w-structural) solid var(--c-coral);
    background: rgb(var(--c-coral-rgb) / 0.06);
}

.qab-pull p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--c-carbon);
    margin: 0;
}

/* Coral en <strong> pasa WCAG AA: texto bold display sobre fondo claro (brand_manual §3.1) */
.qab-pull strong {
    color: var(--c-coral);
    font-weight: 900;
}

/* Breakpoints → landing.responsive.css */