:root{
  --amarillo:#FFD400;
  --negro:#0B0B0B;
  --blanco:#FFFFFF;
  --gris:#F4F4F4;
  --gris-2:#777;
  --borde:#E7E7E7;
  --max:1240px;
}


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

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--negro);
  background:var(--blanco);
}

a{
  color:inherit;
  text-decoration:none;
}

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

button,
input,
select{
  font:inherit;
}


/* =========================================
   BARRA SUPERIOR
========================================= */

.topbar{
  background:var(--amarillo);
  color:var(--negro);

  text-align:center;

  padding:9px 16px;

  font-size:13px;
  font-weight:700;
}


/* =========================================
   CONTENEDOR GENERAL
========================================= */

.container{
  width:min(calc(100% - 40px), var(--max));
  margin-left:auto;
  margin-right:auto;
}


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

.site-header{
  position:sticky;
  top:0;

  z-index:50;

  background:var(--negro);
  color:var(--blanco);

  border-bottom:1px solid #242424;
}

.header-inner{
  width:min(calc(100% - 40px), var(--max));

  margin-left:auto;
  margin-right:auto;

  min-height:96px;

  display:flex;
  align-items:center;

  gap:28px;
}


/* =========================================
   LOGO
========================================= */

.logo{
  width:210px;
  height:82px;

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

  flex-shrink:0;
}

.logo img{
  width:100%;
  height:100%;

  object-fit:contain;
  object-position:left center;
}


/* =========================================
   NAVEGACIÓN
========================================= */

.nav{
  display:flex;
  align-items:center;

  gap:24px;

  margin-left:auto;
}

.nav a{
  font-size:14px;
  font-weight:700;

  white-space:nowrap;
}

.nav a:hover{
  color:var(--amarillo);
}

.cart-link{
  padding:10px 14px;

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

  border-radius:999px;

  color:var(--amarillo);
}

.menu-btn{
  display:none;

  margin-left:auto;

  background:none;
  border:0;

  color:#fff;

  font-size:24px;

  cursor:pointer;
}


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

.btn{
  display:inline-flex;

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

  min-height:46px;

  padding:0 20px;

  border:1px solid transparent;
  border-radius:4px;

  font-weight:800;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.btn-primary{
  background:var(--amarillo);
  color:#000;
}

.btn-primary:hover{
  filter:brightness(.95);
}

.btn-secondary{
  background:transparent;

  border-color:#777;

  color:#fff;
}

.btn-secondary:hover{
  border-color:var(--amarillo);
  color:var(--amarillo);
}

.btn-dark{
  background:var(--negro);
  color:#fff;
}

.btn-outline{
  background:transparent;

  border-color:#222;

  color:#222;
}

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


/* =========================================
   HOME - HERO
========================================= */

.hero{
  background:#000;
  color:#fff;

  min-height:460px;

  display:flex;
  align-items:center;
}

.hero-layout{
  display:grid;

  grid-template-columns:
    minmax(420px,.9fr)
    minmax(500px,1.1fr);

  gap:50px;

  align-items:center;

  padding:60px 0;
}

.hero-copy{
  position:relative;

  padding:
    28px 0
    28px 34px;

  border-left:4px solid var(--amarillo);
}

.hero-copy .eyebrow{
  color:var(--amarillo);

  margin-bottom:18px;
}

.hero h1{
  margin:0 0 18px;

  max-width:620px;

  font-size:clamp(34px,4vw,56px);

  line-height:1.04;

  font-weight:900;

  letter-spacing:-.02em;
}

.hero p{
  max-width:610px;

  margin:0 0 26px;

  font-size:17px;

  line-height:1.6;

  color:#d8d8d8;
}

.hero-actions{
  display:flex;

  align-items:center;

  gap:14px;

  flex-wrap:wrap;
}


/* =========================================
   HOME - LOGOTIPOS DE MARCAS
========================================= */

.hero-brands{
  width:100%;

  min-width:0;

  display:flex;

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

.hero-brands img{
  width:100%;

  max-width:760px;

  height:auto;

  object-fit:contain;

  display:block;
}


/* =========================================
   SECCIONES GENERALES
========================================= */

.section{
  padding:64px 0;
}

.section.alt{
  background:var(--gris);
}

.section-head{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:20px;

  margin-bottom:30px;
}

.section h2{
  margin:0;

  font-size:clamp(30px,4vw,46px);
}

.eyebrow{
  margin-bottom:8px;

  color:var(--amarillo);

  font-size:12px;

  font-weight:900;

  letter-spacing:.10em;
}

.section-description{
  margin:10px 0 0;

  max-width:600px;

  color:var(--gris-2);

  font-size:16px;

  line-height:1.55;
}

.section-link{
  font-size:14px;

  font-weight:800;

  white-space:nowrap;
}

.section-link:hover{
  color:#b89900;
}

.muted{
  color:var(--gris-2);
}


/* =========================================
   HOME - PRODUCTOS / NOVEDADES
========================================= */

.grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:20px;
}

.card{
  background:#fff;

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

  border-radius:8px;

  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.08);
}

