/* Alíneo — animaciones (móvil + escritorio). Respeta prefers-reduced-motion. */

:root {
    --alineo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --alineo-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --alineo-anim-duration: 0.75s;
    --alineo-anim-stagger: 0.1s;
}

/* ── Estado inicial (scroll reveal) ── */
.alineo-anim {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity var(--alineo-anim-duration) var(--alineo-ease-out),
        transform var(--alineo-anim-duration) var(--alineo-ease-out);
    will-change: opacity, transform;
}

.alineo-anim.alineo-anim--left {
    transform: translate3d(-32px, 0, 0);
}

.alineo-anim.alineo-anim--right {
    transform: translate3d(32px, 0, 0);
}

.alineo-anim.alineo-anim--scale {
    transform: scale(0.92);
}

.alineo-anim.alineo-anim--blur {
    filter: blur(8px);
    transform: translate3d(0, 16px, 0);
    transition:
        opacity var(--alineo-anim-duration) var(--alineo-ease-out),
        transform var(--alineo-anim-duration) var(--alineo-ease-out),
        filter var(--alineo-anim-duration) var(--alineo-ease-out);
}

.alineo-anim.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Títulos: subrayado que crece */
.alineo-anim-title .h2.as span,
.alineo-anim-title .h3.as span {
    position: relative;
    display: inline-block;
}

.alineo-anim-title.is-visible .h2.as span::after,
.alineo-anim-title.is-visible .h3.as span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--alineo-celeste), var(--alineo-verde));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: alineo-line-grow 0.9s var(--alineo-ease-out) 0.35s forwards;
}

@keyframes alineo-line-grow {
    to {
        transform: scaleX(1);
    }
}

/* ── Hero home ── */
@keyframes alineo-hero-kenburns {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.08) translate3d(-1%, -1%, 0);
    }
}

body.alineo-page-home .mainSwiperbanner .mainBanner .sliderBg {
    animation: alineo-hero-kenburns 18s ease-out infinite alternate;
}

body.alineo-page-home .mainSwiperbanner .mainBanner.bgShadow::before {
    transition: opacity 0.6s ease;
}

body.alineo-anim-ready .mainSwiperbanner .swiper-slide-active .alineo-hero-line {
    animation: alineo-hero-text-in 0.85s var(--alineo-ease-out) both;
}

body.alineo-anim-ready .mainSwiperbanner .swiper-slide-active .alineo-hero-line--2 {
    animation-delay: 0.14s;
}

@keyframes alineo-hero-text-in {
    from {
        opacity: 0;
        transform: translate3d(0, 36px, 0);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Flechas slider */
.mainSwiperbanner .swiper-button-next,
.mainSwiperbanner .swiper-button-prev {
    transition: transform 0.35s var(--alineo-ease-out), background-color 0.2s ease !important;
}

.mainSwiperbanner .swiper-button-next:hover,
.mainSwiperbanner .swiper-button-prev:hover {
    transform: translateY(-50%) scale(1.08) !important;
}

/* ── Tarjetas y imágenes ── */
.alineo-anim-card .imgTumb,
.alineo-anim-card .imgWrapper img {
    transition: transform 0.55s var(--alineo-ease-out);
}

@media (hover: hover) {
    .alineo-anim-card:hover .imgTumb img,
    .alineo-anim-card:hover .imgWrapper img {
        transform: scale(1.06);
    }

    .alineo-anim-card:hover {
        transform: translate3d(0, -6px, 0);
    }
}

.alineo-anim-card {
    transition:
        opacity var(--alineo-anim-duration) var(--alineo-ease-out),
        transform var(--alineo-anim-duration) var(--alineo-ease-out),
        box-shadow 0.4s ease;
}

.alineo-anim-card.is-visible {
    transition:
        opacity var(--alineo-anim-duration) var(--alineo-ease-out),
        transform var(--alineo-anim-duration) var(--alineo-ease-out),
        box-shadow 0.4s ease;
}

.alineo-anim-card.is-visible:hover {
    box-shadow: 0 16px 40px rgba(45, 95, 131, 0.18);
}

/* Iconos esencia / valores */
.alineo-anim-icon .alineo-essence-icon img {
    animation: alineo-icon-float 5s ease-in-out infinite;
}

.alineo-anim-icon:nth-child(2n) .alineo-essence-icon img {
    animation-delay: -1.5s;
}

.alineo-anim-icon:nth-child(3n) .alineo-essence-icon img {
    animation-delay: -2.8s;
}

@keyframes alineo-icon-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -8px, 0);
    }
}

