@layer base {
html { scroll-behavior:smooth; }
body { font-family:'Gilroy',ui-sans-serif,system-ui,sans-serif; background:#080b10; color:#f8fafc; }
::selection { background:#e21b2d; color:#fff; }
}
@layer components {
.btl-shell { width:100%; max-width:1320px; margin:0 auto; padding-left:1rem; padding-right:1rem; }
.btl-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border-radius:.85rem; background:#e21b2d !important; color:#fff; font-weight:900; padding:.9rem 1.25rem; transition:.2s ease; box-shadow:0 12px 30px rgba(226,27,45,.22); }
.btl-btn-primary:hover { background:#ff2b3d; transform:translateY(-1px); box-shadow:0 16px 36px rgba(226,27,45,.3); }
.btl-btn-dark { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border-radius:.85rem; background:#f8fafc; color:#090c12; font-weight:900; padding:.9rem 1.25rem; transition:.2s ease; }
.btl-btn-dark:hover { background:#fff; transform:translateY(-1px); }
.btl-btn-soft { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border-radius:.85rem; background:#171c25; border:1px solid #29313d; color:#e5e7eb; font-weight:800; padding:.78rem 1rem; transition:.2s ease; }
.btl-btn-soft:hover { background:#202733; border-color:#3a4452; }
.btl-input { width:100%; border:1px solid #303845; background:#11161f; color:#f8fafc; border-radius:.85rem; padding:.85rem .95rem; outline:none; transition:.2s; }
.btl-input::placeholder { color:#64748b; }
.btl-input:focus { border-color:#e21b2d; box-shadow:0 0 0 4px rgba(226,27,45,.12); }
.btl-card { border:1px solid #202733; background:#10151d; border-radius:1.15rem; box-shadow:0 18px 50px rgba(0,0,0,.24); }
.btl-eyebrow { color:#ff4050; font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.btl-muted { color:#94a3b8; }
.btl-panel { background:#0d1219; border:1px solid #202733; }
.btl-divider { border-color:#202733; }
}
.btl-glass { background:rgba(10,14,20,.76); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.10); }
.btl-hero-grid { background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:32px 32px; }
.btl-shadow-red { box-shadow:0 28px 75px rgba(226,27,45,.17); }
.btl-scrollbar::-webkit-scrollbar { width:6px; }
.btl-scrollbar::-webkit-scrollbar-thumb { background:#374151; border-radius:99px; }
.btl-drawer { transform:translateX(100%); transition:transform .25s ease; }
.btl-drawer.is-open { transform:translateX(0); }
.btl-overlay { opacity:0; pointer-events:none; transition:opacity .25s ease; }
.btl-overlay.is-open { opacity:1; pointer-events:auto; }
.btl-mobile-menu { transform:translateY(-10px); opacity:0; pointer-events:none; transition:.2s ease; }
.btl-mobile-menu.is-open { transform:translateY(0); opacity:1; pointer-events:auto; }
.btl-sticky-buy { padding-bottom:env(safe-area-inset-bottom); }
.btl-filter-fab { box-shadow:0 18px 45px rgba(0,0,0,.45),0 10px 25px rgba(226,27,45,.22); }
.btl-tire-stage { background:radial-gradient(circle at 50% 42%,rgba(226,27,45,.14),transparent 34%),radial-gradient(circle at 50% 50%,#171d27 0,#0d1219 55%,#0a0e14 100%); }
.btl-tire-stage::after { content:''; position:absolute; left:10%; right:10%; bottom:7%; height:1px; background:linear-gradient(90deg,transparent,#3b4654,transparent); }
.btl-spec { background:#0c1118; border:1px solid #202733; }
.btl-recommend-card { background:linear-gradient(145deg,#111720,#0d1219); border:1px solid #252d39; }
.btl-recommend-card:hover { border-color:#4a5565; transform:translateY(-2px); }
.btl-stock-low { background:rgba(245,158,11,.10); color:#fbbf24; border:1px solid rgba(245,158,11,.22); }
.btl-stock-ok { background:rgba(16,185,129,.10); color:#34d399; border:1px solid rgba(16,185,129,.22); }
.d-none{display:none!important}.is-invalid{border-color:#ef4444!important;box-shadow:0 0 0 4px rgba(239,68,68,.1)!important}
@media (min-width:1024px){ .btl-shell{padding-left:2rem;padding-right:2rem;} }
@media (max-width:640px){ .btl-shell{padding-left:.875rem;padding-right:.875rem;} }
/* --------------------------------------------------------------------------
Busca tu Llanta · Mobile app layer
The desktop layout remains intact; these rules intentionally change the
interaction model below 768px.
-------------------------------------------------------------------------- */
.btl-mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:75;display:grid;grid-template-columns:repeat(5,1fr);height:4.25rem;padding:0 .35rem env(safe-area-inset-bottom);background:rgba(9,12,18,.96);border-top:1px solid rgba(255,255,255,.10);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 -12px 35px rgba(0,0,0,.28)}
.btl-mobile-nav>a,.btl-mobile-nav>button{min-width:0;border:0;background:transparent;color:#64748b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font:inherit;cursor:pointer;text-decoration:none}
.btl-mobile-nav i{font-size:1.18rem;line-height:1}
.btl-mobile-nav span:not(.btl-mobile-nav-icon){font-size:.62rem;font-weight:900;line-height:1.1}
.btl-mobile-nav .is-active,.btl-mobile-nav>a:active,.btl-mobile-nav>button:active{color:#fff}
.btl-mobile-nav .is-active i{color:#e21b2d}
.btl-mobile-nav-icon{position:relative;display:flex;align-items:center;justify-content:center}
.btl-mobile-nav-icon b{position:absolute;top:-.45rem;right:-.7rem;min-width:1rem;height:1rem;padding:0 .2rem;border-radius:999px;background:#e21b2d;color:#fff;font-size:.58rem;line-height:1rem;text-align:center}
@media (max-width:767px){
html{scroll-padding-top:4.25rem}
body{padding-bottom:4.25rem}
body.btl-page-detail{padding-bottom:0}
.btl-shell{padding-left:.75rem;padding-right:.75rem}
.btl-catalog-hero p{max-width:34rem}
.btl-catalog-hero{background:linear-gradient(180deg,#0b0f15 0%,#080b10 100%)}
#paginationTop{position:sticky;top:4rem;z-index:35;padding-top:.25rem;padding-bottom:.25rem;background:#080b10}
#paginationTop>div{border-radius:1rem;box-shadow:0 10px 25px rgba(0,0,0,.18)}
#paginationBottom{margin-top:1rem!important}
#resultQuery{gap:.55rem}
.btl-product-card{border-radius:1rem;box-shadow:0 10px 28px rgba(0,0,0,.20)}
.btl-product-card>a{padding:.55rem!important}
.btl-product-card>a>div{height:8.5rem!important}
.btl-product-card .btl-stock-low,.btl-product-card .btl-stock-ok{font-size:.48rem;padding:.3rem .4rem}
.btl-product-card>div{padding:.7rem!important}
.btl-product-card h3{min-height:2.45rem!important;font-size:.75rem!important;line-height:1rem!important}
.btl-product-card .mt-3{margin-top:.45rem!important}
.btl-product-card .mt-4{margin-top:.65rem!important}
.btl-product-card strong{font-size:1rem!important}
.btl-product-card button,.btl-product-card a[aria-label]{width:2.5rem!important;height:2.5rem!important}
.btl-product-card .rounded-lg{font-size:.52rem;padding:.3rem .4rem}
.btl-filter-fab{bottom:calc(5.25rem + env(safe-area-inset-bottom));right:.75rem;padding:.75rem 1rem;box-shadow:0 14px 35px rgba(0,0,0,.4),0 8px 20px rgba(226,27,45,.22)}
#btl-filter-drawer{top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;height:auto;max-height:82dvh;border-right:0;border-top:1px solid rgba(255,255,255,.10);border-radius:1.5rem 1.5rem 0 0;transform:translateY(105%);transition:transform .25s ease}
#btl-filter-drawer.is-open{transform:translateY(0)}
#btl-filter-drawer:before{content:'';display:block;width:2.5rem;height:.25rem;border-radius:999px;background:#374151;margin:.55rem auto 0}
#btl-filter-drawer .btl-scrollbar{max-height:none;overflow:visible}
#btl-filter-drawer .border-t{padding-top:.8rem;padding-bottom:.8rem}
#btl-filter-drawer .btl-eyebrow{margin-top:.15rem}
#btl-filter-drawer .flex.cursor-pointer{min-height:2.9rem;padding:.65rem .5rem}
.btl-page-detail .btl-tire-stage{min-height:15rem!important;border-radius:1.35rem;padding:1rem}
.btl-page-detail .btl-tire-stage img{max-height:15rem!important}
.btl-page-detail .btl-tire-stage .h-56{width:12rem;height:12rem}
.btl-page-detail .btl-sticky-buy{bottom:0;padding:.65rem .75rem calc(.65rem + env(safe-area-inset-bottom));background:rgba(9,12,18,.98)}
.btl-page-detail .btl-sticky-buy .btl-shell{padding-left:0;padding-right:0}
.btl-page-detail .btl-sticky-buy .btl-btn-primary{min-height:2.85rem;padding:.7rem 1rem;font-size:.82rem}
.btl-page-detail .btl-sticky-buy+*{margin-bottom:0}
.btl-page-detail .btl-spec{padding:.7rem}
.btl-page-detail .btl-spec p:last-child{font-size:.82rem}
.btl-page-detail .btl-recommend-card{padding:.65rem}
.btl-page-detail .btl-recommend-card>a{gap:.7rem}
.btl-page-detail .btl-recommend-card>a>div:first-child{width:5rem;height:5rem}
.btl-page-detail .btl-recommend-card h3{font-size:.78rem;line-height:1rem}
.btl-page-detail .btl-recommend-card p{font-size:.58rem}
.btl-page-detail .btl-recommend-card strong{font-size:.9rem}
.btl-page-detail .btl-recommend-card .rounded-full{font-size:.45rem}
/* Home: make the search tool the first useful action on a phone. */
body.btl-page-home main>section:first-child .btl-shell{gap:1.25rem;padding-top:1rem;padding-bottom:1.5rem}
body.btl-page-home main>section:first-child h1{font-size:2.25rem}
body.btl-page-home main>section:first-child .btl-eyebrow{font-size:.62rem}
body.btl-page-home main>section:first-child .btl-glass{border-radius:1.35rem}
body.btl-page-home main>section:first-child .btl-glass h2{font-size:1.2rem}
body.btl-page-home main>section:first-child .btl-glass .btl-btn-primary{min-height:3.15rem}
footer{padding-bottom:1rem}
}
@media (min-width:768px){
.btl-mobile-nav{display:none}
}
/* --------------------------------------------------------------------------
Home product carousel · swipe-first interaction
One reusable rail: touch scroll on mobile, 4 cards visible on desktop.
JS duplicates the set so the rail can loop without an abrupt end.
-------------------------------------------------------------------------- */
.btl-home-carousel{position:relative}
.btl-carousel-viewport{overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;outline:none;padding:.15rem .05rem .75rem}
.btl-carousel-viewport::-webkit-scrollbar{display:none}
.btl-carousel-track{display:flex;gap:1.25rem;width:max-content}
.btl-carousel-card{flex:0 0 calc((min(100vw - 4rem, 1260px) - 3.75rem)/4);scroll-snap-align:start;min-width:0}
.btl-carousel-arrow{position:absolute;top:42%;z-index:5;width:2.8rem;height:2.8rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(9,12,18,.92);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(0,0,0,.28);transition:transform .2s ease,background .2s ease,opacity .2s ease}
.btl-carousel-arrow:hover{background:#e21b2d;transform:scale(1.05)}
.btl-carousel-arrow:disabled{opacity:.35;cursor:not-allowed}
.btl-carousel-prev{left:-1.35rem}.btl-carousel-next{right:-1.35rem}
.btl-carousel-dots{display:flex;justify-content:center;gap:.35rem;margin-top:.25rem}
.btl-carousel-dots span{width:.35rem;height:.35rem;border-radius:999px;background:#334155;transition:width .2s ease,background .2s ease}
.btl-carousel-dots span.is-active{width:1.2rem;background:#e21b2d}
@media (max-width:1023px){
.btl-carousel-card{flex-basis:calc((min(100vw - 2.5rem, 900px) - 1.25rem)/2)}
.btl-carousel-prev{left:-.65rem}.btl-carousel-next{right:-.65rem}
}
@media (max-width:767px){
.btl-carousel-viewport{margin-right:-.75rem;padding-right:.75rem;padding-bottom:.5rem;scroll-padding-left:.05rem}
.btl-carousel-track{gap:.7rem}
.btl-carousel-card{flex-basis:calc((100vw - 2.15rem)/1.15)}
.btl-carousel-arrow{display:none}
.btl-carousel-dots{margin-top:.35rem}
.btl-carousel-card>a{padding:.8rem!important}
.btl-carousel-card>a>img{height:11rem!important}
.btl-carousel-card>div{padding:.8rem!important}
.btl-carousel-card h3{font-size:.82rem;line-height:1.15rem}
.btl-carousel-card strong{font-size:1.05rem}
}