/* =====================================================================
   FASE 1 — Design tokens (aditivo, no modifica selectores existentes)
   Origen: alineado con ../prototipo/styles.css y con tailwind.config
   inline en index.html (paleta `brand.*`). Los valores hex preservan
   la identidad actual; las nuevas variables permiten que Fase 2+
   migren reglas a tokens sin cambios de marca.
   ===================================================================== */
:root {
    /* Marca — alineada con tailwind.config brand.* */
    --brand-blue: #2268C7;          /* = brand.primary */
    --brand-blue-2: #1B54A3;
    --brand-blue-soft: #E7EFFA;
    --brand-orange: #F27525;        /* = brand.accent */
    --brand-orange-2: #D85F18;
    --brand-orange-soft: #FDEBD9;

    /* Estados de riesgo (alineados a la app) */
    --brand-red: #DC2626;           /* = brand.risk · CRÍTICO */
    --brand-red-soft: #FEE2E2;
    --brand-amber: #D97706;         /* RIESGO */
    --brand-amber-soft: #FEF3C7;
    --brand-green: #15803D;         /* NORMAL */
    --brand-green-soft: #DCFCE7;
    --brand-success: #16A34A;       /* = brand.success */

    --critico: var(--brand-red);
    --riesgo: var(--brand-amber);
    --normal: var(--brand-green);
    --critico-bg: var(--brand-red-soft);
    --riesgo-bg: var(--brand-amber-soft);
    --normal-bg: var(--brand-green-soft);

    /* Superficies — gris azulado claro SaaS B2B */
    --paper: #FFFFFF;
    --paper-2: #F7F9FC;
    --paper-3: #EEF2F7;
    --paper-light: #F9FAFB;         /* = brand.light (compat) */

    /* Tinta */
    --ink: #0F172A;
    --ink-2: #334155;
    --ink-3: #64748B;
    --ink-4: #94A3B8;
    --ink-dark: #111827;            /* = brand.dark (compat) */
    --ink-gray: #4B5563;            /* = brand.gray (compat) */

    /* Hairlines / divisores */
    --rule: #E2E8F0;
    --rule-2: #EEF2F7;
    --rule-soft: #E5E7EB;           /* = brand.border (compat) */

    /* Tipografías */
    --sans: 'Inter', 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sans-tight: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;

    /* Sombras (cards y CTAs) */
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 6px 16px rgba(15, 23, 42, 0.08);
    --shadow-cta: 0 6px 14px rgba(34, 104, 199, 0.22);
    --shadow-cta-accent: 0 12px 26px rgba(242, 117, 37, 0.36);

    /* Radios */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Hairline canónico */
    --hairline: 1px solid var(--rule);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo-horizontal {
    display: block;
    width: auto;
    height: 3.6rem;
    max-width: min(60vw, 360px);
    object-fit: contain;
}

.brand-logo-navbar {
    height: 3.6rem;
    max-width: min(60vw, 320px);
}

@media (max-width: 768px) {
    .brand-logo-navbar {
        height: 2.8rem;
        max-width: 220px;
    }
}


/* =====================================================================
   REFACTOR HEADER + HERO (parte superior de la landing)
   Solo afecta a la zona superior. No toca secciones inferiores.
   Reglas aditivas — el bloque previo de styles.css se conserva.
   ===================================================================== */

/* ---- Header superior sticky ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
}
.site-header-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0.95rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo img {
    display: block;
    height: 3.4rem;
    width: auto;
}
.site-nav {
    display: none;
    gap: 1.85rem;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 500;
    color: #4B5563;
}
@media (min-width: 1024px) {
    .site-nav { display: flex; }
}
.site-nav-link {
    position: relative;
    color: #4B5563;
    text-decoration: none;
    transition: color .15s ease;
}
.site-nav-link:hover { color: var(--brand-orange); }
.site-nav-link.is-active { color: var(--brand-orange); font-weight: 600; }
.site-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    background: var(--brand-orange);
    color: #ffffff;
    border-radius: 0.55rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(242, 117, 37, 0.28);
    transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.site-cta:hover {
    background: var(--brand-orange-2);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(242, 117, 37, 0.36);
}

/* ---- Responsive afino del header (heredado de FASE 1/2) ---- */
@media (max-width: 1023px) {
    .site-header-inner { padding: 0.85rem 1.25rem; }
}
@media (max-width: 640px) {
    .site-header-inner { padding: 0.75rem 1rem; gap: 0.5rem; }
    .site-cta { padding: 0.5rem 0.95rem; font-size: 0.82rem; }
    .site-logo img { height: 2.8rem; }
}

/* =====================================================================
   FASE 2 — HERO ESTÁTICO (SaaS B2B, 1 slide)
   Reemplaza el hero-carrusel anterior. Las reglas .hero, .hero-slide,
   .hero-content, .hero-card, .hero-arrow*, .hero-dot*, .hero-btn*,
   .hero-title, .hero-subtitle, .hero-kicker (variante naranja), etc.
   permanecen en el archivo pero quedan dormidas — ningún elemento
   las referencia. Se eliminarán cuando se considere consolidado.
   Layout: 2 columnas (texto izquierda, mockup derecha) en desktop;
   stacked en móvil. Fondo gris azulado claro (--paper-3).
   ===================================================================== */
.hero-section {
    position: relative;
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    isolation: isolate;
}
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% -10%, rgba(34, 104, 199, 0.08), transparent 55%),
        radial-gradient(circle at 92% 110%, rgba(242, 117, 37, 0.05), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1480px;
    margin: 0 auto;
    padding: 3rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 3rem;
        padding: 4.5rem 1.5rem 4rem;
    }
}

/* ---- Copy column ---- */
.hero-copy { max-width: 36rem; }

.hero-section .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.34rem 0.78rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow-card);
}
.hero-kicker-pulse {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
    flex-shrink: 0;
}

.hero-headline {
    font-family: var(--sans-tight);
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1.05rem;
    max-width: 18ch;
}
.hero-headline-em {
    color: var(--brand-orange);
}

.hero-lede {
    font-size: 1.075rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 1.6rem;
    max-width: 34rem;
}

.hero-section .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0 0 1.6rem;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.35rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .2s ease, border-color .15s ease;
    white-space: nowrap;
    line-height: 1;
}
.hero-cta-primary {
    background: var(--brand-orange);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(242, 117, 37, 0.30);
}
.hero-cta-primary:hover {
    background: var(--brand-orange-2);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(242, 117, 37, 0.38);
}
.hero-cta-secondary {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
}
.hero-cta-secondary:hover {
    border-color: var(--ink-3);
    background: var(--paper-2);
    transform: translateY(-1px);
}

.hero-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-3);
}
.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.hero-trust li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--brand-orange);
    flex-shrink: 0;
}

/* ---- Stage / mockup column ---- */
.hero-stage {
    position: relative;
}
.hero-mockup {
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 48px -28px rgba(15, 23, 42, 0.18),
        0 12px 28px -16px rgba(34, 104, 199, 0.10);
    overflow: hidden;
    position: relative;
}
.hero-mockup-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.65rem 0.85rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}
.hero-mockup-bar span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--rule);
}
.hero-mockup img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .hero-inner { padding: 2.25rem 1rem 2rem; }
    .hero-headline { font-size: clamp(1.75rem, 7vw, 2.25rem); max-width: none; }
    .hero-section .hero-actions .hero-cta { width: 100%; }
}

/* =====================================================================
   FASE 2 (refinamiento) — TUNING HERO + BLOQUE PROBLEMA
   Sobreescribe por cascada (misma especificidad). Añade el primer
   bloque post-hero ("El problema · falta de acción tutorial").
   ===================================================================== */

/* Header nav — 6 ítems (Producto, Cómo funciona, LMS/Excel, Versiones,
   Casos de uso, Trazabilidad). Gap y font reducidos para que entren en
   una sola línea desde 1024px. */
.site-nav {
    gap: 1.15rem;
    font-size: 0.88rem;
}

/* Hero — H1 más largo (frase canónica) + mockup con más presencia */
.hero-headline {
    font-size: clamp(1.85rem, 3.6vw, 2.65rem);
    max-width: 26ch;
}
@media (min-width: 1024px) {
    .hero-inner {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.85fr);
        gap: 2rem;
    }
}
.hero-mockup-bar { padding: 0.5rem 0.75rem; }

/* =====================================================================
   Sección PROBLEMA · primer bloque post-hero
   ===================================================================== */
.problem-section {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.problem-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4rem 1.5rem 4.5rem;
}
.problem-head {
    max-width: 64ch;
    margin: 0 0 2.5rem;
}
.problem-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.problem-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.problem-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1rem;
}
.problem-title-em {
    color: var(--brand-orange);
}
.problem-lede {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 64ch;
}
.problem-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .problem-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}
.problem-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem 1.6rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.problem-card:hover {
    border-color: var(--ink-3);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.problem-card-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-orange-soft);
    color: var(--brand-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.problem-card-mark svg {
    width: 20px;
    height: 20px;
}
.problem-card-title {
    font-family: var(--sans-tight);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.45rem;
}
.problem-card-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
}

@media (max-width: 767px) {
    .problem-inner { padding: 2.75rem 1rem 3rem; }
}

/* =====================================================================
   FASE 3 — Scroll-margin para sticky header
   ===================================================================== */
section[id] {
    scroll-margin-top: 80px;
}

/* =====================================================================
   FASE 3 — CÓMO FUNCIONA · 5 pasos operativos
   Datos → Riesgo → Tarea → Intervención → Registro
   Fondo gris azulado claro; cards blancas con border-top de color;
   conectores chevron-right entre cards en desktop, ocultos en móvil.
   ===================================================================== */
.flow-section {
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
}
.flow-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}
.flow-head {
    max-width: 64ch;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.flow-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-blue);
    margin-bottom: 0.85rem;
}
.flow-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-blue);
}
.flow-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.flow-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 auto;
    max-width: 56ch;
}

/* Steps container — stacked en móvil, horizontal en desktop */
.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .flow-steps {
        flex-direction: row;
        align-items: stretch;
        gap: 0.45rem;
    }
}

/* Cards */
.flow-step {
    flex: 1 1 0;
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--flow-accent, var(--brand-blue));
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.25rem 1.5rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.flow-step:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.flow-step--blue   { --flow-accent: var(--brand-blue); }
.flow-step--red    { --flow-accent: var(--brand-red); }
.flow-step--orange { --flow-accent: var(--brand-orange); }
.flow-step--green  { --flow-accent: var(--brand-success); }

