/* ============================================================
   PACIENTES — CRM clínico. Adaptado al brand EviMedic.
   Paleta remapeada a tokens del proyecto (cyan petrol/teal).
   Header, footer, eyebrow y section-title heredan styles.css.
   ============================================================ */
.body--pacientes {
    --pac-deep: #003d4f;
    --pac-primary: #00556d;
    --pac-mid: #0c5d71;
    --pac-teal: #36848b;
    --pac-glaciar: #b9d2d4;
    --pac-glaciar-soft: #edf7f8;
    --pac-mist: #f8fbfc;
    --pac-ink: #0b3440;
    --pac-line: rgba(0, 64, 83, 0.12);
    --pac-line-soft: rgba(11, 52, 64, 0.08);
    --pac-shadow-soft: 0 24px 70px rgba(0, 61, 79, 0.12);
    --pac-shadow-deep: 0 34px 100px rgba(0, 61, 79, 0.2);
    /* Elevación en capas (ambiente difuso + contacto cercano + filo): superficies
       que parecen "posadas" en el aire, no pegatinas con una sombra plana. */
    --pac-elev-card:
        0 1px 1px rgba(0, 61, 79, 0.05),
        0 8px 18px rgba(0, 61, 79, 0.08),
        0 30px 64px rgba(0, 61, 79, 0.16);
    --pac-elev-module:
        0 1px 1px rgba(0, 61, 79, 0.04),
        0 4px 10px rgba(0, 61, 79, 0.06),
        0 16px 34px rgba(0, 61, 79, 0.10);
    --pac-elev-module-active:
        0 2px 2px rgba(0, 61, 79, 0.06),
        0 10px 22px rgba(0, 61, 79, 0.12),
        0 26px 54px rgba(0, 61, 79, 0.20);
    --pac-radius: 16px;
    --pac-radius-sm: 10px;
    --pac-radius-lg: 22px;
    /* Curva base (ease-out exponencial, sin rebote). */
    --pac-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Ease-out con más pegada para micro-interacciones (Emil). */
    --pac-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    /* Elevación en capas para los mockups del collage (dolor): ambiente difuso +
       contacto cercano, todo tintado a brand (nunca negro plano). Dos profundidades
       para crear jerarquía front/back, y una honda para el hover. */
    --chaos-elev:
        0 1px 1px rgba(0, 61, 79, 0.05),
        0 6px 16px rgba(0, 61, 79, 0.10),
        0 18px 42px rgba(0, 61, 79, 0.14);
    --chaos-elev-back:
        0 1px 1px rgba(0, 61, 79, 0.04),
        0 4px 10px rgba(0, 61, 79, 0.07),
        0 12px 30px rgba(0, 61, 79, 0.10);
    --chaos-elev-hover:
        0 2px 3px rgba(0, 61, 79, 0.07),
        0 12px 26px rgba(0, 61, 79, 0.14),
        0 34px 70px rgba(0, 61, 79, 0.22);
}

/* ===== Reveal (animate-on-scroll lo gestiona styles.css/pacientes.js) ===== */

/* Hero copy: stagger interno de los hijos cuando el bloque se revela. */
.pac-hero__copy > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms var(--pac-ease), transform 720ms var(--pac-ease);
}

.pac-hero__copy.visible > * { opacity: 1; transform: translateY(0); }
.pac-hero__copy.visible > .eyebrow        { transition-delay: 40ms; }
.pac-hero__copy.visible > .pac-hero__title { transition-delay: 120ms; }
.pac-hero__copy.visible > .pac-hero__lede  { transition-delay: 230ms; }
.pac-hero__copy.visible > .pac-hero__actions { transition-delay: 330ms; }

/* Visual del hero: la ficha y el halo entran tras el copy; los módulos
   cascadean detrás de ella. Solo transform/opacity → 60fps, GPU. */
.pac-hero__visual {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 780ms var(--pac-ease), transform 780ms var(--pac-ease);
    transition-delay: 180ms;
}
.pac-hero__visual.visible { opacity: 1; transform: translateY(0); }

/* El escenario visual desborda ligeramente su columna en escritorio para que
   la ficha conserve protagonismo sin restar ancho al copy del hero. */
@media (min-width: 1081px) {
    .pac-hero__copy {
        position: relative;
        left: clamp(-18px, -1.25vw, -14px);
    }

    .pac-hero__visual {
        position: relative;
        left: clamp(0px, calc((100vw - 1100px) * 0.112), 24px);
        width: min(820px, 124%);
        max-width: none;
        justify-self: center;
    }
}

.pac-hero__visual .patient-card--profile {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 760ms var(--pac-ease), transform 760ms var(--pac-ease);
    transition-delay: 260ms;
}
.pac-hero__visual.visible .patient-card--profile {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Módulos flotantes: la ENTRADA es una animación de una sola pasada (cascada),
   así la transición del módulo queda libre para el resaltado activo (que es
   rápido y se repite). Nunca arranca en scale(0) — sale de translateY+scale leve.
   La entrada solo corre cuando el visual se revela (.visible). */
.pac-hero__visual.visible .floating-module {
    /* backwards (no forwards): tras la entrada el transform vuelve a la base
       (identity), dejando que el estado .is-active lo gobierne con su transición
       rápida. Así no se "congela" el transform de entrada. */
    animation: pacModuleIn 640ms var(--pac-ease) backwards;
}
.pac-hero__visual.visible .module-history { animation-delay: 440ms; }
.pac-hero__visual.visible .module-docs    { animation-delay: 520ms; }
.pac-hero__visual.visible .module-consent { animation-delay: 600ms; }
.pac-hero__visual.visible .module-recipes { animation-delay: 680ms; }

@keyframes pacModuleIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 0.52; transform: translateY(0) scale(1); }
}

/* Beneficios — intro: stagger interno (eyebrow → título), mismo idioma que el
   resto de bloques de texto. Antes aparecía estática (el tell nº1). */
.benefits-intro.animate-on-scroll > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms var(--pac-ease), transform 720ms var(--pac-ease);
}
.benefits-intro.animate-on-scroll.visible > * { opacity: 1; transform: translateY(0); }
.benefits-intro.animate-on-scroll.visible > .eyebrow       { transition-delay: 40ms; }
.benefits-intro.animate-on-scroll.visible > .section-title { transition-delay: 130ms; }

/* Benefit line: cada celda cascadea cuando entra la fila. El índice y el texto
   comparten la misma subida; el filo (transform/opacity) gobierna la entrada,
   el hover gobierna background/color con su propia curva. Solo GPU. */









/* ===== DOLOR — entrada (antes la sección aparecía estática) =====
   Copy: stagger interno (eyebrow → título → párrafos → ficha), igual lenguaje que el hero.
   Solo transform/opacity → 60fps. La rotación de cada mockup se preserva (var --chaos-rot). */
.pac-pain__copy > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 720ms var(--pac-ease), transform 720ms var(--pac-ease);
}
.pac-pain__copy.visible > * { opacity: 1; transform: translateY(0); }
.pac-pain__copy.visible > .eyebrow                 { transition-delay: 40ms; }
.pac-pain__copy.visible > .section-title           { transition-delay: 120ms; }
.pac-pain__copy.visible > .section-subtitle:nth-of-type(1) { transition-delay: 220ms; }
.pac-pain__copy.visible > .section-subtitle:nth-of-type(2) { transition-delay: 300ms; }
.pac-pain__copy.visible > .section-subtitle:nth-of-type(3) { transition-delay: 380ms; }
.pac-pain__copy.visible > .clean-record            { transition-delay: 470ms; }

/* Collage: cada mockup entra en cascada conservando su rotación de reposo.
   La transición de hover (transform) queda libre porque la ENTRADA es una animación
   de una pasada (backwards): al terminar, el transform vuelve a la base con la rotación. */
.chaos-board .chaos-item {
    --chaos-rot: 0deg;
    --chaos-y: 0px;
}
.chaos-board.visible .chaos-item {
    animation: pacChaosIn 720ms var(--pac-ease) backwards;
}
.chaos-board.visible .chaos-whatsapp  { --chaos-rot: -4deg; --chaos-y: 0px;  animation-delay: 120ms; }
.chaos-board.visible .chaos-excel     { --chaos-rot:  2deg; --chaos-y: 0px;  animation-delay: 220ms; }
.chaos-board.visible .chaos-paper     { --chaos-rot: -4deg; --chaos-y: 0px;  animation-delay: 320ms; }
.chaos-board.visible .chaos-tabs      { --chaos-rot:  3deg; --chaos-y: 0px;  animation-delay: 420ms; }
.chaos-board.visible .chaos-duplicate { --chaos-rot: -2deg; --chaos-y: 0px;  animation-delay: 520ms; }

@keyframes pacChaosIn {
    from { opacity: 0; transform: translateY(26px) rotate(var(--chaos-rot)) scale(0.965); }
    to   { opacity: 1; transform: translateY(var(--chaos-y)) rotate(var(--chaos-rot)) scale(1); }
}

/* La cuadrícula de fondo también se desvanece al entrar (acompaña, no distrae). */
.chaos-board::before {
    opacity: 0;
    transition: opacity 900ms var(--pac-ease) 120ms;
}
.chaos-board.visible::before { opacity: 1; }

/* ===== EDITORIAL (feature rows) — entrada =====
   Antes las filas se revelaban en seco: .feature-copy/.feature-visual llevan
   .animate-on-scroll pero no tenían estado oculto, así que aparecían estáticas
   (el tell nº1 de "sin terminar"). Mismo idioma que el hero: el copy cascadea
   sus hijos (eyebrow → título → párrafos → lista), el visual sube con un leve
   retardo. Solo transform/opacity → 60fps, GPU. Sin rebote. */
.feature-copy.animate-on-scroll > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 720ms var(--pac-ease), transform 720ms var(--pac-ease);
}
.feature-copy.animate-on-scroll.visible > * { opacity: 1; transform: translateY(0); }
.feature-copy.animate-on-scroll.visible > .eyebrow                       { transition-delay: 40ms; }
.feature-copy.animate-on-scroll.visible > .section-title                 { transition-delay: 120ms; }
.feature-copy.animate-on-scroll.visible > .section-subtitle:nth-of-type(1) { transition-delay: 220ms; }
.feature-copy.animate-on-scroll.visible > .section-subtitle:nth-of-type(2) { transition-delay: 290ms; }
.feature-copy.animate-on-scroll.visible > .section-subtitle:nth-of-type(3) { transition-delay: 350ms; }
.feature-copy.animate-on-scroll.visible > .feature-list                  { transition-delay: 420ms; }

