/* =====================================================
   LLANO SNACKS LANDING CSS
   Sistema de diseño profesional optimizado
===================================================== */

/* ================================
   DESIGN SYSTEM / TOKENS
================================ */

:root{

/* BRAND */

--brand-primary:#FFE100;
--brand-secondary:#0D47A1;
--brand-accent:#00AEEF;


/* UI */

--ui-background:#f9f9f9;
--ui-surface:#ffffff;
--ui-border:#e6e6e6;


/* TEXT */

--text-primary:#1a1a1a;
--text-secondary:#555;
--text-inverse:#ffffff;


/* CTA */

--cta-primary:var(--brand-primary);
--cta-primary-text:#222;

--cta-secondary:var(--brand-accent);
--cta-secondary-text:white;


/* FEEDBACK */

--success:#4CAF50;
--danger:#D72638;


/* TYPOGRAPHY */

--font-main:"Poppins",sans-serif;


/* SPACING */

--space-xs:.25rem;
--space-sm:.5rem;
--space-md:1rem;
--space-lg:1.5rem;
--space-xl:2rem;
--space-2xl:3rem;
--space-3xl:4rem;


/* BORDERS */

--radius-sm:4px;
--radius-md:8px;
--radius-lg:12px;
--radius-xl:16px;
--radius-full:999px;


/* SHADOWS */

--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 20px rgba(0,0,0,.08);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);


/* TRANSITIONS */

--transition-fast:.2s ease;
--transition-normal:.3s ease;


/* LAYOUT */

--content-max-width:1200px;


/* ANIMATION */

--duration-fast:.2s;
--duration-normal:.35s;
--duration-in:.6s;

--ease-out:cubic-bezier(0.22,1,0.36,1);

--stagger:.12s;

}



/* ================================
   RESET MODERNO
================================ */

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

img{
max-width:100%;
display:block;
height:auto;
}

body{

font-family:var(--font-main);
background:var(--ui-background);
color:var(--text-primary);

line-height:1.6;

-webkit-font-smoothing:antialiased;

overflow-x:hidden;
overflow-x:clip;
max-width:100%;

padding-bottom:max(4.5rem, env(safe-area-inset-bottom, 0px) + 3.5rem);

}

html{
scroll-behavior:smooth;
overflow-x:hidden;
overflow-x:clip;
max-width:100%;
}



/* ================================
   TIPOGRAFÍA
================================ */

h1,h2,h3,h4{

color:var(--brand-secondary);
line-height:1.2;

}

h1{

font-size:clamp(2.5rem,4vw,3.5rem);
font-weight:800;

letter-spacing:-.02em;

}

h2{

font-size:clamp(1.8rem,3vw,2.5rem);
font-weight:700;

}

h3{

font-size:1.25rem;
font-weight:600;

}

p{

font-size:1.05rem;
color:var(--text-secondary);

max-width:60ch;

}

/* Párrafos dentro de bloques centrados: el tope 60ch queda centrado respecto al contenedor */
.producto-card p{
margin-inline:auto;
}

.contacto-contenido > p{
margin-inline:auto;
max-width:48ch;
}

.equipo-card > p{
margin-inline:auto;
}



/* ================================
   LAYOUT BASE
================================ */

.container{

width:100%;
max-width:var(--content-max-width);

margin-inline:auto;

padding-inline:clamp(1rem,4vw,2rem);

}

section{

padding-block:clamp(3.5rem,7vw,6rem);

scroll-margin-top:80px;

}

main{
max-width:100%;
overflow-x:hidden;
overflow-x:clip;
}

.section-header{

text-align:center;

max-width:760px;

margin:0 auto clamp(1.75rem,4vw,2.25rem);

}

.section-header h2{

font-size:clamp(2rem,3vw,3rem);

line-height:1.1;

}



/* ================================
   BOTONES
================================ */

.btn{

display:inline-flex;

align-items:center;
justify-content:center;

gap:.5rem;

padding:14px 26px;

font-weight:600;
font-size:.95rem;

border-radius:10px;

text-decoration:none;

transition:
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);

cursor:pointer;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 12px 24px rgba(0,0,0,.1);

}



/* CTA PRINCIPAL */

.btn-primary{

background:var(--cta-primary);
color:var(--cta-primary-text);

}

.btn-primary:hover{

background:#FFD54F;

}

/* Hero: CTA principal dominante (mismos colores de marca) */
.btn-cta-hero{
padding:16px 32px;
font-size:1.05rem;
font-weight:700;
letter-spacing:-0.01em;
box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.btn-cta-hero:hover{
transform:translateY(-5px);
box-shadow:0 16px 32px rgba(0,0,0,.14);
}

.btn-hero-secondary{
font-weight:600;
padding:12px 22px;
font-size:.92rem;
opacity:0.95;
}

.btn-hero-secondary:hover{
transform:translateY(-3px);
}



/* CTA SECUNDARIO */

.btn-outline{

border:2px solid var(--brand-secondary);
color:var(--brand-secondary);

}

.btn-outline:hover{

background:var(--brand-secondary);
color:white;

}



/* WHATSAPP */

@keyframes whatsapp-glow{
0%,88%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); transform:translateX(0); }
92%{ box-shadow:0 0 18px 5px rgba(37,211,102,0.45); transform:translateX(0); }
96%{ box-shadow:0 0 22px 6px rgba(37,211,102,0.25); transform:translateX(0); }
}

.btn-whatsapp{

background:#25D366;
color:white;
animation:whatsapp-glow 4s var(--ease-out) infinite;

}

.btn-whatsapp:hover{

background:#1ebe5a;

}



/* STAFF */

.btn-staff{

background:transparent;
border:2px solid white;
color:white;

}

.btn-staff:hover{

background:var(--brand-primary);
color:black;

}

/* ================================
   HEADER
================================ */

.site-header{

position:sticky;
top:0;
z-index:1000;

background:#0D47A1;

backdrop-filter:blur(8px);

box-shadow:var(--shadow-sm);

}

.header-container{

display:flex;

align-items:center;
justify-content:space-between;
flex-wrap:nowrap;

min-height:72px;
gap:clamp(0.85rem,2vw,1.25rem);
padding-block:0.5rem;
padding-inline:clamp(1rem,4vw,2rem);

}

.brand-logo{

font-weight:700;
font-size:clamp(1rem,1.6vw,1.15rem);

color:white;

text-decoration:none;

flex-shrink:0;
min-width:0;

}

.brand-logo a{
color:inherit;
text-decoration:inherit;
display:flex;
align-items:center;
gap:0.65rem;
line-height:1;
min-width:0;
}

.brand-logo-name{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.brand-logo-img{
height:52px;
width:auto;
max-height:52px;
object-fit:contain;
display:block;
}



/* NAV — contraste alto sobre azul oscuro + más separación entre ítems */

.nav{
flex:1 1 auto;
min-width:0;
display:flex;
justify-content:center;
}

.nav-list{

display:flex;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
row-gap:0;
column-gap:clamp(0.75rem,1.8vw,1.65rem);

list-style:none;
margin:0;
padding:0;

}

.nav-list a{

color:rgba(255,255,255,0.92);

font-weight:500;
font-size:clamp(0.82rem,1.1vw,0.95rem);
white-space:nowrap;

text-decoration:none;

transition:var(--transition-fast);

}

.nav-list a:hover{

color:var(--brand-primary);

text-decoration:none;

}

.header-actions{

display:flex;
gap:0.65rem;
align-items:center;
flex-wrap:nowrap;
justify-content:flex-end;
flex-shrink:0;

}

/* Botones del header: padding equilibrado; staff con badge en columna si hace falta */
.header-actions .btn{
padding:10px 16px;
font-size:0.85rem;
white-space:nowrap;
}

.header-actions .btn-staff{
display:inline-flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:0.35rem;
padding:10px 16px;
text-align:center;
line-height:1.2;
white-space:nowrap;
max-width:none;
}

@media (max-width:1024px) and (min-width:769px){
.header-container{
gap:0.65rem;
padding-inline:clamp(0.75rem,2.5vw,1.25rem);
}
.nav-list{
column-gap:clamp(0.55rem,1.2vw,1.1rem);
}
.nav-list a{
font-size:0.8rem;
}
.header-actions .btn{
padding:9px 14px;
font-size:0.8rem;
}
.brand-logo-img{
height:48px;
max-height:48px;
}
}

/* Texto visible corto en header móvil; aria-label mantiene la frase completa para lectores de pantalla */
.header-cta-label--short{
display:none;
}

.menu-toggle{

display:none;

background:none;
border:none;

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

color:white;

cursor:pointer;

-webkit-tap-highlight-color:transparent;

}



/* ================================
   HERO
================================ */

.hero-section{

background:
radial-gradient(circle at 75% 45%,rgba(255,225,0,0.16),transparent 38%),
linear-gradient(135deg,#eef7ff 0%,#ffffff 58%,#f4f9ff 100%);
position:relative;
overflow:hidden;

}

.hero-section::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse 80% 55% at 85% 45%,rgba(255,225,0,0.1) 0%,transparent 55%);
pointer-events:none;
z-index:0;
}

