/* ===============================================================
   EviMedic — Home stylesheet
   Tabla de contenidos:
   01. NORMALIZACIÓN (margin/border/padding/box-sizing)
   02. TOKENS (variables de tema light)
   03. BASE (html/body/typography)
   04. UTILIDADES (container, eyebrow, miniLabel, dot)
   05. TIPOGRAFÍA SECCIONAL (sectionHead, sectionTitle)
   06. BOTONES
   07. HEADER + NAV + LANG SWITCH
   08. HERO
   09. REVEAL / MOCKUP
   10. CREDIBILIDAD
   11. PILARES DE CONFIANZA
   12. FEATURES / TABS
   13. ESPECIALIDADES
   14. ASISTENTE IA
   15. JOURNEY (implantación)
   16. TESTIMONIOS
   17. FAQ
   18. CTA FINAL
   19. FOOTER
   20. ANIMACIONES + REVEAL ON SCROLL
   21. RESPONSIVE
   =============================================================== */


/* =============================================================
   01. NORMALIZACIÓN — margin, border, padding, box-sizing
   ============================================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lenis smooth scroll — clases que aplica el plugin */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

button {
    background: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

summary {
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}


/* =============================================================
   02. TOKENS — Tema light
   ============================================================= */
:root {
    /* Marca — alineada con la plantilla nueva */
    --brand: #00556d;
    --brand-deep: #003d4f;
    --brand-soft: #36848b;
    --brand-mist: #b9d2d4;
    --brand-fade: #e8eff0;
    --brand-pale: #f4f8f8;

    /* Acentos */
    --warm: #d67d6d;
    --warm-soft: #ffd7cc;
    --green: #2a9d8f;
    --purple: #7c6daa;
    --blue: #3a8fb7;

    /* Superficie y texto — paleta de la plantilla nueva (más clara y aireada).
       Antes los grises usaban rgba con alpha alto sobre #163038, lo que daba
       un look muy oscuro. Ahora son grises azulados sólidos, más limpios. */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f4f8f8;
    --surface-soft: rgba(255, 255, 255, 0.72);

    --text: #1a2a2e;
    --text-soft: #5a6b6e;
    --text-muted: #8a9a9d;

    --line: #d4e0e1;
    --line-strong: #c5d4d6;

    /* Tipografía */
    --font-heading: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --container: 1240px;
    --container-narrow: 820px;
    --section-y: 72px;

    /* Radios */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Sombras */
    /* Sombras de la plantilla nueva: más sutiles y con negro neutro
       (no teñido de brand). Da look editorial más limpio. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

    /* Transiciones */
    --t-fast: 160ms ease;
    --t-base: 240ms ease;
    --t-slow: 480ms cubic-bezier(.2, .7, .2, 1);
}


/* =============================================================
   03. BASE
   ============================================================= */
body {
    position: relative;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: transparent;
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}

/* Anti-FOUT — fade-in cuando las fuentes terminen de cargar */
html.fonts-loading body {
    opacity: 0;
}

html.fonts-loaded body {
    opacity: 1;
    transition: opacity 220ms ease-out;
}

.bgDecor {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(181, 204, 206, 0.55), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(60, 124, 143, 0.16), transparent 26%),
        radial-gradient(circle at 50% 78%, rgba(236, 217, 207, 0.22), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

/* =============================================================
   Líneas SVG decorativas — trazos curvos que se DIBUJAN con el scroll.
   Contenedor wrapper con overflow:hidden para que NUNCA extiendan el
   área scrolleable (anclado al body que ya es position:relative).
   ============================================================= */
.scrollPaths {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.scrollPath {
    position: absolute;
    /* Sobresale 30vw por cada lado → SVG ~60% más grande sin tocar el viewBox.
       Usamos width + left: 50% + margin-left negativo en lugar de left/right
       negativos: más predecible. */
    width: 160vw;
    left: 50%;
    margin-left: -80vw;
    /* Aspect ratio igual al viewBox (4/1) para que el SVG no se deforme
       NI se recorte verticalmente. main { overflow: clip } se encarga de que
       el sobrancho no extienda el body. */
    aspect-ratio: 4 / 1;
    pointer-events: none;
    color: var(--brand-soft);
    opacity: 0.06;
    /* Fade lateral para que cuando el trazo termine cortado por el viewport
       (o por overflow:hidden del padre) el final no se vea en seco. */
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%);
}

.scrollPath svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Variante invertida: el trazo aparece de derecha a izquierda (flip horizontal
   del SVG, sin alterar el wrapper rotado). */
.scrollPathReverse svg {
    transform: scaleX(-1);
}

.scrollPath path {
    will-change: stroke-dashoffset;
}

/* Distribución y rotación de cada línea — variedad visual */
.scrollPathA {
    top: 70vh;
    transform: rotate(-3deg);
}

.scrollPathB {
    top: 220vh;
    transform: rotate(4deg);
    opacity: 0.05;
}

/* C y D ahora están ancladas a sus secciones (testimonios y FAQ),
   no al wrapper top-level. Top en píxeles fijos (NO %) para que el SVG
   no se reposicione cuando la sección crece de altura (ej. al abrir/cerrar
   un FAQ item, que cambiaría el centro vertical). */
.scrollPathC {
    top: 60px;
    transform: rotate(-7deg);
    opacity: 0.07;
}

.scrollPathD {
    top: 220px;
    transform: rotate(5deg);
    opacity: 0.05;
}

/* Móvil/tablet: las líneas se ven más grandes (sobresalen mucho más por
   los lados, así escalan en altura por el aspect-ratio) y opacity un pelín
   más alta para que se aprecien con la luz del fondo. */
@media (max-width: 720px) {
    .scrollPath {
        left: -80vw;
        right: -80vw;
        opacity: 0.10;
    }

    .scrollPath path {
        stroke-width: 22;
    }

    .scrollPathA {
        opacity: 0.10;
    }

    .scrollPathB {
        opacity: 0.09;
    }

    .scrollPathC {
        opacity: 0.11;
    }

    .scrollPathD {
        opacity: 0.09;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scrollPath path {
        stroke-dashoffset: 0 !important;
    }
}


/* =============================================================
   04. UTILIDADES
   ============================================================= */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    /* Padding aplicado al .container (NO al main) para que las secciones
       puedan ser full-bleed (los SVG decorativos absolutos las necesitan
       ocupando 100vw). El header tiene su propio .container con padding mayor. */
    padding-left: 32px;
    padding-right: 32px;
}

/* main recorta cualquier overflow (especialmente el de los SVG decorativos
   absolute que sobresalen verticalmente de sus secciones) sin establecer
   scroll: así el body no se extiende y el footer queda donde toca. */
main {
    overflow: clip;
}

@media (max-width: 1024px) {
    main {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 720px) {
    main {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 450px) {
    main {
        padding-left: 18px;
        padding-right: 18px;
    }
}

.containerNarrow {
    max-width: var(--container-narrow);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--brand);
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* Líneas decorativas a los lados con fade a transparente */
.eyebrow::before,
.eyebrow::after {
    content: "";
    width: 90px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--brand) 100%);
}

.eyebrow::after {
    background: linear-gradient(to right, var(--brand) 0%, transparent 100%);
}

.miniLabel {
    display: inline-block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
}

.dotBrand {
    width: 10px;
    height: 10px;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(0, 85, 109, .12);
}


/* =============================================================
   05. TIPOGRAFÍA SECCIONAL
   ============================================================= */
.sectionHead {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.sectionHeadLeft {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 760px;
}

.sectionHead .eyebrow {
    margin-bottom: 18px;
}

.sectionTitle {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--brand);
    text-wrap: balance;
}

.sectionLead {
    margin-top: 16px;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--text-soft);
    text-wrap: pretty;
}


/* =============================================================
   06. BOTONES
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    border-radius: 10px;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-base), color var(--t-base), border-color var(--t-base);
    white-space: nowrap;
    cursor: pointer;
}

.btnLg {
    padding: 16px 32px;
    font-size: 1.05rem;
    border-radius: 12px;
}

.btnPrimary {
    color: #fff;
    border: 0;
    /* Gradient con shine desplazado a la derecha (70%) — no centrado:
       el lado izquierdo es azul puro y extenso, el shine (verdoso)
       aparece en el tercio derecho, y al final vuelve sutilmente al
       azul. Al hover el background-position desplaza el shine. */
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 70%, var(--brand) 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    box-shadow: 0 14px 32px rgba(0, 85, 109, 0.18);
    transition: background-position 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.btnPrimary:hover {
    /* Desplazamiento mínimo (25%) — el shine se mueve sólo un poco. */
    background-position: 25% 25%;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 85, 109, .32);
}

.btnPrimary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 85, 109, .25);
}

.btnGhost {
    background: #fff;
    color: var(--brand);
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px rgba(0, 64, 82, .04);
}

.btnGhost:hover {
    border-color: var(--brand-soft);
    color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 64, 82, .08);
}

.btnGhost:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 64, 82, .06);
}

.btnWhite {
    background: #fff;
    color: var(--brand);
}

.btnWhite:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.btnWhiteOutline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
}

.btnWhiteOutline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
}


/* =============================================================
   07. HEADER + NAV + LANG SWITCH
   ============================================================= */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}

.header.is-scrolled {
    background: rgba(255, 255, 255, 0.8);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header .container {
    max-width: 1280px;
    padding-left: 36px;
    padding-right: 36px;
}

.headerInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand);
}

.brandLogo {
    height: 36px;
    width: auto;
    aspect-ratio: 9288 / 2146;
    object-fit: contain;
    display: block;
    transition: transform var(--t-base);
}

.brandText {
    font-family: var(--font-heading, 'Urbanist', sans-serif);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--brand);
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.brand:hover .brandLogo {
    transform: scale(1.03);
}

/* Footer mantiene texto, no usa imagen */
.brandCopy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brandCopy strong {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.brandCopy small {
    font-size: .7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.navLink {
    position: relative;
    padding: 10px 4px;
    margin: 0 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
    transition: color var(--t-fast);
}

.navLink::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 280ms cubic-bezier(.4, 0, .2, 1);
}

.navLink:hover,
.navLink.is-active {
    color: var(--brand);
}

.navLink:hover::after,
.navLink.is-active::after {
    width: 100%;
}

/* ============================
   NAV DROPDOWN (Funcionalidades)
   ============================ */
.navItem {
    position: relative;
    display: inline-flex;
}

.navLinkDropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-soft);
    padding: 10px 4px;
    margin: 0 12px;
    transition: color var(--t-fast);
}

.navLinkChevron {
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}

.navItemDropdown.is-open .navLinkChevron,
.navItemDropdown:hover .navLinkChevron {
    transform: rotate(180deg);
}

/* Dropdown glossy minimalista — mismo aire que el header scrolled.
   Translúcido + blur fuerte + borde luminoso sutil + sombra suave. */
.navDropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    min-width: 180px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 200ms cubic-bezier(.4, 0, .2, 1), visibility 180ms;
    z-index: 200;
}

/* Puente invisible entre trigger y dropdown — el cursor pasa sin cerrar.
   Extendido a 16px + ancho extendido para tolerar movimiento diagonal. */
.navDropdown::before {
    content: "";
    position: absolute;
    top: -16px;
    left: -12px;
    right: -12px;
    height: 16px;
}

.navItemDropdown:hover .navDropdown,
.navItemDropdown:focus-within .navDropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Item clickable full-width; underline solo bajo el texto (span interno). */
.navDropdownLink {
    display: block;
    padding: 9px 14px;
    color: var(--text-soft);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 160ms ease;
}

.navDropdownLinkText {
    position: relative;
    display: inline-block;
}

.navDropdownLinkText::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    transition: width 280ms cubic-bezier(.4, 0, .2, 1);
}

.navDropdownLink:hover,
.navDropdownLink:focus-visible {
    color: var(--brand);
}

.navDropdownLink:hover .navDropdownLinkText::after,
.navDropdownLink:focus-visible .navDropdownLinkText::after {
    width: 100%;
}

/* Botón link sin border (Acceder) */
.btnLink {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-soft);
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    transition: color var(--t-fast);
}

.btnLink:hover {
    color: var(--brand);
}

.headerActions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Lang switch */
.langSwitch {
    position: relative;
}

.langSwitchBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-soft);
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.langSwitchBtn:hover {
    color: var(--brand);
}

.langSwitchCurrent {
    font-weight: 700;
    color: var(--brand);
}

.langSwitchMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity var(--t-base), transform var(--t-base);
}

.langSwitch.is-open .langSwitchMenu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.langSwitchMenu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font-size: .9rem;
    text-align: left;
    border-radius: var(--radius-xs);
    color: var(--text-soft);
    transition: background var(--t-fast), color var(--t-fast);
}

.langSwitchFlag {
    display: inline-flex;
    width: 22px;
    height: 16px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    flex-shrink: 0;
}

.langSwitchFlag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.langSwitchMenu button:hover,
.langSwitchMenu button.is-current {
    background: var(--brand-fade);
    color: var(--brand);
}

/* Toggle móvil */
.navToggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--radius-xs);
}

.navToggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    transition: transform var(--t-base), opacity var(--t-base);
}


/* =============================================================
   08. HERO
   ============================================================= */
.hero {
    /* Aire arriba (separación con el header) y muy poco abajo (texto pegado al vídeo) */
    padding: 150px 0 16px;
    position: relative;
}

.heroInner {
    text-align: center;
    max-width: 1120px;
    margin: 0 auto;
    transform: translateY(var(--hero-inner-y, 0));
    opacity: var(--hero-inner-opacity, 1);
    transform-origin: center top;
    transition: opacity 120ms linear;
    will-change: transform, opacity;
}

.heroKicker {
    display: block;
    margin: 24px 0 20px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-soft);
    letter-spacing: -0.01em;
}

.heroTitle {
    font-family: var(--font-heading);
    /* Tamaño reducido respecto al anterior (2.8/5rem → 2.2/3.6rem) y color brand
       oscuro de la paleta (--brand-deep) en lugar del --text gris azulado */
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--brand);
    text-wrap: balance;
    /* Más aire alrededor del título: separación con la eyebrow y con el lead */
    margin: 28px 0 8px;
}

.heroTitleAccent {
    display: block;
    color: var(--brand);
}

.heroLead {
    margin: 36px auto 0;
    max-width: 720px;
    font-size: 1.22rem;
    line-height: 1.6;
    color: var(--text-soft);
}

.heroActions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 42px;
    flex-wrap: wrap;
}

/* Frase de apoyo bajo los CTA del hero ("Te enseñamos en una reunión...") */
.heroSupport {
    margin: 18px auto 0;
    max-width: 560px;
    font-size: .92rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.heroPillars {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 40px;
}

.heroPillars li {
    padding: 9px 18px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--brand);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
}

.heroTrust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
    font-size: .9rem;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Video del hero — rotación 3D controlada por scroll.
   perspective bajo (800px) = FOV pronunciado: la zona lejana del video
   (el borde superior cuando rota hacia atrás) se aleja y comprime más,
   haciendo que el efecto 3D sea claramente perceptible. */
.heroVideoStage {
    margin-top: 64px;
    perspective: 800px;
    perspective-origin: center top;
    /* Fade-in al cargar: oculto los primeros 300ms (delay), después aparece
       suavemente. `backwards` aplica el frame "from" durante el delay para
       que el video NO se vea hasta que la animación arranque. */
    animation: heroVideoFadeIn 1500ms cubic-bezier(.4, 0, .2, 1) 50ms backwards;
}

@keyframes heroVideoFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* CRÍTICO: el .heroCardWrap se interpone entre el stage y el .heroVideo.
   Sin preserve-3d "aplana" el contexto y el perspective del padre se pierde.
   Con preserve-3d, el rotateX del .heroVideo se renderiza con FOV correcto. */
.heroCardWrap {
    transform-style: preserve-3d;
}

