@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Geist:wght@300;400;500;600;700&display=swap');

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

html{
scroll-behavior:smooth;
}

body{
background:#0b0b0b;
color:white;
font-family:'Geist','Geist Sans',sans-serif;
}

/* ══════════════════
   PAGE LOADER
══════════════════ */

#pageLoader{
position:fixed;
inset:0;
z-index:9999;
background:#0b0b0b;
display:flex;
align-items:center;
justify-content:center;
transition:opacity 0.7s ease, visibility 0.7s ease;
}

#pageLoader.hide{
opacity:0;
visibility:hidden;
}

.loader-logo-wrap{
position:relative;
width:300px;
}

/* Logo base — mismo tamaño, tenue */
.loader-logo-base{
display:block;
width:300px;
height:auto;
opacity:0.1;
filter:grayscale(1) brightness(3);
}

/* Clip lateral: empieza en width:0 y crece hacia la derecha */
.loader-fill-clip{
position:absolute;
top:0;
left:0;
width:0%;
height:100%;
overflow:hidden;
transition:width 0.08s linear;
}

/* Logo full color — mismo ancho fijo que el wrap para que quede alineado */
.loader-logo-green{
display:block;
width:300px;
height:auto;
}

/* ANIMATIONS */

@keyframes fade-in-up{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}

.anim-1{animation:fade-in-up 0.6s ease-out forwards;}
.anim-2{opacity:0;animation:fade-in-up 0.6s ease-out 0.2s forwards;}
.anim-3{opacity:0;animation:fade-in-up 0.6s ease-out 0.4s forwards;}
.anim-4{opacity:0;animation:fade-in-up 0.6s ease-out 0.6s forwards;}

/* NAVBAR */

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 60px;
background:rgba(11,11,11,0.85);
backdrop-filter:blur(12px);
z-index:10;
border-bottom:1px solid #1a1a1a;
}

.logo-img{
height:38px;
}

.hero-logo{
height:100px;
display:block;
margin:0 auto 16px;
}

.nav-links{
display:flex;
gap:28px;
list-style:none;
font-size:11px;
letter-spacing:2px;
font-weight:600;
}

.nav-links a{
color:#9b9b9b;
text-decoration:none;
transition:color 0.2s;
}

.nav-links a:hover{
color:#00ff9c;
}

.quote-btn{
text-decoration:none;
display:inline-block;
background:#00ff9c;
border:none;
padding:10px 22px;
border-radius:3px;
font-weight:700;
cursor:pointer;
color:#000;
font-size:11px;
letter-spacing:2px;
font-family:'Geist',sans-serif;
box-shadow:0 0 14px rgba(0,255,156,0.5),0 0 30px rgba(0,255,156,0.2);
transition:box-shadow 0.2s,transform 0.2s;
}

.quote-btn:hover{
box-shadow:0 0 22px rgba(0,255,156,0.75),0 0 50px rgba(0,255,156,0.35);
transform:translateY(-1px);
}

/* HERO */