.hero-section .container{
position:relative;
z-index:2;
}

.hero-text{
position:relative;
z-index:2;
}

.hero-text h1{
color:#0D47A1;
font-weight:800;
letter-spacing:-0.03em;
text-shadow:none;
}

.hero-text .hero-description,
.hero-text .hero-support,
.hero-text .hero-microcopy{
color:#334155;
max-width:62ch;
}

.hero-text .hero-chip{
color:var(--brand-secondary);
background:rgba(13,71,161,0.07);
border:1px solid rgba(13,71,161,0.14);
backdrop-filter:none;
}

.hero-text .btn-outline{
border:2px solid var(--brand-secondary);
color:#0D47A1;
background:rgba(255,255,255,0.92);
}

.hero-text .btn-outline:hover{
background:var(--brand-secondary);
color:#fff;
border-color:var(--brand-secondary);
}

.hero-layout{

display:grid;

grid-template-columns:1fr;

align-items:center;

gap:clamp(1.25rem,4vw,2rem);

text-align:center;

}

.hero-description{

margin:var(--space-md) 0;

}

.hero-support{
margin:0 0 var(--space-md);
font-size:1.05rem;
color:var(--text-secondary);
max-width:60ch;
line-height:1.55;
}

.hero-cta{

display:flex;
gap:var(--space-md);

margin-bottom:var(--space-md);

}

.hero-media{
position:relative;
z-index:2;
animation:heroMediaFloat 9s ease-in-out infinite;
will-change:transform;
}

.hero-media::before{
content:"";
position:absolute;
inset:-10% -6% auto -6%;
height:75%;
background:radial-gradient(ellipse at 50% 40%,rgba(255,225,0,0.22) 0%,transparent 68%);
z-index:0;
pointer-events:none;
}

/* Anillo de energía suave (detrás del video) */
.hero-media .energy-ring{
position:absolute;
left:50%;
top:50%;
width:min(108%,clamp(340px,44vw,520px));
aspect-ratio:1;
translate:-50% -50%;
border-radius:50%;
pointer-events:none;
z-index:0;
background:radial-gradient(circle,transparent 58%,rgba(255,225,0,0.1) 62%,transparent 72%);
box-shadow:0 0 0 0 rgba(255,225,0,0);
animation:energyPulse 5.5s ease-in-out infinite;
}

/* Arco decorativo tipo esquina de cancha (detrás del video) */
.hero-media.pitch-lines::after{
content:"";
position:absolute;
width:clamp(72px,22vw,140px);
height:clamp(72px,22vw,140px);
right:-6%;
bottom:10%;
border-radius:50%;
border:1px solid rgba(13,71,161,0.07);
clip-path:polygon(45% 45%,100% 45%,100% 100%,45% 100%);
pointer-events:none;
z-index:0;
opacity:0.30;
animation:pitchGlow 14s ease-in-out infinite;
}

.hero-media img,
.hero-media video{
position:relative;
z-index:2;
max-width:min(100%,clamp(320px,40vw,480px));
width:100%;
margin:auto;
transition:transform var(--duration-normal) var(--ease-out);
display:block;
border-radius:18px;
box-shadow:
0 22px 55px rgba(13,71,161,0.22),
0 0 0 1px rgba(13,71,161,0.08),
0 0 48px rgba(255,225,0,0.18);
border:1px solid rgba(13,71,161,0.12);
}

.hero-media img:hover,
.hero-media video:hover{
transform:scale(1.04);
}