.heroVideo {
    max-width: 1100px;
    margin: 0 auto;
    /* Marco tipo tablet (inspiración plantilla nueva): borde gris oscuro
       degradado con padding interno y bordes redondeados. */
    padding: 28px;
    background: linear-gradient(145deg, #2a3742 0%, #1c2630 50%, #0f161b 100%);
    border-radius: 40px;
    box-shadow:
        0 28px 80px rgba(0, 61, 79, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transform-origin: center center;
    transform: translateY(var(--hero-ty, 120px)) rotateX(var(--hero-rx, 50deg));
    transition: transform 80ms linear;
    will-change: transform;
    backface-visibility: hidden;
    overflow: hidden;
}

.heroVideo video {
    border-radius: 20px;
    display: block;
}

.heroVideo video {
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    background: #000;
}


/* =============================================================
   09. REVEAL / MOCKUP
   ============================================================= */
.reveal {
    /* Solo el caption — pegado bajo el vídeo */
    padding: 0 0 24px;
}

.mockup {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    /* desktop */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1024px) {
    .mockup {
        max-width: 820px;
    }
}

@media (max-width: 720px) {
    .mockup {
        max-width: 320px;
    }

    /* Showcase trust en móvil — vertical pero no exagerado */
    .trustShowcase {
        min-height: 480px !important;
        height: 480px !important;
    }

    .trustCard {
        padding: 36px 28px 70px;
    }

    .trustCard h3 {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .trustCard p {
        font-size: 1.05rem;
        line-height: 1.55;
    }

    /* Stack diagonal en móvil: video del hero + captura agenda superpuestos.
       Las dos cards se desplazan ±16px lateralmente, así que el ancho visible
       total = stage_width + 32px. Para que NUNCA pase del 77vw del viewport
       (deja ~23% libre = ~11.5% por lado), el stage propio debe quedarse en
       (77vw - 32px), nunca más de 304px (= 336 - 32). */
    .heroVideoStage {
        position: relative;
        width: 100% !important;
        max-width: min(304px, calc(77vw - 32px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        aspect-ratio: 484 / 1024;
        perspective: none;
        cursor: pointer;
    }

    /* WRAPPERS — cubren todo el stage; aquí va el desplazamiento Y (arco) */
    .heroVideoStage .heroCardWrap {
        position: absolute;
        inset: 0;
        /* z-index cambia a mitad de animación (visualmente no superponer mal) */
        transition: z-index 0s 360ms;
    }

    /* Z-index según estado: video delante (A) o detrás (B) */
    .heroVideoStage .heroCardWrapVideo {
        z-index: 2;
    }

    .heroVideoStage .heroCardWrapBack {
        z-index: 1;
    }

    .heroVideoStage.is-swapped .heroCardWrapVideo {
        z-index: 1;
    }

    .heroVideoStage.is-swapped .heroCardWrapBack {
        z-index: 2;
    }

    /* CARDS — eje X dentro del wrapper, dimensiones y estilo */
    .heroVideoStage .heroVideo,
    .heroVideoStage .mobileStackBack {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(0, 64, 82, 0.18);
    }

    .heroVideoStage .heroVideo {
        /* En móvil quitamos el marco tablet: las cards ya tienen su propio
           border-radius y sombra dentro de los wrappers del stack. */
        background: #000;
        padding: 0;
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(0, 64, 82, 0.18);
    }

    .heroVideoStage .heroVideo video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        background: transparent;
    }

    .heroVideoStage .mobileStackBack {
        display: block;
        object-fit: cover;
        object-position: top center;
        background: #fff;
    }

    /* ===== Posiciones estáticas =====
       Estado A: video → derecha-abajo, back → izquierda-arriba
       Estado B: invertido. */

    /* Eje Y (wrapper) */
    .heroVideoStage .heroCardWrapVideo {
        transform: translateY(16px);
    }

    .heroVideoStage .heroCardWrapBack {
        transform: translateY(-16px);
    }

    .heroVideoStage.is-swapped .heroCardWrapVideo {
        transform: translateY(-16px);
    }

    .heroVideoStage.is-swapped .heroCardWrapBack {
        transform: translateY(16px);
    }

    /* Eje X (card dentro) */
    .heroVideoStage .heroVideo {
        transform: translateX(16px);
    }

    .heroVideoStage .mobileStackBack {
        transform: translateX(-16px);
    }

    .heroVideoStage.is-swapped .heroVideo {
        transform: translateX(-16px);
    }

    .heroVideoStage.is-swapped .mobileStackBack {
        transform: translateX(16px);
    }

    /* ===== Animaciones durante .is-swapping =====
       X: ease-out fuerte (rápido al inicio, lento al final → "aterrizaje")
       Y: linear (no se para en la cumbre, pasa rápido por el punto intermedio)
       Al ser DOS animations independientes con timings distintos, el movimiento
       resultante es asíncrono y se siente orgánico. */

    /* === X (elementos) — easeOutExpo === */
    .heroVideoStage.is-swapping.is-swapped .heroVideo {
        animation: heroXRightToLeft 720ms cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .heroVideoStage.is-swapping.is-swapped .mobileStackBack {
        animation: heroXLeftToRight 720ms cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .heroVideoStage.is-swapping:not(.is-swapped) .heroVideo {
        animation: heroXLeftToRight 720ms cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .heroVideoStage.is-swapping:not(.is-swapped) .mobileStackBack {
        animation: heroXRightToLeft 720ms cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* === Y (wrappers) — mismo timing y curva que X === */
    .heroVideoStage.is-swapping.is-swapped .heroCardWrapVideo {
        animation:
            heroYArcUp 720ms cubic-bezier(.38, .04, .22, 1) forwards,
            heroSwapBlur 900ms cubic-bezier(.25, .1, .15, 1) forwards;
    }

    .heroVideoStage.is-swapping.is-swapped .heroCardWrapBack {
        animation:
            heroYArcDown 720ms cubic-bezier(.38, .04, .22, 1) forwards,
            heroSwapBlur 900ms cubic-bezier(.25, .1, .15, 1) forwards;
    }

    .heroVideoStage.is-swapping:not(.is-swapped) .heroCardWrapVideo {
        animation:
            heroYArcDown 720ms cubic-bezier(.38, .04, .22, 1) forwards,
            heroSwapBlur 900ms cubic-bezier(.25, .1, .15, 1) forwards;
    }

    .heroVideoStage.is-swapping:not(.is-swapped) .heroCardWrapBack {
        animation:
            heroYArcUp 720ms cubic-bezier(.38, .04, .22, 1) forwards,
            heroSwapBlur 900ms cubic-bezier(.25, .1, .15, 1) forwards;
    }

    @keyframes heroXRightToLeft {
        0% {
            transform: translateX(16px);
        }

        100% {
            transform: translateX(-16px);
        }
    }

    @keyframes heroXLeftToRight {
        0% {
            transform: translateX(-16px);
        }

        100% {
            transform: translateX(16px);
        }
    }

    /* Arco hacia arriba: 16 → -30 (cumbre) → -16. */
    @keyframes heroYArcUp {
        0% {
            transform: translateY(16px);
        }

        50% {
            transform: translateY(-30px);
        }

        100% {
            transform: translateY(-16px);
        }
    }

    /* Arco hacia abajo: espejo */
    @keyframes heroYArcDown {
        0% {
            transform: translateY(-16px);
        }

        50% {
            transform: translateY(30px);
        }

        100% {
            transform: translateY(16px);
        }
    }

    /* Blur + opacity en el cruce — animation INDEPENDIENTE con su propio
       timing (más lenta que el arco) para que tarde un pelín en desaparecer.
       Peak en 35% (justo cuando se cruzan, un pelín antes de la cumbre).
       Después fade-out largo gracias al ease-out del bezier. */
    @keyframes heroSwapBlur {
        0% {
            filter: blur(0);
            opacity: 1;
        }

        35% {
            filter: blur(3px);
            opacity: 0.85;
        }

        55% {
            filter: blur(2px);
            opacity: 0.9;
        }

        100% {
            filter: blur(0);
            opacity: 1;
        }
    }

    /* Ocultamos el mockup original (ya está integrado en el stack) */
    .reveal .mockup {
        display: none;
    }

    .reveal .revealCaption {
        margin-top: 0;
    }
}

/* Por defecto el back card no se muestra (solo en móvil) */
.mobileStackBack {
    display: none;
}

.mockup.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.mockupChrome {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--brand-pale);
    border-bottom: 1px solid var(--line);
}

.mockupDots {
    display: flex;
    gap: 6px;
}

.mockupDots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--brand-mist);
}

.mockupDots span:first-child {
    background: var(--warm);
}

.mockupDots span:nth-child(2) {
    background: #e3c97b;
}

.mockupDots span:nth-child(3) {
    background: var(--green);
}

.mockupUrl {
    flex: 1;
    text-align: center;
    padding: 6px 14px;
    font-size: .82rem;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    max-width: 320px;
    margin: 0 auto;
}

.mockupChromeSpacer {
    /* Mismo ancho que .mockupDots para centrar URL */
    width: 45px;
    flex-shrink: 0;
}

.mockupBody {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 480px;
}

/* Variante con imagen real — aspect-ratio exacto de cada captura, sin bordes */
.mockupBodyImage {
    display: block;
    grid-template-columns: none;
    min-height: 0;
    background: #fff;
    aspect-ratio: 1273 / 600;
    overflow: hidden;
}

.mockupBodyImage picture,
.mockupBodyImage img {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .mockupBodyImage {
        aspect-ratio: 1280 / 1100;
    }
}

@media (max-width: 720px) {
    .mockupBodyImage {
        aspect-ratio: 484 / 1024;
    }
}

.mockupSidebar {
    padding: 22px 18px;
    background: #1f2933;
    border-right: 1px solid #0f1620;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mockupBrand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
}

.mockupNav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mockupNav a {
    padding: 9px 12px;
    font-size: .85rem;
    color: rgba(255, 255, 255, .65);
    border-radius: var(--radius-xs);
    transition: background var(--t-fast), color var(--t-fast);
}

.mockupNav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.mockupNav a.is-active {
    background: var(--brand-soft);
    color: #fff;
    font-weight: 600;
}

.mockupSidebarFoot {
    margin-top: auto;
    padding: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-md);
}

.mockupSidebarFoot .miniLabel {
    color: rgba(255, 255, 255, .5);
}

.mockupSidebarFoot strong {
    display: block;
    margin: 6px 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: .95rem;
}

.mockupSidebarFoot p {
    font-size: .78rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.5;
}

.mockupMain {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mockupHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.mockupHead h3 {
    margin-top: 4px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.mockupHeadSimple {
    align-items: center;
}

.mockupHeadTools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mSearch {
    width: 160px;
    height: 30px;
    background: var(--brand-pale);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.mAvatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
}

.mockupToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 6px;
    border-bottom: 1px solid var(--line);
}

.mDateNav {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .88rem;
    color: var(--text);
}

.mArrow {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--brand);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--t-fast);
}

.mArrow:hover {
    background: var(--brand-fade);
}

.mDate {
    font-weight: 600;
}

.mViewToggle {
    display: flex;
    padding: 3px;
    background: var(--brand-pale);
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
}

.mViewToggle span {
    padding: 5px 14px;
    color: var(--text-soft);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.mViewToggle span.is-active {
    background: #fff;
    color: var(--brand);
    box-shadow: var(--shadow-xs);
}

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

.agendaCol {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agendaColHead {
    padding: 8px 10px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    background: var(--brand-pale);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
}

.slotCard {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-left: 3px solid var(--brand-soft);
    border-radius: 8px;
    background: rgba(54, 132, 139, .06);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.slotCard:hover {
    transform: translateX(2px);
    box-shadow: var(--shadow-xs);
}

.slotCardTime {
    font-size: .68rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .04em;
}

.slotCard strong {
    font-size: .84rem;
    font-weight: 600;
    color: var(--text);
}

.slotCard em {
    font-size: .72rem;
    color: var(--text-soft);
    font-style: normal;
}

.slotCardBlue {
    border-color: var(--blue);
    background: rgba(58, 143, 183, .08);
}

.slotCardBlue .slotCardTime {
    color: var(--blue);
}

.slotCardGreen {
    border-color: var(--green);
    background: rgba(42, 157, 143, .08);
}

.slotCardGreen .slotCardTime {
    color: var(--green);
}

.slotCardOrange {
    border-color: var(--warm);
    background: rgba(214, 125, 109, .1);
}

.slotCardOrange .slotCardTime {
    color: var(--warm);
}

.slotCardPurple {
    border-color: var(--purple);
    background: rgba(124, 109, 170, .1);
}

.slotCardPurple .slotCardTime {
    color: var(--purple);
}

.slotCardEmpty {
    border: 2px dashed var(--line);
    background: transparent;
    color: var(--text-muted);
    font-size: .82rem;
    font-style: italic;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.slotCardEmpty:hover {
    transform: none;
}

.statusPill {
    padding: 6px 12px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--green);
    background: rgba(42, 157, 143, .12);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.statusPill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2.4s ease-in-out infinite;
}

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

.mockupCard {
    padding: 16px;
    background: linear-gradient(180deg, #fff 0%, var(--brand-pale) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.mockupCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.mockupCard strong {
    display: block;
    margin: 8px 0 4px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--brand);
}

.mockupCard p {
    font-size: .8rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.mockupPanels {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 14px;
}

.mockupPanel {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.mockupPanel h4 {
    font-family: var(--font-heading);
    font-size: .98rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.patient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--brand-pale);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.patientAvatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
}

.patient strong {
    display: block;
    font-size: .92rem;
    color: var(--text);
}

.patient p {
    font-size: .78rem;
    color: var(--text-soft);
}

.checkList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkList li {
    position: relative;
    padding-left: 22px;
    font-size: .88rem;
    color: var(--text-soft);
    line-height: 1.55;
}

.checkList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand-fade);
    border: 2px solid var(--brand-soft);
}

.checkList li::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 12px;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    transform-origin: center;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 110px;
    padding: 14px 4px 4px;
    border-bottom: 1px solid var(--line);
}

.bars span {
    flex: 1;
    background: linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 100%);
    border-radius: 6px 6px 0 0;
    height: 0;
    animation: barGrow 1.2s ease forwards;
}

.bars span:nth-child(1) {
    animation-delay: .1s;
}

.bars span:nth-child(2) {
    animation-delay: .15s;
}

.bars span:nth-child(3) {
    animation-delay: .2s;
}

.bars span:nth-child(4) {
    animation-delay: .25s;
}

.bars span:nth-child(5) {
    animation-delay: .3s;
}

.bars span:nth-child(6) {
    animation-delay: .35s;
}

.bars span:nth-child(7) {
    animation-delay: .4s;
}

@keyframes barGrow {
    to {
        height: var(--h);
    }
}

.barsLegend {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: .68rem;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.revealCaption {
    margin-top: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: -0.01em;
}


/* =============================================================
   10. CREDIBILIDAD
   ============================================================= */
.credibility {
    /* Centrado vertical entre .hero (16px abajo) y .features (32px arriba):
       mismo padding arriba y abajo para que la sección "respire" simétrica. */
    padding: 32px 0;
}

.credibility .container {
    /* Sin borde ni card-fondo: el marquee va sobre el fondo de la página */
    padding: 12px 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.credibilityIntro {
    /* Mismo estilo que el lead del hero: cuerpo regular, no bold */
    margin: 0 auto 32px;
    max-width: 820px;
    text-align: center;
    font-size: 1.22rem;
    line-height: 1.6;
    color: var(--text-soft);
}

.credibilityLogos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Marquee horizontal infinito de logos — fade lateral suave para que las
   empresas entren/salgan sin corte abrupto en los bordes. */
.credibilityMarquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.credibilityTrack {
    display: flex;
    gap: 12px;
    width: max-content;
    will-change: transform;
}

.credibilityMarquee:hover .credibilityTrack {
    animation-play-state: paused;
}

/* Dentro del marquee desactivamos el transform de hover del chip
   (combinaba mal con el translateX del track) */
.credibilityMarquee .logoChip:hover {
    transform: none;
}

@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--marquee-shift, -50%));
    }
}

@media (prefers-reduced-motion: reduce) {
    .credibilityTrack {
        animation: none !important;
    }
}

.logoChip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 180px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text-soft);
    font-weight: 600;
    font-size: .88rem;
    transition: transform var(--t-base), border-color var(--t-base);
}

.logoChip:hover {
    transform: translateY(-2px);
    border-color: var(--brand-soft);
    color: var(--brand);
}

.logoMark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: .78rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    border-radius: 6px;
}


/* =============================================================
   11. PILARES DE CONFIANZA
   ============================================================= */
.trust {
    padding: var(--section-y) 0;
}

/* Showcase: cuadro con placeholder al fondo + capa de cards superpuestas (fade)
   Estructura en 3 capas:
     1) .trustBg          — fondo (slides imagen, fade entre ellos)   z:0
     2) ::before           — FILM BLANCO global (cubre TODO, fijo)     z:1
     3) cards + dots      — contenido encima, fondo transparente      z:2 */
.trustShowcase {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

/* Film blanco GLOBAL — entre fondo y contenido. Cubre cards Y dots por igual */
.trustShowcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.68);
    z-index: 1;
    pointer-events: none;
}

/* Gradiente diagonal: blanco en la zona del texto (top-left)
   → transparente en la esquina contraria (bottom-right) */
.trustShowcase::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.4) 45%,
            rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Capa de fondos (placeholders gris con icono de foto) */
.trustBg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.trustBgSlide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 600ms ease;
}

.trustBgSlide.is-active {
    opacity: 1;
}

.trustBgPlaceholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #d8dde0 0%, #eef1f3 100%);
    display: grid;
    place-items: center;
    color: rgba(22, 48, 56, 0.32);
}

/* Imagen real de fondo en algunos slides — blur para que el contenido respire */
.trustBgSlide picture,
.trustBgSlide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(3px);
    /* Compensa el recorte del blur en los bordes */
    transform: scale(1.02);
}

/* Fade-in propio cada <img> al terminar de cargar (anti-pop si tarda).
   Por defecto opacity 0; cuando JS añade .is-loaded queda visible con transición larga. */
.trustBgSlide img[data-trust-img] {
    opacity: 0;
    transition: opacity 800ms ease;
}

.trustBgSlide img[data-trust-img].is-loaded {
    opacity: 1;
}

.trustBgPlaceholderInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.trustBgPlaceholderInner span {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(22, 48, 56, 0.42);
}

/* Capa de tarjetas: SIN fondo propio (lo aporta ::before del showcase) */
.trustCardsLayer {
    position: relative;
    z-index: 2;
    flex: 1;
    background: transparent;
}

.trustCard {
    position: absolute;
    inset: 0;
    padding: 48px 80px 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.01);
    transition:
        opacity 520ms ease,
        transform 600ms cubic-bezier(.2, .7, .2, 1),
        visibility 0s 520ms;
    pointer-events: none;
}

.trustCard.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    transition:
        opacity 520ms ease,
        transform 600ms cubic-bezier(.2, .7, .2, 1);
}

.trustCard h3 {
    margin: 22px 0 12px;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 600px;
}

.trustCard p {
    font-size: 1.12rem;
    color: var(--text-soft);
    line-height: 1.6;
    max-width: 580px;
}

.trustIcon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: var(--brand-fade);
    color: var(--brand);
    border-radius: var(--radius-sm);
}

/* Flechas anterior / siguiente — discretas, sin círculo */
.trustArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(22, 48, 56, 0.4);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 200ms ease, transform 200ms ease;
}

.trustArrow:hover {
    color: var(--brand);
}

.trustArrow:active {
    transform: translateY(-50%) scale(.9);
}

.trustArrowPrev {
    left: 16px;
}

.trustArrowNext {
    right: 16px;
}

/* Puntitos de paginación — SIN fondo propio (lo aporta ::before del showcase) */
.trustDots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 26px;
    background: transparent;
}

.trustDot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(22, 48, 56, 0.25);
    cursor: pointer;
    transition: background 240ms ease, transform 240ms ease, width 240ms ease;
}

.trustDot:hover {
    background: rgba(22, 48, 56, 0.5);
}

.trustDot.is-active {
    background: var(--brand);
    width: 28px;
    border-radius: 999px;
}


/* =============================================================
   12. FEATURES / TABS
   ============================================================= */
.features {
    /* Padding vertical reducido (no usa el var(--section-y) global de 72px) */
    padding: 32px 0;
}

/* Lead de "Lo que nos hace distintos" cabe en 1 línea — el sectionHead aquí
   se ensancha lo necesario. */
.features>.container>.sectionHead {
    max-width: 1100px;
}

.tabsNav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 32px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    /* Barra más larga: ocupa todo el ancho del contenedor */
    width: 100%;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.tabsIndicator {
    position: absolute;
    top: 6px;
    left: 0;
    width: 0;
    height: calc(100% - 12px);
    background: var(--brand);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(0, 85, 109, .25);
    transition:
        transform 220ms cubic-bezier(.5, 0, .2, 1),
        width 220ms cubic-bezier(.5, 0, .2, 1);
    pointer-events: none;
    z-index: 0;
    will-change: transform, width;
}

.tabsBtn {
    position: relative;
    z-index: 1;
    padding: 10px 18px;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    /* Las frases NUNCA en 2 líneas */
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-soft);
    border-radius: var(--radius-pill);
    transition: color 160ms ease;
}

.tabsBtn:hover {
    color: var(--brand);
}

.tabsBtn.is-active {
    color: #fff;
}

/* En desktop solo se ve el texto, los iconos solo están en móvil */
.tabsIcon {
    display: none;
}

.tabsPanels {
    position: relative;
}

.tabPanel {
    display: none;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    /* Texto SIEMPRE pegado arriba (no se centra cuando el mockup es alto) */
    align-items: start;
    /* Altura fija reservada para el panel MÁS ALTO. Tras quitar la fila
       16:00 de agenda, el más alto es "Atención y soporte" (historia clínica
       ~362px). Los demás paneles son más pequeños pero el contenedor mantiene
       esta altura para que el texto/secciones de abajo NO bailen al cambiar
       de pestaña. */
    min-height: 380px;
    animation: tabIn .5s ease;
}

.tabPanel.is-active {
    display: grid;
}

@keyframes tabIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tabPanelCopy h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    text-wrap: balance;
}

.tabPanelCopy p {
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

.tabPanelVisual {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    /* Altura reservada para el mockup MÁS ALTO (historia clínica de
       "Atención y soporte" tras quitar la fila 16:00 de agenda). */
    min-height: 340px;
    display: grid;
    place-items: center;
}

/* ===== Mockup agenda multi-profesional (pestaña "Agenda y citas") ===== */
.agendaMock {
    --rowH: 16px;
    /* altura de cada media hora — reducida */
    --hoursColW: 44px;
    /* ancho columna horas — reducida */
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: .82em;
}

/* Cabecera con corner + nombres de profesionales */
.agendaMockHead {
    display: grid;
    grid-template-columns: var(--hoursColW) repeat(5, 1fr);
    background: #f6f9fa;
    border-bottom: 1px solid var(--line);
}

.agendaMockCorner {
    background: var(--brand);
}

.agendaMockName {
    padding: 10px 8px;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: .01em;
    border-left: 1px solid var(--line);
}

/* Cuerpo: columna horas (brand) + grid de citas */
.agendaMockBody {
    display: grid;
    grid-template-columns: var(--hoursColW) 1fr;
    position: relative;
}

.agendaMockHours {
    background: var(--brand);
    color: #fff;
    display: grid;
    /* 8 horas (08:00 - 15:00) — antes había una 9ª fila vacía sin span */
    grid-template-rows: repeat(8, calc(var(--rowH) * 2));
}

.agendaMockHours span {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.agendaMockHours span:first-child {
    border-top: none;
}

/* Grid de citas: 5 columnas (profesionales) x 16 filas (cada media hora,
   8 horas 08:00 - 15:00). */
.agendaMockGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(16, var(--rowH));
    /* Líneas de fondo: horizontales cada hora (2 filas) y verticales por columna */
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 0, transparent calc(var(--rowH) * 2 - 1px),
            var(--line) calc(var(--rowH) * 2 - 1px), var(--line) calc(var(--rowH) * 2)),
        repeating-linear-gradient(to right,
            transparent 0, transparent calc(20% - 1px),
            var(--line) calc(20% - 1px), var(--line) 20%);
    background-color: #fafbfc;
}

/* Cita individual: barra lateral marcando color + texto */
.agendaMockApp {
    position: relative;
    margin: 1px 3px;
    padding: 5px 8px 5px 12px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .7rem;
    line-height: 1.15;
    box-shadow: 0 1px 2px rgba(0, 64, 82, .08);
}

.agendaMockApp::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.agendaMockApp strong {
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .01em;
    opacity: .75;
}

.agendaMockApp span {
    font-weight: 600;
    font-size: .78rem;
}

/* Variantes de color (suaves, paleta clínica) */
.agendaMockApp.green {
    background: #d8efe3;
    color: #1f5f3f;
}

.agendaMockApp.green::before {
    background: #4ca87a;
}

.agendaMockApp.blue {
    background: #d6e8f4;
    color: #1f4a6b;
}

.agendaMockApp.blue::before {
    background: #3f86c4;
}

.agendaMockApp.amber {
    background: #f7e7c8;
    color: #6f4a16;
}

.agendaMockApp.amber::before {
    background: #c98a2b;
}

.agendaMockApp.rose {
    background: #f4d8de;
    color: #71334a;
}

.agendaMockApp.rose::before {
    background: #c45a73;
}

.agendaMockApp.purple {
    background: #e2d8ef;
    color: #423269;
}

.agendaMockApp.purple::before {
    background: #7556a0;
}

/* Hueco "Disponible": estilo punteado, más sutil */
.agendaMockApp.available {
    background: repeating-linear-gradient(45deg,
            rgba(54, 132, 139, .08) 0 6px,
            transparent 6px 12px);
    color: var(--brand-soft);
    box-shadow: none;
    border: 1px dashed rgba(54, 132, 139, .35);
}

.agendaMockApp.available::before {
    background: var(--brand-soft);
    opacity: .5;
}

.agendaMockApp.available strong {
    opacity: .65;
}

/* Móvil: reducimos altura de filas y fuentes */
@media (max-width: 720px) {
    .agendaMock {
        --rowH: 16px;
        --hoursColW: 44px;
    }

    .agendaMockName {
        font-size: .72rem;
        padding: 8px 4px;
    }

    .agendaMockHours span {
        font-size: .64rem;
    }

    .agendaMockApp strong {
        font-size: .58rem;
    }

    .agendaMockApp span {
        font-size: .66rem;
    }
}

/* ===== Mockup historia clínica (pestaña "Atención y soporte") ===== */
.historyMock {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--text);
}

.historyMockTitleBar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* Fila de campos (solo paciente) */
.historyMockFields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--line);
}

.historyMockField {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.historyMockLabel {
    font-size: .58rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.historyMockValue {
    font-size: .78rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historyMockValuePlaceholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Tabs Sesiones / Galería */
.historyMockTabs {
    display: flex;
    gap: 24px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
}

.historyMockTab {
    padding: 10px 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-soft);
    border-bottom: 2px solid transparent;
}

.historyMockTab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* Toolbar: filtros + botón añadir */
.historyMockToolbar {
    display: grid;
    grid-template-columns: 1fr 1fr 36px;
    gap: 8px;
    padding: 10px 16px;
    background: #fafbfc;
}

.historyMockSearch {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: .72rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historyMockAdd {
    width: 36px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    cursor: default;
    display: grid;
    place-items: center;
}

/* Tabla de sesiones */
.historyMockTable {
    display: flex;
    flex-direction: column;
}

.historyMockHead,
.historyMockRow {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1.4fr;
    gap: 10px;
    padding: 10px 16px;
    align-items: center;
}

.historyMockHead {
    background: #fafbfc;
    font-size: .62rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--line);
}

.historyMockRow {
    border-bottom: 1px solid var(--line);
    font-size: .78rem;
}

.historyMockRow:last-child {
    border-bottom: none;
}

.historyMockDate {
    font-weight: 700;
    color: var(--text);
}

.historyMockActions {
    display: flex;
    gap: 6px;
}

.historyMockBtn {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .66rem;
    font-weight: 600;
    color: var(--text-soft);
    background: #fff;
}

.historyMockBtnDanger {
    color: #b94a55;
    border-color: rgba(185, 74, 85, .25);
}

.historyMockFoot {
    padding: 10px 16px;
    font-size: .68rem;
    color: var(--text-soft);
    border-top: 1px solid var(--line);
    background: #fafbfc;
}

/* Móvil: simplifica grids para que no se aplaste */
@media (max-width: 720px) {
    .historyMockFields {
        grid-template-columns: 1fr;
    }

    /* paciente full-width */
    .historyMockHead,
    .historyMockRow {
        grid-template-columns: 1fr 1.6fr 1.4fr;
    }

    .historyMockHead span:nth-child(3),
    .historyMockRow span:nth-child(3) {
        display: none;
    }

    /* oculta usuario */
    .historyMockBtn {
        padding: 3px 7px;
        font-size: .58rem;
    }

    .historyMockToolbar {
        grid-template-columns: 1fr 32px;
    }

    .historyMockSearch:nth-of-type(2) {
        display: none;
    }

    /* oculta el buscador secundario */
}

/* ===== Mockup facturación (pestaña "Por tus pacientes") =====
   Grid con anchos consistentes y todas las celdas alineadas a la izquierda
   para que header y filas no tengan desplazamientos visuales. */
.invoiceMock {
    --invoiceCols: 32px 1.1fr 1.3fr 1.2fr 0.9fr 0.9fr 1.2fr;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: .76rem;
    color: var(--text);
}

.invoiceMockHead,
.invoiceMockRow {
    display: grid;
    grid-template-columns: var(--invoiceCols);
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-align: left;
}

/* Permite que las celdas hijas ocupen todo el ancho disponible (no se encogen) */
.invoiceMockHead>*,
.invoiceMockRow>* {
    min-width: 0;
}

.invoiceMockHead {
    background: #fafbfc;
    border-bottom: 1px solid var(--line);
    /* Header con tamaño parecido a las filas (.7rem vs .76rem de filas)
       y sin uppercase: evita el efecto óptico de columnas desplazadas. */
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: .02em;
}

.invoiceMockRow {
    border-bottom: 1px solid var(--line);
    font-size: .76rem;
}

.invoiceMockRow:last-child {
    border-bottom: none;
}

.invoiceMockCheck {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--line);
    border-radius: 3px;
    background: #fff;
    display: block;
}

.invoiceMockId {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.invoiceMockNum {
    /* Números alineados a la izquierda como el resto de columnas para
       que coincidan con el header del grid (sin saltos visuales). */
    text-align: left;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
}

.invoiceMockPlaceholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Acciones */
.invoiceMockActions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.invoiceMockBtn {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .58rem;
    font-weight: 600;
    color: var(--text-soft);
    background: #fff;
    white-space: nowrap;
}

.invoiceMockBtnDanger {
    color: #b94a55;
    border-color: rgba(185, 74, 85, .25);
}

/* Chips de estado: borde de color + texto del mismo color, fondo blanco
   (estilo que pediste: chip "outline" tipo el de la captura) */
.invoiceMockChip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    background: #fff;
    font-size: .62rem;
    font-weight: 600;
    white-space: nowrap;
}

.invoiceMockChipDone {
    color: #2e9b5a;
}

/* verde */
.invoiceMockChipAccepted {
    color: #d6a128;
}

/* amarillo/dorado */
.invoiceMockChipCancelled {
    color: #d04545;
}

/* rojo */
.invoiceMockChipOverdue {
    color: #d04545;
}

/* rojo (vencido) */

/* Anulada: chip negro relleno, blanco dentro (variante sólida) */
.invoiceMockChipVoid {
    color: #fff;
    background: #2a2f33;
    border-color: #2a2f33;
}

/* Fila Vencido: tinta roja sutil para destacar la fila completa */
.invoiceMockRowOverdue {
    background: rgba(208, 69, 69, .08);
}

.invoiceMockRowOverdue,
.invoiceMockRowOverdue .invoiceMockId {
    color: #b03a3a;
}

/* Tablet: oculta Forma pago + Pendiente */
@media (max-width: 1024px) {
    .invoiceMock {
        --invoiceCols: 32px 1.1fr 1.3fr 0.9fr 1.2fr;
    }

    .invoiceMockHead> :nth-child(4),
    .invoiceMockRow> :nth-child(4),
    .invoiceMockHead> :nth-child(6),
    .invoiceMockRow> :nth-child(6) {
        display: none;
    }
}

/* Móvil: solo Fecha · Nº factura · Estado */
@media (max-width: 720px) {
    .invoiceMock {
        --invoiceCols: 1fr 1.1fr 1fr;
        font-size: .66rem;
    }

    .invoiceMockHead {
        padding: 8px 10px;
    }

    .invoiceMockRow {
        padding: 9px 10px;
    }

    .invoiceMockHead>*,
    .invoiceMockRow>* {
        display: none;
    }

    .invoiceMockHead> :nth-child(2),
    .invoiceMockHead> :nth-child(3),
    .invoiceMockHead> :nth-child(7),
    .invoiceMockRow> :nth-child(2),
    .invoiceMockRow> :nth-child(3),
    .invoiceMockRow> :nth-child(7) {
        display: block;
    }

    .invoiceMockChip {
        font-size: .56rem;
        padding: 2px 8px;
    }
}

/* ===== Mockup analítica (pestaña "Analítica") =====
   Gráfica ingresos vs gastos a la izquierda + tabla compacta a la derecha */
.analyticsMock {
    --colIncome: #2e9b5a;
    /* verde ingresos */
    --colExpense: #d04545;
    /* rojo gastos */
    width: 100%;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
}

/* ----- Gráfica ----- */
.analyticsMockChart {
    min-width: 0;
}

.analyticsMockChart svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.analyticsMockGrid line {
    stroke: var(--line);
    stroke-dasharray: 0;
}

/* Área rellena (debajo de la línea de ingresos) */
.analyticsMockArea {
    fill: var(--colIncome);
    fill-opacity: 0.22;
    stroke: none;
}

.analyticsMockLine {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analyticsMockLineIncome {
    stroke: var(--colIncome);
}

.analyticsMockLineExpense {
    stroke: var(--colExpense);
}

.analyticsMockDotsIncome circle {
    fill: var(--colIncome);
}

.analyticsMockDotsExpense circle {
    fill: var(--colExpense);
}

.analyticsMockXLabels text {
    font-family: var(--font-body);
    font-size: 14px;
    fill: var(--text-soft);
    font-weight: 500;
}

/* ----- Tabla ----- */
.analyticsMockTable {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: .72rem;
    background: #fff;
}

.analyticsMockTableHead,
.analyticsMockTableRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.analyticsMockTableRow:last-child {
    border-bottom: none;
}

.analyticsMockTableHead {
    background: #fafbfc;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.analyticsMockColIncome {
    color: var(--colIncome);
    text-align: right;
    font-weight: 600;
}

.analyticsMockColExpense {
    color: var(--colExpense);
    text-align: right;
    font-weight: 600;
}

.analyticsMockTableRow span:first-child {
    color: var(--text-soft);
}

.analyticsMockTableTotal {
    background: #fafbfc;
    font-weight: 700;
}

.analyticsMockTableTotal span:first-child {
    color: var(--text);
}

/* Móvil/tablet: tabla debajo del gráfico */
@media (max-width: 1024px) {
    .analyticsMock {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .analyticsMockXLabels text {
        font-size: 16px;
    }

    .analyticsMockTable {
        font-size: .66rem;
    }
}

/* Team */
.team {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.teamMember {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--brand-pale);
    border-radius: var(--radius-md);
    transition: transform var(--t-base);
}

.teamMember:hover {
    transform: translateX(4px);
}

.teamMember>div:not(.avatar) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.teamMember strong {
    font-size: .92rem;
    color: var(--text);
}

.teamMember span {
    font-size: .78rem;
    color: var(--text-soft);
}

.avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar.a1, .avatar.t1 {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
}

.avatar.a2, .avatar.t2 {
    background: linear-gradient(135deg, var(--green) 0%, #5fb6a8 100%);
}

.avatar.a3, .avatar.t3 {
    background: linear-gradient(135deg, var(--warm) 0%, #e8a094 100%);
}

.avatar.a4 {
    background: linear-gradient(135deg, var(--purple) 0%, #a695c9 100%);
}

.status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.statusOn {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, .2);
}

.statusAway {
    background: #e3c97b;
    box-shadow: 0 0 0 3px rgba(227, 201, 123, .25);
}


/* =============================================================
   13. ESPECIALIDADES
   ============================================================= */
.specialties {
    padding: var(--section-y) 0;
}

.specialtyGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
}

.specialtyCard {
    padding: 32px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
    overflow: hidden;
}

.specialtyCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow);
}

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

.specialtyCard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-soft);
}

