/* ==========================================================================
   CSS GLOBAL Y ANIMACIONES - GRUPO UNEB
   ========================================================================== */

/* Prevenir el temblor de la barra de navegación (Layout Shift) */
html { 
    overflow-y: scroll; 
    scroll-behavior: smooth; 
}
body { 
    overflow-x: hidden; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 10% 20%, rgba(0,158,197,.08), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(120,190,32,.08), transparent 24%),
        linear-gradient(180deg, #F8FAFC 0%, #EEF7F9 45%, #F8FAFC 100%);
}

main {
    flex: 1 0 auto;
    width: 100%;
}

.nav-link {
    color: #fff;
    font-weight: 600;
    opacity: .86;
    position: relative;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: #fff;
    opacity: 1;
}

.nav-link::after {
    background: #78BE20;
    border-radius: 999px;
    bottom: -8px;
    content: '';
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: scaleX(.4);
    transform-origin: left;
    transition: opacity .2s ease, transform .2s ease;
    width: 100%;
}

.nav-link.is-active::after,
.nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* --- ANIMACIONES GLOBALES --- */
@keyframes float { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-20px); } 

    100% { transform: translateY(0px); } 
}
.anim-float { 
    animation: float 6s ease-in-out infinite; 
}

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.fade-in { 
    opacity: 0; 
    animation: fadeInUp 1s ease-out forwards; 
}

/* --- EFECTO SCROLL REVEAL --- */
.scroll-reveal { 
    opacity: 0; 
    transform: translateY(50px); 
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; 
}
.scroll-reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* ================================================================
   HERO CARRUSEL — 3 efectos: fade | zoom | slow_zoom
   El JS controla las clases: .active y .is-exiting
   El JS también congela el transform al salir (via getComputedStyle)
   Ninguna regla de .is-exiting declara transform para evitar saltos
   ================================================================ */
#hero-slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Base: todos los slides comienzan invisibles y sin transición */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;              /* CSS controla — sin clase Tailwind que interfiera */
    pointer-events: none;
    z-index: 1;
    transform-origin: center center;
    /* SIN transition aquí — cada efecto define la suya */
}

/* Slide activo */
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

/* Slide saliendo — el JS pone inline: transform (congelado) + transition: opacity */
.hero-slide.is-exiting {
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    /* Para fade: la transición viene de la regla del efecto específico */
    /* Para zoom/slow_zoom: el JS pone transition inline antes de añadir esta clase */
}

/* Override de is-exiting para fade: transición via CSS pura, sin depender del JS */
#hero-slideshow[data-transition="fade"] .hero-slide.is-exiting {
    opacity: 0;
    transform: none;
    transition: opacity var(--hero-transition-duration, 1.5s) ease-in-out;
}

/* ================================================================
   1. FADE — Desvanecido puro. CERO zoom. CERO movimiento.
   ================================================================ */
#hero-slideshow[data-transition="fade"] .hero-slide {
    transform: none;
    transition: opacity var(--hero-transition-duration, 1.5s) ease-in-out;
}
#hero-slideshow[data-transition="fade"] .hero-slide.active {
    opacity: 1;
    transform: none;
}
#hero-slideshow[data-transition="fade"] .hero-slide.is-exiting {
    opacity: 0;
    transform: none;
    transition: opacity var(--hero-transition-duration, 1.5s) ease-in-out;
}

/* ================================================================
   2. ZOOM — Zoom sutil solo en la entrada
   ================================================================ */
#hero-slideshow[data-transition="zoom"] .hero-slide {
    transform: scale(calc(var(--hero-scale, 1) * 0.93));
    /* Transición declarada aquí para que siempre esté lista */
    transition:
        opacity   var(--hero-transition-duration, 1.5s) ease-in-out,
        transform var(--hero-transition-duration, 1.5s) cubic-bezier(0.25, 1, 0.5, 1);
}
#hero-slideshow[data-transition="zoom"] .hero-slide.active {
    opacity: 1;
    transform: scale(calc(var(--hero-scale, 1) * 1.04));
}

/* ================================================================
   3. SLOW ZOOM — Ken Burns: zoom lento durante toda la pausa
   ================================================================ */
