/* =====================================================
   LLANO SNACKS - LANDING ENHANCEMENTS
   Progressive enhancement only. No overrides of existing layout.
===================================================== */

/* ================================
   1. HEADER SCROLLED
================================ */

body.scrolled .site-header{

box-shadow:0 4px 20px rgba(0,0,0,.12);

}



/* ================================
   2. MOBILE MENU (body.nav-open)
================================ */

/* CORRECCIÓN 1: position:relative eliminado — el sticky lo define el <style> inline de index.html */

@media (max-width:768px){

body.nav-open .header-container{

position:relative;

}

body.nav-open .nav-list{

display:flex !important;
flex-direction:column;
position:absolute;
top:100%;
left:0;
right:0;
background:rgba(13,71,161,.98);
padding:var(--space-md);
gap:var(--space-sm);
box-shadow:0 8px 24px rgba(0,0,0,.15);

}

body.nav-open .nav-list a{

display:block;
padding:var(--space-sm) var(--space-md);
color:white;

}

body.nav-open .nav-list a:hover{

color:var(--brand-primary);

}

.menu-toggle.nav-open{

font-size:1.5rem;
line-height:1;

}

}



/* ================================
   3. BACK TO TOP
================================ */

.back-to-top{

position:fixed;
bottom:20px;
right:90px;
width:48px;
height:48px;
border-radius:50%;
background:var(--brand-secondary);
color:white;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:1.25rem;
z-index:999;
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background .2s ease;
box-shadow:0 4px 12px rgba(13,71,161,.35);

}

.back-to-top:hover{

background:#0a3d91;
color:white;

}

.back-to-top.is-visible{

opacity:1;
visibility:visible;
transform:translateY(0);

}

.back-to-top:focus-visible{

outline:2px solid var(--brand-accent);
outline-offset:2px;

}

@media (max-width:480px){

.back-to-top{

right:20px;
bottom:85px;

}

}



/* ================================
   4. NAV ACTIVE (scroll)
================================ */

.nav-list a.nav-active{

color:var(--brand-primary);
font-weight:700;

}

@media (max-width:768px){

body.nav-open .nav-list a.nav-active{

color:var(--brand-primary);

}

}



/* ================================
   5. HERO GRADIENT
================================ */

.hero-section{

background:
linear-gradient(135deg,rgba(227,242,253,.6) 0%,transparent 50%),
linear-gradient(180deg,#E3F2FD 0%,white 100%);

}

/* Hero: menos espacio arriba para que el contenido quede más alto */
.hero-section{

padding-top:clamp(1.5rem,4vw,2.5rem);

}



/* ================================
   6. CARDS TRANSITION & HOVER
================================ */

.producto-card,
.beneficio{

transition:
transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color .3s ease;

}

.producto-card:hover,
.beneficio:hover{

border-color:var(--brand-accent);

}

.producto-card:focus-within,
.beneficio:focus-within{

outline:none;

}

.producto-card a:focus-visible,
.beneficio a:focus-visible{

outline:2px solid var(--brand-accent);
outline-offset:2px;

}



/* ================================
   7. BUTTONS ACTIVE
================================ */

.btn:active{

transform:scale(0.98);

}



/* ================================
   8. FOOTER HOVER
================================ */

.footer-nav a,
.footer-contact a{

transition:color .25s ease;

}



/* ================================
   9. WHATSAPP FLOAT PULSE
================================ */

@keyframes whatsapp-pulse-soft{
0%,100%{ box-shadow:0 4px 16px rgba(37,211,102,.35); }
50%{ box-shadow:0 4px 24px rgba(37,211,102,.5); }
}

.whatsapp-float{

animation:whatsapp-pulse-soft 2.5s ease-in-out infinite;

}



/* ================================
   10. REDUCED MOTION
================================ */

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

.back-to-top,
.producto-card,
.beneficio,
.btn{

transition:none;

}

.back-to-top.is-visible{

transform:none;

}

.whatsapp-float{

animation:none;

}

}