.specialtyCardFeatured {
    background: linear-gradient(180deg, #fff 0%, var(--brand-fade) 100%);
    border-color: var(--brand-soft);
}

.specialtyCardLabel {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-fade);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.specialtyCard h3 {
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text);
    text-wrap: balance;
}

.specialtyCard p {
    margin-bottom: 18px;
    color: var(--text-soft);
    font-size: .94rem;
    line-height: 1.6;
}


/* =============================================================
   14. ASISTENTE IA
   ============================================================= */
.ai {
    padding: var(--section-y) 0;
}

.aiBoard {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* === NORIA de cards (izquierda) ============================================
   3 cards rotando: una central legible, una arriba detrás (blur), otra abajo
   detrás (blur). Cada 5s avanza un step. Las posiciones se controlan con
   clases is-current / is-prev / is-next aplicadas desde JS.
   overflow: hidden contiene a las cards prev/next para que NO se salgan
   por arriba/abajo y se "coman" otros elementos de la sección. */
.aiCardsWheel {
    position: relative;
    width: min(440px, 100%);
    /* Misma altura que .aiChatPanel para que las 3 cards distribuidas ocupen
       toda la altura del "falso móvil" a la derecha. */
    height: 545px;
    perspective: 1200px;
    overflow: hidden;
}

.aiCard {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition:
        transform 760ms cubic-bezier(.22, 1, .36, 1),
        opacity 560ms ease,
        filter 560ms ease,
        box-shadow 560ms ease,
        top 760ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity, filter, top;
}

/* Card central — nítida, en el centro vertical de la rueda */
.aiCard.is-current {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    filter: blur(0);
    z-index: 3;
    box-shadow: var(--shadow-lg);
}

/* Arriba (detrás) */
.aiCard.is-prev {
    transform: translateY(-135%) scale(.86);
    opacity: 0.38;
    filter: blur(3px);
    z-index: 1;
}

/* Abajo (detrás) */
.aiCard.is-next {
    transform: translateY(35%) scale(.86);
    opacity: 0.38;
    filter: blur(3px);
    z-index: 1;
}

/* Cuando una card "wrappea" de prev a next (saltando arriba → abajo sin
   verse el recorrido) desactivamos transition durante ese frame. */
.aiCard.no-transition {
    transition: none !important;
}

/* HOVER: noria pausada (clase añadida desde JS al hacer hover en .aiBoard).
   Las 3 cards mantienen su rol dinámico del ciclo (is-prev arriba,
   is-current centro, is-next abajo) y se anclan a posiciones fijas del
   wheel via top + translateY. Todas con mismo z-index para evitar overlap
   raro, mismo box-shadow para que no compita una con otra, y scale .82
   para que las 3 quepan en el wheel sin solaparse aunque tengan alturas
   distintas. */
.aiCardsWheel.is-paused .aiCard {
    filter: blur(0);
    opacity: 1;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    transform-origin: center center;
}

/* Las 3 cards centradas con el MISMO patrón translateY(-50%) — solo cambia
   el `top` (15% / 50% / 85% del wheel). Así los centros visuales quedan
   equidistantes (35% del wheel entre cada par), independientemente de las
   alturas individuales de cada card. Si usásemos top:0 + translateY:0
   para is-prev y top:100% + translateY:-100% para is-next, las distancias
   entre centros dependerían de cada altura y desalineaban la del centro. */
/* Las 3 cards ancladas en top:50% (centro del wheel) y desplazadas con un
   OFFSET FIJO en píxeles via translateY. Así la distancia entre centros es
   exactamente 175px en ambos lados, simétrica al 100%. */
.aiCardsWheel.is-paused .aiCard.is-prev {
    top: 50%;
    transform: translate(0, calc(-50% - 175px)) scale(.82);
}

.aiCardsWheel.is-paused .aiCard.is-current {
    top: 50%;
    transform: translate(0, -50%) scale(.82);
}

.aiCardsWheel.is-paused .aiCard.is-next {
    top: 50%;
    transform: translate(0, calc(-50% + 175px)) scale(.82);
}

/* Botón "Saber más" — un poco más grande */
.aiFooter .btn {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.aiCardIcon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    color: var(--brand);
    background: transparent;
    border-radius: 0;
}

.aiCardTag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--warm);
    background: var(--warm-soft);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.aiCard h3 {
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.aiCard>p {
    margin-bottom: 0;
    color: var(--text-soft);
    font-size: .9rem;
    line-height: 1.5;
}

.aiCardPrompt {
    padding: 14px 16px;
    background: var(--brand-pale);
    border-left: 3px solid var(--brand-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .9rem;
    color: var(--brand);
}

.aiCardPrompt em {
    font-style: italic;
    line-height: 1.5;
}

.aiCardPrompt a {
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--brand);
    font-size: .85rem;
}

/* === Panel chat único (derecha) — loop secuencial sobre 3 sequences === */
.aiChatPanel {
    position: relative;
    width: min(360px, 100%);
    height: 545px;
    /* Marco tipo móvil/tablet — mismo estilo que .heroVideo del hero */
    padding: 20px;
    background: linear-gradient(145deg, #2a3742 0%, #1c2630 50%, #0f161b 100%);
    border: 0;
    border-radius: 40px;
    box-shadow:
        0 28px 80px rgba(0, 61, 79, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* "Pantalla" blanca dentro del marco */
.aiChatPanel::before {
    content: "";
    position: absolute;
    inset: 20px;
    background: #fff;
    border-radius: 22px;
    z-index: 0;
}

/* Stream pegado dentro de la "pantalla" blanca (inset 20px del marco
   oscuro). overflow:hidden recorta los mensajes que sobresalen por arriba
   para que NO se vean encima del borde negro. flex-end apila los mensajes
   desde abajo. */
.aiChatStream {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    overflow: hidden;
    border-radius: 22px;
    z-index: 1;
}

.aiChatMsg {
    max-width: 90%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: .82rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 460ms ease,
        transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.aiChatMsg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.aiChatMsg.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 380ms ease,
        transform 380ms ease;
}

.aiChatMsgUser {
    align-self: flex-end;
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.aiChatMsgBot {
    align-self: flex-start;
    background: var(--brand-pale);
    color: var(--brand);
    border-bottom-left-radius: 4px;
}


/* =============================================================
   14B. CAPABILITIES (Todo lo que EviMedic hace por tu clínica)
   Grid asimétrico estilo editorial:
     fila 1: featured (ocupa las 2 columnas)
     fila 2: agenda · billing
     fila 3: analytics · comms
   ============================================================= */
.capabilities {
    padding: var(--section-y) 0;
    /* Separación amplia hacia la siguiente sección (Especialidades) */
    margin-bottom: 120px;
}

.capabilitiesGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "featured  featured"
        "agenda    billing"
        "analytics comms";
    gap: 22px;
    margin-top: 36px;
    align-items: stretch;
}

.capCardFeatured {
    grid-area: featured;
    --cap-card-pad: 32px;
    padding: var(--cap-card-pad);
}

.capCardAgenda {
    grid-area: agenda;
}

.capCardBilling {
    grid-area: billing;
}

.capCardAnalytics {
    grid-area: analytics;
}

.capCardComms {
    grid-area: comms;
}

.capCard {
    --cap-card-pad: 28px;
    position: relative;
    padding: var(--cap-card-pad);
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(0, 64, 82, 0.05);
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: transform var(--t-base), box-shadow var(--t-base), outline-color var(--t-base);
    overflow: hidden;
    /* Stack vertical: el mockup queda pegado abajo via margin-top:auto */
    display: flex;
    flex-direction: column;
}

/* El mockup mini empuja al fondo de la card cuando hay espacio sobrante */
.capCard>.capCardMini {
    margin-top: auto;
}

.capCard>* {
    position: relative;
    z-index: 1;
}

.capCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(0, 64, 82, 0.10);
    outline-color: rgba(0, 64, 82, 0.16);
}

/* Número como "label técnico" — letterspaced amplio, sin chip ni círculo,
   flanqueado por una línea horizontal que cruza toda la card de borde a
   borde (atravesando los paddings) con un gap alrededor del número:
   ─── 01 ───────────────────────────────────── */
.capCardNum {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Extender más allá del padding hasta los bordes reales de la card */
    margin-inline: calc(var(--cap-card-pad) * -1);
    margin-bottom: 22px;
    background: transparent;
    color: var(--brand);
    font-family: var(--font-heading, 'Urbanist', sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
}

.capCardNum::before,
.capCardNum::after {
    content: "";
    height: 2px;
    background: var(--brand);
    opacity: 0.16;
    transition: opacity var(--t-base);
}

.capCardNum::before {
    /* Línea izquierda hasta donde queda alineado el número con el resto
       del contenido (padding del card menos el gap del flex) */
    width: calc(var(--cap-card-pad) - 14px);
    flex-shrink: 0;
}

.capCardNum::after {
    flex: 1;
}

.capCard:hover .capCardNum::before,
.capCard:hover .capCardNum::after {
    opacity: 0.4;
}

/* Número gigante de fondo decorativo en la esquina inferior derecha */
.capCard::after {
    content: attr(data-num);
    position: absolute;
    right: -16px;
    bottom: -46px;
    font-family: var(--font-heading, 'Urbanist', sans-serif);
    font-size: 21rem;
    font-weight: 900;
    line-height: .8;
    color: var(--brand);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.capCard h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.18;
    color: var(--brand);
    margin-bottom: 10px;
}

.capCardFeatured h3 {
    font-size: 1.85rem;
}

.capCard p {
    font-size: .94rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.capCardList {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.capCardList li {
    position: relative;
    padding-left: 18px;
    font-size: .9rem;
    color: var(--text);
}

.capCardList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-soft);
}

/* Featured: texto + visual lado a lado */
.capCardContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}

/* Card 01: el texto se pega arriba en su columna (sin centrar verticalmente) */
.capCardFeatured .capCardContent {
    align-items: start;
}

.capCardContentAgenda {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 18px;
}

.capCardVisual,
.capCardMini {
    position: relative;
}

.capCardVisualRecord {
    min-height: 220px;
    display: flex;
    align-items: center;
}

/* === Mockup UI: Historia clínica (mini-tabla inspirada en historia.php) === */
.capUi {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0, 64, 82, 0.04);
}

.capUiHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.capUiTitle {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand);
}

.capUiTag {
    font-size: .68rem;
    font-weight: 700;
    color: var(--brand-soft);
    background: rgba(54, 132, 139, 0.1);
    padding: 5px 10px;
    border-radius: 999px;
}

.capUiTable {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    margin-bottom: 12px;
}

.capUiTableHead,
.capUiTableRow {
    display: grid;
    grid-template-columns: 56px 1fr 70px;
    gap: 10px;
    padding: 8px 12px;
    align-items: center;
    font-size: .76rem;
}

.capUiTableHead {
    background: #f6fafa;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    color: var(--text-soft);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.capUiTableRow+.capUiTableRow {
    border-top: 1px solid var(--line);
}

.capUiDate {
    font-weight: 700;
    color: var(--brand);
    font-size: .72rem;
}

.capUiDesc {
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capUiUser {
    color: var(--text-soft);
    font-size: .72rem;
}

.capUiDocs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.capUiDocs span {
    font-size: .68rem;
    color: var(--text-soft);
    background: #f6fafa;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px 10px;
}

/* === Mini contenedor genérico (sin gradiente feo, fondo plano limpio) === */
.capCardMini {
    margin-top: 20px;
    min-height: 120px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--line);
    padding: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 64, 82, 0.03);
}

.capCardMiniAgenda {
    margin-top: 0;
    padding: 12px;
}

/* === Mockup Agenda mini — versión compacta de .agendaMock (sección
   "Lo que nos hace distintos"): corner brand + columna horas + grid citas
   con barra lateral coloreada y horario+nombre. === */
.agendaMockMini {
    --rowH: 14px;
    --hoursColW: 38px;
    width: 100%;
    max-height: 511px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-family: var(--font-body);
}

.agendaMockMiniHead {
    display: grid;
    grid-template-columns: var(--hoursColW) repeat(3, 1fr);
    background: #f6f9fa;
    border-bottom: 1px solid var(--line);
}

.agendaMockMiniCorner {
    background: var(--brand);
}

.agendaMockMiniName {
    padding: 8px 4px;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-soft);
    border-left: 1px solid var(--line);
}

.agendaMockMiniBody {
    display: grid;
    grid-template-columns: var(--hoursColW) 1fr;
}

.agendaMockMiniHours {
    background: var(--brand);
    color: #fff;
    display: grid;
    grid-template-rows: repeat(5, calc(var(--rowH) * 2));
}

.agendaMockMiniHours span {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
    font-size: .62rem;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.agendaMockMiniHours span:first-child {
    border-top: none;
}

.agendaMockMiniGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, var(--rowH));
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 0, transparent calc(var(--rowH) * 2 - 1px),
            var(--line) calc(var(--rowH) * 2 - 1px), var(--line) calc(var(--rowH) * 2)),
        repeating-linear-gradient(to right,
            transparent 0, transparent calc(33.333% - 1px),
            var(--line) calc(33.333% - 1px), var(--line) 33.333%);
    background-color: #fafbfc;
}