/* El mockup entra como una pieza: sube y aterriza tras el copy. El scale leve
   (nunca desde 0) da peso sin "aparecer de la nada". */
.feature-visual.animate-on-scroll {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 780ms var(--pac-ease), transform 780ms var(--pac-ease);
    transition-delay: 160ms;
}
.feature-visual.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* En las filas invertidas el visual va primero (izquierda): entra sin retardo
   extra para que la mitad que el ojo encuentra antes no llegue tarde. */
.feature-grid-reverse .feature-visual.animate-on-scroll { transition-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
    .pac-hero__copy > *,
    .pac-hero__visual,
    .pac-hero__visual .patient-card--profile,
    .pac-hero__visual .floating-module,
    .pac-pain__copy > *,
    .feature-copy.animate-on-scroll > *,
    .feature-visual.animate-on-scroll,
    .benefits-intro.animate-on-scroll > *,
    .benefit-line span,
    .pac-cta__card.animate-on-scroll,
    .line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    /* La opacidad de los módulos sigue gobernada por el estado activo
       (legibilidad de la demo), no por la animación de entrada. */
    .floating-module { opacity: 0.5 !important; }
    .floating-module.is-active { opacity: 1 !important; }
    /* Halo y entrada de módulos: presentes pero sin animación. */
    .pac-hero__visual.visible .floating-module { animation: none !important; }
    /* Collage: sin animación de entrada, pero conservando la rotación de reposo
       (la dan las reglas por-mockup sin !important). El grid y el brillo, visibles. */
    .chaos-board .chaos-item { animation: none !important; opacity: 1 !important; }
    .chaos-board::before { opacity: 1 !important; transition: none !important; }
    .chaos-board::after { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* Ficha: sin barrido de conexión en bucle. */
    .clean-record-body::after { animation: none !important; opacity: 0 !important; }
}

/* ===== Títulos grandes, fieles a la base original ===== */
/* h2 de sección (dolor, flujo, beneficios): ~54px. */
.body--pacientes .pac-pain__copy .section-title,
.body--pacientes .benefits-intro .section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.8vw, 3.4rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand);
}

/* Separa un poco más el título del texto en la sección dolor. */
.body--pacientes .pac-pain__copy .section-title {
    margin-bottom: 30px;
}

/* Todos los textos bajo los títulos de pacientes a 19px. */
.body--pacientes .section-subtitle,
.body--pacientes .pac-hero__lede,
.body--pacientes .pac-cta__card p {
    font-size: 19px;
}

/* Flujo (sobre azul): blanco, tamaño grande. */
.body--pacientes .pac-flow .section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.8vw, 3.4rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* h3 de feature rows: ~48px, color brand. */
.body--pacientes .feature-copy .section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    max-width: 560px;
    color: var(--brand);
    /* Cortes equilibrados → ningún huérfano corto en los titulares de fila. */
    text-wrap: balance;
}

/* ===== Ritmo tipográfico de la columna de texto =====
   El reset global (* { margin: 0 }) dejaba los párrafos pegados sin aire entre
   ellos y bajo el título. Aquí se da jerarquía: eyebrow → título → párrafos →
   lista, con medida cómoda (~62ch) y cortes "pretty" (sin viudas). */
/* Tratamiento común de badges en Pacientes: el conjunto ocupa la misma medida
   que su bloque de título, queda centrado y conserva las dos líneas con fade. */
.body--pacientes :is(
    .pac-hero__copy,
    .pac-pain__copy,
    .flow-copy,
    .feature-copy,
    .benefits-intro,
    .pac-cta__card
) > .eyebrow {
    display: flex;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

.body--pacientes :is(
    .pac-hero__copy,
    .pac-pain__copy,
    .flow-copy,
    .feature-copy,
    .benefits-intro,
    .pac-cta__card
) > .eyebrow::before,
.body--pacientes :is(
    .pac-hero__copy,
    .pac-pain__copy,
    .flow-copy,
    .feature-copy,
    .benefits-intro,
    .pac-cta__card
) > .eyebrow::after {
    content: "";
    display: block;
    flex: 1 1 72px;
    width: auto;
    min-width: 24px;
    max-width: 90px;
    height: 1.4px;
    opacity: 1;
}

.body--pacientes :is(
    .pac-hero__copy,
    .pac-pain__copy,
    .feature-copy,
    .benefits-intro
) > .eyebrow::before {
    background: linear-gradient(to right, transparent 0%, var(--brand) 100%);
}

.body--pacientes :is(
    .pac-hero__copy,
    .pac-pain__copy,
    .feature-copy,
    .benefits-intro
) > .eyebrow::after {
    background: linear-gradient(to right, var(--brand) 0%, transparent 100%);
}

.body--pacientes :is(
    .flow-copy,
    .pac-cta__card
) > .eyebrow::before {
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.9) 100%);
}

.body--pacientes :is(
    .flow-copy,
    .pac-cta__card
) > .eyebrow::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
}

@media (max-width: 720px) {
    .body--pacientes :is(
        .pac-hero__copy,
        .pac-pain__copy,
        .flow-copy,
        .feature-copy,
        .benefits-intro,
        .pac-cta__card
    ) > .eyebrow {
        gap: 10px;
    }

    .body--pacientes :is(
        .pac-hero__copy,
        .pac-pain__copy,
        .flow-copy,
        .feature-copy,
        .benefits-intro,
        .pac-cta__card
    ) > .eyebrow::before,
    .body--pacientes :is(
        .pac-hero__copy,
        .pac-pain__copy,
        .flow-copy,
        .feature-copy,
        .benefits-intro,
        .pac-cta__card
    ) > .eyebrow::after {
        min-width: 0;
        max-width: 64px;
    }

    /* El copy del hero conserva 32px de padding a cada lado. El badge principal
       recupera ese ancho para que su texto largo no colapse las líneas fade. */
    .body--pacientes .pac-hero__copy > .eyebrow {
        width: calc(100% + 64px);
        max-width: none;
        margin-inline: -32px;
        gap: 8px;
        font-size: clamp(0.78rem, 3.4vw, 0.9rem);
    }

    /* En móvil el título recupera el flujo natural para adaptarse al ancho real. */
    .body--pacientes .pac-hero__title-line {
        display: inline;
        white-space: normal;
    }

    html[lang="es"] .body--pacientes .pac-hero__title-line {
        display: block;
        white-space: nowrap;
    }

    html[lang="es"] .body--pacientes .pac-hero__title-line--mobile-en::after {
        content: " en";
    }

    .pac-mobile-copy-desktop {
        display: none;
    }

    .pac-mobile-copy-only {
        display: inline;
    }
}

.body--pacientes .feature-copy .eyebrow { margin-bottom: 20px; }

.body--pacientes .feature-copy .section-title { margin-bottom: 22px; }

.body--pacientes .feature-copy .section-subtitle {
    max-width: 60ch;
    line-height: 1.65;
    color: var(--text-soft);
    text-wrap: pretty;
}

.body--pacientes .feature-copy .section-subtitle + .section-subtitle { margin-top: 18px; }

/* Header transparente garantizado arriba (sin scroll). is-scrolled mantiene
   el glass del proyecto al bajar, igual que el resto de páginas. */
.body--pacientes .header:not(.is-scrolled) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===== HERO ===== */
.pac-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(132px, 16vw, 172px) 0 clamp(76px, 10vw, 108px);
    background: transparent;
}

/* Halo glaciar/teal detrás de la mitad visual: ancla la composición y elimina
   el vacío alrededor de la ficha. NO es el fondo de la <section> (sigue
   transparente); es una capa decorativa interna, sin eventos, GPU-friendly. */
.pac-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
}

.pac-hero__copy {
    max-width: 590px;
}

.pac-hero__title {
    margin: 20px 0 26px;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    line-height: 1.0;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--brand);
    /* Corte natural: mantiene juntas las tres unidades semánticas del título. */
    text-wrap: wrap;
}

.pac-hero__title-line {
    display: block;
    white-space: nowrap;
}

.pac-mobile-copy-only {
    display: none;
}

@media (max-width: 720px) {
    .pac-mobile-copy-desktop {
        display: none;
    }

    .pac-mobile-copy-only {
        display: inline;
    }
}

