/*
 * By Glo · Efectos visuales V3
 * Capa independiente: no reemplaza las funciones ni los estilos originales.
 */

/* =========================================================
   Barra de progreso discreta al recorrer la página
   ========================================================= */
.byglo-scroll-progress{
    position:fixed;top:0;left:0;z-index:5200;height:3px;width:100%;
    transform-origin:left center;transform:scaleX(var(--byglo-scroll-progress,0));
    background:linear-gradient(90deg,var(--champagne),var(--dorado-claro),var(--dorado),var(--cobre));
    box-shadow:0 0 18px rgba(216,137,33,.5);pointer-events:none;
}

/* =========================================================
   Bienvenida con logo: aparece una vez por sesión
   ========================================================= */
.byglo-intro{
    position:fixed;inset:0;z-index:5000;display:grid;place-items:center;overflow:hidden;
    background:radial-gradient(circle at 50% 46%,rgba(216,137,33,.2),transparent 34%),
               linear-gradient(145deg,#070604 0%,#12100d 58%,#1b100c 100%);
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .82s ease,visibility .82s ease;
    animation:byglo-intro-failsafe 4s ease forwards;
}
.byglo-intro-glow{
    position:absolute;width:min(78vw,640px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(246,223,131,.19),rgba(216,137,33,.1) 40%,transparent 72%);
    filter:blur(26px);animation:byglo-intro-glow 2.7s ease-in-out both;
}
.byglo-intro-content{
    position:relative;display:grid;justify-items:center;gap:16px;padding:28px;text-align:center;
    animation:byglo-intro-logo 2.65s cubic-bezier(.2,.78,.22,1) both;
}
.byglo-intro-content img{width:min(56vw,270px);filter:drop-shadow(0 20px 48px rgba(216,137,33,.34))}
.byglo-intro-content span{color:var(--dorado-claro);font-size:.78rem;font-weight:850;letter-spacing:.29em;text-transform:uppercase}
.byglo-intro.is-hiding,.byglo-intro-seen .byglo-intro{opacity:0;visibility:hidden;pointer-events:none}
.byglo-intro-seen .byglo-intro{display:none}
body.byglo-intro-active{overflow:hidden}
@keyframes byglo-intro-logo{
    0%{opacity:0;transform:scale(.74) translateY(20px);filter:blur(12px)}
    38%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
    76%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
    100%{opacity:0;transform:scale(1.06) translateY(-8px);filter:blur(4px)}
}
@keyframes byglo-intro-glow{0%{opacity:0;transform:scale(.64)}48%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
@keyframes byglo-intro-failsafe{0%,88%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}

/* =========================================================
   Entrada inicial de la portada y apariciones al hacer scroll
   ========================================================= */
.site-effects-ready .site-reveal{
    opacity:0;filter:blur(5px);transform:translate3d(0,54px,0) scale(.985);
    transition:opacity .88s ease var(--site-reveal-delay,0ms),
               transform .92s cubic-bezier(.18,.72,.2,1) var(--site-reveal-delay,0ms),
               filter .82s ease var(--site-reveal-delay,0ms);
    will-change:opacity,transform,filter;
}
.site-effects-ready .site-reveal.is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}

/* Los encabezados de sección se perciben con claridad, pero sin exageración. */
.site-effects-ready .site-reveal-title{transform:translate3d(-24px,38px,0)}
.site-effects-ready .site-reveal-title.is-visible{transform:translate3d(0,0,0)}

/* =========================================================
   Header compacto, panel flotante y respiración del fondo
   ========================================================= */
.site-header,.header-inner,.brand img,.brand strong,.main-nav a{
    transition:height .32s ease,width .32s ease,padding .32s ease,font-size .32s ease,
               background-color .32s ease,border-color .32s ease,transform .32s ease,box-shadow .32s ease;
}
@media(min-width:851px){
    .site-header.is-compact{background:rgba(7,6,4,.95);box-shadow:0 14px 36px rgba(0,0,0,.3)}
    .site-header.is-compact .header-inner{height:64px}
    .site-header.is-compact .brand img{width:43px;height:43px}
    .site-header.is-compact .brand strong{font-size:1.02rem}
    .site-header.is-compact .main-nav a{padding-top:7px;padding-bottom:7px}
}
.hero-panel{animation:byglo-panel-float 6.4s ease-in-out infinite}
.hero-bg-logo{animation:byglo-bg-breathe 7.5s ease-in-out infinite}
@keyframes byglo-panel-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-11px,0)}}
@keyframes byglo-bg-breathe{0%,100%{opacity:.2;filter:drop-shadow(0 28px 80px rgba(216,137,33,.18))}50%{opacity:.31;filter:drop-shadow(0 34px 92px rgba(216,137,33,.3))}}