.agendaMockMiniApp {
    position: relative;
    margin: 1px 2px;
    padding: 2px 4px 2px 7px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.agendaMockMiniApp::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.agendaMockMiniApp strong {
    font-size: .6rem;
    font-weight: 700;
    color: var(--text);
}

.agendaMockMiniApp span {
    font-size: .58rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaMockMiniApp.green {
    background: rgba(75, 178, 130, .14);
}

.agendaMockMiniApp.green::before {
    background: #4bb282;
}

.agendaMockMiniApp.blue {
    background: rgba(54, 132, 139, .14);
}

.agendaMockMiniApp.blue::before {
    background: var(--brand-soft);
}

.agendaMockMiniApp.amber {
    background: rgba(225, 165, 60, .14);
}

.agendaMockMiniApp.amber::before {
    background: #e1a53c;
}

.agendaMockMiniApp.purple {
    background: rgba(140, 110, 200, .14);
}

.agendaMockMiniApp.purple::before {
    background: #8c6ec8;
}

.agendaMockMiniApp.rose {
    background: rgba(220, 110, 130, .14);
}

.agendaMockMiniApp.rose::before {
    background: #dc6e82;
}

/* === Mockup Billing (mini-tabla facturas con chips de estado) === */
.capCardMiniBilling {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.capInvoiceTable {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.capInvoiceHead,
.capInvoiceRow {
    display: grid;
    grid-template-columns: 1.1fr .55fr .7fr .9fr;
    gap: 6px;
    padding: 7px 9px;
    align-items: center;
    font-size: .7rem;
}

.capInvoiceHead {
    background: #f6fafa;
    font-size: .56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line);
}

.capInvoiceRow+.capInvoiceRow {
    border-top: 1px solid var(--line);
}

.capInvoiceId {
    color: var(--brand);
    font-weight: 700;
    font-size: .66rem;
    font-family: ui-monospace, "SF Mono", monospace;
}

.capInvoiceDate {
    color: var(--text-soft);
    font-size: .68rem;
}

.capInvoiceTotal,
.capInvoiceTotalCol {
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

.capInvoiceChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}

.capInvoiceChipDone {
    background: rgba(20, 150, 90, 0.12);
    color: #14965a;
}

.capInvoiceChipPending {
    background: rgba(220, 150, 30, 0.14);
    color: #c2832d;
}

.capMiniTag {
    align-self: flex-start;
    font-size: .62rem;
    font-weight: 700;
    color: var(--brand-soft);
    background: rgba(54, 132, 139, 0.12);
    border-radius: 999px;
    padding: 5px 9px;
}

/* === Mockup Analytics (SVG line/area chart estilo estadisticas-cli.php) === */
.capCardMiniAnalytics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: stretch;
    padding: 14px;
}

.capChartHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.capChartTitle {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.capChartTotal {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand);
}

.capChart {
    width: 100%;
    height: 100px;
    display: block;
    overflow: visible;
}

.capChart .capChartGrid line {
    stroke: rgba(0, 0, 0, 0.06);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.capChart .capChartArea {
    fill: url(#capChartGradient);
}

.capChart .capChartLine {
    fill: none;
    stroke: var(--brand-soft);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.capChart .capChartDots circle {
    fill: var(--brand-soft);
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* === Mockup Comms (burbujas chat tipo WhatsApp/Email) === */
.capCardMiniComms {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
}

.capChatBubble {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 11px;
    border-radius: 14px;
    max-width: 86%;
    font-size: .72rem;
    line-height: 1.4;
}

.capChatBubbleClinic {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
    color: var(--text);
}

.capChatBubblePatient {
    align-self: flex-end;
    background: rgba(54, 132, 139, 0.16);
    border-bottom-right-radius: 4px;
    color: var(--brand);
    font-weight: 600;
}

.capChatChannel {
    font-size: .54rem;
    font-weight: 800;
    color: var(--brand-soft);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.capChatText {
    color: inherit;
}

@media (max-width: 1024px) {
    .capCardContent {
        grid-template-columns: 1fr;
    }

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

    .capCardVisualRecord {
        min-height: auto;
    }
}

@media (max-width: 1024px) {
    .capabilitiesGrid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "featured"
            "agenda"
            "billing"
            "analytics"
            "comms";
    }
}

/* CTA "teaser pill": panel sutil centrado debajo del grid, con respiración
   amplia hacia arriba (separa del último row de cards) y hacia abajo (que
   no quede pegado a la siguiente sección). Texto eyebrow + botón con flecha. */
.capabilitiesActions {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* CTA filled-soft: relleno suave brand-pale en estado base; hover se rellena
   de brand sólido. Más cálido que outlined y menos agresivo que pill brand. */
.capabilitiesActions .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: rgba(54, 132, 139, 0.10);
    color: var(--brand-deep);
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    transition: background var(--t-base), color var(--t-base);
}

.capabilitiesActions .btn::after {
    content: "→";
    display: inline-block;
    transition: transform var(--t-base);
}

.capabilitiesActions .btn:hover {
    background: var(--brand);
    color: #fff;
}

.capabilitiesActions .btn:hover::after {
    transform: translateX(4px);
}

@media (max-width: 720px) {
    .capCardFeatured {
        padding: 24px;
    }

    .capCardFeatured h3 {
        font-size: 1.5rem;
    }

    .capCard h3 {
        font-size: 1.2rem;
    }

    .capPatientFile {
        flex-direction: column;
        gap: 4px;
    }
}

/* =============================================================
   14C. ESPECIALIDADES NUEVA (Un mismo sistema para cualquier clínica)
   ============================================================= */
.specialtiesNew {
    padding-top: 88px;
    padding-bottom: 88px;
}

/* Sobre fondo modo azul: title + subtítulo + eyebrow blancos */
.specialtiesNew.bgModoAzul .sectionTitle {
    color: #fff;
}

.specialtiesNew.bgModoAzul .sectionLead {
    color: rgba(255, 255, 255, .85);
}

.specialtiesNew.bgModoAzul .eyebrow {
    color: #fff;
}

.specialtiesNew.bgModoAzul .eyebrow::before {
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .8) 100%);
}

.specialtiesNew.bgModoAzul .eyebrow::after {
    background: linear-gradient(to right, rgba(255, 255, 255, .8) 0%, transparent 100%);
}

.specNewGrid {
    display: grid;
    /* 4 columnas: 3 cards normales + 1 hueca (la "Tu clínica…") */
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.specNewCard {
    /* Cards más verticales (~1.5x más altas que antes) */
    padding: 28px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform var(--t-base), box-shadow var(--t-base);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 460px;
    position: relative;
}

.specNewCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.specNewVisual {
    /* Visual algo más alto para acompañar la verticalidad de la card */
    height: 180px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-fade) 0%, var(--brand-mist) 100%);
}

.specNewVisualDental {
    background: url('../img/odontograma.jpg') center / cover no-repeat;
}

.specNewVisualAesthetic {
    background: url('../img/estetica.jpg') center / cover no-repeat;
}

.specNewVisualPhysio {
    background: url('../img/fisio.jpg') center / cover no-repeat;
}

/* === Card hueca (4ª): versión transparente con border dotted blanco === */
.specNewCardHollow {
    background: transparent;
    border: 2px dashed #fff;
    color: #fff;
}

.specNewCardHollow:hover {
    background: rgba(255, 255, 255, .04);
}

.specNewVisualHollow {
    background: transparent !important;
    border: 2px dashed rgba(255, 255, 255, .65);
    display: grid;
    place-items: center;
}

.specNewVisualHollow::before {
    content: "+";
    color: rgba(255, 255, 255, .75);
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
}

/* Specificity doble (.specNewCard.specNewCardHollow) para ganar a .specNewCard p */
.specNewCard.specNewCardHollow h3,
.specNewCard.specNewCardHollow p {
    color: #fff;
}

/* Spacer invisible: h3 oculto visualmente pero ocupa altura para alinear el
   resto del contenido con el de las cards hermanas (que sí tienen título). */
.specNewCardHollowSpacer {
    visibility: hidden;
    pointer-events: none;
    margin: 0;
}

/* Botón hueco al fondo de la card (estilo outline blanco) */
.btnHollow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1.5px solid #fff;
    border-radius: var(--radius-pill);
    color: #fff;
    background: transparent;
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 600;
    transition: background var(--t-base), color var(--t-base);
    text-decoration: none;
}

.btnHollow:hover {
    background: #fff;
    color: var(--brand-deep);
}

.specNewCardHollowBtn {
    margin-top: auto;
    align-self: center;
}

.specNewCard h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

.specNewCard p {
    font-size: .92rem;
    color: var(--text-soft);
    line-height: 1.55;
    flex: 1;
}

.specNewLink {
    align-self: flex-start;
    position: relative;
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand);
    padding: 2px 0;
    transition: color var(--t-base);
}

/* Subrayado animado — crece de izquierda a derecha al hacer hover sobre la card o el link.
   Altura entera (2px) + GPU compositing para evitar que el browser cambie el grosor
   visible al pasar de "animando con transform" a estado de reposo. */
.specNewLink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.specNewCard:hover .specNewLink,
.specNewLink:hover {
    color: var(--brand-deep);
}

.specNewCard:hover .specNewLink::after,
.specNewLink:hover::after {
    transform: scaleX(1);
}

/* CTA destacada al final de Especialidades — banner con fondo brand suave,
   padding generoso, texto en color brand-deep y botón primario para
   captar la atención (no es un footnote, es una llamada a la acción real). */
.specNewFooter {
    margin-top: 56px;
    padding: 48px 32px;
    background: linear-gradient(135deg, var(--brand-fade) 0%, #ffffff 100%);
    border: 1px solid var(--brand-mist);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.specNewClosing {
    max-width: 640px;
    color: var(--brand);
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 720px) {
    .specNewFooter {
        padding: 36px 22px;
        margin-top: 40px;
    }
}

@media (max-width: 1024px) {
    .specNewGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .specNewCard {
        min-height: 380px;
    }
}

@media (max-width: 720px) {
    .specNewGrid {
        grid-template-columns: 1fr;
    }

    .specNewCard {
        min-height: 0;
    }

    .specNewVisual {
        height: 140px;
    }
}


/* =============================================================
   15. JOURNEY
   ============================================================= */
.journey {
    padding: var(--section-y) 0;
}

.journeySteps {
    display: grid;
    /* 4 columnas explícitas en desktop. En tablet pasa a 2, en móvil a 1
       (ver media queries de abajo) — evita filas raras tipo 3+1. */
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    counter-reset: journey;
}

.journeyStep {
    position: relative;
    padding: 28px 24px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.journeyStep:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Conector entre pasos: chevron dentro de círculo blanco en el gap */
.journeyStep:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336848b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0, 64, 82, 0.08);
    z-index: 2;
    pointer-events: none;
}

.journeyNum {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-soft);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.journeyStep h3 {
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.journeyStep p {
    font-size: .92rem;
    color: var(--text-soft);
    line-height: 1.55;
}

/* Desde 1100px hacia abajo: no caben los 4 → 2 columnas, sin flechas */
@media (max-width: 1100px) {
    .journeySteps {
        grid-template-columns: repeat(2, 1fr);
    }

    .journeyStep:not(:last-child)::after {
        display: none;
    }
}

/* Móvil: 1 columna. Las flechas verticales se reactivan más abajo (ya existe regla) */
@media (max-width: 720px) {
    .journeySteps {
        grid-template-columns: 1fr;
    }

    /* Aquí volvemos a mostrar el chevron, ya rotado a vertical en otra media query */
    .journeyStep:not(:last-child)::after {
        display: block;
    }
}


/* =============================================================
   16. TESTIMONIOS
   ============================================================= */
.testimonials {
    padding: var(--section-y) 0;
    position: relative;
    /* No overflow:hidden — el SVG decorativo sobresale verticalmente y debe
       poder hacerlo. El body tiene overflow-x:hidden, así que el sobrancho
       horizontal nunca genera scroll lateral. */
}

.testimonialsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
}

/* Reseñas minimalistas — slider con autoplay y loop infinito */
.reviewsTicker {
    /* Pegado a los testimonios de arriba */
    margin-top: 24px;
    overflow: hidden;
}

.reviewsTrack {
    display: flex;
    gap: 20px;
    transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.reviewCard {
    flex: 0 0 calc((100% - 40px) / 3);
    padding: 14px 18px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-align: left;
}

.reviewStars {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    color: #e3a800;
    font-size: .82rem;
    letter-spacing: 1px;
}

.reviewStars .starOff {
    color: var(--line-strong);
}

.reviewCard p {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.45;
    color: var(--text-soft);
    letter-spacing: -0.005em;
}

.reviewCard footer {
    font-size: .76rem;
    font-style: normal;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.reviewCard footer span {
    color: var(--brand);
    font-weight: 500;
}

.testimonial {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
    display: flex;
    flex-direction: column;
}

.testimonial:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.testimonialVideo {
    aspect-ratio: 16/9;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.testimonialVideoAlt {
    background: linear-gradient(135deg, var(--green) 0%, var(--brand-soft) 100%);
}

.testimonialVideoAlt2 {
    background: linear-gradient(135deg, var(--warm) 0%, var(--purple) 100%);
}

.testimonialVideo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, .15) 100%);
}

.play {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--brand);
    display: grid;
    place-items: center;
    transition: transform var(--t-base), background var(--t-base);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

.testimonialVideo:hover .play {
    transform: scale(1.1);
    background: #fff;
}

.testimonial blockquote {
    flex: 1;
    margin-bottom: 18px;
    font-size: .96rem;
    line-height: 1.6;
    color: var(--text);
    quotes: """ """;
}

.testimonial blockquote::before {
    content: open-quote;
    color: var(--brand-soft);
}

.testimonial blockquote::after {
    content: close-quote;
    color: var(--brand-soft);
}

.testimonial footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.testimonial footer strong {
    display: block;
    font-size: .92rem;
    color: var(--text);
}

.testimonial footer span {
    font-size: .78rem;
    color: var(--text-muted);
}


/* =============================================================
   16B. ONBOARDING (Empezar con EviMedic no complica el ritmo)
   ============================================================= */
.onboarding {
    padding: var(--section-y) 0;
}

.onboardingShell {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 56px 48px;
}

.onboardingHeader {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.onboardingBadge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--brand);
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 16px;
}

.onboardingBadge::before,
.onboardingBadge::after {
    content: "";
    width: 90px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--brand) 100%);
}

.onboardingBadge::after {
    background: linear-gradient(to right, var(--brand) 0%, transparent 100%);
}

.onboardingSubtitle {
    margin-top: 14px;
    margin-left: auto;
    margin-right: auto;
}

.onboardingLayout {
    display: grid;
    grid-template-columns: 1.05fr .9fr;
    gap: 48px;
    align-items: start;
}

/* Carrusel infinito: solo se muestra UN step a la vez, auto-avance cada 8s
   con barra de progreso superior. Min-height reservado para el step más alto
   (todos tienen contenido similar; usamos un valor que cubre el máximo). */
.onboardingSteps {
    position: relative;
    min-height: 240px;
    padding-top: 22px;
    /* hueco para la barra de progreso */
}

/* Barra de progreso encima de los steps */
.onboardingProgress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 64, 82, 0.08);
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}

.onboardingProgressBar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brand);
    transform: translate3d(-100%, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
}

.onboardingProgressBar.is-running {
    animation: onboardingProgressFill 8s linear forwards;
}

@keyframes onboardingProgressFill {
    from {
        transform: translate3d(-100%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Navegación manual: flechas + dots */
.onboardingNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 20px;
}

.onboardingDots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.onboardingDot {
    display: block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 64, 82, 0.2);
    transition: width 300ms ease, background 300ms ease;
}

.onboardingDot.is-active {
    width: 28px;
    background: var(--brand);
}

.onboardingNavBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--brand);
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 220ms ease, background 220ms ease;
    padding: 0;
}

.onboardingNavBtn:hover {
    opacity: 1;
    background: rgba(0, 64, 82, 0.07);
}

/* Cada step ocupa la misma posición (apilados absolutos).
   Estado natural (en espera): invisible y desplazado a la derecha.
   .is-active → entra desde la derecha al centro (animación stepIn).
   .is-leaving → sale del centro hacia la izquierda (animación stepOut).
   Cuando .is-leaving se quita, el step vuelve al estado natural (derecha,
   invisible) — el salto no se ve porque opacity es 0 en ese momento. */
.onboardingStep {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

.onboardingStep.is-active {
    animation: onboardingStepIn 560ms cubic-bezier(.22, 1, .36, 1) forwards;
    pointer-events: auto;
}

.onboardingStep.is-leaving {
    animation: onboardingStepOut 560ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes onboardingStepIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes onboardingStepOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* Variante "back" — al pulsar la flecha izquierda invertimos el sentido:
   el step que sale se va por la derecha, el nuevo entra desde la izquierda. */
[data-onboarding-carousel][data-direction="back"] .onboardingStep.is-active {
    animation: onboardingStepInBack 560ms cubic-bezier(.22, 1, .36, 1) forwards;
}

[data-onboarding-carousel][data-direction="back"] .onboardingStep.is-leaving {
    animation: onboardingStepOutBack 560ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes onboardingStepInBack {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes onboardingStepOutBack {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.onboardingStepNum {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--brand-soft);
    line-height: 1;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.onboardingStepContent h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 10px;
    line-height: 1.25;
}

.onboardingStepContent p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-soft);
}

/* Visual decorativo a la derecha — ahora con video de fondo ocupando toda
   la tarjeta, badge "Onboarding guiado" flotando encima. */
.onboardingVisual {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(244, 248, 248, .9) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 320px;
}

.onboardingVisualBadge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 12px;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    z-index: 2;
}

.onboardingVisualPanel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}