.pac-hero__lede {
    max-width: 500px;
    margin-bottom: 36px;
    color: var(--text-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.pac-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Feedback de pulsación coherente con la app (Emil): el botón "escucha" al
   click con una compresión sutil. Solo en el hero; no toca el sistema global.
   Gateado a punteros finos para no disparar falsos hover/active en táctil. */
@media (hover: hover) and (pointer: fine) {
    .pac-hero__actions .btn:active {
        transform: scale(0.97);
    }
}

/* ===== Hero mockup: patient system ===== */
.patient-system {
    position: relative;
    /* Ajustado a la composición real (ficha ~660px → ~404px alto + módulos que la
       enmarcan): antes 680px dejaba un vacío muerto debajo. */
    min-height: clamp(520px, 42vw, 600px);
}

.patient-card,
.floating-module,
.mock-surface,
.clean-record,
.chaos-item {
    border: 1px solid var(--pac-line-soft);
    border-radius: var(--pac-radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--pac-shadow-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.patient-card {
    position: absolute;
    top: 84px;
    right: 28px;
    z-index: 2;
    width: min(660px, 94%);
    padding: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.85));
    box-shadow: var(--pac-shadow-deep);
}

/* ===== Mockup ficha de paciente — estilo fiel a la app (header azul,
   campos con borde + label, foto con silueta + subir, acciones, tabs). =====
   Ficha = pieza "mecanizada": radio squircle generoso, filo glaciar a 1px,
   reflejo interior superior y elevación en capas (ambiente + contacto). */
.patient-card--profile {
    padding: 0;
    overflow: hidden;
    border-radius: var(--pac-radius-lg);
    border-color: rgba(185, 210, 212, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
        rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        var(--pac-elev-card);
    /* La ficha tapa el blur; quitarlo ahorra repintados sin pérdida visual. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: transform;
}

/* Captura real de la app en lugar del mockup; tabs debajo. */
.pc-shot {
    display: block;
    width: 100%;
    height: auto;
}

.pc-shot-wrap {
    position: relative;
}

/* La captura conserva los dos botones antiguos. Esta capa reproduce el grupo
   actual (citas, recetas e historial) sin alterar el resto del mockup real. */
.pc-profile-actions {
    position: absolute;
    right: 2.55%;
    bottom: 3.65%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    width: 23%;
    height: 6.8%;
    padding-top: 1px;
    background: #fff;
}

.pc-profile-actions span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 5px;
    background: var(--pac-primary);
    color: #fff;
    font-size: clamp(0.42rem, 0.58vw, 0.58rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Header azul petrol con título + badge "Persona física". */












/* Campo estilo formulario: borde fino, label uppercase pequeño, valor. */








/* Columna derecha: foto + botón subir + acciones. */








/* Mockup decorativo → sin hover/interacción; jerarquía solo visual. */


/* Segundo botón en outline: una sola acción primaria, evita "dos botones gritando". */


/* Tabs scroll horizontal inferior con underline activo. */
.pc-tabs {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--pac-line-soft);
    overflow-x: auto;
    scrollbar-width: none;
}

.pc-tabs::-webkit-scrollbar { display: none; }

.pc-tabs span {
    position: relative;
    flex-shrink: 0;
    padding-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
    transition: color 280ms var(--pac-ease);
}

.pc-tabs span.is-active {
    color: var(--pac-primary);
}

/* Underline presente en todas las pestañas pero colapsado (scaleX 0); al activar
   crece desde la izquierda en lugar de parpadear → la conexión con su módulo se
   "dibuja". Solo anima transform/opacity. */
.pc-tabs span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pac-primary);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform 320ms var(--pac-ease), opacity 320ms var(--pac-ease);
}

.pc-tabs span.is-active::after {
    transform: scaleX(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pc-tabs span::after { transition: opacity 200ms ease; transform: scaleX(1); }
}





.patient-card h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.05;
    color: var(--pac-deep);
}

.status-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.12);
    color: var(--pac-teal);
    font-size: 12px;
    font-weight: 800;
}













/* Minimodal: título destacado (con punto-estado glaciar) + línea separadora
   + texto secundario menor. El punto es decorativo (no añade copy) y refuerza
   la lectura de "badge" en vivo; se ilumina al activarse el módulo. */
.floating-module span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--pac-deep);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--pac-line-soft);
}

.floating-module span::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pac-glaciar);
    box-shadow: 0 0 0 0 rgba(54, 132, 139, 0);
    transition: background 320ms var(--pac-ease), box-shadow 360ms var(--pac-ease-out);
}

.floating-module.is-active span::before {
    background: var(--pac-teal);
    box-shadow: 0 0 0 4px rgba(54, 132, 139, 0.16);
}

.floating-module strong {
    display: block;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.floating-module.is-active strong { color: var(--pac-mid); }

.timeline {
    display: grid;
    gap: 16px;
}











.floating-module {
    position: absolute;
    z-index: 4;
    min-width: 184px;
    padding: 15px 17px;
    border-radius: 14px;
    /* Filo glaciar fino (antes borde petrol duro que enturbiaba al 40%) +
       reflejo interior superior → superficie "posada", no pegatina. */
    border: 1px solid rgba(185, 210, 212, 0.6);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        var(--pac-elev-module);
    /* La superficie es casi opaca: el backdrop-blur no aporta y encarece
       repintados sobre un elemento que se transforma. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Idle legible pero claramente secundario; el resaltado manda la jerarquía. */
    opacity: 0.52;
    will-change: transform;
    /* Resaltado activo: rápido (se repite cada 3 s / en hover). Independiente de
       la animación de entrada (one-shot), así nunca se pisan. */
    transition:
        opacity 240ms var(--pac-ease-out),
        transform 240ms var(--pac-ease-out),
        border-color 240ms var(--pac-ease-out),
        box-shadow 280ms var(--pac-ease-out);
}

/* Activo (hover o autoplay, lo marca pacientes.js): se ilumina, se eleva y
   crece levemente — el sistema "responde". Solo transform/opacity/sombra.
   Definido dentro del contexto .visible para componer con la entrada. */
.pac-hero__visual.visible .floating-module.is-active {
    opacity: 1;
    transform: translateY(-5px) scale(1.03);
    border-color: rgba(54, 132, 139, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        var(--pac-elev-module-active);
}

/* Fallback sin reveal/JS (o reduced-motion): el activo sigue destacando. */
.floating-module.is-active {
    opacity: 1;
}

.module-history { top: 4px;   right: 24px; }
.module-docs    { top: 12px;  left: 64px;  }
.module-consent { left: 0;    bottom: 18px; }
.module-recipes { right: 64px; bottom: 40px; }

/* Conectores módulo flotante → elemento de la ficha (los dibuja pacientes.js
   midiendo posiciones reales; se recalculan en resize). */
.pc-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
}

.pc-links path {
    fill: none;
    stroke: var(--pac-teal);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 360ms var(--pac-ease);
}

.pc-links circle {
    fill: var(--pac-teal);
    opacity: 0;
    transition: opacity 360ms var(--pac-ease);
}

/* Conector activo: línea teal viva con un flujo de guiones que viaja del módulo
   hacia la ficha. Flujo lento y lineal (energía constante, no marquesina barata);
   solo anima stroke-dashoffset → barato y nunca dispara layout. */
.pc-links path.is-active {
    opacity: 0.85;
    stroke-width: 1.6;
    stroke-dasharray: 5 9;
    animation: pacLinkFlow 1.15s linear infinite;
}

@keyframes pacLinkFlow {
    to { stroke-dashoffset: -14; }
}

/* Punto de anclaje en la ficha + halo pulsante suave (escala/opacidad). */
.pc-links circle.is-active {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(54, 132, 139, 0.5));
    transform-box: fill-box;
    transform-origin: center;
    animation: pacLinkPulse 2.4s var(--pac-ease) infinite;
}

@keyframes pacLinkPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.45); }
}

/* ===== DOLOR ===== */
.pac-pain {
    padding: clamp(70px, 9vw, 120px) 0;
    background: transparent;
}

.split-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 76px;
    align-items: center;
}

/* Cables azules dashed que conectan cada mockup con la ficha (los dibuja pacientes.js). */
.pain-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

.pain-links path {
    fill: none;
    stroke: var(--pac-teal);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
    stroke-linecap: round;
    opacity: 0.5;
}

/* Punto de llegada a la ficha: núcleo teal con filo claro → "conector" nítido,
   no una mancha. (El selector base afecta al dot sólido; .pulse lo refina aparte.) */
.pain-links circle {
    fill: var(--pac-teal);
    stroke: rgba(248, 251, 252, 0.9);
    stroke-width: 1.5;
    opacity: 0.9;
}

/* Onda pulsante que sale de cada punto final (sin filo, solo relleno que se expande). */
.pain-links circle.pulse {
    transform-box: fill-box;
    transform-origin: center;
    fill: var(--pac-teal);
    stroke: none;
    opacity: 0.45;
    animation: painPulse 2.6s var(--pac-ease) infinite;
}

@keyframes painPulse {
    0%   { transform: scale(1);   opacity: 0.45; }
    70%  { opacity: 0; }
    100% { transform: scale(5.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pain-links circle.pulse { animation: none; opacity: 0; }
}

/* Mockups izquierda por ENCIMA de los cables; ficha derecha por DEBAJO (cables z-index 2). */
.pac-pain .chaos-board {
    position: relative;
    z-index: 3;
}

.pac-pain__copy {
    position: relative;
    z-index: 1;
}

/* El badge ocupa toda la medida del copy: texto centrado y líneas que llegan
   a ambos extremos con el mismo fade que el eyebrow del hero. */
.pac-pain__copy > .eyebrow {
    display: flex;
    width: 100%;
    justify-content: center;
}

.pac-pain__copy > .eyebrow::before,
.pac-pain__copy > .eyebrow::after {
    flex: 1 1 auto;
    width: auto;
}

.chaos-board {
    position: relative;
    min-height: 610px;
    background: none;
    overflow: visible;
}

/* Cuadrícula tenue que se desvanece suave hacia los bordes (el mask hace el fade,
   no el overflow, por eso puede ir overflow:visible sin que se corte). */
.chaos-board::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 85, 109, 0.13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 85, 109, 0.13) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 28%, transparent 82%);
    mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 28%, transparent 82%);
    pointer-events: none;
}

/* Brillo glaciar difuso DETRÁS del collage (dentro del board, no de la sección):
   da profundidad atmosférica y une los mockups dispersos sin tocar el fondo de la
   sección. z-index:-1 → bajo la cuadrícula y los mockups. Entra con el reveal. */
.chaos-board::after {
    content: "";
    position: absolute;
    inset: -6% -4%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(48% 46% at 50% 52%, rgba(54, 132, 139, 0.16), rgba(54, 132, 139, 0) 72%);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1000ms var(--pac-ease) 80ms, transform 1000ms var(--pac-ease) 80ms;
}
.chaos-board.visible::after { opacity: 1; transform: scale(1); }

.chaos-item {
    position: absolute;
    padding: 18px;
    width: 210px;
    background: rgba(255, 255, 255, 0.9);
    /* Hover ágil (Emil: interacción frecuente ≈ 240ms ease-out, no 500ms). La sombra
       vive en la foto/clip interior, así que la elevación al hover la sube el mockup. */
    transition: transform 260ms var(--pac-ease-out);
}

/* Al pasar el ratón el mockup se endereza (rotate→0) y se eleva un punto.
   El realce de profundidad (sombra más honda + filo) lo asume la imagen interior. */
.chaos-item:hover,
.chaos-item.is-fakehover {
    transform: translateY(-4px) scale(1.025);
    z-index: 5;
}
.chaos-item:hover .chaos-mockup,
.chaos-item.is-fakehover .chaos-mockup,
.chaos-item:hover .chaos-clip,
.chaos-item.is-fakehover .chaos-clip {
    box-shadow: var(--chaos-elev-hover);
}

.chaos-item span {
    display: block;
    margin-bottom: 9px;
    color: var(--pac-deep);
    font-size: 13px;
    font-weight: 800;
}

.chaos-item p {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.45;
}

