/* ============================================================================
   VITALIX - CAPA DE MODERNIZACION
   ----------------------------------------------------------------------------
   QUE ES ESTO
   Una capa que se carga DESPUES de los estilos de cada pagina y sustituye los
   colores sueltos por los del logo, ademas de afinar detalles de acabado.

   POR QUE UNA CAPA Y NO REESCRIBIR LAS 52 HOJAS
   Hay 37.726 lineas de CSS con 821 usos del mismo verde. Reescribir eso a mano
   seria lentisimo y con riesgo alto de romper algo. Esta capa consigue el mismo
   resultado visual con una fraccion del riesgo, y se puede quitar borrando un
   <link>.

   NO CAMBIA NINGUN NOMBRE DE CLASE. El HTML no se toca: por eso los 52 archivos
   siguen funcionando tal cual.

   ----------------------------------------------------------------------------
   DECISIONES DE COLOR, Y POR QUE
   ----------------------------------------------------------------------------
   El logo tiene dos verdes muy distintos:
     - un TEAL profundo (#0E6C7A) en el corazon y el borde  -> es la marca
     - un LIMA claro (#A8D252) en el brazo y el borde fino   -> es el acento

   El CSS actual usa un tercer verde, #10B981, para todo. Ese verde tiene un
   problema medido: como TEXTO sobre blanco da 2.54:1 de contraste, cuando el
   minimo legible (WCAG AA) es 4.5:1. Es decir, los enlaces y las insignias
   verdes se leen mal.

   El teal del logo da 6.10:1 sobre blanco, asi que:
     1. Todo lo que es MARCA (botones, insignias, enlaces, iconos) pasa al teal
        del logo. Se lee mejor y por fin coincide con la marca.
     2. #10B981 se queda SOLO para estados de exito (confirmaciones, "activo"),
        donde su brillo ayuda y el tamano suele ser pequeno.
     3. El LIMA entra como acento calido: el brillo de las esferas del fondo y
        el remate de los degradados. Nunca como texto sobre blanco.
   ========================================================================== */


/* ============================================================================
   1. DEGRADADOS DE MARCA
   ----------------------------------------------------------------------------
   De verde esmeralda a teal + lima. Es el cambio que mas se nota, porque estos
   degradados estan en los botones principales y en el resaltado del titular.
   ========================================================================== */

/* Titular resaltado: teal -> lima, el degradado del propio logo.
   OJO con el contraste: el lima al final del degradado sobre blanco daria
   2.78:1. Por eso el degradado TERMINA en el teal claro (4.6:1) y solo usa el
   lima en el ultimo tramo, donde el texto ya es mas grueso y grande (a partir
   de 24px el minimo baja a 3:1). */
