/* =========================================================
   1) TOKENS / BASE
   ========================================================= */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;

  --brand: #d13a2f;         /* rojo principal */
  --brand-2: #f59e0b;       /* acento */
  --soft: #f6f7f9;

  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);

  --container: 1200px;
  
  /* Header/Nav sizing (control rápido) */
  --header-pad-y: 42px;   /* alto del header superior (antes 18px) */
  --nav-font: 18px;       /* tamaño letras nav (antes 22px) */
  --logo-h: 82px;         /* alto logo (antes 94px) */  
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

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

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}


/* =========================================================
   2) HEADER (estilo referencia)
   ========================================================= */

/* Si todavía existe topbar en algún lado, la ocultamos */

.contact-wa img{
  width: 22px;     /* ajusta si lo quieres más grande */
  height: 22px;
  display: block;
}

.contact-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar{ display:none; }

.header--target{
  background: #fff;
  border-bottom: 0;
}

/* Logo | Buscador | Ventas */
.header-main--target{
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  align-items: center;
  gap: 16px; /* antes 24px */
  padding: var(--header-pad-y) 0 8px; /* controlado por token */
}

.brand--target img{
  max-height: var(--logo-h);
  width: auto;
  display: block;
}

/* Buscador (borde naranja + botón negro) */
.searchbar.searchbar--target {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  border: 2px solid #ff5a1f;
  border-radius: 12px;
  background: #fff;
  overflow: visible;
  box-shadow: none;
  z-index: 99999;
}
.searchbar.searchbar--target::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.searchbar.searchbar--target input {
  position: relative;
  z-index: 1;
  border-radius: 10px 0 0 10px;
}

.searchbar.searchbar--target .searchbar-btn {
  position: relative;
  z-index: 1;
  border-radius: 0 10px 10px 0;
}

.search-suggestions {
  z-index: 999999;
}
.header--target,
.header-main--target {
  position: relative;
  z-index: 9999;
}
.searchbar.searchbar--target input{
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0px 7px;
  height: 43px;
  line-height: 46px;
  font-size: 17px;
  background: #edeff0;
  font-family: "Quicksand", sans-serif;
}