.hero-seal{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.35rem;
background:linear-gradient(90deg,var(--brand-secondary) 0%,#1565C0 100%);
color:#fff;
font-weight:700;
font-size:clamp(0.72rem,2vw,0.82rem);
letter-spacing:0.06em;
text-transform:uppercase;
padding:0.55rem 1.1rem;
border-radius:var(--radius-full);
margin-bottom:var(--space-md);
box-shadow:0 4px 14px rgba(13,71,161,0.25);
}

.hero-chips{
display:flex;
flex-wrap:wrap;
gap:var(--space-sm);
margin-top:var(--space-md);
}

.hero-chip{
font-size:0.82rem;
font-weight:600;
color:var(--brand-secondary);
background:rgba(13,71,161,0.07);
border:1px solid rgba(13,71,161,0.14);
padding:0.4rem 0.9rem;
border-radius:var(--radius-full);
line-height:1.3;
}

@keyframes heroFadeIn{
from{ opacity:0; transform:translateY(20px); }
to{ opacity:1; transform:translateY(0); }
}

.hero-text h1{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
}
.hero-text .hero-description{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:var(--stagger);
}
.hero-text .hero-support{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:var(--stagger);
}
.hero-text .hero-cta{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:calc(var(--stagger) * 2);
}
.hero-text .hero-microcopy{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:calc(var(--stagger) * 3);
}
.hero-text .hero-seal{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:calc(var(--stagger) * 4);
}
.hero-text .hero-chips{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:calc(var(--stagger) * 5);
}
.hero-media img,
.hero-media video{
opacity:0;
animation:heroFadeIn var(--duration-in) var(--ease-out) forwards;
animation-delay:var(--duration-fast);
}

/* Franja de confianza / métricas bajo hero */
.trust-strip,
aside.trust-strip{
background:linear-gradient(180deg,#f5f9ff 0%,var(--ui-surface) 100%);
border-bottom:1px solid var(--ui-border);
padding-block:clamp(1.75rem,4vw,2.75rem);
box-shadow:0 4px 20px rgba(13,71,161,.07);
width:100%;
display:block;
}

.trust-metrics{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-lg);
list-style:none;
margin:0;
padding:0;
}

.trust-metric{
background:linear-gradient(165deg,#ffffff 0%,#f0f7ff 100%);
border:1px solid var(--ui-border);
border-radius:var(--radius-lg);
padding:var(--space-lg) var(--space-md);
text-align:center;
box-shadow:var(--shadow-sm);
min-width:0;
}

.trust-metric__value{
font-size:clamp(1.65rem,4vw,2.45rem);
font-weight:800;
color:var(--brand-secondary);
line-height:1.15;
display:block;
letter-spacing:-0.03em;
max-width:100%;
overflow-wrap:break-word;
word-break:normal;
hyphens:auto;
}

.trust-metric__label{
font-size:0.92rem;
color:var(--text-secondary);
margin-top:var(--space-xs);
line-height:1.45;
display:block;
}

.trust-social-proof{
max-width:52rem;
margin:var(--space-lg) auto 0;
padding:var(--space-md) var(--space-lg);
text-align:center;
font-size:clamp(0.9rem,2.2vw,1rem);
color:var(--text-secondary);
line-height:1.5;
background:rgba(13,71,161,0.06);
border:1px solid rgba(13,71,161,0.1);
border-radius:var(--radius-lg);
}

.visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

/* —— Negocios: tiendas, distribuidores, consumo (compacto) —— */
.negocios-section{
background:linear-gradient(180deg,#fafcfe 0%,var(--ui-background) 100%);
border-bottom:1px solid var(--ui-border);
}

.negocios-grid{
display:grid;
grid-template-columns:1fr;
gap:var(--space-lg);
list-style:none;
margin:0 auto 28px;
padding:0;
max-width:980px;
}

.negocios-card{
background:var(--ui-surface);
border:1px solid var(--ui-border);
border-radius:16px;
padding:clamp(1.15rem,4vw,1.5rem);
box-shadow:var(--shadow-md);
min-width:0;
text-align:left;
transition:
transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}

.negocios-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 36px rgba(13,71,161,0.12);
}

.negocios-card h3{
color:var(--brand-secondary);
font-size:clamp(1.2rem,2.4vw,1.45rem);
margin:0 0 var(--space-sm);
display:flex;
align-items:center;
gap:0.4rem;
}

.negocios-card p{
margin:0;
max-width:none;
font-size:1.05rem;
line-height:1.55;
}

.productos-cta-wrap,
.negocios-cta,
.cobertura-pedido-cta{
text-align:center;
margin-top:var(--space-xl);
}

.productos-cta-wrap .btn,
.negocios-cta .btn,
.cobertura-pedido-cta .btn{
display:flex;
width:100%;
max-width:22rem;
min-height:48px;
margin-inline:auto;
font-size:1rem;
font-weight:700;
box-sizing:border-box;
align-items:center;
justify-content:center;
}

/* Cobertura + pedido (dos columnas) */
.cobertura-pedido-section{
background:var(--ui-surface);
border-bottom:1px solid var(--ui-border);
}

.cobertura-pedido-grid{
display:grid;
grid-template-columns:1fr;
gap:var(--space-lg);
max-width:900px;
margin:0 auto 28px;
align-items:start;
}

.cobertura-pedido-col{
background:linear-gradient(165deg,#ffffff 0%,#f5f9ff 100%);
border:1px solid var(--ui-border);
border-radius:16px;
padding:24px;
box-shadow:var(--shadow-sm);
min-width:0;
}

.cobertura-pedido-col h3{
color:var(--brand-secondary);
font-size:clamp(1.15rem,2vw,1.3rem);
margin:0 0 var(--space-md);
display:flex;
align-items:center;
gap:0.35rem;
}

.cobertura-pedido-col p{
margin:0;
max-width:none;
font-size:1.05rem;
line-height:1.6;
}

.pedido-steps-compact{
margin:var(--space-md) 0 0;
padding:0;
list-style:none;
counter-reset:pedido-step;
color:var(--text-secondary);
font-size:1.05rem;
line-height:1.5;
}

.pedido-steps-compact li{
position:relative;
counter-increment:pedido-step;
margin-bottom:var(--space-sm);
padding:0.85rem 1rem 0.85rem 3rem;
background:rgba(13,71,161,0.06);
border:1px solid rgba(13,71,161,0.1);
border-radius:var(--radius-md);
}

.pedido-steps-compact li::before{
content:counter(pedido-step);
position:absolute;
left:0.85rem;
top:50%;
transform:translateY(-50%);
width:1.75rem;
height:1.75rem;
display:flex;
align-items:center;
justify-content:center;
font-size:0.85rem;
font-weight:700;
color:#fff;
background:var(--brand-secondary);
border-radius:50%;
line-height:1;
}

.pedido-steps-compact li:last-child{
margin-bottom:0;
}

.cobertura-pedido-cta{
text-align:center;
margin-top:var(--space-xl);
}

.equipo-acceso--compact{
padding-block:clamp(1.5rem,3vw,2.25rem);
background:var(--ui-background);
border-top:1px solid var(--ui-border);
}

.equipo-acceso--compact .equipo-card{
max-width:420px;
padding:var(--space-md) var(--space-lg);
box-shadow:none;
border-color:rgba(13,71,161,0.12);
background:rgba(255,255,255,0.7);
}

.equipo-acceso--compact .equipo-titulo{
font-size:clamp(1rem,2vw,1.15rem);
margin-bottom:var(--space-xs);
font-weight:600;
color:var(--text-secondary);
}

.equipo-acceso--compact .equipo-subtitulo{
font-weight:400;
font-size:0.9rem;
color:var(--text-secondary);
margin-bottom:var(--space-md);
opacity:0.9;
}

.equipo-acceso--compact .btn-acceso{
padding:10px 18px;
font-size:0.88rem;
background:transparent;
color:var(--brand-secondary);
border:1px solid rgba(13,71,161,0.35);
min-height:44px;
}

.equipo-acceso--compact .btn-acceso:hover{
background:rgba(13,71,161,0.06);
color:var(--brand-secondary);
}

/* Microcopy bajo CTAs (confianza, baja fricción) */
.hero-microcopy{
font-size:clamp(0.86rem,2.2vw,0.95rem);
color:var(--text-secondary);
margin:0 0 var(--space-md);
max-width:42ch;
line-height:1.45;
}

.section-lede{
font-size:clamp(1rem,1.4vw,1.18rem);
color:var(--text-secondary);
max-width:40rem;
margin:-0.35rem auto var(--space-lg);
line-height:1.6;
text-align:center;
}

/* ================================
   PRODUCTOS
================================ */

.productos-grid{

display:grid;

grid-template-columns:1fr;

gap:var(--space-lg);

max-width:1100px;

margin-inline:auto;

}

.producto-card{

background:white;

border-radius:16px;

padding:clamp(1.15rem,4vw,1.5rem);

border:1px solid var(--ui-border);

text-align:center;

transition:
transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);

}

.producto-card:hover{

transform:translateY(-6px);

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

}

.producto-card img{

max-width:min(100%,200px);

margin-inline:auto;
margin-bottom:var(--space-md);

filter:drop-shadow(0 8px 20px rgba(13,71,161,0.12));

}

.producto-info p{

margin:
var(--space-sm)
0
var(--space-md);

}

.producto-tagline{
font-weight:600;
color:var(--text-primary);
font-size:1rem;
margin:var(--space-sm) 0 var(--space-md);
line-height:1.45;
}

/* ================================
   CONTACTO
================================ */

.contact-layout{

text-align:center;

}

.contact-info{

margin:var(--space-md) 0;

}

.contact-info a{

color:var(--brand-accent);

text-decoration:none;

}

.contact-info a:hover{

text-decoration:underline;

}


/* ================================
   CONTACTO (contenido mejorado)
================================ */

.contacto-contenido{
max-width:680px;
margin-inline:auto;
}

.contacto-titulo{
font-size:clamp(2rem,3vw,2.75rem);
font-weight:700;
color:var(--brand-secondary);
margin-bottom:var(--space-sm);
line-height:1.15;
}

.contacto-subtitulo{
font-size:clamp(1rem,1.4vw,1.18rem);
color:var(--text-secondary);
margin-bottom:var(--space-lg);
line-height:1.6;
}

.contacto-info{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-md);
margin-bottom:var(--space-lg);
}

.contacto-item{
text-align:center;
min-width:min(100%,20rem);
max-width:100%;
}

.contacto-item--primary .contacto-dato{
font-size:clamp(1.05rem,2.5vw,1.2rem);
font-weight:600;
}

.contacto-item--primary .contacto-dato a{
color:#128C7E;
font-weight:600;
}

.contacto-item--secondary .contacto-dato{
font-size:0.95rem;
}

.contacto-item--secondary .contacto-dato a{
color:var(--text-secondary);
font-weight:500;
}

.contacto-item--secondary .contacto-dato a:hover{
color:var(--brand-accent);
}

.contacto-label{
display:block;
font-size:0.9rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:var(--space-xs);
}

.contacto-dato{
margin:0;
font-size:1.1rem;
}

.contacto-dato a{
color:var(--brand-accent);
text-decoration:none;
}

.contacto-dato a:hover{
text-decoration:underline;
}

.contacto-extra{
font-size:0.95rem;
color:var(--text-secondary);
margin-bottom:var(--space-sm);
}

.contacto-tiempo{
font-size:0.9rem;
color:var(--text-secondary);
opacity:0.9;
margin-bottom:var(--space-xl);
}

.btn-whatsapp-contacto{
background:#25D366;
color:white;
min-height:48px;
width:100%;
max-width:22rem;
margin-inline:auto;
font-size:1rem;
font-weight:700;
}

.btn-whatsapp-contacto:hover{
background:#1ebe5a;
color:white;
}

.contacto-instrucciones{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--space-md);
margin:var(--space-lg) 0 var(--space-xl);
text-align:left;
}