.card-media{
  aspect-ratio:1 / 1;

  background:#f1f1f1;

  overflow:hidden;
}

.card-media img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.product-image-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:100%;
  padding:24px;
  background:#0b0b0b;
  color:var(--amarillo);
  text-align:center;
}

.product-image-placeholder strong{
  font-size:13px;
  letter-spacing:.09em;
}

.product-image-placeholder span{
  color:#aaa;
  font-size:12px;
}

.product-variation{
  margin-top:6px;
  color:#666;
  font-size:12px;
}

.card-body{
  padding:16px;
}

.badge{
  display:inline-block;

  align-self:flex-start;

  margin-bottom:10px;

  padding:5px 8px;

  background:var(--amarillo);

  color:#000;

  font-size:11px;

  font-weight:900;
}

.card h3{
  margin:0 0 8px;

  font-size:17px;

  line-height:1.3;
}

.price{
  margin:8px 0 14px;

  font-size:20px;

  font-weight:900;
}

.card-actions{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}


/* =========================================
   HOME - PREVENTAS ENTREGADAS
========================================= */

.home-preorders{
  background:#f3f3f3;
}

.featured-preorder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.featured-preorder-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid var(--borde);
  border-radius:8px;
  overflow:hidden;
}

.featured-preorder-image{
  aspect-ratio:1 / 1;
  padding:16px;
  background:#fff;
}

.featured-preorder-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.featured-preorder-content{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px;
}

.featured-preorder-content h3{
  margin:0 0 14px;
  font-size:19px;
  line-height:1.35;
}

.featured-preorder-content p{
  margin:4px 0;
  color:#666;
  font-size:14px;
}

.featured-preorder-content .btn{
  width:100%;
  margin-top:auto;
  padding-top:13px;
  padding-bottom:13px;
}

.delivered-banner{
  background:#0b0b0b;

  color:#fff;

  padding:56px 0;

  border-top:1px solid #242424;
  border-bottom:1px solid #242424;
}

.delivered-layout{
  display:grid;

  grid-template-columns:
    minmax(320px,.8fr)
    minmax(500px,1.2fr);

  gap:50px;

  align-items:center;
}

.delivered-copy{
  max-width:500px;
}

.delivered-copy h2{
  margin:10px 0 18px;

  font-size:clamp(32px,4vw,48px);

  line-height:1.05;
}

.delivered-copy p{
  max-width:460px;

  margin:0 0 26px;

  font-size:16px;

  line-height:1.6;

  color:#cfcfcf;
}

.delivered-image{
  width:100%;

  aspect-ratio:16 / 6;

  overflow:hidden;

  border-radius:8px;

  background:#151515;
}

.delivered-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .35s ease;
}