.hero{
height:100vh;
background-image:url("../images/hero.png");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.hero::before{
content:'';
position:absolute;
inset:0;
background:rgba(0,0,0,0.58);
z-index:1;
}

.hero::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:140px;
background:linear-gradient(to bottom,transparent,#0b0b0b);
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
max-width:820px;
padding:0 20px;
}

.hero h1{
font-family:'Montserrat',sans-serif;
font-size:76px;
line-height:1;
letter-spacing:-1px;
}

.hero span{
color:#00ff9c;
text-shadow:0 0 10px rgba(0,255,156,0.6),0 0 40px rgba(0,255,156,0.3);
}

.hero p{
margin-top:18px;
color:#9b9b9b;
font-size:16px;
font-weight:400;
line-height:1.6;
}

.catalog-btn{
display:inline-block;
margin-top:28px;
background:#00ff9c;
border:none;
padding:13px 32px;
border-radius:3px;
font-weight:700;
cursor:pointer;
color:#000;
text-decoration:none;
font-size:11px;
letter-spacing:3px;
font-family:'Geist',sans-serif;
box-shadow:0 0 18px rgba(0,255,156,0.5),0 0 40px rgba(0,255,156,0.2);
transition:box-shadow 0.2s,transform 0.2s;
}

.catalog-btn:hover{
box-shadow:0 0 28px rgba(0,255,156,0.75),0 0 60px rgba(0,255,156,0.35);
transform:translateY(-2px);
}

/* CATALOG */

.catalog{
padding:110px 80px 80px;
text-align:center;
}

.catalog h4{
color:#00ff9c;
letter-spacing:5px;
font-size:11px;
font-weight:600;
text-transform:uppercase;
}

.catalog h2{
font-family:'Montserrat',sans-serif;
font-size:50px;
margin-top:8px;
letter-spacing:-0.5px;
}

.filters{
margin-top:36px;
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
}

.filters button{
background:transparent;
border:1px solid #252525;
color:#9b9b9b;
padding:8px 18px;
border-radius:3px;
cursor:pointer;
font-size:11px;
letter-spacing:2px;
font-family:'Geist',sans-serif;
font-weight:600;
transition:border-color 0.2s,color 0.2s;
}

.filters button:hover{
border-color:#00ff9c;
color:#00ff9c;
}

.filters .active{
background:#00ff9c;
color:#000;
border-color:transparent;
box-shadow:0 0 12px rgba(0,255,156,0.5),0 0 24px rgba(0,255,156,0.2);
}

/* PRODUCTS */

.products{
margin-top:48px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

.card{
background:#1a1a1a;
border:1px solid #2a2a2a;
border-radius:8px;
overflow:hidden;
position:relative;
transition:transform 0.3s,box-shadow 0.3s;
cursor:pointer;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 0 28px rgba(0,255,156,0.22),0 0 60px rgba(0,255,156,0.08),0 8px 32px rgba(0,0,0,0.6);
}

.card-img-wrap{
aspect-ratio:1/1;
overflow:hidden;
background:#0d0d0d;
position:relative;
}

.card-img-wrap img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.5s;
}

.card:hover .card-img-wrap img{
transform:scale(1.06);
}

/* ── BADGE NUEVO ── */
.card-new-badge{
position:absolute;
top:10px;
left:10px;
background:#00ff9c;
color:#000;
font-family:'Montserrat',sans-serif;
font-size:9px;
font-weight:800;
letter-spacing:2px;
padding:4px 9px;
border-radius:4px;
z-index:5;
}

/* ── SIN STOCK ── */
.sin-stock-card-overlay{
display:none;
position:absolute;
inset:0;
background:rgba(0,0,0,0.65);
color:#fff;
font-family:'Montserrat',sans-serif;
font-size:22px;
letter-spacing:4px;
align-items:center;
justify-content:center;
}

.card.sin-stock .sin-stock-card-overlay{
display:flex;
}

.card.sin-stock{
opacity:0.6;
}

.card.sin-stock .ver-mas{
pointer-events:none;
opacity:0.4;
}

.modal-sin-stock-overlay{
display:none;
position:absolute;
inset:0;
background:rgba(0,0,0,0.72);
color:#fff;
font-family:'Montserrat',sans-serif;
font-size:32px;
letter-spacing:6px;
align-items:center;
justify-content:center;
z-index:10;
}


.card-info{
padding:14px 16px 10px;
text-align:left;
}

.type{
color:#9b9b9b;
font-size:16px;
letter-spacing:3px;
font-weight:600;
text-transform:uppercase;
margin-bottom:4px;
}

.card-info h3{
font-family:'Montserrat',sans-serif;
font-size:22px;
margin-top:2px;
letter-spacing:-0.3px;
line-height:1.1;
}

.specs{
color:#9b9b9b;
font-size:16px;
margin-top:3px;
}


.card-sizes{
display:flex;
flex-wrap:wrap;
gap:5px;
padding:10px 16px;
border-top:1px solid #1e1e1e;
}

.size-chip{
font-size:9px;
font-family:'Geist',sans-serif;
font-weight:700;
letter-spacing:1px;
color:#9b9b9b;
border:1px solid #252525;
border-radius:2px;
padding:3px 7px;
}

.card-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 16px 14px;
border-top:1px solid #1e1e1e;
}