.flow-step-num {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--flow-accent);
    margin-bottom: 0.55rem;
}
.flow-step-title {
    font-family: var(--sans-tight);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.4rem;
}
.flow-step-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

/* Conectores chevron entre cards (solo desktop) */
.flow-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--ink-4);
    flex-shrink: 0;
    width: 22px;
}
.flow-arrow svg {
    width: 18px;
    height: 18px;
}
@media (min-width: 1024px) {
    .flow-arrow { display: inline-flex; }
}

@media (max-width: 767px) {
    .flow-inner { padding: 3rem 1rem 3.5rem; }
    .flow-head { margin-bottom: 2rem; }
}

/* =====================================================================
   FASE 4 — PRODUCTO EN ACCIÓN · operativa diaria
   Sustituye el bloque azul antiguo "Qué cambia en la operativa del
   tutor". Layout: header + split (texto izquierda / mockup derecha)
   + 4 cards de apoyo. Fondo blanco, cards con hairline 0.5px y
   acentos azul/naranja/verde, sin fondo azul masivo.
   ===================================================================== */
.action-section {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.action-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.action-head {
    max-width: 64ch;
    margin: 0 0 1.75rem;
}
.action-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.action-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.action-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.action-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    max-width: 64ch;
}

/* Split — texto + mockup. align-items:center centra el vídeo
   verticalmente contra TODA la columna de texto (head + eyebrow +
   lead + checks). En móvil (1 col) align-items no afecta. */
.action-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
    margin: 0 0 2.5rem;
}
@media (min-width: 1024px) {
    .action-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        gap: 2.5rem;
    }
}
/* action-copy es el único contenedor de texto izquierdo: contiene
   action-head + eyebrow + lead + checks como un único bloque. Sin
   justify-content ni space-between — los hijos se apilan con sus
   margins normales. */
.action-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* action-head dentro de action-copy: separación moderada antes
   del bloque "Operativa diaria". */
.action-copy .action-head {
    max-width: none;
    margin: 0 0 1.5rem;
}

.action-copy { max-width: 36rem; }
.action-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-blue);
    margin: 0 0 0.7rem;
}
.action-eyebrow::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--brand-blue);
    display: inline-block;
}
.action-copy-lead {
    font-size: 1.075rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 1rem;
}
.action-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.action-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.action-checks li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--brand-success);
    margin-top: 0.18rem;
}

/* Stage / mockup */
.action-stage {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.action-mockup {
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 48px -28px rgba(15, 23, 42, 0.18),
        0 12px 28px -16px rgba(34, 104, 199, 0.10);
}
.action-mockup-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}
.action-mockup-bar span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--rule);
}
.action-mockup img {
    display: block;
    width: 100%;
    height: auto;
}
.action-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}
.action-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.action-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    display: inline-block;
}
.action-legend-dot-critico { background: var(--critico); }
.action-legend-dot-riesgo  { background: var(--riesgo); }
.action-legend-dot-normal  { background: var(--normal); }

/* 4 supporting cards */
.action-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .action-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .action-cards { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.action-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.4rem 1.55rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.action-card:hover {
    border-color: var(--ink-3);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.action-card-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.action-card-mark svg {
    width: 20px;
    height: 20px;
}
.action-card-mark-blue {
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
}
.action-card-mark-orange {
    background: var(--brand-orange-soft);
    color: var(--brand-orange);
}
.action-card-mark-green {
    background: var(--brand-green-soft);
    color: var(--brand-success);
}
.action-card-title {
    font-family: var(--sans-tight);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.4rem;
}
.action-card-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

@media (max-width: 767px) {
    .action-inner { padding: 3rem 1rem 3.5rem; }
    .action-split { gap: 1.75rem; margin-bottom: 2.25rem; }
}

/* =====================================================================
   FASE 5 — FICHA 360 · contexto antes de intervenir
   Sustituye el bloque "Del seguimiento reactivo a la operativa
   estructurada" / Antes-Después. Fondo paper-3 alternando con
   "Producto en acción" (paper). Layout: header centrado +
   split (mockup izquierda / 4 módulos derecha) + franja flow.
   ===================================================================== */
.ficha-section {
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
}
.ficha-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.ficha-head {
    max-width: 64ch;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.ficha-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-blue);
    margin-bottom: 0.85rem;
}
.ficha-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-blue);
}
.ficha-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.ficha-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 auto;
    max-width: 56ch;
}

/* Split — mockup left, 4 módulos right */
.ficha-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: start;
    margin: 0 0 2.5rem;
}
@media (min-width: 1024px) {
    .ficha-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: stretch;
    }
}

/* Stage / mockup */
.ficha-stage {
    display: flex;
    flex-direction: column;
}
.ficha-mockup {
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 48px -28px rgba(15, 23, 42, 0.18),
        0 12px 28px -16px rgba(34, 104, 199, 0.10);
}
.ficha-mockup-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}
.ficha-mockup-bar span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--rule);
}
.ficha-mockup img {
    display: block;
    width: 100%;
    height: auto;
}

/* =====================================================================
   FASE 16 — Ficha 360 · panel mock CODIFICADO (HTML/CSS, no imagen)
   Sustituye al <img> ficha360.png por una representación legible
   construida en código: header con avatar + nombre + estado, tabs
   Contexto/Decisión/Intervención/Registro y panel correspondiente.
   Datos ficticios. Naranja = acción. Rojo = CRÍTICO. Verde = positivo.
   ===================================================================== */
.ficha-mockup--coded {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 48px -28px rgba(15, 23, 42, 0.18),
        0 12px 28px -16px rgba(34, 104, 199, 0.10);
}

/* ---- Header ficha (avatar + nombre + estado + tarea) ---- */
.ficha-mock-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--rule);
}
.ficha-mock-id {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.ficha-mock-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans-tight);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ficha-mock-id-text { min-width: 0; }
.ficha-mock-name {
    font-family: var(--sans-tight);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.ficha-mock-meta {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-3);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ficha-mock-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.ficha-mock-state {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--brand-red);
    color: #FFFFFF;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    line-height: 1.4;
}
.ficha-mock-task {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-orange);
    border: 1px solid var(--brand-orange);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
}
.ficha-mock-task svg { width: 12px; height: 12px; }

/* ---- Tabs ---- */
.ficha-mock-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.ficha-mock-tabs::-webkit-scrollbar { display: none; }
.ficha-mock-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.7rem 1rem;
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color .15s ease;
}
.ficha-mock-tab:hover { color: var(--ink-2); }
.ficha-mock-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--brand-orange);
    transform: scaleX(0);
    transition: transform .18s ease;
}
.ficha-mock-tab.is-active {
    color: var(--ink);
    font-weight: 600;
}
.ficha-mock-tab.is-active::after { transform: scaleX(1); }
.ficha-mock-tab:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: -2px;
}

/* ---- Paneles ---- */
.ficha-mock-panels {
    padding: 1.15rem 1.25rem 1.25rem;
}
.ficha-mock-panel { animation: fichaFade .18s ease; }
.ficha-mock-panel[hidden] { display: none; }
@keyframes fichaFade {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ficha-mock-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}
@media (min-width: 640px) {
    .ficha-mock-grid { grid-template-columns: repeat(2, 1fr); }
    .ficha-mock-row--full { grid-column: 1 / -1; }
}
.ficha-mock-row {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--rule-2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ficha-mock-row:nth-child(2n) { border-left: 1px solid var(--rule-2); }
@media (max-width: 639px) {
    .ficha-mock-row:nth-child(2n) { border-left: 0; }
}
.ficha-mock-row:last-child,
.ficha-mock-row:nth-last-child(2):not(.ficha-mock-row--full) { border-bottom: 0; }
.ficha-mock-key {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
}
.ficha-mock-val {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.4;
}
.ficha-mock-val--num {
    font-family: var(--mono);
    font-feature-settings: "tnum";
}
.ficha-mock-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    border: 1px solid currentColor;
    background: transparent;
    line-height: 1.6;
}
.ficha-mock-pill--riesgo  { color: var(--brand-amber); }
.ficha-mock-pill--critico { color: var(--brand-red); }
.ficha-mock-pill--orange  { color: var(--brand-orange); }
.ficha-mock-pill--green   { color: var(--brand-success); }

.ficha-mock-note {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-2);
    padding: 0.7rem 0.85rem;
    background: var(--paper-2);
    border-left: 2px solid var(--brand-orange);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ---- Botones del panel Intervención (mock visual) ---- */
.ficha-mock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.95rem;
}
.ficha-mock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 500;
}
.ficha-mock-btn svg { width: 14px; height: 14px; }
.ficha-mock-btn--primary {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(242, 117, 37, 0.22);
}

/* ---- Histórico (panel Registro) ---- */
.ficha-mock-history {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ficha-mock-history-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--rule-2);
}
.ficha-mock-history-item:last-child { border-bottom: 0; }
.ficha-mock-history-date {
    font-family: var(--mono);
    font-feature-settings: "tnum";
    font-size: 0.78rem;
    color: var(--ink-3);
}
.ficha-mock-history-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    border: 1px solid currentColor;
    background: transparent;
    white-space: nowrap;
    line-height: 1.4;
}
.ficha-mock-history-pill--blue   { color: var(--brand-blue); }
.ficha-mock-history-pill--orange { color: var(--brand-orange); }
.ficha-mock-history-pill--green  { color: var(--brand-success); }
.ficha-mock-history-result {
    font-size: 0.85rem;
    color: var(--ink-2);
}
.ficha-mock-history-result--soft { color: var(--ink-3); font-style: italic; }

/* Responsive: en móvil header se apila */
@media (max-width: 540px) {
    .ficha-mock-head {
        flex-direction: column;
        align-items: stretch;
    }
    .ficha-mock-action {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
    .ficha-mock-tab { padding: 0.65rem 0.8rem; font-size: 0.8rem; }
    .ficha-mock-panels { padding: 1rem 0.95rem 1.1rem; }
    .ficha-mock-history-item { grid-template-columns: auto 1fr; }
    .ficha-mock-history-result { grid-column: 1 / -1; }
}

/* Módulos en grid 2x2 */
.ficha-modules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-content: stretch;
}
@media (min-width: 640px) {
    .ficha-modules { grid-template-columns: repeat(2, 1fr); gap: 0.95rem; }
}
.ficha-module {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ficha-accent, var(--brand-blue));
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.25rem 1.35rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
}
.ficha-module:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.ficha-module--blue   { --ficha-accent: var(--brand-blue); }
.ficha-module--orange { --ficha-accent: var(--brand-orange); }
.ficha-module--ink    { --ficha-accent: var(--ink-2); }
.ficha-module--green  { --ficha-accent: var(--brand-success); }