/* Video onboarding — ocupa toda la tarjeta con un padding interno suave
   (inset: 14px) para que no toque los bordes de la card. */
.onboardingVisualVideo {
    position: absolute;
    inset: 14px;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    z-index: 0;
}

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

.onboardingVisualLine {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e1ebec 0%, #f1f6f6 100%);
}

.onboardingVisualLineStrong {
    background: linear-gradient(90deg, var(--brand-soft) 0%, var(--brand-mist) 100%);
    width: 60%;
}

.onboardingVisualLineShort {
    width: 75%;
}

.onboardingVisualCards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.onboardingVisualCards span {
    padding: 6px 12px;
    background: var(--brand-fade);
    color: var(--brand);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.onboardingVisualOrbit {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    border: 1px dashed var(--brand-mist);
    border-radius: 50%;
    z-index: 0;
}

@media (max-width: 1024px) {
    .onboardingLayout {
        grid-template-columns: 1fr;
    }

    .onboardingShell {
        padding: 40px 28px;
    }
}

@media (max-width: 720px) {
    .onboardingShell {
        padding: 32px 20px;
    }

    .onboardingStep {
        grid-template-columns: 44px 1fr;
        padding: 18px;
    }

    .onboardingStepNum {
        font-size: 1.3rem;
    }
}


/* =============================================================
   17. FAQ
   ============================================================= */
.faq {
    padding: var(--section-y) 0;
    position: relative;
    /* Igual que testimonios: sin overflow:hidden para que el SVG decorativo
       pueda sobresalir verticalmente sin verse cortado. */
}

/* Estilo nuevo: lista editorial, separadores horizontales finos, sin cards.
   Más limpio y respira mejor con el resto del sitio. */
.faqList {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    border-top: 1px solid var(--line);
}

.faqItem {
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    transition: background var(--t-base);
}

.faqItem:hover {
    background: rgba(54, 132, 139, .03);
}

.faqItem[open] {
    background: rgba(54, 132, 139, .04);
}

.faqItem summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 6px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    cursor: pointer;
    transition: color var(--t-base);
}

.faqItem:hover summary {
    color: var(--brand);
}

.faqItem[open] summary {
    color: var(--brand);
}

/* Icono +/× con líneas finas (estilo más minimalista).
   El + perpendicular exacto se ve duro por pixel snapping. Forzamos GPU
   compositing con will-change + un micro-rotate (0.001deg) para que SIEMPRE
   se renderice con sub-pixel anti-aliasing — igual que durante la animación. */
.faqIcon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transform: rotate(0.001deg);
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 320ms cubic-bezier(.5, 0, .2, 1);
}

.faqIcon::before,
.faqIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    will-change: transform;
    backface-visibility: hidden;
}

.faqIcon::before {
    width: 14px;
    height: 1.5px;
}

.faqIcon::after {
    width: 1.5px;
    height: 14px;
}

/* La rotación se ata a .is-open (no [open]) para que el JS la pueda quitar
   AL INICIO del cierre — así el giro de la cruz acompaña la animación
   de cierre, en lugar de revertirse al final cuando termina la altura. */
.faqItem.is-open .faqIcon {
    transform: rotate(135deg);
    opacity: 1;
}

.faqAnswer {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        height 320ms cubic-bezier(.33, 1, .68, 1),
        opacity 240ms ease;
}

.faqAnswer>p {
    color: var(--text-soft);
    line-height: 1.7;
    font-size: .96rem;
    padding: 0 6px 24px;
    max-width: 760px;
}

.faqItem[open] .faqAnswer {
    height: auto;
    opacity: 1;
}


/* =============================================================
   18. CTA FINAL
   ============================================================= */
/* Full-bleed: el fondo azul se extiende de borde a borde del viewport.
   Compensa el padding lateral del <main> con calc(50% - 50vw) y reabre con
   padding contenedor para el texto. */
/* === FONDO MODO AZUL ===
   Clase utilitaria para secciones full-bleed con imagen parallax + overlay azul.
   Se aplica a `.cta`, `.specialtiesNew`, etc. Combina: imagen fija al viewport,
   overlay translúcido para legibilidad del texto blanco, márgenes negativos
   para extender el fondo a todo el ancho del viewport. */
.bgModoAzul {
    background-image: url('../img/parallax.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
}

.bgModoAzul::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 61, 79, .35);
    pointer-events: none;
    z-index: 0;
}

.bgModoAzul>* {
    position: relative;
    z-index: 1;
}

.cta {
    padding-top: 88px;
    padding-bottom: 88px;
}

.ctaCard {
    padding: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    box-shadow: none;
    position: relative;
}

/* Badge sobre el título del CTA: "Menos caos. Más control" — sin pill, líneas a los lados */
.ctaBadge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
}

.ctaBadge::before,
.ctaBadge::after {
    content: "";
    width: 90px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .8) 100%);
}

.ctaBadge::after {
    background: linear-gradient(to right, rgba(255, 255, 255, .8) 0%, transparent 100%);
}

/* Closing badge bajo los tabs: "Para que tu clínica..." */
.featuresClosing {
    margin-top: 12px;
    text-align: center;
}

.featuresClosingBadge {
    display: inline-block;
    max-width: 720px;
    color: var(--brand);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Footer de la sección IA: badge + botón "Saber más" */
.aiFooter {
    margin-top: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.aiFooterBadge {
    display: inline-block;
    /* Reservamos un alto mínimo para que la caja no colapse vacía durante el typing */
    min-height: 1.5em;
    text-align: center;
    max-width: 640px;
    color: var(--brand);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Cursor "_" parpadeante mientras el JS está animando el texto (efecto typing) */
.aiFooterBadge.isTyping::after {
    content: "_";
    margin-left: 2px;
    color: currentColor;
    animation: aiFooterCursorBlink 1s step-end infinite;
}

@keyframes aiFooterCursorBlink {
    50% {
        opacity: 0;
    }
}

/* (overlay y z-index ahora vienen de la clase utilitaria .bgModoAzul) */

.ctaCard>* {
    position: relative;
    z-index: 1;
}

.ctaCard h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    text-wrap: balance;
}

.ctaCard>p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .82);
    max-width: 520px;
    margin: 0 auto 30px;
}

.ctaActions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ctaContact {
    font-size: .9rem;
    color: rgba(255, 255, 255, .7);
}

.ctaContact a {
    color: #fff;
    font-weight: 600;
    border-bottom: 1px dashed rgba(255, 255, 255, .5);
}


/* =============================================================
   19. FOOTER
   ============================================================= */
.footer {
    padding: 64px 0 28px;
    background:
        linear-gradient(rgba(0, 61, 79, .35), rgba(0, 61, 79, .35)),
        url('../img/parallax.webp') center center / cover no-repeat fixed;
    color: rgba(255, 255, 255, .75);
}

.footerGrid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr) auto;
    gap: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    align-items: start;
}

.footerLogo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.footerLogo img {
    width: 120px;
    height: auto;
    opacity: .95;
}

.footerBrand strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.footerBrand p {
    font-size: .9rem;
    line-height: 1.6;
}

.footerCol h4 {
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
}

.footerCol a {
    display: block;
    padding: 4px 0;
    font-size: .9rem;
    transition: color var(--t-fast);
}

.footerCol a:hover {
    color: var(--brand-mist);
}

.footerBottom {
    padding-top: 24px;
    text-align: center;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}


/* =============================================================
   20. ANIMACIONES + REVEAL ON SCROLL
   ============================================================= */
/* Reveal global — cubic-bezier ease-out-expo + blur sutil (emil + high-end). */
.revealOnScroll {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
    transition:
        opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.revealOnScroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Stagger automático en grids comunes — items consecutivos cascada. */
.capabilitiesGrid > .revealOnScroll:nth-child(1) { transition-delay: 0ms; }
.capabilitiesGrid > .revealOnScroll:nth-child(2) { transition-delay: 70ms; }
.capabilitiesGrid > .revealOnScroll:nth-child(3) { transition-delay: 140ms; }
.capabilitiesGrid > .revealOnScroll:nth-child(4) { transition-delay: 210ms; }
.capabilitiesGrid > .revealOnScroll:nth-child(5) { transition-delay: 280ms; }
.capabilitiesGrid > .revealOnScroll:nth-child(6) { transition-delay: 350ms; }

.specNewGrid > .revealOnScroll:nth-child(1) { transition-delay: 0ms; }
.specNewGrid > .revealOnScroll:nth-child(2) { transition-delay: 80ms; }
.specNewGrid > .revealOnScroll:nth-child(3) { transition-delay: 160ms; }
.specNewGrid > .revealOnScroll:nth-child(4) { transition-delay: 240ms; }

.testimonialsGrid > .revealOnScroll:nth-child(1) { transition-delay: 0ms; }
.testimonialsGrid > .revealOnScroll:nth-child(2) { transition-delay: 100ms; }
.testimonialsGrid > .revealOnScroll:nth-child(3) { transition-delay: 200ms; }

.tabsNav .tabsBtn { transition: color 240ms cubic-bezier(0.23, 1, 0.32, 1); }

@media (prefers-reduced-motion: reduce) {
    .revealOnScroll,
    .revealOnScroll.is-visible {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.85);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .revealOnScroll {
        opacity: 1;
        transform: none;
    }

    .mockup {
        opacity: 1;
        transform: none;
    }
}


/* =============================================================
   21. RESPONSIVE
   ============================================================= */
/* Entre 1025-1159px el nav puede no caber: scroll horizontal solo del nav */
@media (min-width: 1025px) and (max-width: 1159px) {
    .nav {
        flex: 1 1 0;
        /* toma el espacio sobrante en el flex del header */
        min-width: 0;
        /* permite encoger por debajo del contenido */
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .navLink {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Resto de hijos del header NO encogen */
    .brand,
    .headerActions {
        flex-shrink: 0;
    }

    /* Logo: altura fija (aspect-ratio se mantiene) */
    .brandLogo {
        width: auto;
        height: 38px;
        aspect-ratio: 1859 / 2075;
        flex-shrink: 0;
    }
}

/* CTAs dentro del nav móvil — solo se muestran en pantallas muy estrechas */
.navCtaPrimary,
.navCtaSecondary {
    display: none;
}

@media (max-width: 519px) {

    /* "Acceso" (btnLink) sí se oculta en pantallas muy estrechas — pasa al menú.
       "Solicitar demo" (btn.btnPrimary) SIEMPRE visible en el header. */
    .headerActions .btnLink {
        display: none;
    }

    /* CTA del header en móvil: padding más compacto para que quepa */
    .headerActions .btn.btnPrimary {
        padding: 8px 14px;
        font-size: .88rem;
    }

    /* El CTA duplicado en el dropdown ya no hace falta — el del header está visible */
    .navCtaPrimary,
    .navCtaSecondary {
        display: none;
    }
}

@media (max-width: 1024px) {
    .navToggle {
        display: flex;
        margin-left: 6px;
    }

    .headerActions {
        margin-left: auto;
        margin-right: 10px;
    }

    /* Nav móvil con animación de entrada suave */
    .nav {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 14px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 240ms ease,
            transform 280ms cubic-bezier(.4, 0, .2, 1),
            visibility 0s 240ms;
    }

    .nav.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 240ms ease,
            transform 280ms cubic-bezier(.4, 0, .2, 1);
    }

    .nav .navLink {
        width: 100%;
        padding: 12px 14px;
        margin: 0;
        border-radius: var(--radius-sm);
        text-align: left;
    }

    /* En móvil: línea hover/active estilo discreto que no aparece al revés */
    .nav .navLink::after {
        left: 14px;
        bottom: 8px;
        transform: none;
    }

    .nav .navLink:hover::after,
    .nav .navLink.is-active::after {
        width: 24px;
    }

    .navToggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .navToggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .navToggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Logo: tope claro de altura para que NO se aplaste en bordes */
    .brand {
        flex-shrink: 0;
        min-width: 0;
    }

    .brandLogo {
        height: 38px;
        width: auto;
        aspect-ratio: 1859 / 2075;
        max-width: none;
        object-fit: contain;
    }

    .brandText {
        display: none;
    }

    /* Header con padding lateral propio para que nada toque el borde */
    .header .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mockupBody {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .mockupSidebar {
        display: none;
    }

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

    .mockupToolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .reviewCard {
        flex-basis: calc((100% - 24px) / 2);
    }

    /* Showcase trust algo más alto en tablet */
    .trustShowcase {
        min-height: 420px;
    }


    .tabPanel {
        grid-template-columns: 1fr;
        gap: 12px;
        /* Altura fija también en tablet/móvil para que el closing badge
           NO baile al cambiar de pestaña (cada mockup tiene altura distinta). */
        min-height: 640px;
    }
}

@media (max-width: 720px) {
    :root {
        --section-y: 56px;
    }

    .hero {
        padding: 56px 0 32px;
    }

    .heroTitle {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    /* Pills: en columna, ancho uniforme, centradas */
    .heroPillars {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .heroPillars li {
        flex: 0 0 auto;
        width: min(280px, 100%);
        text-align: center;
        font-size: .82rem;
        padding: 9px 16px;
    }

    .mockupHeadSimple {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mSearch {
        width: 100%;
    }

    .reviewCard {
        flex-basis: 100%;
    }

    /* En 1 columna, el conector va abajo y el chevron rota 90° */
    .journeyStep:not(:last-child)::after {
        top: auto;
        bottom: -32px;
        right: 50%;
        transform: translateX(50%) rotate(90deg);
    }

}

/* Tabs versión iconos: hasta 749px de ancho (en cuanto la pantalla aprieta) */
@media (max-width: 749px) {
    .tabsNav {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        max-width: none;
        margin-bottom: 16px;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 2px 8px rgba(0, 64, 82, .06);
        overflow: visible;
    }

    .tabsBtn {
        flex: 1;
        min-width: 0;
        padding: 12px 6px;
        border-radius: 12px;
        background: transparent;
        border: none;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
    }

    .tabsBtn .tabsLabel {
        display: none;
    }

    .tabsBtn .tabsIcon {
        display: block;
        width: 22px;
        height: 22px;
    }

    /* En móvil el botón activo NO pinta su propio fondo: lo aporta el indicador
       deslizante (que se anima entre botones). Solo cambia el color del icono. */
    .tabsBtn.is-active {
        color: #fff;
    }

    /* Indicador visible también en móvil — encaja con la altura del botón
       (top: 6px / height: calc(100% - 12px) coincide con el padding del .tabsNav) */
    .tabsIndicator {
        display: block;
        top: 6px;
        height: calc(100% - 12px);
        border-radius: 12px;
    }
}

/* Título de la tab visible solo en móvil — vive dentro del panel y hereda su animación */
.tabPanelMobileTitle {
    display: none;
}

@media (max-width: 749px) {
    .tabPanelMobileTitle {
        display: block;
        margin: 26px 0 14px;
        font-family: var(--font-heading);
        font-size: 1.85rem;
        font-weight: 800;
        line-height: 1.15;
        color: var(--brand);
        letter-spacing: -0.02em;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .footerGrid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    /* En móvil background-attachment: fixed da problemas (iOS lo ignora,
       Android puede pixelar). Pasamos a scroll normal en TODAS las
       secciones con .bgModoAzul. */
    .bgModoAzul {
        background-attachment: scroll;
    }

    .cta {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .specialtiesNew {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .ctaCard {
        padding: 0;
    }
}

@media (max-width: 460px) {
    .footerGrid {
        grid-template-columns: 1fr;
    }

    .brandCopy small {
        display: none;
    }

    .brandLogo {
        height: 44px;
    }


    /* Botones del hero: verticales, ancho uniforme, centrados */
    .heroActions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .heroActions .btn {
        flex: 0 0 auto;
        width: min(280px, 100%);
        justify-content: center;
    }
}

/* ============================================
   PÁGINAS LEGALES (Política de privacidad, Aviso legal, Cookies)
   ============================================ */
.legalSection {
    padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 8vw, 96px);
}

.legalContainer {
    max-width: 820px;
    margin: 0 auto;
    min-width: 0;
}

/* Layout 2 columnas: sidebar índice + contenido legal centrado */
.legalLayout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.legalHeader {
    margin-bottom: 56px;
    text-align: left;
}

.legalHeader .eyebrow {
    display: inline-block;
    margin-bottom: 12px;
}

.legalHeader h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--brand-deep);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.legalLead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 16px;
    max-width: 720px;
}

.legalMeta {
    font-size: 0.9rem;
    color: var(--text-soft);
    margin: 0;
    letter-spacing: 0.02em;
}

.legalBody {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

.legalBody h2 {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--brand);
    margin: 56px 0 24px;
    letter-spacing: -0.01em;
}

.legalBody h2:first-child {
    margin-top: 0;
}

.legalBody h3 {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand);
    margin: 40px 0 14px;
    letter-spacing: -0.005em;
}

.legalBody p {
    margin: 0 0 16px;
}

.legalBody ul,
.legalBody ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.legalBody ul li,
.legalBody ol li {
    margin-bottom: 8px;
}

.legalBody strong {
    color: var(--brand-deep);
    font-weight: 700;
}

.legalBody a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-base);
}

.legalBody a:hover {
    color: var(--brand-deep);
}

@media (max-width: 720px) {
    .legalSection {
        padding: 48px 0 40px;
    }

    .legalHeader {
        margin-bottom: 36px;
    }

    .legalBody h2 {
        font-size: 1.9rem;
        margin-top: 40px;
    }

    .legalBody h3 {
        font-size: 1.4rem;
        margin-top: 28px;
    }
}

/* Índice numerado simple en cabecera legal */
.legalIndex {
    margin: 18px 0 0;
    padding-left: 22px;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text);
}

.legalIndex li {
    margin: 0;
}

.legalIndex a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-base);
}