.contacto-instruccion{
background:rgba(13,71,161,0.04);
border:1px solid var(--ui-border);
border-radius:var(--radius-md);
padding:var(--space-md);
font-size:0.92rem;
color:var(--text-secondary);
line-height:1.45;
}

.contacto-instruccion strong{
color:var(--brand-secondary);
display:block;
margin-bottom:0.35rem;
font-size:0.95rem;
}


/* ================================
   STAFF
================================ */

.staff-section{

background:#E3F2FD;

text-align:center;

}


/* ================================
   EQUIPO ACCESO (Área de equipo)
================================ */

.equipo-acceso{
background:linear-gradient(180deg,#E3F2FD 0%,#f0f7ff 100%);
padding-block:clamp(3rem,6vw,4.5rem);
}

.equipo-card{
max-width:520px;
margin-inline:auto;
padding:var(--space-2xl);
background:var(--ui-surface);
border-radius:var(--radius-xl);
border:1px solid var(--ui-border);
box-shadow:var(--shadow-md);
text-align:center;
}

.equipo-titulo{
font-size:clamp(1.35rem,2.5vw,1.6rem);
font-weight:700;
color:var(--brand-secondary);
margin-bottom:var(--space-sm);
line-height:1.3;
}

.equipo-subtitulo{
font-size:1rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:var(--space-md);
}

.equipo-descripcion{
font-size:0.95rem;
color:var(--text-secondary);
margin-bottom:var(--space-md);
line-height:1.5;
}

.equipo-nota{
font-size:0.85rem;
color:var(--text-secondary);
opacity:0.9;
margin-bottom:var(--space-xl);
font-style:italic;
}

.btn-acceso{
background:var(--brand-secondary);
color:white;
}

.btn-acceso:hover{
background:#0a3d91;
color:white;
}


/* ================================
   FOOTER
================================ */

.site-footer{

width:100%;
max-width:100%;
box-sizing:border-box;

background:var(--brand-secondary);

color:white;

padding-block:2.25rem 1.25rem;

}

.footer-layout{

display:flex;

align-items:center;
justify-content:space-between;

padding-bottom:var(--space-lg);

}

.footer-nav ul{

list-style:none;

display:flex;

gap:var(--space-lg);

}

.footer-nav a{

color:white;

text-decoration:none;

opacity:.85;

}

.footer-nav a:hover{

opacity:1;

color:var(--brand-primary);

}

/*
Legacy footer styles
(kept for compatibility)
.footer-copy{
display:block;
width:100%;
box-sizing:border-box;
text-align:center;
color:#fff;
border-top:1px solid rgba(255,255,255,.2);
padding:var(--space-md);
font-size:.9rem;
}
.footer-copy p{
margin:0;
color:#fff;
text-align:center;
}
================================
   FOOTER (contenido mejorado)
================================
.footer-contenido{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start;
gap:var(--space-2xl);
padding-bottom:var(--space-xl);
max-width:var(--content-max-width);
margin-inline:auto;
padding-inline:clamp(1rem,4vw,2rem);
}
.footer-marca{
flex:1 1 200px;
}
.footer-logo{
font-size:1.4rem;
font-weight:700;
color:white;
margin-bottom:var(--space-sm);
}
.footer-descripcion{
font-size:0.95rem;
color:rgba(255,255,255,0.9);
margin-bottom:var(--space-xs);
}
.footer-calidad{
font-size:0.85rem;
color:rgba(255,255,255,0.75);
}
.footer-navegacion h4,
.footer-contacto h4{
font-size:0.9rem;
font-weight:600;
color:white;
margin-bottom:var(--space-md);
text-transform:uppercase;
letter-spacing:0.05em;
}
.footer-navegacion ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:var(--space-sm);
}
.footer-navegacion a{
color:rgba(255,255,255,0.85);
text-decoration:none;
font-size:0.95rem;
}
.footer-navegacion a:hover{
color:var(--brand-primary);
}
.footer-contacto{
flex:0 1 auto;
}
.footer-whatsapp{
margin:0;
font-size:0.95rem;
}
.footer-whatsapp a{
color:rgba(255,255,255,0.9);
text-decoration:none;
}
.footer-whatsapp a:hover{
color:var(--brand-primary);
text-decoration:underline;
}
.footer-copy p{
margin:0;
}
*/

/* ================================
   SCROLL ANIMATIONS (Intersection Observer)
================================ */

@keyframes fadeUp{
from{ opacity:0; transform:translateY(24px); }
to{ opacity:1; transform:translateY(0); }
}

/* Visible by default; slide-up when .in-view is added by JS (progressive enhancement) */
.section-header,
.productos-grid .producto-card,
.negocios-grid .negocios-card,
.cobertura-pedido-grid .cobertura-pedido-col,
.contact-layout .contacto-titulo,
.contact-layout .contacto-info,
.contact-layout .btn-whatsapp-contacto,
.equipo-acceso .equipo-card{
opacity:1;
transform:none;
transition:opacity var(--duration-in) var(--ease-out),
transform var(--duration-in) var(--ease-out);
}

.section-header:not(.in-view),
.productos-grid:not(.in-view) .producto-card,
.negocios-grid:not(.in-view) .negocios-card,
.cobertura-pedido-grid:not(.in-view) .cobertura-pedido-col,
.contact-layout:not(.in-view) .contacto-titulo,
.contact-layout:not(.in-view) .contacto-info,
.contact-layout:not(.in-view) .btn-whatsapp-contacto,
.equipo-acceso:not(.in-view) .equipo-card{
transform:translateY(24px);
}

.section-header.in-view,
.productos-grid.in-view .producto-card,
.negocios-grid.in-view .negocios-card,
.cobertura-pedido-grid.in-view .cobertura-pedido-col,
.contact-layout.in-view .contacto-titulo,
.contact-layout.in-view .contacto-info,
.contact-layout.in-view .btn-whatsapp-contacto,
.equipo-acceso.in-view .equipo-card{
opacity:1;
transform:translateY(0);
}

/* Stagger: delay each card when parent gets .in-view */
.productos-grid.in-view .producto-card:nth-child(1){ transition-delay:0; }
.productos-grid.in-view .producto-card:nth-child(2){ transition-delay:var(--stagger); }
.productos-grid.in-view .producto-card:nth-child(3){ transition-delay:calc(var(--stagger) * 2); }

.negocios-grid.in-view .negocios-card:nth-child(1){ transition-delay:0; }
.negocios-grid.in-view .negocios-card:nth-child(2){ transition-delay:var(--stagger); }
.negocios-grid.in-view .negocios-card:nth-child(3){ transition-delay:calc(var(--stagger) * 2); }

.cobertura-pedido-grid.in-view .cobertura-pedido-col:nth-child(1){ transition-delay:0; }
.cobertura-pedido-grid.in-view .cobertura-pedido-col:nth-child(2){ transition-delay:var(--stagger); }

.contact-layout.in-view .contacto-titulo{ transition-delay:0; }
.contact-layout.in-view .contacto-info{ transition-delay:var(--stagger); }
.contact-layout.in-view .btn-whatsapp-contacto{ transition-delay:calc(var(--stagger) * 2); }


/* ================================
   WHATSAPP FLOAT
================================ */

.whatsapp-float{

position:fixed;
z-index:1100;

bottom:calc(20px + env(safe-area-inset-bottom, 0px));
right:calc(20px + env(safe-area-inset-right, 0px));

width:58px;
height:58px;

background:#25D366;

color:white;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

font-size:1.6rem;

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

text-decoration:none;

transition:transform var(--duration-fast) var(--ease-out);

}

.whatsapp-float:hover{

transform:scale(1.08);

}

.whatsapp-float-img{
width:36px;
height:36px;
object-fit:contain;
display:block;
}



/* ================================
   ACCESSIBILITY
================================ */

/* Skip link: visible solo al enfocar con teclado */
.skip-link{
position:absolute;
top:-100%;
left:1rem;
z-index:9999;
padding:0.5rem 1rem;
background:#000;
color:#fff;
font-weight:600;
text-decoration:none;
border-radius:0 0 4px 4px;
transition:top 0.2s;
}
.skip-link:focus-visible{
top:0;
}

/* :focus-visible global ya definido aquí (no duplicar regla alternativa) */

*:focus-visible{

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

}

::selection{

background:var(--brand-primary);
color:black;

}



/* ================================
   RESPONSIVE (mobile-first → desktop)
================================ */

@media (min-width:769px){

.productos-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-xl);
}