.ficha-module-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ficha-accent);
    margin-bottom: 0.4rem;
}
.ficha-module-title {
    font-family: var(--sans-tight);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.35rem;
}
.ficha-module-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

/* Mini franja flow */
.ficha-flow {
    list-style: none;
    margin: 0;
    padding: 0.95rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    box-shadow: var(--shadow-card);
}
.ficha-flow li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--sans-tight);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.ficha-flow-num {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}
.ficha-flow-arrow {
    color: var(--ink-4);
    line-height: 0;
    font-weight: 400;
}
.ficha-flow-arrow svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .ficha-inner { padding: 3rem 1rem 3.5rem; }
    .ficha-split { gap: 1.5rem; margin-bottom: 1.5rem; }
    .ficha-flow { padding: 0.85rem 1rem; gap: 0.45rem 0.85rem; }
    .ficha-flow li { font-size: 0.875rem; }
}

/* =====================================================================
   FASE 6 — LMS / EXCEL · datos de partida
   Sección dedicada que sustituye al anchor stub temporal #lms-excel
   (que estaba dentro de #problema). 2 cards grandes lado a lado:
   LMS (azul, integración) y Excel/CSV (verde, entrada inicial).
   Fondo paper alternando con Ficha 360 (paper-3). Mini franja inferior
   con flujo de datos.
   ===================================================================== */
.sources-section {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.sources-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.sources-head {
    max-width: 64ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.sources-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.sources-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.sources-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.sources-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 auto;
    max-width: 56ch;
}

/* 2 cards lado a lado */
.sources-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0 0 2rem;
}
@media (min-width: 768px) {
    .sources-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.sources-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--source-accent, var(--brand-blue));
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.6rem 1.75rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
}
.sources-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.sources-card--lms    { --source-accent: var(--brand-blue); }
.sources-card--excel  { --source-accent: var(--brand-success); }

.sources-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.sources-card-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sources-card-mark svg {
    width: 22px;
    height: 22px;
}
.sources-card-mark-blue {
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
}
.sources-card-mark-green {
    background: var(--brand-green-soft);
    color: var(--brand-success);
}
.sources-card-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--source-accent);
    margin-bottom: 0.2rem;
}
.sources-card-title {
    font-family: var(--sans-tight);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
.sources-card-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 1rem;
}
.sources-card-list {
    list-style: none;
    margin: 0;
    padding: 0.95rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-top: 1px solid var(--rule-2);
}
.sources-card-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--ink-2);
}
.sources-card-list li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--source-accent);
}

/* Nota prudente al pie de la sección */
.sources-note {
    margin: 1rem 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}

/* Mini franja flow datos→registro */
.sources-flow {
    list-style: none;
    margin: 0;
    padding: 0.95rem 1.5rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}
.sources-flow li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans-tight);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.sources-flow-arrow {
    color: var(--ink-4);
    line-height: 0;
    font-weight: 400;
}
.sources-flow-arrow svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .sources-inner { padding: 3rem 1rem 3.5rem; }
    .sources-card { padding: 1.4rem 1.3rem 1.5rem; }
    .sources-flow { padding: 0.85rem 1rem; gap: 0.45rem 0.85rem; }
    .sources-flow li { font-size: 0.875rem; }
}

/* =====================================================================
   FASE 7 — TRAZABILIDAD · histórico revisable
   Sustituye "Cumplimiento y trazabilidad / Preparado para entornos
   regulados" + claim FUNDAE/SEPE. Fondo paper-3 alternando con
   LMS/Excel (paper). Bloque principal: panel tipo producto con
   tabla compacta inspirada en la app. Bajo: 3 cards de capacidades.
   Sin claims FUNDAE/SEPE explícitos.
   ===================================================================== */
.trace-section {
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
}
.trace-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.trace-head {
    max-width: 64ch;
    margin: 0 0 2.5rem;
}
.trace-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-blue);
    margin-bottom: 0.85rem;
}
.trace-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-blue);
}
.trace-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.trace-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    max-width: 64ch;
}

/* Panel histórico tipo producto */
.trace-panel {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
}
.trace-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.25rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    gap: 0.75rem;
}
.trace-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--sans-tight);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.trace-panel-title svg {
    width: 18px;
    height: 18px;
    color: var(--brand-blue);
}
.trace-panel-tag {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--paper);
    white-space: nowrap;
}
.trace-panel-foot {
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
    text-align: right;
}
.ep-cap-foot {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}

/* Tabla compacta inspirada en la app */
.trace-table-scroll { overflow-x: auto; }
.trace-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 720px;
}
.trace-table th {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    text-align: left;
    padding: 0.7rem 1rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.trace-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--rule-2);
    color: var(--ink-2);
    vertical-align: top;
}
.trace-table tbody tr:last-child td { border-bottom: 0; }
.trace-table tbody tr:hover { background: var(--paper-2); }

.trace-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    font-size: 0.78rem;
    white-space: nowrap;
}
.trace-alum {
    font-family: var(--sans-tight);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.25;
}
.trace-alum-id {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--ink-4);
    letter-spacing: 0.06em;
    margin-top: 0.15rem;
}
.trace-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    border: 1px solid currentColor;
    background: transparent;
    white-space: nowrap;
}
.trace-pill-blue   { color: var(--brand-blue); }
.trace-pill-orange { color: var(--brand-orange); }
.trace-pill-green  { color: var(--brand-success); }

.trace-result {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.trace-result-soft { color: var(--ink-3); }
.trace-next {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* 3 cards inferiores */
.trace-cards {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .trace-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.trace-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.4rem 1.55rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.trace-card:hover {
    border-color: var(--ink-3);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.trace-card-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.trace-card-mark svg { width: 20px; height: 20px; }
.trace-card-mark-blue   { background: var(--brand-blue-soft);   color: var(--brand-blue); }
.trace-card-mark-orange { background: var(--brand-orange-soft); color: var(--brand-orange); }
.trace-card-mark-green  { background: var(--brand-green-soft);  color: var(--brand-success); }

.trace-card-title {
    font-family: var(--sans-tight);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.4rem;
}
.trace-card-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

.trace-note {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin: 0;
    padding-top: 0.5rem;
}

@media (max-width: 767px) {
    .trace-inner { padding: 3rem 1rem 3.5rem; }
    .trace-panel-head { padding: 0.85rem 1rem; }
    .trace-table th, .trace-table td { padding: 0.7rem 0.85rem; }
    .trace-note { font-size: 0.65rem; }
}

/* =====================================================================
   FASE 8 — CASOS DE USO · perfiles que encajan
   Sustituye "Pensado para equipos que gestionan seguimiento y
   retención" + 4 feature-cards centradas con bg-brand-light. Fondo
   paper (blanco) alternando con Trazabilidad (paper-3). Cards con
   icono coloreado, tag mono, título y texto. Sin fondo azul masivo.
   ===================================================================== */
.cases-section {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.cases-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.cases-head {
    max-width: 64ch;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.cases-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.cases-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.cases-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.cases-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 auto;
    max-width: 60ch;
}

.cases-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .cases-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cases-cards { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.cases-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem 1.65rem;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
}
.cases-card:hover {
    border-color: var(--ink-3);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.cases-card-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.cases-card-mark svg { width: 20px; height: 20px; }
.cases-card-mark-blue   { background: var(--brand-blue-soft);   color: var(--brand-blue); }
.cases-card-mark-orange { background: var(--brand-orange-soft); color: var(--brand-orange); }
.cases-card-mark-green  { background: var(--brand-green-soft);  color: var(--brand-success); }

.cases-card-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    margin-bottom: 0.3rem;
}
.cases-card-title {
    font-family: var(--sans-tight);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.45rem;
}
.cases-card-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

@media (max-width: 767px) {
    .cases-inner { padding: 3rem 1rem 3.5rem; }
}

/* =====================================================================
   FASE 9 — CTA FINAL · solicitar demo o revisión
   Sustituye "¿Quieres mejorar la retención…" + form vertical centrado.
   Layout: 2 columnas (narrativa izquierda + form panel derecha).
   Fondo paper-3 alternando con Casos de uso (paper). Mantiene
   #pilot-form, action Formspree, hidden _subject y comportamiento
   intacto de main.js (mailto fallback). Inputs con borde fino, focus
   ring azul. Botón primario azul de marca. Sin fondo azul masivo.
   ===================================================================== */
.cta-section {
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
}
.cta-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .cta-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 3.5rem;
    }
}

/* Columna izquierda — narrativa */
.cta-copy { max-width: 36rem; }
.cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.cta-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.cta-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.95rem;
}
.cta-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 1.4rem;
}

.cta-checks {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.cta-checks li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.95rem;
    color: var(--ink-2);
}
.cta-checks li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--brand-blue);
}

.cta-note {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    margin: 0;
}

/* Columna derecha — formulario en card */
.cta-form-wrap {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    padding: 1.85rem 1.85rem 1.5rem;
    box-shadow: var(--shadow-card);
}
.cta-form-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule-2);
}
.cta-form-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-blue);
    margin-bottom: 0.4rem;
}
.cta-form-title {
    font-family: var(--sans-tight);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.35rem;
}
.cta-form-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

.cta-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}
@media (max-width: 540px) {
    .cta-form { grid-template-columns: 1fr; }
}
.cta-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cta-field-full { grid-column: 1 / -1; }
.cta-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}
.cta-label-soft {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-4);
}
.cta-input {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 0.65rem 0.85rem;
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--ink);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}
.cta-input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(34, 104, 199, 0.16);
}
.cta-input::placeholder { color: var(--ink-4); }
.cta-honeypot { display: none; }

.cta-submit {
    grid-column: 1 / -1;
    appearance: none;
    border: 0;
    background: var(--brand-orange);
    color: #ffffff;
    padding: 0.85rem 1.4rem;
    font-family: var(--sans-tight);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(242, 117, 37, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
    margin-top: 0.4rem;
}
.cta-submit:hover {
    background: var(--brand-orange-2);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(242, 117, 37, 0.38);
}
.cta-submit svg {
    width: 16px;
    height: 16px;
}

.cta-message {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-3);
    min-height: 1.25rem;
}
.cta-fineprint {
    margin: 0.85rem 0 0;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-4);
}

@media (max-width: 767px) {
    .cta-inner { padding: 3rem 1rem 3.5rem; }
    .cta-form-wrap { padding: 1.5rem 1.4rem 1.3rem; }
    .cta-grid { gap: 1.75rem; }
}

