:root{
    --transicion-rapida:180ms ease;
    --transicion-suave:620ms cubic-bezier(.22,1,.36,1);
}

.site-header{
    transition:box-shadow var(--transicion-rapida), background var(--transicion-rapida);
}

.marca,
.menu a,
.footer-enlaces a{
    transition:color var(--transicion-rapida), opacity var(--transicion-rapida);
}

.boton{
    transition:transform var(--transicion-rapida), box-shadow var(--transicion-rapida), background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton:focus-visible,
.menu-boton:focus-visible,
.menu a:focus-visible,
.marca:focus-visible{
    outline:3px solid rgba(11,102,212,.3);
    outline-offset:4px;
}

@media (min-width:821px){
    .tarjeta,
    .lista-funcionalidades article,
    .plan,
    .panel-contacto,
    .marco-cartel{
        transition:transform var(--transicion-rapida), box-shadow var(--transicion-rapida), border-color var(--transicion-rapida);
    }

    .tarjeta:hover,
    .lista-funcionalidades article:hover,
    .marco-cartel:hover{
        transform:translateY(-5px);
        border-color:#b8d9f6;
        box-shadow:0 20px 38px rgba(20,64,104,.12);
    }

    .plan:hover,
    .panel-contacto:hover{
        transform:translateY(-3px);
        box-shadow:0 24px 48px rgba(7,32,66,.18);
    }
}

.js .revelar{
    opacity:0;
    transform:translateY(10px);
    will-change:opacity, transform;
    transition:opacity var(--transicion-suave), transform var(--transicion-suave);
}

.js .revelar.visible{
    opacity:1;
    transform:translateY(0);
}

@media (min-width:821px){
    .js .revelar.visible.tarjeta:hover,
    .js .revelar.visible.lista-funcionalidades article:hover,
    .js .revelar.visible.marco-cartel:hover{
        transform:translateY(-5px);
    }

    .js .revelar.visible.plan:hover,
    .js .revelar.visible.panel-contacto:hover{
        transform:translateY(-3px);
    }
}

@media (max-width:820px){
    .menu-boton{
        display:inline-flex;
        align-items:center;
        gap:8px;
        min-height:40px;
        padding:8px 11px;
        transition:background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
    }

    .hamburguesa{
        display:grid;
        gap:4px;
        width:17px;
    }

    .hamburguesa i{
        display:block;
        width:17px;
        height:2px;
        border-radius:2px;
        background:currentColor;
        transition:transform var(--transicion-rapida), opacity var(--transicion-rapida);
    }

    .menu-boton.menu-activo{
        color:var(--azul);
        border-color:#b6d9f8;
        background:#f1f8ff;
    }

    .menu-boton.menu-activo .hamburguesa i:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    .menu-boton.menu-activo .hamburguesa i:nth-child(2){
        opacity:0;
    }

    .menu-boton.menu-activo .hamburguesa i:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }

    .js .menu{
        display:grid;
        visibility:hidden;
        max-height:0;
        overflow:hidden;
        padding-top:0;
        padding-bottom:0;
        opacity:0;
        transform:translateY(-10px);
        pointer-events:none;
        transition:max-height var(--transicion-suave), padding var(--transicion-suave), opacity var(--transicion-rapida), transform var(--transicion-suave), visibility 0s linear 420ms;
    }

    .js .menu.menu-abierto{
        visibility:visible;
        max-height:360px;
        padding-top:18px;
        padding-bottom:20px;
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
        transition:max-height var(--transicion-suave), padding var(--transicion-suave), opacity var(--transicion-rapida), transform var(--transicion-suave);
    }

    .js .menu a{
        opacity:0;
        transform:translateY(-5px);
        transition:opacity 180ms ease, transform 180ms ease;
    }

    .js .menu.menu-abierto a{
        opacity:1;
        transform:translateY(0);
    }

    .js .menu.menu-abierto a:nth-child(2){transition-delay:35ms}
    .js .menu.menu-abierto a:nth-child(3){transition-delay:70ms}
    .js .menu.menu-abierto a:nth-child(4){transition-delay:105ms}
    .js .menu.menu-abierto a:nth-child(5){transition-delay:140ms}
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:1ms !important;
        animation-duration:1ms !important;
    }
}