.producto-card img{
max-width:min(100%,220px);
}

.negocios-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
}

.cobertura-pedido-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:28px;
}

.contacto-info{
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
gap:var(--space-xl);
}

}

@media (min-width:901px){

.hero-layout{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
gap:clamp(2rem,5vw,4rem);
text-align:left;
}

.hero-text{
display:block;
}

.hero-seal,
.hero-text h1,
.hero-chips,
.hero-description,
.hero-cta,
.hero-support,
.hero-microcopy,
.hero-media{
order:unset;
width:auto;
max-width:none;
}

.hero-cta{
justify-content:flex-start;
}

.hero-chips{
justify-content:flex-start;
}

.productos-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.producto-card img{
max-width:min(100%,240px);
}

.negocios-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.productos-cta-wrap .btn,
.negocios-cta .btn,
.cobertura-pedido-cta .btn{
width:auto;
min-width:min(100%,16rem);
}

.btn-whatsapp-contacto{
width:auto;
}

}

@media (max-width:768px){

section{
padding-block:clamp(2.5rem,6vw,3.5rem);
scroll-margin-top:72px;
}

.header-container{
flex-wrap:nowrap;
align-items:center;
row-gap:0;
column-gap:var(--space-sm);
padding:var(--space-sm) var(--space-md);
gap:var(--space-sm);
}

.nav{
flex:0 0 auto;
justify-content:flex-start;
order:4;
}

.brand-logo{
font-size:clamp(0.95rem,3.2vw,1.25rem);
flex:1 1 auto;
min-width:0;
order:1;
}

.header-actions{
flex:0 0 auto;
min-width:0;
justify-content:flex-end;
gap:var(--space-xs);
order:2;
}

.header-actions .header-staff-link{
display:none;
}

.header-actions .btn-whatsapp{
min-height:44px;
padding:10px 14px;
font-size:0.875rem;
font-weight:700;
}

.menu-toggle{
order:3;
}

.nav-list{

display:none;

}

.menu-toggle{

display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;

min-width:44px;
min-height:44px;
padding:0;

}

.footer-layout{

flex-direction:column;

gap:var(--space-md);

}

.producto-card .btn.btn-whatsapp,
.contact-layout .btn-whatsapp-contacto{
min-height:48px;
box-sizing:border-box;
align-items:center;
justify-content:center;
}

/* Hero: lectura rápida — chips y CTA antes del video */
.hero-section{
padding-block:clamp(1.1rem,3.5vw,1.75rem);
}

.hero-layout{
display:flex;
flex-direction:column;
align-items:center;
}

.hero-text{
display:contents;
}

.hero-seal{ order:1; margin-bottom:var(--space-sm); }
.hero-text h1{ order:2; width:100%; max-width:42rem; }
.hero-chips{ order:3; margin:0 0 var(--space-sm); justify-content:center; width:100%; }
.hero-description{ order:4; margin-top:0; width:100%; max-width:42rem; }
.hero-cta{ order:5; width:100%; max-width:22rem; margin-bottom:var(--space-sm); }
.hero-media{ order:6; width:100%; margin:var(--space-xs) 0 var(--space-sm); animation:none; }
.hero-support{ order:7; font-size:0.98rem; margin-bottom:var(--space-sm); width:100%; max-width:42rem; }
.hero-microcopy{ order:8; margin-bottom:0; width:100%; max-width:42rem; }

.hero-media video{
max-width:min(100%,320px);
max-height:min(38vw,200px);
width:auto;
height:auto;
object-fit:cover;
margin-inline:auto;
}

.trust-strip,
aside.trust-strip{
padding-block:clamp(1rem,3vw,1.5rem);
}

.trust-metrics{
gap:var(--space-sm);
}

.trust-metric{
padding:var(--space-md) var(--space-sm);
}

.trust-metric__value{
font-size:clamp(1.25rem,4.5vw,1.65rem);
}

.trust-metric__label{
font-size:0.88rem;
}

.cobertura-pedido-col{
padding:clamp(1rem,4vw,1.35rem);
}

.cobertura-pedido-col p,
.pedido-steps-compact{
font-size:1rem;
}

.footer-nav a,
.footer-contact a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0.35rem 0.5rem;
}

}

@media (max-width:640px){

.header-cta-label--long{
display:none;
}

.header-cta-label--short{
display:inline;
}

.brand-logo-name{
display:none;
}

}



@media (max-width:420px){

.trust-metrics{
grid-template-columns:1fr;
}

}

@media (max-width:480px){

.hero-cta{

flex-direction:column;
align-items:stretch;

}

.hero-cta .btn{
width:100%;
max-width:min(100%,22rem);
margin-inline:auto;
box-sizing:border-box;
min-height:48px;
}

.trust-metrics{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.hero-text h1{
font-size:clamp(1.55rem,5.5vw + 0.5rem,2.35rem);
line-height:1.18;
}

.hero-description{
max-width:100%;
margin-inline:auto;
font-size:1rem;
}

.hero-chip{
font-size:0.8rem;
}

.producto-card img{
max-width:min(100%,180px);
}

.producto-info h3{
font-size:1.2rem;
}

}

/* ================================
   AMBIENTACIÓN DEPORTIVA SUTIL (solo visual)
================================ */

.hero-sport-bg::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
background:
linear-gradient(90deg,transparent 0%,transparent calc(50% - 1px),rgba(13,71,161,0.04) calc(50% - 1px),rgba(13,71,161,0.04) calc(50% + 1px),transparent calc(50% + 1px)),
radial-gradient(ellipse 52% 40% at 50% 100%,transparent 58%,rgba(13,71,161,0.03) 59%,rgba(13,71,161,0.03) 60.5%,transparent 62%),
repeating-linear-gradient(
105deg,
transparent,
transparent 46px,
rgba(13,71,161,0.02) 46px,
rgba(13,71,161,0.02) 47px
);
opacity:0.26;
}

.hero-sport-bg .hero-sport-ambient,
.football-decor{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
overflow:hidden;
}

.confetti-layer{
position:absolute;
pointer-events:none;
}

.football-ball{
position:absolute;
width:clamp(20px,3.2vw,32px);
height:clamp(20px,3.2vw,32px);
border-radius:50%;
left:min(3%,1rem);
bottom:12%;
top:auto;
background:
radial-gradient(circle at 32% 28%,rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.75) 22%,transparent 24%),
radial-gradient(circle at 68% 52%,rgba(13,71,161,0.08) 0%,transparent 40%),
radial-gradient(circle at 50% 50%,#f8fafc 0%,#e2e8f0 55%,#cbd5e1 100%);
box-shadow:
inset -2px -3px 6px rgba(0,0,0,0.08),
1px 4px 10px rgba(13,71,161,0.06);
animation:ballFloat 7s ease-in-out infinite;
opacity:0.55;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.16));
}