#hero-slideshow[data-transition="slow_zoom"] .hero-slide {
    transform: scale(var(--hero-scale, 1));
    /* IMPORTANTE: declarar AMBAS transiciones aquí para que opacity se anime
       al añadir .active sin importar que transform tenga duración distinta */
    transition:
        opacity   var(--hero-transition-duration, 1.5s) ease-in-out,
        transform var(--hero-slide-duration, 6000ms) linear;
}
#hero-slideshow[data-transition="slow_zoom"] .hero-slide.active {
    opacity: 1;
    transform: scale(calc(var(--hero-scale, 1) * 1.12));
    /* Misma transición — no la redefinimos para que no cancele la de opacity */
    transition:
        opacity   var(--hero-transition-duration, 1.5s) ease-in-out,
        transform var(--hero-slide-duration, 6000ms) linear;
}

/* --- COMPONENTES COMPLEJOS --- */
/* Comillas decorativas en las tarjetas de Socios */
.rank-quote::before {
    content: '"';
    font-size: 3rem;
    color: rgba(0, 158, 197, 0.2);
    position: absolute;
    top: -15px;
    left: -10px;
    font-family: serif;
}

/* --- ACORDEÓN DE PRODUCTOS --- */
.product-details { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-out; 
}

/* Hace que la flechita gire 180 grados al abrir */
.product-card.active .btn-toggle-details .material-symbols-outlined { 
    transform: rotate(180deg); 
}

.feature-card {
    background: #fff;
    border: 1px solid rgba(15,32,39,.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 45px 30px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,158,197,.18);
}
.feature-card h3 {
    color: #0F2027;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 12px 0;
}
.feature-card p {
    color: #64748B;
}
.feature-icon {
    color: #009EC5;
    font-size: 4rem;
}
.testimonial-card {
    background:
        linear-gradient(180deg, rgba(0,158,197,.08), transparent 130px),
        #fff;
    border: 1px solid rgba(15,32,39,.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    margin-top: 55px;
    padding: 70px 30px 35px;
    position: relative;
    text-align: center;
}
.testimonial-photo {
    background: linear-gradient(135deg, #E8F7FB, #F2FAEA);
    border: 5px solid #fff;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    height: 120px;
    left: 50%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: -60px;
    transform: translateX(-50%);
    width: 120px;
}
.testimonial-card h4 {
    color: #0F2027;
    font-size: 1.35rem;
    font-weight: 700;
}
.testimonial-card span {
    color: #009EC5;
    display: block;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 8px 0 14px;
    text-transform: uppercase;
}
.testimonial-card p {
    color: #64748B;
    font-style: italic;
}
.social-link {
    align-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    display: flex;
    height: 45px;
    justify-content: center;
    transition: transform .25s ease, background .25s ease;
    width: 45px;
}
.social-link:hover {
    transform: translateY(-4px);
}
.social-link:has(.fa-facebook-f):hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
}
.social-link:has(.fa-instagram):hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285ae5 90%) !important;
    border-color: #d6249f !important;
}
.social-link:has(.fa-youtube):hover {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
}
.social-link:has(.fa-tiktok):hover {
    background: #000000 !important;
    border-color: #000000 !important;
}
.social-link:has(.fa-whatsapp):hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
}
.admin-footer-link {
    color: rgba(255,255,255,.26);
    display: inline-block;
    font-size: .72rem;
    margin-top: 18px;
    text-decoration: none;
    transition: color .2s ease;
}
.contact-info-row {
    align-items: flex-start;
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}
.admin-footer-link:hover {
    color: rgba(255,255,255,.64);
}
.page-hero {
    background-image: linear-gradient(rgba(15,32,39,.85), rgba(0,158,197,.72)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1400&q=80');
}
.leader-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    max-width: 350px;
    overflow: hidden;
    text-align: left;
    width: 100%;
}
.leader-card img {
    background: linear-gradient(135deg, #E6F6FA, #EFF8E8);
    border-bottom: 5px solid #009EC5;
    height: 440px;
    object-fit: cover;
    object-position: top;
    width: 100%;
}
.leader-card-green img {
    border-bottom-color: #78BE20;
}
.leader-card div {
    padding: 28px;
}
.leader-card p {
    color: #009EC5;
    font-size: .85rem;
    font-weight: 700;
}
.leader-card h3 {
    color: #0F2027;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 8px 0;
}
.leader-card span {
    color: #64748B;
}
.form-field {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 16px 20px;
    font-size: 0.95rem;
    color: #0F2027;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(15, 32, 39, 0.01);
    width: 100%;
}
.form-field:focus {
    background: #ffffff;
    border-color: #009EC5;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 158, 197, 0.12), 0 4px 10px rgba(15, 32, 39, 0.04);
    transform: translateY(-1px);
}
.map-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 25px;
}
.map-card h4 {
    color: #0F2027;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 18px;
}
.cart-panel {
    background: rgba(15,32,39,.55);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .2s ease;
    z-index: 3000;
}
.cart-panel.open {
    opacity: 1;
    pointer-events: auto;
}
.cart-box {
    background: #fff;
    box-shadow: -20px 0 40px rgba(0,0,0,.25);
    height: 100%;
    margin-left: auto;
    max-width: 430px;
    overflow-y: auto;
    padding: 28px;
    width: 92%;
}