.delivered-image:hover img{
  transform:scale(1.025);
}


/* =========================================
   HOME - INFO DE PREVENTAS
========================================= */

.preventa-info{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;

  margin-top:34px;
}

.preventa-info-item{
  padding:24px;

  background:#fff;

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

  border-top:4px solid var(--amarillo);

  border-radius:6px;
}

.preventa-info-item strong{
  display:block;

  margin-bottom:8px;

  font-size:17px;
}

.preventa-info-item span{
  display:block;

  color:var(--gris-2);

  font-size:14px;

  line-height:1.5;
}


/* =========================================
   PÁGINA PREVENTAS - HERO
========================================= */

.preventa-hero{
  background:#000;

  color:#fff;

  padding:60px 0;
}

.preventa-hero-layout{
  display:grid;

  grid-template-columns:
    minmax(420px,1fr)
    minmax(420px,.9fr);

  gap:50px;

  align-items:center;
}

.preventa-hero-copy{
  padding-left:30px;

  border-left:4px solid var(--amarillo);
}

.preventa-hero-copy h1{
  margin:10px 0 18px;

  max-width:620px;

  font-size:clamp(36px,4vw,58px);

  line-height:1.03;
}

.preventa-hero-copy p{
  max-width:590px;

  margin:0 0 26px;

  color:#d0d0d0;

  font-size:17px;

  line-height:1.6;
}

.preventa-hero-info{
  display:grid;

  gap:14px;
}

.preventa-stat{
  padding:20px 22px;

  background:#121212;

  border:1px solid #292929;

  border-left:4px solid var(--amarillo);

  border-radius:6px;
}

.preventa-stat strong{
  display:block;

  margin-bottom:5px;

  color:#fff;

  font-size:17px;
}

.preventa-stat span{
  color:#bdbdbd;

  font-size:14px;

  line-height:1.5;
}


/* =========================================
   PREVENTAS - AVISO
========================================= */

.preventa-alert{
  padding:15px 0;

  background:var(--amarillo);

  color:#000;

  font-size:14px;

  line-height:1.5;
}


/* =========================================
   PREVENTAS - GRID
========================================= */

.preventa-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:24px;
}


/* =========================================
   PREVENTAS - TARJETA
========================================= */

.preventa-card{
  display:flex;

  flex-direction:column;

  min-width:0;

  background:#fff;

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

  border-radius:8px;

  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.preventa-card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.08);
}


/* =========================================
   PREVENTAS - IMAGEN
========================================= */

.preventa-card-image{
  position:relative;

  width:100%;

  aspect-ratio:1 / 1;

  background:#f4f4f4;

  overflow:hidden;
}

.preventa-product-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  padding:18px;

  object-fit:contain;

  object-position:center;

  background:#fff;
}


/* =========================================
   PREVENTAS - PRÓXIMAMENTE
========================================= */

.preventa-sin-imagen{
  position:absolute;

  inset:0;

  display:none;

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

  padding:30px;

  background:#0b0b0b;

  text-align:center;
}

.preventa-sin-imagen.visible{
  display:flex;
}

.preventa-sin-imagen strong{
  color:var(--amarillo);

  font-size:18px;

  font-weight:900;

  letter-spacing:.14em;
}


/* =========================================
   PREVENTAS - CONTENIDO TARJETA
========================================= */

.preventa-card-content{
  display:flex;

  flex-direction:column;

  flex:1;

  padding:20px;
}

.preventa-brand{
  margin-bottom:7px;

  color:#777;

  font-size:12px;

  font-weight:900;

  letter-spacing:.08em;
}

.preventa-card h3{
  margin:0 0 18px;

  font-size:19px;

  line-height:1.28;
}


/* =========================================
   PREVENTAS - PRECIO
========================================= */

.preventa-meta{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;

  margin-bottom:16px;
}

.preventa-meta div{
  padding:12px;

  background:#f4f4f4;

  border-radius:5px;
}

