/* =============================================================================
   CitApp — landing de agendamiento masivo para Suros
   Idea: sv4-270

   Lenguaje visual: concreto blanco iluminado por una sola brasa.
   Lienzo Paper (#ffffff), bandas Fog (#f3f3f7), marcos oscuros Abyss
   (#000710) y Carbon (#15191e) que abren y cierran el cuerpo, y un único
   acento cromático — Ember (#ff5900) — reservado a la acción primaria,
   los indicadores de pestaña y los enlaces de la barra de anuncio.

   Reglas del sistema:
   - Sin sombras para elevar tarjetas; la jerarquía viene de Paper sobre Fog
     y de bordes capilares Mist de 1px. La sombra suave queda reservada
     para UI flotante (tooltip, botones flotantes, splash, menú móvil).
   - Radio 12px en botones, inputs y tarjetas; 6px solo en etiquetas.
   - Inter con tracking negativo en todos los tamaños: la compresión es
     la firma tipográfica. Sin alternativas contextuales ni ligaduras.
   - Un solo acento. Nunca dos EMEA en la misma región.
   ============================================================================= */

/* =============================================================================
   0. Preferencia de movimiento reducido
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .citapp-warp-streak,
    .citapp-warp-scan,
    .citapp-pointer { display: none !important; }
}

/* =============================================================================
   1. Tokens y temas
   ============================================================================= */

.citapp-shell {
    /* Superficies: el lienzo es blanco casi puro; Fog es el único
       off-white y genera apilado de capas sobre Paper */
    --cita-paper: #ffffff;
    --cita-fog: #f3f3f7;
    --cita-card: #ffffff;
    --cita-input: #f3f3f7;

    /* Texto: Ink domina, Graphite es el gris de trabajo para párrafos,
       Pewter para textos de apoyo y Steel para etiquetas de chrome */
    --cita-ink: #000000;
    --cita-graphite: #60646c;
    --cita-pewter: #6f737b;
    --cita-steel: #8b8d98;

    /* Estructura: líneas capilares que definen sin dar peso visual */
    --cita-mist: #b9bbc6;
    --cita-line: rgba(185, 187, 198, 0.42);
    --cita-line-strong: #b9bbc6;

    /* Marcos oscuros: Abyss al pie, Carbon en el cromo superior */
    --cita-abyss: #000710;
    --cita-carbon: #15191e;

    /* Único acento del sistema */
    --cita-ember: #ff5900;
    --cita-ember-press: #e64f00;

    /* Sobre superficies oscuras */
    --cita-link-dark: #b9bbc6;

    /* Verde de marca de WhatsApp, usado solo en su emblema */
    --cita-whatsapp: #25d366;
    --cita-whatsapp-hover: #4ce784;

    /* Sombra: únicamente para UI flotante */
    --cita-float-shadow: 0 8px 24px rgba(0, 7, 16, 0.10);

    /* Tipografía */
    --cita-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cita-mono: ui-monospace, 'Cascadia Code', 'Consolas', 'SFMono-Regular', monospace;

    --text-caption: 12px;
    --text-body-sm: 14px;
    --text-body: 16px;
    --text-subheading: 20px;
    --text-heading-sm: 24px;
    --text-heading: 36px;
    --text-heading-lg: 48px;

    --tracking-caption: -0.01em;
    --tracking-body-sm: -0.01em;
    --tracking-body: -0.01em;
    --tracking-subheading: -0.01em;
    --tracking-heading-sm: -0.01em;
    --tracking-heading: -0.02em;
    --tracking-heading-lg: -0.025em;

    /* Espaciado */
    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-48: 48px;
    --spacing-72: 72px;
    --spacing-80: 80px;

    /* Radios: un valor por grupo, nunca un compromiso intermedio */
    --cita-radius-tag: 6px;
    --cita-radius: 12px;

    /* Movimiento: salidas exponenciales, sin rebote */
    --cita-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --cita-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

    --cita-page-max: 1200px;
    --cita-nav-h: 64px;

    background: var(--cita-paper);
    color: var(--cita-ink);
    font-family: var(--cita-font);
    font-size: var(--text-body);
    line-height: 1.5;
    letter-spacing: var(--tracking-body);
    font-weight: 400;
    font-feature-settings: "calt" 0, "liga" 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    isolation: isolate;
    position: relative;
    overflow-x: clip;
    scroll-behavior: smooth;
    color-scheme: light;
}

.citapp-shell[data-theme="dark"] {
    /* El tema oscuro no es una segunda paleta: es el Abyss del sistema
       aplicado al cuerpo, con el mismo Ember como único acento */
    --cita-paper: #000710;
    --cita-fog: #0d1218;
    --cita-card: #0d1218;
    --cita-input: #15191e;

    --cita-ink: #ffffff;
    --cita-graphite: #b9bbc6;
    --cita-pewter: #8b8d98;
    --cita-steel: #8b8d98;

    --cita-mist: #3a4049;
    --cita-line: rgba(185, 187, 198, 0.20);
    --cita-line-strong: #6f737b;

    --cita-link-dark: #b9bbc6;

    color-scheme: dark;
}

/* =============================================================================
   2. Tipografía
   ============================================================================= */

.citapp-shell h1,
.citapp-shell h2,
.citapp-shell h3,
.citapp-shell h4,
.citapp-shell p,
.citapp-shell ul,
.citapp-shell li { margin: 0; }

.citapp-shell ul { list-style: none; padding: 0; }

.citapp-shell a { color: inherit; text-decoration: none; }

/* Bootstrap Icons dibuja el glifo con ::before, hereda el line-height del
   contenedor y aplica vertical-align negativo. En una caja circular eso deja
   la caja más alta que el glifo y el icono se ve descentrado.

   El margin:0 no es cosmético: el glifo llega con un margen lateral heredado
   de las hojas globales del portal, y con justify-content:center un margen
   lateral desplaza el icono la mitad de su ancho (6px con un margen de 12px),
   que es exactamente el descentrado horizontal que se veía. El shellCitApp
   es dueño de sus cajas de icono, así que neutraliza el margen aquí. */
.citapp-shell i[class^="bi-"],
.citapp-shell i[class*=" bi-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    flex: none;
}

.citapp-shell code {
    font-family: var(--cita-mono);
    font-size: 0.875em;
    letter-spacing: 0;
    background: var(--cita-fog);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius-tag);
    padding: 1px 5px;
    color: var(--cita-graphite);
}

/* Titular del hero. El texto ocupa el 45% de la rejilla, así que la
   escala arranca en heading-lg (48px) en lugar de display (72px): a 64px
   la línea más larga no cabe en la columna y desborda sobre el visual. */
.citapp-h1 {
    font-size: clamp(32px, 4.4vw, var(--text-heading-lg));
    line-height: 1.06;
    letter-spacing: var(--tracking-heading-lg);
    font-weight: 600;
    color: var(--cita-ink);
    text-wrap: balance;
}

/* El acento es un subrayado de texto, no un bloque: así sobrevive al
   salto de línea sin salirse del último carácter ni del contenedor. */
.citapp-h1-accent {
    color: var(--cita-ink);
    text-decoration: underline;
    text-decoration-color: var(--cita-ember);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    text-decoration-skip-ink: none;
}

/* Medida del titular de sección: 24ch evita que un titular de cinco o seis
   palabras se parta en tres líneas dentro de una columna ancha. */
.citapp-h2 {
    font-size: clamp(28px, 3.4vw, var(--text-heading));
    line-height: 1.21;
    letter-spacing: var(--tracking-heading);
    font-weight: 600;
    color: var(--cita-ink);
    max-width: 24ch;
    text-wrap: balance;
}

.citapp-lead {
    font-size: var(--text-body);
    line-height: 1.5;
    letter-spacing: var(--tracking-body);
    color: var(--cita-graphite);
    max-width: 62ch;
}

/* Etiqueta de sección: steel, nunca más larga que una etiqueta */
.citapp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    font-weight: 500;
    color: var(--cita-steel);
}

.citapp-eyebrow i { font-size: 0.9em; }

.citapp-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cita-ember);
    flex: none;
}

/* =============================================================================
   2b. Emblema de WhatsApp
   -----------------------------------------------------------------------------
   Todo emblema de WhatsApp de la landing conserva su verde de marca. Es la
   única excepción cromática fuera de Ember y está acotada al icono: conserva la
   identidad del servicio sin introducir un segundo acento en el resto del
   sistema. Alcolarse sobre el nombre de la clase y no sobre cada componente,
   para que los 14 usos que hay hoy y los que se agreguen después hereden el
   color sin tocar el marcado.
   ============================================================================= */