.patterned-section::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42)),
        radial-gradient(circle at 80% 20%, rgba(0,158,197,.08), transparent 30%),
        radial-gradient(circle at 20% 85%, rgba(120,190,32,.10), transparent 30%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}
.section-orb {
    border-radius: 0 100% 0 100%;
    filter: blur(40px);
    height: 380px;
    pointer-events: none;
    position: absolute;
    width: 380px;
    z-index: 0;
}
.section-orb-blue {
    background: linear-gradient(135deg, rgba(0,158,197,.22), rgba(0,158,197,.04));
    transform: rotate(-15deg);
}
.section-orb-green {
    background: linear-gradient(135deg, rgba(120,190,32,.22), rgba(120,190,32,.04));
    border-radius: 100% 0 100% 0;
    transform: rotate(10deg);
}
.dot-field {
    background-image: radial-gradient(#009EC5 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    height: 200px;
    opacity: .3;
    pointer-events: none;
    position: absolute;
    width: 200px;
    z-index: 0;
}
.carousel-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
    color: #0F2027;
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: center;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    width: 50px;
}
.carousel-btn:hover {
    background: #009EC5;
    color: #fff;
    transform: scale(1.1);
}
.product-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 158, 197, 0.4) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 158, 197, 0.14), 0 10px 20px -5px rgba(15, 32, 39, 0.06);
}
.product-hero-visual.has-transparent,
.product-card-visual.has-transparent {
    isolation: isolate;
}
.product-hero-visual::before,
.product-card-visual::before {
    display: none;
}
.product-hero-visual.has-transparent::before,
.product-card-visual.has-transparent::before {
    display: block;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.9), rgba(255,255,255,.18) 38%, transparent 39%),
        var(--product-halo, #E8F5E9);
    border: 1px solid rgba(15,32,39,.06);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 35px rgba(15,32,39,.08);
    content: '';
    height: 190px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease;
    width: min(230px, 90%);
    z-index: 0;
}
.product-hero-visual.has-transparent::before {
    border-radius: 24px;
    height: 320px;
    width: min(360px, 92%);
}
.product-card-visual img {
    height: 215px;
    max-width: min(220px, 90%);
    object-fit: contain;
    width: auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.08));
}
.product-hero-visual img {
    height: min(360px, 55vh);
    max-width: min(330px, 88vw);
    object-fit: contain;
    width: auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.product-card:hover .product-card-visual.has-transparent::before {
    transform: translate(-50%, -50%) scale(1.18);
    border-color: var(--product-glow, rgba(0, 158, 197, 0.35));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 25px 50px var(--product-glow, rgba(0, 158, 197, 0.16));
}
.product-card:hover .product-card-visual img {
    transform: translateY(-8px) scale(1.08);
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.18)) drop-shadow(0 0 18px var(--product-glow, rgba(0, 158, 197, 0.45)));
}
.transparent-product-img {
    transition: filter 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tone-green { --product-halo: #E8F5E9; --product-glow: rgba(120, 190, 32, 0.5); }
.tone-blue { --product-halo: #E3F2FD; --product-glow: rgba(0, 158, 197, 0.5); }
.tone-mint { --product-halo: #DDF7F0; --product-glow: rgba(20, 180, 140, 0.5); }
.tone-rose { --product-halo: #FFE7E6; --product-glow: rgba(244, 63, 94, 0.5); }
.tone-gold { --product-halo: #FFF6D8; --product-glow: rgba(234, 179, 8, 0.5); }
.tone-neutral { --product-halo: #EEF2F3; --product-glow: rgba(100, 116, 139, 0.4); }

/* --- HERO COVER VIDEO BACKGROUND --- */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.hero-video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 aspect ratio */
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.testimonial-badge {
    background: linear-gradient(135deg, #fff, #F2FAEA);
    border: 3px solid rgba(0,158,197,.25);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0,0,0,.16);
    height: 44px;
    object-fit: contain;
    padding: 3px;
    position: absolute;
    right: calc(50% - 62px);
    top: 20px;
    width: 44px;
}

@media (max-width: 768px) {
    .product-hero-visual::before {
        height: 250px;
        width: min(285px, 92%);
    }

    .product-hero-visual img {
        height: 265px;
    }

    .leader-card img {
        height: 360px;
    }
}
.page-hero-about {
    background-image: linear-gradient(rgba(15,32,39,.85), rgba(0,158,197,.7)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1400&q=80');
}

/* --- COOKIE BANNER --- */
#cookie-banner {
    box-shadow: 0 -10px 40px rgba(15, 32, 39, 0.1);
    animation: slideUp 0.5s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* --- VIDEO DE FONDO AUTOMATICO (YOUTUBE & NATIVO) --- */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background: #0F2027;
}

/* Escala y centrado calibrado exactamente al área visible descubierta (desde donde finaliza el navbar hasta el final de la portada) */
.hero-video-container iframe,
.hero-video-container .yt-bg-element {
    position: absolute;
    top: calc(50% + 39px);
    left: 50%;
    width: max(100vw, 1280px);
    height: max(56.25vw, 720px);
    min-height: 100%;
    transform: translate(calc(-50% + var(--video-offset-x, 0px)), calc(-50% + var(--video-offset-y, 0px))) scale(var(--video-scale, 1.0));
    transform-origin: center center;
    pointer-events: none;
    border: none;
    filter: var(--video-filter, none);
}

.hero-video-container video,
video.page-hero-video {
    position: absolute;
    top: calc(50% + 39px);
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(calc(-50% + var(--video-offset-x, 0px)), calc(-50% + var(--video-offset-y, 0px))) scale(var(--video-scale, 1.0));
    transform-origin: center center;
    pointer-events: none;
    border: none;
    filter: var(--video-filter, none);
}




/* ── PAGE HERO HEADER ── El contenedor que replica exactamente la vista previa del panel ──────── */
/* aspect-ratio 1920/500 = alto restaurado al original, mismo ratio que usa el panel de portadas  */
/* overflow:hidden bloquea todo lo que esté fuera del recorte elegido                              */
.page-hero-header {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 375;
    min-height: 260px;           /* garantiza visibilidad en pantallas muy pequeñas                 */
    background: #0F2027;
    overflow: hidden;            /* ← este overflow bloquea cualquier zona fuera del encuadre      */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* El navbar fijo tiene ~78px de alto. Este padding compensa ese espacio
       para que el texto quede centrado en el área VISIBLE de la portada,
       no en el contenedor completo (que incluye la zona tapada por el navbar) */
    padding-top: 78px;
    box-sizing: border-box;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
    transform-origin: center center;
}

/* Cortina de fundido suave para transiciones entre ciclos */
.yt-fade-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0F2027;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.yt-fade-curtain.active {
    opacity: 1;
}

/* Animaciones Dinámicas de Portada de Cabecera (PageHero) */
@keyframes heroFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes heroFadeLoop {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

@keyframes heroZoomIn {
    0% { transform: scale(var(--hero-scale, 1.0)); }
    100% { transform: scale(calc(var(--hero-scale, 1.0) * 1.18)); }
}

@keyframes heroKenBurns {
    0% { transform: translate(-20px, -10px) scale(calc(var(--hero-scale, 1.0) * 1.04)); }
    50% { transform: translate(20px, 10px) scale(calc(var(--hero-scale, 1.0) * 1.20)); }
    100% { transform: translate(-20px, -10px) scale(calc(var(--hero-scale, 1.0) * 1.04)); }
}

.hero-anim-fade {
    animation: heroFadeIn var(--hero-duration, 1.5s) ease-in-out forwards;
}

.hero-anim-fade-loop {
    animation: heroFadeLoop var(--hero-duration, 8s) ease-in-out infinite;
}

.hero-anim-zoom {
    animation: heroZoomIn var(--hero-duration, 8s) ease-out forwards;
}

.hero-anim-kenburns {
    animation: heroKenBurns var(--hero-duration, 12s) ease-in-out infinite alternate;
}

#product-detail-modal {
    overscroll-behavior: contain;
}