.preventa-meta span{
  display:block;

  margin-bottom:4px;

  color:#777;

  font-size:11px;
}

.preventa-meta strong{
  display:block;

  font-size:14px;

  line-height:1.35;
}


/* =========================================
   PREVENTAS - STOCK
========================================= */

.preventa-stock{
  margin:0 0 16px;

  color:#777;

  font-size:13px;
}

.preventa-stock strong{
  color:#111;
}

.preventa-btn{
  width:100%;

  margin-top:auto;
}

.preventa-empty{
  grid-column:1 / -1;

  padding:40px;

  background:#f4f4f4;

  text-align:center;
}


/* =========================================
   PREVENTAS - CÓMO FUNCIONA
========================================= */

.preventa-process{
  padding:64px 0;

  background:#0b0b0b;

  color:#fff;
}

.preventa-process h2{
  color:#fff;
}

.preventa-steps{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}

.preventa-step{
  padding:26px;

  background:#141414;

  border:1px solid #292929;

  border-top:4px solid var(--amarillo);

  border-radius:6px;
}

.step-number{
  display:block;

  margin-bottom:18px;

  color:var(--amarillo);

  font-size:38px;

  font-weight:900;
}

.preventa-step strong{
  display:block;

  margin-bottom:8px;

  font-size:20px;
}

.preventa-step p{
  margin:0;

  color:#bbb;

  line-height:1.55;
}


/* =========================================
   PREVENTAS - CONDICIONES
========================================= */

.preventa-conditions{
  display:grid;

  grid-template-columns:
    minmax(300px,.8fr)
    minmax(480px,1.2fr);

  gap:50px;
}

.preventa-conditions h2{
  margin:0;

  font-size:clamp(30px,4vw,46px);
}

.preventa-condition-list{
  border-top:1px solid #ddd;
}

.preventa-condition-list p{
  margin:0;

  padding:18px 0;

  border-bottom:1px solid #ddd;

  line-height:1.55;
}


/* =========================================
   FILTROS TIENDA
========================================= */

.page-hero{
  padding:58px 0;
  background:#f1f1f1;
  border-bottom:1px solid var(--borde);
}

.page-hero-dark{
  background:#080808;
  color:#fff;
}

.page-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  align-items:center;
  gap:46px;
}

.page-hero h1{
  max-width:760px;
  margin:10px 0 16px;
  font-size:clamp(36px,5vw,62px);
  line-height:1.03;
}

.page-hero p{
  max-width:680px;
  margin:0;
  color:#666;
  font-size:17px;
  line-height:1.6;
}

.page-hero-dark p{ color:#c8c8c8; }

.page-hero-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:24px;
  background:#fff;
  border-left:4px solid var(--amarillo);
}

.page-hero-card span{
  color:#666;
  line-height:1.5;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:42px;
}

.contact-cards,
.faq-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.contact-card,
.faq-grid article{
  padding:22px;
  background:#fff;
  border:1px solid var(--borde);
  border-top:4px solid var(--amarillo);
}

.contact-card strong,
.faq-grid strong{ font-size:17px; }

.contact-card p,
.faq-grid p{
  margin:9px 0 0;
  color:#666;
  line-height:1.55;
}

.contact-panel{
  align-self:start;
  padding:28px;
  background:#0b0b0b;
  color:#fff;
}

