/* ==========================
    REINICIO Y VARIABLES
    ========================== */
/* Reinicio de estilos y variables CSS para un diseño consistente */

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

/* Asegura que los iconos animados sean visibles y tengan tamaño adecuado */

:root {
    /* Colores principales - Paleta corporativa profesional */
    --primary-color: #2563eb;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --accent-color: #38bdf8;
    --accent-secondary: #0ea5e9;
    --neon-green: #34d399;
    --neon-pink: #93c5fd;
    --dark-bg: #0d1f3c;
    --darker-bg: #060e1a;
    --card-bg: rgba(13, 31, 60, 0.65);
    --white: #f0f9ff;
    --gray-light: #94a3b8;
    --gray: #64748b;
    --border-subtle: rgba(37, 99, 235, 0.14);
    --border-hover: rgba(59, 130, 246, 0.45);

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Tipografia */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Orbitron', sans-serif;

    /* Sombras corporativas */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.4);
    --shadow-blue: 0 8px 32px rgba(37, 99, 235, 0.3);
    --shadow-card: 0 4px 24px rgba(37, 99, 235, 0.12), 0 0 1px rgba(37, 99, 235, 0.2);
    --glow-cyan: 0 0 20px rgba(37, 99, 235, 0.3), 0 0 40px rgba(37, 99, 235, 0.1);
    --glow-purple: 0 0 20px rgba(56, 189, 248, 0.25), 0 0 40px rgba(56, 189, 248, 0.1);
    --glow-green: 0 0 20px rgba(52, 211, 153, 0.25);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-primary);
    color: var(--white);
    background-color: var(--darker-bg);
    line-height: 1.7;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    box-sizing: border-box;
}

/* ==========================
    ESTILOS GLOBALES
    ========================== */
/* Estilos generales para HTML y body */

/* ==========================
    BARRA DE NAVEGACIÓN
    ========================== */
/* Estilos para la barra de navegación, incluyendo comportamiento responsivo */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(3, 7, 18, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-subtle);
    border-bottom: 1px solid rgba(14, 165, 233, 0.08);
    transition: all var(--transition-base);
}

.navbar.scrolled {
    background-color: rgba(6, 10, 20, 0.95);
    box-shadow: 0 1px 0 var(--border-subtle), var(--shadow-lg);
    border-bottom-color: rgba(14, 165, 233, 0.15);
    box-shadow: 0 4px 30px rgba(14, 165, 233, 0.05);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
}

.navbar .container {
    padding-left: 0;
    padding-right: var(--spacing-md);
}

.nav-content > a {
    text-decoration: none;
    color: inherit;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: 0;
}

.logo-image {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 0.4rem;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    border: 1.5px solid rgba(59, 130, 246, 0.2);
    gap: var(--shadow-md);
}

.logo-image:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-blue);
}

.logo-text {
    color: var(--white);
    font-family: var(--font-heading);
    gap: var(--shadow-md)
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
    align-items: center;
}

/* Con 8 entradas el menú roza el ancho disponible justo antes del breakpoint móvil */
@media (min-width: 1025px) and (max-width: 1180px) {
    .nav-links {
        gap: 1.35rem;
    }
}

.nav-links a {
    color: var(--gray-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
    padding: var(--spacing-sm) 0;
    letter-spacing: 0.01em;
}

.nav-links a:hover {
    color: var(--white);
}

.nav-links a.active {
    color: var(--primary-light);
    position: relative;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

.btn-nav {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    padding: 0.5rem 1.5rem !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
    color: #ffffff !important;
    font-weight: 600;
}

.btn-nav:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--glow-cyan);
}

.btn-nav.active,
.nav-links a.active.btn-nav {
    color: #ffffff !important;
}

/* ==========================
   BOTÓN DE ACCESO EN LA BARRA
   ==========================
   Convive con el CTA de prueba y NO compite con él. Quien llega a la landing
   casi nunca es cliente todavía: si el botón de entrar grita más que "Probar
   gratis", la barra empuja al visitante hacia una puerta que no puede abrir.

   Pero "Entrar" como enlace suelto al 82% de opacidad tampoco servía: el
   cliente que viene a trabajar tiene que encontrarlo de un vistazo, y un
   enlace apagado entre otros cinco no se ve.

   La solución es distinguirlo por FORMA e ICONO, no por peso de color:
     - píldora contorneada (el CTA es un rectángulo relleno) → se distinguen
       de un vistazo sin que ninguno tape al otro;
     - icono de puerta con flecha entrando → dice "acceso" antes de que
       nadie lea la etiqueta, que es lo que lo hace reconocible al instante;
     - el relleno aparece al pasar el ratón, no antes.
   ========================== */