/* =====================================================================
   FASE 10 — FOOTER · cierre de marca
   Sustituye el footer simple (logo + copyright). Layout: grid 4 cols
   en desktop (Brand+lema · Producto · Contacto · Legal). Strip
   inferior con copyright + pulse dot. Fondo blanco con borde superior
   fino. Sin fondo azul masivo.
   ===================================================================== */
.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    color: var(--ink-2);
}
.site-footer-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (min-width: 640px) {
    .site-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .site-footer-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

/* Brand col */
.site-footer-brand { max-width: 28rem; }
.site-footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}
.site-footer-logo-img {
    height: 2.25rem;
    width: auto;
    display: block;
}
.site-footer-tagline {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
}

/* Link cols */
.site-footer-h {
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    margin: 0 0 0.85rem;
    font-weight: 500;
}
.site-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.site-footer-col a,
.site-footer-cookies-link {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color .15s ease;
}
.site-footer-col a:hover,
.site-footer-cookies-link:hover { color: var(--brand-blue); }
/* "Configurar cookies" — botón nativo estilado como enlace del footer.
   Reset de estilos por defecto del <button> para que herede el look. */
.site-footer-cookies-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.site-footer-cookies-link:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Bottom strip */
.site-footer-bottom {
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.site-footer-copy {
    font-size: 0.78rem;
    color: var(--ink-3);
    margin: 0;
}
.site-footer-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    margin: 0;
}
.site-footer-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--brand-green);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .site-footer-inner { padding: 2.5rem 1rem 1.25rem; }
    .site-footer-grid { gap: 1.75rem; margin-bottom: 1.5rem; }
}

/* =====================================================================
   FASE 11 — Ancho global full-width SaaS
   max-width 1480 px en todos los contenedores principales (ya
   aplicado por el replace_all). Padding lateral escalado:
     - <768 px (móvil)        : 1rem  = 16 px
     - 768–1023 px (tablet)   : 1.5rem = 24 px (default heredado)
     - ≥1024 px (desktop)     : 3rem  = 48 px
     - ≥1440 px (desktop xl)  : 4rem  = 64 px
   Solo se sobreescriben padding-left/padding-right; el padding
   vertical de cada sección se conserva.
   ===================================================================== */
@media (min-width: 1024px) {
    .site-header-inner,
    .hero-inner,
    .problem-inner,
    .flow-inner,
    .action-inner,
    .ficha-inner,
    .sources-inner,
    .trace-inner,
    .cases-inner,
    .cta-inner,
    .site-footer-inner,
    .comms-inner,
    .versions-inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
@media (min-width: 1440px) {
    .site-header-inner,
    .hero-inner,
    .problem-inner,
    .flow-inner,
    .action-inner,
    .ficha-inner,
    .sources-inner,
    .trace-inner,
    .cases-inner,
    .cta-inner,
    .site-footer-inner,
    .comms-inner,
    .versions-inner {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* =====================================================================
   FASE 14 — COMUNICACIONES · mock conversación + cards Basic/Premium
   Layout: mock de hilo de mensajes (HTML/CSS) a la izquierda, 5 cards
   apiladas a la derecha. Sin placeholders, sin imágenes. Naranja como
   acento de tutor; alumna con burbuja neutra. Card "Comunicación ≠
   intervención" destacada con fondo oscuro.
   ===================================================================== */
.comms-section {
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
}
.comms-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4rem 1.5rem 4.5rem;
}
.comms-head {
    max-width: 64ch;
    margin: 0 0 2.25rem;
}
.comms-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.comms-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.comms-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.comms-title-em { color: var(--brand-orange); }
.comms-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    max-width: 62ch;
}

.comms-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .comms-split {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* ---- LEFT · mock conversación ---- */
.comms-stage {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.comms-mock {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 16px 36px -22px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}
.comms-mock-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}
.comms-mock-bar span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--rule);
}

.comms-mock-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.comms-mock-back,
.comms-mock-close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink-3);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.comms-mock-back svg,
.comms-mock-close svg { width: 14px; height: 14px; }
.comms-mock-title-wrap { flex: 1; min-width: 0; }
.comms-mock-title {
    font-family: var(--sans-tight);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}
.comms-mock-conv {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comms-mock-thread {
    list-style: none;
    margin: 0;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--paper-2);
}
.comms-msg {
    border: 1px solid var(--rule);
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 0.7rem 0.95rem 0.85rem;
    max-width: 92%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.comms-msg--tutor {
    background: rgba(242, 117, 37, 0.06);
    border-color: rgba(242, 117, 37, 0.32);
    align-self: flex-start;
    margin-right: auto;
}
.comms-msg--student {
    align-self: flex-end;
    margin-left: auto;
    background: var(--paper);
    border-color: var(--rule);
}
.comms-msg-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
    margin-bottom: 0.3rem;
}
.comms-msg-from {
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}
.comms-msg-role {
    font-weight: 400;
    color: var(--ink-3);
}
.comms-msg-date {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--ink-4);
    white-space: nowrap;
}
.comms-msg-body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.comms-msg-sent {
    display: block;
    margin-top: 0.45rem;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--brand-orange);
    font-weight: 600;
}

.comms-mock-reply {
    padding: 0.85rem 1.1rem 1rem;
    border-top: 1px solid var(--rule);
    background: var(--paper);
}
.comms-mock-reply-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    margin-bottom: 0.4rem;
}
.comms-mock-reply-input {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
/* Textarea real (escribible). Aspecto idéntico al placeholder previo,
   pero acepta input. resize:none para que no aparezca el handle. */
textarea.comms-mock-reply-textarea {
    flex: 1;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    font-family: var(--sans);
    font-size: 0.875rem;
    color: var(--ink);
    background: var(--paper-2);
    min-height: 38px;
    max-height: 140px;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
textarea.comms-mock-reply-textarea::placeholder {
    color: var(--ink-4);
}
textarea.comms-mock-reply-textarea:focus {
    border-color: var(--brand-orange);
    background: #fff;
}
button.comms-mock-reply-send {
    appearance: none;
    cursor: pointer;
    border: 0;
    background: var(--brand-orange);
    color: #FFFFFF;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 10px rgba(242, 117, 37, 0.22);
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}
button.comms-mock-reply-send:hover {
    background: #D55F18;
}
button.comms-mock-reply-send:active {
    transform: translateY(1px);
}
.comms-mock-reply-send svg { width: 14px; height: 14px; }

/* ---- Popup "¡Buen intento!" — feedback de la demo de mensajería ---- */
.comms-toast {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 14px;
    max-width: min(420px, 92vw);
    box-shadow: 0 28px 70px -10px rgba(15, 23, 42, 0.45);
}
.comms-toast::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.comms-toast[open] {
    animation: comms-toast-in 0.2s ease-out;
}
@keyframes comms-toast-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.comms-toast-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.6rem 1.5rem 1.4rem;
    text-align: center;
}
.comms-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-orange-soft, #FDEBD9);
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.comms-toast-icon svg {
    width: 24px;
    height: 24px;
}
.comms-toast-title {
    margin: 0 0 0.4rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
}
.comms-toast-text {
    margin: 0 0 1.1rem;
    font-size: 0.88rem;
    color: var(--ink-3);
    line-height: 1.5;
}
.comms-toast-close {
    appearance: none;
    cursor: pointer;
    border: 0;
    background: var(--brand-orange);
    color: #fff;
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(242, 117, 37, 0.22);
    transition: background 0.15s ease, transform 0.1s ease;
}
.comms-toast-close:hover {
    background: #D55F18;
}
.comms-toast-close:active {
    transform: translateY(1px);
}

/* ---- RIGHT · 5 cards apiladas ---- */
.comms-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.comms-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--comms-accent, var(--brand-blue));
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem 1.1rem;
    box-shadow: var(--shadow-card);
}
.comms-card--orange { --comms-accent: var(--brand-orange); }
.comms-card--ink    { --comms-accent: var(--brand-orange); } /* Basic → naranja */
.comms-card--blue   { --comms-accent: var(--brand-blue); }
.comms-card--green  { --comms-accent: var(--brand-success); }
/* "Comunicación ≠ intervención" — bloque informativo, fondo claro
   con acento izquierdo naranja. Refuerza la idea de regla operativa
   sin parecer una alerta oscura. */
.comms-card--rule {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--rule);
    border-left: 3px solid var(--brand-orange);
}

.comms-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}
.comms-card-title {
    font-family: var(--sans-tight);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: inherit;
    margin: 0;
}
.comms-card-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}
.comms-card--rule .comms-card-text { color: var(--ink-3); }

.comms-card-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    background: transparent;
}
.comms-card-badge--basic         { color: var(--brand-orange); }
.comms-card-badge--premium       { color: var(--brand-blue); }
.comms-card-badge--basic-premium { color: var(--brand-orange); }
.comms-card-badge--rule          { color: var(--brand-orange); }

@media (max-width: 767px) {
    .comms-inner { padding: 2.75rem 1rem 3rem; }
    .comms-msg { max-width: 100%; }
    .comms-mock-thread { padding: 0.85rem; }
    .comms-card-head { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .comms-card-badge { align-self: flex-start; }
}

/* =====================================================================
   FASE 15 — VERSIONES · Basic / Premium
   Dos cards grandes lado a lado. Basic naranja, Premium azul. Sin
   precios, sin tabla comparativa. Fondo paper-3 alternando con
   sources-section (paper) y cases-section (paper).
   ===================================================================== */
.versions-section {
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
}
.versions-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 4rem 1.5rem 4.5rem;
}
.versions-head {
    max-width: 64ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.versions-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
}
.versions-kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--brand-orange);
}
.versions-title {
    font-family: var(--sans-tight);
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.versions-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 auto;
    max-width: 60ch;
}

/* Callout "Clave" — refuerza la idea principal: mismo motor,
   solo cambia la fuente de datos. Vive entre la cabecera y las
   cards de versiones, alineado con el ancho de la cabecera. */
.versions-keypoint {
    margin: 1.75rem auto 2rem;
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    background: var(--brand-orange-soft, #FDEBD9);
    border: 1px solid rgba(242, 117, 37, 0.35);
    border-left: 3px solid var(--brand-orange);
    border-radius: 8px;
}
.versions-keypoint-tag {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-orange);
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid var(--brand-orange);
    border-radius: 4px;
    background: #fff;
    line-height: 1.3;
}
.versions-keypoint-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink);
    letter-spacing: -0.005em;
    font-weight: 500;
}
.versions-keypoint-text strong {
    color: var(--brand-orange);
    font-weight: 700;
}
@media (max-width: 540px) {
    .versions-keypoint {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        text-align: left;
    }
}