.contact-panel h2{ margin:10px 0 14px; }
.contact-panel p{ color:#c5c5c5; line-height:1.6; }
.contact-warning{ padding-top:18px; border-top:1px solid #333; }

.official-channel-group{
  display:grid;
  gap:9px;
  margin-top:24px;
}

.official-channel-group > strong{
  color:var(--amarillo);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.official-channel-link{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:94px;
  padding:16px 18px;
  border:1px solid #333;
  color:#fff;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}

.official-channel-link:hover{
  background:#181818;
  border-color:var(--amarillo);
}

.store-channel-logo{
  width:118px;
  height:64px;
  flex:0 0 118px;
  object-fit:contain;
  object-position:center;
}

.mercado-libre-logo{
  padding:8px;
  background:#fff;
  border-radius:8px;
}

.tiktok-shop-logo{
  padding:8px;
  background:#fff;
  border-radius:8px;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.5));
}

.amazon-logo{
  padding:8px;
  background:#fff;
  border-radius:8px;
}

.official-channel-link.is-coming-soon{
  cursor:default;
  border-style:dashed;
}

.official-channel-link.is-coming-soon:hover{
  border-color:#333;
  transform:none;
}

.store-channel-status{
  margin-left:auto;
  padding:6px 9px;
  color:#050505;
  background:var(--amarillo);
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}

.store-channel-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.store-channel-copy strong{
  color:#fff;
  font-size:19px;
}

.store-channel-copy small{
  color:#aaa;
  font-size:12px;
}

.store-channel-arrow{
  margin-left:auto;
  color:var(--amarillo);
  font-size:26px;
  font-weight:900;
}

.shipping-policy-section{
  padding:0 0 64px;
}

.shipping-policy-card{
  display:grid;
  grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr);
  gap:42px;
  padding:34px;
  background:#fff7cc;
  border:1px solid #ead471;
  border-left:6px solid var(--amarillo);
}

.shipping-policy-card h2{
  margin:10px 0 0;
  font-size:clamp(28px,3vw,40px);
  line-height:1.08;
}

.shipping-policy-copy{
  display:grid;
  gap:13px;
}

.shipping-policy-copy p{
  margin:0;
  color:#4f4725;
  line-height:1.6;
}

.social-channel-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.social-channel-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  background:#202020;
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.social-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:currentColor;
}

.whatsapp-channel strong{
  display:flex;
  align-items:center;
  gap:8px;
}

.whatsapp-icon{
  width:22px;
  height:22px;
  flex-basis:22px;
}

.social-channel-links a:hover{
  background:var(--amarillo);
  color:#000;
}

.whatsapp-channel{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:26px;
  padding:18px;
  background:#1f8f4d;
  color:#fff;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}

.whatsapp-channel:hover{
  background:#17763e;
  transform:translateY(-2px);
}

.whatsapp-channel strong{ font-size:18px; }
.whatsapp-channel span{ font-size:13px; line-height:1.5; }
.whatsapp-channel small{ margin-top:3px; font-weight:900; }

.filters{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:24px;
}

.filters input,
.filters select{
  padding:12px 14px;

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

  background:#fff;

  min-width:180px;
}

.filters input{
  flex:1;
}


/* =========================================
   CARRITO
========================================= */

.cart-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.6fr)
    minmax(280px,.7fr);

  gap:28px;
}

.cart-item{
  display:grid;

  grid-template-columns:
    90px 1fr auto;

  gap:16px;

  padding:16px 0;

  border-bottom:1px solid #ddd;
}

.cart-item img{
  width:90px;
  height:90px;

  object-fit:contain;
}

.cart-summary{
  align-self:start;

  position:sticky;

  top:110px;

  padding:22px;

  background:var(--gris);
}

.cart-summary .row{
  display:flex;

  justify-content:space-between;

  padding:9px 0;
}

.cart-summary .total{
  margin-top:10px;

  padding-top:16px;

  border-top:1px solid #ccc;

  font-size:22px;

  font-weight:900;
}


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

footer{
  margin-top:40px;

  padding:44px 0;

  background:#000;

  color:#bbb;
}

.footer-grid{
  display:grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:32px;
}