.nav-links a.btn-acceso {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.05rem;
    /* Píldora completa: es la diferencia de forma que lo separa del CTA. */
    border-radius: 999px;
    border: 1px solid var(--border-hover);
    background: rgba(59, 130, 246, 0.07);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-links a.btn-acceso i {
    font-size: 1rem;
    color: var(--accent-color);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.nav-links a.btn-acceso:hover {
    background: rgba(59, 130, 246, 0.16);
    border-color: var(--primary-light);
    color: var(--white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* La flecha entra un poco al pasar el ratón: refuerza "esto te mete dentro".
   Es el único movimiento del botón — nada de desplazarlo entero, que en una
   barra fija hace bailar a los enlaces vecinos. */
.nav-links a.btn-acceso:hover i { transform: translateX(2px); }

/* El foco por teclado se ve, y se ve distinto del hover. */
.nav-links a.btn-acceso:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-links a.btn-acceso i { transition: none; }
    .nav-links a.btn-acceso:hover i { transform: none; }
}

/* En el cajón móvil el botón ocupa la fila entera: ahí no compite con nada
   y un botón a media fila entre enlaces a ancho completo se ve descolgado. */
@media (max-width: 1024px) {
    .nav-links a.btn-acceso {
        justify-content: center;
        width: 100%;
        padding: 0.7rem 1.05rem;
    }
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    cursor: pointer;
    padding: 10px;
    width: 46px;
    height: 46px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.mobile-menu-btn:hover {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.05);
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

.mobile-menu-btn span {
    width: 24px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-light));
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: absolute;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.mobile-menu-btn span:nth-child(1) {
    top: 12px;
}

.mobile-menu-btn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.mobile-menu-btn span:nth-child(3) {
    bottom: 12px;
}

/* Animación cuando el menú está activo */
.mobile-menu-btn.active {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.15);
}

.mobile-menu-btn.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scale(0);
}

.mobile-menu-btn.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

@media (max-width: 968px) {
    .hero .container {
        grid-template-columns: 1fr;
    }
}

.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-size: 0.938rem;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--accent-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(14, 165, 233, 0.5), 0 0 40px rgba(168, 85, 247, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-light);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.btn-secondary:hover {
    background: rgba(14, 165, 233, 0.05);
    border-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan);
}

/* Estilos generales de secciones */
section {
    padding: var(--spacing-xl) 0;
    width: 100%;
    overflow-x: hidden;
}

/* La primera sección (servicios) no tiene margen superior */
section:first-of-type {
    margin-top: 0;
    padding-top: var(--spacing-xl);
}

section:last-of-type {
    margin-bottom: 0;
}

.carousel-btn svg,
.carousel-btn .bi {
    width: 24px;
    height: 24px;
    font-size: 1.25rem;
}

.carousel-dot.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .carousel-btn svg,
    .carousel-btn .bi {
        width: 18px;
        height: 18px;
        font-size: 1rem;
    }
}