.versions-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .versions-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

.versions-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--versions-accent, var(--brand-blue));
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.75rem 1.6rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.versions-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.versions-card--basic   { --versions-accent: var(--brand-orange); }
.versions-card--premium { --versions-accent: var(--brand-blue); }

.versions-card-head { display: flex; flex-direction: column; gap: 0.3rem; }
.versions-card-tag {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #FFFFFF;
    background: var(--versions-accent);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.35rem;
}
.versions-card-title {
    font-family: var(--sans-tight);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
.versions-card-sub {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--versions-accent);
    margin: 0;
}

/* Precio orientativo "Desde X € por curso" — serif editorial,
   color de marca por plan (naranja Basic / azul Premium). */
.versions-card-price {
    margin: 1rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ink);
}
.versions-card--basic .versions-card-price {
    color: var(--brand-orange);
}
.versions-card--premium .versions-card-price {
    color: var(--brand-blue);
}
.versions-card-price-note {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-3);
}

/* Nota general bajo las dos tarjetas — discreta, centrada. */
.versions-pricing-note {
    max-width: 760px;
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-3);
}

.versions-card-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}
.versions-card-list {
    list-style: none;
    margin: 0;
    padding: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-top: 1px solid var(--rule-2);
    flex: 1;
}
.versions-card-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--ink-2);
}
.versions-card-list li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--versions-accent);
}

.versions-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--versions-accent);
    color: var(--versions-accent);
    background: transparent;
    border-radius: var(--radius-md);
    font-family: var(--sans-tight);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.versions-card-cta:hover {
    background: var(--versions-accent);
    color: #FFFFFF;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .versions-inner { padding: 2.75rem 1rem 3rem; }
    .versions-card { padding: 1.4rem 1.3rem 1.3rem; }
}

/* =====================================================================
   FASE 12 — HERO LOGIN-STYLE · adaptación comercial
   Layout dos columnas inspirado en pantalla login de la app
   (0_Login.py): izquierda fondo gris azulado con identidad
   EdvancePro + paneles demo decorativos; derecha bloque comercial
   con kicker, título serif, lede y CTA naranja "Descubrir ya".
   Datos del panel izquierdo (snapshot, playbook) son DECORATIVOS
   y hardcodeados — no leen de BD ni de servicios reales.
   ===================================================================== */
.hero-login {
    position: relative;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    isolation: isolate;
}
.hero-login-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .hero-login {
        min-height: calc(100vh - 4rem);
    }
    .hero-login-grid {
        grid-template-columns: 1.275fr 1fr;
        min-height: calc(100vh - 4rem);
    }
}

/* ---- Columna izquierda · identidad + paneles ---- */
.hero-login-left {
    background: #EEF2F7;
    color: #14110D;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (min-width: 1024px) {
    .hero-login-left { padding: 2.5rem 3rem 2.5rem 3rem; }
}
@media (min-width: 1440px) {
    .hero-login-left { padding: 3rem 4rem 3rem 4rem; }
}

.hero-login-left .ll-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.hero-login-left .ll-logo {
    height: 56px;
    width: auto;
    display: inline-block;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .hero-login-left .ll-logo { height: 64px; }
}
.hero-login-left .ll-tag {
    font-family: var(--mono);
    font-size: 9px;
    padding: 2px 5px;
    border: 1px solid #94A3B8;
    border-radius: 2px;
    letter-spacing: 0.14em;
    color: #475569;
}
.hero-login-left .ll-cap {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #64748B;
}
.hero-login-left .ll-panel .ll-cap,
.hero-login-left .ll-pb-cap { font-size: 11.5px; }
.hero-login-left .ll-pb-cap { margin-bottom: 10px; display: block; }

.hero-login-left .ll-headlinewrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.hero-login-left .ll-headline {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: #14110D;
}
.hero-login-left .ll-accent { color: #F27525; }

.hero-login-left .ll-panel {
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    padding: 14px 16px;
}
.hero-login-left .ll-panel-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.hero-login-left .ll-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.hero-login-left .ll-risk-cell {
    border: 1px solid #E2E8F0;
    padding: 10px 12px;
}
.hero-login-left .ll-risk-cell--critico { border-color: #DC2626; }
.hero-login-left .ll-risk-cell--riesgo  { border-color: #F27525; }
.hero-login-left .ll-risk-cell--normal  { border-color: #16A34A; }
.hero-login-left .ll-risk-cell--critico .ll-cap { color: #DC2626; }
.hero-login-left .ll-risk-cell--riesgo  .ll-cap { color: #F27525; }
.hero-login-left .ll-risk-cell--normal  .ll-cap { color: #16A34A; }
.hero-login-left .ll-risk-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.hero-login-left .ll-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.hero-login-left .ll-dot--critico { background: #d4543a; }
.hero-login-left .ll-dot--riesgo  { background: #c4a04a; }
.hero-login-left .ll-dot--normal  { background: #6e9863; }
.hero-login-left .ll-num {
    font-family: var(--mono);
    font-size: 29px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #14110D;
}
.hero-login-left .ll-num--critico { color: #DC2626; }
.hero-login-left .ll-num--riesgo  { color: #F27525; }
.hero-login-left .ll-num--normal  { color: #16A34A; }

.hero-login-left .ll-pb {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
}
.hero-login-left .ll-pb-step {
    border: 1px solid #CBD5E1;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hero-login-left .ll-pb-step.is-done { background: #F8FAFC; }
.hero-login-left .ll-pb-step.is-live {
    border-color: #DC2626;
    background: #FFFFFF;
}
.hero-login-left .ll-pb-step.is-live .ll-pb-step-label,
.hero-login-left .ll-pb-step.is-live .ll-pb-step-date {
    color: #DC2626 !important;
}
.hero-login-left .ll-pb-tag {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #94A3B8;
    flex-shrink: 0;
}
.hero-login-left .ll-pb-tag.is-done {
    background: #14110D;
    color: #F3F0EA;
    border-color: #14110D;
}
.hero-login-left .ll-pb-tag.is-live {
    color: #DC2626;
    border-color: #DC2626;
}
.hero-login-left .ll-pb-arrow {
    padding: 0 6px;
    color: #94A3B8;
    font-family: var(--mono);
}
.hero-login-left .ll-pb-step-label {
    font-size: 13.5px;
    font-weight: 500;
}
.hero-login-left .ll-pb-step-date {
    font-family: var(--mono);
    font-size: 11.5px;
    color: #64748B;
}

.hero-login-left .ll-foot {
    margin-top: auto;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.hero-login-left .ll-foot-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1 1 0;
    min-width: 150px;
}
.hero-login-left .ll-foot-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F27525;
    flex-shrink: 0;
}
.hero-login-left .ll-foot-name { font-size: 13px; font-weight: 500; }
.hero-login-left .ll-foot-cap {
    font-family: var(--mono);
    font-size: 11.5px;
    color: #64748B;
    letter-spacing: 0.05em;
}

/* ---- Columna derecha · bloque comercial ---- */
.hero-login-right {
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .hero-login-right { padding: 2.5rem 3rem; }
}
.hero-login-right-inner {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hero-login-right .lp-login-right-cap {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #6B7280;
    margin: 0;
}
.hero-login-right .lp-login-right-title {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #14110D;
}
.hero-login-right-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.hero-login-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #F27525;
    color: #FFFFFF;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-md);
    font-family: var(--sans-tight);
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(242, 117, 37, 0.30);
    transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
    margin-top: 0.5rem;
}
.hero-login-cta:hover {
    background: var(--brand-orange-2);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(242, 117, 37, 0.38);
}

/* ---- Responsive: stacking en tablet/móvil ---- */
@media (max-width: 1023px) {
    .hero-login-left { padding: 2rem 1.5rem; }
    .hero-login-right { padding: 2.5rem 1.5rem 3rem; }
    .hero-login-left .ll-headline { font-size: clamp(2rem, 7vw, 2.4rem); }
}
@media (max-width: 540px) {
    .hero-login-left { padding: 1.75rem 1rem; gap: 1.1rem; }
    .hero-login-left .ll-pb {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .hero-login-left .ll-pb-arrow {
        transform: rotate(90deg);
        padding: 2px 0;
        text-align: center;
    }
    .hero-login-left .ll-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .hero-login-left .ll-foot-item { min-width: 0; flex: 1 1 100%; }
    .hero-login-right { padding: 2rem 1rem 2.5rem; }
    .hero-login-cta { width: 100%; justify-content: center; }
}

/* =====================================================================
   FASE 13 — Vídeo placeholder en "Producto en acción"
   Prepara la sección para sustituir el <img> por <video controls> en
   el futuro. Por ahora muestra PRIMERA.png como poster con overlay
   discreto (botón circular play + tag "Vídeo demo · 15 s") y
   caption con flujo del vídeo. NO carga ningún .mp4.
   ===================================================================== */
.action-mockup.action-video-frame {
    position: relative;
}
.action-video-stage {
    position: relative;
    line-height: 0; /* elimina gap inferior del <img> inline */
}
.action-video-poster {
    display: block;
    width: 100%;
    height: auto;
}
.action-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0) 0%,
        rgba(15, 23, 42, 0.06) 55%,
        rgba(15, 23, 42, 0.20) 100%);
    pointer-events: none;
}
.action-video-play {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--brand-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.18),
        0 0 0 6px rgba(255, 255, 255, 0.40);
    transition: transform .15s ease;
}
.action-video-play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px; /* ajuste óptico del triángulo play */
}
.action-mockup.action-video-frame:hover .action-video-play {
    transform: scale(1.05);
}
.action-video-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #FFFFFF;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    line-height: 1;
}
.action-video-caption {
    margin: 0;
    padding: 0.65rem 1rem;
    text-align: center;
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    line-height: 1.5;
}

@media (max-width: 540px) {
    .action-video-play { width: 52px; height: 52px; }
    .action-video-play svg { width: 22px; height: 22px; }
    .action-video-caption { font-size: 0.58rem; padding: 0.55rem 0.75rem; }
}

/* =====================================================================
   FASE 17 — Producto en acción · tarjeta Registrar intervención
   Sustituye al vídeo. Pieza visual codificada en HTML/CSS, inspirada
   en prototipo/registrar-tarea.jsx. Sin imagen ni vídeo. Datos demo:
   Marta López Suárez, Llamada 2 · No contesta, siguiente Llamada 3.
   ===================================================================== */
.action-mockup.action-card-mockup {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.reg-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem 1.15rem;
    background: var(--paper);
    color: var(--ink);
}

/* Header */
.reg-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--rule-2);
    flex-wrap: wrap;
}
.reg-card-head-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.reg-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-orange-soft);
    color: var(--brand-orange);
    flex-shrink: 0;
}
.reg-card-icon svg { width: 16px; height: 16px; }
.reg-card-title {
    font-family: var(--sans-tight);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.reg-card-meta {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: var(--ink-3);
}
.reg-card-meta .reg-card-sep { margin: 0 0.35rem; color: var(--ink-4); }
.reg-card-badge {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--paper-2);
    white-space: nowrap;
    line-height: 1.4;
}

/* Filas y celdas */
.reg-card-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.reg-card-key {
    font-family: var(--mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}
.reg-card-val {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.35;
}
.reg-card-val--mono {
    font-family: var(--mono);
    font-feature-settings: "tnum";
}

/* Fila alumno */
.reg-card-row--student {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    align-items: end;
    gap: 0.85rem 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
}
.reg-card-call {
    appearance: none;
    cursor: pointer;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-orange);
    color: #FFFFFF;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-md);
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(242, 117, 37, 0.22);
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.reg-card-call:hover { background: #D55F18; }
.reg-card-call:active { transform: translateY(1px); }
.reg-card-call svg { width: 14px; height: 14px; }
/* Dentro del modal, el cursor seguía siendo default por una regla
   previa — la sobreescribimos para que sea clickable como cualquier otro. */
.agenda-modal .reg-card-call { cursor: pointer; }

/* Fields tipo de intervención */
.reg-card-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
@media (max-width: 540px) {
    .reg-card-fields { grid-template-columns: 1fr; }
}
.reg-card-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    border: 1px solid currentColor;
    background: transparent;
    line-height: 1.5;
    white-space: nowrap;
}
.reg-card-chip--blue   { color: var(--brand-blue); }
.reg-card-chip--orange { color: var(--brand-orange); }
.reg-card-chip--green  { color: var(--brand-success); }
.reg-card-chip--ink    { color: var(--ink-3); }

/* Resultado */
.reg-card-result {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
}
.reg-card-result-body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* Siguiente acción sugerida — bloque destacado naranja suave */
.reg-card-next {
    border: 1px solid rgba(242, 117, 37, 0.36);
    background: rgba(242, 117, 37, 0.05);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.reg-card-next-head { margin: 0; }
.reg-card-next-tag {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    color: var(--brand-orange);
}
.reg-card-next-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
}
.reg-card-next-hint {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
}

/* Botones inferiores */
.reg-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule-2);
}
.reg-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--radius-md);
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: default;
}
.reg-card-btn svg { width: 14px; height: 14px; }
.reg-card-btn--ghost {
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--rule);
}
.reg-card-btn--primary {
    background: var(--brand-blue);
    color: #FFFFFF;
    border: 0;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(34, 104, 199, 0.22);
}