.chaos-whatsapp {
    top: 56px;
    left: 36px;
    width: 360px;
    padding: 0;
    background: none;
    border: none;
    transform: rotate(-4deg);
}
.chaos-excel {
    top: 120px;
    right: 44px;
    width: 286px;
    padding: 0;
    background: none;
    border: none;
    transform: rotate(2deg);
}

/* Foto del mockup: redondeo + elevación en capas (tintada a brand) + filo glaciar
   de 1px para que la pieza parezca "mecanizada", no una pegatina plana. */
.chaos-mockup {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 13px;
    box-shadow: var(--chaos-elev), 0 0 0 1px rgba(0, 61, 79, 0.04);
    transition: box-shadow 260ms var(--pac-ease-out);
}

/* Texto que aparece centrado sobre el mockup al pasar el ratón.
   Selector con .chaos-item para ganar a `.chaos-item span` (que forzaba block + color oscuro). */
.chaos-item .chaos-over {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px;
    text-align: center;
    border-radius: 13px;
    /* Velo direccional tintado a brand (más denso abajo → texto legible sin tapar
       del todo el mockup) + ligero desenfoque del fondo: profundidad, no plano. */
    background:
        linear-gradient(165deg, rgba(0, 61, 79, 0.52), rgba(0, 61, 79, 0.78));
    -webkit-backdrop-filter: blur(2px) saturate(108%);
    backdrop-filter: blur(2px) saturate(108%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 10px rgba(0, 30, 39, 0.35);
    opacity: 0;
    /* Micro-entrada: el velo no aparece "de la nada" — sube y nítida desde scale leve. */
    transform: scale(1.012);
    transition: opacity 240ms var(--pac-ease-out), transform 240ms var(--pac-ease-out);
    pointer-events: none;
}

.chaos-item.is-fakehover .chaos-over { opacity: 1; transform: scale(1); }

@media (hover: hover) {
    .chaos-item:hover .chaos-over { opacity: 1; transform: scale(1); }
}

/* Clip para el vídeo: recorta el zoom; redondeo y elevación (en capas) van aquí. */
.chaos-clip {
    display: block;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: var(--chaos-elev), 0 0 0 1px rgba(0, 61, 79, 0.04);
    transition: box-shadow 260ms var(--pac-ease-out);
}

/* Vídeo con zoom leve para que no se vean sus bordes (el clip lo recorta). */
.chaos-clip .chaos-mockup {
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.06);
}

/* Logo de la app pegado en la esquina, sobresaliendo como badge (por encima del velo).
   Sombra tintada a brand (nunca negro plano) + leve realce al elevar el mockup. */
.chaos-logo {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 32px;
    height: auto;
    z-index: 6;
    filter: drop-shadow(0 5px 10px rgba(0, 61, 79, 0.28));
    transition: transform 260ms var(--pac-ease-out), filter 260ms var(--pac-ease-out);
}
.chaos-item.is-fakehover .chaos-logo {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 8px 16px rgba(0, 61, 79, 0.34));
}
@media (hover: hover) {
    .chaos-item:hover .chaos-logo {
        transform: translateY(-1px) scale(1.06);
        filter: drop-shadow(0 8px 16px rgba(0, 61, 79, 0.34));
    }
}
.chaos-paper {
    left: 60px;
    top: 234px;
    width: 190px;
    padding: 0;
    background: none;
    border: none;
    transform: rotate(-4deg);
}
.chaos-tabs {
    right: 50px;
    bottom: 100px;
    width: 238px;
    padding: 0;
    background: none;
    border: none;
    transform: rotate(3deg);
}
.chaos-duplicate {
    left: 48px;
    bottom: 38px;
    width: 230px;
    padding: 0;
    background: none;
    border: none;
    transform: rotate(-2deg);
}

/* Jerarquía de profundidad (depth-of-field): whatsapp y excel quedan en primer plano
   (elevación estándar); papel, tabs y duplicados retroceden con una sombra más leve.
   Solo afecta al estado en reposo — el hover sigue elevando con --chaos-elev-hover. */
.chaos-paper .chaos-mockup,
.chaos-tabs .chaos-clip,
.chaos-duplicate .chaos-mockup {
    box-shadow: var(--chaos-elev-back), 0 0 0 1px rgba(0, 61, 79, 0.035);
}





/* Ficha "todo conectado": pieza mecanizada (doble bisel). Carcasa exterior con
   elevación en capas + filo glaciar + reflejo interior superior + brillo glaciar
   difuso que la ancla. Es el destino de los cables → debe sentirse sólida y limpia,
   en contraste con el collage disperso. */
.pac-pain__copy .clean-record {
    position: relative;
    max-width: none;
    margin-top: 34px;
    padding: 12px;
    border-radius: var(--pac-radius-lg);
    border-color: rgba(185, 210, 212, 0.6);
    background:
        radial-gradient(120% 90% at 78% 8%, rgba(54, 132, 139, 0.12), rgba(54, 132, 139, 0) 60%),
        linear-gradient(180deg, rgba(248, 251, 252, 0.96), rgba(237, 247, 248, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        var(--pac-elev-card);
}

/* Cabecera de la ficha: fuera del núcleo, como rótulo de la carcasa. */
.clean-record-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 8px 10px 14px;
    font-size: 13px;
    color: var(--text-soft);
    font-weight: 700;
}

/* El "Todo conectado" se presenta como chip glaciar (pequeño badge), no texto suelto:
   refuerza el estado conectado sin tocar el copy. */
.clean-record-top strong {
    color: var(--pac-deep);
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.14);
    box-shadow: inset 0 0 0 1px rgba(54, 132, 139, 0.22);
    letter-spacing: 0.01em;
}

/* Núcleo interior del doble bisel: superficie propia, radio concéntrico menor,
   y recorte para el barrido de conexión (scan). */
.clean-record-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    overflow: hidden;
    border-radius: calc(var(--pac-radius-lg) - 6px);
    background: rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 1px 2px rgba(0, 61, 79, 0.05);
}

/* Barrido glaciar de "conexión recibida": una banda muy tenue cruza los campos en
   bucle, atando la ficha a los cables que llegan. GPU-safe (solo transform/opacity),
   gateado por reduced-motion más abajo. */
.clean-record-body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(54, 132, 139, 0.12) 50%, transparent);
    transform: translateX(-120%);
    animation: crScan 5.2s var(--pac-ease) infinite;
}

@keyframes crScan {
    0%   { transform: translateX(-120%); opacity: 0; }
    12%  { opacity: 1; }
    55%  { opacity: 1; }
    70%  { transform: translateX(260%); opacity: 0; }
    100% { transform: translateX(260%); opacity: 0; }
}

.cr-top {
    display: grid;
    grid-template-columns: 1fr 88px;
    gap: 14px;
    align-items: start;
}

.cr-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.cr-fields span,
.cr-line {
    display: block;
    height: 30px;
    border: 1px solid var(--pac-line-soft);
    border-radius: var(--pac-radius-sm);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.cr-line {
    width: 100%;
}

/* Foto: silueta en el filo glaciar, con su propio reflejo interior. */
.cr-photo {
    height: 88px;
    border: 1px solid var(--pac-line);
    border-radius: var(--pac-radius-sm);
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.5), rgba(185, 210, 212, 0) 60%),
        rgba(185, 210, 212, 0.36);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
    color: rgba(0, 61, 79, 0.42);
    display: grid;
    place-items: center;
}

.cr-photo svg {
    width: 60%;
    height: 60%;
}

/* ===== FLUJO (oscuro) ===== */
/* Sección flujo: el fondo lo da la clase .bgModoAzul (parallax + overlay full-bleed).
   Aquí solo el ritmo vertical. */
.pac-flow {
    padding: clamp(80px, 10vw, 132px) 0;
}

.pac-flow > .container {
    position: relative;
    z-index: 1;
}

.flow-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(44px, 5.5vw, 82px);
    align-items: start;
}

.pac-flow .flow-copy {
    position: sticky;
    top: 120px;
}

/* Entrada del copy: stagger interno (eyebrow → título → cuerpo), mismo
   lenguaje que hero/dolor. Solo transform/opacity. */
.pac-flow .flow-copy > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms var(--pac-ease), transform 720ms var(--pac-ease);
}

.pac-flow .flow-copy.visible > * { opacity: 1; transform: translateY(0); }
.pac-flow .flow-copy.visible > .eyebrow        { transition-delay: 40ms; }
.pac-flow .flow-copy.visible > .section-title  { transition-delay: 130ms; }
.pac-flow .flow-copy.visible > .section-subtitle { transition-delay: 240ms; }

.pac-flow .flow-copy .eyebrow {
    color: #fff;
}

/* Líneas decorativas del eyebrow → blanco sobre azul (igual que .bgModoAzul). */
.pac-flow .flow-copy .eyebrow::before,
.pac-cta__card .eyebrow::before {
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 100%);
}

.pac-flow .flow-copy .eyebrow::after,
.pac-cta__card .eyebrow::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
}

.pac-cta__card .eyebrow {
    justify-content: center;
}

.pac-flow .flow-copy .section-title {
    color: #fff;
    margin-bottom: 26px;
}

/* Cuerpo sobre azul: glaciar legible, medida acotada y un punto más de interlineado. */
.pac-flow .flow-copy .section-subtitle {
    color: rgba(255, 255, 255, 0.74);
    max-width: 46ch;
    line-height: 1.62;
}

.flow-canvas {
    position: relative;
    display: grid;
    gap: 14px;
}

/* Hilo conductor del timeline: línea sutil tras la columna de números.
   Centro del badge = padding 24px + radio 19px = 43px → la línea lo cruza exacto. */