.price{
font-family:'Montserrat',sans-serif;
font-size:22px;
color:#00ff9c;
text-shadow:0 0 8px rgba(0,255,156,0.35);
}

.ver-mas{
font-size:10px;
letter-spacing:2px;
color:#9b9b9b;
background:none;
border:none;
cursor:pointer;
font-family:'Geist',sans-serif;
font-weight:600;
transition:color 0.2s;
}

.ver-mas:hover{
color:#00ff9c;
}

/* CATEGORY SECTIONS */

.cat-section{
padding:100px 80px;
text-align:center;
border-top:1px solid #1a1a1a;
}

.cat-section-inner{
max-width:500px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}

.cat-section h4{
color:#00ff9c;
letter-spacing:5px;
font-size:11px;
font-weight:600;
text-transform:uppercase;
}

.cat-section h2{
font-family:'Montserrat',sans-serif;
font-size:50px;
letter-spacing:-0.5px;
}

.cat-section p{
color:#9b9b9b;
font-size:14px;
line-height:1.6;
}

.soon-badge{
margin-top:8px;
display:inline-block;
border:1px solid #2a2a2a;
color:#9b9b9b;
font-size:10px;
letter-spacing:3px;
font-weight:600;
padding:8px 20px;
border-radius:3px;
}

/* FOOTER */

footer{
border-top:1px solid #1a1a1a;
padding:48px 80px;
display:flex;
align-items:center;
justify-content:space-between;
}

.footer-logo{
height:30px;
}

.footer-copy{
color:#9b9b9b;
font-size:12px;
}

.footer-links{
display:flex;
gap:24px;
}

.footer-links a{
color:#9b9b9b;
font-size:11px;
text-decoration:none;
letter-spacing:2px;
font-weight:600;
transition:color 0.2s;
}

.footer-links a:hover{
color:#00ff9c;
}

/* MODAL */

.modal-overlay{
position:fixed;
inset:0;
z-index:200;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,0.82);
backdrop-filter:blur(8px);
opacity:0;
pointer-events:none;
transition:opacity 0.25s;
}

.modal-overlay.open{
opacity:1;
pointer-events:all;
}

.modal{
background:#111;
border:1px solid #222;
border-radius:10px;
overflow:hidden;
width:100%;
max-width:1100px;
max-height:92vh;
display:flex;
position:relative;
transform:translateY(24px);
transition:transform 0.25s;
}

.modal-overlay.open .modal{
transform:translateY(0);
}

.modal-close{
position:absolute;
top:12px;
right:12px;
z-index:10;
width:32px;
height:32px;
background:rgba(0,0,0,0.65);
border:1px solid #2a2a2a;
color:#9b9b9b;
font-size:15px;
cursor:pointer;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:color 0.2s,border-color 0.2s;
}

.modal-close:hover{
color:white;
border-color:#9b9b9b;
}

.modal-share{
position:absolute;
top:12px;
left:12px;
z-index:10;
width:32px;
height:32px;
background:rgba(0,0,0,0.65);
border:1px solid #2a2a2a;
color:#9b9b9b;
cursor:pointer;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:color 0.2s,border-color 0.2s;
}

.modal-share:hover{
color:white;
border-color:#9b9b9b;
}

.modal-share-toast{
position:absolute;
top:52px;
left:12px;
z-index:10;
background:#00ff9c;
color:#000;
font-family:'Montserrat',sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:1.5px;
padding:5px 10px;
border-radius:4px;
opacity:0;
pointer-events:none;
transition:opacity 0.2s;
white-space:nowrap;
}

.modal-share-toast.show{
opacity:1;
}

/* CAROUSEL */

.modal-left{
width:52%;
flex-shrink:0;
background:#0d0d0d;
display:flex;
flex-direction:column;
}

