/* =========================================================
   MARÍA BONITA
   ANIMACIONES
   assets/css/animations.css
   ========================================================= */


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes mbFadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


@keyframes mbFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes mbFadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes mbFadeLeft {

    from {

        opacity: 0;

        transform:
            translateX(40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes mbFadeRight {

    from {

        opacity: 0;

        transform:
            translateX(-40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes mbScaleIn {

    from {

        opacity: 0;

        transform:
            scale(0.94);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


@keyframes mbZoomSoft {

    from {

        transform:
            scale(1);

    }

    to {

        transform:
            scale(1.05);

    }

}


@keyframes mbFloat {

    0% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

    100% {

        transform:
            translateY(0);

    }

}


@keyframes mbPulseSoft {

    0% {

        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(143, 175, 165, 0.30);

    }

    70% {

        transform:
            scale(1.03);

        box-shadow:
            0 0 0 12px
            rgba(143, 175, 165, 0);

    }

    100% {

        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(143, 175, 165, 0);

    }

}


@keyframes mbPulseWhatsapp {

    0% {

        box-shadow:
            0 0 0 0
            rgba(37, 211, 102, 0.35);

    }

    70% {

        box-shadow:
            0 0 0 16px
            rgba(37, 211, 102, 0);

    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(37, 211, 102, 0);

    }

}


@keyframes mbLineGrow {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}


@keyframes mbLogoEntrance {

    from {

        opacity: 0;

        transform:
            translateY(-12px)
            scale(0.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   ANIMACIONES DIRECTAS
   ========================================================= */

.mb-fade-in {

    animation:
        mbFadeIn
        0.8s
        ease
        both;

}


.mb-fade-up {

    animation:
        mbFadeUp
        0.9s
        ease
        both;

}


.mb-fade-down {

    animation:
        mbFadeDown
        0.9s
        ease
        both;

}


.mb-fade-left {

    animation:
        mbFadeLeft
        0.9s
        ease
        both;

}


.mb-fade-right {

    animation:
        mbFadeRight
        0.9s
        ease
        both;

}


.mb-scale-in {

    animation:
        mbScaleIn
        0.8s
        ease
        both;

}


.mb-float {

    animation:
        mbFloat
        4s
        ease-in-out
        infinite;

}


.mb-pulse {

    animation:
        mbPulseSoft
        2.5s
        ease-out
        infinite;

}


/* =========================================================
   DELAYS
   ========================================================= */

.mb-delay-1 {

    animation-delay:
        0.1s;

}


.mb-delay-2 {

    animation-delay:
        0.2s;

}


.mb-delay-3 {

    animation-delay:
        0.3s;

}


.mb-delay-4 {

    animation-delay:
        0.4s;

}


.mb-delay-5 {

    animation-delay:
        0.5s;

}


.mb-delay-6 {

    animation-delay:
        0.6s;

}


.mb-delay-7 {

    animation-delay:
        0.7s;

}


.mb-delay-8 {

    animation-delay:
        0.8s;

}


/* =========================================================
   ELEMENTOS PARA ANIMAR AL HACER SCROLL
   ========================================================= */

.mb-reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity
        0.8s
        ease,
        transform
        0.8s
        ease;

    will-change:
        opacity,
        transform;

}


.mb-reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   REVEAL DESDE LA IZQUIERDA
   ========================================================= */

.mb-reveal-left {

    opacity: 0;

    transform:
        translateX(-40px);

    transition:
        opacity
        0.8s
        ease,
        transform
        0.8s
        ease;

    will-change:
        opacity,
        transform;

}


.mb-reveal-left.visible {

    opacity: 1;

    transform:
        translateX(0);

}


/* =========================================================
   REVEAL DESDE LA DERECHA
   ========================================================= */

.mb-reveal-right {

    opacity: 0;

    transform:
        translateX(40px);

    transition:
        opacity
        0.8s
        ease,
        transform
        0.8s
        ease;

    will-change:
        opacity,
        transform;

}


.mb-reveal-right.visible {

    opacity: 1;

    transform:
        translateX(0);

}


/* =========================================================
   REVEAL ESCALA
   ========================================================= */

.mb-reveal-scale {

    opacity: 0;

    transform:
        scale(0.95);

    transition:
        opacity
        0.8s
        ease,
        transform
        0.8s
        ease;

    will-change:
        opacity,
        transform;

}


.mb-reveal-scale.visible {

    opacity: 1;

    transform:
        scale(1);

}


/* =========================================================
   DELAYS PARA REVEAL
   ========================================================= */

.mb-reveal[data-delay="100"],
.mb-reveal-left[data-delay="100"],
.mb-reveal-right[data-delay="100"],
.mb-reveal-scale[data-delay="100"] {

    transition-delay:
        0.1s;

}


.mb-reveal[data-delay="200"],
.mb-reveal-left[data-delay="200"],
.mb-reveal-right[data-delay="200"],
.mb-reveal-scale[data-delay="200"] {

    transition-delay:
        0.2s;

}


.mb-reveal[data-delay="300"],
.mb-reveal-left[data-delay="300"],
.mb-reveal-right[data-delay="300"],
.mb-reveal-scale[data-delay="300"] {

    transition-delay:
        0.3s;

}


.mb-reveal[data-delay="400"],
.mb-reveal-left[data-delay="400"],
.mb-reveal-right[data-delay="400"],
.mb-reveal-scale[data-delay="400"] {

    transition-delay:
        0.4s;

}


.mb-reveal[data-delay="500"],
.mb-reveal-left[data-delay="500"],
.mb-reveal-right[data-delay="500"],
.mb-reveal-scale[data-delay="500"] {

    transition-delay:
        0.5s;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo-navbar {

    animation:
        mbLogoEntrance
        0.7s
        ease
        both;

}


/* =========================================================
   HOVER SUAVE DE BOTONES
   ========================================================= */

.btn-mb,
.btn-menu-navbar,
.btn-whatsapp-navbar {

    position: relative;

    overflow: hidden;

}


.btn-mb::before,
.btn-menu-navbar::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.20
            ),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left
        0.6s
        ease;

}


.btn-mb:hover::before,
.btn-menu-navbar:hover::before {

    left: 150%;

}


/* =========================================================
   TARJETAS
   ========================================================= */

.card-mb {

    transition:
        transform
        0.35s
        ease,
        box-shadow
        0.35s
        ease,
        border-color
        0.35s
        ease;

}


.card-mb:hover {

    transform:
        translateY(-6px);

}


/* =========================================================
   IMÁGENES
   ========================================================= */

.imagen-mb {

    position: relative;

    overflow: hidden;

}


.imagen-mb::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(
                40,
                59,
                80,
                0.10
            )
        );

    opacity: 0;

    transition:
        opacity
        var(--mb-transition-slow);

    pointer-events: none;

}


.imagen-mb:hover::after {

    opacity: 1;

}


/* =========================================================
   LINK DECORATIVO
   ========================================================= */

.link-mb {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap:
        0.4rem;

    color:
        var(--mb-terracota);

    font-weight:
        var(--mb-font-semibold);

}


.link-mb::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -3px;

    width: 0;

    height: 1px;

    background:
        var(--mb-terracota);

    transition:
        width
        var(--mb-transition);

}


.link-mb:hover::after {

    width: 100%;

}


/* =========================================================
   ICONOS
   ========================================================= */

.icono-mb {

    transition:
        transform
        var(--mb-transition);

}


a:hover
.icono-mb,
button:hover
.icono-mb {

    transform:
        translateX(3px);

}


/* =========================================================
   WHATSAPP FLOTANTE
   SE ACTIVARÁ CUANDO CONSTRUYAMOS whatsapp.php
   ========================================================= */

.whatsapp-flotante {

    animation:
        mbPulseWhatsapp
        2.8s
        infinite;

}


/* =========================================================
   SEPARADORES
   ========================================================= */

.separador-animado {

    width: 0;

    animation:
        mbLineGrow
        1s
        ease
        forwards;

}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar-maria-bonita {

    transition:
        min-height
        0.35s
        ease,
        background-color
        0.35s
        ease,
        box-shadow
        0.35s
        ease,
        backdrop-filter
        0.35s
        ease;

}


/* =========================================================
   ENLACES NAVBAR
   ========================================================= */

.nav-link-mb {

    transition:
        color
        0.25s
        ease,
        padding
        0.25s
        ease;

}


/* =========================================================
   ANIMACIÓN DEL MENÚ MÓVIL
   ========================================================= */

@media (max-width: 991.98px) {

    #menuPrincipal {

        transform-origin:
            top center;

    }


    #menuPrincipal.show {

        animation:
            mbFadeDown
            0.28s
            ease
            both;

    }

}


/* =========================================================
   TRANSICIÓN DE SECCIONES
   ========================================================= */

.seccion {

    position: relative;

}


/* =========================================================
   EFECTO DE ELEVACIÓN
   ========================================================= */

.mb-hover-lift {

    transition:
        transform
        var(--mb-transition),
        box-shadow
        var(--mb-transition);

}


.mb-hover-lift:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--mb-shadow-md);

}


/* =========================================================
   EFECTO DE ESCALA
   ========================================================= */

.mb-hover-scale {

    transition:
        transform
        var(--mb-transition-slow);

}


.mb-hover-scale:hover {

    transform:
        scale(1.03);

}


/* =========================================================
   EFECTO DE OPACIDAD
   ========================================================= */

.mb-hover-opacity {

    transition:
        opacity
        var(--mb-transition);

}


.mb-hover-opacity:hover {

    opacity:
        0.8;

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .btn-mb::before,
    .btn-menu-navbar::before {

        display: none;

    }


    .card-mb:hover,
    .mb-hover-lift:hover,
    .mb-hover-scale:hover {

        transform: none;

    }


    .imagen-mb:hover::after {

        opacity: 0;

    }

}


/* =========================================================
   ACCESIBILIDAD
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .mb-fade-in,
    .mb-fade-up,
    .mb-fade-down,
    .mb-fade-left,
    .mb-fade-right,
    .mb-scale-in,
    .mb-float,
    .mb-pulse,
    .whatsapp-flotante,
    .logo-navbar {

        animation:
            none !important;

    }


    .mb-reveal,
    .mb-reveal-left,
    .mb-reveal-right,
    .mb-reveal-scale {

        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;

    }

}