.confetti-piece{
position:absolute;
width:3px;
height:5px;
border-radius:1px;
pointer-events:none;
opacity:0.16;
animation:confettiDrift 16s ease-in-out infinite;
}

.confetti-piece--1{
right:14%;
bottom:14%;
left:auto;
background:rgba(255,225,0,0.75);
animation-delay:0s;
}

.confetti-piece--2{
right:22%;
bottom:20%;
left:auto;
background:rgba(13,71,161,0.35);
animation-delay:-3s;
width:4px;
height:4px;
}

.confetti-piece--3{
right:8%;
bottom:28%;
background:rgba(255,225,0,0.55);
animation-delay:-6s;
}

.confetti-piece--4{
right:30%;
bottom:8%;
top:auto;
background:rgba(13,71,161,0.25);
animation-delay:-9s;
height:5px;
width:3px;
}

.confetti-piece--5{
right:18%;
bottom:6%;
left:auto;
top:auto;
background:rgba(100,116,139,0.35);
animation-delay:-12s;
}

@keyframes ballFloat{
0%,100%{ transform:translate(0,0) rotate(0deg); }
20%{ transform:translate(3px,-7px) rotate(72deg); }
45%{ transform:translate(-2px,-12px) rotate(160deg); }
70%{ transform:translate(4px,-5px) rotate(250deg); }
90%{ transform:translate(-1px,-9px) rotate(320deg); }
}

@keyframes confettiDrift{
0%,100%{ transform:translate(0,0) rotate(0deg); opacity:0.08; }
33%{ transform:translate(6px,-10px) rotate(120deg); opacity:0.14; }
66%{ transform:translate(-4px,-6px) rotate(240deg); opacity:0.1; }
}

@keyframes pitchGlow{
0%,100%{ opacity:0.45; }
50%{ opacity:0.72; }
}

@keyframes energyPulse{
0%,100%{ opacity:0.55; box-shadow:0 0 0 0 rgba(255,225,0,0); }
50%{ opacity:0.92; box-shadow:0 0 42px 18px rgba(255,225,0,0.11); }
}

@keyframes heroMediaFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-5px); }
}

.trust-strip.sport-field-accent,
.productos.sport-field-accent{
position:relative;
}

.trust-strip.sport-field-accent::before,
.productos.sport-field-accent::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:0.18;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 56px,
rgba(13,71,161,0.035) 56px,
rgba(13,71,161,0.035) 57px
),
radial-gradient(ellipse 70% 45% at 50% 0%,rgba(13,71,161,0.04) 0%,transparent 55%);
}

.trust-strip.sport-field-accent > .container,
.productos.sport-field-accent > .container{
position:relative;
z-index:1;
}

@media (max-width:768px){

.football-ball{
opacity:0.35;
transform:scale(.82);
}

.hero-sport-bg::before{
opacity:0.14;
}

.confetti-piece{
opacity:0.08;
}

}

@media (max-width:480px){

.hero-sport-bg .football-ball{
width:20px;
height:20px;
bottom:8%;
left:min(2%,0.5rem);
}

.hero-sport-bg .confetti-piece--4,
.hero-sport-bg .confetti-piece--5{
display:none;
}

}

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

/* ================================
   FOOTER MEJORADO (jerarquía y branding)
================================ */

.footer-wrapper{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start;
gap:var(--space-2xl);
max-width:min(var(--content-max-width),100%);
width:100%;
box-sizing:border-box;
margin-inline:auto;
padding-inline:clamp(1rem,4vw,2rem);
padding-bottom:var(--space-xl);
}

.footer-col{
flex:1 1 200px;
min-width:0;
}

.footer-brand .footer-logo{
font-size:1.5rem;
font-weight:700;
color:#fff;
margin-bottom:var(--space-sm);
letter-spacing:-0.02em;
}

.footer-tagline{
font-size:1.05rem;
font-weight:600;
color:rgba(255,255,255,0.95);
margin-bottom:var(--space-xs);
}

.footer-description{
font-size:1rem;
color:rgba(255,255,255,0.85);
line-height:1.55;
margin-bottom:var(--space-sm);
max-width:42ch;
}

.footer-quality{
font-size:0.9rem;
color:rgba(255,255,255,0.75);
}

.footer-nav h4,
.footer-contact h4{
font-size:0.95rem;
font-weight:600;
color:#fff;
text-transform:uppercase;
letter-spacing:0.06em;
margin-bottom:var(--space-md);
}

.footer-nav ul{
list-style:none;
padding:0;
margin:0;
}

.footer-nav li{
margin-bottom:var(--space-xs);
}

.footer-nav a{
color:rgba(255,255,255,0.9);
text-decoration:none;
font-size:1rem;
transition:color var(--transition-fast);
overflow-wrap:break-word;
word-break:normal;
}

.footer-nav a:hover{
color:var(--brand-primary);
}

.footer-divider{
height:0;
margin:var(--space-sm) 0;
padding:0;
border:0;
border-top:1px solid rgba(255,255,255,0.25);
list-style:none;
}

.footer-contact-item{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:var(--space-sm);
margin-bottom:var(--space-sm);
font-size:1rem;
min-width:0;
max-width:100%;
overflow-wrap:break-word;
word-break:normal;
}

.footer-contact-item:last-child{
margin-bottom:0;
}

.footer-icon{
flex-shrink:0;
font-size:1.1em;
}

.footer-contact a{
color:rgba(255,255,255,0.9);
text-decoration:none;
transition:color var(--transition-fast);
}

.footer-contact a:hover{
color:var(--brand-primary);
}

.footer-bottom{
width:100%;
box-sizing:border-box;
text-align:center;
color:#fff;
border-top:1px solid rgba(255,255,255,0.2);
padding:var(--space-md);
font-size:0.9rem;
}

.footer-bottom p{
margin:0;
color:#fff;
}

@media (max-width:900px){
.footer-wrapper{
flex-direction:column;
align-items:center;
text-align:center;
gap:var(--space-xl);
}
.footer-col{
flex:1 1 auto;
width:100%;
max-width:100%;
min-width:0;
}
.footer-nav ul{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-xs);
}
.footer-nav li{
width:100%;
max-width:24rem;
text-align:center;
}
.footer-brand .footer-description{
max-width:none;
}
}

/* ================================
   LANDING ENHANCEMENTS
   Mejoras de interacción y UX
   ================================ */

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

body.scrolled .site-header{

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

}



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

@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);
max-height:min(70vh,100vh);
overflow-y:auto;
-webkit-overflow-scrolling:touch;

}

body.nav-open .nav-list a{

display:flex;
align-items:center;
min-height:44px;
padding:var(--space-sm) var(--space-md);
color:white;
box-sizing:border-box;

}

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:calc(20px + env(safe-area-inset-bottom, 0px));
right:calc(90px + env(safe-area-inset-right, 0px));
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:calc(20px + env(safe-area-inset-right, 0px));
bottom:calc(85px + env(safe-area-inset-bottom, 0px));

}

}



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

.nav-list a.nav-active{

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

}

.nav-list a.nav-link--staff{
font-size:0.9em;
opacity:0.88;
}

.nav-list a.nav-link--staff:hover{
opacity:1;
}

@media (max-width:768px){

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

color:var(--brand-primary);

}

body.nav-open .nav-list a.nav-link--staff{
font-size:0.92rem;
opacity:0.85;
border-top:1px solid rgba(255,255,255,0.15);
margin-top:var(--space-xs);
padding-top:var(--space-md);
}

}



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

.hero-section{

background:
linear-gradient(135deg,rgba(255,193,7,0.10) 0%,transparent 45%),
linear-gradient(180deg,#E3F2FD 0%,#ffffff 100%);

}

.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 (enhancements)
================================ */

@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;

}

}


/* ================= OVERLAY MUNDIALISTA ================= */