/* =========================================================
   Tarjetas, imágenes y botones con respuesta al mouse
   ========================================================= */
@media(hover:hover) and (pointer:fine){
    .category-card,.process-card,.social-band,.cta-band,.detail-box,.medidas-card{
        transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
    }
    .category-card:hover,.process-card:hover,.detail-box:hover,.medidas-card:hover{
        transform:translateY(-10px);border-color:rgba(246,223,131,.46);box-shadow:0 30px 68px rgba(0,0,0,.42)
    }
    .social-band:hover,.cta-band:hover{transform:translateY(-6px);border-color:rgba(246,223,131,.4);box-shadow:0 26px 62px rgba(0,0,0,.32)}
    .product-card{transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}
    .product-card:hover{transform:translateY(-12px);border-color:rgba(246,223,131,.5);box-shadow:0 32px 72px rgba(0,0,0,.48)}
    .product-card:hover .product-img img{transform:scale(1.105)}
    .btn:hover,.main-nav a:hover,.footer-socials a:hover{transition-duration:.2s}
}
.whatsapp-float::after{
    content:"";position:absolute;inset:-6px;border:1px solid rgba(37,211,102,.58);border-radius:50%;pointer-events:none;
    animation:byglo-whatsapp-pulse 3.1s ease-out infinite;
}
@keyframes byglo-whatsapp-pulse{0%,38%{opacity:0;transform:scale(.94)}56%{opacity:.76}100%{opacity:0;transform:scale(1.38)}}

/* =========================================================
   Notebook: composición algo más compacta
   ========================================================= */
@media(min-width:851px) and (max-width:1480px),
       (min-width:851px) and (max-height:850px){
    body{font-size:.96rem}
    .container,.header-inner,.footer-inner,.hero-content{width:min(1240px,calc(100% - 52px))}
    .header-inner{height:72px}.brand img{width:50px;height:50px}
    .hero{min-height:calc(100svh - 72px);padding:38px 0}
    .hero-content{gap:38px}.hero h1{font-size:clamp(2.55rem,4.4vw,4.6rem)}.hero-text p{font-size:.98rem}
    .hero-panel{justify-self:end;max-width:500px;padding:17px}.stats{gap:9px;margin-top:12px}.stat{padding:11px;border-radius:14px}.stat strong{font-size:1.2rem}
    .section{padding:62px 0}.section-sm{padding:36px 0}.grid{gap:18px}
}

/* =========================================================
   Monitor grande: se aprovecha mejor el espacio disponible
   ========================================================= */
@media(min-width:1700px){
    body{font-size:1.075rem}
    .container,.header-inner,.footer-inner,.hero-content{width:min(1680px,calc(100% - 86px))}
    .header-inner{height:92px}.brand img{width:68px;height:68px}.brand strong{font-size:1.34rem}.main-nav a{font-size:1rem;padding:11px 16px}
    .hero{min-height:calc(100svh - 92px);padding:88px 0}.hero-content{gap:82px}.hero h1{font-size:clamp(5rem,5.1vw,7.1rem)}.hero-text p{max-width:780px;font-size:1.22rem}
    .hero-panel{justify-self:end;width:min(100%,700px);padding:28px}.stats{gap:15px}.stat{padding:19px}.stat strong{font-size:1.62rem}
    .section{padding:110px 0}.section-sm{padding:64px 0}.grid{gap:30px}.category-card{padding:34px;min-height:265px}.product-body{padding:21px}.process-card{padding:30px}
}
@media(min-width:2250px){
    body{font-size:1.12rem}.container,.header-inner,.footer-inner,.hero-content{width:min(1900px,calc(100% - 110px))}
}

/* Tablet y celular: movimientos suaves y livianos. */
@media(max-width:850px){
    .hero-panel,.hero-bg-logo{animation:none}.site-effects-ready .site-reveal{filter:none;transform:translate3d(0,20px,0) scale(.99)}
    .site-effects-ready .site-reveal.is-visible{transform:translate3d(0,0,0) scale(1)}.byglo-intro-content img{width:min(62vw,205px)}
}

/* Accesibilidad: respetar la preferencia de reducir movimiento. */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .site-effects-ready .site-reveal,.site-effects-ready .site-reveal.is-visible{opacity:1!important;filter:none!important;transform:none!important}
    .byglo-scroll-progress{display:none}
}