.flow-canvas::before {
    content: "";
    position: absolute;
    left: 43px;
    top: 34px;
    bottom: 34px;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(
        to bottom,
        rgba(185, 210, 212, 0) 0%,
        rgba(185, 210, 212, 0.26) 12%,
        rgba(185, 210, 212, 0.26) 88%,
        rgba(185, 210, 212, 0) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Entrada del lienzo: el bloque entero funde y sube como una pieza (la opacidad
   del contenedor se multiplica con la atenuación por-paso del JS, así NO toca el
   acordeón). Cada paso añade un leve ascenso escalonado encima. */
.flow-canvas.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 760ms var(--pac-ease), transform 760ms var(--pac-ease);
    transition-delay: 120ms;
}

.flow-canvas.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ascenso por-paso: animación de una pasada (backwards) en SOLO transform → al
   terminar vuelve a identity y deja libre el :active y la transición de transform.
   No anima opacity (la gobierna is-open del acordeón). Corre al revelarse el lienzo. */
.flow-canvas.visible .flow-disclosure {
    animation: flowStepIn 620ms var(--pac-ease) backwards;
}
.flow-canvas.visible .flow-disclosure:nth-child(1) { animation-delay: 220ms; }
.flow-canvas.visible .flow-disclosure:nth-child(2) { animation-delay: 290ms; }
.flow-canvas.visible .flow-disclosure:nth-child(3) { animation-delay: 360ms; }
.flow-canvas.visible .flow-disclosure:nth-child(4) { animation-delay: 430ms; }
.flow-canvas.visible .flow-disclosure:nth-child(5) { animation-delay: 500ms; }
.flow-canvas.visible .flow-disclosure:nth-child(6) { animation-delay: 570ms; }
.flow-canvas.visible .flow-disclosure:nth-child(7) { animation-delay: 640ms; }

@keyframes flowStepIn {
    from { transform: translateY(14px); }
    to   { transform: translateY(0); }
}

.flow-step {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 27px 24px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--pac-radius);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    text-align: left;
    transition:
        background 320ms var(--pac-ease),
        border-color 320ms var(--pac-ease),
        box-shadow 320ms var(--pac-ease),
        transform 160ms var(--pac-ease-out);
}

@media (hover: hover) {
    .flow-step:hover {
        background: rgba(255, 255, 255, 0.075);
        border-color: rgba(185, 210, 212, 0.28);
    }

    .flow-step:hover span {
        border-color: rgba(185, 210, 212, 0.55);
        color: #fff;
    }
}

.flow-step:active {
    transform: scale(0.99);
}

.flow-step:focus-visible {
    outline: none;
    border-color: var(--pac-teal);
    box-shadow: 0 0 0 3px rgba(54, 132, 139, 0.35);
}

/* Número en insignia circular = ancla de jerarquía + nodo del timeline.
   Anillo glaciar + relleno petrol radial + filo interior → nodo "maquinado",
   no una pegatina plana. El anillo exterior lo asienta sobre el hilo. */
.flow-step span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(185, 210, 212, 0.32);
    background:
        radial-gradient(120% 120% at 50% 18%, rgba(54, 132, 139, 0.35), rgba(0, 61, 79, 0.7) 72%);
    color: var(--pac-glaciar);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 5px rgba(0, 61, 79, 0.28);
    transition:
        background 320ms var(--pac-ease),
        border-color 320ms var(--pac-ease),
        box-shadow 320ms var(--pac-ease),
        color 320ms var(--pac-ease);
}

.flow-step strong {
    flex: 1 1 auto;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.012em;
    transition: color 320ms var(--pac-ease);
}

/* Chevron de disclosure (dibujado, sin librería de iconos).
   translateY(-2px) compensa el peso visual del trazo en V → óptica centrada. */
.flow-step::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 6px;
    border-right: 1.5px solid rgba(185, 210, 212, 0.55);
    border-bottom: 1.5px solid rgba(185, 210, 212, 0.55);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 360ms var(--pac-ease), border-color 320ms var(--pac-ease);
}

.flow-disclosure.is-open .flow-step::after {
    transform: translateY(2px) rotate(-135deg);
    border-color: #fff;
}

.flow-step-final {
    background: linear-gradient(135deg, rgba(54, 132, 139, 0.16), rgba(185, 210, 212, 0.07));
    border-color: rgba(185, 210, 212, 0.22);
}

/* Pasos en reposo retroceden (atenuados) para que el activo lidere la lectura;
   el hilo del timeline mantiene la continuidad entre ellos. */
.flow-disclosure {
    position: relative;
    opacity: 0.5;
    transition:
        opacity 480ms var(--pac-ease),
        transform 480ms var(--pac-ease);
}

@media (hover: hover) {
    .flow-disclosure:not(.is-open):hover {
        opacity: 0.78;
    }
}

.flow-disclosure.is-open {
    opacity: 1;
}

/* Paso activo: identidad clara sobre el azul. Borde teal + elevación profunda
   lo separan del fondo; el badge se enciende y proyecta un halo que lo cose al hilo. */
.flow-disclosure.is-open .flow-step {
    background: rgba(54, 132, 139, 0.17);
    border-color: rgba(54, 132, 139, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 18px 50px rgba(0, 61, 79, 0.38);
}

.flow-disclosure.is-open .flow-step span {
    background:
        radial-gradient(120% 120% at 50% 18%, rgba(89, 168, 174, 0.95), var(--pac-teal) 70%);
    border-color: rgba(185, 210, 212, 0.65);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 5px rgba(54, 132, 139, 0.28),
        0 6px 16px rgba(0, 61, 79, 0.4);
}

.flow-disclosure.is-open .flow-step strong {
    color: #fff;
}

/* Apertura/cierre con grid-template-rows (0fr↔1fr): anima la altura REAL del
   contenido, no un max-height fijo. Así el panel que se cierra y el que se abre
   varían su altura de forma proporcional y simultánea → la altura total no fluctúa
   y desaparece el "bote" (antes, con max-height:240 fijo, el cierre se retrasaba y
   el de abajo ya estaba abierto mientras el de arriba no había colapsado). */
.flow-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 520ms var(--pac-ease),
        opacity 300ms ease;
}

.flow-disclosure.is-open .flow-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Donde el navegador lo soporta (Chrome/Edge), animamos height:0↔auto en píxeles
   reales: al cambiar de dropdown, lo que mide el que cierra + lo que mide el que
   abre dan una transición MONÓTONA (sin pico ni hundimiento) → cero "bote", ni hacia
   abajo ni hacia arriba. grid-template-rows (arriba) queda de fallback para el resto. */
@supports (interpolate-size: allow-keywords) {
    .flow-panel {
        interpolate-size: allow-keywords;
        display: block;
        grid-template-rows: none;
        height: 0;
        overflow: hidden;
        transition:
            height 520ms var(--pac-ease),
            opacity 300ms ease;
    }
    .flow-disclosure.is-open .flow-panel {
        grid-template-rows: none;
        height: auto;
    }
}

/* El texto se despliega con un leve ascenso (no aparece de la nada).
   padding-left 82px = badge 38 + gap 20 + padding 24 → columna alineada con el título. */
.flow-panel p {
    margin: 0;
    min-height: 0;
    overflow: hidden;
    padding: 12px 26px 22px 82px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 19px;
    line-height: 1.62;
    max-width: 58ch;
    transform: translateY(6px);
    transition: transform 520ms var(--pac-ease);
}

.flow-disclosure.is-open .flow-panel p {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .flow-disclosure,
    .flow-step,
    .flow-step span,
    .flow-step::after,
    .flow-panel,
    .flow-panel p {
        transition: opacity 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease, max-height 200ms ease !important;
        transform: none !important;
    }

    /* Sin desplazamientos de entrada: el contenido aparece, no se mueve. */
    .pac-flow .flow-copy > *,
    .flow-canvas.animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: opacity 200ms ease !important;
    }
    .flow-canvas.visible .flow-disclosure { animation: none !important; }

    /* El chevron conserva su forma y su giro abierto/cerrado (indica estado),
       solo pierde el micro-desplazamiento vertical. */
    .flow-step::after {
        transform: rotate(45deg) !important;
        transition: border-color 200ms ease !important;
    }
    .flow-disclosure.is-open .flow-step::after { transform: rotate(-135deg) !important; }
}

/* ===== EDITORIAL ROWS ===== */
.pac-row {
    padding: clamp(70px, 9vw, 120px) 0;
    background: transparent;
}

.pac-row--tint {
    background: transparent;
}

.pac-row--remote { scroll-margin-top: 92px; }

.feature-grid {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: clamp(48px, 6vw, 84px);
    align-items: center;
}

.feature-grid-reverse {
    grid-template-columns: 1.14fr 0.86fr;
}

.feature-grid-reverse .feature-copy { order: 2; }
.feature-grid-reverse .feature-visual { order: 1; }

.feature-visual { min-width: 0; }

/* Alta remota: recurso crudo, sin superficie, borde ni elevación añadidos. */
.remoteOnboardingMock {
    width: min(560px, 100%);
    margin: 0 auto;
}

/* En móvil el PNG conserva su proporción y se acerca a los bordes sin desbordar. */
@media (max-width: 720px) {
    .body--pacientes .remoteOnboardingMock {
        width: calc(100vw - 20px);
        max-width: 620px;
        position: relative;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }
}

.remoteOnboardingMock img {
    display: block;
    width: 100%;
    height: auto;
    filter:
        drop-shadow(0 18px 24px rgba(0, 61, 79, 0.14))
        drop-shadow(0 4px 7px rgba(0, 61, 79, 0.08));
}

/* Superficie del mockup = pieza "mecanizada" (Doppelrand), no pegatina:
   radio squircle generoso y CONCÉNTRICO con los paneles internos, filo glaciar
   a 1px, reflejo interior superior y elevación EN CAPAS (ambiente difuso +
   contacto cercano) reusando los tokens del proyecto. Antes usaba la sombra
   plana (--pac-shadow-*); ahora comparte el lenguaje de la ficha del hero. */
.mock-surface {
    position: relative;
    min-height: 480px;
    padding: 30px;
    overflow: hidden;
    border-radius: var(--pac-radius-lg);
    border-color: rgba(185, 210, 212, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.86));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        var(--pac-elev-card);
    transition: transform 320ms var(--pac-ease-out), box-shadow 320ms var(--pac-ease-out);
}

/* Halo glaciar/teal sembrado detrás del contenido: ancla la composición y da
   profundidad atmosférica (no es fondo de sección). Sin eventos, GPU-friendly. */
.mock-surface::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(80% 70% at 70% 18%, rgba(54, 132, 139, 0.10), rgba(54, 132, 139, 0) 72%);
    pointer-events: none;
}

/* El contenido vive por encima del halo. */
.mock-surface > * { position: relative; z-index: 1; }

/* Variante con vídeo: el mockup-vídeo llena la superficie (sin padding); el marco
   del .mock-surface (borde, radio, sombra) hace de bisel alrededor. */