.modal-carousel{
flex:1;
aspect-ratio:1/1;
position:relative;
overflow:hidden;
}

.carousel-layer{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 0.25s ease;
}
.carousel-layer.active-layer{
opacity:1;
}

.carousel-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.55);
border:1px solid #333;
color:#9b9b9b;
width:34px;
height:34px;
border-radius:50%;
cursor:pointer;
font-size:20px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.2s,border-color 0.2s,color 0.2s;
z-index:2;
}

.carousel-btn:hover{
background:rgba(0,255,156,0.12);
border-color:#00ff9c;
color:#00ff9c;
}

.carousel-prev{left:10px;}
.carousel-next{right:10px;}

.carousel-dots{
display:flex;
justify-content:center;
gap:7px;
padding:14px 0;
background:#0d0d0d;
}

.carousel-dot{
width:6px;
height:6px;
border-radius:50%;
background:#2a2a2a;
cursor:pointer;
transition:background 0.2s,transform 0.2s;
}

.carousel-dot.active{
background:#00ff9c;
transform:scale(1.3);
}

/* MODAL CONTENT */

.modal-right{
flex:1;
padding:36px 32px 28px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:18px;
}

.modal-brand{
color:#9b9b9b;
font-size:18px;
letter-spacing:3px;
font-weight:600;
text-transform:uppercase;
margin-bottom:-16px;
}

.modal-name{
font-family:'Montserrat',sans-serif;
font-size:22px;
letter-spacing:-0.3px;
line-height:1.1;
}

.modal-price{
font-family:'Montserrat',sans-serif;
font-size:36px;
color:#00ff9c;
text-shadow:0 0 10px rgba(0,255,156,0.45);
}

.modal-specs-info{
color:#9b9b9b;
font-size:16px;
padding-bottom:6px;
border-bottom:1px solid #2a2a2a;
}

.modal-section{
display:flex;
flex-direction:column;
gap:8px;
}

.modal-label{
font-size:10px;
letter-spacing:3px;
font-weight:600;
color:#9b9b9b;
text-transform:uppercase;
}

.modal-options{
display:flex;
flex-wrap:wrap;
gap:7px;
}

.opt-btn{
padding:7px 14px;
border:1px solid #333;
background:transparent;
color:#9b9b9b;
font-size:11px;
letter-spacing:1px;
font-family:'Geist',sans-serif;
font-weight:600;
border-radius:3px;
cursor:pointer;
transition:border-color 0.2s,color 0.2s,background 0.2s;
}

.opt-btn:hover{
border-color:#00ff9c;
color:#00ff9c;
}

.opt-btn.selected{
background:#00ff9c;
color:#000;
border-color:#00ff9c;
}

.dually-opt-wrap .dually-icon{
opacity:0.5;
transition:opacity 0.2s;
}
.dually-opt-wrap .dually-icon .tire-rect{
fill:#2a2a2a;
stroke:#888;
transition:fill 0.2s, stroke 0.2s;
}
.dually-opt-wrap .dually-icon svg line{
transition:stroke 0.2s;
}
.dually-opt-wrap.selected .dually-icon{
opacity:1;
}
.dually-opt-wrap.selected .dually-icon .tire-rect{
fill:#2a2a2a;
stroke:#00ff9c;
}
.dually-opt-wrap.selected .dually-icon svg line{
stroke:#00cc7a;
}

.modal-btns{
display:flex;
gap:10px;
}

.add-cart-btn{
flex:1;
padding:13px;
background:#00ff9c;
border:none;
border-radius:4px;
color:#000;
font-family:'Geist',sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:2px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 14px rgba(0,255,156,0.4);
transition:opacity 0.2s,transform 0.2s;
}

.add-cart-btn:hover:not(:disabled){
opacity:0.88;
transform:translateY(-1px);
}

.add-cart-btn:disabled{
opacity:0.3;
cursor:not-allowed;
box-shadow:none;
}

.whatsapp-btn{
flex:1;
padding:13px;
background:transparent;
border:1px solid #333;
border-radius:3px;
color:#9b9b9b;
font-family:'Geist',sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:2px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
transition:border-color 0.2s,color 0.2s,background 0.2s;
}