/* Testimonios: estrellas */
.alineo-anim-stars .personeStars .fa-star {
    opacity: 0;
    transform: scale(0) rotate(-30deg);
    transition: opacity 0.35s var(--alineo-ease-spring), transform 0.4s var(--alineo-ease-spring);
}

.alineo-anim-stars.is-visible .personeStars .fa-star {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    color: #f0b429;
}

.alineo-anim-stars.is-visible .personeStars .fa-star:nth-child(1) { transition-delay: 0.05s; }
.alineo-anim-stars.is-visible .personeStars .fa-star:nth-child(2) { transition-delay: 0.12s; }
.alineo-anim-stars.is-visible .personeStars .fa-star:nth-child(3) { transition-delay: 0.19s; }
.alineo-anim-stars.is-visible .personeStars .fa-star:nth-child(4) { transition-delay: 0.26s; }
.alineo-anim-stars.is-visible .personeStars .fa-star:nth-child(5) { transition-delay: 0.33s; }

/* Banner interno */
.alineo-page-hero.alineo-anim-banner .h1.as {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.7s var(--alineo-ease-out), transform 0.7s var(--alineo-ease-out);
}

.alineo-page-hero.alineo-anim-banner.is-visible .h1.as {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.alineo-page-hero.alineo-anim-banner .breadCrumbs {
    opacity: 0;
    transition: opacity 0.6s ease 0.2s;
}

.alineo-page-hero.alineo-anim-banner.is-visible .breadCrumbs {
    opacity: 1;
}

/* Botones CTA */
#content-block .button.alineo-anim-btn,
.headerMoreInfo .button.alineo-anim-btn {
    transition: transform 0.3s var(--alineo-ease-out), box-shadow 0.3s ease !important;
}

@media (hover: hover) {
    #content-block .button.alineo-anim-btn:hover,
    .headerMoreInfo .button.alineo-anim-btn:hover {
        transform: translate3d(0, -3px, 0) !important;
        box-shadow: 0 10px 24px rgba(45, 95, 131, 0.28);
    }
}

/* WhatsApp flotante */
.alineo-whatsapp-float {
    animation: alineo-wsp-enter 0.8s var(--alineo-ease-spring) 1s both;
}

.alineo-whatsapp-float::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.45);
    animation: alineo-wsp-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes alineo-wsp-enter {
    from {
        opacity: 0;
        transform: scale(0.4) translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes alineo-wsp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* Entrada de página */
body:not(.loaded) #content-block {
    opacity: 0;
}

body.loaded #content-block {
    opacity: 1;
    transition: opacity 0.45s ease;
}

body.loaded header {
    animation: alineo-header-in 0.65s var(--alineo-ease-out) both;
}

@keyframes alineo-header-in {
    from {
        opacity: 0;
        transform: translate3d(0, -12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Enlaces footer */
footer .footerBlock a {
    transition: color 0.2s ease, transform 0.25s var(--alineo-ease-out);
    display: inline-block;
}

@media (hover: hover) {
    footer .footerBlock a:hover {
        transform: translate3d(4px, 0, 0);
    }
}

/* Bloques empresas / quienes */
.alineo-empresas-servicio.alineo-anim {
    border-left: 3px solid transparent;
    padding-left: 12px;
    transition:
        opacity var(--alineo-anim-duration) var(--alineo-ease-out),
        transform var(--alineo-anim-duration) var(--alineo-ease-out),
        border-color 0.4s ease;
}

.alineo-empresas-servicio.alineo-anim.is-visible {
    border-left-color: var(--alineo-celeste);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .alineo-anim {
        opacity: 1;
        transform: none;
        filter: none;
    }

    body:not(.loaded) #content-block {
        opacity: 1;
    }
}