/* Estilos propios de index.php. Extraidos de su <style> inline.

   Rediseño: mismo lenguaje visual que login.php. Antes el fondo era un
   degrade con los colores del tema (var(--color-primario)/secundario);
   ahora es la misma foto institucional (banner-plan-de-salud.jpg) con
   un degrade azul encima, y el contenido va en una tarjeta de vidrio
   esmerilado centrada en vez de texto suelto sobre el fondo. */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
    /* Llena todo el alto disponible dentro de main-content (ver
       layout/navbar.php), en vez de un vh fijo, para que se adapte
       solo a la barra superior de mobile, al sidebar de escritorio,
       etc. sin dejar huecos. */
    min-height: 100%;
    padding: 3rem 1rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

/* Degrade azul sobre la foto, para que la tarjeta tenga contraste sin
   importar que parte de la imagen quede detras. Reemplaza al velo negro
   plano que había antes. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(11, 31, 77, .7) 0%,
        rgba(11, 31, 77, .45) 45%,
        rgba(11, 31, 77, .65) 100%);
    pointer-events: none;
}

.hero-section>* {
    position: relative;
}

/* Tarjeta de vidrio esmerilado: el mismo tratamiento que la del login. */
.hero-tarjeta {
    width: 100%;
    max-width: 520px;
    background: rgba(15, 23, 42, .4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 24px;
    padding: 2.75rem 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.hero-section .cta .btn-light {
    color: #111;
}

.hero-section .cta .btn-outline-light {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero-section .icono {
    font-size: 2.5rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
    animation: fadeIn 1.2s ease-in-out;
}

.hero-section h1 {
    font-size: 2.25rem;
    font-weight: 700;
    animation: fadeIn 1.2s ease-in-out;
}

.hero-section p.bienvenida {
    font-size: 1.15rem;
    opacity: 0.95;
    animation: fadeIn 1.2s ease-in-out 0.3s backwards;
}

.hero-section .cta {
    animation: fadeIn 1.2s ease-in-out 0.6s backwards;
}

@media (max-width: 576px) {
    .hero-section {
        padding: 2.5rem 1rem;
    }

    .hero-tarjeta {
        padding: 2rem 1.5rem;
    }

    .hero-section h1 {
        font-size: 1.7rem;
    }

    .hero-section p.bienvenida {
        font-size: 1.05rem;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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