/* Microcopy bajo la tarjeta */
.action-card-caption {
    margin: 0.85rem 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}

@media (max-width: 540px) {
    .reg-card { padding: 0.85rem 0.85rem 1rem; }
    .reg-card-row--student { grid-template-columns: 1fr; }
    .reg-card-row--student .reg-card-call { justify-content: center; }
    .reg-card-next-fields { grid-template-columns: 1fr; }
    .reg-card-actions { flex-direction: column-reverse; }
    .reg-card-btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   FASE 18 — Sección "Registrar intervención" (#registrar-intervencion)
   La tarjeta vive sola, sin columna de texto a la izquierda. Centrada
   y con max-width contenido para que no estire en pantallas grandes.
   ===================================================================== */
.action-section--reg .action-inner {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
}
.action-head--centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 56ch;
}
.action-head--centered .action-kicker {
    justify-content: center;
}
.action-head--centered .action-lede {
    margin-left: auto;
    margin-right: auto;
}
.action-stage--centered {
    max-width: 720px;
    margin: 2rem auto 0;
}

/* =====================================================================
   FASE 19 — Mock "Agenda de intervención" (#aula-tutor → action-stage)
   Reconstrucción HTML/CSS del prototipo aula-tutor.jsx (Variante A).
   Vive dentro de .action-mockup, que ya aporta chrome (3 dots) y sombra.
   Todas las clases con prefijo .agenda- para no colisionar.
   ===================================================================== */

/* Variante de split con un poco más de aire para el mock denso */
.action-split--agenda {
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .action-split--agenda {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }
}

.agenda-mockup {
    background: var(--paper);
}
.agenda-mock {
    padding: 1.1rem 1.1rem 1.15rem;
    background: var(--paper);
    font-size: 12px;
    color: var(--ink);
    line-height: 1.4;
}

/* Header del mock */
.agenda-mock-head {
    margin-bottom: 0.95rem;
}
.agenda-mock-cap {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
}
.agenda-mock-title-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.4rem 0 0.3rem;
}
.agenda-mock-title-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    border-radius: 6px;
    flex-shrink: 0;
}
.agenda-mock-title-icon svg {
    width: 15px;
    height: 15px;
}
.agenda-mock-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.agenda-mock-meta {
    margin: 0;
    font-size: 0.7rem;
    color: var(--ink-3);
    line-height: 1.45;
}
.agenda-mock-cta {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-2);
    font-weight: 500;
}

/* KPIs — versión miniatura del Panel Tutor real (lp-kpi-card).
   Borde completo de color de marca, dot junto al label, número en
   mono prominente. Sin el look "card SaaS genérica" antiguo. */
.agenda-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    margin: 0.85rem 0;
}
.agenda-kpi {
    background: #fff;
    border: 1.5px solid currentColor;
    border-radius: 10px;
    padding: 0.7rem 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 78px;
    box-shadow: 0 1px 3px rgba(15, 42, 68, 0.04);
}
.agenda-kpi-label-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.agenda-kpi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.agenda-kpi-label {
    font-family: var(--mono);
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    line-height: 1.3;
    font-weight: 700;
}
.agenda-kpi-num {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    margin-top: auto;
    font-variant-numeric: tabular-nums;
}
/* Color por categoría — palette EdvancePro: azul fuerte, rojo, naranja, verde. */
.agenda-kpi--blue   { color: #004AAD; }
.agenda-kpi--red    { color: var(--brand-red); }
.agenda-kpi--orange { color: var(--brand-orange); }
.agenda-kpi--green  { color: var(--brand-success); }

/* Filtros */
.agenda-filters {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}
.agenda-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 32px;
    padding: 0 0.65rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.agenda-search-icon {
    width: 13px;
    height: 13px;
    color: var(--ink-3);
    flex-shrink: 0;
}
.agenda-search-placeholder {
    font-size: 0.72rem;
    color: var(--ink-3);
}
.agenda-select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 32px;
    padding: 0.1rem 0.65rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.agenda-select-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    line-height: 1;
}
.agenda-select-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
}
.agenda-select-caret {
    width: 11px;
    height: 11px;
    color: var(--ink-3);
}

