/*html {
  font-size: 12px;
}

@media (min-width: 768px) {
  html {
    font-size: 12px;
  }
}

.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

/*css para el publicNavlayout*/
/* ==========================================
   1. RESETS Y VARIABLES DE COLOR
   ========================================== */
:root {
    --azul-oscuro: #135692;
    --azul-claro: #2a94e3;
    --blanco-puro: #ffffff;
    --gris-fondo: #f5f8fa;
    --gris-texto: #4a5568;
    --sombra-elegante: 0 4px 15px rgba(19, 86, 146, 0.08);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--gris-fondo);
    color: var(--gris-texto);
    line-height: 1.6;
}

/* ==========================================
   2. ESTRUCTURA DEL LAYOUT GENERAL
   ========================================== */
.publi-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.publi-main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

/* ==========================================
   3. BARRA DE NAVEGACIÓN (NAVBAR)
   ========================================== */
.publi-navbar {
    background-color: var(--blanco-puro);
    border-bottom: 3px solid var(--azul-oscuro);
    box-shadow: var(--sombra-elegante);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Marca / Logo */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

    .navbar-brand img {
        height: 40px;
        width: auto;
    }

/* Menú de Enlaces */
.navbar-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
}

/* Enlaces Comunes (Inicio, Servicios, etc.) */
.nav-link-standard {
    color: var(--azul-oscuro);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

    .nav-link-standard:hover {
        color: var(--azul-claro);
    }

/* ==========================================
   4. BOTONES DE ACCESO (LOGIN Y REGISTER)
   ========================================== */
/* Estilo Base del Botón */
.btn-nav {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: inline-block;
}

/* Botón de Login (Esquema Limpio / Outline) */
.btn-nav-login {
    color: var(--azul-oscuro);
    background-color: transparent;
    border: 2px solid var(--azul-oscuro);
}

    .btn-nav-login:hover {
        background-color: var(--azul-oscuro);
        color: var(--blanco-puro);
    }

/* Botón de Registro (Llamativo / Sólido) */
.btn-nav-register {
    color: var(--blanco-puro);
    background-color: var(--azul-claro);
    border: 2px solid var(--azul-claro);
    box-shadow: 0 4px 6px rgba(42, 148, 227, 0.2);
}

    .btn-nav-register:hover {
        background-color: var(--azul-oscuro);
        border-color: var(--azul-oscuro);
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(19, 86, 146, 0.25);
    }

.btn-nav:active {
    transform: scale(0.98);
}

/* ==========================================
   5. PIE DE PÁGINA (FOOTER)
   ========================================== */
.publi-footer {
    background-color: var(--azul-oscuro);
    color: var(--blanco-puro);
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
}

/* ==========================================
   6. LOGIN
   ========================================== */
/* Contenedor principal que se adapta al Layout */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
}

/* Tarjeta del Login */
.login-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 40, 100, 0.08);
    width: 100%;
    max-width: 400px;
    transition: transform 0.2s;
}

/* Sección del Logo y Títulos */
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .login-header img {
        max-width: 150px;
        height: auto;
        margin-bottom: 1rem;
    }

    .login-header h2 {
        color: #0d2b45; /* Azul Oscuro Profesional */
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .login-header p {
        color: #6c757d;
        font-size: 0.9rem;
    }

/* Grupos de Formulario */
.form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #203a43;
        font-size: 0.85rem;
        font-weight: 500;
    }

/* Inputs de Texto/Password */
.form-control-login {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1.5px solid #dce4ec;
    border-radius: 8px;
    background-color: #fff;
    color: #495057;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control-login:focus {
        outline: none;
        border-color: #203a43; /* Azul Medio */
        box-shadow: 0 0 0 3px rgba(32, 58, 67, 0.15);
    }

/* Opciones: Recordarme y Olvidé mi clave */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

    .login-options a {
        color: #2c3e50; /* Azul Intermedio */
        text-decoration: none;
        font-weight: 500;
    }

        .login-options a:hover {
            text-decoration: underline;
        }