.service-features li .bi-check-circle-fill {
    color: var(--accent-color);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.service-cta .bi-arrow-right {
    transition: transform 0.3s ease;
}

.service-cta:hover .bi-arrow-right {
    transform: translateX(4px);
}

@media (max-width: 560px) {

    .pd-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

.about .container {
    position: relative;
    z-index: 1;
}

.contact .container {
    position: relative;
    z-index: 1;
}

/* ==========================
    PIE DE PÁGINA
    ==========================
    Compartido por la landing y los documentos legales. Se escribe con los
    tokens de esta hoja (--dark-bg, --gray-light, --border-subtle...) y NO con
    los del rediseño, que viven en `servia.css`: los documentos legales no
    cargan esa hoja y el pie se quedaría sin colores en la mitad del sitio.
    Como `servia.css` reasigna esos mismos tokens en la landing, el pie se
    tiñe solo con las superficies nuevas allí y conserva las de siempre aquí.

    Criterio del diseño: es un pie de EMPRESA. La jerarquía la dan el tamaño
    y el peso del texto, no adornos — se quitaron la barrita de degradado bajo
    cada título y la flecha que aparecía al pasar el ratón sobre cada enlace,
    que en un pie con doce enlaces es doce animaciones compitiendo entre sí.
    ========================== */

.footer {
    position: relative;
    background: var(--darker-bg);
    /* Un filete arriba en vez de un degradado: el pie tiene que leerse como
       una zona distinta de la página, y un degradado largo sobre fondos que
       ya son casi negros no se ve — solo produce bandas en pantallas malas. */
    border-top: 1px solid var(--border-subtle);
}

.footer .container {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
}

.footer-content {
    display: grid;
    /* La marca pesa el doble que cada columna de enlaces: es la que lleva la
       descripción y los contactos. `minmax(0,…)` evita que un correo largo
       ensanche su columna y empuje a las demás fuera. */
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

/* --- Columna de marca --- */
.footer-brand { max-width: 420px; }

/* Sin subrayado en el logotipo del pie.
   ESTE ERA EL DEFECTO: el navegador pinta el subrayado por defecto del
   enlace y la raya cruza justo bajo la palabra "Servia", pegada al icono,
   de modo que parece un fallo del propio logotipo y no un estilo de enlace.
   La barra de navegación no lo sufría porque allí .logo hereda otra regla. */
.footer-brand .logo,
.logo--pie {
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.footer-description {
    color: var(--gray-light);
    line-height: 1.75;
    margin-bottom: 1.5rem;
    font-size: 0.94rem;
    max-width: 40ch;
}

.footer-contacto {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-contacto li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--gray-light);
    font-size: 0.92rem;
}

.footer-contacto i {
    color: var(--accent-color);
    font-size: 1rem;
    flex-shrink: 0;
    /* Ancho fijo para que los tres textos arranquen alineados aunque los
       iconos tengan anchos distintos. */
    width: 1.15rem;
    text-align: center;
}

.footer-contacto a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
    /* Un correo largo parte en vez de ensanchar la columna. */
    overflow-wrap: anywhere;
}

.footer-contacto a:hover,
.footer-contacto a:focus-visible { color: var(--accent-color); }

/* --- Columnas de enlaces --- */
.footer-section h4 {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
}

.footer-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-section li a {
    color: var(--gray-light);
    text-decoration: none;
    font-size: 0.92rem;
    /* El color es lo único que cambia al pasar el ratón. Antes el enlace se
       desplazaba 0.5rem y sacaba una flecha: con doce enlaces, el pie entero
       temblaba al recorrerlo con el ratón. */
    transition: color var(--transition-fast);
}

.footer-section li a:hover,
.footer-section li a:focus-visible { color: var(--white); }

/* --- Barra inferior: identidad de la empresa --- */
.footer-bottom {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.5rem;
}

.footer-bottom p {
    color: var(--gray);
    font-size: 0.85rem;
    margin: 0;
}

/* La ficha fiscal ocupa su propia línea completa y va un punto más apagada:
   tiene que estar y poder leerse, pero no compite con nada. */
.footer-identidad {
    flex-basis: 100%;
    color: var(--gray);
    opacity: 0.85;
    font-size: 0.82rem !important;
}

.footer-producto { margin-left: auto !important; }

.footer-producto a {
    color: var(--gray-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-producto a:hover,
.footer-producto a:focus-visible { color: var(--accent-color); }

/* --- Móvil ---
   Bajo 900px las cuatro columnas no caben: la marca pasa a ocupar el ancho
   entero y los tres bloques de enlaces se reparten debajo. */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-md);
    }
    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .footer-content { grid-template-columns: minmax(0, 1fr); }
    .footer-bottom { flex-direction: column; gap: 0.5rem; }
    .footer-producto { margin-left: 0 !important; }
}

/* ==========================
    DISEÑO RESPONSIVO
    ========================== */
/* Media queries para diferentes tamaños de pantalla */

@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero .container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

}

@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: flex;
    }
    
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(6, 10, 20, 0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        padding: var(--spacing-md);
        gap: 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s ease;
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-xl);
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    
    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-links li {
        width: 100%;
        opacity: 0;
        transform: translateX(-20px);
        animation: slideInMenu 0.3s ease forwards;
    }
    
    .nav-links.active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { animation-delay: 0.15s; }
    .nav-links.active li:nth-child(3) { animation-delay: 0.2s; }
    .nav-links.active li:nth-child(4) { animation-delay: 0.25s; }
    .nav-links.active li:nth-child(5) { animation-delay: 0.3s; }
    .nav-links.active li:nth-child(6) { animation-delay: 0.35s; }
    .nav-links.active li:nth-child(7) { animation-delay: 0.4s; }
    .nav-links.active li:nth-child(8) { animation-delay: 0.45s; }
    
    @keyframes slideInMenu {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .nav-links a {
        display: block;
        padding: 1rem 1.25rem;
        margin: 0.25rem 0;
        border-radius: 8px;
        border-left: 3px solid transparent;
        transition: all var(--transition-fast);
        position: relative;
        overflow: hidden;
    }
    
    .nav-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
        transition: width 0.3s ease;
        z-index: -1;
    }
    
    .nav-links a:hover::before,
    .nav-links a.active::before {
        width: 100%;
    }
    
    .nav-links a:hover,
    .nav-links a.active {
        border-left-color: var(--accent-color);
        background: rgba(59, 130, 246, 0.05);
        padding-left: 1.5rem;
        transform: translateX(5px);
    }
    
    .nav-links a.active::after {
        display: none;
    }
    
    .dropdown.active .dropdown-menu {
        max-height: 250px;
        padding: 0.5rem 0;
    }
    
    .dropdown.active .dropdown-arrow {
        transform: rotate(180deg);
        color: var(--accent-color);
    }
    
    .btn-nav {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        border: 1px solid var(--border-hover);
        text-align: center;
        font-weight: 600;
        margin-top: 0.5rem;
        color: #ffffff !important;
    }

    .btn-nav:hover {
        transform: translateX(4px) translateY(0);
        box-shadow: var(--shadow-blue);
        color: #ffffff !important;
    }
    
    section {
        padding: var(--spacing-lg) 0;
    }
    
}