.legalIndex a:hover {
    color: var(--brand-deep);
}

/* Fecha de actualización al final del aviso legal: línea fina a la izquierda
   que llega hasta el texto de la fecha alineado a la derecha */
.legalUpdated {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    font-size: 0.9rem;
    color: var(--text-soft);
    letter-spacing: 0.02em;
    font-style: italic;
}

.legalUpdated::before {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Sub-numeración finalidades (h4 dentro de h3) */
.legalBody h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand);
    margin: 28px 0 12px;
}

/* Separación entre las 2 secciones (aviso legal + privacidad) */
.legalBody#politica-privacidad {
    margin-top: 48px;
}

/* ============================================
   SIDEBAR LEGAL — índice sticky en columna grid izquierda
   ============================================ */
.legalSection {
    position: relative;
}

.legalSidebar {
    position: sticky;
    /* top coincide con la posición inicial del sidebar (alto del header
       sticky 72px + padding-top de .legalSection 56px). Sin viaje inicial
       — se queda fijo desde el primer pixel de scroll. */
    top: 128px;
    align-self: start;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    /* Scrollbar discreto */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 64, 82, 0.2) transparent;
}

.legalSidebar::-webkit-scrollbar {
    width: 6px;
}

.legalSidebar::-webkit-scrollbar-track {
    background: transparent;
}

.legalSidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 64, 82, 0.2);
    border-radius: 3px;
}

.legalSidebarNav {
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    line-height: 1.4;
}

.legalSidebarGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legalSidebarTitle {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--brand-deep);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    letter-spacing: -0.005em;
    transition: color var(--t-base);
}

.legalSidebarTitle:hover {
    color: var(--brand);
}

.legalSidebarGroup ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legalSidebarGroup li a {
    display: block;
    padding: 5px 10px;
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 500;
    border-left: 2px solid transparent;
    margin-left: -10px;
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
    border-radius: 0 4px 4px 0;
}

.legalSidebarGroup li a:hover {
    color: var(--brand);
    border-left-color: var(--brand);
    background: rgba(0, 64, 82, 0.04);
}

/* Estado activo: sección actual donde está el scroll */
.legalSidebarGroup li a.is-active {
    color: var(--brand-deep);
    font-weight: 800;
    border-left-color: var(--brand);
    background: rgba(0, 64, 82, 0.06);
}

.legalSidebarTitle.is-active {
    color: var(--brand);
}

/* Scroll suave para clicks en anchors, con offset por sticky header */
html {
    scroll-behavior: smooth;
}

.legalBody h2,
.legalBody h3 {
    scroll-margin-top: 80px;
}

/* Oculto en pantallas estrechas — móvil + tablet */
@media (max-width: 1024px) {
    .legalLayout {
        grid-template-columns: 1fr;
    }

    .legalSidebar {
        display: none;
    }
}
/* ============================================================
   PÁGINA CONTACTO — formulario simple solicitar demo
   ============================================================ */
.contactoSection {
    padding: 130px 0 90px;
}

.contactoLayout {
    max-width: 620px;
    margin: 0 auto;
}

/* ============================================================
   CONTACTO CARD — página fondo blanco normal del proyecto.
   Card alrededor del form con fondo rotatorio (crossfade) dentro.
   ============================================================ */

/* Aliases vars de funcionalidades.css para que aplique fuera de #top
   (en funcionalidades.css se scopan a #top, que en contacto solo hace match
   al header). Asegura que el carrusel quickNav hereda colores brand. */
.body--contacto-card {
    --color-primary: var(--brand);
    --color-primary-dark: #003f50;
    --color-primary-soft: #36848b;
    --color-sky: #b9d2d4;
    --color-ink: var(--text);
    --color-text: var(--text);
    --color-text-soft: var(--text-soft);
    --color-surface: #ffffff;
    --color-surface-alt: #f4f8f8;
    --color-border: rgba(0, 85, 109, 0.12);
    --color-border-strong: rgba(0, 85, 109, 0.18);
}

/* Main scope contacto: position relative + overflow hidden para contener bg. */
.body--contacto-card main {
    position: relative;
    overflow: hidden;
}

/* Header transparent al cargar; on scroll añade backdrop blur (sin tinte). */
.body--contacto-card .header {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.body--contacto-card .header.is-scrolled {
    background: transparent !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Header en zona clara (wave / #f3f3f3 / footer) — estilo clásico del resto web. */
.body--contacto-card .header.is-light {
    background: rgba(251, 253, 253, 0.78) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: var(--shadow-sm) !important;
}

.body--contacto-card .header.is-light .navLink,
.body--contacto-card .header.is-light .btnLink,
.body--contacto-card .header.is-light .langSwitchBtn {
    color: var(--text-soft);
}

.body--contacto-card .header.is-light .navLink:hover,
.body--contacto-card .header.is-light .btnLink:hover,
.body--contacto-card .header.is-light .langSwitchBtn:hover {
    color: var(--brand);
}

.body--contacto-card .header.is-light .navLink::after {
    background: var(--brand);
}

.body--contacto-card .header.is-light .navToggle span {
    background: var(--brand);
}

/* Logo header en zona clara → versión normal del proyecto. */
.body--contacto-card .header.is-light .brandLogo {
    content: url("../img/logo_horizontal.webp");
}

/* Header z-index alto sobre el bg main. */
.body--contacto-card .header {
    z-index: 200;
}

/* Nav links blancos sobre bg azul. */
.body--contacto-card .navLink,
.body--contacto-card .btnLink,
.body--contacto-card .langSwitchBtn {
    color: rgba(255, 255, 255, 0.85);
}

.body--contacto-card .navLink:hover,
.body--contacto-card .btnLink:hover,
.body--contacto-card .langSwitchBtn:hover {
    color: #fff;
}

.body--contacto-card .navLink::after {
    background: #fff;
}

.body--contacto-card .navToggle span {
    background: #fff;
}

/* Logo header → versión inversa blanca. */
.body--contacto-card .brandLogo {
    content: url("../img/logo_horizontal_inv_new.webp");
}

@media (max-width: 1159px) {
    .body--contacto-card .brand picture source { display: none; }
    .body--contacto-card .brandLogo {
        content: url("../img/logo_horizontal_inv_new.webp");
    }
}

/* CTA "Solicitar demo" oculto en contacto (ya estás en el form). */
.body--contacto-card .header .btnPrimary,
.body--contacto-card .header .navCtaPrimary {
    display: none !important;
}

/* Bg extendido full viewport detrás del header transparent.
   Footer tapa la parte inferior con su propio bg. */
.contactoMainBg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #001a22;
}

.contactoMainBg .contactoBgImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 4000ms cubic-bezier(0.4, 0, 0.6, 1);
    display: block;
}

.contactoMainBg .contactoBgImg.is-active {
    opacity: 1;
}

.contactoMainBg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 36, 48, 0.4) 0%, rgba(0, 36, 48, 0.55) 100%);
}

/* Section por encima del bg. Min-height viewport con form centrado vertical
   entre header y flechita; altura form variable se acomoda. */
.contactoSection--card {
    position: relative;
    z-index: 1;
    padding: clamp(70px, 7vw, 90px) 0 clamp(100px, 10vw, 140px);
    min-height: calc(100dvh - 72px);
    display: flex;
    align-items: center;
}

/* Pantallas ≤1080px alto: form más cerca header + menos espacio bajo submit. */
@media (max-height: 1080px) {
    .contactoSection--card {
        padding-top: 20px;
        padding-bottom: 30px;
        align-items: flex-start;
    }
}

/* Scroll hint — flecha centrada antes del footer. Default chevron-down;
   rota 180° (arriba) cuando footer entra viewport via JS class `is-up`. */
.body--contacto-card .contactoScrollHint {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    margin-top: -30px;
    margin-bottom: 45px;
}