/* Tabla */
.agenda-table {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}
.agenda-table-head,
.agenda-row {
    display: grid;
    grid-template-columns: 1.5fr 1.4fr 0.85fr 0.65fr 0.95fr 0.75fr;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    align-items: center;
}
.agenda-table-head {
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}
.agenda-table-head > span {
    font-family: var(--mono);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    font-weight: 600;
}
.agenda-row {
    border-bottom: 0.5px solid var(--rule-2, var(--rule));
    font-size: 0.72rem;
    color: var(--ink-2);
}
.agenda-row:last-child {
    border-bottom: 0;
}
.agenda-row.is-active {
    background: #EAF3FF;
    box-shadow: inset 3px 0 0 #004AAD;
}
.agenda-row.is-active .agenda-cell-name {
    color: #004AAD;
}
.agenda-cell-name {
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agenda-cell-soft {
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agenda-cell-action {
    color: var(--ink);
    font-weight: 500;
}
.agenda-cell-when {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.agenda-when-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.agenda-when-dot--orange { background: var(--brand-orange); }
.agenda-when-dot--blue   { background: var(--brand-blue); }
.agenda-when-dot--red    { background: var(--brand-red); }
.agenda-cell-contact {
    color: var(--ink-3);
    font-size: 0.7rem;
}
.agenda-cell-contact--ok {
    color: var(--brand-success);
    font-weight: 500;
}
.agenda-cell-tipo {
    justify-self: start;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.3;
}

/* Detalle del alumno seleccionado — versión miniatura del
   panel-tutor-alumno-card canónico (2_Panel_Tutor.py):
   fondo #EEF1F6, borde azul fuerte #004AAD, badge CRÍTICO flotante
   en esquina superior derecha, nombre en azul fuerte, bloques
   internos con fondo blanco, sin banner "Qué debes hacer". */
.agenda-detail {
    position: relative;
    margin-top: 0.85rem;
    padding: 0.85rem 0.95rem 0.95rem;
    background: #EEF1F6;
    border: 1.5px solid #004AAD;
    border-radius: 8px;
    box-shadow: none;
}
/* El indicador de CRÍTICO va en el badge, no en el borde lateral. */
.agenda-detail--critico { /* sin estilos adicionales — color en badge */ }

/* Header */
.agenda-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.7rem;
    padding-right: 4.5rem; /* deja sitio al badge flotante */
}
.agenda-detail-id {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.agenda-detail-name-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #004AAD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.agenda-detail-name-icon svg {
    width: 18px;
    height: 18px;
}
.agenda-detail-id-text {
    min-width: 0;
}
.agenda-detail-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2268C7;
    letter-spacing: -0.01em;
}
.agenda-detail-meta {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
    color: #475569;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Badge CRÍTICO flotante en la esquina superior derecha
   (mismo patrón que .lp-badge-flotante del Panel Tutor real). */
.agenda-detail-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    color: var(--brand-red);
    background: var(--brand-red-soft, #FEE2E2);
    border: 1px solid #FCA5A5;
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.3;
}

/* Banner "Qué debes hacer" — acento rojo (CRÍTICO). */
.agenda-detail-banner {
    background: var(--brand-red-soft, #FEE2E2);
    border-left: 3px solid var(--brand-red);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.agenda-detail-blabel {
    font-family: var(--mono);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    line-height: 1.3;
}
.agenda-detail-blabel--mt {
    margin-top: 0.65rem;
    display: block;
}
.agenda-detail-baction {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--brand-red);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Bloques internos del detalle (Qué ocurre · Última gestión · Siguiente paso · Motivo).
   Fondo blanco para destacar sobre el wrapper #EEF1F6. */
.agenda-detail-blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}
.agenda-detail-blocks--summary {
    grid-template-columns: repeat(3, 1fr);
}
.agenda-detail-block {
    background: #fff;
    border: 0.5px solid #DBE5F0;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}
.agenda-detail-block--paper {
    background: #fff;
}
.agenda-detail-block--full {
    grid-column: 1 / -1;
}
.agenda-detail-bvalue {
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agenda-detail-bvalue--soft {
    font-weight: 500;
    color: #475569;
    white-space: normal;
}

/* Fila de botones principales: Registrar tarea + Ver ficha 360.
   En desktop comparten ancho al 50%. En móvil se apilan. */
.agenda-detail-btns {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.1rem;
}
.agenda-detail-btn {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--brand-blue);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 0.55rem 0.65rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(34, 104, 199, 0.22);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.agenda-detail-btn:hover {
    background: var(--brand-blue-2, #1B54A3);
    color: #fff;
}
.agenda-detail-btn:active {
    transform: translateY(1px);
}
.agenda-detail-btn svg {
    width: 14px;
    height: 14px;
}

/* Variante naranja para "Ver ficha 360" — navega a #ficha-360. */
.agenda-detail-btn--ficha {
    background: var(--brand-orange);
    box-shadow: 0 1px 2px rgba(242, 117, 37, 0.28);
}
.agenda-detail-btn--ficha:hover {
    background: #D55F18;
    color: #fff;
}

/* Expander interactivo: <details> nativo, sin JS.
   El chevron rota cuando [open]. */
.agenda-detail-expander {
    margin-top: 0.7rem;
    border: 1px solid var(--brand-blue);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.agenda-detail-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    color: var(--brand-blue);
    font-size: 0.78rem;
    font-weight: 600;
    user-select: none;
    transition: background 0.15s ease;
}
.agenda-detail-summary::-webkit-details-marker { display: none; }
.agenda-detail-summary:hover {
    background: var(--brand-blue-soft, #E7EFFA);
}
.agenda-detail-summary-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    flex-shrink: 0;
}
.agenda-detail-summary-icon svg {
    width: 16px;
    height: 16px;
}
.agenda-detail-summary-label {
    flex: 1;
}
.agenda-detail-chevron {
    width: 14px;
    height: 14px;
    color: var(--brand-blue);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.agenda-detail-expander[open] .agenda-detail-chevron {
    transform: rotate(180deg);
}
.agenda-detail-expanded {
    padding: 0.65rem 0.7rem 0.75rem;
    background: var(--brand-bg, #EEF2F7);
    border-top: 0.5px solid var(--rule);
}
.agenda-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
.agenda-detail-conclusion {
    margin: 0.25rem 0 0;
    background: #fff;
    border: 0.5px solid var(--rule);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.72rem;
    color: var(--ink-2);
    line-height: 1.5;
}

/* Animación de apertura del expander (limitada al contenido). */
.agenda-detail-expander[open] .agenda-detail-expanded {
    animation: agenda-expand-in 0.2s ease-out;
}
@keyframes agenda-expand-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive — el mock tolera bien hasta ~520px de ancho.
   Por debajo, comprimimos KPIs (2x2) y reducimos columnas de tabla. */
@media (max-width: 720px) {
    .agenda-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .agenda-filters {
        grid-template-columns: 1fr;
    }
    .agenda-table-head,
    .agenda-row {
        grid-template-columns: 1.5fr 1fr 0.7fr 0.6fr;
    }
    .agenda-table-head > span:nth-child(5),
    .agenda-table-head > span:nth-child(6),
    .agenda-row > [role="cell"]:nth-child(5),
    .agenda-row > [role="cell"]:nth-child(6) {
        display: none;
    }
    .agenda-detail-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .agenda-detail-blocks {
        grid-template-columns: 1fr;
    }
    .agenda-detail-grid {
        grid-template-columns: 1fr;
    }
    .agenda-detail-btns {
        flex-direction: column;
    }
}

/* =====================================================================
   FASE 20 — Popup "Registrar intervención" (#agenda-reg-modal)
   <dialog> nativo: top-layer, focus trap y ::backdrop incluidos.
   El contenido es la reg-card validada en #registrar-intervencion.
   ===================================================================== */
.agenda-modal {
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    max-width: min(640px, 92vw);
    width: 100%;
    max-height: 90vh;
    overflow: visible;
    box-shadow: 0 28px 70px -10px rgba(15, 23, 42, 0.45);
}
.agenda-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.agenda-modal[open] {
    animation: agenda-modal-in 0.18s ease-out;
}
@keyframes agenda-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.agenda-modal-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}
.agenda-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    appearance: none;
    background: var(--paper-2);
    color: var(--ink-2);
    border: 0.5px solid var(--rule);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
}
.agenda-modal-close:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.agenda-modal-close svg {
    width: 16px;
    height: 16px;
}

/* Dentro del modal, los botones del footer son clickables (no spans) y
   conservan look compatible con la versión estática del registrar-intervencion. */
.agenda-modal .reg-card-btn {
    appearance: none;
    cursor: pointer;
    font-family: var(--sans);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.agenda-modal .reg-card-btn--ghost:hover {
    background: var(--paper-2);
    color: var(--ink);
}
/* Cancelar — sin fondo, borde y texto rojos. Aplica tanto al modal
   como a la reg-card estática de #registrar-intervencion. */
.reg-card-btn--cancel,
.reg-card-btn--ghost.reg-card-btn--cancel {
    background: transparent;
    border: 1px solid var(--brand-red);
    color: var(--brand-red);
}
.reg-card-btn--cancel:hover,
.reg-card-btn--ghost.reg-card-btn--cancel:hover {
    background: var(--brand-red-soft, #FEE2E2);
    color: var(--brand-red);
    border-color: var(--brand-red);
}
.agenda-modal .reg-card-btn--primary {
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
    box-shadow: 0 1px 2px rgba(34, 104, 199, 0.22);
}
.agenda-modal .reg-card-btn--primary:hover {
    background: var(--brand-blue-2, #1B54A3);
    border-color: var(--brand-blue-2, #1B54A3);
    color: #fff;
}
.agenda-modal .reg-card-btn:active {
    transform: translateY(1px);
}
.agenda-modal .reg-card-call {
    cursor: default;
}

/* Sin scroll del body cuando el modal está abierto.
   <dialog> ya gestiona el focus trap. */
body:has(dialog.agenda-modal[open]) {
    overflow: hidden;
}

/* =====================================================================
   FASE 21 — Sistema editorial unificado de títulos y kickers
   Toma como referencia el hero "El motor decide. El tutor actúa.":
   serif, weight 400, line-height cerrado, letter-spacing negativo,
   acentos controlados en naranja vía .accent-orange.

   Solo se aplica a TÍTULOS PRINCIPALES de sección (H2). Las cards,
   tablas, mockups y formularios mantienen Inter como cuerpo operativo.
   ===================================================================== */

.accent-orange {
    color: var(--brand-orange);
}

/* Títulos H2 principales — unificados en serif editorial. */
.lp-login-right-title,
.action-title,
.ficha-title,
.comms-title,
.trace-title,
.problem-title,
.flow-title,
.sources-title,
.versions-title,
.cases-title,
.cta-title {
    font-family: var(--serif), "Instrument Serif", "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--ink);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    margin: 0 0 1rem;
}

/* Spans existentes de acento → naranja unificado. */
.problem-title-em,
.comms-title-em {
    color: var(--brand-orange);
    font-style: normal;
    font-weight: inherit;
}

/* Kickers / eyebrows unificados — mono uppercase, naranja, tracking amplio. */
.action-kicker,
.ficha-kicker,
.comms-kicker,
.trace-kicker,
.problem-kicker,
.flow-kicker,
.sources-kicker,
.versions-kicker,
.cases-kicker,
.cta-kicker {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    color: var(--brand-orange);
    font-weight: 500;
}

/* Reset puntual: el lede del hero-right necesita un poco menos de
   tamaño porque convive con un kicker corto y un párrafo largo en
   espacio acotado. */
.lp-login-right-title {
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.05;
    margin-bottom: 0.85rem;
}

/* Asegurar legibilidad en móvil — los títulos no deben romper
   palabras ni desbordar el contenedor. */
@media (max-width: 540px) {
    .lp-login-right-title,
    .action-title,
    .ficha-title,
    .comms-title,
    .trace-title,
    .problem-title,
    .flow-title,
    .sources-title,
    .versions-title,
    .cases-title,
    .cta-title {
        letter-spacing: -0.02em;
        line-height: 1.08;
    }
}

/* =====================================================================
   FASE 22 — Páginas legales (aviso-legal / privacidad / cookies),
   banner de cookies + diálogo de configuración, y nota legal del
   formulario. Comparten la dirección visual editorial del sitio.
   ===================================================================== */

.legal-page {
    background: var(--paper);
    padding: 4rem 1.5rem 5rem;
}
.legal-article {
    max-width: 820px;
    margin: 0 auto;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.65;
}
.legal-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}
.legal-kicker {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--brand-orange);
    margin-bottom: 0.85rem;
    font-weight: 500;
}
.legal-title {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--ink);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    margin: 0 0 0.6rem;
}
.legal-subtitle {
    font-size: 1.05rem;
    color: var(--ink-2);
    margin: 0 0 0.4rem;
    line-height: 1.45;
}
.legal-meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin: 0;
}

.legal-section {
    margin-bottom: 2.25rem;
}
.legal-section h2 {
    font-family: var(--sans-tight);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.legal-section p {
    margin: 0 0 0.85rem;
    color: var(--ink-2);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-section a:hover { color: var(--brand-orange); }
.legal-section strong { color: var(--ink); font-weight: 600; }

.legal-list {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0 0 0.85rem;
    color: var(--ink-2);
}
.legal-list li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.legal-data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 1rem 1.15rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
}
.legal-data > div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.85rem;
    align-items: baseline;
}
.legal-data dt {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    font-weight: 500;
}
.legal-data dd {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
}
@media (max-width: 540px) {
    .legal-data > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.legal-note {
    font-size: 0.88rem;
    color: var(--ink-3);
    background: var(--paper-2);
    border-left: 3px solid var(--brand-orange);
    border-radius: 6px;
    padding: 0.7rem 0.95rem;
    margin: 0.85rem 0;
}

.legal-table-wrap {
    margin: 0.85rem 0 1rem;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 8px;
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--paper);
    min-width: 600px;
}
.legal-table thead {
    background: var(--paper-2);
}
.legal-table th {
    text-align: left;
    padding: 0.7rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    font-weight: 600;
    border-bottom: 1px solid var(--rule);
}
.legal-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 0.5px solid var(--rule);
    vertical-align: top;
    line-height: 1.5;
}
.legal-table tr:last-child td {
    border-bottom: 0;
}

/* ---- Nota legal bajo el formulario ---- */
.form-legal-note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-3);
    line-height: 1.5;
}
.form-legal-note a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form-legal-note a:hover { color: var(--brand-orange); }

/* ---- Banner de cookies (esquina inferior, no bloquea) ---- */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    pointer-events: none;
}
.cookie-banner.is-hidden { display: none; }
.cookie-banner-card {
    pointer-events: auto;
    max-width: 820px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    box-shadow: 0 18px 38px -10px rgba(15, 23, 42, 0.28);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-items: center;
}
@media (min-width: 768px) {
    .cookie-banner-card {
        grid-template-columns: 1fr auto;
    }
}
.cookie-banner-text {
    font-size: 0.85rem;
    color: var(--ink-2);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cookie-banner-text strong {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
}
.cookie-banner-text a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner-text a:hover { color: var(--brand-orange); }
.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}
.cookie-btn {
    appearance: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 0.95rem;
    font-family: var(--sans-tight);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease, border-color 0.15s ease;
}
.cookie-btn--ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--rule);
}
.cookie-btn--ghost:hover {
    background: var(--paper-2);
    color: var(--ink);
}
/* Rechazar — botón outline claro, mismo tamaño que Aceptar pero más
   ligero visualmente. Cumple el principio "no hacer que rechazar
   sea más difícil que aceptar" sin recurrir a un sólido pesado. */