.citapp-shell .bi-whatsapp { color: var(--cita-whatsapp); }

.citapp-shell a:hover .bi-whatsapp,
.citapp-shell a:focus-visible .bi-whatsapp,
.citapp-shell button:hover .bi-whatsapp,
.citapp-shell button:focus-visible .bi-whatsapp { color: var(--cita-whatsapp-hover); }

/* =============================================================================
   3. Contenedor y rejilla de sección
   ============================================================================= */

.citapp-container {
    width: 100%;
    max-width: var(--cita-page-max);
    margin: 0 auto;
    padding: 0 32px;
}

.citapp-main { display: block; }

.citapp-section {
    padding: var(--spacing-80) 0;
    background: var(--cita-paper);
}

.citapp-section--fog { background: var(--cita-fog); }

/* Alternancia de bandas: Paper y Fog se turnan para marcar los bloques
   sin necesidad de bordes ni de sombras. */
/* Encabezado de sección. No reserva columna para el número de sección: al
   retirarse la numeración en todas las secciones, ese hueco de 64px quedaba
   vacío. La copia arranca ahora en el borde del contenedor, alineada con el
   contenido de la sección. */
.citapp-section-head { margin-bottom: var(--spacing-48); }

.citapp-section-copy { display: flex; flex-direction: column; gap: 16px; }

/* =============================================================================
   4. Botones
   ============================================================================= */

.citapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--cita-font);
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-body-sm);
    line-height: 1.43;
    padding: 8px 16px;
    border-radius: var(--cita-radius);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 140ms var(--cita-ease), color 140ms var(--cita-ease), border-color 140ms var(--cita-ease), transform 180ms var(--cita-ease);
}

.citapp-btn i { font-size: 0.95em; }

/* Variante rellena: la única acción primaria de la región */
.citapp-btn-primary {
    background: var(--cita-ember);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    /* Contexto de apilado propio para que la mezcla de las capas internas no
       alcance al texto de detrás del botón. */
    isolation: isolate;
}

.citapp-btn-primary:hover,
.citapp-btn-primary:focus-visible {
    background: var(--cita-ember-press);
    transform: translateY(-1px);
}

/* Barrido de luz y rejilla sobre el botón primario.
   Mismo gesto que el botón "Solicitar demostración" de la landing de Suros
   (sx-btn-primary): dos capas con mix-blend-mode screen que solo se activan al
   pasar el cursor o al enfocar con teclado, escalonadas 80ms y 140ms. Aquí los
   tonos son los del sistema CitApp, no los azules de la marca Suros.

   El efecto necesita un relleno de color: con mix-blend-mode: screen sobre
   Paper no habría nada que iluminar, por eso se aplica solo a la variante
   rellena y no a la fantasma ni a la de contorno.

   z-index:-1 deja las capas por encima del relleno del botón y por debajo de
   la etiqueta y del icono, que se mantienen nítidos en todo momento. */
.citapp-btn-primary::before,
.citapp-btn-primary::after {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Rejilla: dos rejillas cruzadas que entran con escala y salen desenfocadas */
.citapp-btn-primary::before {
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 89, 0, 0.42) 0,
            rgba(255, 89, 0, 0.42) 4px,
            transparent 4px,
            transparent 8px),
        repeating-linear-gradient(0deg,
            rgba(255, 150, 90, 0.36) 0,
            rgba(255, 150, 90, 0.36) 4px,
            transparent 4px,
            transparent 8px);
    background-size: 120% 120%;
    transform: translate3d(0, 10%, 0);
}

/* Barrido: una banda de luz cálida que cruza de izquierda a derecha */
.citapp-btn-primary::after {
    inset: -12%;
    background-image:
        linear-gradient(90deg,
            rgba(255, 208, 168, 0.55) 10%,
            transparent 42%,
            rgba(255, 120, 40, 0.5) 72%,
            transparent 100%),
        repeating-linear-gradient(135deg,
            rgba(255, 176, 128, 0.32) 0,
            rgba(255, 176, 128, 0.32) 2px,
            transparent 2px,
            transparent 6px);
    background-size: 180% 180%;
    transform: translate3d(-80%, 0, 0);
}

.citapp-btn-primary:hover::before,
.citapp-btn-primary:focus-visible::before {
    opacity: 1;
    animation: citapp-btn-grid 900ms var(--cita-ease) forwards 80ms;
}

.citapp-btn-primary:hover::after,
.citapp-btn-primary:focus-visible::after {
    opacity: 1;
    animation: citapp-btn-sweep 1100ms var(--cita-ease) forwards 140ms;
}

@keyframes citapp-btn-grid {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0) scale(0.96);
        filter: blur(3px);
    }
    40% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.02);
        filter: blur(0);
    }
    100% {
        opacity: 0.4;
        transform: translate3d(0, -10%, 0) scale(1.1);
        filter: blur(3px);
    }
}

@keyframes citapp-btn-sweep {
    0% {
        opacity: 0;
        transform: translate3d(-90%, 0, 0);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(110%, 0, 0);
    }
}

/* Variante fantasma: sin fondo, sin borde, texto Ink */
.citapp-btn-ghost {
    background: transparent;
    color: var(--cita-ink);
}

.citapp-btn-ghost:hover,
.citapp-btn-ghost:focus-visible {
    background: var(--cita-fog);
}

.citapp-btn-outline {
    background: transparent;
    color: var(--cita-ink);
    border-color: var(--cita-mist);
}

.citapp-btn-outline:hover,
.citapp-btn-outline:focus-visible {
    background: var(--cita-fog);
    border-color: var(--cita-steel);
}

.citapp-btn-lg { font-size: var(--text-body); padding: 10px 20px; }
.citapp-btn-sm { font-size: var(--text-caption); padding: 6px 12px; }
.citapp-btn-block { display: flex; width: 100%; }

/* Marcas de esquina: estructura dibujada con reglas capilares en Mist.
   Se conservan del diseño anterior, pero dejan de ser adorno de neón. */
.citapp-ticks {
    position: absolute;
    inset: 10px;
    pointer-events: none;
}

.citapp-ticks i {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--cita-line-strong);
}

.citapp-ticks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.citapp-ticks i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.citapp-ticks i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.citapp-ticks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.citapp-btn:focus-visible,
.citapp-shell a:focus-visible,
.citapp-shell button:focus-visible {
    outline: 2px solid var(--cita-ember);
    outline-offset: 2px;
}

/* =============================================================================
   5. Barra de anuncio — relleno ámbar quemado, texto blanco animado
   -----------------------------------------------------------------------------
   La barra se pide con texto blanco. El blanco sobre el Ember puro (#ff5900)
   da 3.2:1 y no llega al mínimo AA de 4.5:1 para el texto de 12px, así que el
   relleno baja a un ámbar quemado del mismo tono. El degradado está construido
   para que ningún punto baje del mínimo: el extremo claro se queda en #cc4600.

   El relleno se declara con valores literales, fuera de los bloques de tema a
   propósito: no puede depender de un token que se invierta al cambiar de tema,
   o la barra dejaría de verse igual en claro y en oscuro.
   ============================================================================= */

.citapp-announce {
    position: relative;
    z-index: 60;
    /* Ámbar quemado del mismo tono que Ember. El blanco sobre #ff5900 da
       3.2:1 y no llega al mínimo AA de 4.5:1 para 12px; sobre este el blanco
       rinde 4.7:1 en el extremo claro y 6.1:1 en el oscuro. */
    background: linear-gradient(100deg, #b03a00 0%, #cc4600 52%, #b03a00 100%);
    color: #ffffff;
    overflow: hidden;
}

/* Barrido de luz muy tenue: da movimiento sin robarle el foco al mensaje */
.citapp-announce::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22) 48%,
        transparent 66%);
    transform: translateX(-100%);
    animation: citapp-announce-sheen 7s var(--cita-ease) infinite;
    pointer-events: none;
}