/* Botón Primario de Acción */
.btn-login {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: #0d2b45; /* Degradado con tus 3 azules */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

    .btn-login:hover {
        opacity: 0.95;
    }

    .btn-login:active {
        transform: scale(0.98);
    }

/* Mensajes de Validación (ASP.NET Core) */
.text-danger-login {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================
   7. PÁGINA REGISTRO
   ========================================== */
/* Contenedor de Pantalla Completa */
.auth-container {
    display: grid;
    grid-template-columns: 450px 1fr;
    min-height: 100vh;
    background-color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Panel Izquierdo (Corporativo) */
.auth-sidebar {
    background-color: #0f172a; /* El mismo tono oscuro del sidebar del dashboard */
    color: #ffffff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    /* Efecto de fondo sutil y elegante */
    .auth-sidebar::before {
        content: "";
        position: absolute;
        top: -20%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(0,0,0,0) 70%);
        border-radius: 50%;
    }

.auth-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 64px;
}

.auth-sidebar-content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #f8fafc;
}

.auth-sidebar-content p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.5;
}

.auth-sidebar-footer {
    font-size: 0.8rem;
    color: #64748b;
}

/* Panel Derecho (Formulario) */
.auth-form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    background-color: #f8fafc;
}

.auth-form-box {
    width: 100%;
    max-width: 480px;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

    .auth-form-box h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8px;
    }

.auth-subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 32px;
}

/* Estructura del Formulario */
.identity-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 16px;
}

    .form-row .form-group {
        flex: 1;
    }

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

    .form-group label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #334155;
    }

    /* Inputs Modernos */
    .form-group input {
        padding: 10px 14px;
        font-size: 0.95rem;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background-color: #ffffff;
        color: #1e293b;
        font-family: inherit;
        transition: all 0.15s ease;
    }

        .form-group input:focus {
            outline: none;
            border-color: #2563eb; /* Azul corporativo */
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        }

        .form-group input::placeholder {
            color: #94a3b8;
        }

/* Checkbox de Términos */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
}

    .form-checkbox input[type="checkbox"] {
        margin-top: 3px;
        cursor: pointer;
    }

    .form-checkbox label {
        font-size: 0.85rem;
        color: #64748b;
        line-height: 1.4;
    }

    .form-checkbox a {
        color: #2563eb;
        text-decoration: none;
        font-weight: 500;
    }

        .form-checkbox a:hover {
            text-decoration: underline;
        }

/* Botón de Envío */
.btn-submit {
    background-color: #2563eb;
    color: #ffffff;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-top: 8px;
}

    .btn-submit:hover {
        background-color: #1d4ed8;
    }

/* Enlace de redirección inferior */
.auth-redirect {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 16px;
}

    .auth-redirect a {
        color: #2563eb;
        text-decoration: none;
        font-weight: 600;
    }

        .auth-redirect a:hover {
            text-decoration: underline;
        }