.mock-surface.mock-surface--video {
    padding: 0;
    min-height: 0;
    aspect-ratio: 960 / 742;   /* = resolución del vídeo → sin bordes negros */
}
.mock-video {
    display: block;
    /* Zoom de 1px: crece 1px por cada borde y el overflow:hidden del surface recorta
       esa línea fina del contorno del vídeo. */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    margin: -1px;
    object-fit: cover;
    border-radius: inherit;
}

/* ===== Consentimientos: pila de fotos con barrido secuencial =====
   base + 3 capas superpuestas (misma resolución 1358×1178). El JS oscurece la base
   y enciende una capa cada vez, con línea + etiqueta escrita; al acabar restaura. */
/* El PNG base ya trae su propio radio: el contenedor no impone borde, radio ni
   recorte (si no, se recortaría el redondeo del PNG o asomaría el marco). */
.mock-surface.consent-stack {
    padding: 0;
    min-height: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.consent-stack .cs-frame {
    position: relative;
    aspect-ratio: 1100 / 1145;
    border-radius: 10px;   /* un punto de radio sobre el del propio PNG */
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 61, 79, 0.1);   /* sombra muy leve, brand-tinted */
}

/* Fila de consentimientos: hueco texto↔foto más estrecho, y la foto se ensancha un
   poco hacia ese hueco (sin tocar el ancho del texto). Solo desktop. */
@media (min-width: 1081px) {
    .feature-grid:has(.consent-stack) {
        gap: clamp(32px, 4vw, 56px);
    }
    .consent-stack {
        width: calc(100% + clamp(16px, 3vw, 40px));
        margin-left: calc(-1 * clamp(16px, 3vw, 40px));
    }
}
.consent-stack .cs-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-base {
    z-index: 1;
    transition: filter 700ms var(--pac-ease);
}
.consent-stack.is-dimmed .cs-base { filter: brightness(0.9); }   /* -10% */
.cs-layer {
    z-index: 2;
    opacity: 0;
    transition: opacity 600ms var(--pac-ease);
}
.cs-layer.is-on { opacity: 1; }

/* Línea que sale del campo iluminado hacia su etiqueta. El JS la coloca (left/top)
   en cada capa; teal para que contraste sobre la plantilla clara. */
.cs-line {
    position: absolute;
    z-index: 4;
    width: 2px;
    height: 8%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    background: var(--pac-teal);
    box-shadow: 0 0 8px rgba(54, 132, 139, 0.55);
    opacity: 0;
    transition: transform 380ms var(--pac-ease), opacity 240ms ease;
    pointer-events: none;
}
.consent-stack.is-cueing .cs-line { opacity: 1; transform: translateX(-50%) scaleY(1); }

/* Etiqueta (el texto lo escribe el JS letra a letra). El JS la coloca por capa. */
.cs-label {
    position: absolute;
    z-index: 5;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 61, 79, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(185, 210, 212, 0.5);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.12em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}
.consent-stack.is-cueing .cs-label { opacity: 1; }
.cs-label:empty { opacity: 0 !important; }   /* sin pastilla vacía entre etiquetas */

@media (hover: hover) and (pointer: fine) {
    .mock-surface:hover {
        transform: translateY(-4px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            var(--pac-elev-module-active);
    }
}







































@keyframes pacSyncPulse {
    0%, 70%, 100% { transform: scale(1); opacity: 1; }
    35%           { transform: scale(1.35); opacity: 0.78; }
}










/* ===== Firma en un segundo: diagrama de 4 nodos en zigzag (gris) que una traza
   SVG recorre iluminándolos en orden; al final la barra escribe el texto. ===== */
.sign-flow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    min-height: 430px;
}
/* Sin fondo: el diagrama va directo sobre la sección (sin tarjeta, borde ni sombra). */
.mock-surface.sign-flow {
    background: none;
    border: 0;
    box-shadow: none;
}
.mock-surface.sign-flow::after { display: none; }
.mock-surface.sign-flow:hover { transform: none; box-shadow: none; }
.sf-diagram {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 54px 78px;
    place-items: center;
    padding-bottom: 60px;   /* reserva el desnivel del nodo 4 para que no pise la barra */
}
.sf-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}
.sf-line .sf-trace {
    fill: none;
    stroke: var(--pac-teal);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sf-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 12px;
}
/* Romper el cuadrado: 2 baja respecto a 1; 3 baja lo mismo; 4 baja respecto a 3 igual
   que 2 respecto a 1. (data-sf 0=1, 1=2, 2=3, 3=4). La traza se mide en vivo y se adapta. */
.sf-node[data-sf="1"] { transform: translateY(28px); }
.sf-node[data-sf="2"] { transform: translateY(28px); }
.sf-node[data-sf="3"] { transform: translateY(56px); }
/* Nodo en reposo: gris. */
.sf-ico {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--pac-line);
    background: linear-gradient(180deg, #fff, var(--pac-mist));
    color: rgba(11, 52, 64, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition:
        color 360ms var(--pac-ease),
        border-color 360ms var(--pac-ease),
        box-shadow 360ms var(--pac-ease),
        transform 360ms var(--pac-ease);
}
.sf-ico svg { width: 37px; height: 37px; display: block; }
/* Nodo iluminado por la traza. */
.sf-node.is-lit .sf-ico {
    color: var(--pac-teal);
    border-color: rgba(54, 132, 139, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 0 5px rgba(54, 132, 139, 0.12),
        0 10px 22px rgba(0, 61, 79, 0.16);
    transform: translateY(-2px);
}
.sf-label {
    font-size: 14.5px;
    font-weight: 800;
    color: rgba(11, 52, 64, 0.4);
    transition: color 360ms var(--pac-ease);
}
.sf-node.is-lit .sf-label { color: var(--pac-deep); }
/* Barra final: aparece y el JS escribe izquierda + (pausa) + derecha. */
.sf-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border-radius: var(--pac-radius-sm);
    border: 1px solid rgba(54, 132, 139, 0.16);
    background: linear-gradient(180deg, rgba(232, 245, 247, 0.7), rgba(217, 238, 242, 0.5));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 420ms var(--pac-ease), transform 420ms var(--pac-ease);
}
.sf-bar.is-on { opacity: 1; transform: translateY(0); }
/* line-height fijo + min-height igual → la altura no cambia al escribir/borrar. */
.sf-bar__left { color: var(--pac-primary); font-weight: 800; font-size: 14px; line-height: 1.4; min-height: 1.4em; white-space: nowrap; }
.sf-bar__right { color: var(--text-soft); font-weight: 700; font-size: 14px; line-height: 1.4; min-height: 1.4em; white-space: nowrap; }













.portal-message {
    padding: 26px;
    border-radius: var(--pac-radius-sm);
    background: linear-gradient(135deg, var(--pac-primary), var(--pac-teal));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 16px 34px rgba(0, 61, 79, 0.2);
    color: #fff;
}

.portal-message strong {
    display: block;
    margin-bottom: 7px;
    font-size: 1.35rem;
}

.portal-message p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}



















/* ===== Feature list (✓ bullets) ===== */
.feature-list {
    display: grid;
    gap: 10px;
    max-width: 600px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.feature-list li {
    position: relative;
    padding-left: 34px;
    color: var(--text-soft);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

/* Tick sin fondo (solo el check teal) y más grande. */
.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg 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'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* ===== BENEFICIOS ===== */
.pac-benefits {
    padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px);
    background: transparent;
    /* Las prolongaciones de la onda llegan hasta 100vw (incluye scrollbar):
       sin esto aparece scroll horizontal */
    overflow-x: clip;
}

.benefits-intro {
    max-width: 640px;
    margin: 0 auto clamp(40px, 5vw, 60px);
    text-align: center;
}

/* El título cede a una medida más estrecha que su contenedor: tensión editorial,
   nunca una línea que cruza toda la rejilla. */
.body--pacientes .benefits-intro .section-title {
    max-width: 18ch;
    margin-inline: auto;
}

.body--pacientes .benefits-intro .eyebrow { margin-bottom: 20px; }

/* Rejilla de 5 celdas. La fila se lee como un índice: cada celda numerada
   (contador CSS, sin tocar copy) da jerarquía real en vez de 5 bloques planos
   en negrita. El contador arranca en cada .benefit-line. */




/* Índice quieto arriba (01–05): brand atenuado, tabular, tracking amplio.
   El número susurra y el beneficio habla — la jerarquía que faltaba. */


/* Hilo de 1px entre celdas: divisor de rejilla, no acento. Hairline a brand. */


/* Hover solo en puntero fino: tinte glaciar suave + filo superior nítido (1px,
   ancho completo — divisor, no franja lateral) + el índice se enciende a teal.
   Sin mover layout; el realce viene de color/sombra, no de transform de caja. */


/* ===== CTA FINAL =====
   Cierre premium. La <section> es TRANSPARENTE (sin parallax, sin overlay): se
   apoya sobre el fondo claro de la página. La card es de color SÓLIDO (gradiente
   petrol→teal) — nunca glass, nunca blur, nunca neblina blanca. */
.pac-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 5.5vw, 64px) 0 clamp(100px, 12vw, 154px);
    background: transparent;
}

/* Halo glaciar/teal a brand detrás de la card: ancla el cierre y elimina el
   vacío del fondo claro alrededor, igual recurso que el atmosphere del hero.
   Es un gradiente radial sólido (no blur, no glass), sin eventos, GPU-friendly,
   y NO es el fondo de la <section> (sigue transparente). */
.pac-cta::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(1180px, 116%);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(60% 60% at 50% 50%, rgba(54, 132, 139, 0.16), rgba(54, 132, 139, 0) 72%);
    pointer-events: none;
}

/* Entrada: la card sube y aterriza como una pieza (scale leve, nunca desde 0),
   mismo idioma que los mockups editoriales. Antes aparecía estática. */
.pac-cta__card.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px) scale(0.99);
    transition: opacity 820ms var(--pac-ease), transform 820ms var(--pac-ease);
}
.pac-cta__card.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pac-cta__card {
    position: relative;
    z-index: 1;
    max-width: 1020px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px);
    border: 1px solid rgba(207, 229, 233, 0.16);
    border-radius: 32px;
    /* Degradado unificado de las CTA cards de todo el sitio (el de agenda). */
    background: linear-gradient(135deg, var(--pac-deep) 0%, var(--pac-primary) 45%, #1d6a78 100%);
    /* Filo "mecanizado": ambiente difuso hondo + filo superior claro + línea
       inferior oscura que asienta la card sobre el fondo. */
    box-shadow:
        0 38px 100px rgba(0, 61, 79, 0.30),
        0 4px 14px rgba(0, 61, 79, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 30, 40, 0.22);
    text-align: center;
}

