/* =========================================================
 *  TAI — Vida visual al scroll + header fijo + profundidad
 *  Cargado por functions.php (hello-elementor-child)
 * ========================================================= */

/* ===== 1. REVEAL AL ENTRAR EN VIEWPORT (con cascada) =====
   El estado oculto SOLO se aplica cuando el JS añade .tai-reveal,
   así sin JS (o si algo falla) el contenido se ve siempre.
   Movimiento más marcado: 44px + leve escala + fundido. */
.tai-reveal{
    opacity:0;
    transform:translateY(44px) scale(.97);
    transition:opacity .8s cubic-bezier(.16,.84,.44,1),
               transform .8s cubic-bezier(.16,.84,.44,1);
    will-change:opacity,transform;
}
.tai-reveal.tai-in{
    opacity:1;
    transform:none;
}
/* Respeta usuarios que piden menos movimiento */
@media (prefers-reduced-motion:reduce){
    .tai-reveal,
    .tai-reveal.tai-in{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* ===== 2. HEADER STICKY =====
   Se mantiene arriba al bajar. Sombra + fondo blanco solo cuando
   ya se ha hecho scroll (clase la pone el JS). */
header.elementor-location-header{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index:999;
    transition:box-shadow .3s ease, background-color .3s ease;
}
header.elementor-location-header.tai-header-scrolled{
    background-color:#ffffff;
    box-shadow:0 6px 24px rgba(12,35,64,.10);
}
.admin-bar header.elementor-location-header{
    top:32px;
}
@media (max-width:782px){
    .admin-bar header.elementor-location-header{
        top:46px;
    }
}

/* ===== 3. PROFUNDIDAD SUTIL DE FONDO ===== */
body{
    background:linear-gradient(180deg,#ffffff 0%,#f5f8fe 100%);
    background-attachment:fixed;
}