@keyframes citapp-announce-sheen {
    0%, 62% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.citapp-announce-inner {
    position: relative;
    max-width: var(--cita-page-max);
    margin: 0 auto;
    padding: 7px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    font-weight: 500;
    text-align: center;
}

/* --- Texto blanco animado --------------------------------------------------

   La entrada es lo que da el aire profesional: el mensaje aparece con un
   desplazamiento corto, la chispa y el enlace lo siguen escalonados, y el
   subrayado del enlace se dibuja de izquierda a derecha. Después queda un
   resplandor lento y muy suave, para que la barra siga viva sin parpadear. */

.citapp-announce-text {
    animation:
        citapp-announce-in 520ms var(--cita-ease) both,
        citapp-announce-glow 5.4s var(--cita-ease) 900ms infinite;
}

@keyframes citapp-announce-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Resplandor: un halo blanco que respira, por debajo del umbral en el que se
   percibiría como parpadeo. */
@keyframes citapp-announce-glow {
    0%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.42); }
}

/* Chispa: entra girando media vuelta y se asienta. */
.citapp-announce-spark {
    font-size: 11px;
    animation: citapp-announce-spark-in 700ms var(--cita-ease) 160ms both;
}

@keyframes citapp-announce-spark-in {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.6);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Enlace en línea: blanco, entra escalonado y dibuja su subrayado */
.citapp-announce-link {
    position: relative;
    color: #ffffff;
    font-weight: 600;
    padding: 1px 4px 2px;
    border-radius: var(--cita-radius-tag);
    animation: citapp-announce-in 520ms var(--cita-ease) 200ms both;
    transition: background-color 140ms var(--cita-ease);
}

.citapp-announce-link::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.8);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: citapp-announce-underline 620ms var(--cita-ease) 520ms forwards;
}

@keyframes citapp-announce-underline {
    to { transform: scaleX(1); }
}

.citapp-announce-link:hover { background: rgba(255, 255, 255, 0.16); }

.citapp-announce-link:hover::after { background: #ffffff; }

/* =============================================================================
   6. Navegación principal
   ============================================================================= */

.citapp-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cita-paper);
    border-bottom: 1px solid transparent;
    transition: border-color 160ms var(--cita-ease);
}

.citapp-nav.is-scrolled { border-bottom-color: var(--cita-line); }

.citapp-nav-shell {
    max-width: var(--cita-page-max);
    margin: 0 auto;
    padding: 0 32px;
    height: var(--cita-nav-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-24);
}

.citapp-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    color: var(--cita-ink);
}

.citapp-nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cita-ink);
}

.citapp-nav-brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.citapp-nav-brand-name {
    font-size: var(--text-subheading);
    font-weight: 600;
    letter-spacing: var(--tracking-subheading);
    color: var(--cita-ink);
}

.citapp-nav-brand-tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cita-steel);
}

/* El píldora se aplana: la navegación es una fila de textos, no un cápsula */
.citapp-nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: center;
    padding: 4px;
    border-radius: var(--cita-radius);
}

/* Indicador de pestaña: el segundo uso legítimo del Ember */
.citapp-nav-marker {
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: var(--cita-ember);
    border-radius: 2px;
    opacity: 0;
    transition: transform 260ms var(--cita-ease), width 260ms var(--cita-ease), opacity 160ms linear;
    pointer-events: none;
}

.citapp-nav-link {
    position: relative;
    font-size: var(--text-body-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-graphite);
    padding: 6px 12px;
    border-radius: var(--cita-radius-tag);
    transition: color 140ms var(--cita-ease), background-color 140ms var(--cita-ease);
}

.citapp-nav-link:hover { color: var(--cita-ink); background: var(--cita-fog); }

.citapp-nav-link.is-active { color: var(--cita-ink); font-weight: 600; }

.citapp-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-16);
    justify-self: end;
}

.citapp-nav-signin {
    font-size: var(--text-body-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-ink);
}

.citapp-nav-signin:hover { border-bottom: 1px solid var(--cita-ink); }

/* "Ver demo" es un botón porque abre el diálogo de video dentro de la página
   (sv4-273), no navega. Hereda el aspecto del enlace de texto. */
.citapp-nav-signin--btn {
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--cita-font);
}

.citapp-nav-signin--btn:hover { border-bottom-color: var(--cita-ink); }

/* --- Diálogo del video de demostración (sv4-273) -------------------------
   Capa fija sobre la página. El fondo usa Abyss con desenfoque y el panel es
   Paper: es el único lugar de la landing donde se admite una sombra suave,
   porque el elemento flota realmente por encima del contenido. La única sombra
   con permiso en el sistema es la de la UI flotante. */

.citapp-video-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 7, 16, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: citapp-video-fade 200ms var(--cita-ease) both;
}

@keyframes citapp-video-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.citapp-video-dialog {
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius);
    box-shadow: 0 24px 70px rgba(0, 7, 16, 0.42);
    overflow: hidden;
    animation: citapp-video-rise 260ms var(--cita-ease) both;
}

@keyframes citapp-video-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* El panel recibe el foco al abrir: el teclado no se va detrás del overlay. */
.citapp-video-dialog:focus { outline: none; }

.citapp-video-dialog:focus-visible {
    outline: 2px solid var(--cita-ember);
    outline-offset: 2px;
}

.citapp-video-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: 20px 24px;
    border-bottom: 1px solid var(--cita-line);
}

.citapp-video-head-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.citapp-video-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cita-steel);
}

.citapp-video-title {
    font-size: var(--text-subheading);
    line-height: 1.4;
    letter-spacing: var(--tracking-subheading);
    font-weight: 600;
    color: var(--cita-ink);
}

/* Cierre: circular, borde capilar, glifo centrado con la corrección global */
.citapp-video-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cita-mist);
    background: var(--cita-card);
    color: var(--cita-ink);
    font-size: 14px;
    cursor: pointer;
    flex: none;
    transition: border-color 140ms var(--cita-ease), color 140ms var(--cita-ease), background-color 140ms var(--cita-ease);
}

.citapp-video-close:hover {
    border-color: var(--cita-ink);
    background: var(--cita-fog);
}

/* Marco del reproductor: fondo Abyss para que los controles nativos
   respondan con contraste propio sobre el video. */
.citapp-video-frame {
    background: var(--cita-abyss);
    display: grid;
    place-items: center;
    min-height: 0;
}

.citapp-video-player {
    display: block;
    width: 100%;
    max-height: calc(100vh - 260px);
    background: var(--cita-abyss);
}

.citapp-video-fallback {
    padding: 48px 24px;
    color: #ffffff;
    font-size: var(--text-body-sm);
    text-align: center;
}

.citapp-video-fallback a { color: var(--cita-ember); border-bottom: 1px solid currentColor; }

.citapp-video-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    flex-wrap: wrap;
    padding: 14px 24px;
    border-top: 1px solid var(--cita-line);
}

.citapp-video-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-video-hint i { color: var(--cita-steel); }

.citapp-video-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-ink);
    border-bottom: 1px solid var(--cita-mist);
    padding-bottom: 1px;
    transition: border-color 140ms var(--cita-ease);
}

.citapp-video-download:hover { border-bottom-color: var(--cita-ink); }

@media (max-width: 640px) {
    .citapp-video-backdrop { padding: 12px; }
    .citapp-video-dialog { max-height: calc(100vh - 24px); }
    .citapp-video-head { padding: 16px; }
    .citapp-video-foot { padding: 12px 16px; }
    .citapp-video-hint { display: none; }
    .citapp-video-player { max-height: calc(100vh - 200px); }
}

/* Interruptor de tema: control de chrome, trazo en Steel */
.citapp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    font-family: var(--cita-font);
    color: var(--cita-steel);
}

.citapp-theme-toggle-track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid var(--cita-mist);
    background: var(--cita-fog);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.citapp-theme-toggle-thumb { display: none; }

.citapp-theme-toggle-label {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-steel);
}

.citapp-theme-toggle:hover .citapp-theme-toggle-label { color: var(--cita-ink); }

.citapp-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius-tag);
    cursor: pointer;
}

.citapp-nav-burger span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--cita-ink);
    transition: transform 200ms var(--cita-ease), opacity 160ms linear;
}

.citapp-nav-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.citapp-nav-burger.is-open span:nth-child(2) { opacity: 0; }
.citapp-nav-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Menú móvil: único lugar con sombra, por ser UI flotante */
.citapp-nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 32px 20px;
    background: var(--cita-paper);
    border-bottom: 1px solid var(--cita-line);
    box-shadow: var(--cita-float-shadow);
}

.citapp-nav-mobile-link {
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: var(--tracking-body);
    color: var(--cita-ink);
    padding: 10px 12px;
    border-radius: var(--cita-radius-tag);
}