.pac-cta__card .eyebrow {
    color: rgba(207, 229, 233, 0.92);
}

.pac-cta__card h2 {
    max-width: 760px;
    margin: 18px auto 22px;
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.2vw, 40px); /* tamaño unificado de títulos CTA */
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    /* Cortes equilibrados → ninguna línea huérfana en el titular del cierre. */
    text-wrap: balance;
}

.pac-cta__card p {
    max-width: 64ch;
    margin: 0 auto;
    color: rgba(207, 229, 233, 0.9);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.pac-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: clamp(34px, 4vw, 44px);
}

/* Feedback de pulsado (Emil): los botones del cierre responden al press con un
   scale sutil. Solo transform; gated a puntero fino para no disparar en táctil.
   El outline gana el mismo lift que el sólido para que la pareja se mueva igual. */
@media (hover: hover) and (pointer: fine) {
    .pac-cta__actions .btnWhiteOutline:hover {
        transform: translateY(-2px);
    }
}
.pac-cta__actions .btn:active {
    transform: scale(0.97);
}

/* ===== RESPONSIVE ===== */

/* Móvil: hero centrado y botones apilados al mismo ancho (mismo criterio
   que el hero de la home). */
@media (max-width: 720px) {
    /* Título más arriba: menos colchón bajo el header fijo. */
    .pac-hero {
        padding-top: 104px;
    }

    /* Títulos un punto más pequeños que el mínimo desktop de sus clamp. */
    .pac-hero__title {
        font-size: 2.3rem;
        margin-top: 14px;
    }

    .body--pacientes .pac-pain__copy .section-title,
    .body--pacientes .benefits-intro .section-title,
    .body--pacientes .pac-flow .section-title {
        font-size: 2.1rem;
    }

    .body--pacientes .feature-copy .section-title {
        font-size: 1.9rem;
    }

    .pac-hero__copy {
        text-align: center;
    }

    .pac-hero__lede {
        margin-inline: auto;
    }

    .pac-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .pac-hero__actions .btn {
        width: min(280px, 100%);
        justify-content: center;
        text-align: center;
    }

    /* Mockups fuera en teléfono: la ficha del hero y el collage del
       "dolor" (chaos-board + sus conexiones SVG) — quedan solo los copys. */
    .pac-hero__visual,
    .pac-pain .chaos-board,
    .pac-pain .pain-links {
        display: none;
    }

    /* Copy del "dolor": centrado (como el hero) y en flex column para
       intercalar la ficha "Todo conectado" entre los párrafos (tras el
       2º, antes del de "EviMedic reúne…") y cortar el bloque de texto. */
    .pac-pain__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pac-pain__copy p {
        margin-inline: auto;
    }

    .pac-pain__copy > .eyebrow { order: 1; }
    .pac-pain__copy > .section-title { order: 2; }
    .pac-pain__copy > p:nth-of-type(1) { order: 3; }
    .pac-pain__copy > p:nth-of-type(2) { order: 4; }

    .pac-pain__copy > .clean-record {
        order: 5;
        margin: 28px auto;
        /* En flex column centrado, sin esto la ficha encoge a fit-content */
        width: min(100%, 420px);
    }

    .pac-pain__copy > p:nth-of-type(3) { order: 6; }

    /* Delays del reveal alineados al orden VISUAL (la ficha va antes que p3) */
    .pac-pain__copy.visible > .clean-record { transition-delay: 380ms; }
    .pac-pain__copy.visible > .section-subtitle:nth-of-type(3) { transition-delay: 470ms; }

    /* Copy del flujo (sección azul "Todo conectado") también centrado. */
    .pac-flow .flow-copy {
        text-align: center;
    }

    .pac-flow .flow-copy p {
        margin-inline: auto;
    }

    /* Filas de features (Ficha única, etc.): copy centrado y el MOCKUP
       intercalado entre los dos párrafos. El copy pasa a display:contents
       para que sus hijos y el visual (hermano) ordenen juntos en el grid
       de 1 columna. (El reveal del copy pierde su caja y no anima; los
       hijos quedan visibles y el visual conserva el suyo.) */
    .body--pacientes .feature-grid .feature-copy {
        display: contents;
    }

    /* Con display:contents el gap del grid (48px) se cuela entre CADA
       hijo: fuera. Mandan los márgenes propios (badge 20, título 22…). */
    .body--pacientes .feature-grid {
        row-gap: 0;
    }

    .body--pacientes .feature-grid .feature-visual {
        margin-block: 22px;
    }

    .body--pacientes .feature-grid .feature-copy > * {
        text-align: center;
        margin-inline: auto;
        /* El reveal (opacity 0 en los hijos hasta .visible) queda roto con
           display:contents — el observer nunca ve el copy sin caja. Los
           hijos van visibles de serie en móvil. */
        opacity: 1;
        transform: none;
        /* Fallback: cualquier hijo sin order explícito va al FINAL (sin
           esto caería en order 0, delante del eyebrow). */
        order: 7;
    }

    /* (El margin-inline auto del genérico ya centra los items del grid.) */
    .body--pacientes .feature-grid .feature-copy > .eyebrow { order: 1; }

    .body--pacientes .feature-grid .feature-copy > .section-title { order: 2; }
    .body--pacientes .feature-grid .feature-copy > p:nth-of-type(1) { order: 3; }

    .body--pacientes .feature-grid .feature-visual { order: 4; }

    .body--pacientes .feature-grid .feature-copy > p:nth-of-type(2),
    .body--pacientes .feature-grid .feature-copy > p:nth-of-type(3) { order: 5; }

    /* Ticks: DEBAJO del último párrafo (cierran la fila, tras el vídeo).
       Texto pegado a la izquierda (junto a su tick) y separación uniforme:
       el gap del grid es la única distancia. (Este selector (0,4,0) ya
       gana a cualquier regla del reveal sin necesidad de !important.) */
    .body--pacientes .feature-grid .feature-copy > .feature-list {
        order: 6;
        margin-top: 18px;
        text-align: left;
        gap: 12px;
    }

    /* Menos aire entre filas editoriales (70px arriba + 70 abajo = 140px
       de hueco entre una y otra era demasiado en teléfono). */
    .pac-row {
        padding: 36px 0;
    }

    /* Overlay "Visible en consulta" sobre el mockup de anamnesis: en
       teléfono tapaba media captura — pastilla compacta en la esquina.
       Prefijo .body--pacientes obligatorio: el bloque base del mismo
       selector está MÁS ABAJO en el archivo y a igual especificidad
       pisaría estas reglas. */
    .body--pacientes .anamShotWrap .portal-message {
        left: 10px;
        bottom: 10px;
        max-width: 72%;
        padding: 10px 14px;
        border-radius: 10px;
    }

    .body--pacientes .anamShotWrap .portal-message strong {
        font-size: 0.92rem;
        margin-bottom: 3px;
    }

    .body--pacientes .anamShotWrap .portal-message p {
        font-size: 0.82rem;
        line-height: 1.45;
        margin: 0;
    }

    /* Tabla de pólizas: 6 columnas no caben en teléfono (todo ellipsis).
       Fuera Aseguradora e ID interno → 4 columnas legibles. El autosort
       JS salta las columnas ocultas (offsetParent null).
       OJO: prefijo .body--pacientes obligatorio — el bloque base de
       .policyMock está MÁS ABAJO en el archivo y a igual especificidad
       pisaría estas reglas. */
    .body--pacientes .policyMock__thead,
    .body--pacientes .policyMock__row {
        /* El nombre se lleva el espacio ganado (que se lea entero). */
        grid-template-columns: 0.42fr 2.15fr 1.05fr 0.55fr;
        gap: 6px;
    }

    .body--pacientes .policyMock__thead span[data-col="ins"],
    .body--pacientes .policyMock__thead span[data-col="id"],
    .body--pacientes .policyMock__ins,
    .body--pacientes .policyMock__id {
        display: none;
    }

    /* Más ancho útil: la card escapa parte del padding del container y
       aprieta su padding interno. */
    .body--pacientes .policyMock {
        margin-inline: -16px;
        padding: 12px 10px;
    }
}

@media (max-width: 1080px) {
    .pac-hero__grid,
    .split-grid,
    .flow-layout,
    .feature-grid,
    .feature-grid-reverse,
    .human-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid-reverse .feature-copy,
    .feature-grid-reverse .feature-visual {
        order: initial;
    }

    .remoteOnboardingMock {
        width: min(560px, 100%);
        margin-inline: auto;
    }

    .pac-hero__copy { max-width: 760px; }

    /* Una sola columna: centra el halo detrás de la mitad visual y la ficha,
       en vez de dejarlos descolgados a la derecha. */
    .pac-hero__grid { gap: clamp(40px, 6vw, 56px); }
    .patient-card {
        left: 0;
        right: 0;
        margin-inline: auto;
        width: min(640px, 96%);
    }
    .module-history { right: 6%; }
    .module-recipes { right: 14%; }

    .pac-flow .flow-copy { position: static; }
    .flow-layout { gap: 54px; }
    
    
    
    
}