.whatsapp-btn:hover:not(:disabled){
border-color:#00ff9c;
color:#00ff9c;
}

.whatsapp-btn:disabled{
opacity:0.3;
cursor:not-allowed;
}

.cart-float{
position:fixed;
bottom:28px;
right:28px;
z-index:300;
display:none;
align-items:center;
gap:9px;
background:#25D366;
color:white;
border:none;
border-radius:50px;
padding:14px 22px;
font-family:'Geist',sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:2px;
cursor:pointer;
box-shadow:0 4px 24px rgba(37,211,102,0.45);
transition:transform 0.2s,box-shadow 0.2s;
}

.cart-float:hover{
transform:translateY(-2px);
box-shadow:0 6px 32px rgba(37,211,102,0.6);
}

.cart-badge{
background:white;
color:#25D366;
font-size:11px;
font-weight:800;
width:20px;
height:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

.whatsapp-hint{
font-size:13px;
text-align:center;
color:#9b9b9b;
letter-spacing:1px;
margin-top:auto;
margin-bottom:4px;
}

/* CART PANEL */

.cart-overlay{
position:fixed;
inset:0;
z-index:400;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(6px);
opacity:0;
pointer-events:none;
transition:opacity 0.25s;
}

.cart-overlay.open{
opacity:1;
pointer-events:all;
}

.cart-panel{
position:absolute;
top:0;
right:0;
height:100%;
width:380px;
max-width:100vw;
background:#111;
border-left:1px solid #222;
display:flex;
flex-direction:column;
transform:translateX(100%);
transition:transform 0.3s ease;
}

.cart-overlay.open .cart-panel{
transform:translateX(0);
}

.cart-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 24px 20px;
border-bottom:1px solid #1e1e1e;
}

.cart-title{
font-family:'Montserrat',sans-serif;
font-size:26px;
letter-spacing:2px;
}

.cart-close{
background:rgba(0,0,0,0.5);
border:1px solid #2a2a2a;
color:#9b9b9b;
width:32px;
height:32px;
border-radius:50%;
font-size:14px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:color 0.2s,border-color 0.2s;
}

.cart-close:hover{
color:white;
border-color:#9b9b9b;
}

.cart-items{
flex:1;
overflow-y:auto;
padding:16px 24px;
display:flex;
flex-direction:column;
gap:12px;
}

.cart-empty{
flex:1;
display:none;
align-items:center;
justify-content:center;
color:#9b9b9b;
font-size:13px;
letter-spacing:2px;
padding:40px 24px;
text-align:center;
}

.cart-item{
background:#1a1a1a;
border:1px solid #2a2a2a;
border-radius:8px;
padding:14px 16px;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}

.cart-item-thumb{
width:58px;
height:58px;
object-fit:contain;
border-radius:6px;
background:#0d0d0d;
flex-shrink:0;
}

.cart-item-info{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
}

.cart-item-name{
font-family:'Montserrat',sans-serif;
font-size:17px;
letter-spacing:1px;
}

.cart-item-details{
font-size:12px;
color:#9b9b9b;
letter-spacing:1px;
}

.cart-item-price{
font-family:'Montserrat',sans-serif;
font-size:18px;
color:#00ff9c;
text-shadow:0 0 8px rgba(0,255,156,0.3);
}

.cart-item-remove{
background:none;
border:1px solid #2a2a2a;
color:#fff;
width:26px;
height:26px;
border-radius:50%;
font-size:11px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:color 0.2s,border-color 0.2s;
}

.cart-item-remove:hover{
color:white;
border-color:#9b9b9b;
}

.cart-total{
display:none;
justify-content:space-between;
align-items:center;
padding:14px 24px;
border-top:1px solid #1e1e1e;
}

.cart-total-label{
font-family:'Geist',sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:3px;
color:#9b9b9b;
}

.cart-total-value{
font-family:'Montserrat',sans-serif;
font-size:24px;
color:#00ff9c;
text-shadow:0 0 10px rgba(0,255,156,0.35);
}