@media (max-width: 480px) {
    :root {
        --spacing-sm: 0.75rem;
        --spacing-md: 1rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
    }
    
    .container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    .nav-content {
        padding: 0.75rem 0;
    }
    
    .logo {
        font-size: 1.25rem;
    }
    
    .logo-image {
        width: 32px;
        height: 32px;
    }
    
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
}

/* ==========================
   REVELADO AL HACER SCROLL
   ==========================
   Se activa sólo cuando `views/landing/_anim.php` pone `js-anim` en <html>:
   sin JavaScript, con `prefers-reduced-motion` o sin IntersectionObserver la
   clase no aparece y la página se ve entera. Ver el comentario largo de
   `assets/landing/landing.js`.

   `data-anim`          → se anima el elemento.
   `data-anim="hijos"`  → se animan sus hijos directos, en cascada.

   SE USA `animation` Y NO `transition` a propósito: varios de estos bloques
   (.faq-item, .sector-tag, .module-card) declaran su propia `transition` para
   el hover, y la propiedad abreviada la habría reemplazado — el borde dejaría
   de encenderse suavemente al pasar el ratón, un efecto colateral que nadie
   habría relacionado con esto.

   El movimiento es SÓLO vertical. Un desplazamiento horizontal saca el bloque
   del contenedor y aparece una barra de scroll lateral en el móvil. */
html.js-anim [data-anim]:not([data-anim="hijos"]),
html.js-anim [data-anim="hijos"] > * {
    opacity: 0;
}

html.js-anim [data-anim].anim-visto,
html.js-anim [data-anim="hijos"] > .anim-visto {
    animation: revelarArriba 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* El recorrido de 22px de la primera version no se veia: a esa distancia el
   bloque ya esta practicamente colocado cuando aparece, y lo unico que se
   percibia era el fundido. Ahora entra desde 52px, algo encogido y desenfocado,
   con una desaceleracion fuerte (easeOutExpo): llega rapido y se posa.

   El desenfoque es lo que da la sensacion de "materializarse" en vez de
   "deslizarse"; se queda en 9px porque mas alto se lee como un enfoque de
   camara y distrae de lo que hay escrito.

   `scale` sube DESDE 0.965 hasta 1: nunca supera su tamano final, asi que no
   puede desbordar la rejilla ni provocar scroll lateral. Y el desplazamiento
   sigue siendo solo vertical, por lo mismo de siempre. */
@keyframes revelarArriba {
    from {
        opacity: 0;
        transform: translateY(52px) scale(0.965);
        filter: blur(9px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Cascada dentro de un grupo: cuando la rejilla entra entera en pantalla, las
   tarjetas aparecen una detras de otra en vez de todas de golpe.

   Los pasos de 0.06s anteriores metian las siete tarjetas en 0.35s, que a
   ojo es "todas a la vez": la cascada estaba escrita pero no se percibia.
   Con 0.09s se distinguen una por una. El tope se queda en 0.5s -- mas alla
   la ultima tarjeta llega cuando ya has dejado de mirar la rejilla. */
html.js-anim [data-anim="hijos"] > *:nth-child(2) { animation-delay: 0.09s; }
html.js-anim [data-anim="hijos"] > *:nth-child(3) { animation-delay: 0.18s; }
html.js-anim [data-anim="hijos"] > *:nth-child(4) { animation-delay: 0.27s; }
html.js-anim [data-anim="hijos"] > *:nth-child(5) { animation-delay: 0.35s; }
html.js-anim [data-anim="hijos"] > *:nth-child(6) { animation-delay: 0.42s; }
html.js-anim [data-anim="hijos"] > *:nth-child(7) { animation-delay: 0.47s; }
html.js-anim [data-anim="hijos"] > *:nth-child(n+8) { animation-delay: 0.50s; }

/* Cinturón y tirantes: aunque el script del <head> ya no pone `js-anim` con
   `prefers-reduced-motion`, si alguien cambia la preferencia con la página
   abierta esto la deja quieta al instante. */
@media (prefers-reduced-motion: reduce) {
    html.js-anim [data-anim]:not([data-anim="hijos"]),
    html.js-anim [data-anim="hijos"] > * {
        opacity: 1;
        animation: none;
        filter: none;
        transform: none;
    }
}