@media (max-width: 720px) {
    /* (Las reglas de .patient-card/.floating-module/.chaos-* de esta media
       se podaron: sus contenedores van display:none en ≤720.) */
    .mock-surface { min-height: 380px; padding: 20px; }
    
    
    
    .sf-diagram { gap: 26px 28px; }
    .sf-ico { width: 56px; height: 56px; }
    .sf-ico svg { width: 24px; height: 24px; }
    .sf-bar { flex-direction: column; align-items: flex-start; gap: 4px; }

    /* Flujo en móvil: paso más compacto. Badge 34px → centro = padding 20 + 17 = 37px;
       el hilo y la sangría del panel se recalculan para seguir cruzando el badge. */
    .flow-step { gap: 16px; padding: 17px 20px; }
    .flow-step span {
        width: 34px;
        height: 34px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 0 4px rgba(0, 61, 79, 0.28);
    }
    .flow-step strong { font-size: 1.12rem; }
    .flow-canvas::before { left: 37px; }
    .flow-panel p { padding: 12px 20px 20px 70px; }
    .flow-disclosure.is-open .flow-step span {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 0 0 4px rgba(54, 132, 139, 0.28),
            0 6px 16px rgba(0, 61, 79, 0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Sin promoción de capa innecesaria si el usuario pidió menos motion. */
    .floating-module,
    .patient-card--profile { will-change: auto; }
    /* El resaltado del conector sigue (cambio de estado comprensible), pero sin
       flujo ni pulso de movimiento. */
    .pc-links path.is-active { animation: none; }
    .pc-links circle.is-active { animation: none; transform: none; }

    /* Editorial: los mockups conservan su profundidad y estados, pero sin las
       animaciones de reposo (latido de sincronía, pulso de flujo) ni el lift de
       hover por transform. La elevación en capas se mantiene (es estática). */
    
    .mock-surface { transition: none; }
}

/* ============================================================
   Mockup "Datos auxiliares" (Row 4 — "Tú decides tu anamnesis"):
   calca la pantalla del software (header teal + card de filtros +
   tabla con candados y paginación). Decorativo (aria-hidden).
   ============================================================ */




































/* Foto real del mockup de anamnesis (sustituye al .auxMock calcado). */
.anamShot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(185, 210, 212, 0.55);
    box-shadow: 0 26px 60px rgba(0, 61, 79, 0.14);
}
.anamShotWrap { position: relative; }
.anamShotWrap .portal-message {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    margin: 0;
    max-width: min(82%, 460px);
    padding: 18px 24px;
    /* Mantiene su fondo AZUL y letras blancas del base; solo se superpone a la
       foto con la sombra reforzada para despegarlo. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 26px rgba(0, 61, 79, 0.40),
        0 32px 64px rgba(0, 61, 79, 0.58);
}

/* ============================================================
   Mockup "Pólizas y tarifas" (Row 6): tabla calcada del software.
   ============================================================ */
.policyMock {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line, #d4e0e1);
    border-radius: 16px;
    box-shadow: 0 26px 60px rgba(0, 61, 79, 0.12);
}
.policyMock__table { font-size: .78rem; }
.policyMock__thead,
.policyMock__row {
    display: grid;
    grid-template-columns: 0.5fr 1.9fr 1.15fr 1.4fr 1.05fr 0.6fr;
    gap: 10px;
    align-items: center;
}
.policyMock__thead {
    margin-bottom: 2px;
    padding: 10px;
    background: var(--brand-pale, #f4f8f8);
    border-radius: 8px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-soft, #5a6b6e);
}
.policyMock__row {
    position: relative;
    background: #fff;
    padding: 15px 10px;
    border-bottom: 1px solid var(--brand-fade, #e8eff0);
    will-change: transform;
}
.policyMock__code { color: var(--brand-soft, #36848b); font-weight: 600; }
.policyMock__name { font-weight: 600; color: var(--text, #1a2a2e); }
.policyMock__name,
.policyMock__ins,
.policyMock__id { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.policyMock__ins,
.policyMock__id { color: var(--text-soft, #5a6b6e); }
.policyMock__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.policyMock__chip svg { flex: none; }
.policyMock__chip--policy {
    color: var(--brand, #00556d);
    background: rgba(0, 85, 109, 0.07);
    border-color: rgba(0, 85, 109, 0.18);
}
.policyMock__chip--rate {
    color: var(--brand-soft, #36848b);
    background: rgba(54, 132, 139, 0.08);
    border-color: rgba(54, 132, 139, 0.22);
}
.policyMock__stCol { display: flex; align-items: center; justify-content: center; }
.policyMock__ok { color: #2a9d6f; }
.policyMock__no { color: #d8584f; }
.policyMock__foot {
    padding: 12px 4px 2px;
    font-size: .68rem;
    color: var(--text-soft, #5a6b6e);
}
.policyMock__foot b { color: var(--brand, #00556d); }

/* Indicador de orden en las cabeceras: ↕ tenue por defecto; ↑/↓ teal en la activa. */
.policyMock__thead span[data-col]::after {
    content: "↕";
    margin-left: 5px;
    font-size: 1.3em;
    opacity: .35;
    transition: opacity .25s, color .25s;
}
.policyMock__thead span.is-asc,
.policyMock__thead span.is-desc { color: var(--brand, #00556d); }
.policyMock__thead span.is-asc::after { content: "↑"; opacity: 1; color: var(--brand, #00556d); }
.policyMock__thead span.is-desc::after { content: "↓"; opacity: 1; color: var(--brand, #00556d); }

/* CTA final: los dos botones con el MISMO ancho (el del más ancho), centrados. */
.pac-cta__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 14px;
    width: fit-content;
    margin-inline: auto;
}
@media (max-width: 720px) {
    .pac-cta__actions { grid-auto-flow: row; }
}

/* ============================================================
   Sección "Orden visible": línea ondulada (timeline) con los 5 hitos
   en valles/crestas — icono como nodo en la línea, número y texto al
   exterior (abajo en valles 01/03/05, arriba en crestas 02/04).
   ============================================================ */
.benefitWave {
    position: relative;
    margin: 18px auto 0;
    max-width: 1100px;
    height: clamp(230px, 24vw, 285px);
    color: var(--brand-soft, #36848b);
}
.benefitWave__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.benefitWave__node {
    position: absolute;
    transform: translate(-50%, -50%);
}
/* Icono ENCIMA de la línea (su base toca el punto de la onda). */
.benefitWave__icon {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand, #00556d);
    box-shadow: 0 8px 18px rgba(0, 61, 79, 0.12);
    transition: background .5s ease, color .5s ease, box-shadow .5s ease;
}
/* Barrido: cada nodo enciende cuando el pulso pasa y se apaga poco a poco.
   Los delays escalonan izq→der, sincronizados con el avance del pulso (~2,7 s). */
/* Punto de luz: lo MUEVE el JS a lo largo del path real (getPointAtLength),
   así sigue exactamente la curva. Cada icono hace flash cuando el punto lo cruza. */
.benefitWave__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand, #00556d);
    box-shadow: 0 0 7px 2px rgba(0, 85, 109, 0.35);
    opacity: 0;
    pointer-events: none;
}
.benefitWave__icon.is-flash { animation: iconFlash 1.5s ease-out; }
@keyframes iconFlash {
    0%, 100% {
        background: #fff;
        color: var(--brand, #00556d);
        box-shadow: 0 8px 18px rgba(0, 61, 79, 0.12);
    }
    12% {
        background: var(--brand, #00556d);
        color: #fff;
        box-shadow: 0 0 0 8px rgba(0, 85, 109, 0.13), 0 12px 28px rgba(0, 85, 109, 0.4);
    }
}
@media (prefers-reduced-motion: reduce) {
    .benefitWave__dot { display: none; }
}
/* Número y texto DEBAJO de la línea. */
.benefitWave__num {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand, #00556d);
}
.benefitWave__text {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    width: 160px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-soft, #5a6b6e);
}
/* Crestas (02 y 04): invertido — número/texto ARRIBA de la línea, icono DEBAJO. */
.benefitWave__node--peak .benefitWave__icon { bottom: auto; top: 8px; }
.benefitWave__node--peak .benefitWave__num { top: auto; bottom: 8px; }
.benefitWave__node--peak .benefitWave__text { top: auto; bottom: 40px; }

/* Móvil: la onda no cabe → se apila como lista (icono · número · texto). */
@media (max-width: 760px) {
    .benefitWave {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 18px;
    }
    .benefitWave__line { display: none; }

    /* Sin puntito viajero: el JS lo sigue moviendo (invisible) y dispara
       los flashes de los iconos en orden, que es lo que se conserva. */
    .benefitWave__dot { display: none; }

    /* Título de la sección centrado; el badge conserva el patrón común con
       sus dos líneas laterales también en móvil. */
    .benefits-intro {
        max-width: none;
        text-align: center;
    }

    .body--pacientes .benefits-intro .section-title {
        margin-inline: auto;
    }

    .benefitWave__node {
        position: static;
        transform: none;
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 14px;
        width: 100%;
    }
    .benefitWave__icon,
    .benefitWave__num,
    .benefitWave__text {
        position: static;
        transform: none;
        top: auto;
        bottom: auto;
        width: auto;
        text-align: left;
    }

    /* El width:auto de arriba achataba el círculo (colapsaba al ancho del
       SVG): dimensiones fijas de nuevo. */
    .benefitWave__icon {
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
    }

    /* CTA final: los 48px de padding interno + 32 del container dejaban
       ~230px de texto (badge a 2 líneas, título asfixiado, el teléfono
       saltando de línea). Padding contenido y tipografía con aire. */
    .pac-cta__card {
        padding: 38px 20px 34px;
        border-radius: 24px;
    }

    .pac-cta__card .eyebrow {
        white-space: nowrap;
    }

    .pac-cta__card h2 {
        margin: 16px auto 18px;
        line-height: 1.12;
    }

    .pac-cta__card p {
        font-size: 1.02rem;
        line-height: 1.6;
    }

    .pac-cta__card .ctaContact {
        margin-top: 18px;
        font-size: 0.86rem;
    }

    /* El número nunca se parte; el resto del texto puede envolver. */
    .pac-cta__card .ctaContact a {
        white-space: nowrap;
    }

    /* Fuera el halo (se veía su recorte rectangular tras la card) y la
       card se ensancha hasta ese borde: 12px de respiración lateral. */
    .pac-cta::before {
        display: none;
    }

    .pac-cta .container {
        padding-inline: 12px;
    }

    /* EL GLOW ERA ESTO: la sombra externa de la card (38px de offset,
       100px de blur) recortándose contra la sección. En móvil quedan
       solo los filos internos. */
    .pac-cta__card {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            inset 0 -1px 0 rgba(0, 30, 40, 0.22);
    }
}

/* Carrusel quickNav (bloque compartido): título centrado y tamaño medio */
.quickNavBlock {
    text-align: center;
}

.quickNavBlock h2 {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
    color: var(--color-primary, #00556d);
}

/* Carrusel quickNav: igualar el aire arriba y abajo (abajo = 92 por el pac-cta) */
.body--pacientes .quicknav-section {
    padding-top: 92px;
}