.cart-footer{
padding:16px 24px 20px;
}

.cart-wa-btn{
width:100%;
padding:14px;
background:#25D366;
border:none;
border-radius:4px;
color:white;
font-family:'Geist',sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:2px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
transition:opacity 0.2s,transform 0.2s;
}

.cart-wa-btn:hover:not(:disabled){
opacity:0.88;
transform:translateY(-1px);
}

.cart-wa-btn:disabled{
opacity:0.3;
cursor:not-allowed;
}

/* ═══════════════════════════════
   RESPONSIVE — TABLET ≤ 1024px
═══════════════════════════════ */
@media(max-width:1024px){

.navbar{
padding:16px 32px;
}

.hero h1{
font-size:60px;
}

.catalog{
padding:90px 40px 60px;
}

.products{
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.modal{
max-width:900px;
}

.modal-left{
width:46%;
}

.cat-section{
padding:70px 40px;
}

footer{
padding:36px 40px;
}

}

/* ═══════════════════════════════
   RESPONSIVE — MOBILE ≤ 768px
═══════════════════════════════ */
@media(max-width:768px){

.navbar{
padding:14px 20px;
}

.nav-links{
display:none;
}

.hero h1{
font-size:44px;
}

.hero p{
font-size:14px;
}

.hero-logo{
height:72px;
}

.catalog{
padding:80px 16px 50px;
}

.catalog h2{
font-size:38px;
}

.filters{
gap:8px;
}

.filters button{
padding:7px 13px;
font-size:10px;
}

.products{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

/* Modal apilado verticalmente */
.modal-overlay{
align-items:flex-start;
padding:72px 14px 24px;
}

.modal{
flex-direction:column;
max-width:98vw;
max-height:calc(100vh - 96px);
overflow:hidden;
}

.modal-left{
width:100%;
flex-shrink:0;
transition:max-height 0.35s ease;
max-height:380px;
overflow:hidden;
position:relative;
}

.modal-left.compact{
max-height:150px;
cursor:pointer;
}

.modal-left.compact::after{
content:'▼ toca para ampliar';
position:absolute;
bottom:6px;
left:50%;
transform:translateX(-50%);
font-size:10px;
letter-spacing:1.5px;
color:rgba(255,255,255,0.55);
pointer-events:none;
white-space:nowrap;
}

.modal-carousel{
aspect-ratio:4/3;
}

.modal-right{
padding:22px 20px 20px;
gap:14px;
overflow-y:auto;
flex:1;
min-height:0;
}

.modal-brand{
font-size:14px;
margin-bottom:-10px;
}

.modal-name{
font-size:20px;
}

.modal-price{
font-size:28px;
}

/* Cart panel ancho completo */
.cart-panel{
width:100vw;
}

/* Botón flotante más compacto */
.cart-float{
bottom:16px;
right:16px;
padding:12px 16px;
font-size:10px;
gap:7px;
}

.cat-section{
padding:60px 20px;
}

.cat-section h2{
font-size:38px;
}

footer{
flex-direction:column;
gap:20px;
text-align:center;
padding:36px 20px;
}

.footer-links{
justify-content:center;
gap:20px;
}

}

/* ═══════════════════════════════
   RESPONSIVE — MÓVIL ≤ 480px
═══════════════════════════════ */
@media(max-width:480px){

.hero h1{
font-size:34px;
}

.hero-logo{
height:56px;
}

.logo-img{
height:28px;
}

.quote-btn{
padding:8px 14px;
font-size:10px;
}

.products{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.card-info h3{
font-size:18px;
}

.price{
font-size:18px;
}

.modal-carousel{
aspect-ratio:1/1;
}

.modal-right{
padding:16px 14px 16px;
gap:12px;
}

.modal-name{
font-size:18px;
}

.modal-price{
font-size:24px;
}

.add-cart-btn,
.whatsapp-btn{
font-size:10px;
padding:11px 8px;
}

.cart-item-thumb{
width:46px;
height:46px;
}

}