/* Clases de validación nativas para ASP.NET Identity */
.text-danger {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Adaptabilidad Móvil */
@media (max-width: 900px) {
    .auth-container {
        grid-template-columns: 1fr;
    }

    .auth-sidebar {
        display: none; /* Esconde el panel corporativo en pantallas pequeñas */
    }

    .auth-form-container {
        padding: 32px 16px;
    }

    .auth-form-box {
        padding: 24px;
        border: none;
        box-shadow: none;
        background-color: transparent;
    }
}
/* ==========================================
   8. PÁGINA DE CONFIRMACION
   ========================================== */
/* Contenedor principal alineado al layout */
.confirm-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Tarjeta informativa */
.confirm-card {
    background: #ffffff;
    padding: 3rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(19, 86, 146, 0.08);
    width: 100%;
    max-width: 440px;
    text-align: center;
}

/* Contenedor del Logo */
.confirm-logo {
    margin-bottom: 2rem;
}

    .confirm-logo img {
        max-width: 130px;
        height: auto;
    }

/* Icono de Éxito / Estado (Hecho con CSS puro) */
.confirm-icon-status {
    width: 72px;
    height: 72px;
    background-color: rgba(42, 148, 227, 0.1); /* Tu azul claro con opacidad */
    border: 2px solid #2a94e3; /* Tu azul claro sólido */
    color: #2a94e3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto 1.5rem auto;
}

/* Textos de la tarjeta */
.confirm-card h2 {
    color: #135692; /* Tu Azul Corporativo */
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.confirm-card p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Botón de Acción Principal para retornar */
.btn-confirm-return {
    display: block;
    width: 100%;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #135692, #2a94e3);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    box-shadow: 0 4px 12px rgba(42, 148, 227, 0.2);
}

    .btn-confirm-return:hover {
        opacity: 0.95;
    }

    .btn-confirm-return:active {
        transform: scale(0.98);
    }

/* ==========================================
   9. PÁGINA RECUPERAR CONTRASEÑA
   ========================================== */
/* Contenedor principal que se alinea con el layout */
.forgot-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Tarjeta del Formulario */
.forgot-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(19, 86, 146, 0.08);
    width: 100%;
    max-width: 420px;
}

/* Encabezado */
.forgot-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .forgot-header img {
        max-width: 140px;
        height: auto;
        margin-bottom: 1.25rem;
    }

    .forgot-header h2 {
        color: #135692; /* Tu Azul Corporativo */
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    .forgot-header p {
        color: #6c757d;
        font-size: 0.9rem;
        line-height: 1.4;
    }

/* Mensaje informativo o de alerta interna */
.forgot-instructions {
    background-color: rgba(42, 148, 227, 0.08); /* Tu azul claro con opacidad */
    border-left: 4px solid #2a94e3; 
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #135692;
}

/* Campos de formulario */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #135692;
        font-size: 0.85rem;
        font-weight: 600;
    }

.form-control-forgot {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1.5px solid #dce4ec;
    border-radius: 8px;
    color: #4a5568;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control-forgot:focus {
        outline: none;
        border-color: #2a94e3; /* Enfoque con azul claro */
        box-shadow: 0 0 0 3px rgba(42, 148, 227, 0.15);
    }

/* Botón de Enviar Enlace */
.btn-forgot {
    width: 100%;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #135692, #2a94e3); /* Combinación elegante de tus dos azules */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    margin-bottom: 1.25rem;
}

    .btn-forgot:hover {
        opacity: 0.95;
    }

    .btn-forgot:active {
        transform: scale(0.98);
    }

/* Enlace para regresar al Login */
.forgot-footer {
    text-align: center;
    font-size: 0.85rem;
}

    .forgot-footer a {
        color: #2a94e3;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
    }

        .forgot-footer a:hover {
            color: #135692;
            text-decoration: underline;
        }

/* Errores de Validación */
.text-danger-forgot {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================
   10. PÁGINA RESET CONTRASEÑA
   ========================================== */
/* Contenedor principal alineado al layout */
.reset-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Tarjeta del Formulario */
.reset-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(19, 86, 146, 0.08);
    width: 100%;
    max-width: 440px;
}

/* Encabezado */
.reset-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .reset-header img {
        max-width: 140px;
        height: auto;
        margin-bottom: 1.25rem;
    }

    .reset-header h2 {
        color: #135692; /* Tu Azul Corporativo */
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .reset-header p {
        color: #6c757d;
        font-size: 0.9rem;
    }

/* Lista de requisitos de contraseña (Estilo seguro y profesional) */
.password-requirements {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
}

    .password-requirements p {
        font-size: 0.8rem;
        font-weight: 600;
        color: #135692;
        margin-bottom: 0.4rem;
    }

    .password-requirements ul {
        list-style: none;
        padding-left: 0;
    }

    .password-requirements li {
        font-size: 0.78rem;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

        .password-requirements li::before {
            content: "✓";
            color: #2a94e3; /* Tu azul claro de acento */
            font-weight: bold;
        }

/* Grupos de Formulario */
.form-group {
    margin-bottom: 1.25rem;
}

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #135692;
        font-size: 0.85rem;
        font-weight: 600;
    }

/* Inputs */
.form-control-reset {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1.5px solid #dce4ec;
    border-radius: 8px;
    color: #4a5568;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control-reset:focus {
        outline: none;
        border-color: #2a94e3; /* Enfoque azul claro */
        box-shadow: 0 0 0 3px rgba(42, 148, 227, 0.15);
    }

/* Botón de Guardar */
.btn-reset {
    width: 100%;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #135692, #2a94e3);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    margin-top: 0.5rem;
}

    .btn-reset:hover {
        opacity: 0.95;
    }

    .btn-reset:active {
        transform: scale(0.98);
    }

/* Mensajes de Validación */
.text-danger-reset {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
    display: block;
}
/* ==========================================
   10. PÁGINA HOME DASHBOARD
   ========================================== */
/* Contenedor principal de la página Home */
.dashboard-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Centra el contenido verticalmente en la pantalla */
    text-align: center;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9fbfd; /* Fondo suave y limpio */
}

/* Contenedor del Logo */
.home-logo-wrapper {
    margin-bottom: 24px;
    animation: fadeIn 0.8s ease-out; /* Animación suave al cargar */
}

.home-logo {
    max-width: 180px; /* Tamaño controlado para el logo */
    height: auto;
    display: block;
}

/* Título de bienvenida */
.home-title {
    font-size: 2rem;
    color: #1e293b; /* Gris oscuro profesional */
    margin: 0 0 10px 0;
    font-weight: 600;
}

/* El Lema (Slogan) */
.home-slogan {
    font-size: 1.1rem;
    color: #64748b; /* Gris medio, excelente para subtítulos */
    max-width: 500px; /* Evita que el texto se estire demasiado en pantallas anchas */
    line-height: 1.5;
    margin: 0;
}

/* Efecto de entrada suave */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ==========================================
   11. PÁGINA HOME LAYOUT PUBLICO
   ========================================== */
/* Contenedor principal de la página de inicio */
.home-hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 75vh;
    padding: 2rem;
    background-color: #ffffff; /* Tu tercer color: Blanco */
}