.citapp-nav-mobile-link:hover { background: var(--cita-fog); }

.citapp-nav-mobile-divider {
    height: 1px;
    background: var(--cita-line);
    margin: 8px 0 4px;
}

/* =============================================================================
   7. Fondo decorativo — conserva la textura, recoloreada al único acento
   ============================================================================= */

.citapp-warp {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.citapp-warp-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--cita-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cita-line) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 5%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 5%, transparent 72%);
    opacity: 0.55;
}

/* Aurora: un halo Ember de bajísima opacidad, sin degradados de color */
.citapp-warp-aurora {
    position: absolute;
    top: -320px;
    left: 50%;
    width: 1200px;
    height: 720px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%, rgba(255, 89, 0, 0.055), rgba(255, 89, 0, 0) 65%);
    pointer-events: none;
}

.citapp-warp-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(139, 141, 152, 0.32) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.30;
}

/* Barrido vertical: lectura de superficie encendida, muy tenue */
.citapp-warp-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(185, 187, 198, 0.10) 48%, transparent 100%);
    animation: citapp-scan 14s linear infinite;
}

@keyframes citapp-scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.citapp-warp-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 100% 70% at 50% 40%, transparent 40%, rgba(0, 7, 16, 0.05) 100%);
}

.citapp-shell[data-theme="dark"] .citapp-warp-vignette {
    background: radial-gradient(ellipse 100% 70% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

.citapp-warp-streaks { position: absolute; inset: 0; }

.citapp-warp-streak {
    position: absolute;
    top: -20%;
    width: 1px;
    height: 140px;
    background: linear-gradient(to bottom, transparent, rgba(255, 89, 0, 0.35), transparent);
    transform: rotate(14deg);
    animation: citapp-streak-fall linear infinite;
}

.citapp-warp-streak:nth-child(3n) {
    height: 90px;
    background: linear-gradient(to bottom, transparent, rgba(185, 187, 198, 0.40), transparent);
}

.citapp-warp-streak:nth-child(5n) {
    height: 180px;
    background: linear-gradient(to bottom, transparent, rgba(255, 89, 0, 0.18), transparent);
}

@keyframes citapp-streak-fall {
    0% { transform: translateY(0) rotate(14deg); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(140vh) rotate(14deg); opacity: 0; }
}

/* --- Efecto de puntero: halo de luz y estela continua (sv4-272) -------------

   Antes se creaba un elemento por cada evento de movimiento con un throttle de
   28ms y se eliminaba a los 720ms. De ahí venían los tres defectos: los puntos
   salían separados porque solo se pintaban en las muestras del evento, el
   movimiento se notaba tardío por el throttle y el borrado por temporizador, y
   no había ninguna capa de luz bajo el puntero.

   Ahora hay dos capas y ninguna crea elementos en caliente:

   1. Un halo que sigue al puntero con amortiguación. Es la sobre de luz.
   2. Un pool fijo de cometas que se persiguen entre sí con retardo creciente.
      Como persisten y se mueven por interpolación, la estela es una cinta
      continua y afilada, no una lluvia de puntos.

   La capa se crea desde JS si no existe en el marcado, de modo que el efecto
   no depende de recompilar para funcionar. */

.citapp-pointer {
    position: fixed;
    inset: 0;
    z-index: 42;
    pointer-events: none;
    overflow: hidden;
}

/* Halo: sigue al puntero amortiguado. Sin transición de transform porque la
   interpolación ya la hace el bucle de animación; una transición aquí
   añadiría un segundo retardo y volvería a sentirse lento. */
.citapp-pointer-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 280px;
    margin: -140px 0 0 -140px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 89, 0, 0.16) 0%,
        rgba(255, 89, 0, 0.075) 34%,
        rgba(255, 89, 0, 0) 70%);
    opacity: calc(0.35 + var(--intensity, 0) * 0.65);
    transform: translate3d(-400px, -400px, 0);
    will-change: transform;
}

/* Punto exacto del puntero */
.citapp-pointer-core {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--cita-ember);
    opacity: var(--intensity, 0);
    transform: translate3d(-400px, -400px, 0);
    will-change: transform;
}

.citapp-pointer-comet {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    margin-left: calc(var(--size) / -2);
    margin-top: calc(var(--size) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, var(--cita-ember) 0%, rgba(255, 89, 0, 0) 72%);
    opacity: calc(var(--alpha) * var(--intensity, 0));
    transform: translate3d(-400px, -400px, 0);
    will-change: transform;
}

/* Progreso de lectura: barra capilar Ember */
.citapp-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 70;
    pointer-events: none;
}

.citapp-progress-bar {
    display: block;
    height: 100%;
    background: var(--cita-ember);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* =============================================================================
   8. Hero — composición asimétrica 45/55
   ============================================================================= */

.citapp-hero {
    position: relative;
    z-index: 1;
    padding: 96px 0 80px;
    background: var(--cita-paper);
}

.citapp-hero-grid {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 48px;
    align-items: center;
}

.citapp-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
    min-width: 0;
}

.citapp-hero-eyebrow { color: var(--cita-pewter); }

.citapp-hero-title-line { display: block; }

.citapp-hero-sub {
    font-size: var(--text-subheading);
    line-height: 1.4;
    letter-spacing: var(--tracking-subheading);
    color: var(--cita-graphite);
    max-width: 52ch;
}

.citapp-hero-sub strong { color: var(--cita-ink); font-weight: 600; }

.citapp-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    flex-wrap: wrap;
}

/* Captura de correo: campo con borde capilar + botón Ember adjunto */
.citapp-hero-capture {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 460px;
}

.citapp-hero-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    background: var(--cita-input);
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius);
    font-family: var(--cita-font);
    font-size: var(--text-body-sm);
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-ink);
}

.citapp-hero-input::placeholder { color: var(--cita-steel); }

.citapp-hero-input:focus {
    outline: none;
    border-color: var(--cita-ember);
    background: var(--cita-paper);
}

.citapp-hero-submit { height: 44px; flex: none; }

/* Enlace fantasma: el icono pequeño va en Ember, el texto en Ink */
.citapp-hero-play { color: var(--cita-ember); }

.citapp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Etiquetas: radio 6px, el único grupo con radio reducido */
.citapp-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-graphite);
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
    padding: 5px 10px;
}

.citapp-hero-chip i { color: var(--cita-steel); font-size: 0.95em; }

.citapp-hero-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
    max-width: 52ch;
    border-left: 2px solid var(--cita-line-strong);
    padding-left: 12px;
}

.citapp-hero-note i { margin-top: 2px; flex: none; color: var(--cita-steel); }

/* --- Panel operativo del hero --- */

.citapp-hero-visual {
    position: relative;
    min-width: 0;
}

/* Halo suave: se conserva como atmósfera, nunca como sombra de tarjeta */
.citapp-hero-orb {
    position: absolute;
    inset: 8% 4%;
    background: radial-gradient(circle at 50% 45%, rgba(255, 89, 0, 0.10), rgba(255, 89, 0, 0) 68%);
    pointer-events: none;
}

/* Tarjeta: Paper con borde capilar Mist. Sin sombra. */
.citapp-dashboard-card {
    position: relative;
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    overflow: hidden;
}

.citapp-dashboard-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 89, 0, 0.045) 50%, transparent 100%);
    transform: translateY(-100%);
    animation: citapp-dash-scan 6s var(--cita-ease) infinite;
    pointer-events: none;
}

@keyframes citapp-dash-scan {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(100%); }
}

.citapp-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
}

.citapp-dashboard-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-ink);
}

/* Punto en vivo: señal de estado, no adorno */
.citapp-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cita-ember);
    box-shadow: 0 0 0 3px rgba(255, 89, 0, 0.16);
    animation: citapp-pulse 2.4s ease-in-out infinite;
}

@keyframes citapp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.citapp-dashboard-tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cita-steel);
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
    padding: 4px 8px;
}

.citapp-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-16);
}

.citapp-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
    min-width: 0;
}

.citapp-metric-value {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--cita-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.citapp-metric-unit {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--cita-pewter);
    margin-left: 2px;
    letter-spacing: -0.01em;
}

.citapp-metric-label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cita-pewter);
}

.citapp-dashboard-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 72px;
}

.citapp-dashboard-bars span {
    flex: 1;
    background: var(--cita-fog);
    border-top: 2px solid var(--cita-mist);
    border-radius: 3px 3px 0 0;
    transition: height 600ms var(--cita-ease-quart);
}