footer strong{
  color:#fff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:900px){

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

  .page-hero-layout,
  .contact-layout{
    grid-template-columns:1fr;
  }

  .shipping-policy-card{
    grid-template-columns:1fr;
  }

  .contact-cards,
  .faq-grid{
    grid-template-columns:1fr;
  }

  .header-inner{
    width:calc(100% - 32px);

    min-height:84px;
  }

  .logo{
    width:170px;
    height:68px;
  }

  .menu-btn{
    display:block;
  }

  .nav{
    display:none;

    position:absolute;

    top:84px;

    left:0;
    right:0;

    padding:20px;

    background:#000;

    flex-direction:column;

    align-items:stretch;
  }

  .nav.open{
    display:flex;
  }


  /* HOME */

  .hero{
    min-height:auto;
  }

  .hero-layout{
    grid-template-columns:1fr;

    gap:36px;

    padding:48px 0;
  }

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

  .hero-brands img{
    max-width:700px;
  }

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

  .delivered-layout{
    grid-template-columns:1fr;

    gap:30px;
  }

  .delivered-image{
    aspect-ratio:16 / 7;
  }

  .preventa-info{
    grid-template-columns:1fr;
  }


  /* PREVENTAS */

  .preventa-hero-layout{
    grid-template-columns:1fr;
  }

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

  .preventa-steps{
    grid-template-columns:1fr;
  }

  .preventa-conditions{
    grid-template-columns:1fr;
  }

  .cart-layout{
    grid-template-columns:1fr;
  }

  .cart-summary{
    position:static;
  }

}


/* =========================================
   MÓVIL
========================================= */