.cookie-btn--neutral {
    background: #fff;
    color: var(--ink);
    border-color: var(--ink);
}
.cookie-btn--neutral:hover {
    background: var(--paper-2);
    color: var(--ink);
    border-color: var(--ink);
}
.cookie-btn--primary {
    background: var(--brand-orange);
    color: #fff;
    border-color: var(--brand-orange);
    box-shadow: 0 4px 10px rgba(242, 117, 37, 0.22);
}
.cookie-btn--primary:hover {
    background: #D55F18;
    border-color: #D55F18;
}
.cookie-btn:active { transform: translateY(1px); }

/* ---- Diálogo "Configurar cookies" ---- */
.cookie-config {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 14px;
    max-width: min(440px, 92vw);
    box-shadow: 0 28px 70px -10px rgba(15, 23, 42, 0.45);
}
.cookie-config::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.cookie-config-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.5rem 1.4rem 1.3rem;
}
.cookie-config-close {
    position: absolute;
    top: 12px;
    right: 12px;
    appearance: none;
    background: var(--paper-2);
    color: var(--ink-2);
    border: 0.5px solid var(--rule);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cookie-config-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cookie-config-close svg { width: 14px; height: 14px; }
.cookie-config-title {
    margin: 0 0 0.4rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
}
.cookie-config-text {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.5;
}
.cookie-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    margin-bottom: 0.55rem;
    background: var(--paper-2);
}
.cookie-config-row strong {
    display: block;
    color: var(--ink);
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}
.cookie-config-row p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-3);
    line-height: 1.45;
}
.cookie-config-pill {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 4px 10px;
}
.cookie-config-row--toggle {
    cursor: pointer;
}
/* Toggle simple — círculo que se desliza dentro de una pista. */
.cookie-config-toggle {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--rule);
    position: relative;
    cursor: pointer;
    transition: background 0.18s ease;
    margin: 0;
}
.cookie-config-toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 0.18s ease;
}
.cookie-config-toggle:checked {
    background: var(--brand-orange);
}
.cookie-config-toggle:checked::before {
    transform: translateX(16px);
}
.cookie-config-foot {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* =====================================================================
   FASE 23 — Sustitución de Tailwind CDN (SEO-005)
   El <body> usaba 8 utility classes de Tailwind cargadas vía
   cdn.tailwindcss.com. Para evitar el coste del CDN en producción
   (warning oficial de Tailwind, ~300 KB JS, LCP penalizado) y no
   introducir un build pipeline solo para 8 clases, las reglas se
   inlinen aquí. Mantienen el contrato visual EXACTO con la config
   Tailwind original (extend brand.dark = #111827, font-sans = Inter).
   ===================================================================== */
.bg-white { background-color: #FFFFFF; }
.text-brand-dark { color: #111827; }
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-sans { font-family: 'Inter', system-ui, sans-serif; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-grow { flex-grow: 1; }
.min-h-screen { min-height: 100vh; }

/* =====================================================================
   FASE 24 — Enlace discreto "Ver planes detallados" (SEO-014)
   Aparece bajo la nota de precios de la sección Versiones de la home.
   Complementa los CTAs principales sin competir con "Solicitar demo".
   ===================================================================== */
.versions-more-link {
    text-align: center;
    margin: 1.25rem auto 0;
    font-size: 0.9rem;
    line-height: 1.55;
}
.versions-more-link a {
    color: var(--brand-orange);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}
.versions-more-link a:hover {
    color: #D55F18;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =====================================================================
   FASE 25 — Mobile responsive QA (SEO-016 / INC-010)
   Causas detectadas:
     - .agenda-table grids con 6 columnas en mocks empujaban el viewport.
     - white-space: nowrap + ellipsis sin min-width:0 en padres → empuje.
     - .agenda-detail-badge position:absolute con padding-right 4.5rem
       en el header no cabía bien en móvil estrecho.
     - padding vertical 4.5rem/5rem generaba aire excesivo.
   Estrategia: red de seguridad global + ajustes específicos por
   breakpoint (≤540px y ≤480px), sin tocar copy ni desktop.
   ===================================================================== */

/* Red de seguridad GLOBAL: nunca scroll horizontal a nivel root.
   `overflow-x: clip` es preferible a `hidden` porque preserva sticky
   vertical y top-layer (dialog). */
html, body {
    overflow-x: clip;
    max-width: 100%;
}

/* Imagen/vídeo nunca rompen su contenedor */
img, video, svg, iframe {
    max-width: 100%;
}

/* En desktop el comportamiento queda exactamente igual.
   Las correcciones móviles van solo en media queries. */

@media (max-width: 540px) {
    /* ---- Padding vertical más razonable en móvil ---- */
    .action-inner,
    .ficha-inner,
    .versions-inner,
    .comms-inner,
    .trace-inner,
    .problem-inner,
    .flow-inner,
    .sources-inner,
    .cases-inner,
    .cta-inner {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* ---- Aula Tutor mock ---- */
    .agenda-mock {
        padding: 0.85rem 0.85rem 0.95rem;
    }
    .agenda-mock-title { font-size: 0.95rem; }
    .agenda-mock-meta { font-size: 0.65rem; }
    .agenda-mock-cta { font-size: 0.72rem; }

    /* La tabla con 4 columnas (5 y 6 ya ocultas <720px) tolera mejor
       el ancho disponible si la celda permite wrap. */
    .agenda-cell-soft {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }

    /* ---- Detalle de alumno ---- */
    .agenda-detail {
        padding: 0.8rem 0.9rem 0.9rem;
    }
    .agenda-detail-head {
        padding-right: 0; /* el badge se desfloto debajo */
    }
    .agenda-detail-badge {
        position: static;
        align-self: flex-start;
        margin-top: 0.4rem;
    }
    .agenda-detail-meta {
        font-size: 0.65rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    .agenda-detail-bvalue {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    .agenda-detail-name {
        font-size: 0.9rem;
    }
    .agenda-detail-name-icon { display: none; } /* libera espacio horizontal */
    .agenda-detail-id { gap: 0; }

    /* ---- Reg-card (popup y sección estática) ---- */
    .reg-card-meta {
        white-space: normal;
    }
    .reg-card-val,
    .reg-card-val--mono {
        word-break: break-word;
    }
    .reg-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .reg-card-badge { align-self: flex-start; }

    /* ---- Modal popup ---- */
    .agenda-modal-card { max-height: 92vh; }

    /* ---- Ficha 360 ---- */
    .ficha-mock-head {
        flex-direction: column;
        gap: 0.5rem;
    }
    .ficha-mock-meta {
        font-size: 0.7rem;
        word-break: break-word;
        white-space: normal;
    }
    .ficha-mock-tabs {
        flex-wrap: wrap;
    }
    .ficha-mock-tab {
        font-size: 0.72rem;
        padding: 0.45rem 0.6rem;
        flex: 1 1 calc(50% - 0.3rem);
    }
    .ficha-mockup { font-size: 0.85rem; }
    .ficha-modules { gap: 0.7rem; }
    .ficha-flow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    /* ---- Versiones cards: padding más compacto ---- */
    .versions-card {
        padding: 1.4rem 1.25rem 1.35rem;
    }

    /* ---- Botones siempre apilados ---- */
    .agenda-detail-btns {
        flex-direction: column;
    }
    .planes-hero-ctas,
    .mdle-hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .planes-cta-primary,
    .planes-cta-ghost,
    .mdle-cta-primary,
    .mdle-cta-ghost {
        width: 100%;
        justify-content: center;
    }

    /* ---- Header: evitar overflow del CTA con texto largo ---- */
    .site-header-inner {
        gap: 0.5rem;
    }

    /* ---- Comunicaciones / mock conversación ---- */
    .comms-msg {
        max-width: 100%;
    }
    .comms-mock-thread { padding: 0.85rem 0.7rem; }

    /* ---- Trace table: scroll interno controlado si la tabla no cabe ---- */
    .trace-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* Reducción más agresiva para móviles pequeños (iPhone SE, etc.) */
    .agenda-mock { padding: 0.7rem; }
    .agenda-kpis { gap: 0.4rem; }
    .agenda-kpi {
        min-height: 60px;
        padding: 0.45rem 0.55rem 0.5rem;
    }
    .agenda-kpi-label { font-size: 0.5rem; letter-spacing: 0.08em; }
    .agenda-kpi-num { font-size: 1.3rem; }
    .agenda-table-head > span {
        font-size: 0.5rem;
        letter-spacing: 0.06em;
    }
    .agenda-row { font-size: 0.68rem; }
    .agenda-detail-name { font-size: 0.85rem; }
    .agenda-detail-meta { font-size: 0.62rem; }

    /* Hero login derecho menos vertical */
    .hero-login-right-inner {
        padding: 2.25rem 1.25rem;
    }
}