/* Sólo la barra en foco lleva Ember: una señal, no un arcoíris */
.citapp-dashboard-bars span:nth-child(4) { border-top-color: var(--cita-ember); }

.citapp-dashboard-chart { height: 56px; }

.citapp-dashboard-chart svg { width: 100%; height: 100%; overflow: visible; }

.citapp-chart-line {
    fill: none;
    stroke: var(--cita-ink);
    stroke-width: 1.6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.citapp-chart-dot { fill: var(--cita-ember); }

.citapp-dashboard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding-top: var(--spacing-16);
    border-top: 1px solid var(--cita-line);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-dashboard-foot span { display: inline-flex; align-items: center; gap: 6px; }
.citapp-dashboard-foot i { color: var(--cita-steel); }

.citapp-dashboard-foot-strong {
    color: var(--cita-ink) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Indicador de scroll: etiqueta Pewter con una regla capilar */
.citapp-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--cita-steel);
}

.citapp-scroll-line {
    width: 1px;
    height: 32px;
    background: var(--cita-line-strong);
}

.citapp-scroll-text {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cita-steel);
}

/* =============================================================================
   9. Banda de confianza — superficie Fog, marcas en monocromo Steel
   ============================================================================= */

.citapp-trust { padding: var(--spacing-80) 0; background: var(--cita-fog); }

.citapp-trust-title {
    font-size: var(--text-heading);
    line-height: 1.21;
    letter-spacing: var(--tracking-heading);
    font-weight: 600;
    color: var(--cita-ink);
    text-align: center;
    max-width: 20ch;
    margin: 0 auto var(--spacing-48);
}

.citapp-trust-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-16);
    align-items: stretch;
}

/* Cada marca es un botón para que el teclado pueda enfocarla y dispare la
   tooltip, igual que el cursor. El botón se desnuda por completo: aquí solo
   aporta interacción, el aspecto lo pone la marca.

   Al activarse sube a Ink, no a Ember: la banda es monocroma a propósito y el
   acento no tiene función que cumplir en esta región. */
.citapp-trust-mark {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 96px;
    padding: 12px 8px 16px;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cita-radius);
    font-family: var(--cita-font);
    color: var(--cita-steel);
    text-align: center;
    cursor: pointer;
    transition: color 160ms var(--cita-ease), background-color 160ms var(--cita-ease),
                border-color 160ms var(--cita-ease), transform 160ms var(--cita-ease);
}

.citapp-trust-mark i {
    font-size: 30px;
    transition: transform 200ms var(--cita-ease);
}

.citapp-trust-name {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caption);
    color: inherit;
    line-height: 1.3;
}

/* Indicador inferior: la marca activa lo dibuja de una sola vez. */
.citapp-trust-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
    transition: transform 200ms var(--cita-ease), opacity 200ms var(--cita-ease);
}

.citapp-trust-mark:hover,
.citapp-trust-mark:focus-visible {
    color: var(--cita-ink);
    background: var(--cita-card);
    border-color: var(--cita-mist);
    transform: translateY(-2px);
}

.citapp-trust-mark:hover i,
.citapp-trust-mark:focus-visible i { transform: scale(1.12); }

.citapp-trust-mark:hover::after,
.citapp-trust-mark:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* =============================================================================
   10. Tarjetas de funciones — categoría de producto
   ============================================================================= */

.citapp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-24);
}

.citapp-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius);
    padding: var(--spacing-32);
    transition: border-color 160ms var(--cita-ease);
}

.citapp-feature-card:hover { border-color: var(--cita-mist); }

.citapp-feature-card.is-lead {
    background: var(--cita-fog);
    border-color: transparent;
}

.citapp-feature-card.is-lead:hover { border-color: var(--cita-mist); }

.citapp-feature-num {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--cita-steel);
    font-variant-numeric: tabular-nums;
}

/* Icono de línea: trazo en Steel, nunca relleno de color */
.citapp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--cita-radius);
    background: var(--cita-fog);
    color: var(--cita-ink);
    font-size: 26px;
}

.citapp-feature-card.is-lead .citapp-feature-icon { background: var(--cita-paper); }

.citapp-feature-icon i { color: inherit; }

.citapp-feature-title {
    font-size: var(--text-heading-sm);
    line-height: 1.33;
    letter-spacing: var(--tracking-heading-sm);
    font-weight: 600;
    color: var(--cita-ink);
}

.citapp-feature-desc {
    font-size: var(--text-body-sm);
    line-height: 1.43;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-graphite);
}

.citapp-feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.citapp-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-body-sm);
    line-height: 1.43;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-graphite);
}

.citapp-feature-list i {
    color: var(--cita-ember);
    font-size: 0.9em;
    margin-top: 3px;
    flex: none;
}

/* =============================================================================
   11. Flujo interactivo de cinco pasos
   ============================================================================= */

.citapp-flow { background: var(--cita-fog); }

.citapp-flow-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius);
    padding: var(--spacing-32);
}

/* Línea de progreso */
.citapp-flow-line { position: relative; }

.citapp-flow-track {
    height: 1px;
    background: var(--cita-line);
    position: relative;
}

.citapp-flow-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background: var(--cita-ember);
    width: calc(var(--cita-flow-progress, 0) * 1%);
    transition: width 420ms var(--cita-ease);
}

.citapp-flow-nodes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: -16px;
}

.citapp-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--cita-font);
    color: var(--cita-steel);
}

.citapp-flow-node-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    color: var(--cita-steel);
    font-size: 18px;
    transition: background-color 180ms var(--cita-ease), border-color 180ms var(--cita-ease), color 180ms var(--cita-ease);
}

.citapp-flow-node-label {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
    text-align: center;
    transition: color 180ms var(--cita-ease);
}

/* Nodo activo: relleno Ember. Nodo recorrido: solo texto Ink */
.citapp-flow-node.is-active .citapp-flow-node-dot {
    background: var(--cita-ember);
    border-color: var(--cita-ember);
    color: #ffffff;
}

.citapp-flow-node.is-active .citapp-flow-node-label { color: var(--cita-ink); font-weight: 600; }

.citapp-flow-node.is-past .citapp-flow-node-dot { border-color: var(--cita-steel); color: var(--cita-ink); }
.citapp-flow-node.is-past .citapp-flow-node-label { color: var(--cita-graphite); }

.citapp-flow-node:hover .citapp-flow-node-label { color: var(--cita-ink); }

/* Detalle del paso */
.citapp-flow-detail {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-48);
    align-items: start;
}

.citapp-flow-copy { display: flex; flex-direction: column; gap: 16px; }

.citapp-flow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-graphite);
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
    padding: 5px 10px;
}

.citapp-flow-badge i { color: var(--cita-steel); }

.citapp-flow-h3 {
    font-size: var(--text-heading-sm);
    line-height: 1.33;
    letter-spacing: var(--tracking-heading-sm);
    font-weight: 600;
    color: var(--cita-ink);
}

.citapp-flow-desc {
    font-size: var(--text-body);
    line-height: 1.5;
    letter-spacing: var(--tracking-body);
    color: var(--cita-graphite);
    max-width: 60ch;
}

.citapp-flow-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.citapp-flow-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-body-sm);
    line-height: 1.43;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-graphite);
}

.citapp-flow-points i {
    color: var(--cita-ember);
    margin-top: 3px;
    flex: none;
    font-size: 0.9em;
}

.citapp-flow-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.citapp-flow-auto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cita-font);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
    background: transparent;
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius-tag);
    padding: 6px 12px;
    cursor: pointer;
}

.citapp-flow-auto.is-on { color: var(--cita-ink); border-color: var(--cita-steel); }
.citapp-flow-auto:hover { color: var(--cita-ink); }

.citapp-flow-wizard-tag {
    align-self: flex-start;
    font-family: var(--cita-mono);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--cita-steel);
    border: 1px dashed var(--cita-line-strong);
    border-radius: var(--cita-radius-tag);
    padding: 6px 10px;
}

.citapp-flow-wizard-tag span {
    color: var(--cita-pewter);
    margin-right: 6px;
    letter-spacing: 0.04em;
}

.citapp-flow-footnote {
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--cita-line);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.citapp-flow-footnote i { color: var(--cita-steel); margin-top: 2px; }