@media (max-width:600px){

  .featured-preorder-grid{
    grid-template-columns:1fr;
  }

  .page-hero{
    padding:42px 0;
  }

  .page-hero h1{
    font-size:36px;
  }

  .official-channel-link{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .store-channel-logo{
    width:100%;
    height:66px;
    flex-basis:100%;
    object-position:left center;
  }

  .shipping-policy-card{
    padding:24px;
  }

  .container{
    width:calc(100% - 28px);
  }

  .header-inner{
    width:calc(100% - 28px);

    min-height:74px;
  }

  .logo{
    width:145px;
    height:58px;
  }

  .nav{
    top:74px;
  }


  /* HOME */

  .hero-layout{
    gap:28px;

    padding:
      34px 0
      42px;
  }

  .hero-copy{
    padding:
      20px 0
      20px 20px;

    border-left:
      3px solid var(--amarillo);
  }

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

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

  .hero-actions{
    flex-direction:column;

    align-items:stretch;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-brands{
    justify-content:center;
  }

  .hero-brands img{
    width:100%;
  }

  .section{
    padding:44px 0;
  }

  .section-head{
    flex-direction:column;

    align-items:flex-start;
  }

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

  .delivered-banner{
    padding:40px 0;
  }

  .delivered-layout{
    gap:24px;
  }

  .delivered-copy h2{
    font-size:32px;
  }

  .delivered-image{
    aspect-ratio:4 / 3;
  }

  .delivered-copy .btn{
    width:100%;
  }


  /* PREVENTAS */

  .preventa-hero{
    padding:42px 0;
  }

  .preventa-hero-copy{
    padding-left:20px;

    border-left:
      3px solid var(--amarillo);
  }

  .preventa-hero-copy h1{
    font-size:36px;
  }

  .preventa-grid{
    grid-template-columns:1fr;
  }

  .preventa-meta{
    grid-template-columns:1fr;
  }

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

  .preventa-product-image{
    padding:14px;
  }

  .preventa-process{
    padding:44px 0;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

}
/* =====================================================
   CORRECCIÓN DEFINITIVA - ORGANIZACIÓN PREVENTAS 2026/2027
===================================================== */

/* El contenedor principal YA NO debe ser una cuadrícula */
[data-preventa-grid]{
  display:block !important;
  width:100% !important;
}


/* Cada encabezado ocupa todo el ancho */
.preventa-grupo-titulo{
  display:block !important;
  width:100% !important;

  margin:0 0 30px 0;
  padding:0;
}

.preventa-grupo-titulo h2{
  margin:0 0 8px;

  font-size:40px;
  line-height:1.05;
}

.preventa-grupo-titulo p{
  margin:0;

  color:#777;

  font-size:16px;
  line-height:1.5;
}


/* Las tarjetas sí forman su propia cuadrícula */
.preventa-grupo-grid{
  display:grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap:24px;

  width:100%;

  margin:0;
}


/* Separación entre 2026 y 2027 */
.preventa-grupo-2027{
  width:100% !important;

  margin-top:90px !important;

  padding-top:55px;

  border-top:1px solid #e5e5e5;
}


/* Evita deformaciones de las tarjetas */
.preventa-grupo-grid .preventa-card{
  width:100%;
  min-width:0;
  height:auto;
}


/* Imagen uniforme */
.preventa-grupo-grid .preventa-card-image{
  width:100%;
  aspect-ratio:1 / 1;

  position:relative;

  overflow:hidden;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:900px){

  .preventa-grupo-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .preventa-grupo-2027{
    margin-top:70px !important;
    padding-top:45px;
  }

}


/* =========================================
   MÓVIL
========================================= */

@media (max-width:600px){

  .preventa-grupo-grid{
    grid-template-columns:
      1fr !important;
  }

  .preventa-grupo-titulo h2{
    font-size:31px;
  }

  .preventa-grupo-2027{
    margin-top:55px !important;
    padding-top:38px;
  }

}
/* =========================================
   IMAGEN / PLACEHOLDER DEL CARRITO
========================================= */

.cart-image-wrap{
  width:90px;
  height:90px;
  flex:0 0 90px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.cart-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cart-image-placeholder{
  width:90px;
  height:90px;

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

  padding:8px;

  background:#0b0b0b;
  color:#ffd400;

  font-size:9px;
  font-weight:900;

  letter-spacing:.04em;
  line-height:1.2;

  text-align:center;

  white-space:normal;
  word-break:normal;

  overflow:hidden;
}
.cart-image-placeholder{
  text-transform:uppercase;
}
/* =========================================
   CHECKOUT
========================================= */

.checkout-layout{
  display:grid;
  grid-template-columns:
    minmax(0,1.4fr)
    minmax(320px,.7fr);
  gap:32px;
  margin-top:34px;
}

.checkout-form-card,
.checkout-summary{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:8px;
}

.checkout-form-card{
  padding:28px;
}

.checkout-form-card h3,
.checkout-summary h3{
  margin:0 0 22px;
  font-size:22px;
}

.checkout-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.checkout-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.checkout-field-full{
  grid-column:1 / -1;
}

.checkout-field label{
  font-size:13px;
  font-weight:800;
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea{
  width:100%;
  padding:13px 14px;

  background:#fff;

  border:1px solid #d9d9d9;
  border-radius:5px;

  color:#111;

  outline:none;
}

.checkout-field textarea{
  resize:vertical;
  min-height:100px;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus{
  border-color:#111;
}

.checkout-check{
  grid-column:1 / -1;

  display:flex;
  align-items:flex-start;
  gap:10px;

  padding-top:4px;

  font-size:14px;
  line-height:1.4;

  cursor:pointer;
}

.checkout-check input{
  margin-top:2px;
}

.checkout-check a{
  color:inherit;
  font-weight:800;
  text-decoration:underline;
}

.checkout-check-optional{
  color:#555;
}

.legal-document{
  max-width:900px;
  font-size:1rem;
  line-height:1.75;
}

.legal-document h2{
  margin:34px 0 10px;
  font-size:1.35rem;
}

.legal-document a{
  color:inherit;
  font-weight:800;
  text-decoration:underline;
}

.legal-note{
  margin-top:36px;
  padding:18px;
  border-left:4px solid var(--amarillo);
  background:var(--gris);
}

/* PANEL PRIVADO */
.admin-body{margin:0;background:#f3f3f3;color:#111;font-family:Arial,sans-serif}
.admin-header{display:flex;justify-content:space-between;gap:20px;padding:20px 4%;color:#fff;background:#080808}
.admin-header nav{display:flex;gap:18px}.admin-header a{color:var(--amarillo);font-weight:800}
.admin-main{width:min(1500px,94%);margin:32px auto}.admin-main h1{margin-bottom:22px}
.admin-login{width:min(420px,calc(100% - 32px));margin:10vh auto;padding:32px;background:#fff;box-shadow:0 16px 45px #0002}
.admin-login img{display:block;width:180px;margin:0 auto 24px;background:#080808;padding:12px}
.admin-login label{display:grid;gap:7px;margin:16px 0;font-weight:800}.admin-login input{padding:13px;border:1px solid #bbb}
.admin-error{padding:12px;color:#8b0000;background:#ffe8e8}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.admin-stats article{display:grid;gap:4px;padding:22px;background:#fff;border-top:4px solid var(--amarillo)}
.admin-stats strong{font-size:2rem}.admin-stats span{color:#666}
.admin-section{margin:24px 0;padding:22px;background:#fff}.admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.admin-table-wrap{overflow:auto} .admin-table-wrap table{width:100%;border-collapse:collapse;font-size:.88rem}
.admin-table-wrap th,.admin-table-wrap td{padding:12px 10px;text-align:left;vertical-align:top;border-bottom:1px solid #ddd}
.admin-table-wrap th{white-space:nowrap;background:#111;color:#fff}.admin-table-wrap small{display:block;margin-top:5px;color:#666;line-height:1.35}
.admin-table-wrap select{max-width:170px;padding:7px}.stock-form{display:flex;gap:5px}.stock-form input{width:70px;padding:6px}.stock-form button{padding:6px;cursor:pointer}
@media(max-width:760px){.admin-header{align-items:flex-start;flex-direction:column}.admin-stats{grid-template-columns:1fr 1fr}.admin-section{padding:12px}}


/* =========================================
   CHECKOUT - RESUMEN
========================================= */

.checkout-summary{
  align-self:start;

  position:sticky;
  top:115px;

  padding:24px;

  background:var(--gris);
}

.checkout-summary-products{
  padding-bottom:18px;
  margin-bottom:18px;

  border-bottom:1px solid #d7d7d7;
}

.checkout-summary-products .checkout-item{
  padding:12px 0;
  border-bottom:1px solid #ddd;
}

.checkout-summary-products .checkout-item:last-child{
  border-bottom:0;
}

.checkout-summary-products strong{
  display:block;
  margin-bottom:4px;
  font-size:14px;
}

.checkout-summary-products span{
  color:#777;
  font-size:12px;
}

.checkout-summary-totals .row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:9px 0;
}

.checkout-summary-totals .row span{
  color:#555;
  font-size:14px;
}

.checkout-summary-totals .row strong{
  text-align:right;
  font-size:14px;
}

.checkout-summary-totals .total{
  margin-top:10px;
  padding-top:16px;

  border-top:1px solid #bbb;
}

.checkout-summary-totals .total span,
.checkout-summary-totals .total strong{
  color:#000;
  font-size:20px;
  font-weight:900;
}

.checkout-pay-btn{
  width:100%;
  margin-top:22px;
}

.checkout-payment-note{
  margin:12px 0 0;

  color:#777;

  font-size:11px;
  line-height:1.45;
  text-align:center;
}


/* =========================================
   CHECKOUT - TABLET
========================================= */

@media (max-width:900px){

  .checkout-layout{
    grid-template-columns:1fr;
  }

  .checkout-summary{
    position:static;
  }

}


/* =========================================
   CHECKOUT - MÓVIL
========================================= */

@media (max-width:600px){

  .checkout-form-card{
    padding:20px;
  }

  .checkout-summary{
    padding:20px;
  }

  .checkout-form{
    grid-template-columns:1fr;
  }

  .checkout-field-full,
  .checkout-check{
    grid-column:auto;
  }

}