/* Bloque central de contenido */
.home-hero-content {
    max-width: 700px;
    animation: fadeInUp 0.8s ease-out;
}

/* El Logo Principal */
.home-logo-wrapper {
    margin-bottom: 2.5rem;
}

    .home-logo-wrapper img {
        max-width: 220px; /* Tamaño destacado para el Index */
        height: auto;
        filter: drop-shadow(0 4px 10px rgba(19, 86, 146, 0.12));
    }

/* Título Principal */
.home-title {
    color: #135692; /* Tu Azul Corporativo Fuerte */
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

/* El Lema de la Empresa */
.home-slogan {
    color: #2a94e3; /* Tu Azul Claro de Acento */
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.5px;
    margin-bottom: 3rem;
    line-height: 1.5;
}

/* Botón de Llamada a la Acción */
.btn-home-cta {
    display: inline-block;
    padding: 0.9rem 2.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #135692, #2a94e3);
    border: none;
    border-radius: 30px; /* Bordes redondeados modernos */
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(42, 148, 227, 0.3);
    transition: all 0.3s ease;
}

    .btn-home-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(19, 86, 146, 0.4);
        opacity: 0.95;
    }

    .btn-home-cta:active {
        transform: translateY(0);
    }

/* Animación de entrada elegante */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Adaptación para pantallas móviles */
@media (max-width: 768px) {
    .home-title {
        font-size: 2.2rem;
    }

    .home-slogan {
        font-size: 1.15rem;
    }

    .home-logo-wrapper img {
        max-width: 170px;
    }
}