.searchbar.searchbar--target .searchbar-btn{
  border: 0;
  background: #212121;
  color: #fff;
  width: 56px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.searchbar.searchbar--target .searchbar-icon{
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  
}

.search-suggestions{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;

  display: none;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.search-suggestions.is-visible{
  display: block;
}

.search-suggestion{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 11px 14px;
  text-decoration: none;
  color: #111;
  border-bottom: 1px solid #f1f1f1;
  background: #fff;
  transition: background 0.18s ease;
}

.search-suggestion:last-child{
  border-bottom: 0;
}

.search-suggestion:hover,
.search-suggestion.is-active{
  background: #f8f8f8;
}

.search-suggestion__content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.search-suggestion__title{
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion__meta{
  font-size: 12px;
  color: #777;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion__price-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.search-suggestion__price {
  font-size: 13px;
  font-weight: 800;
  color: #ff5a1f;
}

.search-suggestion__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff1e8;
  color: #ff5a1f;
  font-size: 11px;
  font-weight: 800;
}
.search-suggestion__discount {
  font-size: 10px;
  padding: 2px 5px;
  background: #ffe8dc;
  color: #ff5a1f;
}
.search-suggestion__old-price {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
}

.search-suggestion--all{
  font-size: 13px;
  font-weight: 700;
  color: #111;
  justify-content: center;
  background: #fafafa;
}

.search-suggestion--all:hover{
  background: #f2f2f2;
}

.search-suggestion--empty{
  display: block;
  padding: 12px 14px;
  font-size: 13px;
  color: #666;
}

@media (max-width: 768px){
  .search-suggestions{
    top: calc(100% + 4px);
  }

  .search-suggestion{
    padding: 10px 12px;
  }

  .search-suggestion__title{
    font-size: 13px;
  }

  .search-suggestion__meta{
    font-size: 11px;
  }

  .search-suggestion__price{
    font-size: 12px;
  }
}

/* Bloque VENTAS a la derecha */
.header-contact--target{
  justify-self: end;
  text-align: left;
  line-height: 1.1;
}

.header-contact--target .contact-title{
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .4px;
}

.header-contact--target .contact-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.header-contact--target .contact-phone{
  font-size: 16px;
  font-weight: 200;
}

.header-contact--target .contact-mail{
  font-size: 15px;
  color: #111;
  font-weight: 500;
}

.header-contact--target .contact-wa{
  font-size: 16px;
}

/* ==============================
   HOME BANNER SLIDER
============================== */

.home-hero--full,
.home-hero--full .hero-full{
  width: 100%;
  margin: 0;
  padding: 0;
}

.home-banner-single,
.home-banner-slider{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}

.home-banner-slider{
  aspect-ratio: 1920 / 500;
}

.home-banner-single img{
  width: 100%;
  height: auto;
  display: block;
}

.home-banner-track{
  position: relative;
  width: 100%;
  height: 100%;
}

.home-banner-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

.home-banner-slide.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.home-banner-slide a,
.home-banner-slide img{
  display: block;
  width: 100%;
  height: 100%;
}

.home-banner-slide img{
  object-fit: cover;
  object-position: center;
}

/* Animaciones */
.home-banner-slide.slide-in-right{
  animation: homeBannerInRight .5s ease forwards;
}

.home-banner-slide.slide-in-left{
  animation: homeBannerInLeft .5s ease forwards;
}

.home-banner-slide.slide-out-left{
  animation: homeBannerOutLeft .5s ease forwards;
}

.home-banner-slide.slide-out-right{
  animation: homeBannerOutRight .5s ease forwards;
}

@keyframes homeBannerInRight{
  from{
    transform: translateX(100%);
    opacity: 1;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes homeBannerInLeft{
  from{
    transform: translateX(-100%);
    opacity: 1;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes homeBannerOutLeft{
  from{
    transform: translateX(0);
    opacity: 1;
  }
  to{
    transform: translateX(-100%);
    opacity: 1;
  }
}

@keyframes homeBannerOutRight{
  from{
    transform: translateX(0);
    opacity: 1;
  }
  to{
    transform: translateX(100%);
    opacity: 1;
  }
}

/* Dots */
.home-banner-dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.home-banner-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, background .2s ease;
}

.home-banner-dot.is-active{
  background: #ffffff;
  transform: scale(1.2);
}

.home-banner-dot:hover{
  background: #ffffff;
}


/* =========================================================
   3) NAV (estilo referencia)
   ========================================================= */
.main-nav{
  background: #fff;
}

.main-nav .nav-row {
  display: grid;
  grid-template-columns: 13.3fr auto 1fr;
  gap: 32px;
  padding: 0px 102px 12px;
}

/* UL horizontal sin viñetas */
.main-nav ul{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;        /* antes 34px */
  margin: 0;
  padding: 0;
}

.main-nav a{
  font-size: var(--nav-font);
  font-weight: 490;
  padding: 4px;
}

.main-nav a:hover{ opacity: .85; }

.main-nav a.is-active{
  font-weight: 700;
}

.cart-icon{
  position: relative;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-icon img{
  width: 42px;
  height: auto;
  display: block;
  margin-right: 72px;
}

.cart-badge{
  position: absolute;
  top: 2px;
  right: 72px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff5a1f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- Botón hamburguesa (se muestra en móvil) ---------- */
/* =========================================================
   NAV HAMBURGER BUTTON
   ========================================================= */

.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;

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

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

/* hover suave */
.nav-toggle:hover{
  background: #f9fafb;
  border-color: #d1d5db;
}

/* líneas */
.nav-toggle span{
  position: absolute;
  width: 20px;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* posiciones */
.nav-toggle span:nth-child(1){ transform: translateY(-6px); }
.nav-toggle span:nth-child(2){ transform: translateY(0); }
.nav-toggle span:nth-child(3){ transform: translateY(6px); }

/* animación cuando menú está abierto */
.main-nav.is-open .nav-toggle span:nth-child(1){
  transform: rotate(45deg);
}

.main-nav.is-open .nav-toggle span:nth-child(2){
  opacity: 0;
}

.main-nav.is-open .nav-toggle span:nth-child(3){
  transform: rotate(-45deg);
}

/* =========================================================
   4) HOME - HERO / BANNERS
   ========================================================= */
.home-hero--full{
  padding: 0;
}

.hero-full{
  width: 100vw;
  margin-left: calc(50% - 50vw); /* truco para romper el container */
  border-radius: 0;
  overflow: hidden;
}

.hero-full img{
  width: 100%;
  height: auto;
  display: block;
}   
   
.home-hero,
.home-banners{
  padding: 7px 0 6px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}

.hero-card{
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  min-height: 220px;
  position: relative;
}

.hero-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-card .hero-tag{
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(0,0,0,.58);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

/* Carrusel banners (si lo usas) */
.banner-list{
  display: flex;
  overflow-x: auto;
  gap: 14px;
  padding: 6px 0 10px;
  scroll-snap-type: x mandatory;
}

.banner-item{
  flex: 0 0 78%;
  max-width: 78%;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}


/* =========================================================
   5) HOME - CATEGORÍAS
   ========================================================= */
.home-cats{
  background: #fff;
  padding: 50px 0 50px;
}

.home-cats__wrap{
  width: min(1200px, 92%);
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-cats__viewport{
  overflow: hidden;
  width: 100%;
}

.home-cats__track{
  display: flex;
  align-items: flex-start;
  gap: 28px;
  transition: transform .45s ease;
  will-change: transform;
}

.home-cat{
  flex: 0 0 95px;
  width: 120px;
  text-align: center;
  text-decoration: none;
  color: #111;
}

.home-cat__img{
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .2s ease;
}

.home-cat__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-cat__label{
  display: block;
  font-size: 11px;
  letter-spacing: .4px;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 650;
}

.home-cat:hover .home-cat__img{
  transform: translateY(-2px);
}

.home-cats__arrow{
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, opacity .2s ease;
}

.home-cats__arrow:hover{
  transform: scale(1.06);
}

.home-cats__arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Base de botones */
.pagination__link,
.pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
}

/* Hover */
.pagination__link:hover {
    border-color: #ff7a00;
    color: #ff7a00;
    background: #fff7f0;
}

/* Activo (página actual) */
.pagination__current {
    font-weight: 700;
    background: #ff7a00;
    color: #fff;
    border-color: #ff7a00;
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.25);
}

/* Botones anterior / siguiente */
.pagination__link:first-child,
.pagination__link:last-child {
    font-weight: 600;
    padding: 0 14px;
}

/* Disabled (si quieres agregarlo después) */
.pagination__disabled {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 768px){
  .home-cats__wrap{
    gap: 8px;
  }

  .home-cats__track{
    gap: 18px;
  }

  .home-cat{
    flex: 0 0 102px;
    width: 102px;
  }

  .home-cat__img{
    width: 82px;
    height: 82px;
  }

  .home-cats__arrow{
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 18px;
  }
}

@media (max-width: 520px){
  .home-cats{
    padding: 18px 0 22px;
  }

  .home-cats__wrap{
    width: 94%;
    gap: 6px;
  }

  .home-cats__track{
    gap: 14px;
  }

  .home-cat{
    flex: 0 0 96px;
    width: 96px;
  }

  .home-cat__img{
    width: 74px;
    height: 74px;
    margin-bottom: 8px;
  }

  .home-cat__label{
    font-size: 10px;
  }

  .home-cats__arrow{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 16px;
  }
}


/* =========================================================
  5.1) HOME - PROMOS / BANNERS
   ========================================================= */
.home-promos{
  padding: 20px 0 10px;
}

.home-promos__container{
  width: min(1200px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* columna izquierda */
.home-promos__left{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* tarjetas */
.promo-card{
  display: block;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.promo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tamaños */
.promo-card--small{
  height: 180px;
}

.promo-card--big{
  height: 380px;
}

/* barra naranja inferior (solo pequeños) */
.promo-bar{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(90deg,#f97316,#f59e0b);
}

/* hover suave */
.promo-card{
  transition: transform .2s ease;
}
.promo-card:hover{
  transform: translateY(-3px);
}

/* responsive */
@media (max-width: 1024px){
  .home-promos__container{
    grid-template-columns: 1fr;
  }

  .promo-card--big{
    height: 260px;
  }
}

/* =========================================================
   5.3) HOME - PROMOS 4 BLOQUES
   ========================================================= */
.home-promos-3{
  padding: 20px 0 10px;
}

.home-promos-3__container{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.promo3-card{
  position: relative;
  display: block;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  transition: transform .2s ease;
  aspect-ratio: 1 / 1;
}

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

.promo3-card img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.promo3-bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14px;
  
}

/* TABLET */
@media (max-width: 1024px){
  .home-promos-3__container{
    grid-template-columns: repeat(2, 1fr);
  }
}



/* =========================================================
   6) HOME - PRODUCTOS (ESTILO COMO REFERENCIA)
   ========================================================= */

.home-products{
  padding: 60px 0 60px;
}

/* margen a orillas como la referencia */
.home-products .product-grid{
  width: min(1200px, 92%);
  margin: 0 auto;
  margin-top: 60px;
}



.home-products__title{
  width: min(1200px, 92%);
  margin: 0 auto 60px; /* separación con lo que viene debajo */
  font-family: "Quicksand", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #111;
  line-height: 1.1;
}
/* =========================
   GRID
   ========================= */
.product-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  row-gap: 70px;
}

/* =========================
   CARD (con borde + padding)
   ========================= */
.product-card{
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0;         /* la referencia es recta */
  padding: 12px;
  box-shadow: none;
}

.product-card > a{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* =========================
   IMAGEN (más compacta)
   ========================= */
.product-image{
  width: 100%;
  height: 150px;            /* clave: evita imagen gigante */
  overflow: hidden;
  background: #fff;
  border: 0;
}

.product-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* estilo catálogo */
  display: block;
}

/* =========================
   TEXTO / TIPOS
   ========================= */
.product-info{
  padding: 10px 0 0;
}

.product-sku{
  font-size: 13px;
  color: #4b5563;           /* un poco más oscuro */
  margin: 0 0 6px;
}

.product-meta{
  font-size: 12px;
  color: #374151;           /* más oscuro que tu versión */
  margin: 2px 0;
}

/* =========================
   PRECIO + DESCUENTO
   ========================= */
.product-price-row{
  margin-top: 10px;
}

.price-main{
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-now{
  font-size: 28px;
  font-weight: 650;
  color: #ff3b1f;           /* rojo/naranjo */
}

/* badge negro como referencia */
.price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

/* precio antiguo abajo y tachado */
.price-old-row{
  margin-top: -1px;
}

.price-old{
  color: #6b7280;
  text-decoration: line-through;
  font-size: 18px;
  font-style: italic;
}

/* Si no hay descuento, no muestres badge raro (ej -0%) */
.price-badge.is-zero{
  display: none;
}

/* =========================
   BOTONES: ficha técnica + ver producto
   ========================= */
.product-actions{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-buyform{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.pd-qty {
    display: grid;
    grid-template-columns: 33px 42px 33px;
    width: 109px;
    height: 36px;
    border: 1px solid #d1d5db;
    background: #d9d9d9;
}

.pd-qtybtn{
  border: 0;
  background: #bfbfbf;
  font-weight: 900;
  font-size: 22px;
  cursor: pointer;
}

.pd-qty input{
  width: 100%;
  height: 100%;
  min-width: 0;

  border: 0;
  outline: 0;
  padding: 0;

  text-align: center;
  background: #f3f3f3;

  font-family: inherit;
  font-size: 16px;
  line-height: 36px;
}

.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.pd-qty input[type="number"]{
  -moz-appearance: textfield;
}
.pd-addcart{
  width: 100%;
  min-height: 58px;
  border: 0;
  background: #f76600;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  padding: 0 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: calc(100% - 114px);
}
/* botón gris chico */
.btn-tech{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 0px;
  background: #666666;
  font-size: 12px;
  color: #fff !important;
}

/* botón negro redondo */
.btn-view{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 17px;
}

/* hover */
.product-card:hover{
  border-color: #9ca3af;
}
.btn-view:hover{ background:#2b2b2b; }


/* =========================================================
   PRODUCT FILTERS - CLASES AISLADAS
   ========================================================= */

.product-filters{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-filters__title{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}

.product-filters__group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-filters__group + .product-filters__group{
  padding-top: 2px;
}

.product-filters__label{
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.product-filters__check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

.product-filters__check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #111;
  flex-shrink: 0;
}

.product-filters__select{
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.product-filters__select:focus{
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

.product-filters__select:hover{
  border-color: #9ca3af;
}

.product-filters__actions{
  padding-top: 6px;
}

.product-filters__submit{
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.product-filters__submit:hover{
  background: #2b2b2b;
  transform: translateY(-1px);
}

.product-filters__submit:active{
  transform: translateY(0);
}

@media (max-width: 1024px){
  .product-filters{
    gap: 16px;
  }
}


/* =========================================================
   PRODUCTOS ALT - MISMO LOOK, CLASES AISLADAS
   ========================================================= */

.product-grid-alt{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Card centrada */
.product-card-alt{
  width: 100%;
  max-width: 220px;
  text-align: center;
}

/* Imagen más pequeña */
.product-card-alt__image{
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  overflow: hidden;
}

.product-card-alt__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SKU más chico */
.product-card-alt__sku{
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* Título compacto */
.product-card-alt__title{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
}

/* PRECIO + BADGE EN LÍNEA */
.product-card-alt__price-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-card-alt__price-now{
  font-size: 27px;
  font-weight: 700;
  color: #ff3b1f;
}

/* Badge más chico */
.product-card-alt__price-badge{
  height: 27px;
  padding: 0 8px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

/* Precio antiguo centrado */
.product-card-alt__price-old-row{
  margin-top: 1px;
}

.product-card-alt__price-old {
    font-size: 18px;
    color: #6b7280;
    text-decoration: line-through;
    font-style: italic;
    margin-right: 30%;
}

/* BOTÓN centrado tipo pill */
.product-card-alt__actions{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* SOLO botón negro */
.btn-view-alt {
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-view-alt:hover{
  background: #2b2b2b;
}

.pd-reco h3.pd-reco-title {
    margin: 23px 0px 26px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}
/* ===== Ajustes finales catálogo ===== */

/* Card sin contorno */
.product-card{
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;          /* más como catálogo */
  background: transparent !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Si quieres un “aire” entre elementos sin borde */
.product-card > a{
  display: block;
  flex: 0 0 auto;
}
/* Imagen cuadrada */
.product-image{
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
  aspect-ratio: 1 / 1;            /* cuadrado */
  overflow: hidden;
}

.product-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info más compacta como referencia */
.product-info{
  padding: 10px 0 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-sku{
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

.product-title{
  font-size: 18px;
  font-weight: 591;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #111;
}

.product-meta{
  font-size: 14px;
  color: #6b7280;                 /* gris suave como referencia */
  font-weight: 500;
}

/* Botones alineados como catálogo */
.product-actions{
  margin-top: auto;
  padding-top: 10px;
  gap: 8px;
}
.btn-tech{
  height: 26px;
  border-radius: 0px;
  margin-right: auto;
}

.btn-view {
    height: 30px;
    border-radius: 999px;
    margin-right: 113px;
    margin-top: 8px;
}

.category-products .product-card .btn-view{
  margin-right: 0 !important;
  white-space: nowrap;
  width: fit-content;
  min-width: 112px;
  padding: 0 14px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px){
  .product-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .product-image{ height: 140px; }
}

@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr; }
  .product-image{ height: 170px; }
}



/* =========================================================
   6.2) CATEGORY PAGE (layout como la referencia)
   ========================================================= */

.category-header{
  width: min(1200px, 92%);
  margin: 14px auto 10px;
}

.category-header h1{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.category-header p{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

/* layout 2 columnas: filtros + productos */
.category-page{
  width: min(1200px, 92%);
  margin: 0 auto 30px;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}

/* caja blanca (filtros) */
.cat-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: var(--shadow-sm);
}

/* sidebar sticky suave */
.category-filters{
  position: sticky;
  top: 14px;
}

/* main */
.category-products{
  min-width: 0;
}

/* topbar ordenar + paginación */
.cat-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.cat-sort{
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-sort__label{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

/* select simple (si usas el fallback) */
.cat-sort__form{ margin: 0; }
.cat-sort__select{
  height: 36px;
  border: 0;
  border-bottom: 2px solid #d1d5db;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: 0;
  cursor: pointer;
}

/* contenedor productos como “panel” blanco */
.cat-products-wrap{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

/* fuerza grilla a 3 columnas EN CATEGORÍA (sin afectar home) */
.category-products .product-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  margin: 0;
  row-gap: 70px;
}

/* paginación si viene en <a> o botones */
.cat-pager a,
.cat-pager button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.cat-pager a.is-active,
.cat-pager .is-active{
  background: #111;
  color: #fff;
}

/* responsive */
@media (max-width: 1024px){
  .category-page{
    grid-template-columns: 1fr;
  }
  .category-filters{
    position: static;
  }
  .category-products .product-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-topbar{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px){
  .category-products .product-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   6.4.9) PRODUCTO - BREADCRUMB
   ========================================================= */

.pd-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
}

.pd-breadcrumb__link{
  color: #6b7280;
  text-decoration: none;
  transition: color .18s ease;
}

.pd-breadcrumb__link:hover{
  color: #111827;
}

.pd-breadcrumb__sep{
  color: #9ca3af;
}


/* =========================================================
   CATEGORY FRONT MASK - COMPACTO COMPLETO
   ========================================================= */

.category-front-mask{
  background:#fff;
  padding:8px 0 50px;
  font-family:"Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.category-front-mask__container{
  width:min(1200px, 94%);
  margin:0 auto;
}

/* Breadcrumb */
.breadcrumb-mask{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 18px;
  font-size:11px;
  line-height:1.2;
  color:#6b7280;
}

.breadcrumb-mask a,
.breadcrumb-mask strong,
.breadcrumb-mask span{
  color:#6b7280;
  font-weight:400;
  text-decoration:none;
}

.breadcrumb-mask strong{
  font-weight:500;
}

/* Categorías circulares */
.circle-cats-mask{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:18px;
  align-items:start;
  margin-bottom:30px;
}

.circle-cat-mask{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#000;
  text-decoration:none;
}

.circle-cat-mask__image{
  width:70px;
  height:70px;
  border-radius:999px;
  overflow:hidden;
  display:block;
  margin:0 0 9px;
  background:#e5e7eb;
  border:1px solid rgba(0,0,0,.08);
}

.circle-cat-mask__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.circle-cat-mask__title{
  display:block;
  font-size:8.8px;
  font-weight:800;
  line-height:1.12;
  text-transform:uppercase;
  color:#000;
}

/* Beneficios */
.info-benefits-mask{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
  text-align:center;
}

.info-benefit-mask{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.info-benefit-mask__icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000;
  margin-bottom:9px;
}

.info-benefit-mask__icon svg{
  width:42px;
  height:42px;
  display:block;
}

.info-benefit-mask h3{
  margin:0;
  font-size:16.5px;
  font-weight:500;
  line-height:1.12;
  color:#000;
}

.info-benefit-mask p{
  margin:8px 0 0;
  font-size:12.5px;
  font-weight:400;
  line-height:1.25;
  color:#111827;
}

.info-benefit-mask__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  margin-top:7px;
  padding:0 13px;
  border-radius:999px;
  background:#22d957;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

/* Hover suave */
.circle-cat-mask:hover .circle-cat-mask__image{
  transform:translateY(-1px);
}

.circle-cat-mask__image{
  transition:transform .18s ease;
}

.info-benefit-mask__button:hover{
  filter:brightness(.96);
}

/* Tablet */
@media (max-width:1024px){
  .circle-cats-mask{
    grid-template-columns:repeat(4, 1fr);
    gap:18px 14px;
    row-gap:20px;
  }

  .info-benefits-mask{
    gap:22px;
  }
}

/* Mobile */
@media (max-width:768px){
  .category-front-mask{
    padding:8px 0 16px;
  }

  .breadcrumb-mask{
    font-size:11px;
    margin-bottom:16px;
  }

  .circle-cats-mask{
    grid-template-columns:repeat(4, 1fr);
    gap:16px 10px;
    margin-bottom:24px;
  }

  .circle-cat-mask__image{
    width:62px;
    height:62px;
  }

  .circle-cat-mask__title{
    font-size:8px;
  }

  .info-benefits-mask{
    grid-template-columns:1fr;
    gap:22px;
  }

  .info-benefit-mask__icon{
    width:38px;
    height:38px;
  }

  .info-benefit-mask__icon svg{
    width:38px;
    height:38px;
  }

  .info-benefit-mask h3{
    font-size:15px;
  }

  .info-benefit-mask p{
    font-size:8px;
  }
}

/* Mobile chico */
@media (max-width:480px){
  .circle-cats-mask{
    grid-template-columns:repeat(2, 1fr);
  }

  .circle-cat-mask__image{
    width:66px;
    height:66px;
  }

  .circle-cat-mask__title{
    font-size:8.2px;
  }
}

/* =========================================================
   ICONOS BENEFICIOS CON IMAGEN
   ========================================================= */

.info-benefits-mask{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
  text-align:center;
}

.info-benefit-mask{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.info-benefit-mask__icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:9px;
}

.info-benefit-mask__icon img{
  width:171%;
  height:173%;
  object-fit:contain;
  display:block;
}

.info-benefit-mask__icon--wide{
  width:48px;
  height:32px;
}

.info-benefit-mask__icon--wide img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.info-benefit-mask h3{
  margin:0;
  font-size:16.5px;
  font-weight:500;
  line-height:1.12;
  color:#000;
}

.info-benefit-mask p{
  margin:8px 0 0;
  font-size: 12.5px;
  font-weight:400;
  line-height:1.25;
  color:#111827;
}

.info-benefit-mask__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  margin-top:7px;
  padding:0 13px;
  border-radius:999px;
  background:#22d957;
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

.info-benefit-mask__button:hover{
  filter:brightness(.96);
}
/* Ícono envío: ajuste independiente */
.info-benefit-mask__icon--shipping{
  width:58px;
  height:42px;
}

.info-benefit-mask__icon--shipping img{
  width:137%;
  height:140%;
  object-fit:contain;
  display:block;
}

/* Mobile */
@media (max-width:768px){
  .info-benefit-mask__icon--shipping{
    width:52px;
    height:36px;
  }
}
@media (max-width:768px){
  .info-benefits-mask{
    grid-template-columns:1fr;
    gap:22px;
  }

  .info-benefit-mask__icon{
    width:38px;
    height:38px;
  }

  .info-benefit-mask__icon--wide{
    width:44px;
    height:28px;
  }

  .info-benefit-mask h3{
    font-size:15px;
  }

  .info-benefit-mask p{
    font-size:8px;
  }
}
/* =========================================================
   6.5) PRODUCTO - DETALLE (MOCKUP)
   ========================================================= */

.product-page{
  width: min(1200px, 92%);
  margin: 14px auto 40px;
}

/* ===== Top layout ===== */
.product-top{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 28px;
  align-items: start;
}



/* ===== Galería izquierda ===== */
.pd-gallery{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd-mainimg{
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 10px;
}

.pd-mainimg img{
  width: 100%;
  height: 360px;
  object-fit: contain;
  display: block;
}

.pd-thumbs{
  display: flex;
  gap: 10px;
}

.pd-thumb{
  width: 74px;
  height: 74px;
  padding: 3px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
}

.pd-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Panel derecho ===== */
.pd-title{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: #111;
}


.pd-sku{
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 12px;
}

/* Subgrid del panel derecho: spec (izq) + buy (der) */
.pd-rightgrid{
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 8px;
  align-items: start;
  margin-top: 30px;
}



/* Mantener box2 debajo de Características */
.pd-rightgrid .pd-box2{
  grid-column: 1;          /* SIEMPRE columna izquierda */
}

/* Mantener compra a la derecha y arriba, ocupando ambas filas */
.pd-rightgrid .pd-box--buy{
  grid-column: 2;          /* SIEMPRE columna derecha */
  grid-row: 1 / span 2;    /* ocupa 2 filas (alto de spec + box2) */
  align-self: start;
}

.pd-box{
  background: #f3f4f6;
  padding: 12px;
}

.pd-box2{
  background: #fff;
}


.pd-box-title{
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  color: #111;
}

.pd-spec-row{
  font-size: 12px;
  color: #111;
  margin: 4px 0;
  line-height: 1.25;
}
.pd-spec-row strong{ font-weight: 700; }

.pd-spec-label{
  display: inline-block;
}

.pd-spec-label--tooltip{
  position: relative;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  outline: none;
}

.pd-spec-label--tooltip::before,
.pd-spec-label--tooltip::after{
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
  z-index: 50;
}

.pd-spec-label--tooltip::before{
  content: "";
  left: 10px;
  top: 100%;
  border: 6px solid transparent;
  border-bottom-color: #f76600;
  transform: translateY(2px);
}

.pd-spec-label--tooltip::after{
  content: attr(data-tooltip);
  left: 0;
  top: calc(100% + 12px);
  width: max-content;
  max-width: 280px;
  padding: 9px 12px;
  background: #f76600;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(247,102,0,.25);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  white-space: normal;
  transform: translateY(2px);
}
.pd-spec-label--tooltip:hover::before,
.pd-spec-label--tooltip:hover::after,
.pd-spec-label--tooltip:focus::before,
.pd-spec-label--tooltip:focus::after{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* docs buttons */
.pd-docs{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start; /* alineados a la izquierda */
}

.pd-docbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 12px;
  font-size: 17px;        
  background: #5f5d5d;
  color: #fff;
  width: auto;
}
/* benefits list */
.pd-benefits{
  margin: 10px 0 0;
  padding-left: 0px;
  color: #111;
  font-size: 12px;
}
.pd-benefits li{ margin: 6px 0; }

.pd-note{
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
}

/* ===== Buy box (derecha) ===== */
.pd-box--buy{
  background: transparent; /* el mock se ve “limpio” */
  padding: 0;
}

.pd-price{
  padding-bottom: 6px;
}

.pd-price-now{
  font-size: 34px;
  font-weight: 700;
  color: #111;
  line-height: 1;
  margin-bottom: 6px;
}

.pd-price-old-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-price-old {
    font-size: 18px;
    color: #6b7280;
    text-decoration: line-through;
    line-height: 1;
    font-style: italic;
}

.pd-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.pd-stock {
  margin: 8px 0px 10px;
  font-size: 16px;
  color: #6e726e;
}
.pd-stock strong{ font-weight: 10; }













.pd-addcart:hover{ filter: brightness(.95); }

.pd-exec{
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 10px;
  background: #22c55e;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  width: calc(100% - 114px);
}

/* ===== Bottom layout: Descripción + Recomendados ===== */
.product-bottom{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.pd-desc h2{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}

.pd-desc-text{
  font-size: 13px;
  line-height: 1.6;
  color: #111;
  max-width: 680px;
}
.pd-desc-box{
  background: #f3f4f6;
  padding: 18px 20px;
  border-radius: 6px;
}

.pd-desc-text h2{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
}

.pd-desc-text h3{
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 10px;
}

.pd-desc-text p{
  margin: 0 0 12px;
}

.pd-desc-text ul,
.pd-desc-text ol{
  margin: 0 0 14px 20px;
  padding: 0;
}

.pd-desc-text li{
  margin-bottom: 6px;
}

.pd-desc-text strong{
  font-weight: 700;
}

.pd-desc-text em{
  font-style: italic;
}

/* recomendados como caja derecha */
.pd-reco{
  background: #f3f4f6;
  padding: 12px;
}

.pd-reco h3{
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 900;
}

/* fuerza recomendados a 1 card */
.pd-reco .product-grid {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-left: 14%;
}

.pd-reco{
  padding-bottom: 50px !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .product-top{
    grid-template-columns: 1fr;
  }

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

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

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

/* =========================================================
   7) FOOTER
   ========================================================= */
/* =========================================================
   FOOTER CNP NUEVO
   ========================================================= */

.cnp-footer{
  margin-top: 40px;
  width: 100%;
}

.cnp-footer__wrap{
  width: min(1240px, 94%);
  margin: 0 auto;
}

.cnp-footer__top{
  background: #4a4a4a;
  color: #fff;
  padding: 42px 0 38px;
}

.cnp-footer__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

.cnp-footer__col{
  text-align: center;
}

.cnp-footer__col h3{
  margin: 0 0 26px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.cnp-footer__textblock{
  margin-bottom: 26px;
}

.cnp-footer__textblock p{
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.45;
}

.cnp-footer__links{
  list-style: none;
  margin: 0;
  padding: 0;
}

.cnp-footer__links li{
  margin-bottom: 18px;
}

.cnp-footer__links a{
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.45;
}

.cnp-footer__links a:hover{
  opacity: .85;
}

.cnp-footer__payments{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.cnp-footer__payitem{
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cnp-footer__payimg{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.cnp-footer__payimg--webpay{
  max-width: 230px;
}

.cnp-footer__payimg--mercadopago{
  max-width: 230px;
}

/* franja media */
.cnp-footer__middle{
  background: #000;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.cnp-footer__middlewrap{
  min-height: 100px;
  display: grid;
  grid-template-columns: 320px 1fr 240px;
  align-items: center;
  gap: 20px;
}
.cnp-footer__social{
  display: flex;
  align-items: center;
  gap: 14px;
}

.cnp-footer__social a{
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: .2s ease;
}

.cnp-footer__social a:hover{
  border-color: #fff;
  transform: translateY(-1px);
}

.cnp-footer__social a svg{
  width: 22px;
  height: 22px;
  display: block;
  fill: #fff;
}
.cnp-footer__legal{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 42px;
  text-align: center;
  padding-left: 8px;
}

.cnp-footer__legal a{
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.cnp-footer__brand{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cnp-footer__brandimg{
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}

.cnp-footer__brandmock{
  color: #fff;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* franja inferior */
.cnp-footer__bottom{
  background: #000;
  color: #fff;
  padding: 18px 0 20px;
  border-top: 2px solid #fff;
}
.cnp-footer__bottom .cnp-footer__wrap{
  text-align: center;
}

.cnp-footer__bottom p{
  margin: 0;
  color: #fff;
  line-height: 1.35;
}

.cnp-footer__bottom p:first-child{
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
}

.cnp-footer__bottom p:last-child{
  font-size: 16px;
  font-weight: 400;
}

/* responsive */
@media (max-width: 980px){
  .cnp-footer__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cnp-footer__middlewrap{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 20px 0;
  }

  .cnp-footer__legal{
    flex-direction: column;
    gap: 18px;
  }

  .cnp-footer__brand{
    justify-content: center;
  }
}



/* =========================================================
   8.1) CHECKOUT / CART (PRO)
   ========================================================= */

.checkout{
  width: min(1200px, 92%);
  margin: 18px auto 50px;
}

.checkout__title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.checkout__grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

/* Card base */
.ck-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ck-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ck-card__head h2{
  margin: 0;
  font-size: 13px;
  font-weight: 200;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #111;
}

.ck-card__body{
  padding: 14px 16px;
}
.shipping-methods{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shipping-method{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.shipping-method input[type="radio"]{
  margin-top: 3px;
  flex-shrink: 0;
}

.shipping-method__content{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shipping-method__title{
  font-size: 14px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}

.shipping-method__desc{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.shipping-extra-fields{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shipping-extra-fields.is-hidden{
  display: none;
}


/* ---------- CART LIST (izquierda) ---------- */

.cart-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-row{
  display: grid;
  grid-template-columns: 72px 1fr 220px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.cart-row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.cart-thumb{
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.cart-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-info{
  min-width: 0;
}

.cart-name{
  font-weight: 200;
  font-size: 14px;
  line-height: 1.2;
  color: #111;
  margin: 0 0 6px;
}

.cart-meta{
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 2px 0;
}

.cart-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* Price */
.cart-price{
  text-align: right;
  white-space: nowrap;
}

.cart-price__label{
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cart-price__value{
  font-size: 14px;
  font-weight: 200;
  color: #111;
}

/* Qty stepper */
.qty{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 102px;
  grid-template-columns: 34px 46px 34px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
}

.qty button{
  border: 0;
  background: #f3f4f6;
  font-weight: 900;
  cursor: pointer;
}

.qty input{
  width: 46px;
  border: 0;
  outline: 0;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
}

/* Remove */
.btn-ghost{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  font-weight: 200;
  cursor: pointer;
}

.btn-ghost:hover{
  background: #f9fafb;
}

/* ---------- ORDER SUMMARY (derecha sticky) ---------- */

.summary{
  position: sticky;
  top: 16px;
}

.summary-lines{
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.sum-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  color: #111;
}

.sum-line small{
  font-weight: 700;
  color: var(--muted);
}

.sum-total{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sum-total .sum-line{
  font-size: 14px;
}

.sum-total .sum-line strong{
  font-size: 22px;
  font-weight: 900;
  color: #ff3b1f; /* coherente con price-now */
}

/* Buttons */
.btn-pay{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #ff3b1f;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  margin-top: 12px;
}

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

.btn-secondary{
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-weight: 100;
  cursor: pointer;
  margin-top: 10px;
}

.btn-secondary:hover{ background:#f9fafb; }

/* ---------- SHIPPING FORM (debajo izquierda) ---------- */

.ship{
  margin-top: 18px;
}

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

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

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

.field label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.field input{
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: 0;
  background: #fff;
  font-size: 14px;
  color: #111;
  font-family: 'Quicksand';
}

.field input:focus{
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255,90,31,.15);
}

/* Empty state */
.ck-empty{
  padding: 18px;
  color: #111;
}

.ck-empty p{
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px){
  .checkout__grid{
    grid-template-columns: 1fr;
  }
  .summary{
    position: static;
  }
}


/* =========================================================
   8) RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .header-main--target{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .header-contact--target{
    justify-self: start;
  }
  .main-nav{
    position: relative; /* necesario para el panel */
  }

  .nav-toggle{
    display: inline-flex;
  }

  /* panel móvil */
  .nav-links{
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);

    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 10px;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    z-index: 50;
  }

  .main-nav.is-open .nav-links{
    display: flex;
  }

  .nav-links li{ width: 100%; }

  .nav-links a{
    display: block;
    padding: 12px 10px;
    font-size: 16px;
    border-radius: 12px;
  }

  .nav-links a:hover{
    background: #f3f4f6;
  }
  
  .main-nav .nav-links{
    display: none !important;
  }

  /* muestra solo cuando esté abierto */
  .main-nav.is-open .nav-links{
    display: flex !important;
  }  
  .main-nav a{ font-size: 25px; }
  .cart-icon{ font-size: 36px; }

  .category-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-columns{ grid-template-columns: repeat(2, 1fr); }
  .hero-grid{ grid-template-columns: 1fr; }
}






.cart-preview{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cart-preview-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 18px 35px rgba(0,0,0,.14);
  padding: 14px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.cart-preview:hover .cart-preview-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cart-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-preview-header strong{
  font-size: 14px;
  font-weight: 800;
  color: #111;
}

.cart-preview-header span{
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.cart-preview-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-preview-item{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
}

.cart-preview-thumb{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f7f9;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-preview-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-preview-thumb-placeholder{
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.cart-preview-info{
  min-width: 0;
}

.cart-preview-name{
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-preview-meta{
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.cart-preview-line-total{
  font-size: 12px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.cart-preview-more{
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
}

.cart-preview-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.cart-preview-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cart-preview-total span{
  font-size: 13px;
  color: #6b7280;
  font-weight: 700;
}

.cart-preview-total strong{
  font-size: 18px;
  color: #111;
  font-weight: 900;
}

.cart-preview-button{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.cart-preview-button:hover{
  background: #2a2a2a;
  transform: translateY(-1px);
}

.cart-preview-empty{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-preview-empty strong{
  font-size: 14px;
  color: #111;
  font-weight: 800;
}

.cart-preview-empty span{
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}


.cart-preview-meta--old {
  text-decoration: line-through;
  opacity: .7;
  font-size: 12px;
}

.cart-preview-meta--discount {
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
}

.cart-preview-total--subtle {
  opacity: .8;
}

.cart-preview-total--discount {
  color: #15803d;
}
@media (max-width: 1024px){
  .cart-preview-dropdown{
    width: 320px;
    right: -8px;
  }
}



.cart-preview-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cart-preview-remove-form{
  margin: 0;
}

.cart-preview-remove{
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.cart-preview-remove:hover{
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.cart-preview-remove{
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #111;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.cart-preview-remove-icon{
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
}

.cart-preview-remove:hover{
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* =========================================================
   6.4.0) MENÚ CATEGORÍAS ABATIBLE
   ========================================================= */

.category-menu{
  margin-top: 18px;
}

.category-menu__toggle{
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.category-menu__toggle:hover{
  background: #f9fafb;
}

.category-menu__title{
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.category-menu__icon{
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.category-menu__icon::before,
.category-menu__icon::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: #4b5563;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}

.category-menu__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.category-menu.is-open .category-menu__icon::after{
  opacity: 0;
}

.category-menu__panel{
  margin-top: 12px;
}

/* =========================================================
   6.4.1) ACORDEÓN DE CATEGORÍAS EN SIDEBAR
   ========================================================= */
.filters-form--categories{
  margin-bottom: 18px;
}

.filters-form--categories h3{
  margin: 0 0 12px;
}

.category-accordion-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-accordion-item{
  border-top: 1px solid #ececec;
}

.category-accordion-item:first-child{
  border-top: 0;
}

.category-accordion-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.category-accordion-link{
  flex: 1;
  display: block;
  padding: 10px 0;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}

.category-accordion-link:hover{
  color: var(--primary);
}

.category-accordion-item.is-current > .category-accordion-row > .category-accordion-link{
  color: var(--primary);
  font-weight: 700;
}

.category-accordion-toggle{
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: 0 0 28px;
}

.category-accordion-toggle:hover{
  background: #f5f5f5;
}

.category-accordion-toggle__icon,
.category-accordion-toggle__icon::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #4b5563;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.category-accordion-toggle__icon::before{
  transform: translate(-50%, -50%) rotate(90deg);
}

.category-accordion-item.is-open > .category-accordion-row .category-accordion-toggle__icon::before{
  opacity: 0;
}

.category-accordion-panel{
  padding: 0 0 8px 14px;
}

.category-accordion-list--level-1,
.category-accordion-list--level-2,
.category-accordion-list--level-3{
  border-left: 1px solid #ececec;
}

.category-accordion-list--level-1 .category-accordion-link{
  font-size: 13px;
}

.category-accordion-list--level-2 .category-accordion-link,
.category-accordion-list--level-3 .category-accordion-link{
  font-size: 12px;
  color: #4b5563;
}

.category-accordion-empty{
  margin: 0;
  color: #6b7280;
}


.faq-admin-list {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.faq-admin-item {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 16px;
    background: #fafafa;
}

.faq-admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.faq-admin-title {
    font-weight: 700;
}

.faq-admin-remove {
    background: #dc3545;
}

.faq-admin-remove:hover {
    background: #b02a37;
}

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









/* =========================================================
   BLOG HOME
   ========================================================= */

.home-blog{
  padding:50px 0;
}

.home-section-title{
  font-size:28px;
  font-weight:700;
  margin-bottom:20px;
}

/* contenedor botones */
.blog-buttons{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

/* botón */
.blog-btn{
  background:#4a4a4a;
  color:#fff;
  border:none;
  border-radius:18px;

  padding:22px 24px;

  font-size:21px;
  line-height:1.3;

  cursor:pointer;
  transition:all .25s ease;

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

  min-height:90px;
}

.blog-btn:hover{
  background:#333;
  transform:translateY(-2px);
}



/* contenedor contenido */
.blog-container{
display:none;
margin-top:20px;
}

.blog-container.is-visible{
display:block;
}


/* TABLET */
@media (max-width: 1024px){

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

}

/* MOBILE */
@media (max-width: 600px){

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

  .blog-btn{
    font-size:16px;
    padding:18px;
    min-height:70px;
  }

}

.pd-cart-feedback{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.pd-cart-feedback--success{
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* ==============================
FAQ
============================== */

.faq{
  padding:60px 20px;
}

.faq__container{
  max-width:900px;
  margin:auto;
}

.faq__title{
  text-align:center;
  font-size:20px;
  font-weight:700;
  margin-bottom:30px;
}

.faq__item{
  border-bottom:1px solid #e5e5e5;
}

.faq__question{
  width:100%;
  background:none;
  border:none;
  padding:18px 0;
  text-align:left;
  font-size:18px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.faq__answer{
  display:none;
  padding:0 0 20px 0;
  color:#555;
  line-height:1.6;
}

.faq__item.is-open .faq__answer{
  display:block;
}

.faq__item.is-open .faq__icon{
  transform:rotate(180deg);
}
/* ==============================
   FAQ - Fuente igual al sitio
============================== */

.faq,
.faq__title,
.faq__question,
.faq__answer {
  font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.faq__question {
  color: #111;
  line-height: 1.35;
}

.faq__answer {
  font-size: 15px;
  font-weight: 400;
  color: #555;
}
/* =========================================================
   ORDER RESULT / CONFIRMACION DE COMPRA
   ========================================================= */

.order-result{
  padding: 32px 0 48px;
}

.order-result__card{
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 32px 28px;
  text-align: center;
}

.order-result__icon{
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
}

.order-result__icon--success{
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
}

.order-result__icon--pending{
  background: rgba(245, 158, 11, .14);
  color: #d97706;
}

.order-result__eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-result__title{
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #111;
}

.order-result__text{
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.order-result__summary{
  margin: 0 auto 22px;
  max-width: 560px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 16px;
  text-align: left;
}

.order-result__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.order-result__row:last-child{
  border-bottom: 0;
}

.order-result__row span{
  color: var(--muted);
  font-weight: 600;
}

.order-result__row strong{
  color: #111;
  font-weight: 800;
  text-align: right;
}

.order-result__box{
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
}

.order-result__box-title{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #111;
}

.order-result__box p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
}

.order-result__items{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-row.is-updating {
    opacity: 0.65;
    pointer-events: none;
}

.btn-plus.is-disabled,
.btn-minus.is-disabled,
.btn-plus:disabled,
.btn-minus:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cart-row__message {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ff5a1f;
}

.order-result__item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.order-result__item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.order-result__item-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-result__item-info strong{
  font-size: 14px;
  color: #111;
}

.order-result__item-info span{
  font-size: 12px;
  color: var(--muted);
}

.order-result__item-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.order-result__item-meta span{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.order-result__item-meta strong{
  font-size: 14px;
  color: #111;
}

.order-result__total{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.order-result__total span{
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.order-result__total strong{
  font-size: 22px;
  font-weight: 900;
  color: #ff3b1f;
}

.order-result__actions{
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.order-result__actions .btn{
  min-width: 200px;
}

.order-result__icon--error{
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
}






@media (max-width: 900px) {
  .cart-row {
    grid-template-columns: 1fr;
  }

  .cart-actions {
    width: 100%;
    justify-content: space-between;
  }
}


/* =========================================================
   estilo de logo de pago
   ========================================================= */
.payment-methods{
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.payment-option{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.payment-logo{
  display: block;
  width: auto !important;
  height: 28px !important;
  max-width: 130px !important;
  object-fit: contain;
}

.payment-option--mp .payment-logo{
  height: 22px !important;
  max-width: 110px !important;
}

.payment-option--webpay .payment-logo{
  height: 26px !important;
  max-width: 120px !important;
}
.pd-docbtn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}


.price-ppum {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.pd-price-ppum {
    font-size: 14px;
    color: #666;
    margin-top: 6px;
    margin-bottom: 10px;
}

.price-ppum--old,
.pd-price-ppum--old,
.product-card-alt__price-ppum--old {
  color: #777;
  text-decoration: line-through;
  font-size: 0.9em;
}

.liquidacion-page {
  padding: 30px 0;
}

.liquidacion-header {
  margin-bottom: 22px;
}

.liquidacion-header h1 {
  margin-bottom: 6px;
}

.liquidacion-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.liquidacion-products-wrap .product-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  margin: 0;
}

@media (max-width: 1100px) {
  .liquidacion-products-wrap .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .liquidacion-products-wrap .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .liquidacion-page .cat-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .liquidacion-products-wrap .product-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TERMINOS Y CONDICIONES
   ========================================================= */

.legal-page{
  padding: 34px 0 56px;
  background: #fff;
}

.legal-container{
  max-width: 980px;
}

.legal-header{
  margin-bottom: 22px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--soft);
}

.legal-eyebrow{
  display: inline-block;
  margin-bottom: 8px;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-header h1{
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 800;
  color: #111;
  line-height: 1.15;
}

.legal-header p{
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

.legal-index{
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
}

.legal-index a{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111;
  font-size: 13px;
  font-weight: 700;
}

.legal-index a:hover{
  background: #111;
  color: #fff;
}

.legal-content{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-block{
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
}

.legal-block h2{
  margin: 0 0 14px;
  color: #111;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.legal-block h3{
  margin: 18px 0 8px;
  color: #111;
  font-size: 16px;
  font-weight: 800;
}

.legal-block p,
.legal-block li{
  color: #374151;
  font-size: 15px;
  line-height: 1.75;
}

.legal-block p{
  margin: 0 0 10px;
}

.legal-block ul,
.legal-block ol{
  margin: 8px 0 12px 20px;
  padding: 0;
}

.legal-block li{
  margin-bottom: 7px;
}

.legal-block strong{
  color: #111;
  font-weight: 800;
}

@media (max-width: 640px){
  .legal-page{
    padding: 22px 0 40px;
  }

  .legal-header{
    padding: 22px 18px;
    border-radius: 18px;
  }

  .legal-header h1{
    font-size: 25px;
  }

  .legal-index{
    position: static;
    padding: 12px;
    border-radius: 16px;
  }

  .legal-index a{
    width: 100%;
    justify-content: center;
    min-height: 38px;
    font-size: 13px;
  }

  .legal-block{
    padding: 20px 16px;
    border-radius: 16px;
  }

  .legal-block h2{
    font-size: 18px;
  }

  .legal-block p,
  .legal-block li{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================================
   QUIENES SOMOS
========================================= */

.about-container{
  max-width: 1100px;
}

.about-hero{
  text-align: center;
  margin-bottom: 30px;
}

.about-hero h1{
  font-size: 34px;
  font-weight: 900;
  color: #111;
}

.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.about-card{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.about-card h2{
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 800;
}

.about-section{
  margin-top: 20px;
}

.about-section h2{
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 800;
}

.about-values{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-value{
  padding: 20px;
  border-radius: 16px;
  background: var(--soft);
}

.about-value h3{
  margin-bottom: 8px;
  font-weight: 800;
}

.about-value p{
  font-size: 14px;
  line-height: 1.6;
}

.about-value strong{
  display: block;
  margin-top: 10px;
  color: #ff5a1f;
  font-weight: 800;
}

.about-cta{
  margin-top: 40px;
  text-align: center;
}

.about-btn{
  display: inline-block;
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 700;
}

/* MOBILE */
@media (max-width: 640px){
  .about-grid,
  .about-values{
    grid-template-columns: 1fr;
  }

  .about-hero h1{
    font-size: 26px;
  }
}
/* =========================================================
   MENU SUPERIOR DESPLEGABLE CATEGORIAS - MEGA MENU LIMPIO
   ========================================================= */

@media (min-width: 1025px){

  .main-nav .nav-category-item{
    position: relative;
  }

  .main-nav .nav-category-trigger{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .16s ease;
  }

  /* Categorías del menú superior en naranja al hover / abierto */
  .main-nav .nav-category-item:hover > .nav-category-trigger,
  .main-nav .nav-category-item:focus-within > .nav-category-trigger{
    color: #ff5a1f;
  }

  .main-nav .nav-category-trigger::after{
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
  }

  .main-nav .nav-category-item:hover .nav-category-trigger::after,
  .main-nav .nav-category-item:focus-within .nav-category-trigger::after{
    transform: rotate(225deg) translateY(-2px);
  }

  .main-nav .nav-category-dropdown{
    position: absolute;
    top: 100%;
    left: 50%;

    width: min(900px, calc(100vw - 80px));
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.16);
    padding: 18px;
    margin-top: 10px;
    z-index: 999999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-42%) translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  /* Zona invisible para que no se cierre al bajar el mouse */
  .main-nav .nav-category-dropdown::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: transparent;
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-42%) translateY(0);
  }

  .main-nav .nav-category-menu,
  .main-nav .nav-category-submenu{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .main-nav .nav-category-menu{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 6px;
    width: 100%;
  }

  .main-nav .nav-category-menu-item{
    position: relative;
    min-width: 0;
  }

  .main-nav .nav-category-menu-item > a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: 100%;
    min-height: 42px;

    padding: 10px 12px !important;
    border-radius: 14px;

    font-size: 14px !important;
    font-weight: 650;
    line-height: 1.2;

    color: #111;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: normal;

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

  /* Categoría principal seleccionada con mouse */
  .main-nav .nav-category-menu-item > a:hover,
  .main-nav .nav-category-menu-item:hover > a,
  .main-nav .nav-category-menu-item:focus-within > a{
    background: #fff0ea;
    border-color: rgba(255,90,31,.22);
    color: #ff5a1f;
  }

  .main-nav .nav-category-arrow{
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 999px;

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

    background: #fff0ea;
    color: #ff5a1f;

    font-size: 20px;
    line-height: 1;
    opacity: 1;
    flex-shrink: 0;

    transition: background .16s ease, color .16s ease, transform .16s ease;
  }

  .main-nav .nav-category-menu-item:hover .nav-category-arrow,
  .main-nav .nav-category-menu-item:focus-within .nav-category-arrow{
    background: #ff5a1f;
    color: #fff;
    transform: translateX(2px);
  }

  .main-nav .nav-category-submenu{
    display: block !important;

    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 12px;
    width: 285px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
    padding: 12px !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

    z-index: 1000000;
  }

  .main-nav .nav-category-menu-item:hover > .nav-category-submenu,
  .main-nav .nav-category-menu-item:focus-within > .nav-category-submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .main-nav .nav-category-submenu li{
    width: 100%;
  }

  .main-nav .nav-category-submenu a{
    display: block !important;
    width: 100%;

    padding: 9px 11px !important;
    border-radius: 12px;

    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.25;

    color: #111;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: normal;

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

  /* Subcategoría seleccionada con mouse */
  .main-nav .nav-category-submenu a:hover,
  .main-nav .nav-category-submenu a:focus{
    background: #fff0ea;
    border-color: rgba(255,90,31,.22);
    color: #ff5a1f;
    transform: translateX(2px);
  }

  .main-nav .nav-category-menu-all{
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,.10);
  }

  .main-nav .nav-category-menu-all > a{
    justify-content: center;
    min-height: 56px;

    border-radius: 16px;
    font-size: 15px !important;
    font-weight: 850;

    color: #fff;
    background: linear-gradient(135deg, #ff5a1f, #ff7a1a);
    box-shadow: none;
  }

  .main-nav .nav-category-menu-all > a:hover{
    color: #fff;
    background: linear-gradient(135deg, #f04b12, #ff6a00);
    transform: none;
  }
}

@media (min-width: 1280px){

  .main-nav .nav-category-dropdown{
    width: 990px;
  }

  .main-nav .nav-category-menu{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) and (max-width: 1180px){

  .main-nav .nav-category-dropdown{
    width: min(760px, calc(100vw - 60px));
    transform: translateX(-38%) translateY(10px);
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    transform: translateX(-38%) translateY(0);
  }

  .main-nav .nav-category-menu{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main-nav .nav-category-menu-item > a{
    font-size: 13px !important;
    padding: 9px 10px !important;
  }

  .main-nav .nav-category-submenu{
    width: 250px;
  }
}

@media (max-width: 1024px){

  .main-nav .nav-category-trigger::after,
  .main-nav .nav-category-dropdown{
    display: none !important;
  }
}
/* =========================================
   CATÁLOGOS
========================================= */

.catalogos-page{
  padding: 34px 0 56px;
  background: #fff;
}

.catalogos-container{
  max-width: 1100px;
}

.catalogos-header{
  margin-bottom: 28px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--soft);
  text-align: center;
}

.catalogos-eyebrow{
  display: inline-block;
  margin-bottom: 8px;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalogos-header h1{
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 900;
  color: #111;
}

.catalogos-header p{
  margin: 0 auto;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

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

.catalogo-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.catalogo-card:hover{
  transform: translateY(-3px);
  border-color: #ffb38f;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

.catalogo-card__tag{
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff4ed;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.catalogo-card h2{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.18;
  color: #111;
}

.catalogo-card p{
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.65;
}

.catalogo-card__actions{
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.catalogo-btn{
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.catalogo-btn--primary{
  background: #111;
  color: #fff;
}

.catalogo-btn--secondary{
  background: #f3f4f6;
  color: #111;
}

.catalogo-btn:hover{
  filter: brightness(.96);
}

@media (max-width: 900px){
  .catalogos-grid{
    grid-template-columns: 1fr;
  }

  .catalogo-card{
    min-height: auto;
  }
}

@media (max-width: 640px){
  .catalogos-page{
    padding: 22px 0 40px;
  }

  .catalogos-header{
    padding: 22px 18px;
    border-radius: 18px;
  }

  .catalogos-header h1{
    font-size: 26px;
  }

  .catalogo-card{
    padding: 20px;
    border-radius: 18px;
  }

  .catalogo-card__actions{
    flex-direction: column;
  }

  .catalogo-btn{
    width: 100%;
  }
}

/* =========================================================
SOLO TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px){

  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  iframe{
    max-width: 100%;
    height: auto;
  }

  .container,
  .checkout,
  .product-page,
  .category-page,
  .category-header,
  .home-products h2,
  .home-products .product-grid{
    width: min(100%, 94%);
    max-width: 100%;
  }

  /* HEADER */
  .header-main--target{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0 10px;
    text-align: center;
  }

  .brand--target img{
    max-height: 68px;
    margin: 0 auto;
  }

  .header-contact--target{
    justify-self: center;
    text-align: center;
  }

  .header-contact--target .contact-row{
    justify-content: center;
  }

  .searchbar.searchbar--target{
    width: 100%;
  }

  /* NAV */
  .main-nav .nav-row{
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 12px;
  }

  .main-nav ul{
    gap: 0;
  }

  .main-nav a{
    font-size: 17px;
  }

  .cart-icon img{
    width: 36px;
    margin-right: 0 !important;
  }

  .cart-badge{
    right: 0 !important;
  }

  .nav-links{
    left: 16px;
    right: 16px;
    width: auto;
  }

  /* HOME */
  .home-banner-slider{
    aspect-ratio: 16 / 7;
  }

  .home-promos__container,
  .home-promos-3__container{
    width: min(100%, 94%);
  }

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

  .home-promos-3__container{
    grid-template-columns: repeat(2, 1fr);
  }

  .promo-card--small,
  .promo-card--big{
    height: auto;
    aspect-ratio: 16 / 7;
  }

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

  /* PRODUCTOS / CATEGORIAS */
  .product-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

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

  .category-filters{
    position: static;
  }

  .category-products .product-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-topbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .product-card{
    min-width: 0;
  }

  .product-image{
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .product-title{
    font-size: 16px;
  }

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

  .price-badge{
    font-size: 15px;
    height: 23px;
  }

  .btn-view{
    margin-right: 0 !important;
    font-size: 15px;
  }

  .btn-tech{
    max-width: 100%;
  }

  /* DETALLE PRODUCTO */
  .product-top{
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

  .pd-rightgrid .pd-box2,
  .pd-rightgrid .pd-box--buy{
    grid-column: auto;
    grid-row: auto;
  }

  .pd-mainimg img{
    height: auto;
    max-height: 360px;
  }

  .pd-thumbs{
    overflow-x: auto;
    padding-bottom: 4px;
  }

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

  .pd-addcart,
  .pd-exec{
    width: 100% !important;
  }

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

  .pd-reco .product-grid{
    margin-left: 0 !important;
    grid-template-columns: 1fr;
  }

  /* CARRITO / CHECKOUT */
  .checkout__grid{
    grid-template-columns: 1fr;
  }

  .summary{
    position: static;
  }

  .cart-row{
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }

  .cart-actions{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .shipping-methods,
  .shipping-extra-fields,
  .form-grid{
    grid-template-columns: 1fr;
  }

  /* FOOTER */
  .cnp-footer__grid,
  .cnp-footer__middlewrap{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .cnp-footer__legal{
    flex-direction: column;
    gap: 16px;
    padding-left: 0;
  }

  .cnp-footer__brand{
    justify-content: center;
  }
}



@media (max-width: 420px){

  .product-grid,
  .category-products .product-grid{
    gap: 12px;
  }

  .price-now{
    font-size: 18px;
  }

  .product-title{
    font-size: 13px;
  }

  .btn-view{
    font-size: 12px;
  }

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

  .cart-thumb{
    width: 72px;
    height: 72px;
  }
}

/* =========================================================
   MOBILE APP MENU / DRAWER
   Pegar al final del CSS
   ========================================================= */

@media (max-width: 1024px){

  .main-nav{
    position: relative;
    z-index: 99999;
  }

  .nav-toggle{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
  }

  .nav-toggle span{
    width: 22px;
    height: 2px;
    background: #111;
  }



  .main-nav.is-open::before{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav .nav-links{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;

    display: flex !important;
    flex-direction: column;
    gap: 4px;

    padding: 82px 18px 22px;
    margin: 0;

    background: #fff;
    border: 0;
    border-radius: 0 24px 24px 0;
    box-shadow: 18px 0 45px rgba(0,0,0,.22);

    transform: translateX(-105%);
    opacity: 1;
    visibility: visible;

    transition: transform .28s ease;
    z-index: 99999;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open .nav-links{
    transform: translateX(0);
  }

  .main-nav .nav-links::before{
    content: "Menú";
    position: absolute;
    top: 60px;
    left: 18px;
    right: 18px;

    height: 44px;
    display: flex;
    align-items: center;

    font-size: 22px;
    font-weight: 800;
    color: #111;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
  }

  .nav-links li{
    width: 100%;
  }

  .nav-links a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 50px;

    padding: 0 14px !important;
    border-radius: 16px;

    font-size: 17px !important;
    font-weight: 700;
    color: #111;

    background: #fff;
    border: 1px solid transparent;
  }

  .nav-links a::after{
    content: "›";
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
  }

  .nav-links a:hover,
  .nav-links a.is-active{
    background: #fff4ed;
    border-color: #ffd7c2;
    color: #ff5a1f;
  }

  .nav-links a:hover::after,
  .nav-links a.is-active::after{
    color: #ff5a1f;
  }

  .main-nav.is-open .nav-toggle{
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 100000;
    background: #111;
    border-color: #111;
  }

  .main-nav.is-open .nav-toggle span{
    background: #fff;
  }
}

  .mobile-wa-nav{
  display: none;
}


/* =========================================================
   FIX DEFINITIVO HEADER / MENÚ SUPERIOR DESKTOP
   Aplica desde 1025px hacia arriba.
   Objetivo:
   - Mantener el menú centrado.
   - Mantener el carrito centrado junto al menú.
   - Evitar que en 1366px / 1365px se desplace a los lados.
   ========================================================= */

@media (min-width: 1025px){

  /* Contenedor general del menú */
  .main-nav .nav-row{
    width: min(1200px, calc(100vw - 160px)); /* 80px por lado en pantallas chicas */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

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

    gap: 38px;
    padding: 0 0 12px;
  }

  /* Lista de páginas: Inicio, Cultura, etc. */
  .main-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;
    margin: 0;
    padding: 0;

    flex: 0 1 auto;
  }

  .main-nav a{
    font-size: var(--nav-font);
    white-space: nowrap;
  }

  /* Carrito centrado junto al menú */
  .cart-preview,
  .cart-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .cart-icon{
    padding: 0;
  }

  .cart-icon img{
    width: 42px;
    height: auto;
    display: block;
    margin-right: 0;
  }

  .cart-badge{
    top: -4px;
    right: -8px;
  }
}


/* =========================================================
   FIX HEADER / MENÚ SUPERIOR DESKTOP + TABLET HORIZONTAL
   Corrige:
   - Ventas pegado al borde en 1154px.
   - Menú desplazado a la izquierda.
   - Carrito demasiado a la derecha.
   - Mantiene 80px aprox. en 1366px y reduce ordenadamente en pantallas menores.
   ========================================================= */

/* Desktop normal */
@media (min-width: 1201px){

  .header-main--target{
    width: min(1200px, calc(100vw - 160px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 240px;
    align-items: center;
    gap: 16px;
  }

  .main-nav .nav-row{
    width: min(1200px, calc(100vw - 160px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;

    padding: 0 0 12px;
  }

  .main-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    margin: 0;
    padding: 0;
  }

  .main-nav a{
    font-size: 18px;
    white-space: nowrap;
  }

  .cart-preview,
  .cart-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-icon{
    padding: 0;
  }

  .cart-icon img{
    width: 42px;
    height: auto;
    margin-right: 0;
  }

  .cart-badge{
    top: -4px;
    right: -8px;
  }
}


/* =========================================================
   HEADER ENTRE 1025px Y 1200px
   Mantiene logo + buscador + ventas en la misma línea
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1200px){

  .header-main--target{
    width: calc(100vw - 80px); /* 40px por lado */
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 180px;
    align-items: center;
    gap: 20px;

    padding: 32px 0 8px;
  }

  .brand--target{
    grid-column: auto;
    justify-self: start;
    align-self: center;
  }

  .brand--target img{
    max-height: 58px;
    width: auto;
    display: block;
  }

  .searchbar.searchbar--target{
    grid-column: auto;
    width: 100%;
    min-width: 0;
  }

  .header-contact--target{
    grid-column: auto;
    justify-self: end;
    align-self: center;
    max-width: 180px;
    text-align: left;
  }

  .header-contact--target .contact-title{
    font-size: 21px;
  }

  .header-contact--target .contact-phone,
  .header-contact--target .contact-mail{
    font-size: 14px;
    white-space: nowrap;
  }

  .contact-wa img{
    width: 18px;
    height: 18px;
  }

  .main-nav .nav-row{
    width: calc(100vw - 80px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;

    padding: 0 0 12px;
  }

  .main-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
  }

  .main-nav a{
    font-size: 16px;
    white-space: nowrap;
  }

  .cart-preview,
  .cart-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .cart-icon{
    padding: 0;
  }

  .cart-icon img{
    width: 38px;
    height: auto;
    margin-right: 0;
  }

  .cart-badge{
    top: -4px;
    right: -8px;
  }
}

/* =========================================================
   MOBILE FINAL PRO - TODO EN UN SOLO BLOQUE
   ========================================================= */

@media (max-width: 640px){

  /* Base mobile */
  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .checkout,
  .product-page,
  .category-page,
  .category-header,
  .home-products h2,
  .home-products .product-grid{
    width: min(100%, 94%);
    max-width: 100%;
  }

  img,
  video,
  iframe{
    max-width: 100%;
    height: auto;
  }

  /* Header mobile */
  .header-main--target{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 0 8px !important;
    text-align: center !important;
  }

  .brand--target img{
    max-height: 56px !important;
    margin: 0 auto !important;
  }

  .header-contact--target{
    display: none !important;
  }

  /* Buscador normal mobile */
  .searchbar.searchbar--target{
    width: calc(100% - 28px) !important;
    height: 46px !important;
    margin: 8px auto 0 !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .searchbar.searchbar--target input{
    height: 42px !important;
    line-height: 42px !important;
    font-size: 16px !important;
    padding: 0 14px !important;
    border-radius: 16px 0 0 16px !important;
  }

  .searchbar.searchbar--target .searchbar-btn{
    width: 58px !important;
    height: 46px !important;
    border-radius: 0 16px 16px 0 !important;
  }

  .searchbar.searchbar--target .searchbar-icon{
    width: 24px !important;
    height: 24px !important;
  }

  /* Ocultar resultados si el buscador NO está activo */
  .search-suggestions,
  .search-suggestions.is-visible{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Buscador tipo app al enfocar */
  .header-main--target:has(.searchbar.searchbar--target:focus-within){
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 16px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within) .brand--target,
  .header-main--target:has(.searchbar.searchbar--target:focus-within) .header-contact--target{
    display: none !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .searchbar.searchbar--target{
    position: relative !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .searchbar.searchbar--target input{
    height: 48px !important;
    line-height: 48px !important;
    font-size: 16px !important;
    border-radius: 999px 0 0 999px !important;
    background: #f3f4f6 !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .searchbar.searchbar--target .searchbar-btn{
    height: 52px !important;
    border-radius: 0 999px 999px 0 !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestions,
  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestions.is-visible{
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    top: 86px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;

    z-index: 99999999 !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion{
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    gap: 8px !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion__content{
    min-width: 0 !important;
    width: 100% !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion__title{
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion__meta{
    font-size: 12px !important;
    color: #666 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .search-suggestion__price-wrap{
    display: none !important;
  }

  /* Nav mobile */
  .main-nav{
    position: relative !important;
    z-index: 99999 !important;
  }

  .main-nav .nav-row{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    padding: 12px 0 20px !important;
  }

  .nav-toggle{
    display: inline-flex !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
  }

  .nav-toggle span{
    width: 22px !important;
    height: 2px !important;
    background: #111 !important;
  }



  .main-nav.is-open::before{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav .nav-links{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: min(88vw, 340px) !important;
    height: 100vh !important;
    height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    padding: 110px 18px 22px !important;
    margin: 0 !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 18px 0 45px rgba(0,0,0,.22) !important;

    transform: translateX(-105%);
    opacity: 1;
    visibility: visible;

    transition: transform .28s ease;
    z-index: 99999;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open .nav-links{
    transform: translateX(0);
  }

  .main-nav .nav-links::before{
    content: "Menú";
    position: absolute;
    top: 60px;
    left: 14px;
    right: 14px;

    height: 44px;
    display: flex;
    align-items: center;

    font-size: 21px;
    font-weight: 800;
    color: #111;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
  }

  .nav-links li{
    width: 100%;
  }

  .nav-links a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 52px;

    padding: 0 14px !important;
    border-radius: 15px;

    font-size: 16px !important;
    font-weight: 700;
    color: #111;

    background: #fff;
    border: 1px solid transparent;
  }

  .nav-links a::after{
    content: "›";
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
  }

  .nav-links a:hover,
  .nav-links a.is-active{
    background: #fff4ed;
    border-color: #ffd7c2;
    color: #ff5a1f;
  }

  .nav-links a:hover::after,
  .nav-links a.is-active::after{
    color: #ff5a1f;
  }

  .main-nav.is-open .nav-toggle{
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 100000 !important;
    background: #111 !important;
    border-color: #111 !important;
  }

  .main-nav.is-open .nav-toggle span{
    background: #fff !important;
  }

  /* Carrito mobile */
  .cart-preview,
  .cart-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cart-icon{
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
  }

  .cart-icon img{
    width: 50px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }

  .cart-badge{
    top: 4px !important;
    right: 0 !important;
  }

  .cart-preview-dropdown{
    display: none !important;
  }

  /* Home mobile */
  .home-hero--full,
  .home-cats{
    display: none !important;
  }

  .home-promos,
  .home-promos-3,
  .home-products,
  .home-blog{
    padding-top: 18px !important;
  }

  .home-products h2,
  .home-section-title{
    font-size: 22px !important;
  }

  .home-promos-3__container,
  .blog-buttons{
    grid-template-columns: 1fr !important;
  }

  .promo-card--small,
  .promo-card--big{
    height: auto !important;
    aspect-ratio: 16 / 8 !important;
  }

  .blog-btn{
    font-size: 16px !important;
    min-height: 70px !important;
    padding: 16px !important;
  }

  /* Productos mobile */
  .product-grid,
  .category-products .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    row-gap: 70px;
  }

  .cat-products-wrap{
    padding: 10px !important;
  }

  .cat-box,
  .cat-products-wrap,
  .ck-card{
    border-radius: 14px !important;
  }

  .product-title{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .product-sku,
  .product-meta,
  .price-ppum{
    font-size: 11px !important;
  }

  .price-main{
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .price-now{
    font-size: 20px !important;
  }

  .price-old{
    font-size: 14px !important;
  }

  .price-badge{
    font-size: 12px !important;
    height: 21px !important;
    padding: 2px 7px !important;
  }

  .btn-view{
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    margin-right: 0 !important;
  }

  .btn-tech{
    height: auto !important;
    min-height: 24px !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Detalle producto mobile */
  .product-top,
  .pd-rightgrid,
  .product-bottom{
    grid-template-columns: 1fr !important;
  }

  .pd-rightgrid .pd-box2,
  .pd-rightgrid .pd-box--buy{
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .pd-title{
    font-size: 20px !important;
  }

  .pd-mainimg{
    padding: 8px !important;
  }

  .pd-mainimg img{
    height: auto !important;
    max-height: 300px !important;
  }

  .pd-thumbs{
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .pd-thumb{
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
  }

  .pd-price-now{
    font-size: 28px !important;
  }

  .pd-docbtn{
    font-size: 14px !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
  }

  .pd-desc-box{
    padding: 14px !important;
  }

  .pd-addcart,
  .pd-exec{
    width: 100% !important;
  }

  .pd-reco .product-grid{
    margin-left: 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* Carrito / Checkout mobile */
  .checkout__grid,
  .shipping-methods,
  .shipping-extra-fields,
  .form-grid{
    grid-template-columns: 1fr !important;
  }

  .summary{
    position: static !important;
  }

  .cart-row{
    grid-template-columns: 64px 1fr !important;
    gap: 12px !important;
  }

  .cart-thumb{
    width: 64px !important;
    height: 64px !important;
  }

  .cart-actions{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .cart-price{
    text-align: left !important;
  }

  .qty{
    min-width: 110px !important;
  }

  .btn-ghost{
    height: 34px !important;
    padding: 0 10px !important;
  }

  .payment-methods{
    justify-content: center !important;
  }

  /* Resultado orden */
  .order-result__card{
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  .order-result__title{
    font-size: 24px !important;
  }

  .order-result__row,
  .order-result__item,
  .order-result__total{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .order-result__item-meta{
    align-items: flex-start !important;
  }

  .order-result__actions .btn{
    width: 100% !important;
  }

  /* Footer mobile */
  .cnp-footer__top{
    padding: 30px 0 !important;
  }

  .cnp-footer__grid,
  .cnp-footer__middlewrap{
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .cnp-footer__col h3{
    font-size: 18px !important;
    margin-bottom: 18px !important;
  }

  .cnp-footer__textblock p,
  .cnp-footer__links a{
    font-size: 15px !important;
  }

  .cnp-footer__social{
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .cnp-footer__social a{
    width: 48px !important;
    height: 48px !important;
  }

  .cnp-footer__legal{
    flex-direction: column !important;
    gap: 16px !important;
    padding-left: 0 !important;
  }

  .cnp-footer__legal a{
    font-size: 15px !important;
  }

  .cnp-footer__payitem{
    width: 210px !important;
  }

  .cnp-footer__brand{
    justify-content: center !important;
  }

  .cnp-footer__brandimg{
    max-width: 150px !important;
  }
  
  /* Grid centrado */
  .pd-reco .product-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 20px !important;
  }

  /* Card centrada */
  .pd-reco .product-card{
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Imagen SOLO en recomendados */
  .pd-reco .product-card img{
    display: block !important;
    margin: 0 auto 10px !important;
  }

  /* Título */
  .pd-reco .product-title{
    text-align: center !important;
  }

  /* Precio */
  .pd-reco .price,
  .pd-reco .price-now{
    justify-content: center !important;
    text-align: center !important;
  }

  /* Botón SOLO en recomendados */
  .pd-reco .btn-view{
    display: inline-flex !important;
    margin: 10px auto 0 !important;
  }
  
   .cats-title-mobile{
    display: none !important;
  }
  


/* WhatsApp en header mobile */
.mobile-wa-nav{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;

  background: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
}

.mobile-wa-nav img{
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

}

/* =========================================================
   PRODUCTO - CATEGORÍAS RELACIONADAS
   ========================================================= */

.product-page > .product-related-cats{
  margin-top: 120px;
}

.product-page > .product-related-cats .product-related-cats__title{
  margin: 0 0 80px;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-page > .product-related-cats .home-cats{
  padding-top: 0;
}

html,
body{
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip){
  html,
  body{
    overflow-x: hidden;
  }
}
/* =========================================================
   FIX CHECKOUT DESKTOP / STICKY SUMMARY
   ========================================================= */

.checkout {
  width: min(1200px, 92%) !important;
  margin: 18px auto 50px !important;
}

.checkout__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 18px !important;
  align-items: start !important;
}

.checkout__main {
  min-width: 0 !important;
}

.summary {
  position: sticky !important;
  top: 90px !important;
  align-self: start !important;
  min-width: 0 !important;
  z-index: 5;
}



.summary .ck-card {
  width: 100% !important;
}

/* Solo en móvil dejamos el resumen abajo */
@media (max-width: 768px) {
  .checkout__grid {
    grid-template-columns: 1fr !important;
  }

  .summary {
    position: static !important;
  }
}
/* =========================================================
   CHECKOUT SUMMARY SHIPPING LABEL
   ========================================================= */

.summary-shipping-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 210px;
}

.summary-shipping-label small {
  display: inline-block;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .summary-shipping-label {
    max-width: 70%;
  }

  .summary-shipping-label small {
    max-width: 160px;
  }
}
@media (max-width: 899px) {
  .checkout__grid {
    grid-template-columns: 1fr !important;
  }

  .summary {
    position: static !important;
  }
}
/* =========================================================
   FIX CHECKOUT SELECTS
   ========================================================= */

.field select {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: 0;
  background: #fff;
  font-size: 14px;
  color: #111;
  font-family: 'Quicksand';
  width: 100%;
}

.field select:focus {
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255,90,31,.15);
}

.field select:disabled {
  background: #f5f5f5;
  color: #888;
  cursor: not-allowed;
}
/* =========================================================
   FIX MEGA MENÚ CATEGORÍAS CENTRADO EN PANTALLA
   Evita que el desplegable se salga cuando se agregan más
   pestañas al menú superior.
   ========================================================= */

:root{
  --category-dropdown-top: 145px;
}

@media (min-width: 1025px){

  .main-nav{
    position: relative;
    z-index: 99999;
  }

  .main-nav .nav-category-item{
    position: static;
  }

  .main-nav .nav-category-dropdown{
    position: fixed;
    top: var(--category-dropdown-top, 145px);
    left: 50%;
    right: auto;

    width: min(900px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    margin-top: 0;

    transform: translateX(-50%) translateY(10px);
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 1280px){
  .main-nav .nav-category-dropdown{
    width: min(990px, calc(100vw - 40px));
  }
}

@media (min-width: 1025px) and (max-width: 1180px){
  .main-nav .nav-category-dropdown{
    width: min(760px, calc(100vw - 40px));
    transform: translateX(-50%) translateY(10px);
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    transform: translateX(-50%) translateY(0);
  }
}

/* Submenús: al estar el mega menú centrado, los ítems de la última
   columna abren hacia la izquierda para no salirse del viewport. */
@media (min-width: 1025px) and (max-width: 1279px){
  .main-nav .nav-category-menu-item:nth-child(3n) > .nav-category-submenu{
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    transform: translateX(-8px);
  }

  .main-nav .nav-category-menu-item:nth-child(3n):hover > .nav-category-submenu,
  .main-nav .nav-category-menu-item:nth-child(3n):focus-within > .nav-category-submenu{
    transform: translateX(0);
  }
}

@media (min-width: 1280px){
  .main-nav .nav-category-menu-item:nth-child(4n) > .nav-category-submenu{
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    transform: translateX(-8px);
  }

  .main-nav .nav-category-menu-item:nth-child(4n):hover > .nav-category-submenu,
  .main-nav .nav-category-menu-item:nth-child(4n):focus-within > .nav-category-submenu{
    transform: translateX(0);
  }
}
/* Puente invisible entre "Categorías" y el mega menú.
   Evita que se cierre al mover el mouse hacia el modal. */
@media (min-width: 1025px){
  .main-nav .nav-category-dropdown::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: transparent;
    pointer-events: auto;
  }
}
/* ==============================
Buscador: sugerencias portable / responsive
============================== */

.header {
  position: relative;
  z-index: 1000;
}

.header-main {
  position: relative;
  z-index: 1200;
}

.searchbar--target {
  position: relative;
  z-index: 3000;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5000;

  display: none;
  width: 100%;
  max-height: min(520px, calc(100vh - 180px));
  overflow-y: auto;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.search-suggestions.is-visible {
  display: block;
}

.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 20px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.search-suggestion:hover,
.search-suggestion.is-active {
  background: #f7f7f7;
}

.search-suggestion__content {
  min-width: 0;
  flex: 1;
}

.search-suggestion__title {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}

.search-suggestion__meta {
  display: block;
  margin-top: 3px;
  color: #888;
  font-size: 0.92rem;
  line-height: 1.2;
}

.search-suggestion__price-wrap {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.search-suggestion__price {
  font-weight: 800;
}

.search-suggestion__discount {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 800;
}

.search-suggestion__old-price {
  display: block;
  margin-top: 2px;
  color: #999;
  font-size: 0.82rem;
  text-decoration: line-through;
}

.search-suggestion--empty,
.search-suggestion--all {
  justify-content: center;
  text-align: center;
}

/* Evita que el nav/carrito se monten encima del dropdown */
.main-nav {
  position: relative;
  z-index: 900;
}

.cart-preview {
  position: relative;
  z-index: 950;
}

/* Tablet / ancho intermedio */
@media (max-width: 1100px) {
  .searchbar--target {
    z-index: 5000;
  }

  .search-suggestions {
    max-height: min(460px, calc(100vh - 150px));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .searchbar--target {
    width: 100%;
  }

  .search-suggestions {
    left: 0;
    right: 0;
    max-height: min(430px, calc(100vh - 140px));
    border-radius: 0 0 14px 14px;
  }

  .search-suggestion {
    align-items: flex-start;
    padding: 13px 14px;
    gap: 10px;
  }

  .search-suggestion__title {
    font-size: 0.95rem;
  }

  .search-suggestion__meta {
    font-size: 0.82rem;
  }

  .search-suggestion__price-wrap {
    font-size: 0.9rem;
  }
}

/* ==============================
Corrección capas menú móvil / buscador
============================== */

/* Estado normal: sugerencias por encima de iconos móviles */
@media (max-width: 768px) {
  body:not(.nav-menu-open) .searchbar--target {
    position: relative;
    z-index: 30000 !important;
  }

  body:not(.nav-menu-open) .search-suggestions {
    z-index: 30010 !important;
  }

  body:not(.nav-menu-open) .main-nav {
    z-index: 1000 !important;
  }

  body:not(.nav-menu-open) .nav-toggle,
  body:not(.nav-menu-open) .mobile-wa-nav,
  body:not(.nav-menu-open) .cart-preview,
  body:not(.nav-menu-open) .cart-icon {
    z-index: 1000 !important;
  }
}

/* Estado con menú lateral abierto: menú por encima de todo */
body.nav-menu-open .main-nav {
  position: relative;
  z-index: 50000 !important;
}

body.nav-menu-open .nav-links {
  z-index: 50010 !important;
}

body.nav-menu-open .nav-toggle {
  z-index: 50020 !important;
}

body.nav-menu-open .searchbar--target {
  z-index: 100 !important;
}

body.nav-menu-open .search-suggestions {
  display: none !important;
}

/* Evita scroll del fondo cuando el menú lateral está abierto */
body.nav-menu-open {
  overflow: hidden;
}

/* ==============================
Menú móvil limpio: overlay + cierre exterior
============================== */

.mobile-menu-overlay {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 49000;
    display: none;
  }

  body.nav-menu-open .mobile-menu-overlay {
    display: block;
  }

  body.nav-menu-open .main-nav {
    z-index: 50000 !important;
  }

  body.nav-menu-open .nav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 50010 !important;

    width: min(82vw, 340px) !important;
    height: 100vh !important;
    padding: 82px 18px 28px !important;

    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;

    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.22);
    overflow-y: auto;
  }

  /*
   * Oculta el botón negro de cerrar cuando el menú ya está abierto.
   * El menú se cierra tocando fuera del panel.
   */
  body.nav-menu-open .nav-toggle {
    display: none !important;
  }

  body.nav-menu-open .searchbar--target,
  body.nav-menu-open .search-suggestions {
    display: none !important;
  }

  body.nav-menu-open {
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    background-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ==============================
FIX definitivo menú móvil lateral
============================== */

@media (max-width: 768px) {
  body.nav-menu-open {
    overflow: hidden !important;
  }

  /* Fondo oscuro SOLO detrás del panel */
  body.nav-menu-open .mobile-menu-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 80000 !important;
  }

  /* El nav queda por encima del overlay */
  body.nav-menu-open .main-nav,
  body.nav-menu-open .main-nav.is-open {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(82vw, 340px) !important;
    height: 100vh !important;
    z-index: 90000 !important;
    background: #ffffff !important;
    pointer-events: none !important;
  }

  /* Panel blanco */
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(82vw, 340px) !important;
    height: 100vh !important;
    z-index: 90010 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    padding: 64px 18px 28px !important;
    margin: 0 !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.24) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  /* Ocultar botón negro/X de forma agresiva */
  body.nav-menu-open .nav-toggle,
  body.nav-menu-open .main-nav .nav-toggle,
  body.nav-menu-open .main-nav.is-open .nav-toggle,
  body.nav-menu-open button.nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.nav-menu-open .nav-toggle span,
  body.nav-menu-open .main-nav .nav-toggle span,
  body.nav-menu-open .main-nav.is-open .nav-toggle span {
    display: none !important;
  }

  /* Ocultar elementos del header que no deben aparecer dentro del panel */
  body.nav-menu-open .searchbar--target,
  body.nav-menu-open .search-suggestions,
  body.nav-menu-open .mobile-wa-nav,
  body.nav-menu-open .cart-preview {
    display: none !important;
  }

  /* Links del panel */
  body.nav-menu-open .nav-links > li,
  body.nav-menu-open .nav-links > li > a {
    width: 100% !important;
  }

  body.nav-menu-open .nav-links > li > a {
    padding: 13px 14px !important;
    border-radius: 12px !important;
  }
}
/* ==============================
FIX visual menú móvil lateral
============================== */

@media (max-width: 768px) {
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    padding-top: 78px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 4px !important;
  }

  body.nav-menu-open .main-nav .nav-links::before,
  body.nav-menu-open .main-nav.is-open .nav-links::before {
    content: "Menú" !important;
    position: absolute !important;
    top: 28px !important;
    left: 18px !important;

    display: block !important;
    width: auto !important;
    height: auto !important;

    font-size: 1.35rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #111 !important;

    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.nav-menu-open .main-nav .nav-links > li,
  body.nav-menu-open .main-nav.is-open .nav-links > li {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
  }

  body.nav-menu-open .main-nav .nav-links > li > a,
  body.nav-menu-open .main-nav.is-open .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 14px !important;

    line-height: 1.15 !important;
    border-radius: 12px !important;
  }

  body.nav-menu-open .main-nav .nav-links > li > a.is-active,
  body.nav-menu-open .main-nav.is-open .nav-links > li > a.is-active {
    background: rgba(255, 75, 30, 0.06) !important;
    border: 1px solid rgba(255, 75, 30, 0.18) !important;
    color: #f04b24 !important;
  }
}


/* ==============================
FIX navegación menú móvil
============================== */

@media (max-width: 768px) {
  /*
   * El overlay existe visualmente/técnicamente, pero no captura clicks.
   * El cierre afuera lo maneja JS con document click capture.
   */
  body.nav-menu-open .mobile-menu-overlay,
  .mobile-menu-overlay {
    pointer-events: none !important;
  }

  /*
   * El contenedor nav puede no capturar eventos,
   * pero el panel y sus links sí.
   */
  body.nav-menu-open .main-nav,
  body.nav-menu-open .main-nav.is-open {
    pointer-events: none !important;
  }

  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links,
  body.nav-menu-open .main-nav .nav-links *,
  body.nav-menu-open .main-nav.is-open .nav-links * {
    pointer-events: auto !important;
  }

  body.nav-menu-open .main-nav .nav-links a,
  body.nav-menu-open .main-nav.is-open .nav-links a {
    cursor: pointer !important;
    position: relative !important;
    z-index: 90100 !important;
  }
}
/* ==============================
FIX: evitar descuadre del fondo al abrir menú móvil
============================== */

@media (max-width: 768px) {
  /*
   * No convertir todo el nav en fixed.
   * Eso descuadra el header/fondo.
   */
  body.nav-menu-open .main-nav,
  body.nav-menu-open .main-nav.is-open {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    z-index: 90000 !important;
    pointer-events: none !important;
  }

  /*
   * Solo el panel lateral es fixed.
   */
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    bottom: 12px !important;

    width: min(82vw, 340px) !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;

    z-index: 90010 !important;

    background: #ffffff !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.16) !important;

    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  /*
   * Overlay transparente solo para detectar click fuera.
   */
  body.nav-menu-open .mobile-menu-overlay,
  .mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80000 !important;
    display: block !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  /*
   * No ocultar ni mover elementos del fondo.
   * Solo evitar interacción con buscador/sugerencias mientras el menú está abierto.
   */
  body.nav-menu-open .search-suggestions {
    display: none !important;
  }

  /*
   * Mantener el fondo quieto, sin reflow raro.
   */
body.nav-menu-open {
  overflow: hidden !important;
  width: 100vw !important;
}
}
/* =========================================================
   1) TOKENS / BASE
   ========================================================= */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;

  --brand: #d13a2f;         /* rojo principal */
  --brand-2: #f59e0b;       /* acento */
  --soft: #f6f7f9;

  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);

  --container: 1200px;
  
  /* Header/Nav sizing (control rápido) */
  --header-pad-y: 42px;   /* alto del header superior (antes 18px) */
  --nav-font: 18px;       /* tamaño letras nav (antes 22px) */
  --logo-h: 82px;         /* alto logo (antes 94px) */  
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

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

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}


/* =========================================================
   2) HEADER (estilo referencia)
   ========================================================= */

/* Si todavía existe topbar en algún lado, la ocultamos */

.contact-wa img{
  width: 22px;     /* ajusta si lo quieres más grande */
  height: 22px;
  display: block;
}

.contact-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar{ display:none; }

.header--target{
  background: #fff;
  border-bottom: 0;
}

/* Logo | Buscador | Ventas */
.header-main--target{
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  align-items: center;
  gap: 16px; /* antes 24px */
  padding: var(--header-pad-y) 0 8px; /* controlado por token */
}

.brand--target img{
  max-height: var(--logo-h);
  width: auto;
  display: block;
}

/* Buscador (borde naranja + botón negro) */
.searchbar.searchbar--target {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  border: 2px solid #ff5a1f;
  border-radius: 12px;
  background: #fff;
  overflow: visible;
  box-shadow: none;
  z-index: 99999;
}
.searchbar.searchbar--target::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.searchbar.searchbar--target input {
  position: relative;
  z-index: 1;
  border-radius: 10px 0 0 10px;
}

.searchbar.searchbar--target .searchbar-btn {
  position: relative;
  z-index: 1;
  border-radius: 0 10px 10px 0;
}

.search-suggestions {
  z-index: 999999;
}
.header--target,
.header-main--target {
  position: relative;
  z-index: 9999;
}
.searchbar.searchbar--target input{
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0px 7px;
  height: 43px;
  line-height: 46px;
  font-size: 17px;
  background: #edeff0;
  font-family: "Quicksand", sans-serif;
}

.searchbar.searchbar--target .searchbar-btn{
  border: 0;
  background: #212121;
  color: #fff;
  width: 56px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.searchbar.searchbar--target .searchbar-icon{
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  
}

.search-suggestions{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;

  display: none;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.search-suggestions.is-visible{
  display: block;
}

.search-suggestion{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 11px 14px;
  text-decoration: none;
  color: #111;
  border-bottom: 1px solid #f1f1f1;
  background: #fff;
  transition: background 0.18s ease;
}

.search-suggestion:last-child{
  border-bottom: 0;
}

.search-suggestion:hover,
.search-suggestion.is-active{
  background: #f8f8f8;
}

.search-suggestion__content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.search-suggestion__title{
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion__meta{
  font-size: 12px;
  color: #777;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion__price-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.search-suggestion__price {
  font-size: 13px;
  font-weight: 800;
  color: #ff5a1f;
}

.search-suggestion__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff1e8;
  color: #ff5a1f;
  font-size: 11px;
  font-weight: 800;
}
.search-suggestion__discount {
  font-size: 10px;
  padding: 2px 5px;
  background: #ffe8dc;
  color: #ff5a1f;
}
.search-suggestion__old-price {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
}

.search-suggestion--all{
  font-size: 13px;
  font-weight: 700;
  color: #111;
  justify-content: center;
  background: #fafafa;
}

.search-suggestion--all:hover{
  background: #f2f2f2;
}

.search-suggestion--empty{
  display: block;
  padding: 12px 14px;
  font-size: 13px;
  color: #666;
}

@media (max-width: 768px){
  .search-suggestions{
    top: calc(100% + 4px);
  }

  .search-suggestion{
    padding: 10px 12px;
  }

  .search-suggestion__title{
    font-size: 13px;
  }

  .search-suggestion__meta{
    font-size: 11px;
  }

  .search-suggestion__price{
    font-size: 12px;
  }
}

/* Bloque VENTAS a la derecha */
.header-contact--target{
  justify-self: end;
  text-align: left;
  line-height: 1.1;
}

.header-contact--target .contact-title{
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .4px;
}

.header-contact--target .contact-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.header-contact--target .contact-phone{
  font-size: 16px;
  font-weight: 200;
}

.header-contact--target .contact-mail{
  font-size: 15px;
  color: #111;
  font-weight: 500;
}

.header-contact--target .contact-wa{
  font-size: 16px;
}

/* ==============================
   HOME BANNER SLIDER
============================== */

.home-hero--full,
.home-hero--full .hero-full{
  width: 100%;
  margin: 0;
  padding: 0;
}

.home-banner-single,
.home-banner-slider{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}

.home-banner-slider{
  aspect-ratio: 1920 / 500;
}

.home-banner-single img{
  width: 100%;
  height: auto;
  display: block;
}

.home-banner-track{
  position: relative;
  width: 100%;
  height: 100%;
}

.home-banner-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

.home-banner-slide.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.home-banner-slide a,
.home-banner-slide img{
  display: block;
  width: 100%;
  height: 100%;
}

.home-banner-slide img{
  object-fit: cover;
  object-position: center;
}

/* Animaciones */
.home-banner-slide.slide-in-right{
  animation: homeBannerInRight .5s ease forwards;
}

.home-banner-slide.slide-in-left{
  animation: homeBannerInLeft .5s ease forwards;
}

.home-banner-slide.slide-out-left{
  animation: homeBannerOutLeft .5s ease forwards;
}

.home-banner-slide.slide-out-right{
  animation: homeBannerOutRight .5s ease forwards;
}

@keyframes homeBannerInRight{
  from{
    transform: translateX(100%);
    opacity: 1;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes homeBannerInLeft{
  from{
    transform: translateX(-100%);
    opacity: 1;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes homeBannerOutLeft{
  from{
    transform: translateX(0);
    opacity: 1;
  }
  to{
    transform: translateX(-100%);
    opacity: 1;
  }
}

@keyframes homeBannerOutRight{
  from{
    transform: translateX(0);
    opacity: 1;
  }
  to{
    transform: translateX(100%);
    opacity: 1;
  }
}

/* Dots */
.home-banner-dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.home-banner-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, background .2s ease;
}

.home-banner-dot.is-active{
  background: #ffffff;
  transform: scale(1.2);
}

.home-banner-dot:hover{
  background: #ffffff;
}


/* =========================================================
   3) NAV (estilo referencia)
   ========================================================= */
.main-nav{
  background: #fff;
}

.main-nav .nav-row {
  display: grid;
  grid-template-columns: 13.3fr auto 1fr;
  gap: 32px;
  padding: 0px 102px 12px;
}

/* UL horizontal sin viñetas */
.main-nav ul{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;        /* antes 34px */
  margin: 0;
  padding: 0;
}

.main-nav a{
  font-size: var(--nav-font);
  font-weight: 490;
  padding: 4px;
}

.main-nav a:hover{ opacity: .85; }

.main-nav a.is-active{
  font-weight: 700;
}

.cart-icon{
  position: relative;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-icon img{
  width: 42px;
  height: auto;
  display: block;
  margin-right: 72px;
}

.cart-badge{
  position: absolute;
  top: 2px;
  right: 72px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff5a1f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- Botón hamburguesa (se muestra en móvil) ---------- */
/* =========================================================
   NAV HAMBURGER BUTTON
   ========================================================= */

.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;

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

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

/* hover suave */
.nav-toggle:hover{
  background: #f9fafb;
  border-color: #d1d5db;
}

/* líneas */
.nav-toggle span{
  position: absolute;
  width: 20px;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* posiciones */
.nav-toggle span:nth-child(1){ transform: translateY(-6px); }
.nav-toggle span:nth-child(2){ transform: translateY(0); }
.nav-toggle span:nth-child(3){ transform: translateY(6px); }

/* animación cuando menú está abierto */
.main-nav.is-open .nav-toggle span:nth-child(1){
  transform: rotate(45deg);
}

.main-nav.is-open .nav-toggle span:nth-child(2){
  opacity: 0;
}

.main-nav.is-open .nav-toggle span:nth-child(3){
  transform: rotate(-45deg);
}

/* =========================================================
   4) HOME - HERO / BANNERS
   ========================================================= */
.home-hero--full{
  padding: 0;
}

.hero-full{
  width: 100vw;
  margin-left: calc(50% - 50vw); /* truco para romper el container */
  border-radius: 0;
  overflow: hidden;
}

.hero-full img{
  width: 100%;
  height: auto;
  display: block;
}   
   
.home-hero,
.home-banners{
  padding: 7px 0 6px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}

.hero-card{
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  min-height: 220px;
  position: relative;
}

.hero-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-card .hero-tag{
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(0,0,0,.58);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

/* Carrusel banners (si lo usas) */
.banner-list{
  display: flex;
  overflow-x: auto;
  gap: 14px;
  padding: 6px 0 10px;
  scroll-snap-type: x mandatory;
}

.banner-item{
  flex: 0 0 78%;
  max-width: 78%;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}


/* =========================================================
   5) HOME - CATEGORÍAS
   ========================================================= */
.home-cats{
  background: #fff;
  padding: 50px 0 50px;
}

.home-cats__wrap{
  width: min(1200px, 92%);
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-cats__viewport{
  overflow: hidden;
  width: 100%;
}

.home-cats__track{
  display: flex;
  align-items: flex-start;
  gap: 28px;
  transition: transform .45s ease;
  will-change: transform;
}

.home-cat{
  flex: 0 0 95px;
  width: 120px;
  text-align: center;
  text-decoration: none;
  color: #111;
}

.home-cat__img{
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .2s ease;
}

.home-cat__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-cat__label{
  display: block;
  font-size: 11px;
  letter-spacing: .4px;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 650;
}

.home-cat:hover .home-cat__img{
  transform: translateY(-2px);
}

.home-cats__arrow{
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, opacity .2s ease;
}

.home-cats__arrow:hover{
  transform: scale(1.06);
}

.home-cats__arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Base de botones */
.pagination__link,
.pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
}

/* Hover */
.pagination__link:hover {
    border-color: #ff7a00;
    color: #ff7a00;
    background: #fff7f0;
}

/* Activo (página actual) */
.pagination__current {
    font-weight: 700;
    background: #ff7a00;
    color: #fff;
    border-color: #ff7a00;
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.25);
}

/* Botones anterior / siguiente */
.pagination__link:first-child,
.pagination__link:last-child {
    font-weight: 600;
    padding: 0 14px;
}

/* Disabled (si quieres agregarlo después) */
.pagination__disabled {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 768px){
  .home-cats__wrap{
    gap: 8px;
  }

  .home-cats__track{
    gap: 18px;
  }

  .home-cat{
    flex: 0 0 102px;
    width: 102px;
  }

  .home-cat__img{
    width: 82px;
    height: 82px;
  }

  .home-cats__arrow{
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 18px;
  }
}

@media (max-width: 520px){
  .home-cats{
    padding: 18px 0 22px;
  }

  .home-cats__wrap{
    width: 94%;
    gap: 6px;
  }

  .home-cats__track{
    gap: 14px;
  }

  .home-cat{
    flex: 0 0 96px;
    width: 96px;
  }

  .home-cat__img{
    width: 74px;
    height: 74px;
    margin-bottom: 8px;
  }

  .home-cat__label{
    font-size: 10px;
  }

  .home-cats__arrow{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 16px;
  }
}


/* =========================================================
  5.1) HOME - PROMOS / BANNERS
   ========================================================= */
.home-promos{
  padding: 20px 0 10px;
}

.home-promos__container{
  width: min(1200px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* columna izquierda */
.home-promos__left{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* tarjetas */
.promo-card{
  display: block;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.promo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tamaños */
.promo-card--small{
  height: 180px;
}

.promo-card--big{
  height: 380px;
}

/* barra naranja inferior (solo pequeños) */
.promo-bar{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(90deg,#f97316,#f59e0b);
}

/* hover suave */
.promo-card{
  transition: transform .2s ease;
}
.promo-card:hover{
  transform: translateY(-3px);
}

/* responsive */
@media (max-width: 1024px){
  .home-promos__container{
    grid-template-columns: 1fr;
  }

  .promo-card--big{
    height: 260px;
  }
}

/* =========================================================
   5.3) HOME - PROMOS 4 BLOQUES
   ========================================================= */
.home-promos-3{
  padding: 20px 0 10px;
}

.home-promos-3__container{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.promo3-card{
  position: relative;
  display: block;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  transition: transform .2s ease;
  aspect-ratio: 1 / 1;
}

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

.promo3-card img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.promo3-bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14px;
  
}

/* TABLET */
@media (max-width: 1024px){
  .home-promos-3__container{
    grid-template-columns: repeat(2, 1fr);
  }
}



/* =========================================================
   6) HOME - PRODUCTOS (ESTILO COMO REFERENCIA)
   ========================================================= */

.home-products{
  padding: 60px 0 60px;
}

/* margen a orillas como la referencia */
.home-products .product-grid{
  width: min(1200px, 92%);
  margin: 0 auto;
  margin-top: 60px;
}



.home-products__title{
  width: min(1200px, 92%);
  margin: 0 auto 60px; /* separación con lo que viene debajo */
  font-family: "Quicksand", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #111;
  line-height: 1.1;
}
/* =========================
   GRID
   ========================= */
.product-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  row-gap: 70px;
}

/* =========================
   CARD (con borde + padding)
   ========================= */
.product-card{
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0;         /* la referencia es recta */
  padding: 12px;
  box-shadow: none;
}

.product-card > a{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* =========================
   IMAGEN (más compacta)
   ========================= */
.product-image{
  width: 100%;
  height: 150px;            /* clave: evita imagen gigante */
  overflow: hidden;
  background: #fff;
  border: 0;
}

.product-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* estilo catálogo */
  display: block;
}

/* =========================
   TEXTO / TIPOS
   ========================= */
.product-info{
  padding: 10px 0 0;
}

.product-sku{
  font-size: 13px;
  color: #4b5563;           /* un poco más oscuro */
  margin: 0 0 6px;
}

.product-meta{
  font-size: 12px;
  color: #374151;           /* más oscuro que tu versión */
  margin: 2px 0;
}

/* =========================
   PRECIO + DESCUENTO
   ========================= */
.product-price-row{
  margin-top: 10px;
}

.price-main{
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-now{
  font-size: 28px;
  font-weight: 650;
  color: #ff3b1f;           /* rojo/naranjo */
}

/* badge negro como referencia */
.price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

/* precio antiguo abajo y tachado */
.price-old-row{
  margin-top: -1px;
}

.price-old{
  color: #6b7280;
  text-decoration: line-through;
  font-size: 18px;
  font-style: italic;
}

/* Si no hay descuento, no muestres badge raro (ej -0%) */
.price-badge.is-zero{
  display: none;
}

/* =========================
   BOTONES: ficha técnica + ver producto
   ========================= */
.product-actions{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-buyform{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.pd-qty {
    display: grid;
    grid-template-columns: 33px 42px 33px;
    width: 109px;
    height: 36px;
    border: 1px solid #d1d5db;
    background: #d9d9d9;
}

.pd-qtybtn{
  border: 0;
  background: #bfbfbf;
  font-weight: 900;
  font-size: 22px;
  cursor: pointer;
}

.pd-qty input{
  width: 100%;
  height: 100%;
  min-width: 0;

  border: 0;
  outline: 0;
  padding: 0;

  text-align: center;
  background: #f3f3f3;

  font-family: inherit;
  font-size: 16px;
  line-height: 36px;
}

.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.pd-qty input[type="number"]{
  -moz-appearance: textfield;
}
.pd-addcart{
  width: 100%;
  min-height: 58px;
  border: 0;
  background: #f76600;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  padding: 0 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: calc(100% - 114px);
}
/* botón gris chico */
.btn-tech{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 0px;
  background: #666666;
  font-size: 12px;
  color: #fff !important;
}

/* botón negro redondo */
.btn-view{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 17px;
}

/* hover */
.product-card:hover{
  border-color: #9ca3af;
}
.btn-view:hover{ background:#2b2b2b; }


/* =========================================================
   PRODUCT FILTERS - CLASES AISLADAS
   ========================================================= */

.product-filters{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-filters__title{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}

.product-filters__group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-filters__group + .product-filters__group{
  padding-top: 2px;
}

.product-filters__label{
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.product-filters__check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

.product-filters__check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #111;
  flex-shrink: 0;
}

.product-filters__select{
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.product-filters__select:focus{
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

.product-filters__select:hover{
  border-color: #9ca3af;
}

.product-filters__actions{
  padding-top: 6px;
}

.product-filters__submit{
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.product-filters__submit:hover{
  background: #2b2b2b;
  transform: translateY(-1px);
}

.product-filters__submit:active{
  transform: translateY(0);
}

@media (max-width: 1024px){
  .product-filters{
    gap: 16px;
  }
}


/* =========================================================
   PRODUCTOS ALT - MISMO LOOK, CLASES AISLADAS
   ========================================================= */

.product-grid-alt{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Card centrada */
.product-card-alt{
  width: 100%;
  max-width: 220px;
  text-align: center;
}

/* Imagen más pequeña */
.product-card-alt__image{
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  overflow: hidden;
}

.product-card-alt__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SKU más chico */
.product-card-alt__sku{
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* Título compacto */
.product-card-alt__title{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
}

/* PRECIO + BADGE EN LÍNEA */
.product-card-alt__price-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-card-alt__price-now{
  font-size: 27px;
  font-weight: 700;
  color: #ff3b1f;
}

/* Badge más chico */
.product-card-alt__price-badge{
  height: 27px;
  padding: 0 8px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

/* Precio antiguo centrado */
.product-card-alt__price-old-row{
  margin-top: 1px;
}

.product-card-alt__price-old {
    font-size: 18px;
    color: #6b7280;
    text-decoration: line-through;
    font-style: italic;
    margin-right: 30%;
}

/* BOTÓN centrado tipo pill */
.product-card-alt__actions{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* SOLO botón negro */
.btn-view-alt {
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-view-alt:hover{
  background: #2b2b2b;
}

.pd-reco h3.pd-reco-title {
    margin: 23px 0px 26px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}
/* ===== Ajustes finales catálogo ===== */

/* Card sin contorno */
.product-card{
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;          /* más como catálogo */
  background: transparent !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Si quieres un “aire” entre elementos sin borde */
.product-card > a{
  display: block;
  flex: 0 0 auto;
}
/* Imagen cuadrada */
.product-image{
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
  aspect-ratio: 1 / 1;            /* cuadrado */
  overflow: hidden;
}

.product-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info más compacta como referencia */
.product-info{
  padding: 10px 0 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-sku{
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

.product-title{
  font-size: 18px;
  font-weight: 591;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #111;
}

.product-meta{
  font-size: 14px;
  color: #6b7280;                 /* gris suave como referencia */
  font-weight: 500;
}

/* Botones alineados como catálogo */
.product-actions{
  margin-top: auto;
  padding-top: 10px;
  gap: 8px;
}
.btn-tech{
  height: 26px;
  border-radius: 0px;
  margin-right: auto;
}

.btn-view {
    height: 30px;
    border-radius: 999px;
    margin-right: 113px;
    margin-top: 8px;
}

.category-products .product-card .btn-view{
  margin-right: 0 !important;
  white-space: nowrap;
  width: fit-content;
  min-width: 112px;
  padding: 0 14px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px){
  .product-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .product-image{ height: 140px; }
}

@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr; }
  .product-image{ height: 170px; }
}



/* =========================================================
   6.2) CATEGORY PAGE (layout como la referencia)
   ========================================================= */

.category-header{
  width: min(1200px, 92%);
  margin: 14px auto 10px;
}

.category-header h1{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.category-header p{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

/* layout 2 columnas: filtros + productos */
.category-page{
  width: min(1200px, 92%);
  margin: 0 auto 30px;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}

/* caja blanca (filtros) */
.cat-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: var(--shadow-sm);
}

/* sidebar sticky suave */
.category-filters{
  position: sticky;
  top: 14px;
}

/* main */
.category-products{
  min-width: 0;
}

/* topbar ordenar + paginación */
.cat-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.cat-sort{
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-sort__label{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

/* select simple (si usas el fallback) */
.cat-sort__form{ margin: 0; }
.cat-sort__select{
  height: 36px;
  border: 0;
  border-bottom: 2px solid #d1d5db;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: 0;
  cursor: pointer;
}

/* contenedor productos como “panel” blanco */
.cat-products-wrap{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

/* fuerza grilla a 3 columnas EN CATEGORÍA (sin afectar home) */
.category-products .product-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  margin: 0;
  row-gap: 70px;
}

/* paginación si viene en <a> o botones */
.cat-pager a,
.cat-pager button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.cat-pager a.is-active,
.cat-pager .is-active{
  background: #111;
  color: #fff;
}

/* responsive */
@media (max-width: 1024px){
  .category-page{
    grid-template-columns: 1fr;
  }
  .category-filters{
    position: static;
  }
  .category-products .product-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-topbar{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px){
  .category-products .product-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   6.4.9) PRODUCTO - BREADCRUMB
   ========================================================= */

.pd-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
}

.pd-breadcrumb__link{
  color: #6b7280;
  text-decoration: none;
  transition: color .18s ease;
}

.pd-breadcrumb__link:hover{
  color: #111827;
}

.pd-breadcrumb__sep{
  color: #9ca3af;
}


/* =========================================================
   CATEGORY FRONT MASK - COMPACTO COMPLETO
   ========================================================= */

.category-front-mask{
  background:#fff;
  padding:8px 0 50px;
  font-family:"Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.category-front-mask__container{
  width:min(1200px, 94%);
  margin:0 auto;
}

/* Breadcrumb */
.breadcrumb-mask{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 18px;
  font-size:11px;
  line-height:1.2;
  color:#6b7280;
}

.breadcrumb-mask a,
.breadcrumb-mask strong,
.breadcrumb-mask span{
  color:#6b7280;
  font-weight:400;
  text-decoration:none;
}

.breadcrumb-mask strong{
  font-weight:500;
}

/* Categorías circulares */
.circle-cats-mask{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:18px;
  align-items:start;
  margin-bottom:30px;
}

.circle-cat-mask{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#000;
  text-decoration:none;
}

.circle-cat-mask__image{
  width:70px;
  height:70px;
  border-radius:999px;
  overflow:hidden;
  display:block;
  margin:0 0 9px;
  background:#e5e7eb;
  border:1px solid rgba(0,0,0,.08);
}

.circle-cat-mask__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.circle-cat-mask__title{
  display:block;
  font-size:8.8px;
  font-weight:800;
  line-height:1.12;
  text-transform:uppercase;
  color:#000;
}

/* Beneficios */
.info-benefits-mask{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
  text-align:center;
}

.info-benefit-mask{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.info-benefit-mask__icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000;
  margin-bottom:9px;
}

.info-benefit-mask__icon svg{
  width:42px;
  height:42px;
  display:block;
}

.info-benefit-mask h3{
  margin:0;
  font-size:16.5px;
  font-weight:500;
  line-height:1.12;
  color:#000;
}

.info-benefit-mask p{
  margin:8px 0 0;
  font-size:12.5px;
  font-weight:400;
  line-height:1.25;
  color:#111827;
}

.info-benefit-mask__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  margin-top:7px;
  padding:0 13px;
  border-radius:999px;
  background:#22d957;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

/* Hover suave */
.circle-cat-mask:hover .circle-cat-mask__image{
  transform:translateY(-1px);
}

.circle-cat-mask__image{
  transition:transform .18s ease;
}

.info-benefit-mask__button:hover{
  filter:brightness(.96);
}

/* Tablet */
@media (max-width:1024px){
  .circle-cats-mask{
    grid-template-columns:repeat(4, 1fr);
    gap:18px 14px;
    row-gap:20px;
  }

  .info-benefits-mask{
    gap:22px;
  }
}

/* Mobile */
@media (max-width:768px){
  .category-front-mask{
    padding:8px 0 16px;
  }

  .breadcrumb-mask{
    font-size:11px;
    margin-bottom:16px;
  }

  .circle-cats-mask{
    grid-template-columns:repeat(4, 1fr);
    gap:16px 10px;
    margin-bottom:24px;
  }

  .circle-cat-mask__image{
    width:62px;
    height:62px;
  }

  .circle-cat-mask__title{
    font-size:8px;
  }

  .info-benefits-mask{
    grid-template-columns:1fr;
    gap:22px;
  }

  .info-benefit-mask__icon{
    width:38px;
    height:38px;
  }

  .info-benefit-mask__icon svg{
    width:38px;
    height:38px;
  }

  .info-benefit-mask h3{
    font-size:15px;
  }

  .info-benefit-mask p{
    font-size:8px;
  }
}

/* Mobile chico */
@media (max-width:480px){
  .circle-cats-mask{
    grid-template-columns:repeat(2, 1fr);
  }

  .circle-cat-mask__image{
    width:66px;
    height:66px;
  }

  .circle-cat-mask__title{
    font-size:8.2px;
  }
}

/* =========================================================
   ICONOS BENEFICIOS CON IMAGEN
   ========================================================= */

.info-benefits-mask{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
  text-align:center;
}

.info-benefit-mask{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.info-benefit-mask__icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:9px;
}

.info-benefit-mask__icon img{
  width:171%;
  height:173%;
  object-fit:contain;
  display:block;
}

.info-benefit-mask__icon--wide{
  width:48px;
  height:32px;
}

.info-benefit-mask__icon--wide img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.info-benefit-mask h3{
  margin:0;
  font-size:16.5px;
  font-weight:500;
  line-height:1.12;
  color:#000;
}

.info-benefit-mask p{
  margin:8px 0 0;
  font-size: 12.5px;
  font-weight:400;
  line-height:1.25;
  color:#111827;
}

.info-benefit-mask__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  margin-top:7px;
  padding:0 13px;
  border-radius:999px;
  background:#22d957;
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

.info-benefit-mask__button:hover{
  filter:brightness(.96);
}
/* Ícono envío: ajuste independiente */
.info-benefit-mask__icon--shipping{
  width:58px;
  height:42px;
}

.info-benefit-mask__icon--shipping img{
  width:137%;
  height:140%;
  object-fit:contain;
  display:block;
}

/* Mobile */
@media (max-width:768px){
  .info-benefit-mask__icon--shipping{
    width:52px;
    height:36px;
  }
}
@media (max-width:768px){
  .info-benefits-mask{
    grid-template-columns:1fr;
    gap:22px;
  }

  .info-benefit-mask__icon{
    width:38px;
    height:38px;
  }

  .info-benefit-mask__icon--wide{
    width:44px;
    height:28px;
  }

  .info-benefit-mask h3{
    font-size:15px;
  }

  .info-benefit-mask p{
    font-size:8px;
  }
}
/* =========================================================
   6.5) PRODUCTO - DETALLE (MOCKUP)
   ========================================================= */

.product-page{
  width: min(1200px, 92%);
  margin: 14px auto 40px;
}

/* ===== Top layout ===== */
.product-top{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 28px;
  align-items: start;
}



/* ===== Galería izquierda ===== */
.pd-gallery{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd-mainimg{
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 10px;
}

.pd-mainimg img{
  width: 100%;
  height: 360px;
  object-fit: contain;
  display: block;
}

.pd-thumbs{
  display: flex;
  gap: 10px;
}

.pd-thumb{
  width: 74px;
  height: 74px;
  padding: 3px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
}

.pd-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Panel derecho ===== */
.pd-title{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: #111;
}


.pd-sku{
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 12px;
}

/* Subgrid del panel derecho: spec (izq) + buy (der) */
.pd-rightgrid{
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 8px;
  align-items: start;
  margin-top: 30px;
}



/* Mantener box2 debajo de Características */
.pd-rightgrid .pd-box2{
  grid-column: 1;          /* SIEMPRE columna izquierda */
}

/* Mantener compra a la derecha y arriba, ocupando ambas filas */
.pd-rightgrid .pd-box--buy{
  grid-column: 2;          /* SIEMPRE columna derecha */
  grid-row: 1 / span 2;    /* ocupa 2 filas (alto de spec + box2) */
  align-self: start;
}

.pd-box{
  background: #f3f4f6;
  padding: 12px;
}

.pd-box2{
  background: #fff;
}


.pd-box-title{
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  color: #111;
}

.pd-spec-row{
  font-size: 12px;
  color: #111;
  margin: 4px 0;
  line-height: 1.25;
}
.pd-spec-row strong{ font-weight: 700; }

.pd-spec-label{
  display: inline-block;
}

.pd-spec-label--tooltip{
  position: relative;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  outline: none;
}

.pd-spec-label--tooltip::before,
.pd-spec-label--tooltip::after{
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
  z-index: 50;
}

.pd-spec-label--tooltip::before{
  content: "";
  left: 10px;
  top: 100%;
  border: 6px solid transparent;
  border-bottom-color: #f76600;
  transform: translateY(2px);
}

.pd-spec-label--tooltip::after{
  content: attr(data-tooltip);
  left: 0;
  top: calc(100% + 12px);
  width: max-content;
  max-width: 280px;
  padding: 9px 12px;
  background: #f76600;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(247,102,0,.25);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  white-space: normal;
  transform: translateY(2px);
}
.pd-spec-label--tooltip:hover::before,
.pd-spec-label--tooltip:hover::after,
.pd-spec-label--tooltip:focus::before,
.pd-spec-label--tooltip:focus::after{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* docs buttons */
.pd-docs{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start; /* alineados a la izquierda */
}

.pd-docbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 12px;
  font-size: 17px;        
  background: #5f5d5d;
  color: #fff;
  width: auto;
}
/* benefits list */
.pd-benefits{
  margin: 10px 0 0;
  padding-left: 0px;
  color: #111;
  font-size: 12px;
}
.pd-benefits li{ margin: 6px 0; }

.pd-note{
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
}

/* ===== Buy box (derecha) ===== */
.pd-box--buy{
  background: transparent; /* el mock se ve “limpio” */
  padding: 0;
}

.pd-price{
  padding-bottom: 6px;
}

.pd-price-now{
  font-size: 34px;
  font-weight: 700;
  color: #111;
  line-height: 1;
  margin-bottom: 6px;
}

.pd-price-old-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-price-old {
    font-size: 18px;
    color: #6b7280;
    text-decoration: line-through;
    line-height: 1;
    font-style: italic;
}

.pd-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.pd-stock {
  margin: 8px 0px 10px;
  font-size: 16px;
  color: #6e726e;
}
.pd-stock strong{ font-weight: 10; }













.pd-addcart:hover{ filter: brightness(.95); }

.pd-exec{
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 10px;
  background: #22c55e;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  width: calc(100% - 114px);
}

/* ===== Bottom layout: Descripción + Recomendados ===== */
.product-bottom{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.pd-desc h2{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}

.pd-desc-text{
  font-size: 13px;
  line-height: 1.6;
  color: #111;
  max-width: 680px;
}
.pd-desc-box{
  background: #f3f4f6;
  padding: 18px 20px;
  border-radius: 6px;
}

.pd-desc-text h2{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
}

.pd-desc-text h3{
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 10px;
}

.pd-desc-text p{
  margin: 0 0 12px;
}

.pd-desc-text ul,
.pd-desc-text ol{
  margin: 0 0 14px 20px;
  padding: 0;
}

.pd-desc-text li{
  margin-bottom: 6px;
}

.pd-desc-text strong{
  font-weight: 700;
}

.pd-desc-text em{
  font-style: italic;
}

/* recomendados como caja derecha */
.pd-reco{
  background: #f3f4f6;
  padding: 12px;
}

.pd-reco h3{
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 900;
}

/* fuerza recomendados a 1 card */
.pd-reco .product-grid {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-left: 14%;
}

.pd-reco{
  padding-bottom: 50px !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .product-top{
    grid-template-columns: 1fr;
  }

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

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

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

/* =========================================================
   7) FOOTER
   ========================================================= */
/* =========================================================
   FOOTER CNP NUEVO
   ========================================================= */

.cnp-footer{
  margin-top: 40px;
  width: 100%;
}

.cnp-footer__wrap{
  width: min(1240px, 94%);
  margin: 0 auto;
}

.cnp-footer__top{
  background: #4a4a4a;
  color: #fff;
  padding: 42px 0 38px;
}

.cnp-footer__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

.cnp-footer__col{
  text-align: center;
}

.cnp-footer__col h3{
  margin: 0 0 26px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.cnp-footer__textblock{
  margin-bottom: 26px;
}

.cnp-footer__textblock p{
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.45;
}

.cnp-footer__links{
  list-style: none;
  margin: 0;
  padding: 0;
}

.cnp-footer__links li{
  margin-bottom: 18px;
}

.cnp-footer__links a{
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.45;
}

.cnp-footer__links a:hover{
  opacity: .85;
}

.cnp-footer__payments{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.cnp-footer__payitem{
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cnp-footer__payimg{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.cnp-footer__payimg--webpay{
  max-width: 230px;
}

.cnp-footer__payimg--mercadopago{
  max-width: 230px;
}

/* franja media */
.cnp-footer__middle{
  background: #000;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.cnp-footer__middlewrap{
  min-height: 100px;
  display: grid;
  grid-template-columns: 320px 1fr 240px;
  align-items: center;
  gap: 20px;
}
.cnp-footer__social{
  display: flex;
  align-items: center;
  gap: 14px;
}

.cnp-footer__social a{
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: .2s ease;
}

.cnp-footer__social a:hover{
  border-color: #fff;
  transform: translateY(-1px);
}

.cnp-footer__social a svg{
  width: 22px;
  height: 22px;
  display: block;
  fill: #fff;
}
.cnp-footer__legal{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 42px;
  text-align: center;
  padding-left: 8px;
}

.cnp-footer__legal a{
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.cnp-footer__brand{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cnp-footer__brandimg{
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}

.cnp-footer__brandmock{
  color: #fff;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* franja inferior */
.cnp-footer__bottom{
  background: #000;
  color: #fff;
  padding: 18px 0 20px;
  border-top: 2px solid #fff;
}
.cnp-footer__bottom .cnp-footer__wrap{
  text-align: center;
}

.cnp-footer__bottom p{
  margin: 0;
  color: #fff;
  line-height: 1.35;
}

.cnp-footer__bottom p:first-child{
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
}

.cnp-footer__bottom p:last-child{
  font-size: 16px;
  font-weight: 400;
}

/* responsive */
@media (max-width: 980px){
  .cnp-footer__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cnp-footer__middlewrap{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 20px 0;
  }

  .cnp-footer__legal{
    flex-direction: column;
    gap: 18px;
  }

  .cnp-footer__brand{
    justify-content: center;
  }
}



/* =========================================================
   8.1) CHECKOUT / CART (PRO)
   ========================================================= */

.checkout{
  width: min(1200px, 92%);
  margin: 18px auto 50px;
}

.checkout__title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.checkout__grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

/* Card base */
.ck-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ck-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ck-card__head h2{
  margin: 0;
  font-size: 13px;
  font-weight: 200;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #111;
}

.ck-card__body{
  padding: 14px 16px;
}
.shipping-methods{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shipping-method{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.shipping-method input[type="radio"]{
  margin-top: 3px;
  flex-shrink: 0;
}

.shipping-method__content{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shipping-method__title{
  font-size: 14px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}

.shipping-method__desc{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.shipping-extra-fields{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shipping-extra-fields.is-hidden{
  display: none;
}


/* ---------- CART LIST (izquierda) ---------- */

.cart-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-row{
  display: grid;
  grid-template-columns: 72px 1fr 220px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.cart-row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.cart-thumb{
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.cart-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-info{
  min-width: 0;
}

.cart-name{
  font-weight: 200;
  font-size: 14px;
  line-height: 1.2;
  color: #111;
  margin: 0 0 6px;
}

.cart-meta{
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 2px 0;
}

.cart-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* Price */
.cart-price{
  text-align: right;
  white-space: nowrap;
}

.cart-price__label{
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cart-price__value{
  font-size: 14px;
  font-weight: 200;
  color: #111;
}
 
/* Qty stepper */
.qty{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 102px;
  grid-template-columns: 34px 46px 34px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
}

.qty button{
  border: 0;
  background: #f3f4f6;
  font-weight: 900;
  cursor: pointer;
}

.qty input{
  width: 46px;
  border: 0;
  outline: 0;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
}

/* Remove */
.btn-ghost{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  font-weight: 200;
  cursor: pointer;
}

.btn-ghost:hover{
  background: #f9fafb;
}

/* ---------- ORDER SUMMARY (derecha sticky) ---------- */

.summary{
  position: sticky;
  top: 16px;
}

.summary-lines{
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.sum-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  color: #111;
}

.sum-line small{
  font-weight: 700;
  color: var(--muted);
}

.sum-total{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sum-total .sum-line{
  font-size: 14px;
}

.sum-total .sum-line strong{
  font-size: 22px;
  font-weight: 900;
  color: #ff3b1f; /* coherente con price-now */
}

/* Buttons */
.btn-pay{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #ff3b1f;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  margin-top: 12px;
}

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

.btn-secondary{
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-weight: 100;
  cursor: pointer;
  margin-top: 10px;
}

.btn-secondary:hover{ background:#f9fafb; }

/* ---------- SHIPPING FORM (debajo izquierda) ---------- */

.ship{
  margin-top: 18px;
}

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

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

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

.field label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.field input{
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: 0;
  background: #fff;
  font-size: 14px;
  color: #111;
  font-family: 'Quicksand';
}

.field input:focus{
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255,90,31,.15);
}

/* Empty state */
.ck-empty{
  padding: 18px;
  color: #111;
}

.ck-empty p{
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px){
  .checkout__grid{
    grid-template-columns: 1fr;
  }
  .summary{
    position: static;
  }
}


/* =========================================================
   8) RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .header-main--target{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .header-contact--target{
    justify-self: start;
  }
  .main-nav{
    position: relative; /* necesario para el panel */
  }

  .nav-toggle{
    display: inline-flex;
  }

  /* panel móvil */
  .nav-links{
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);

    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 10px;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    z-index: 50;
  }

  .main-nav.is-open .nav-links{
    display: flex;
  }

  .nav-links li{ width: 100%; }

  .nav-links a{
    display: block;
    padding: 12px 10px;
    font-size: 16px;
    border-radius: 12px;
  }

  .nav-links a:hover{
    background: #f3f4f6;
  }
  
  .main-nav .nav-links{
    display: none !important;
  }

  /* muestra solo cuando esté abierto */
  .main-nav.is-open .nav-links{
    display: flex !important;
  }  
  .main-nav a{ font-size: 25px; }
  .cart-icon{ font-size: 36px; }

  .category-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-columns{ grid-template-columns: repeat(2, 1fr); }
  .hero-grid{ grid-template-columns: 1fr; }
}






.cart-preview{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cart-preview-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 18px 35px rgba(0,0,0,.14);
  padding: 14px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.cart-preview:hover .cart-preview-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cart-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-preview-header strong{
  font-size: 14px;
  font-weight: 800;
  color: #111;
}

.cart-preview-header span{
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.cart-preview-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-preview-item{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
}

.cart-preview-thumb{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f7f9;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-preview-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-preview-thumb-placeholder{
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.cart-preview-info{
  min-width: 0;
}

.cart-preview-name{
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-preview-meta{
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.cart-preview-line-total{
  font-size: 12px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.cart-preview-more{
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
}

.cart-preview-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.cart-preview-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cart-preview-total span{
  font-size: 13px;
  color: #6b7280;
  font-weight: 700;
}

.cart-preview-total strong{
  font-size: 18px;
  color: #111;
  font-weight: 900;
}

.cart-preview-button{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.cart-preview-button:hover{
  background: #2a2a2a;
  transform: translateY(-1px);
}

.cart-preview-empty{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-preview-empty strong{
  font-size: 14px;
  color: #111;
  font-weight: 800;
}

.cart-preview-empty span{
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}


.cart-preview-meta--old {
  text-decoration: line-through;
  opacity: .7;
  font-size: 12px;
}

.cart-preview-meta--discount {
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
}

.cart-preview-total--subtle {
  opacity: .8;
}

.cart-preview-total--discount {
  color: #15803d;
}
@media (max-width: 1024px){
  .cart-preview-dropdown{
    width: 320px;
    right: -8px;
  }
}



.cart-preview-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cart-preview-remove-form{
  margin: 0;
}

.cart-preview-remove{
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.cart-preview-remove:hover{
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.cart-preview-remove{
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #111;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.cart-preview-remove-icon{
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
}

.cart-preview-remove:hover{
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* =========================================================
   6.4.0) MENÚ CATEGORÍAS ABATIBLE
   ========================================================= */

.category-menu{
  margin-top: 18px;
}

.category-menu__toggle{
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.category-menu__toggle:hover{
  background: #f9fafb;
}

.category-menu__title{
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.category-menu__icon{
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.category-menu__icon::before,
.category-menu__icon::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: #4b5563;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}

.category-menu__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.category-menu.is-open .category-menu__icon::after{
  opacity: 0;
}

.category-menu__panel{
  margin-top: 12px;
}

/* =========================================================
   6.4.1) ACORDEÓN DE CATEGORÍAS EN SIDEBAR
   ========================================================= */
.filters-form--categories{
  margin-bottom: 18px;
}

.filters-form--categories h3{
  margin: 0 0 12px;
}

.category-accordion-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-accordion-item{
  border-top: 1px solid #ececec;
}

.category-accordion-item:first-child{
  border-top: 0;
}

.category-accordion-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.category-accordion-link{
  flex: 1;
  display: block;
  padding: 10px 0;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}

.category-accordion-link:hover{
  color: var(--primary);
}

.category-accordion-item.is-current > .category-accordion-row > .category-accordion-link{
  color: var(--primary);
  font-weight: 700;
}

.category-accordion-toggle{
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: 0 0 28px;
}

.category-accordion-toggle:hover{
  background: #f5f5f5;
}

.category-accordion-toggle__icon,
.category-accordion-toggle__icon::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #4b5563;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.category-accordion-toggle__icon::before{
  transform: translate(-50%, -50%) rotate(90deg);
}

.category-accordion-item.is-open > .category-accordion-row .category-accordion-toggle__icon::before{
  opacity: 0;
}

.category-accordion-panel{
  padding: 0 0 8px 14px;
}

.category-accordion-list--level-1,
.category-accordion-list--level-2,
.category-accordion-list--level-3{
  border-left: 1px solid #ececec;
}

.category-accordion-list--level-1 .category-accordion-link{
  font-size: 13px;
}

.category-accordion-list--level-2 .category-accordion-link,
.category-accordion-list--level-3 .category-accordion-link{
  font-size: 12px;
  color: #4b5563;
}

.category-accordion-empty{
  margin: 0;
  color: #6b7280;
}


.faq-admin-list {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.faq-admin-item {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 16px;
    background: #fafafa;
}

.faq-admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.faq-admin-title {
    font-weight: 700;
}

.faq-admin-remove {
    background: #dc3545;
}

.faq-admin-remove:hover {
    background: #b02a37;
}

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









/* =========================================================
   BLOG HOME
   ========================================================= */

.home-blog{
  padding:50px 0;
}

.home-section-title{
  font-size:28px;
  font-weight:700;
  margin-bottom:20px;
}

/* contenedor botones */
.blog-buttons{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

/* botón */
.blog-btn{
  background:#4a4a4a;
  color:#fff;
  border:none;
  border-radius:18px;

  padding:22px 24px;

  font-size:21px;
  line-height:1.3;

  cursor:pointer;
  transition:all .25s ease;

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

  min-height:90px;
}

.blog-btn:hover{
  background:#333;
  transform:translateY(-2px);
}



/* contenedor contenido */
.blog-container{
display:none;
margin-top:20px;
}

.blog-container.is-visible{
display:block;
}


/* TABLET */
@media (max-width: 1024px){

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

}

/* MOBILE */
@media (max-width: 600px){

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

  .blog-btn{
    font-size:16px;
    padding:18px;
    min-height:70px;
  }

}

.pd-cart-feedback{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.pd-cart-feedback--success{
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* ==============================
FAQ
============================== */

.faq{
  padding:60px 20px;
}

.faq__container{
  max-width:900px;
  margin:auto;
}

.faq__title{
  text-align:center;
  font-size:20px;
  font-weight:700;
  margin-bottom:30px;
}

.faq__item{
  border-bottom:1px solid #e5e5e5;
}

.faq__question{
  width:100%;
  background:none;
  border:none;
  padding:18px 0;
  text-align:left;
  font-size:18px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.faq__answer{
  display:none;
  padding:0 0 20px 0;
  color:#555;
  line-height:1.6;
}

.faq__item.is-open .faq__answer{
  display:block;
}

.faq__item.is-open .faq__icon{
  transform:rotate(180deg);
}
/* ==============================
   FAQ - Fuente igual al sitio
============================== */

.faq,
.faq__title,
.faq__question,
.faq__answer {
  font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.faq__question {
  color: #111;
  line-height: 1.35;
}

.faq__answer {
  font-size: 15px;
  font-weight: 400;
  color: #555;
}
/* =========================================================
   ORDER RESULT / CONFIRMACION DE COMPRA
   ========================================================= */

.order-result{
  padding: 32px 0 48px;
}

.order-result__card{
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 32px 28px;
  text-align: center;
}

.order-result__icon{
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
}

.order-result__icon--success{
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
}

.order-result__icon--pending{
  background: rgba(245, 158, 11, .14);
  color: #d97706;
}

.order-result__eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-result__title{
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #111;
}

.order-result__text{
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.order-result__summary{
  margin: 0 auto 22px;
  max-width: 560px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 16px;
  text-align: left;
}

.order-result__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.order-result__row:last-child{
  border-bottom: 0;
}

.order-result__row span{
  color: var(--muted);
  font-weight: 600;
}

.order-result__row strong{
  color: #111;
  font-weight: 800;
  text-align: right;
}

.order-result__box{
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
}

.order-result__box-title{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #111;
}

.order-result__box p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
}

.order-result__items{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-row.is-updating {
    opacity: 0.65;
    pointer-events: none;
}

.btn-plus.is-disabled,
.btn-minus.is-disabled,
.btn-plus:disabled,
.btn-minus:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cart-row__message {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ff5a1f;
}

.order-result__item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.order-result__item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.order-result__item-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-result__item-info strong{
  font-size: 14px;
  color: #111;
}

.order-result__item-info span{
  font-size: 12px;
  color: var(--muted);
}

.order-result__item-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.order-result__item-meta span{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.order-result__item-meta strong{
  font-size: 14px;
  color: #111;
}

.order-result__total{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.order-result__total span{
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.order-result__total strong{
  font-size: 22px;
  font-weight: 900;
  color: #ff3b1f;
}

.order-result__actions{
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.order-result__actions .btn{
  min-width: 200px;
}

.order-result__icon--error{
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
}






@media (max-width: 900px) {
  .cart-row {
    grid-template-columns: 1fr;
  }

  .cart-actions {
    width: 100%;
    justify-content: space-between;
  }
}


/* =========================================================
   estilo de logo de pago
   ========================================================= */
.payment-methods{
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.payment-option{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.payment-logo{
  display: block;
  width: auto !important;
  height: 28px !important;
  max-width: 130px !important;
  object-fit: contain;
}

.payment-option--mp .payment-logo{
  height: 22px !important;
  max-width: 110px !important;
}

.payment-option--webpay .payment-logo{
  height: 26px !important;
  max-width: 120px !important;
}
.pd-docbtn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}


.price-ppum {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.pd-price-ppum {
    font-size: 14px;
    color: #666;
    margin-top: 6px;
    margin-bottom: 10px;
}

.price-ppum--old,
.pd-price-ppum--old,
.product-card-alt__price-ppum--old {
  color: #777;
  text-decoration: line-through;
  font-size: 0.9em;
}

.liquidacion-page {
  padding: 30px 0;
}

.liquidacion-header {
  margin-bottom: 22px;
}

.liquidacion-header h1 {
  margin-bottom: 6px;
}

.liquidacion-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.liquidacion-products-wrap .product-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  margin: 0;
}

@media (max-width: 1100px) {
  .liquidacion-products-wrap .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .liquidacion-products-wrap .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .liquidacion-page .cat-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .liquidacion-products-wrap .product-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TERMINOS Y CONDICIONES
   ========================================================= */

.legal-page{
  padding: 34px 0 56px;
  background: #fff;
}

.legal-container{
  max-width: 980px;
}

.legal-header{
  margin-bottom: 22px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--soft);
}

.legal-eyebrow{
  display: inline-block;
  margin-bottom: 8px;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-header h1{
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 800;
  color: #111;
  line-height: 1.15;
}

.legal-header p{
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

.legal-index{
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
}

.legal-index a{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111;
  font-size: 13px;
  font-weight: 700;
}

.legal-index a:hover{
  background: #111;
  color: #fff;
}

.legal-content{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-block{
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
}

.legal-block h2{
  margin: 0 0 14px;
  color: #111;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.legal-block h3{
  margin: 18px 0 8px;
  color: #111;
  font-size: 16px;
  font-weight: 800;
}

.legal-block p,
.legal-block li{
  color: #374151;
  font-size: 15px;
  line-height: 1.75;
}

.legal-block p{
  margin: 0 0 10px;
}

.legal-block ul,
.legal-block ol{
  margin: 8px 0 12px 20px;
  padding: 0;
}

.legal-block li{
  margin-bottom: 7px;
}

.legal-block strong{
  color: #111;
  font-weight: 800;
}

@media (max-width: 640px){
  .legal-page{
    padding: 22px 0 40px;
  }

  .legal-header{
    padding: 22px 18px;
    border-radius: 18px;
  }

  .legal-header h1{
    font-size: 25px;
  }

  .legal-index{
    position: static;
    padding: 12px;
    border-radius: 16px;
  }

  .legal-index a{
    width: 100%;
    justify-content: center;
    min-height: 38px;
    font-size: 13px;
  }

  .legal-block{
    padding: 20px 16px;
    border-radius: 16px;
  }

  .legal-block h2{
    font-size: 18px;
  }

  .legal-block p,
  .legal-block li{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================================
   QUIENES SOMOS
========================================= */

.about-container{
  max-width: 1100px;
}

.about-hero{
  text-align: center;
  margin-bottom: 30px;
}

.about-hero h1{
  font-size: 34px;
  font-weight: 900;
  color: #111;
}

.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.about-card{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.about-card h2{
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 800;
}

.about-section{
  margin-top: 20px;
}

.about-section h2{
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 800;
}

.about-values{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-value{
  padding: 20px;
  border-radius: 16px;
  background: var(--soft);
}

.about-value h3{
  margin-bottom: 8px;
  font-weight: 800;
}

.about-value p{
  font-size: 14px;
  line-height: 1.6;
}

.about-value strong{
  display: block;
  margin-top: 10px;
  color: #ff5a1f;
  font-weight: 800;
}

.about-cta{
  margin-top: 40px;
  text-align: center;
}

.about-btn{
  display: inline-block;
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 700;
}

/* MOBILE */
@media (max-width: 640px){
  .about-grid,
  .about-values{
    grid-template-columns: 1fr;
  }

  .about-hero h1{
    font-size: 26px;
  }
}
/* =========================================================
   MENU SUPERIOR DESPLEGABLE CATEGORIAS - MEGA MENU LIMPIO
   ========================================================= */

@media (min-width: 1025px){

  .main-nav .nav-category-item{
    position: relative;
  }

  .main-nav .nav-category-trigger{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .16s ease;
  }

  /* Categorías del menú superior en naranja al hover / abierto */
  .main-nav .nav-category-item:hover > .nav-category-trigger,
  .main-nav .nav-category-item:focus-within > .nav-category-trigger{
    color: #ff5a1f;
  }

  .main-nav .nav-category-trigger::after{
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
  }

  .main-nav .nav-category-item:hover .nav-category-trigger::after,
  .main-nav .nav-category-item:focus-within .nav-category-trigger::after{
    transform: rotate(225deg) translateY(-2px);
  }

  .main-nav .nav-category-dropdown{
    position: absolute;
    top: 100%;
    left: 50%;

    width: min(900px, calc(100vw - 80px));
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.16);
    padding: 18px;
    margin-top: 10px;
    z-index: 999999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-42%) translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  /* Zona invisible para que no se cierre al bajar el mouse */
  .main-nav .nav-category-dropdown::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: transparent;
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-42%) translateY(0);
  }

  .main-nav .nav-category-menu,
  .main-nav .nav-category-submenu{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .main-nav .nav-category-menu{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 6px;
    width: 100%;
  }

  .main-nav .nav-category-menu-item{
    position: relative;
    min-width: 0;
  }

  .main-nav .nav-category-menu-item > a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: 100%;
    min-height: 42px;

    padding: 10px 12px !important;
    border-radius: 14px;

    font-size: 14px !important;
    font-weight: 650;
    line-height: 1.2;

    color: #111;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: normal;

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

  /* Categoría principal seleccionada con mouse */
  .main-nav .nav-category-menu-item > a:hover,
  .main-nav .nav-category-menu-item:hover > a,
  .main-nav .nav-category-menu-item:focus-within > a{
    background: #fff0ea;
    border-color: rgba(255,90,31,.22);
    color: #ff5a1f;
  }

  .main-nav .nav-category-arrow{
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 999px;

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

    background: #fff0ea;
    color: #ff5a1f;

    font-size: 20px;
    line-height: 1;
    opacity: 1;
    flex-shrink: 0;

    transition: background .16s ease, color .16s ease, transform .16s ease;
  }

  .main-nav .nav-category-menu-item:hover .nav-category-arrow,
  .main-nav .nav-category-menu-item:focus-within .nav-category-arrow{
    background: #ff5a1f;
    color: #fff;
    transform: translateX(2px);
  }

  .main-nav .nav-category-submenu{
    display: block !important;

    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 12px;
    width: 285px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
    padding: 12px !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

    z-index: 1000000;
  }

  .main-nav .nav-category-menu-item:hover > .nav-category-submenu,
  .main-nav .nav-category-menu-item:focus-within > .nav-category-submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .main-nav .nav-category-submenu li{
    width: 100%;
  }

  .main-nav .nav-category-submenu a{
    display: block !important;
    width: 100%;

    padding: 9px 11px !important;
    border-radius: 12px;

    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.25;

    color: #111;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: normal;

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

  /* Subcategoría seleccionada con mouse */
  .main-nav .nav-category-submenu a:hover,
  .main-nav .nav-category-submenu a:focus{
    background: #fff0ea;
    border-color: rgba(255,90,31,.22);
    color: #ff5a1f;
    transform: translateX(2px);
  }

  .main-nav .nav-category-menu-all{
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,.10);
  }

  .main-nav .nav-category-menu-all > a{
    justify-content: center;
    min-height: 56px;

    border-radius: 16px;
    font-size: 15px !important;
    font-weight: 850;

    color: #fff;
    background: linear-gradient(135deg, #ff5a1f, #ff7a1a);
    box-shadow: none;
  }

  .main-nav .nav-category-menu-all > a:hover{
    color: #fff;
    background: linear-gradient(135deg, #f04b12, #ff6a00);
    transform: none;
  }
}

@media (min-width: 1280px){

  .main-nav .nav-category-dropdown{
    width: 990px;
  }

  .main-nav .nav-category-menu{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) and (max-width: 1180px){

  .main-nav .nav-category-dropdown{
    width: min(760px, calc(100vw - 60px));
    transform: translateX(-38%) translateY(10px);
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    transform: translateX(-38%) translateY(0);
  }

  .main-nav .nav-category-menu{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main-nav .nav-category-menu-item > a{
    font-size: 13px !important;
    padding: 9px 10px !important;
  }

  .main-nav .nav-category-submenu{
    width: 250px;
  }
}

@media (max-width: 1024px){

  .main-nav .nav-category-trigger::after,
  .main-nav .nav-category-dropdown{
    display: none !important;
  }
}
/* =========================================
   CATÁLOGOS
========================================= */

.catalogos-page{
  padding: 34px 0 56px;
  background: #fff;
}

.catalogos-container{
  max-width: 1100px;
}

.catalogos-header{
  margin-bottom: 28px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--soft);
  text-align: center;
}

.catalogos-eyebrow{
  display: inline-block;
  margin-bottom: 8px;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalogos-header h1{
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 900;
  color: #111;
}

.catalogos-header p{
  margin: 0 auto;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

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

.catalogo-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.catalogo-card:hover{
  transform: translateY(-3px);
  border-color: #ffb38f;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

.catalogo-card__tag{
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff4ed;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.catalogo-card h2{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.18;
  color: #111;
}

.catalogo-card p{
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.65;
}

.catalogo-card__actions{
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.catalogo-btn{
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.catalogo-btn--primary{
  background: #111;
  color: #fff;
}

.catalogo-btn--secondary{
  background: #f3f4f6;
  color: #111;
}

.catalogo-btn:hover{
  filter: brightness(.96);
}

@media (max-width: 900px){
  .catalogos-grid{
    grid-template-columns: 1fr;
  }

  .catalogo-card{
    min-height: auto;
  }
}

@media (max-width: 640px){
  .catalogos-page{
    padding: 22px 0 40px;
  }

  .catalogos-header{
    padding: 22px 18px;
    border-radius: 18px;
  }

  .catalogos-header h1{
    font-size: 26px;
  }

  .catalogo-card{
    padding: 20px;
    border-radius: 18px;
  }

  .catalogo-card__actions{
    flex-direction: column;
  }

  .catalogo-btn{
    width: 100%;
  }
}

/* =========================================================
SOLO TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px){

  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  iframe{
    max-width: 100%;
    height: auto;
  }

  .container,
  .checkout,
  .product-page,
  .category-page,
  .category-header,
  .home-products h2,
  .home-products .product-grid{
    width: min(100%, 94%);
    max-width: 100%;
  }

  /* HEADER */
  .header-main--target{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0 10px;
    text-align: center;
  }

  .brand--target img{
    max-height: 68px;
    margin: 0 auto;
  }

  .header-contact--target{
    justify-self: center;
    text-align: center;
  }

  .header-contact--target .contact-row{
    justify-content: center;
  }

  .searchbar.searchbar--target{
    width: 100%;
  }

  /* NAV */
  .main-nav .nav-row{
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 12px;
  }

  .main-nav ul{
    gap: 0;
  }

  .main-nav a{
    font-size: 17px;
  }

  .cart-icon img{
    width: 36px;
    margin-right: 0 !important;
  }

  .cart-badge{
    right: 0 !important;
  }

  .nav-links{
    left: 16px;
    right: 16px;
    width: auto;
  }

  /* HOME */
  .home-banner-slider{
    aspect-ratio: 16 / 7;
  }

  .home-promos__container,
  .home-promos-3__container{
    width: min(100%, 94%);
  }

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

  .home-promos-3__container{
    grid-template-columns: repeat(2, 1fr);
  }

  .promo-card--small,
  .promo-card--big{
    height: auto;
    aspect-ratio: 16 / 7;
  }

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

  /* PRODUCTOS / CATEGORIAS */
  .product-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

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

  .category-filters{
    position: static;
  }

  .category-products .product-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-topbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .product-card{
    min-width: 0;
  }

  .product-image{
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .product-title{
    font-size: 16px;
  }

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

  .price-badge{
    font-size: 15px;
    height: 23px;
  }

  .btn-view{
    margin-right: 0 !important;
    font-size: 15px;
  }

  .btn-tech{
    max-width: 100%;
  }

  /* DETALLE PRODUCTO */
  .product-top{
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

  .pd-rightgrid .pd-box2,
  .pd-rightgrid .pd-box--buy{
    grid-column: auto;
    grid-row: auto;
  }

  .pd-mainimg img{
    height: auto;
    max-height: 360px;
  }

  .pd-thumbs{
    overflow-x: auto;
    padding-bottom: 4px;
  }

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

  .pd-addcart,
  .pd-exec{
    width: 100% !important;
  }

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

  .pd-reco .product-grid{
    margin-left: 0 !important;
    grid-template-columns: 1fr;
  }

  /* CARRITO / CHECKOUT */
  .checkout__grid{
    grid-template-columns: 1fr;
  }

  .summary{
    position: static;
  }

  .cart-row{
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }

  .cart-actions{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .shipping-methods,
  .shipping-extra-fields,
  .form-grid{
    grid-template-columns: 1fr;
  }

  /* FOOTER */
  .cnp-footer__grid,
  .cnp-footer__middlewrap{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .cnp-footer__legal{
    flex-direction: column;
    gap: 16px;
    padding-left: 0;
  }

  .cnp-footer__brand{
    justify-content: center;
  }
}



@media (max-width: 420px){

  .product-grid,
  .category-products .product-grid{
    gap: 12px;
  }

  .price-now{
    font-size: 18px;
  }

  .product-title{
    font-size: 13px;
  }

  .btn-view{
    font-size: 12px;
  }

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

  .cart-thumb{
    width: 72px;
    height: 72px;
  }
}

/* =========================================================
   MOBILE APP MENU / DRAWER
   Pegar al final del CSS
   ========================================================= */

@media (max-width: 1024px){

  .main-nav{
    position: relative;
    z-index: 99999;
  }

  .nav-toggle{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
  }

  .nav-toggle span{
    width: 22px;
    height: 2px;
    background: #111;
  }



  .main-nav.is-open::before{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav .nav-links{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;

    display: flex !important;
    flex-direction: column;
    gap: 4px;

    padding: 82px 18px 22px;
    margin: 0;

    background: #fff;
    border: 0;
    border-radius: 0 24px 24px 0;
    box-shadow: 18px 0 45px rgba(0,0,0,.22);

    transform: translateX(-105%);
    opacity: 1;
    visibility: visible;

    transition: transform .28s ease;
    z-index: 99999;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open .nav-links{
    transform: translateX(0);
  }

  .main-nav .nav-links::before{
    content: "Menú";
    position: absolute;
    top: 60px;
    left: 18px;
    right: 18px;

    height: 44px;
    display: flex;
    align-items: center;

    font-size: 22px;
    font-weight: 800;
    color: #111;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
  }

  .nav-links li{
    width: 100%;
  }

  .nav-links a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 50px;

    padding: 0 14px !important;
    border-radius: 16px;

    font-size: 17px !important;
    font-weight: 700;
    color: #111;

    background: #fff;
    border: 1px solid transparent;
  }

  .nav-links a::after{
    content: "›";
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
  }

  .nav-links a:hover,
  .nav-links a.is-active{
    background: #fff4ed;
    border-color: #ffd7c2;
    color: #ff5a1f;
  }

  .nav-links a:hover::after,
  .nav-links a.is-active::after{
    color: #ff5a1f;
  }

  .main-nav.is-open .nav-toggle{
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 100000;
    background: #111;
    border-color: #111;
  }

  .main-nav.is-open .nav-toggle span{
    background: #fff;
  }
}

  .mobile-wa-nav{
  display: none;
}


/* =========================================================
   FIX DEFINITIVO HEADER / MENÚ SUPERIOR DESKTOP
   Aplica desde 1025px hacia arriba.
   Objetivo:
   - Mantener el menú centrado.
   - Mantener el carrito centrado junto al menú.
   - Evitar que en 1366px / 1365px se desplace a los lados.
   ========================================================= */

@media (min-width: 1025px){

  /* Contenedor general del menú */
  .main-nav .nav-row{
    width: min(1200px, calc(100vw - 160px)); /* 80px por lado en pantallas chicas */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

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

    gap: 38px;
    padding: 0 0 12px;
  }

  /* Lista de páginas: Inicio, Cultura, etc. */
  .main-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;
    margin: 0;
    padding: 0;

    flex: 0 1 auto;
  }

  .main-nav a{
    font-size: var(--nav-font);
    white-space: nowrap;
  }

  /* Carrito centrado junto al menú */
  .cart-preview,
  .cart-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .cart-icon{
    padding: 0;
  }

  .cart-icon img{
    width: 42px;
    height: auto;
    display: block;
    margin-right: 0;
  }

  .cart-badge{
    top: -4px;
    right: -8px;
  }
}


/* =========================================================
   FIX HEADER / MENÚ SUPERIOR DESKTOP + TABLET HORIZONTAL
   Corrige:
   - Ventas pegado al borde en 1154px.
   - Menú desplazado a la izquierda.
   - Carrito demasiado a la derecha.
   - Mantiene 80px aprox. en 1366px y reduce ordenadamente en pantallas menores.
   ========================================================= */

/* Desktop normal */
@media (min-width: 1201px){

  .header-main--target{
    width: min(1200px, calc(100vw - 160px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 240px;
    align-items: center;
    gap: 16px;
  }

  .main-nav .nav-row{
    width: min(1200px, calc(100vw - 160px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;

    padding: 0 0 12px;
  }

  .main-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    margin: 0;
    padding: 0;
  }

  .main-nav a{
    font-size: 18px;
    white-space: nowrap;
  }

  .cart-preview,
  .cart-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-icon{
    padding: 0;
  }

  .cart-icon img{
    width: 42px;
    height: auto;
    margin-right: 0;
  }

  .cart-badge{
    top: -4px;
    right: -8px;
  }
}


/* =========================================================
   HEADER ENTRE 1025px Y 1200px
   Mantiene logo + buscador + ventas en la misma línea
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1200px){

  .header-main--target{
    width: calc(100vw - 80px); /* 40px por lado */
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 180px;
    align-items: center;
    gap: 20px;

    padding: 32px 0 8px;
  }

  .brand--target{
    grid-column: auto;
    justify-self: start;
    align-self: center;
  }

  .brand--target img{
    max-height: 58px;
    width: auto;
    display: block;
  }

  .searchbar.searchbar--target{
    grid-column: auto;
    width: 100%;
    min-width: 0;
  }

  .header-contact--target{
    grid-column: auto;
    justify-self: end;
    align-self: center;
    max-width: 180px;
    text-align: left;
  }

  .header-contact--target .contact-title{
    font-size: 21px;
  }

  .header-contact--target .contact-phone,
  .header-contact--target .contact-mail{
    font-size: 14px;
    white-space: nowrap;
  }

  .contact-wa img{
    width: 18px;
    height: 18px;
  }

  .main-nav .nav-row{
    width: calc(100vw - 80px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;

    padding: 0 0 12px;
  }

  .main-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
  }

  .main-nav a{
    font-size: 16px;
    white-space: nowrap;
  }

  .cart-preview,
  .cart-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .cart-icon{
    padding: 0;
  }

  .cart-icon img{
    width: 38px;
    height: auto;
    margin-right: 0;
  }

  .cart-badge{
    top: -4px;
    right: -8px;
  }
}

/* =========================================================
   MOBILE FINAL PRO - TODO EN UN SOLO BLOQUE
   ========================================================= */

@media (max-width: 640px){

  /* Base mobile */
  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .checkout,
  .product-page,
  .category-page,
  .category-header,
  .home-products h2,
  .home-products .product-grid{
    width: min(100%, 94%);
    max-width: 100%;
  }

  img,
  video,
  iframe{
    max-width: 100%;
    height: auto;
  }

  /* Header mobile */
  .header-main--target{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 0 8px !important;
    text-align: center !important;
  }

  .brand--target img{
    max-height: 56px !important;
    margin: 0 auto !important;
  }

  .header-contact--target{
    display: none !important;
  }

  /* Buscador normal mobile */
  .searchbar.searchbar--target{
    width: calc(100% - 28px) !important;
    height: 46px !important;
    margin: 8px auto 0 !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .searchbar.searchbar--target input{
    height: 42px !important;
    line-height: 42px !important;
    font-size: 16px !important;
    padding: 0 14px !important;
    border-radius: 16px 0 0 16px !important;
  }

  .searchbar.searchbar--target .searchbar-btn{
    width: 58px !important;
    height: 46px !important;
    border-radius: 0 16px 16px 0 !important;
  }

  .searchbar.searchbar--target .searchbar-icon{
    width: 24px !important;
    height: 24px !important;
  }

  /* Ocultar resultados si el buscador NO está activo */
  .search-suggestions,
  .search-suggestions.is-visible{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Buscador tipo app al enfocar */
  .header-main--target:has(.searchbar.searchbar--target:focus-within){
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 16px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within) .brand--target,
  .header-main--target:has(.searchbar.searchbar--target:focus-within) .header-contact--target{
    display: none !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .searchbar.searchbar--target{
    position: relative !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .searchbar.searchbar--target input{
    height: 48px !important;
    line-height: 48px !important;
    font-size: 16px !important;
    border-radius: 999px 0 0 999px !important;
    background: #f3f4f6 !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .searchbar.searchbar--target .searchbar-btn{
    height: 52px !important;
    border-radius: 0 999px 999px 0 !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestions,
  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestions.is-visible{
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    top: 86px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;

    z-index: 99999999 !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion{
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    gap: 8px !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion__content{
    min-width: 0 !important;
    width: 100% !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion__title{
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .header-main--target:has(.searchbar.searchbar--target:focus-within)
  .search-suggestion__meta{
    font-size: 12px !important;
    color: #666 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .search-suggestion__price-wrap{
    display: none !important;
  }

  /* Nav mobile */
  .main-nav{
    position: relative !important;
    z-index: 99999 !important;
  }

  .main-nav .nav-row{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    padding: 12px 0 20px !important;
  }

  .nav-toggle{
    display: inline-flex !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
  }

  .nav-toggle span{
    width: 22px !important;
    height: 2px !important;
    background: #111 !important;
  }



  .main-nav.is-open::before{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav .nav-links{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: min(88vw, 340px) !important;
    height: 100vh !important;
    height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    padding: 110px 18px 22px !important;
    margin: 0 !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 18px 0 45px rgba(0,0,0,.22) !important;

    transform: translateX(-105%);
    opacity: 1;
    visibility: visible;

    transition: transform .28s ease;
    z-index: 99999;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open .nav-links{
    transform: translateX(0);
  }

  .main-nav .nav-links::before{
    content: "Menú";
    position: absolute;
    top: 60px;
    left: 14px;
    right: 14px;

    height: 44px;
    display: flex;
    align-items: center;

    font-size: 21px;
    font-weight: 800;
    color: #111;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
  }

  .nav-links li{
    width: 100%;
  }

  .nav-links a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 52px;

    padding: 0 14px !important;
    border-radius: 15px;

    font-size: 16px !important;
    font-weight: 700;
    color: #111;

    background: #fff;
    border: 1px solid transparent;
  }

  .nav-links a::after{
    content: "›";
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
  }

  .nav-links a:hover,
  .nav-links a.is-active{
    background: #fff4ed;
    border-color: #ffd7c2;
    color: #ff5a1f;
  }

  .nav-links a:hover::after,
  .nav-links a.is-active::after{
    color: #ff5a1f;
  }

  .main-nav.is-open .nav-toggle{
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 100000 !important;
    background: #111 !important;
    border-color: #111 !important;
  }

  .main-nav.is-open .nav-toggle span{
    background: #fff !important;
  }

  /* Carrito mobile */
  .cart-preview,
  .cart-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cart-icon{
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
  }

  .cart-icon img{
    width: 50px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }

  .cart-badge{
    top: 4px !important;
    right: 0 !important;
  }

  .cart-preview-dropdown{
    display: none !important;
  }

  /* Home mobile */
  .home-hero--full,
  .home-cats{
    display: none !important;
  }

  .home-promos,
  .home-promos-3,
  .home-products,
  .home-blog{
    padding-top: 18px !important;
  }

  .home-products h2,
  .home-section-title{
    font-size: 22px !important;
  }

  .home-promos-3__container,
  .blog-buttons{
    grid-template-columns: 1fr !important;
  }

  .promo-card--small,
  .promo-card--big{
    height: auto !important;
    aspect-ratio: 16 / 8 !important;
  }

  .blog-btn{
    font-size: 16px !important;
    min-height: 70px !important;
    padding: 16px !important;
  }

  /* Productos mobile */
  .product-grid,
  .category-products .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    row-gap: 70px;
  }

  .cat-products-wrap{
    padding: 10px !important;
  }

  .cat-box,
  .cat-products-wrap,
  .ck-card{
    border-radius: 14px !important;
  }

  .product-title{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .product-sku,
  .product-meta,
  .price-ppum{
    font-size: 11px !important;
  }

  .price-main{
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .price-now{
    font-size: 20px !important;
  }

  .price-old{
    font-size: 14px !important;
  }

  .price-badge{
    font-size: 12px !important;
    height: 21px !important;
    padding: 2px 7px !important;
  }

  .btn-view{
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    margin-right: 0 !important;
  }

  .btn-tech{
    height: auto !important;
    min-height: 24px !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Detalle producto mobile */
  .product-top,
  .pd-rightgrid,
  .product-bottom{
    grid-template-columns: 1fr !important;
  }

  .pd-rightgrid .pd-box2,
  .pd-rightgrid .pd-box--buy{
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .pd-title{
    font-size: 20px !important;
  }

  .pd-mainimg{
    padding: 8px !important;
  }

  .pd-mainimg img{
    height: auto !important;
    max-height: 300px !important;
  }

  .pd-thumbs{
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .pd-thumb{
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
  }

  .pd-price-now{
    font-size: 28px !important;
  }

  .pd-docbtn{
    font-size: 14px !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
  }

  .pd-desc-box{
    padding: 14px !important;
  }

  .pd-addcart,
  .pd-exec{
    width: 100% !important;
  }

  .pd-reco .product-grid{
    margin-left: 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* Carrito / Checkout mobile */
  .checkout__grid,
  .shipping-methods,
  .shipping-extra-fields,
  .form-grid{
    grid-template-columns: 1fr !important;
  }

  .summary{
    position: static !important;
  }

  .cart-row{
    grid-template-columns: 64px 1fr !important;
    gap: 12px !important;
  }

  .cart-thumb{
    width: 64px !important;
    height: 64px !important;
  }

  .cart-actions{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .cart-price{
    text-align: left !important;
  }

  .qty{
    min-width: 110px !important;
  }

  .btn-ghost{
    height: 34px !important;
    padding: 0 10px !important;
  }

  .payment-methods{
    justify-content: center !important;
  }

  /* Resultado orden */
  .order-result__card{
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  .order-result__title{
    font-size: 24px !important;
  }

  .order-result__row,
  .order-result__item,
  .order-result__total{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .order-result__item-meta{
    align-items: flex-start !important;
  }

  .order-result__actions .btn{
    width: 100% !important;
  }

  /* Footer mobile */
  .cnp-footer__top{
    padding: 30px 0 !important;
  }

  .cnp-footer__grid,
  .cnp-footer__middlewrap{
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .cnp-footer__col h3{
    font-size: 18px !important;
    margin-bottom: 18px !important;
  }

  .cnp-footer__textblock p,
  .cnp-footer__links a{
    font-size: 15px !important;
  }

  .cnp-footer__social{
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .cnp-footer__social a{
    width: 48px !important;
    height: 48px !important;
  }

  .cnp-footer__legal{
    flex-direction: column !important;
    gap: 16px !important;
    padding-left: 0 !important;
  }

  .cnp-footer__legal a{
    font-size: 15px !important;
  }

  .cnp-footer__payitem{
    width: 210px !important;
  }

  .cnp-footer__brand{
    justify-content: center !important;
  }

  .cnp-footer__brandimg{
    max-width: 150px !important;
  }
  
  /* Grid centrado */
  .pd-reco .product-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 20px !important;
  }

  /* Card centrada */
  .pd-reco .product-card{
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Imagen SOLO en recomendados */
  .pd-reco .product-card img{
    display: block !important;
    margin: 0 auto 10px !important;
  }

  /* Título */
  .pd-reco .product-title{
    text-align: center !important;
  }

  /* Precio */
  .pd-reco .price,
  .pd-reco .price-now{
    justify-content: center !important;
    text-align: center !important;
  }

  /* Botón SOLO en recomendados */
  .pd-reco .btn-view{
    display: inline-flex !important;
    margin: 10px auto 0 !important;
  }
  
   .cats-title-mobile{
    display: none !important;
  }
  


/* WhatsApp en header mobile */
.mobile-wa-nav{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;

  background: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
}

.mobile-wa-nav img{
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

}

/* =========================================================
   PRODUCTO - CATEGORÍAS RELACIONADAS
   ========================================================= */

.product-page > .product-related-cats{
  margin-top: 120px;
}

.product-page > .product-related-cats .product-related-cats__title{
  margin: 0 0 80px;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-page > .product-related-cats .home-cats{
  padding-top: 0;
}

html,
body{
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip){
  html,
  body{
    overflow-x: hidden;
  }
}
/* =========================================================
   FIX CHECKOUT DESKTOP / STICKY SUMMARY
   ========================================================= */

.checkout {
  width: min(1200px, 92%) !important;
  margin: 18px auto 50px !important;
}

.checkout__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 18px !important;
  align-items: start !important;
}

.checkout__main {
  min-width: 0 !important;
}

.summary {
  position: sticky !important;
  top: 90px !important;
  align-self: start !important;
  min-width: 0 !important;
  z-index: 5;
}



.summary .ck-card {
  width: 100% !important;
}

/* Solo en móvil dejamos el resumen abajo */
@media (max-width: 768px) {
  .checkout__grid {
    grid-template-columns: 1fr !important;
  }

  .summary {
    position: static !important;
  }
}
/* =========================================================
   CHECKOUT SUMMARY SHIPPING LABEL
   ========================================================= */

.summary-shipping-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 210px;
}

.summary-shipping-label small {
  display: inline-block;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .summary-shipping-label {
    max-width: 70%;
  }

  .summary-shipping-label small {
    max-width: 160px;
  }
}
@media (max-width: 899px) {
  .checkout__grid {
    grid-template-columns: 1fr !important;
  }

  .summary {
    position: static !important;
  }
}
/* =========================================================
   FIX CHECKOUT SELECTS
   ========================================================= */

.field select {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: 0;
  background: #fff;
  font-size: 14px;
  color: #111;
  font-family: 'Quicksand';
  width: 100%;
}

.field select:focus {
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255,90,31,.15);
}

.field select:disabled {
  background: #f5f5f5;
  color: #888;
  cursor: not-allowed;
}
/* =========================================================
   FIX MEGA MENÚ CATEGORÍAS CENTRADO EN PANTALLA
   Evita que el desplegable se salga cuando se agregan más
   pestañas al menú superior.
   ========================================================= */

:root{
  --category-dropdown-top: 145px;
}

@media (min-width: 1025px){

  .main-nav{
    position: relative;
    z-index: 99999;
  }

  .main-nav .nav-category-item{
    position: static;
  }

  .main-nav .nav-category-dropdown{
    position: fixed;
    top: var(--category-dropdown-top, 145px);
    left: 50%;
    right: auto;

    width: min(900px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    margin-top: 0;

    transform: translateX(-50%) translateY(10px);
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 1280px){
  .main-nav .nav-category-dropdown{
    width: min(990px, calc(100vw - 40px));
  }
}

@media (min-width: 1025px) and (max-width: 1180px){
  .main-nav .nav-category-dropdown{
    width: min(760px, calc(100vw - 40px));
    transform: translateX(-50%) translateY(10px);
  }

  .main-nav .nav-category-item:hover > .nav-category-dropdown,
  .main-nav .nav-category-item:focus-within > .nav-category-dropdown{
    transform: translateX(-50%) translateY(0);
  }
}

/* Submenús: al estar el mega menú centrado, los ítems de la última
   columna abren hacia la izquierda para no salirse del viewport. */
@media (min-width: 1025px) and (max-width: 1279px){
  .main-nav .nav-category-menu-item:nth-child(3n) > .nav-category-submenu{
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    transform: translateX(-8px);
  }

  .main-nav .nav-category-menu-item:nth-child(3n):hover > .nav-category-submenu,
  .main-nav .nav-category-menu-item:nth-child(3n):focus-within > .nav-category-submenu{
    transform: translateX(0);
  }
}

@media (min-width: 1280px){
  .main-nav .nav-category-menu-item:nth-child(4n) > .nav-category-submenu{
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    transform: translateX(-8px);
  }

  .main-nav .nav-category-menu-item:nth-child(4n):hover > .nav-category-submenu,
  .main-nav .nav-category-menu-item:nth-child(4n):focus-within > .nav-category-submenu{
    transform: translateX(0);
  }
}
/* Puente invisible entre "Categorías" y el mega menú.
   Evita que se cierre al mover el mouse hacia el modal. */
@media (min-width: 1025px){
  .main-nav .nav-category-dropdown::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: transparent;
    pointer-events: auto;
  }
}
/* ==============================
Buscador: sugerencias portable / responsive
============================== */

.header {
  position: relative;
  z-index: 1000;
}

.header-main {
  position: relative;
  z-index: 1200;
}

.searchbar--target {
  position: relative;
  z-index: 3000;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5000;

  display: none;
  width: 100%;
  max-height: min(520px, calc(100vh - 180px));
  overflow-y: auto;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.search-suggestions.is-visible {
  display: block;
}

.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 20px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.search-suggestion:hover,
.search-suggestion.is-active {
  background: #f7f7f7;
}

.search-suggestion__content {
  min-width: 0;
  flex: 1;
}

.search-suggestion__title {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}

.search-suggestion__meta {
  display: block;
  margin-top: 3px;
  color: #888;
  font-size: 0.92rem;
  line-height: 1.2;
}

.search-suggestion__price-wrap {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.search-suggestion__price {
  font-weight: 800;
}

.search-suggestion__discount {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 800;
}

.search-suggestion__old-price {
  display: block;
  margin-top: 2px;
  color: #999;
  font-size: 0.82rem;
  text-decoration: line-through;
}

.search-suggestion--empty,
.search-suggestion--all {
  justify-content: center;
  text-align: center;
}

/* Evita que el nav/carrito se monten encima del dropdown */
.main-nav {
  position: relative;
  z-index: 900;
}

.cart-preview {
  position: relative;
  z-index: 950;
}

/* Tablet / ancho intermedio */
@media (max-width: 1100px) {
  .searchbar--target {
    z-index: 5000;
  }

  .search-suggestions {
    max-height: min(460px, calc(100vh - 150px));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .searchbar--target {
    width: 100%;
  }

  .search-suggestions {
    left: 0;
    right: 0;
    max-height: min(430px, calc(100vh - 140px));
    border-radius: 0 0 14px 14px;
  }

  .search-suggestion {
    align-items: flex-start;
    padding: 13px 14px;
    gap: 10px;
  }

  .search-suggestion__title {
    font-size: 0.95rem;
  }

  .search-suggestion__meta {
    font-size: 0.82rem;
  }

  .search-suggestion__price-wrap {
    font-size: 0.9rem;
  }
}

/* ==============================
Corrección capas menú móvil / buscador
============================== */

/* Estado normal: sugerencias por encima de iconos móviles */
@media (max-width: 768px) {
  body:not(.nav-menu-open) .searchbar--target {
    position: relative;
    z-index: 30000 !important;
  }

  body:not(.nav-menu-open) .search-suggestions {
    z-index: 30010 !important;
  }

  body:not(.nav-menu-open) .main-nav {
    z-index: 1000 !important;
  }

  body:not(.nav-menu-open) .nav-toggle,
  body:not(.nav-menu-open) .mobile-wa-nav,
  body:not(.nav-menu-open) .cart-preview,
  body:not(.nav-menu-open) .cart-icon {
    z-index: 1000 !important;
  }
}

/* Estado con menú lateral abierto: menú por encima de todo */
body.nav-menu-open .main-nav {
  position: relative;
  z-index: 50000 !important;
}

body.nav-menu-open .nav-links {
  z-index: 50010 !important;
}

body.nav-menu-open .nav-toggle {
  z-index: 50020 !important;
}

body.nav-menu-open .searchbar--target {
  z-index: 100 !important;
}

body.nav-menu-open .search-suggestions {
  display: none !important;
}

/* Evita scroll del fondo cuando el menú lateral está abierto */
body.nav-menu-open {
  overflow: hidden;
}

/* ==============================
Menú móvil limpio: overlay + cierre exterior
============================== */

.mobile-menu-overlay {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 49000;
    display: none;
  }

  body.nav-menu-open .mobile-menu-overlay {
    display: block;
  }

  body.nav-menu-open .main-nav {
    z-index: 50000 !important;
  }

  body.nav-menu-open .nav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 50010 !important;

    width: min(82vw, 340px) !important;
    height: 100vh !important;
    padding: 82px 18px 28px !important;

    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;

    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.22);
    overflow-y: auto;
  }

  /*
   * Oculta el botón negro de cerrar cuando el menú ya está abierto.
   * El menú se cierra tocando fuera del panel.
   */
  body.nav-menu-open .nav-toggle {
    display: none !important;
  }

  body.nav-menu-open .searchbar--target,
  body.nav-menu-open .search-suggestions {
    display: none !important;
  }

  body.nav-menu-open {
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    background-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ==============================
FIX definitivo menú móvil lateral
============================== */

@media (max-width: 768px) {
  body.nav-menu-open {
    overflow: hidden !important;
  }

  /* Fondo oscuro SOLO detrás del panel */
  body.nav-menu-open .mobile-menu-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 80000 !important;
  }

  /* El nav queda por encima del overlay */
  body.nav-menu-open .main-nav,
  body.nav-menu-open .main-nav.is-open {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(82vw, 340px) !important;
    height: 100vh !important;
    z-index: 90000 !important;
    background: #ffffff !important;
    pointer-events: none !important;
  }

  /* Panel blanco */
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(82vw, 340px) !important;
    height: 100vh !important;
    z-index: 90010 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    padding: 64px 18px 28px !important;
    margin: 0 !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.24) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  /* Ocultar botón negro/X de forma agresiva */
  body.nav-menu-open .nav-toggle,
  body.nav-menu-open .main-nav .nav-toggle,
  body.nav-menu-open .main-nav.is-open .nav-toggle,
  body.nav-menu-open button.nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.nav-menu-open .nav-toggle span,
  body.nav-menu-open .main-nav .nav-toggle span,
  body.nav-menu-open .main-nav.is-open .nav-toggle span {
    display: none !important;
  }

  /* Ocultar elementos del header que no deben aparecer dentro del panel */
  body.nav-menu-open .searchbar--target,
  body.nav-menu-open .search-suggestions,
  body.nav-menu-open .mobile-wa-nav,
  body.nav-menu-open .cart-preview {
    display: none !important;
  }

  /* Links del panel */
  body.nav-menu-open .nav-links > li,
  body.nav-menu-open .nav-links > li > a {
    width: 100% !important;
  }

  body.nav-menu-open .nav-links > li > a {
    padding: 13px 14px !important;
    border-radius: 12px !important;
  }
}
/* ==============================
FIX visual menú móvil lateral
============================== */

@media (max-width: 768px) {
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    padding-top: 78px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 4px !important;
  }

  body.nav-menu-open .main-nav .nav-links::before,
  body.nav-menu-open .main-nav.is-open .nav-links::before {
    content: "Menú" !important;
    position: absolute !important;
    top: 28px !important;
    left: 18px !important;

    display: block !important;
    width: auto !important;
    height: auto !important;

    font-size: 1.35rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #111 !important;

    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.nav-menu-open .main-nav .nav-links > li,
  body.nav-menu-open .main-nav.is-open .nav-links > li {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
  }

  body.nav-menu-open .main-nav .nav-links > li > a,
  body.nav-menu-open .main-nav.is-open .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 14px !important;

    line-height: 1.15 !important;
    border-radius: 12px !important;
  }

  body.nav-menu-open .main-nav .nav-links > li > a.is-active,
  body.nav-menu-open .main-nav.is-open .nav-links > li > a.is-active {
    background: rgba(255, 75, 30, 0.06) !important;
    border: 1px solid rgba(255, 75, 30, 0.18) !important;
    color: #f04b24 !important;
  }
}


/* ==============================
FIX navegación menú móvil
============================== */

@media (max-width: 768px) {
  /*
   * El overlay existe visualmente/técnicamente, pero no captura clicks.
   * El cierre afuera lo maneja JS con document click capture.
   */
  body.nav-menu-open .mobile-menu-overlay,
  .mobile-menu-overlay {
    pointer-events: none !important;
  }

  /*
   * El contenedor nav puede no capturar eventos,
   * pero el panel y sus links sí.
   */
  body.nav-menu-open .main-nav,
  body.nav-menu-open .main-nav.is-open {
    pointer-events: none !important;
  }

  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links,
  body.nav-menu-open .main-nav .nav-links *,
  body.nav-menu-open .main-nav.is-open .nav-links * {
    pointer-events: auto !important;
  }

  body.nav-menu-open .main-nav .nav-links a,
  body.nav-menu-open .main-nav.is-open .nav-links a {
    cursor: pointer !important;
    position: relative !important;
    z-index: 90100 !important;
  }
}
/* ==============================
FIX: evitar descuadre del fondo al abrir menú móvil
============================== */

@media (max-width: 768px) {
  /*
   * No convertir todo el nav en fixed.
   * Eso descuadra el header/fondo.
   */
  body.nav-menu-open .main-nav,
  body.nav-menu-open .main-nav.is-open {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    z-index: 90000 !important;
    pointer-events: none !important;
  }

  /*
   * Solo el panel lateral es fixed.
   */
  body.nav-menu-open .main-nav .nav-links,
  body.nav-menu-open .main-nav.is-open .nav-links {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    bottom: 12px !important;

    width: min(82vw, 340px) !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;

    z-index: 90010 !important;

    background: #ffffff !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.16) !important;

    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  /*
   * Overlay transparente solo para detectar click fuera.
   */
  body.nav-menu-open .mobile-menu-overlay,
  .mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80000 !important;
    display: block !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  /*
   * No ocultar ni mover elementos del fondo.
   * Solo evitar interacción con buscador/sugerencias mientras el menú está abierto.
   */
  body.nav-menu-open .search-suggestions {
    display: none !important;
  }

  /*
   * Mantener el fondo quieto, sin reflow raro.
   */
body.nav-menu-open {
  overflow: hidden !important;
  width: 100vw !important;
}
}