/* Enlaces en párrafo: Ink con subrayado, nunca Ember */
.citapp-flow-footnote a {
    color: var(--cita-ink);
    border-bottom: 1px solid var(--cita-mist);
    font-weight: 500;
}

.citapp-flow-footnote a:hover { border-bottom-color: var(--cita-ink); }

/* --- Mock de teléfono / WhatsApp --- */

.citapp-flow-phone { position: relative; }

.citapp-phone-frame {
    position: relative;
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 460px;
}

.citapp-phone-notch {
    height: 0;
    border-bottom: 1px solid var(--cita-line);
}

.citapp-phone-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cita-carbon);
    color: #ffffff;
}

.citapp-phone-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-size: 17px;
    flex: none;
}

.citapp-phone-name {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caption);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.citapp-phone-status {
    font-size: 11px;
    font-weight: 500;
    color: var(--cita-ember);
    flex: none;
}

.citapp-phone-screen {
    flex: 1;
    padding: 16px;
    background: var(--cita-fog);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.citapp-phone-home {
    height: 3px;
    width: 88px;
    margin: 0 auto 8px;
    border-radius: 2px;
    background: var(--cita-mist);
}

/* Halo del teléfono: atmósfera, no sombra de tarjeta */
.citapp-phone-glow {
    position: absolute;
    inset: -6% -4%;
    background: radial-gradient(circle at 50% 40%, rgba(255, 89, 0, 0.07), rgba(255, 89, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Burbujas: monocromo sobre Fog, el contraste lo da el borde capilar */
.citapp-wa-bubble {
    position: relative;
    max-width: 88%;
    padding: 10px 12px;
    border-radius: var(--cita-radius-tag);
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-graphite);
    background: var(--cita-paper);
    border: 1px solid var(--cita-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.citapp-wa-bubble strong { color: var(--cita-ink); font-weight: 600; }
.citapp-wa-bubble b { color: var(--cita-ink); font-weight: 600; }
.citapp-wa-bubble i.bi { font-style: normal; }

.citapp-wa-bubble.wa-in { align-self: flex-start; }

.citapp-wa-bubble.wa-out {
    align-self: flex-end;
    background: var(--cita-carbon);
    border-color: var(--cita-carbon);
    color: #ffffff;
}

.citapp-wa-bubble.wa-out strong,
.citapp-wa-bubble.wa-out b { color: #ffffff; }

.citapp-wa-bubble.highlight { border-color: var(--cita-mist); }
.citapp-wa-bubble.muted { color: var(--cita-steel); }
.citapp-wa-bubble.success { border-left: 2px solid var(--cita-ember); }
.citapp-wa-bubble.cancel { border-left: 2px solid var(--cita-ink); }
.citapp-wa-bubble.pulse { animation: citapp-bubble-pulse 2s ease-in-out infinite; }

@keyframes citapp-bubble-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

.wa-anim-1 { animation: citapp-bubble-in 420ms var(--cita-ease) both; }
.wa-anim-2 { animation: citapp-bubble-in 420ms var(--cita-ease) 120ms both; }
.wa-anim-3 { animation: citapp-bubble-in 420ms var(--cita-ease) 240ms both; }

@keyframes citapp-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.wa-mini {
    font-size: 11px;
    color: var(--cita-pewter);
    letter-spacing: -0.005em;
}

.citapp-wa-bubble.wa-out .wa-mini { color: rgba(255, 255, 255, 0.62); }

.wa-typing { font-size: 11px; color: var(--cita-steel); font-style: italic; }

.wa-otp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--cita-graphite);
    border-top: 1px dashed var(--cita-line);
    padding-top: 6px;
    margin-top: 2px;
}

.wa-ttl { color: var(--cita-steel); }

.wa-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* Botones dentro del mock: solo el primario lleva Ember */
.wa-btn {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--cita-radius-tag);
    padding: 5px 10px;
    background: var(--cita-fog);
    border: 1px solid var(--cita-mist);
    color: var(--cita-ink);
}

.wa-btn-confirm { border-color: var(--cita-ember); color: var(--cita-ember); }

/* Calendario animado */
.citapp-calendar-anim { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.cal-grid { display: flex; gap: 4px; }

.cal-grid span {
    flex: 1;
    height: 22px;
    border-radius: 4px;
    background: var(--cita-paper);
    border: 1px solid var(--cita-line);
}

.cal-grid span.is-busy { background: var(--cita-mist); border-color: var(--cita-mist); }

.cal-grid span.is-selected {
    background: var(--cita-ember);
    border-color: var(--cita-ember);
    animation: citapp-slot-blink 1.6s ease-in-out infinite;
}

@keyframes citapp-slot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}

.cal-label { font-size: 11px; color: var(--cita-steel); letter-spacing: -0.005em; }

.countdown-mock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cita-ink);
}

/* OTP */
.citapp-otp-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px;
    background: var(--cita-paper);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius-tag);
}

.otp-code {
    font-size: var(--text-subheading);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--cita-ink);
    font-variant-numeric: tabular-nums;
}

.otp-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cita-steel);
}

/* Bifurcación confirmar / cancelar */
.citapp-split { display: flex; flex-direction: column; gap: 8px; }

.citapp-split-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    font-family: var(--cita-font);
    background: var(--cita-paper);
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius-tag);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--cita-ink);
    transition: border-color 160ms var(--cita-ease);
}

.citapp-split-card:hover { border-color: var(--cita-steel); }
.citapp-split-card i { font-size: 20px; margin-bottom: 2px; }
.citapp-split-card strong { font-size: var(--text-caption); font-weight: 600; }
.citapp-split-card span { font-size: 11px; color: var(--cita-pewter); letter-spacing: -0.005em; }

.citapp-split-card.is-confirm i { color: var(--cita-ember); }
.citapp-split-card.is-confirm.is-selected { border-color: var(--cita-ember); background: rgba(255, 89, 0, 0.05); }
.citapp-split-card.is-cancel i { color: var(--cita-ink); }
.citapp-split-card.is-cancel.is-selected { border-color: var(--cita-ink); background: var(--cita-fog); }

/* Liberación del turno */
.citapp-slot-free { display: flex; flex-direction: column; gap: 6px; }

.citapp-slot-free .slot {
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--cita-line);
    background: var(--cita-paper);
}

.slot-busy { background: var(--cita-mist) !important; border-color: var(--cita-mist) !important; }

.slot-free-anim { animation: citapp-slot-free 1.4s var(--cita-ease) infinite; }
.slot-free-anim.delay { animation-delay: 180ms; }

@keyframes citapp-slot-free {
    0% { background: var(--cita-mist); border-color: var(--cita-mist); }
    60%, 100% { background: var(--cita-paper); border-color: var(--cita-line); }
}

.slot-label { font-size: 11px; color: var(--cita-steel); letter-spacing: -0.005em; }

/* =============================================================================
   12. Cómo funciona
   ============================================================================= */

.citapp-how-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: var(--spacing-48);
    align-items: start;
}

.citapp-steps { display: flex; flex-direction: column; }

.citapp-step { display: flex; gap: var(--spacing-16); align-items: flex-start; }

.citapp-step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--cita-mist);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cita-ink);
    font-variant-numeric: tabular-nums;
}

.citapp-step-body { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }

.citapp-step-title {
    font-size: var(--text-subheading);
    line-height: 1.4;
    letter-spacing: var(--tracking-subheading);
    font-weight: 600;
    color: var(--cita-ink);
}

.citapp-step-desc {
    font-size: var(--text-body-sm);
    line-height: 1.43;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-graphite);
    max-width: 62ch;
}

/* Conector entre pasos: regla capilar con punta Ember */
.citapp-step-connector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 12px 16px;
}

.citapp-step-connector span {
    width: 1px;
    height: 32px;
    background: var(--cita-line-strong);
}

.citapp-step-connector i { color: var(--cita-steel); font-size: 11px; }

/* Visual del flujo Suros → CitApp → Paciente */
.citapp-how-visual { position: relative; }

.citapp-how-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius);
    padding: var(--spacing-24);
}

.citapp-how-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-ink);
}

.citapp-how-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cita-ember);
    flex: none;
}

.citapp-how-card-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cita-steel);
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
    padding: 3px 8px;
}

.citapp-how-nodes {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.citapp-how-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
    text-align: center;
    color: var(--cita-ink);
}

.citapp-how-node i { font-size: 24px; color: var(--cita-ink); }

.citapp-how-node span {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--cita-pewter);
}