.text-gradient,
.vx-text-grad {
    background: linear-gradient(120deg,
        var(--vx-teal-700) 0%,
        var(--vx-teal-500) 55%,
        var(--vx-lima-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Boton principal */
.btn-primary {
    /* Termina en teal 600 y no en teal 400: con texto blanco encima, el teal
       claro se queda en 2.36:1 y no se lee (el minimo es 4.5:1). */
    background: linear-gradient(135deg, var(--vx-teal-700) 0%, var(--vx-teal-600) 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(8, 114, 80, 0.26);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--vx-teal-800, #075F43) 0%, var(--vx-teal-700) 100%);
    box-shadow: 0 10px 26px rgba(8, 114, 80, 0.32);
    transform: translateY(-2px);
}

/* Remate superior de las tarjetas de caracteristicas */
.feature-item::before {
    background: linear-gradient(90deg, var(--vx-teal-500), var(--vx-lima-400));
}

/* Icono de las tarjetas */
.feature-icon {
    background: linear-gradient(135deg, var(--vx-teal-100) 0%, var(--vx-lima-100) 100%);
}
.feature-icon i { color: var(--vx-teal-600); }

/* Esferas del fondo del hero.
   Antes eran tres verdes casi identicos. Ahora hay contraste entre ellas:
   teal, lima y un teal claro, que es lo que da sensacion de profundidad. */
.orb-1 { background: radial-gradient(circle, var(--vx-teal-400), transparent 70%); }
.orb-2 { background: radial-gradient(circle, var(--vx-lima-400), transparent 70%); }
.orb-3 { background: radial-gradient(circle, var(--vx-teal-300), transparent 70%); }

/* Grafico de la seccion de confianza */
.trust-graphic {
    background: linear-gradient(135deg, var(--vx-teal-50) 0%, var(--vx-lima-50) 100%);
}
.trust-graphic i { color: var(--vx-teal-600); }


/* ============================================================================
   2. COLOR DE TEXTO Y ENLACES DE MARCA
   ----------------------------------------------------------------------------
   Este bloque es el que arregla la legibilidad: #10B981 pasa a teal en todo lo
   que es texto o icono sobre fondo claro.
   ========================================================================== */

.hero-badge,
.section-badge {
    background: var(--vx-teal-50);
    color: var(--vx-teal-700);
    border: 1px solid var(--vx-teal-100);
}

.hero-badge i,
.section-badge i { color: var(--vx-teal-600); }

.feature-link {
    color: var(--vx-teal-600);
    font-weight: 600;
}
.feature-link:hover { color: var(--vx-teal-700); }

.feature-link i,
.feature-link svg { transition: transform 0.22s var(--vx-ease); }
.feature-link:hover i,
.feature-link:hover svg { transform: translateX(4px); }


/* ============================================================================
   3. BOTONES: ACABADO
   ----------------------------------------------------------------------------
   Se unifican los radios y se anade una curva de transicion mas suave. Los
   botones pasan a forma de pastilla completa, que es lo que mas "moderniza"
   sin alterar el tamano ni la posicion.
   ========================================================================== */

.btn {
    border-radius: var(--vx-radius-full);
    transition: transform 0.22s var(--vx-ease), box-shadow 0.22s var(--vx-ease),
                background-color 0.22s var(--vx-ease), border-color 0.22s var(--vx-ease),
                color 0.22s var(--vx-ease);
}

/* Secundario: contorno de marca */
.btn-secondary {
    background: var(--vx-surface);
    color: var(--vx-ink-600);
    border: 1.5px solid var(--vx-border);
}
.btn-secondary:hover {
    background: var(--vx-teal-50);
    border-color: var(--vx-teal-400);
    color: var(--vx-teal-700);
    transform: translateY(-2px);
}

/* Contorno sobre fondo oscuro (seccion final) */
.btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Foco visible al navegar con teclado.
   El teal sobre blanco (6.10:1) cumple el minimo de 3:1 para indicadores. */
.btn:focus-visible {
    outline: 3px solid var(--vx-teal-400);
    outline-offset: 3px;
}
.btn-outline:focus-visible {
    outline-color: var(--vx-lima-300);
}


/* ============================================================================
   4. TARJETAS: ACABADO MODERNO
   ----------------------------------------------------------------------------
   Suben mas al pasar el raton, con sombra de marca en vez de sombra negra. Una
   sombra negra sobre fondo verde se ve sucia; con tinte teal se integra.
   ========================================================================== */

.feature-item {
    border-radius: var(--vx-radius-lg);
    border: 1px solid var(--vx-border);
    box-shadow: var(--vx-shadow-xs);
    transition: transform 0.28s var(--vx-ease), box-shadow 0.28s var(--vx-ease),
                border-color 0.28s var(--vx-ease);
}
.feature-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--vx-shadow-md);
    border-color: var(--vx-teal-200);
}

/* Tarjetas flotantes del hero */
.illustration-card {
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-shadow-md);
    border: 1px solid var(--vx-border);
    transition: transform 0.3s var(--vx-ease), box-shadow 0.3s var(--vx-ease);
}
.illustration-card:hover {
    box-shadow: var(--vx-shadow-lg);
}


/* ============================================================================
   5. TIPOGRAFIA FLUIDA
   ----------------------------------------------------------------------------
   Los tamanos fijos obligan a saltos bruscos entre movil y escritorio. Con
   clamp() el titular crece de forma continua. El maximo es el mismo que habia
   (3.5rem), asi que en escritorio se ve igual que antes.
   ========================================================================== */

.hero-title {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
    line-height: var(--vx-leading-tight);
    letter-spacing: -0.03em;
    color: var(--vx-ink-900);
}

.section-title {
    font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
    line-height: var(--vx-leading-tight);
    letter-spacing: -0.02em;
    color: var(--vx-ink-900);
}

.cta-content h2 {
    font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
    line-height: var(--vx-leading-tight);
    letter-spacing: -0.02em;
}

.hero-description,
.section-description {
    color: var(--vx-ink-500);
    line-height: var(--vx-leading-body);
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
}

/* Los parrafos de las tarjetas respiran algo mas */
.feature-item p { line-height: 1.62; }

/* El titular tenia un <br> fijo que en movil partia mal la frase.
   Esto solo cambia el comportamiento del salto, no el texto. */
.hero-title br { display: none; }
@media (min-width: 900px) {
    .hero-title br { display: inline; }
}


/* ============================================================================
   6. LEGIBILIDAD DE LAS CIFRAS DEL HERO
   ----------------------------------------------------------------------------
   Antes eran verde brillante sobre blanco: 2.54:1. Ahora tinta oscura sobre el
   degradado de marca, que ademas hace que el numero destaque y no el color.
   ========================================================================== */

.stat-number {
    color: var(--vx-teal-700);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;   /* las cifras no bailan al cambiar */
}
.stat-label { color: var(--vx-ink-500); }

.stat-divider {
    background: linear-gradient(180deg, transparent, var(--vx-teal-200), transparent);
}


/* ============================================================================
   7. DETALLES
   ========================================================================== */

/* Separacion para que la barra fija no tape el titular al cargar la pagina.
   Sin esto, el contenido empieza pegado al borde superior. */
.vitalix-welcome .hero { padding-top: 74px; }

/* La seccion de confianza y la final se separan con un filo tenue de marca */
.trust { border-block: 1px solid var(--vx-teal-100); }

/* Centrado vertical mas comodo de las insignias con icono */
.hero-badge,
.section-badge,
.trust-badge { line-height: 1; }

.hero-badge i,
.section-badge i,
.trust-badge i { display: grid; place-items: center; }

/* El distintivo de confianza tambien pasa a la paleta de marca */
.trust-badge {
    background: var(--vx-teal-50);
    color: var(--vx-teal-700);
    border: 1px solid var(--vx-teal-100);
}
.trust-badge i { color: var(--vx-teal-600); }

/* Certificaciones: icono en teal, texto en tinta */
.cert i { color: var(--vx-teal-600); }
.cert span { color: var(--vx-ink-700); }

/* Seccion final (CTA): fondo con el teal profundo del logo en vez de negro
   azulado generico, para que la marca cierre la pagina. */
.cta { background: var(--vx-grad-dark); }


/* ============================================================================
   8. MOVIMIENTO REDUCIDO
   ----------------------------------------------------------------------------
   Quien pide menos animacion en su sistema operativo (mareos, migrana,
   vestibular) no debe recibir desplazamientos ni zooms.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .feature-item:hover,
    .illustration-card:hover,
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover {
        transform: none;
    }
}


/* ============================================================================
   9. RESPONSIVE
   ========================================================================== */

/* En movil, el degradado del titular pierde el lima: a ese tamano el texto es
   mas pequeno y el lima bajaria del minimo de contraste. */
@media (max-width: 640px) {
    .text-gradient,
    .vx-text-grad {
        background: linear-gradient(120deg, var(--vx-teal-700) 0%, var(--vx-teal-500) 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
    .vitalix-welcome .hero { padding-top: 66px; }
}

/* En pantallas grandes, aprovechar el ancho extra sin estirar el texto */
@media (min-width: 1600px) {
    .hero-container { max-width: 1500px; }
}


/* ============================================================================
   10. RESPONSIVE MULTIPLATAFORMA DEL SITIO PUBLICO
   ----------------------------------------------------------------------------
   Esta seccion sale de probar la portada, la barra de navegacion y el pie en
   iOS, en Android y en escritorio, y de anotar lo que fallaba en cada uno:

     - la barra fija tapa el titular y, en un iPhone con muesca, la muesca tapa
       la barra;
     - el menu movil no reserva la franja de la barra de gestos, asi que la
       ultima opcion ("Cerrar Sesion") queda debajo y no se puede pulsar;
     - en un telefono en horizontal el titular y las esferas del fondo ocupan
       mas alto que la pantalla entera;
     - los enlaces del pie median 6px de alto util: imposibles de acertar con
       el dedo;
     - el efecto de "el logo gira al pasar el raton" se queda pegado en tactil.

   Nada de esto cambia la paleta ni el contenido: son ajustes de plataforma.
   ========================================================================== */

/* --- 10.1 Franjas de muesca y barra de gestos ---
   env() vale 0px en un dispositivo sin recorte, asi que estas reglas no hacen
   nada en un portatil. Solo actuan en iPhone/iPad y en Android con bordes
   curvos. */

.vitalix-navbar {
    /* En horizontal, la muesca ocupa los primeros 44px del lateral. */
    padding-left: var(--vx-safe-left, 0px);
    padding-right: var(--vx-safe-right, 0px);
    /* Cuando la web se abre instalada en iOS, la barra de estado se superpone
       al contenido: esta franja la devuelve. */
    padding-top: var(--vx-safe-top, 0px);
}

/* El titular se separa lo que mide la barra MAS la franja de la muesca. */
.vitalix-welcome .hero {
    padding-top: calc(74px + var(--vx-safe-top, 0px));
}

.mobile-menu {
    /* La franja inferior (barra de gestos) y la superior (muesca). Sin esto, la
       ultima opcion del menu queda bajo la barra de gestos del iPhone. */
    padding-bottom: var(--vx-safe-bottom, 0px);
    height: var(--vx-vh-px, 100dvh);
}

.mobile-menu-header {
    padding-top: calc(1.1rem + var(--vx-safe-top, 0px));
}

.vitalix-footer {
    padding-bottom: var(--vx-safe-bottom, 0px);
    padding-left: var(--vx-safe-left, 0px);
    padding-right: var(--vx-safe-right, 0px);
}


/* --- 10.2 Saltos de linea fijos en los titulares ---
   La portada trae <br> escritos a mano dentro de las frases
   ("...conecta pacientes, medicos y especialistas<br>en una plataforma...") y
   del titular de la seccion final. En un telefono esos saltos parten la frase
   por un sitio que ya no tiene sentido, porque el texto ocupa tres o cuatro
   lineas de todas formas.

   El salto se desactiva en pantallas estrechas y se respeta en escritorio, que
   es donde estaba pensado. NO se toca el texto: solo como se reparte. */
.hero-description br,
.trust-content h2 br,
.cta-content h2 br,
.section-title br {
    display: none;
}

@media (min-width: 900px) {
    .hero-description br,
    .trust-content h2 br,
    .cta-content h2 br,
    .section-title br {
        display: inline;
    }
}


/* --- 10.3 Tabletas ---
   Entre 769px y 1024px la portada ya pasa a una columna (vitalix-welcome.css).
   Lo que faltaba era el aire vertical: con las dos columnas apiladas, la seccion
   del hero quedaba muy alta y el boton "Conocer mas" caia fuera de la primera
   pantalla. */

@media (max-width: 1024px) {
    .vitalix-welcome .hero {
        padding-bottom: 2.5rem;
    }

    /* Las esferas decorativas del fondo se reducen: en una columna, tres
       circulos grandes compiten con el texto. */
    .gradient-orb {
        opacity: 0.6;
    }
}


/* --- 10.4 Moviles ---
   Las cifras del hero (50K+, 500+, 98%) son tres bloques con separadores
   verticales. Por debajo de 600px no caben en una fila legible. */

@media (max-width: 600px) {
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
        gap: 1rem;
        width: 100%;
    }

    /* El separador vertical carece de sentido cuando los bloques pasan a
       rejilla: se sustituye por nada, el aire ya separa. */
    .stat-divider {
        display: none;
    }

    .hero-buttons {
        width: 100%;
    }

    /* Botones de la portada a ancho completo: son la accion principal de la
       pagina y en un telefono conviene que no haya que apuntar. */
    .hero-buttons .btn,
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Los enlaces del pie son navegacion: necesitan el area de toque de una
       lista, no la de un texto en linea. */
    .footer-links a,
    .vitalix-footer .footer-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .social-link {
        width: 44px;
        height: 44px;
    }
}


/* --- 10.5 Moviles muy estrechos (iPhone SE, Galaxy Fold cerrado) --- */

@media (max-width: 380px) {
    .vitalix-welcome .hero {
        padding-top: calc(66px + var(--vx-safe-top, 0px));
    }

    /* Los circulos decorativos se salen del ancho y provocan desplazamiento
       horizontal. Se limita su tamano en lugar de ocultarlos. */
    .gradient-orb {
        max-width: 90vw;
        max-height: 90vw;
    }

    .main-illustration {
        width: 160px;
        height: 160px;
    }

    /* El formulario de suscripcion: el campo y el boton en una fila dejan 90px
       para el texto del boton ("Suscribirse" no cabe). */
    .newsletter-input-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .newsletter-input-wrapper input,
    .newsletter-input-wrapper button {
        width: 100%;
    }
}


/* --- 10.6 Telefono en horizontal ---
   Con 320-420px de alto, la barra fija de 74px y las esferas del fondo dejan el
   titular en una rendija. Se comprime lo decorativo, no el contenido. */

@media (max-height: 500px) and (orientation: landscape) {
    .vitalix-welcome .hero {
        padding-top: calc(58px + var(--vx-safe-top, 0px));
        padding-bottom: 2rem;
    }

    .nav-container {
        height: 58px;
    }

    .gradient-orb {
        width: 220px;
        height: 220px;
        opacity: 0.5;
    }
}


/* --- 10.7 Tactil ---
   En un dispositivo sin raton, el efecto de pasar el cursor se dispara al tocar
   y se queda pegado hasta que se toca otra cosa: el logo se queda girado y los
   enlaces del pie desplazados. Se desactiva solo el movimiento; el color se
   mantiene, porque confirma el toque. */

@media (hover: none) {
    .nav-logo a:hover .logo-img,
    .nav-logo a:hover .logo-glow,
    .footer-link:hover,
    .social-link:hover,
    .btn:hover {
        transform: none;
    }

    .nav-logo a:hover .logo-glow {
        opacity: 0;
    }

    /* Confirmacion inmediata del toque: en iOS y Android pasan ~300ms entre el
       toque y la navegacion. */
    .nav-link:active,
    .mobile-link:active,
    .footer-links a:active {
        opacity: 0.75;
    }
}


/* --- 10.8 Movimiento reducido ---
   Quien ha pedido menos movimiento en su sistema operativo no debe recibir tres
   esferas girando ni un latido en el pie. */

@media (prefers-reduced-motion: reduce) {
    .gradient-orb,
    .logo-glow,
    .medical-cross {
        animation: none !important;
        transition: none !important;
    }

    .nav-logo a:hover .logo-img {
        transform: none;
    }
}


/* --- 10.9 Impresion ---
   La portada no es una pagina para imprimir, pero si alguien lo hace, la barra
   fija y las esferas del fondo no aportan nada y gastan tinta. */

@media print {
    .vitalix-navbar,
    .mobile-menu,
    .mobile-menu-overlay,
    .gradient-orb,
    .hero-illustration {
        display: none !important;
    }

    .vitalix-welcome .hero {
        padding-top: 0 !important;
    }

    .vitalix-footer {
        border-top: 1px solid #D1D5DB;
    }
}