.worldcup-overlay{
position:fixed;
inset:0;
z-index:1200;
display:flex;
align-items:center;
justify-content:center;
padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));
opacity:1;
visibility:visible;
pointer-events:auto;
overflow:hidden;
transition:opacity .48s var(--ease-out),visibility .48s var(--ease-out);
animation:worldcup-overlay-in .65s var(--ease-out) both;
}

.worldcup-overlay.is-hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
animation:worldcup-overlay-out .45s var(--ease-out) both;
}

.worldcup-overlay[hidden]{
display:none;
}

body.worldcup-overlay-open{
overflow:hidden;
}

/* —— Ambiente estadio nocturno (CSS puro) —— */
.worldcup-overlay__ambience{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
background:#041a42;
}

.worldcup-overlay__sky{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 90% 55% at 50% -5%,rgba(255,225,0,.12) 0%,transparent 58%),
radial-gradient(ellipse 70% 45% at 15% 20%,rgba(0,174,239,.14) 0%,transparent 52%),
radial-gradient(ellipse 70% 45% at 85% 22%,rgba(0,174,239,.12) 0%,transparent 52%),
linear-gradient(180deg,#020818 0%,#0a2f6e 28%,var(--brand-secondary) 58%,#062654 100%);
}

.worldcup-overlay__spotlights{
position:absolute;
inset:0;
opacity:.9;
background:
radial-gradient(ellipse 32% 48% at 8% 0%,rgba(255,255,255,.2) 0%,transparent 70%),
radial-gradient(ellipse 32% 48% at 92% 0%,rgba(255,255,255,.2) 0%,transparent 70%),
radial-gradient(ellipse 22% 55% at 22% 0%,rgba(255,225,0,.08) 0%,transparent 72%),
radial-gradient(ellipse 22% 55% at 78% 0%,rgba(255,225,0,.08) 0%,transparent 72%),
radial-gradient(ellipse 42% 32% at 50% 6%,rgba(255,225,0,.14) 0%,transparent 74%),
conic-gradient(from 180deg at 50% -10%,transparent 0deg,rgba(255,255,255,.06) 18deg,transparent 36deg,transparent 324deg,rgba(255,255,255,.06) 342deg,transparent 360deg);
animation:worldcup-lights-pulse 5s ease-in-out infinite;
}

.worldcup-overlay__stands{
position:absolute;
left:0;
right:0;
top:32%;
height:34%;
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.03) 0 2px,
transparent 2px 14px
),
repeating-linear-gradient(
180deg,
rgba(0,0,0,.22) 0 6px,
rgba(255,255,255,.04) 6px 12px
),
linear-gradient(180deg,rgba(8,30,72,.15) 0%,rgba(4,18,48,.75) 100%);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
}

.worldcup-overlay__pitch{
position:absolute;
left:-14%;
right:-14%;
bottom:-8%;
height:46%;
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.04) 0 48px,
transparent 48px 96px
),
linear-gradient(180deg,#2d8a47 0%,#1a6b38 38%,#125a2c 68%,#0a3d1f 100%);
transform:perspective(520px) rotateX(52deg);
transform-origin:bottom center;
box-shadow:0 -18px 48px rgba(255,225,0,.1),0 -4px 24px rgba(255,255,255,.06);
}

.worldcup-overlay__pitch-lines{
position:absolute;
left:-14%;
right:-14%;
bottom:-8%;
height:46%;
pointer-events:none;
transform:perspective(520px) rotateX(52deg);
transform-origin:bottom center;
opacity:.28;
background:
linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.42) calc(50% - 1px),rgba(255,255,255,.42) calc(50% + 1px),transparent calc(50% + 1px)),
radial-gradient(ellipse 16% 22% at 50% 38%,transparent 66%,rgba(255,255,255,.35) 67%,rgba(255,255,255,.35) 68%,transparent 69%),
linear-gradient(0deg,transparent 18%,rgba(255,255,255,.22) 18%,rgba(255,255,255,.22) 19%,transparent 19%);
}

.worldcup-overlay__vignette{
position:absolute;
inset:0;
background:radial-gradient(ellipse 85% 78% at 50% 42%,transparent 35%,rgba(2,8,20,.72) 100%);
pointer-events:none;
}

.worldcup-overlay__tricolor{
position:absolute;
top:0;
left:0;
right:0;
height:6px;
background:linear-gradient(90deg,var(--brand-primary) 0%,var(--brand-primary) 33.33%,var(--brand-secondary) 33.33%,var(--brand-secondary) 66.66%,var(--danger) 66.66%,var(--danger) 100%);
z-index:4;
box-shadow:0 2px 14px rgba(255,225,0,.28);
}

/* —— Marco del panel + balones emoji nativos —— */
.worldcup-overlay__frame{
position:relative;
z-index:3;
width:min(100%,28rem);
max-height:calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
margin:auto;
overflow:visible;
}

.worldcup-native-ball{
position:absolute;
display:block;
line-height:1;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
pointer-events:none;
user-select:none;
-webkit-user-select:none;
z-index:1;
opacity:.96;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.32));
mix-blend-mode:normal;
}

.worldcup-native-ball--primary{
right:clamp(-36px,-2.5vw,-18px);
top:clamp(132px,16vw,188px);
font-size:clamp(76px,10vw,128px);
transform:rotate(12deg);
animation:worldcupNativeBallFloat 4.8s ease-in-out infinite;
}

.worldcup-native-ball--secondary{
left:clamp(-34px,-2.5vw,-16px);
bottom:clamp(132px,14vw,176px);
font-size:clamp(58px,8vw,96px);
opacity:.82;
transform:rotate(-15deg);
animation:worldcupNativeBallFloatSoft 5.6s ease-in-out infinite;
}

@keyframes worldcupNativeBallFloat{
0%,100%{transform:translateY(0) rotate(12deg)}
50%{transform:translateY(-8px) rotate(16deg)}
}

@keyframes worldcupNativeBallFloatSoft{
0%,100%{transform:translateY(0) rotate(-15deg)}
50%{transform:translateY(7px) rotate(-11deg)}
}

/* —— Confeti tricolor —— */
.worldcup-overlay__confetti{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:1;
}

.worldcup-overlay__confetti-piece{
position:absolute;
top:-6%;
width:.42rem;
height:.72rem;
border-radius:1px;
opacity:0;
animation:worldcup-confetti-fall 5.2s linear infinite;
}

.worldcup-overlay__confetti-piece--sm{
width:.32rem;
height:.58rem;
}

.worldcup-overlay__confetti-piece--lg{
width:.5rem;
height:.82rem;
}

.worldcup-overlay__confetti-piece--yellow{background:var(--brand-primary)}
.worldcup-overlay__confetti-piece--blue{background:var(--brand-accent)}
.worldcup-overlay__confetti-piece--red{background:var(--danger)}

.worldcup-overlay__confetti-piece:nth-child(1){left:6%;animation-delay:.2s;animation-duration:4.6s}
.worldcup-overlay__confetti-piece:nth-child(2){left:14%;animation-delay:1.1s;animation-duration:5.4s}
.worldcup-overlay__confetti-piece:nth-child(3){left:24%;animation-delay:.65s;animation-duration:4.9s}
.worldcup-overlay__confetti-piece:nth-child(4){left:4%;animation-delay:1.85s;animation-duration:5.8s}
.worldcup-overlay__confetti-piece:nth-child(5){left:72%;animation-delay:.45s;animation-duration:5.1s}
.worldcup-overlay__confetti-piece:nth-child(6){left:82%;animation-delay:1.35s;animation-duration:4.7s}
.worldcup-overlay__confetti-piece:nth-child(7){left:92%;animation-delay:.75s;animation-duration:5.5s}
.worldcup-overlay__confetti-piece:nth-child(8){left:96%;animation-delay:2.05s;animation-duration:5.9s}
.worldcup-overlay__confetti-piece:nth-child(9){left:68%;animation-delay:1.55s;animation-duration:4.8s}
.worldcup-overlay__confetti-piece:nth-child(10){left:18%;animation-delay:2.35s;animation-duration:5.3s}
.worldcup-overlay__confetti-piece:nth-child(11){left:88%;animation-delay:.35s;animation-duration:5.6s}
.worldcup-overlay__confetti-piece:nth-child(12){left:8%;animation-delay:1.95s;animation-duration:4.5s}