.citapp-how-arrow { color: var(--cita-steel); font-size: 12px; }

.citapp-how-bars { display: flex; flex-direction: column; gap: 6px; }

.citapp-how-bars span {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--cita-fog);
}

/* Sólo la barra principal lleva Ember */
.citapp-how-bars span:nth-child(2) { background: var(--cita-ember); }

.citapp-how-glow {
    position: absolute;
    inset: 6% -4%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 89, 0, 0.07), rgba(255, 89, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* =============================================================================
   13. Precios
   ============================================================================= */

.citapp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-24);
    align-items: stretch;
}

.citapp-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius);
    padding: var(--spacing-32);
    cursor: pointer;
    transition: border-color 160ms var(--cita-ease);
}

.citapp-pricing-card:hover { border-color: var(--cita-mist); }

/* Plan seleccionado: el borde Ember marca la elección, no un relleno */
.citapp-pricing-card--featured,
.citapp-pricing-card.is-active { border-color: var(--cita-ink); }

.citapp-pricing-card--featured:hover,
.citapp-pricing-card.is-active:hover { border-color: var(--cita-ink); }

.citapp-pricing-badge {
    position: absolute;
    top: -10px;
    left: var(--spacing-32);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--cita-ember);
    border-radius: var(--cita-radius-tag);
    padding: 4px 10px;
}

/* --- Infografía del encabezado del plan (sv4-271) --- */

.citapp-plan-figure {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Glifo del plan: caja con borde capilar y trazo en Ink. No usa el acento:
   el Ember queda en el botón y en la barra del plan seleccionado. */
.citapp-plan-glyph {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--cita-radius);
    background: var(--cita-fog);
    border: 1px solid var(--cita-line);
    color: var(--cita-ink);
    font-size: 26px;
    flex: none;
}

/* Glifo invertido en la tarjeta activa: fondo Ink y trazo Paper. Usar los dos
   tokens invertidos y no un blanco fijo, porque en tema oscuro --cita-ink es
   blanco y el glifo quedaría blanco sobre blanco. */
.citapp-pricing-card.is-active .citapp-plan-glyph {
    background: var(--cita-ink);
    border-color: var(--cita-ink);
    color: var(--cita-paper);
}

.citapp-plan-figure-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.citapp-plan-figure-body .citapp-pricing-desc {
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-graphite);
}

/* --- Infografía de cobertura --- */

.citapp-plan-coverage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--cita-fog);
    border-radius: var(--cita-radius-tag);
}

/* La tarjeta es Paper y el bloque de cobertura queda en Fog en los tres
   planes: pasarlo a Paper en la activa lo dejaría blanco sobre blanco. La
   selección se marca con el borde Ink, el glifo invertido y el medidor. */

.citapp-plan-coverage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.citapp-plan-coverage-label {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-plan-coverage-value {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-ink);
    font-variant-numeric: tabular-nums;
}

/* Medidor segmentado: seis celdas siempre, para que los planes sean
   comparables entre sí de un vistazo. */
.citapp-plan-meter { display: flex; gap: 4px; }

.citapp-plan-meter-cell {
    flex: 1;
    height: 6px;
    border-radius: 2px;
    background: var(--cita-mist);
    opacity: 0.55;
    transition: background-color 180ms var(--cita-ease), opacity 180ms var(--cita-ease);
}

.citapp-plan-meter-cell.is-on {
    background: var(--cita-ink);
    opacity: 1;
}

/* Solo el plan seleccionado enciende su medidor con el acento */
.citapp-pricing-card.is-active .citapp-plan-meter-cell.is-on { background: var(--cita-ember); }

.citapp-plan-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--cita-line);
}

.citapp-plan-metrics li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-plan-metric-icon {
    display: grid;
    place-items: center;
    color: var(--cita-steel);
    font-size: 15px;
}

.citapp-plan-metric-text strong {
    color: var(--cita-ink);
    font-weight: 600;
}

.citapp-pricing-plan {
    font-size: var(--text-heading-sm);
    line-height: 1.33;
    letter-spacing: var(--tracking-heading-sm);
    font-weight: 600;
    color: var(--cita-ink);
}

.citapp-pricing-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-16) 0;
    border-top: 1px solid var(--cita-line);
    border-bottom: 1px solid var(--cita-line);
}

.citapp-price-amount {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--cita-ink);
    font-variant-numeric: tabular-nums;
}

.citapp-price-cop {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-pricing-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--spacing-8);
}

.citapp-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-body-sm);
    line-height: 1.43;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-graphite);
}

.citapp-pricing-features i {
    color: var(--cita-steel);
    margin-top: 3px;
    flex: none;
    font-size: 0.9em;
}

.citapp-pricing-card .citapp-btn { margin-top: auto; }

.citapp-pricing-foot {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-pricing-legal {
    font-size: var(--text-caption);
    line-height: 1.5;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
    max-width: 88ch;
    margin-top: var(--spacing-32);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--cita-line);
}

/* =============================================================================
   14. CTA — panel claro que precede al footer Abyss
   ============================================================================= */

.citapp-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-48);
    align-items: center;
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius);
    padding: 56px;
}

.citapp-cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }

.citapp-cta-title { max-width: 16ch; }

/* El énfasis del título es Ink, no Ember: el acento queda en el botón */
.citapp-cta-title em { font-style: normal; border-bottom: 3px solid var(--cita-ember); padding-bottom: 2px; }

.citapp-cta-subtitle {
    font-size: var(--text-body);
    line-height: 1.5;
    letter-spacing: var(--tracking-body);
    color: var(--cita-graphite);
    max-width: 52ch;
}

.citapp-cta-actions { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: wrap; }

.citapp-cta-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-cta-note i { color: var(--cita-steel); }

/* Señal de WhatsApp: anillos en Ember sobre halo tenue */
/* Lado derecho del CTA: marca de canal + lista de capacidades.
   Sustituye a los anillos concéntricos y al barrido cónico del diseño
   anterior, que dibujaban un sector duro y competían con el botón por el
   único acento disponible en la región. */
.citapp-cta-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-24);
    min-height: 240px;
}

.citapp-cta-orb {
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 89, 0, 0.09), rgba(255, 89, 0, 0) 70%);
    pointer-events: none;
}

.citapp-cta-mark {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Glifo sobre Paper con borde capilar: el trazo va en Ink, sin relleno Ember */
.citapp-cta-mark-glyph {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: var(--cita-radius);
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    color: var(--cita-ink);
    font-size: 48px;
}

.citapp-cta-mark-caption {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-cta-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 240px;
}

.citapp-cta-mini {
    display: block;
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-graphite);
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius-tag);
    padding: 8px 12px;
    text-align: center;
}

/* =============================================================================
   15. Footer — Abyss, el marco oscuro que cierra el cuerpo
   ============================================================================= */

.citapp-footer {
    background: var(--cita-abyss);
    color: #ffffff;
    padding: 64px 0 32px;
    position: relative;
    z-index: 1;
}

.citapp-footer-inner {
    display: grid;
    grid-template-columns: 1.1fr 1.9fr;
    gap: var(--spacing-48);
    padding-bottom: var(--spacing-48);
    border-bottom: 1px solid rgba(185, 187, 198, 0.18);
}

.citapp-footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.citapp-footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

.citapp-footer-logo { display: inline-flex; color: #ffffff; }

.citapp-footer-brand-name {
    font-size: var(--text-subheading);
    font-weight: 600;
    letter-spacing: var(--tracking-subheading);
    color: #ffffff;
}

.citapp-footer-description {
    font-size: var(--text-body-sm);
    line-height: 1.43;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-link-dark);
    max-width: 44ch;
}

.citapp-footer-description strong { color: #ffffff; font-weight: 600; }

.citapp-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.citapp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cita-link-dark);
    border: 1px solid rgba(185, 187, 198, 0.24);
    border-radius: var(--cita-radius-tag);
    padding: 5px 10px;
}

.citapp-footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-24);
}

.citapp-footer-column-title {
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-body-sm);
    color: #ffffff;
    margin-bottom: var(--spacing-16);
    display: flex;
    align-items: center;
    gap: 8px;
}

.citapp-footer-column-title i { color: var(--cita-link-dark); font-size: 0.9em; }

.citapp-footer-list { display: flex; flex-direction: column; gap: 10px; }

.citapp-footer-link,
.citapp-footer-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-body-sm);
    color: var(--cita-link-dark);
}