.body--contacto-card .contactoScrollHint svg {
    transition: transform 360ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-card .contactoScrollHint.is-up svg {
    transform: rotate(180deg);
}

/* Olas — 3 capas wavestop_new como bg loopeando horizontal a ritmos distintos. */
.body--contacto-card .contactoWave {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 180px;
    overflow: hidden;
    pointer-events: none;
}

.body--contacto-card .contactoWave__layer {
    position: absolute;
    inset: 0;
    background-image: url("../img/wavestop_new.webp");
    background-repeat: repeat-x;
    background-size: 100vw auto;
    background-position: 0 bottom;
    will-change: background-position;
}

.body--contacto-card .contactoWave__layer--3 {
    opacity: 0.7;
    background-position: 25vw bottom;
}

/* Section tras las olas — fondo noisewp con tinte gris. */
.body--contacto-card .contactoLinks {
    position: relative;
    z-index: 1;
    background: #f3f3f3;
    padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
    margin-top: -1px;
    color: var(--text);
}

/* ===== ANIMACIONES SCOPE CONTACTO ===== */

/* Scroll-reveal: heavy fade-up + blur (high-end + emil ease-out exponencial). */
.body--contacto-card [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
    transition:
        opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 820ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.body--contacto-card [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* FAQ list: wrapper sin fade propio, solo es trigger para cascada hijos. */
.body--contacto-card .faqList[data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}

/* FAQ items aparecen en cascada CUANDO el wrapper (.faqList) entra viewport.
   Así no esperan a scroll hasta el final. */
.body--contacto-card .faqList .faqItem {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition:
        opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.body--contacto-card .faqList.is-revealed .faqItem {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(1) { transition-delay: 0ms; }
.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(2) { transition-delay: 60ms; }
.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(3) { transition-delay: 120ms; }
.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(4) { transition-delay: 180ms; }
.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(5) { transition-delay: 240ms; }
.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(6) { transition-delay: 300ms; }
.body--contacto-card .faqList.is-revealed .faqItem:nth-of-type(7) { transition-delay: 360ms; }

/* FAQ chevron rotate animation (emil cubic-bezier custom). */
.body--contacto-card .faqItem summary {
    transition: color 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-card .faqIcon {
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

.body--contacto-card .faqItem[open] .faqIcon {
    transform: rotate(180deg);
}

/* FAQ answer slide smooth (cubic-bezier exponencial). */
.body--contacto-card .faqAnswer {
    overflow: hidden;
}

.body--contacto-card .faqItem[open] .faqAnswer {
    animation: faqAnswerIn 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes faqAnswerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card form sin tilt — hover removed (causaba escalado raro). */

/* Magnetic hover sutil sobre quickNav items (emil scale-on-active ya en funcionalidades.css). */
.body--contacto-card .quickNavBtn {
    transition:
        transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.body--contacto-card .quickNavBtn:active {
    transform: scale(0.97);
    transition: transform 110ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Phone menu items stagger entry al abrir. */
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li button {
    animation: phoneItemIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(1) button  { animation-delay: 30ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(2) button  { animation-delay: 50ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(3) button  { animation-delay: 70ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(4) button  { animation-delay: 90ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(5) button  { animation-delay: 110ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(6) button  { animation-delay: 130ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(7) button  { animation-delay: 150ms; }
.contactoFormCard .phoneInput.is-open .phonePrefixMenu li:nth-child(8) button  { animation-delay: 170ms; }

@keyframes phoneItemIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Help text underline grow-on-hover (emil). */
.contactoFormCard .contactoHelp a {
    position: relative;
}

.contactoFormCard .contactoHelp a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: #fff;
    transform: scaleX(1);
    transform-origin: right center;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.contactoFormCard .contactoHelp a:hover {
    text-decoration: none;
}

.contactoFormCard .contactoHelp a:hover::after {
    transform: scaleX(0);
    transform-origin: left center;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .body--contacto-card [data-reveal],
    .body--contacto-card [data-reveal].is-revealed,
    .body--contacto-card .faqItem[open] .faqAnswer,
    .contactoFormCard .phoneInput.is-open .phonePrefixMenu li button {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
        transition: none;
    }
}

/* FAQ scope contacto — bg #f3f3f3 sólido continuidad. */
.body--contacto-card .faq {
    position: relative;
    z-index: 1;
    background: #f3f3f3;
}

@media (max-width: 720px) {
    .body--contacto-card .faq .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Título carrusel — color brand (en funcionalidades hereda de #top scope). */
.body--contacto-card .quickNavBlock h2 {
    color: var(--brand);
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.body--contacto-card .contactoLinks__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand);
    text-align: center;
}

.body--contacto-card .contactoLinks__lead {
    margin-top: 10px;
    color: var(--text-soft);
    text-align: center;
    font-size: 1rem;
}

.body--contacto-card .contactoLinks__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 36px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.body--contacto-card .contactoLinkCard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 56px 20px 22px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--text);
    transition:
        transform 320ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1),
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-card .contactoLinkCard:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 85, 109, 0.28);
    box-shadow: 0 18px 36px -16px rgba(0, 61, 79, 0.22);
}

.body--contacto-card .contactoLinkCard__label {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--brand);
}

.body--contacto-card .contactoLinkCard__desc {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.4;
}

.body--contacto-card .contactoLinkCard__arrow {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 85, 109, 0.08);
    border: 1px solid rgba(0, 85, 109, 0.12);
    color: var(--brand);
    font-size: 1rem;
    transition:
        transform 320ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-card .contactoLinkCard:hover .contactoLinkCard__arrow {
    transform: translateY(-50%) translate(3px, -2px);
    background: rgba(0, 85, 109, 0.16);
}

/* Footer bg #f3f3f3 sólido — texto brand. */
.body--contacto-card .footer {
    background: #f3f3f3 !important;
    border-top: 0;
    color: var(--text-soft) !important;
}

.body--contacto-card .footer * {
    color: inherit !important;
}

.body--contacto-card .footer h4 {
    color: var(--text) !important;
}

.body--contacto-card .footer a {
    color: var(--text-soft) !important;
    transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-card .footer a:hover {
    color: var(--brand) !important;
}

.body--contacto-card .footer .brandCopy strong {
    color: var(--brand) !important;
}

/* Logo footer → logo.webp (versión normal sobre fondo claro). */
.body--contacto-card .footerLogo img {
    content: url("../img/logo.webp");
}

/* Scroll hint bob — subtle infinite up/down indicando que hay más abajo. */
.body--contacto-card .contactoScrollHint svg {
    animation: contactoHintBob 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.body--contacto-card .contactoScrollHint.is-up svg {
    animation: none;
}

@keyframes contactoHintBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .body--contacto-card .contactoScrollHint svg {
        animation: none;
    }
}

/* FAQ sectionHead title enhanced reveal. */
.body--contacto-card .faq .sectionHead[data-reveal] h2 {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.body--contacto-card .faq .sectionHead[data-reveal].is-revealed h2 {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: footer centrado completo. */
@media (max-width: 720px) {
    .body--contacto-card .footerGrid {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        gap: 32px;
    }

    .body--contacto-card .footerBrand,
    .body--contacto-card .footerCol {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .body--contacto-card .footerCol a {
        text-align: center;
    }

    .body--contacto-card .footerLogo {
        justify-self: center;
    }

    .body--contacto-card .footerBottom {
        text-align: center;
    }

    /* Logo header más grande en móvil (no enano). */
    .body--contacto-card .brandLogo {
        height: 56px;
    }

    /* Sin padding horizontal en form y footer (full-bleed móvil). */
    .body--contacto-card .contactoFormCard .contactoForm {
        padding-left: 0;
        padding-right: 0;
    }

    .body--contacto-card .footer .container {
        padding-left: 0;
        padding-right: 0;
    }
}

.contactoCardLayout {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Card form transparent — bg extendido a main, card solo contenedor visual. */
.contactoFormCard {
    position: relative;
    border-radius: 28px;
    isolation: isolate;
}

/* Intro DENTRO del card, texto blanco sobre bg rotatorio. */
.contactoFormCard .contactoIntro {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 44px 32px 0;
    margin-bottom: 0;
}

.contactoFormCard .contactoTitle {
    color: #fff;
    margin-top: 0;
    text-shadow: 0 2px 24px rgba(0, 30, 40, 0.4);
}

.contactoFormCard .contactoLead {
    color: rgba(255, 255, 255, 0.82);
    margin-top: 14px;
    text-shadow: 0 1px 12px rgba(0, 30, 40, 0.3);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.contactoFormCard__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #001a22;
    overflow: hidden;
}

.contactoFormCard__bg .contactoBgImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 5000ms cubic-bezier(0.4, 0, 0.6, 1);
    display: block;
}

.contactoFormCard__bg .contactoBgImg.is-active {
    opacity: 1;
}

.contactoFormCard__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 36, 48, 0.45) 0%, rgba(0, 36, 48, 0.55) 100%);
    z-index: 1;
}

/* Form dentro de la card: transparent + padding generoso. */
.contactoFormCard .contactoForm {
    position: relative;
    z-index: 2;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 28px 40px 40px;
    gap: 14px;
}

/* Labels — todos en mayúscula pura, tracked. */
.contactoFormCard .contactoField label,
.contactoFormCard .contactoLabel {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Rows: 2 columnas desktop/tablet, stack mobile. */
.contactoFormCard .contactoRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .contactoFormCard .contactoRow {
        grid-template-columns: 1fr;
    }
}

/* Help text bajo textarea — subrayado, color brand suave. */
.contactoFormCard .contactoHelp {
    margin-top: -4px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.contactoFormCard .contactoHelp a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 600;
    transition: color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .contactoHelp a:hover {
    color: rgba(255, 255, 255, 0.78);
}

/* Submit wrapper centra el botón al 80% ancho. */
.contactoFormCard .contactoSubmitWrap {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.contactoFormCard .contactoSubmit {
    width: 80%;
}

.contactoFormCard .contactoField input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    transition:
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .contactoField input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contactoFormCard .contactoField input:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
}

.contactoFormCard .contactoField input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.contactoFormCard .contactoField input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0, 36, 48, 0.5) inset;
    caret-color: #fff;
}

/* Select glass coherente con inputs. */
.contactoFormCard .contactoField select {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: #fff;
    padding: 14px 40px 14px 16px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    cursor: pointer;
    transition:
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        background-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .contactoField select:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.38);
    background-color: rgba(255, 255, 255, 0.14);
}

.contactoFormCard .contactoField select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.contactoFormCard .contactoField select option {
    background: #002430;
    color: #fff;
}

/* Textarea glass. */
.contactoFormCard .contactoField textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    resize: vertical;
    min-height: 90px;
    transition:
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .contactoField textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contactoFormCard .contactoField textarea:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
}

.contactoFormCard .contactoField textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

/* Label span (no for input) — mismo estilo. */
.contactoFormCard .contactoLabel {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 7px;
    display: block;
}

/* Radios — chips pill seleccionable. */
.contactoFormCard .contactoRadios {
    display: flex;
    gap: 8px;
}

.contactoFormCard .contactoRadio {
    flex: 1;
    cursor: pointer;
    user-select: none;
}

.contactoFormCard .contactoRadio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contactoFormCard .contactoRadio span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 500;
    transition:
        background 200ms cubic-bezier(0.23, 1, 0.32, 1),
        border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
        color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .contactoRadio:hover span {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
}

.contactoFormCard .contactoRadio input:checked + span {
    background: #fff;
    border-color: #fff;
    color: var(--brand);
    font-weight: 700;
}

.contactoFormCard .contactoRadio input:focus-visible + span {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

/* Field condicional "Otros" — animación al expandir. */
.contactoFormCard .contactoField--otros[hidden] {
    display: none;
}

/* Submit pill blanco texto brand. */
/* Submit pill blanco texto brand. */
.contactoFormCard .contactoSubmit {
    margin-top: 4px;
    width: 80%;
    background: #fff;
    color: var(--brand);
    transition:
        transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 360ms cubic-bezier(0.32, 0.72, 0, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 640px) {
    .contactoFormCard .contactoSubmit {
        width: 100%;
    }
}

.contactoFormCard .contactoSubmit:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 24px 48px -16px rgba(0, 85, 109, 0.45);
}

.contactoFormCard .contactoSubmit:active {
    transform: scale(0.97);
    transition: transform 110ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Phone input dentro del card — reusa estilos glass. */
.contactoFormCard .phoneInput {
    position: relative;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 10px;
    transition:
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .phoneInput:hover:not(:focus-within) {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
}

.contactoFormCard .phoneInput:focus-within {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.contactoFormCard .phoneInput .phoneNumber {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 14px 16px !important;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
}

.contactoFormCard .phoneInput .phoneNumber:focus {
    outline: none;
    box-shadow: none !important;
    background: transparent !important;
}

.contactoFormCard .phonePrefix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .phonePrefix:hover,
.contactoFormCard .phonePrefix:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.contactoFormCard .phoneFlag {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
}

.contactoFormCard .phonePrefixCode {
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.contactoFormCard .phoneChevron {
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .phoneInput.is-open .phoneChevron {
    transform: rotate(180deg);
}

.contactoFormCard .phonePrefixMenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: min(280px, 95vw);
    max-width: 95vw;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #002430;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 24px 52px -18px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transition:
        opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 50;
}

.contactoFormCard .phoneInput.is-open .phonePrefixMenu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.contactoFormCard .phonePrefixMenu li {
    margin: 0;
    list-style: none;
}

.contactoFormCard .phonePrefixMenu button {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1),
                color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.contactoFormCard .phonePrefixMenu button:hover,
.contactoFormCard .phonePrefixMenu button:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    outline: none;
}

.contactoFormCard .phoneMenuFlag {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}

.contactoFormCard .phoneMenuCode {
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

.contactoFormCard .phonePrefixMenu::-webkit-scrollbar {
    width: 6px;
}

.contactoFormCard .phonePrefixMenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

/* Stacking: field phone con z-index para que menú escape stacking de hermanos. */
.contactoFormCard .contactoField--phone {
    position: relative;
    z-index: 10;
}

.contactoFormCard .contactoField--phone:has(.phoneInput.is-open) {
    z-index: 100;
}

/* Overlay legibilidad — fade vertical desvanece abajo para que footer
   transparent vea video natural (sin tinte azul). */
.body--contacto-video .contactoVideoBg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 36, 48, 0.55) 0%, rgba(0, 36, 48, 0.4) 55%, transparent 100%);
}

.body--contacto-video .bgDecor,
.body--contacto-video .scrollPaths {
    display: none;
}

/* Cuerpo encima del video. Header z-index alto para que dropdown nunca tape. */
.body--contacto-video > *:not(.contactoVideoBg) {
    position: relative;
    z-index: 1;
}

.body--contacto-video .header {
    z-index: 200;
}

/* === HEADER ghost — transparente SIEMPRE, sin transiciones ni scrolled state. === */
.body--contacto-video .header,
.body--contacto-video .header.is-scrolled {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

/* Swap logo → variante "new" inversa (blanca). */
.body--contacto-video .brandLogo {
    content: url("../img/logo_horizontal_inv_new.webp");
}

@media (max-width: 1159px) {
    .body--contacto-video .brand picture source { display: none; }
    .body--contacto-video .brandLogo {
        content: url("../img/logo_horizontal_inv_new.webp");
    }
}

/* Links nav blancos. */
.body--contacto-video .navLink,
.body--contacto-video .btnLink,
.body--contacto-video .langSwitchBtn {
    color: rgba(255, 255, 255, 0.85);
}

.body--contacto-video .navLink:hover,
.body--contacto-video .btnLink:hover,
.body--contacto-video .langSwitchBtn:hover {
    color: #fff;
}

.body--contacto-video .navLink::after {
    background: #fff;
}

.body--contacto-video .navToggle span {
    background: #fff;
}

/* CTA primario header — pill blanco texto brand. */
.body--contacto-video .header .btnPrimary {
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand);
}

.body--contacto-video .header .btnPrimary:hover {
    background: #fff;
}

/* === SECTION immersive — full viewport menos header.
   align-items center con padding-top mayor para empujar form un poco arriba. */
.contactoSection--immersive {
    padding: clamp(120px, 16vw, 160px) 0 clamp(120px, 14vw, 170px);
    min-height: calc(100dvh - 72px);
    display: flex;
    align-items: center;
}

.contactoImmersive {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
}

/* Intro tipografía sobre video. */
.body--contacto-video .contactoIntro {
    text-align: left;
    margin-bottom: 32px;
}

.body--contacto-video .contactoIntro .eyebrow {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.body--contacto-video .contactoTitle {
    color: #fff;
    margin-top: 18px;
    text-shadow: 0 2px 24px rgba(0, 30, 40, 0.4);
}

.body--contacto-video .contactoLead {
    color: rgba(255, 255, 255, 0.82);
    max-width: 440px;
    text-shadow: 0 1px 12px rgba(0, 30, 40, 0.3);
}

/* === FORM sin card — directo sobre video. === */
.body--contacto-video .contactoForm {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    gap: 14px;
}

.body--contacto-video .contactoField label {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.body--contacto-video .contactoField input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    transition:
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .contactoField input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.body--contacto-video .contactoField input:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
}

.body--contacto-video .contactoField input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

/* ===== Phone input con selector prefijo ===== */
.body--contacto-video .phoneInput {
    position: relative;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 10px;
    transition:
        border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .phoneInput:hover:not(:focus-within) {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.14);
}

.body--contacto-video .phoneInput:focus-within {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

/* Phone input override: input bare dentro del wrapper. */
.body--contacto-video .phoneInput .phoneNumber {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 14px 16px !important;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
}

.body--contacto-video .phoneInput .phoneNumber:focus {
    outline: none;
    box-shadow: none !important;
    background: transparent !important;
}

/* Prefix trigger. */
.body--contacto-video .phonePrefix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .phonePrefix:hover,
.body--contacto-video .phonePrefix:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.body--contacto-video .phoneFlag {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
}

.body--contacto-video .phonePrefixCode {
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.body--contacto-video .phoneChevron {
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .phoneInput.is-open .phoneChevron {
    transform: rotate(180deg);
}

/* Menú prefijos — fondo sólido oscuro brand, no transparente. */
.body--contacto-video .phonePrefixMenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #002430;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 24px 52px -18px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transition:
        opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 50;
}

.body--contacto-video .phoneInput.is-open .phonePrefixMenu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.body--contacto-video .phonePrefixMenu li {
    margin: 0;
    list-style: none;
}

.body--contacto-video .phonePrefixMenu button {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1),
                color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .phonePrefixMenu button:hover,
.body--contacto-video .phonePrefixMenu button:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    outline: none;
}

.body--contacto-video .phoneMenuFlag {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}

.body--contacto-video .phoneMenuCode {
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

/* Field phone: z-index alto + nuevo stacking context para que menú escape
   los siguientes contactoField que crean su propio context vía transform. */
.body--contacto-video .contactoField--phone {
    position: relative;
    z-index: 10;
}

.body--contacto-video .contactoField--phone.is-open,
.body--contacto-video .contactoField--phone:has(.phoneInput.is-open) {
    z-index: 100;
}

/* Scrollbar slim del menú. */
.body--contacto-video .phonePrefixMenu::-webkit-scrollbar {
    width: 6px;
}

.body--contacto-video .phonePrefixMenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

/* Autofill Chrome → force dark glass. */
.body--contacto-video .contactoField input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0, 36, 48, 0.5) inset;
    caret-color: #fff;
}

/* Submit — pill blanco texto brand. */
.body--contacto-video .contactoSubmit {
    margin-top: 12px;
    width: 100%;
    background: #fff;
    color: var(--brand);
    transition:
        transform 320ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 320ms cubic-bezier(0.23, 1, 0.32, 1),
        background 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .contactoSubmit:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.45);
}

.body--contacto-video .contactoSubmit:active {
    transform: scale(0.98);
    transition: transform 110ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Stagger entrada (legacy body--contacto-video, no aplica scope card). */

/* Scroll hint — flecha estática centrada, empuja footer fuera viewport.
   Default orientada abajo (indica scroll); rota 180° (arriba) cuando footer
   entra viewport via JS class `is-up`. */
.body--contacto-video .contactoScrollHint {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    margin-top: -30px;
    margin-bottom: 30px;
}

.body--contacto-video .contactoScrollHint svg {
    transition: transform 360ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .contactoScrollHint.is-up svg {
    transform: rotate(180deg);
}

/* === FOOTER ghost — transparent + solo backdrop blur, sin tinte ni saturate.
   transform translateZ(0) + will-change fuerza compositing layer al cargar →
   Chrome pinta footer aunque esté off-screen (sin esperar al scroll). === */
.body--contacto-video .footer {
    background: transparent !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-top: 0;
    color: rgba(255, 255, 255, 0.8);
    transform: translateZ(0);
    will-change: transform;
    contain: layout style paint;
    content-visibility: visible;
}

.body--contacto-video .footer * {
    color: inherit !important;
}

.body--contacto-video .footer h4 {
    color: #fff !important;
}

.body--contacto-video .footer a {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.body--contacto-video .footer a:hover {
    color: #fff !important;
}

.body--contacto-video .footer .brandCopy strong {
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .body--contacto-video .contactoIntro,
    .body--contacto-video .contactoField,
    .body--contacto-video .contactoSubmit {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 860px) {
    .contactoImmersive {
        max-width: 100%;
    }
}

.contactoIntro {
    text-align: center;
    margin-bottom: 36px;
}

.contactoTitle {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--brand);
    margin-top: 14px;
}

.contactoLead {
    margin-top: 16px;
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.6;
}

.contactoForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.contactoField {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contactoField label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.contactoField input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 85, 109, 0.16);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contactoField input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0, 85, 109, 0.12);
}

.contactoSubmit {
    margin-top: 8px;
    width: 100%;
}

/* ============================================
   CONTACTO — aviso Grupo Beta sobre el formulario
   ============================================ */
.contactoBeta {
    margin: 4px 0 26px;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(0, 85, 109, 0.045);
    border: 1px solid rgba(0, 85, 109, 0.1);
}

/* Texto base del bloque (intro, plazas, CTA) en NEGRITA — la jerarquía
   la da el peso, no el color. */
.contactoBeta p {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.7;
    font-weight: 700;
    color: whitesmoke;
}

.contactoBeta ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0 0 0 40px;
    display: grid;
    gap: 9px;
}

/* Líneas de checks SIN negrita (contraste con el texto base). */
.contactoBeta li {
    font-size: 16.5px;
    line-height: 1.6;
    font-weight: 400;
    color: whitesmoke;
}

.contactoBeta p:last-child {
    margin-bottom: 0;
}

/* Intro del bloque beta: negrita (sin color de acento). */
.contactoBeta p.contactoBeta__lead {
    color: whitesmoke;
    font-weight: 700;
    font-size: 17px;
}

.contactoBeta__cta {
    font-weight: 800 !important;
    font-size: 18px !important;
    color: whitesmoke !important;
}

/* Paneles de estado del formulario (éxito / error) — estilo Brevo, integrado. */
.contactoMsg {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.contactoMsg svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.contactoMsg--ok {
    background: #e7faf0;
    border: 1px solid #13ce66;
    color: #085229;
}

.contactoMsg--error {
    background: #ffeded;
    border: 1px solid #ff4949;
    color: #661d1d;
}

.contactoMsg[hidden] {
    display: none;
}

/* ============================================
   CONTACTO — header móvil/tablet: logo GRANDE y CENTRADO,
   hamburguesa visible a la derecha.
   ============================================ */
@media (max-width: 1024px) {
    .body--contacto-card .headerInner {
        position: relative;
        min-height: 84px;
        height: 84px;
    }
    /* Logo horizontal blanco, GRANDE (ocupa casi todo el alto) y centrado
       — no el isotipo del <picture>. */
    .body--contacto-card .brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        height: auto;
    }
    .body--contacto-card .brandLogo {
        height: auto !important;
        width: 176px !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: 9288 / 2146 !important;
    }
    /* Hamburguesa a la derecha y bien visible. */
    .body--contacto-card .navToggle {
        display: flex;
        margin-left: auto;
        position: relative;
        z-index: 2;
    }
    .body--contacto-card .navToggle span {
        width: 26px;
        height: 2.5px;
        background: #fff;
    }
}

/* Contacto: nav centrado REAL en el header — elimina el hueco grande
   entre el logo y los enlaces (solo desktop; en móvil manda el hamburger). */
@media (min-width: 1025px) {
    .body--contacto-card .headerInner {
        position: relative;
    }

    .body--contacto-card .headerInner .nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}