.worldcup-overlay__confetti-piece:nth-child(odd){
--confetti-peak:.32;
}

.worldcup-overlay__confetti-piece:nth-child(even){
--confetti-peak:.42;
}

.worldcup-overlay__confetti-piece:nth-child(3n){
--confetti-peak:.26;
}

/* —— Panel principal —— */
.worldcup-overlay__panel{
position:relative;
z-index:2;
width:100%;
max-height:inherit;
overflow:visible;
margin:0;
padding:clamp(1.35rem,4.5vw,2.15rem) clamp(1.15rem,4vw,1.85rem);
text-align:center;
color:var(--text-inverse);
border-radius:var(--radius-xl);
border:1px solid transparent;
background:transparent;
isolation:isolate;
animation:worldcup-panel-in .62s var(--ease-out) .08s both;
}

.worldcup-overlay__panel::before{
content:"";
position:absolute;
inset:0;
z-index:0;
border-radius:inherit;
border:1px solid rgba(255,255,255,.16);
background:linear-gradient(165deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 100%);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
box-shadow:
0 24px 56px rgba(0,0,0,.38),
0 0 0 1px rgba(255,225,0,.08) inset,
0 -2px 0 rgba(255,225,0,.35) inset;
pointer-events:none;
}

.worldcup-overlay__panel > :not(.worldcup-native-ball){
position:relative;
z-index:2;
}

.worldcup-overlay.is-hidden .worldcup-overlay__panel{
animation:worldcup-panel-out .42s var(--ease-out) both;
}

.worldcup-overlay__close{
position:absolute;
top:max(.7rem,env(safe-area-inset-top));
right:max(.7rem,env(safe-area-inset-right));
width:2.85rem;
height:2.85rem;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:50%;
background:rgba(255,255,255,.14);
color:var(--text-inverse);
font-size:1.65rem;
line-height:1;
cursor:pointer;
transition:background .2s ease,transform .2s ease;
z-index:3;
}

.worldcup-overlay__close:hover,
.worldcup-overlay__close:focus-visible{
background:rgba(255,255,255,.24);
transform:scale(1.05);
outline:2px solid var(--brand-primary);
outline-offset:2px;
}

.worldcup-overlay__badge{
display:inline-block;
margin:0 0 .7rem;
padding:.35rem .75rem;
border-radius:var(--radius-full,999px);
font-size:clamp(.65rem,2.5vw,.76rem);
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
color:rgba(255,255,255,.92);
background:rgba(255,225,0,.14);
border:1px solid rgba(255,225,0,.35);
box-shadow:0 4px 16px rgba(255,225,0,.12);
}

.worldcup-overlay__logo-wrap{
position:relative;
width:fit-content;
margin:0 auto .6rem;
}

.worldcup-overlay__logo-glow{
position:absolute;
inset:-18%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,225,0,.32) 0%,transparent 68%);
animation:worldcup-lights-pulse 4s ease-in-out infinite;
pointer-events:none;
}

.worldcup-overlay__logo{
position:relative;
width:clamp(5rem,24vw,7rem);
height:auto;
display:block;
filter:drop-shadow(0 8px 20px rgba(0,0,0,.32));
}

.worldcup-overlay__title{
margin:0 0 .45rem;
font-size:clamp(1.75rem,6.5vw,2.35rem);
font-weight:800;
line-height:1.08;
letter-spacing:-.02em;
color:var(--brand-primary);
text-shadow:0 3px 18px rgba(0,0,0,.35),0 0 28px rgba(255,225,0,.22);
}

.worldcup-overlay__subtitle{
margin:0 0 .4rem;
font-size:clamp(.98rem,3.6vw,1.12rem);
font-weight:600;
line-height:1.3;
color:rgba(255,255,255,.98);
max-width:19rem;
margin-left:auto;
margin-right:auto;
}

.worldcup-overlay__microcopy{
margin:0 0 .95rem;
font-size:clamp(.8rem,3vw,.9rem);
line-height:1.35;
letter-spacing:.03em;
color:rgba(255,255,255,.72);
max-width:18rem;
margin-left:auto;
margin-right:auto;
}

.worldcup-overlay__actions{
display:flex;
flex-direction:column;
gap:.7rem;
}

.worldcup-overlay__btn{
display:flex;
align-items:center;
justify-content:center;
min-height:3.15rem;
padding:.9rem 1.15rem;
border-radius:var(--radius-lg);
font-family:var(--font-main);
font-size:clamp(.98rem,3.5vw,1.05rem);
font-weight:700;
line-height:1.2;
text-decoration:none;
cursor:pointer;
border:2px solid transparent;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.worldcup-overlay__btn--primary{
background:var(--brand-primary);
color:var(--cta-primary-text);
box-shadow:0 10px 26px rgba(255,225,0,.32);
}

.worldcup-overlay__btn--primary:hover,
.worldcup-overlay__btn--primary:focus-visible{
background:#FFD54F;
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(255,225,0,.4);
outline:none;
}

.worldcup-overlay__btn--whatsapp{
background:#25D366;
color:#fff;
box-shadow:0 10px 26px rgba(37,211,102,.3);
}

.worldcup-overlay__btn--whatsapp:hover,
.worldcup-overlay__btn--whatsapp:focus-visible{
background:#1ebe5a;
transform:translateY(-2px);
outline:2px solid rgba(255,255,255,.65);
outline-offset:2px;
}

@keyframes worldcup-overlay-in{
from{opacity:0}
to{opacity:1}
}

@keyframes worldcup-overlay-out{
from{opacity:1}
to{opacity:0}
}

@keyframes worldcup-panel-in{
from{
opacity:0;
transform:translateY(22px) scale(.96);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes worldcup-panel-out{
from{
opacity:1;
transform:translateY(0) scale(1);
}
to{
opacity:0;
transform:translateY(14px) scale(.97);
}
}

@keyframes worldcup-lights-pulse{
0%,100%{opacity:.78}
50%{opacity:1}
}

@keyframes worldcup-confetti-fall{
0%{transform:translateY(0) rotate(0deg);opacity:0}
12%{opacity:var(--confetti-peak,.38)}
100%{transform:translateY(108vh) rotate(260deg);opacity:0}
}

@media (max-width:480px){

.worldcup-overlay{
padding:0;
align-items:stretch;
}

.worldcup-overlay__frame{
width:100%;
max-height:none;
min-height:100dvh;
}

.worldcup-overlay__panel{
width:100%;
max-height:none;
min-height:100dvh;
border-radius:0;
border-left:none;
border-right:none;
display:flex;
flex-direction:column;
justify-content:center;
padding:max(1.2rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
}

.worldcup-overlay__panel::before{
border-radius:0;
border-left:none;
border-right:none;
box-shadow:none;
}

.worldcup-overlay__actions{
width:100%;
max-width:22rem;
margin:0 auto;
}

.worldcup-overlay__btn{
width:100%;
}

.worldcup-native-ball--primary{
font-size:82px;
right:-24px;
top:150px;
}

.worldcup-native-ball--secondary{
font-size:64px;
left:-22px;
bottom:138px;
opacity:.78;
}

.worldcup-overlay__pitch,
.worldcup-overlay__pitch-lines{
height:38%;
}

}

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

.worldcup-overlay,
.worldcup-overlay__panel,
.worldcup-native-ball--primary,
.worldcup-native-ball--secondary,
.worldcup-overlay__spotlights,
.worldcup-overlay__logo-glow,
.worldcup-overlay__confetti-piece{
animation:none!important;
transition:none!important;
}

.worldcup-native-ball--primary{
transform:rotate(12deg);
}

.worldcup-native-ball--secondary{
transform:rotate(-15deg);
}

.worldcup-overlay__confetti-piece{
opacity:.32;
}

}