.citapp-footer-link { transition: color 140ms var(--cita-ease); }
.citapp-footer-link:hover { color: #ffffff; }
.citapp-footer-link i, .citapp-footer-text i { color: rgba(185, 187, 198, 0.6); font-size: 0.9em; }

.citapp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    flex-wrap: wrap;
    padding-top: var(--spacing-32);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: rgba(185, 187, 198, 0.72);
}

.citapp-footer-copyleft a { color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.32); }
.citapp-footer-copyleft a:hover { border-bottom-color: #ffffff; }

.citapp-footer-social { display: inline-flex; align-items: center; gap: 8px; }

.citapp-footer-social-link {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(185, 187, 198, 0.24);
    color: var(--cita-link-dark);
    font-size: 18px;
    transition: color 140ms var(--cita-ease), border-color 140ms var(--cita-ease);
}

.citapp-footer-social-link:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }

/* =============================================================================
   16. Splash — UI flotante, única excepción de sombra
   ============================================================================= */

.citapp-splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: var(--cita-paper);
}

.citapp-splash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 56px;
    background: var(--cita-card);
    border: 1px solid var(--cita-line);
    border-radius: var(--cita-radius);
    box-shadow: var(--cita-float-shadow);
    text-align: center;
}

.citapp-splash-logo { color: var(--cita-ink); }

.citapp-splash-title {
    font-size: var(--text-heading-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-heading-sm);
    color: var(--cita-ink);
}

.citapp-splash-subtitle {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--cita-pewter);
}

.citapp-splash-loader { display: flex; gap: 6px; margin-top: 8px; }

.citapp-splash-bar {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--cita-fog);
    overflow: hidden;
    position: relative;
}

.citapp-splash-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cita-ember);
    transform-origin: 0 50%;
    animation: citapp-splash-fill 1.1s var(--cita-ease) infinite;
}

.citapp-splash-bar:nth-child(2)::after { animation-delay: 160ms; }
.citapp-splash-bar:nth-child(3)::after { animation-delay: 320ms; }

@keyframes citapp-splash-fill {
    0% { transform: scaleX(0); }
    60%, 100% { transform: scaleX(1); }
}

.citapp-splash-dots { display: none; }

/* =============================================================================
   17. Tooltip global — UI flotante
   ============================================================================= */

.citapp-tooltip {
    position: fixed;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -6px);
    transition: opacity 140ms var(--cita-ease), transform 140ms var(--cita-ease), visibility 140ms;
}

.citapp-tooltip.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.citapp-tooltip-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 320px;
    padding: 12px 14px;
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    border-radius: var(--cita-radius);
    box-shadow: var(--cita-float-shadow);
}

.citapp-tooltip-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--cita-radius-tag);
    background: var(--cita-fog);
    color: var(--cita-steel);
    font-size: 12px;
    flex: none;
}

.citapp-tooltip-body { display: flex; flex-direction: column; gap: 2px; }

.citapp-tooltip-body strong {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caption);
    color: var(--cita-ink);
}

.citapp-tooltip-body span {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--cita-pewter);
}

/* =============================================================================
   18. Acciones flotantes
   ============================================================================= */

.citapp-float-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.citapp-float-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cita-card);
    border: 1px solid var(--cita-mist);
    color: var(--cita-ink);
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--cita-float-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 160ms var(--cita-ease), transform 160ms var(--cita-ease), color 140ms var(--cita-ease), border-color 140ms var(--cita-ease);
}

.citapp-float-btn:hover { color: var(--cita-ember); border-color: var(--cita-ember); }

.citapp-float-btn--search,
.citapp-float-btn--down { opacity: 1; visibility: visible; transform: translateY(0); }

.citapp-float-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =============================================================================
   19. Aparición al hacer scroll y entrada escalonada del hero
   ============================================================================= */

[data-cita-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms var(--cita-ease), transform 620ms var(--cita-ease);
}

[data-cita-reveal].is-visible { opacity: 1; transform: translateY(0); }

.citapp-anim { opacity: 0; transform: translateY(14px); animation: citapp-rise 620ms var(--cita-ease) forwards; }

.citapp-anim--1 { animation-delay: 60ms; }
.citapp-anim--2 { animation-delay: 120ms; }
.citapp-anim--3 { animation-delay: 180ms; }
.citapp-anim--4 { animation-delay: 240ms; }
.citapp-anim--5 { animation-delay: 300ms; }
.citapp-anim--6 { animation-delay: 360ms; }
.citapp-anim--visual { animation-delay: 200ms; }

@keyframes citapp-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   20. Adaptación por ancho
   ============================================================================= */

@media (max-width: 1080px) {
    .citapp-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .citapp-hero-grid { grid-template-columns: 1fr; gap: var(--spacing-48); }
    .citapp-hero-content { max-width: 640px; }
    .citapp-flow-detail { grid-template-columns: 1fr 340px; gap: var(--spacing-32); }
    .citapp-how-grid { grid-template-columns: 1fr; }
    .citapp-cta-panel { grid-template-columns: 1fr; gap: var(--spacing-32); padding: var(--spacing-32); }
    .citapp-cta-visual { min-height: 200px; }
}

@media (max-width: 980px) {
    .citapp-nav-pill { display: none; }
    .citapp-nav-burger { display: flex; }
    .citapp-nav-signin { display: none; }

    .citapp-features-grid { grid-template-columns: 1fr; }
    .citapp-pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .citapp-footer-inner { grid-template-columns: 1fr; gap: var(--spacing-32); }
    .citapp-flow-detail { grid-template-columns: 1fr; }
    .citapp-flow-phone { max-width: 380px; }
}

@media (max-width: 640px) {
    .citapp-container,
    .citapp-nav-shell { padding-left: 20px; padding-right: 20px; }

    .citapp-section { padding: var(--spacing-48) 0; }
    .citapp-hero { padding: 48px 0 56px; }

    .citapp-trust { padding: var(--spacing-48) 0; }
    .citapp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .citapp-trust-mark { min-height: 80px; }

    .citapp-dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
    .citapp-dashboard-bars { height: 56px; }

    .citapp-hero-capture { flex-direction: column; align-items: stretch; }
    .citapp-hero-input,
    .citapp-hero-submit { width: 100%; }

    .citapp-feature-card { padding: var(--spacing-24); }
    .citapp-pricing-card { padding: var(--spacing-24); }
    .citapp-cta-panel { padding: var(--spacing-24); }

    .citapp-flow-shell { padding: var(--spacing-24); }
    .citapp-flow-nodes { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .citapp-flow-node-label { display: none; }

    .citapp-footer-columns { grid-template-columns: 1fr; gap: var(--spacing-24); }
    .citapp-footer { padding: var(--spacing-48) 0 24px; }

    .citapp-float-actions { right: 16px; bottom: 16px; }
    .citapp-scroll-indicator { display: none; }
    .citapp-announce-inner { padding: 6px 20px; }
}

/* =============================================================================
   21. Preferencia de movimiento reducido — segunda pasada
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-cita-reveal],
    .citapp-anim { opacity: 1; transform: none; }

    /* El barrido y la rejilla son adorno en movimiento: se apagan, pero el
       botón conserva su reacción de color y elevación del hover. */
    .citapp-btn-primary::before,
    .citapp-btn-primary::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .citapp-btn-primary:hover,
    .citapp-btn-primary:focus-visible { transform: none; }

    /* El barrido de la barra, la entrada del texto y la del diálogo también
       son movimiento. */
    .citapp-announce::before { animation: none; opacity: 0; }
    .citapp-announce-text,
    .citapp-announce-spark,
    .citapp-announce-link,
    .citapp-announce-link::after { animation: none; }

    /* Sin animación el subrayado debe quedar dibujado, no ausente. */
    .citapp-announce-link::after { transform: scaleX(1); }
    .citapp-announce-text { opacity: 1; transform: none; }

    .citapp-video-backdrop,
    .citapp-video-dialog { animation: none; }

    /* La marca de confianza conserva el cambio de tono, pero sin desplazarse
       ni escalar: el indicador inferior sigue apareciendo para que el estado
       activo no dependa solo del movimiento. */
    .citapp-trust-mark { transition: none; }
    .citapp-trust-mark i { transition: none; }
    .citapp-trust-mark:hover,
    .citapp-trust-mark:focus-visible { transform: none; }
    .citapp-trust-mark:hover i,
    .citapp-trust-mark:focus-visible i { transform: none; }
}