/* Buen Dato - estilos compartidos por index, categorias y productos */
:root{
    /* Paleta de la marca Buen Dato (cámbiala aquí y se actualiza toda la tienda) */
    --acento:#39C5BB;      /* turquesa: barra superior y detalles (como relleno, nunca como letra) */
    --realce:#7C3AED;      /* morado: botones y etiquetas que deben destacar (texto e íconos en blanco) */
    --realce-2:#6D28D9;    /* morado un poco más oscuro (al pasar el mouse por un botón) */
    --noche:#080625;       /* azul noche: portada, pie de página y elementos activos */
    --suave:#E3F6F3;       /* menta: rellenos suaves (tallas, filtros, cuadros) */
    --suave-2:#C9EDE8;     /* menta un poco más intensa (al pasar el mouse) */
    --gris:var(--gris);        /* textos secundarios */
    --negro:#000000;
    --blanco:#ffffff;
    --bg:#fffdf5;          /* fondo de la página */
    --ink:#000000;
    --card-bg:#fffdf5;
    --placeholder:#E3F6F3;
    --gray-block:#e4e4e4;
    --gray-icon:#c9c9c9;
    --nav-h:5.5rem;
    --nav-h-mobile:4.25rem;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--ink);
    background:var(--bg);
    padding-top:var(--nav-h);
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- PAGE LOADER ---------- */
  #page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:var(--suave);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .45s ease, visibility .45s ease;
  }
  #page-loader .loader-spin{
    width:2.75rem;height:2.75rem;
    border-radius:50%;
    border:0.1875rem solid rgba(0,0,0,.15);
    border-top-color:var(--acento);
    animation:spin .8s linear infinite;
  }
  #page-loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    #page-loader .loader-spin{animation:none;}
  }
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;border:none;background:none;cursor:pointer;}
  img{display:block;max-width:100%;}

  .section-title{
    text-align:center;
    font-weight:600;
    font-size:clamp(1.75rem,4.2vw,3rem);
    letter-spacing:-1.1px;
    margin:0 0 1.75rem 0;
    color:var(--ink);
  }

  /* ---------- NAVBAR ---------- */
  .navbar{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-h);
    background:var(--acento);
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(1.25rem,5vw,4.5rem);
  }
  .navbar .logo{
    height:2.625rem;
    display:flex;
    align-items:center;
    cursor:pointer;
  }
  .navbar .logo svg{height:2.625rem;width:auto;}
  .nav-links{
    display:flex;
    gap:2.5rem;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links button{
    color:#000;
    font-size:1.0625rem;
    font-weight:500;
    cursor:pointer;
    padding:0.375rem 0.125rem;
    border-bottom:0.125rem solid transparent;
    transition:border-color .2s ease, opacity .2s ease;
  }
  .nav-links button:hover{border-color:#000; opacity:.9;}
  .nav-icons{
    display:flex;
    gap:0.875rem;
    align-items:center;
  }
  .icon-btn{
    width:4.6875rem;height:4.6875rem;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#000;
    transition:background .2s ease;
  }
  .icon-btn:hover{background:rgba(8,6,37,.14);}
  .icon-btn svg{width:2.4375rem;height:2.4375rem;stroke:#000;fill:none;stroke-width:1.6;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    width:100%;
    aspect-ratio:1442/300;
    min-height:13.125rem;
    max-height:42vh;
    overflow:hidden;
    background:#f7f7f7 center/cover no-repeat;
  }
  .hero-dimmer{
    position:absolute; inset:0;
    background:#000; opacity:.3;
  }
  .hero-copy{
    position:absolute;
    inset:0;
    z-index:2;
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0.75rem;
    padding:0 1.25rem;
    color:#fff;
  }
  .hero-copy h1{
    font-size:clamp(1.375rem,4vw,2.5rem);
    font-weight:700;
    letter-spacing:-1.1px;
    line-height:1.2;
    margin:0;
    max-width:56.25rem;
    opacity:0;
    transform:translateY(1.75rem);
    animation:fadeInUp .8s cubic-bezier(.22,.9,.34,1) .1s forwards;
    animation-play-state:paused;
  }
  .hero-copy p{
    font-size:clamp(0.8125rem,1.7vw,1.25rem);
    font-weight:500;
    margin:0;
    opacity:0;
    transform:translateY(1.75rem);
    animation:fadeInUp .8s cubic-bezier(.22,.9,.34,1) .32s forwards;
    animation-play-state:paused;
  }
  .hero-btn{
    margin-top:0.5rem;
    background:var(--acento);
    color:#000;
    font-size:clamp(0.8125rem,1.4vw,1.1875rem);
    font-weight:500;
    padding:0.8125rem 1.75rem;
    border-radius:6.25rem;
    box-shadow:0 1px 1px rgba(0,0,0,.08);
    cursor:pointer;
    opacity:0;
    transform:translateY(1.75rem);
    animation:fadeInUp .8s cubic-bezier(.22,.9,.34,1) .54s forwards;
    animation-play-state:paused;
    transition:transform .15s ease;
  }
  .hero-btn:hover{transform:translateY(-0.125rem);}
  @keyframes fadeInUp{
    to{opacity:1; transform:translateY(0);}
  }
  body.loaded .hero-copy h1,
  body.loaded .hero-copy p,
  body.loaded .hero-btn{
    animation-play-state:running;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-copy h1,.hero-copy p,.hero-btn{animation:none; opacity:1; transform:none;}
  }

  /* ---------- PRODUCT CARDS ---------- */
  .popular-wrap{padding:2rem 0 3.5rem 0;}
  .grid-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1.5rem 1.75rem;
    max-width:84rem;
    margin:0 auto;
    padding:0 clamp(1.25rem,5vw,2.5rem);
  }

  .static-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem;
    padding:0 clamp(1.25rem,5vw,4.5rem);
  }

  /* structure mirrors reference card: image, brand label, title, stacked price, cart badge on the corner */
  .product-card{
    position:relative;
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:0.875rem;
    box-shadow:0.3125rem 0.3125rem 0 rgba(20,20,22,.08);
    padding-bottom:5.625rem;
    overflow:visible;
  }
  .product-card .img-placeholder{
    height:17.25rem;
    border-radius:0.875rem 0.875rem 0 0;
  }
  .product-card .copy{padding:1.1875rem 1.375rem 0 1.375rem;}
  .product-brand{
    display:block;
    font-size:0.8125rem;
    font-weight:500;
    color:var(--gris);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:0.4375rem;
  }
  .product-title{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    font-size:1.375rem;
    line-height:1.32;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:0.1875rem;
    text-align:left;
    cursor:pointer;
    color:var(--ink);
  }
  .price-row{
    position:absolute;
    left:1.375rem;
    bottom:1rem;
    height:3.625rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0.1875rem;
    font-size:0.9375rem;
    color:var(--gris);
  }
  .price-row strong{
    font-size:1.5rem;
    font-weight:700;
    color:var(--ink);
  }
  .cart-btn{
    position:absolute;
    right:1rem;
    bottom:1rem;
    width:3.625rem;height:3.625rem;
    border-radius:50%;
    background:var(--acento);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0.1875rem 0 rgba(20,20,22,.12);
  }
  .cart-btn svg{
    width:1.625rem;height:1.625rem;
    fill:none;stroke:#fff;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;
  }

  /* ---------- PLACEHOLDER ---------- */
  .img-placeholder{
    position:relative;
    width:100%;
    background:repeating-linear-gradient(45deg, var(--placeholder), var(--placeholder) 0.625rem, var(--suave-2) 0.625rem, var(--suave-2) 1.25rem);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    text-align:center;
    overflow:hidden;
  }
  .img-placeholder span{
    background:rgba(0,0,0,.45);
    padding:0.25rem 0.625rem;
    border-radius:0.375rem;
  }
  .img-placeholder img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- WIDE BLOCKS (DIV VERDE / DIV ROSA) ---------- */
  .wide-block{
    max-width:84rem;
    margin:0 auto 6rem auto;
    padding:0 clamp(1.25rem,5vw,2.5rem);
  }
  .wide-block .block-inner{
    position:relative;
    width:100%;
    aspect-ratio:1373/637;
    background:var(--gray-block);
    border-radius:1.125rem;
    overflow:hidden;
  }
  .wide-block .block-inner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .rosa-btn{
    position:absolute;
    left:2.5rem;
    bottom:2.5rem;
    z-index:2;
    background:var(--acento);
    color:#000;
    font-weight:600;
    font-size:1rem;
    padding:0.875rem 1.75rem;
    border-radius:6.25rem;
    box-shadow:0 0.25rem 0.75rem rgba(57,197,187,.35);
  }

  /* ---------- CATEGORIES ---------- */
  .cat-wrap{
    max-width:80rem;
    margin:0 auto 6rem auto;
    padding:0 clamp(1.25rem,5vw,2.5rem);
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1.5rem;
  }
  .cat-btn{
    position:relative;
    grid-column:span 2;
    aspect-ratio:16/10;
    border-radius:0.875rem;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
    transition:transform .2s ease;
  }
  .cat-btn:hover{transform:translateY(-0.1875rem);}
  .cat-icon{
    width:2.75rem;height:2.75rem;
    display:flex;align-items:center;justify-content:center;
  }
  .cat-icon svg{
    width:100%;height:100%;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .cat-label{
    color:var(--ink);
    font-weight:700;
    font-size:1rem;
    letter-spacing:.3px;
    text-transform:uppercase;
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--bg);
    box-shadow:0 -0.25rem 1rem rgba(0,0,0,.06);
    padding:3.5rem clamp(1.25rem,5vw,4.5rem) 2.5rem clamp(1.25rem,5vw,4.5rem);
    text-align:center;
  }
  footer .foot-logo{height:3.1875rem; margin:0 auto 1.75rem auto;}
  .social-row{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-bottom:2rem;
  }
  .social-btn{
    width:2.75rem;height:2.75rem;
    border-radius:50%;
    background:var(--gray-icon);
    transition:background .2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .social-btn svg{
    width:1.375rem;height:1.375rem;
    display:block;
  }
  .social-btn:hover{background:#b5b5b5;}
  .divider{
    max-width:80rem;
    margin:0 auto 1.5rem auto;
    border:none;
    border-top:1px solid var(--border-color);
  }
  footer .fine-print{
    font-size:0.8125rem;
    color:var(--gris);
  }

  /* ---------- TOAST ---------- */
  #toast{
    position:fixed;
    left:50%;
    bottom:2rem;
    transform:translate(-50%,1.25rem);
    background:var(--ink);
    color:#fff;
    padding:0.875rem 1.375rem;
    border-radius:0.625rem;
    font-size:0.875rem;
    font-weight:500;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:3000;
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.25);
  }
  #toast.show{opacity:1; transform:translate(-50%,0);}

  @media (max-width:1178px){
    .grid-row{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:828px){
    :root{--nav-h:var(--nav-h-mobile);}
    .navbar .logo svg{height:1.75rem;}
    .nav-links{display:none;}
    .nav-icons{gap:0.375rem;}
    .icon-btn{width:3.375rem;height:3.375rem;}
    .icon-btn svg{width:1.75rem;height:1.75rem;}
    .cat-wrap{grid-template-columns:repeat(2,1fr);}
    .cat-btn, .cat-btn.span-3, .cat-btn.span-6{grid-column:span 1;}
    .section-title{margin-bottom:1.75rem;}
    .popular-wrap{padding:2.5rem 0 3rem 0;}
    .wide-block{margin-bottom:4rem;}
    .grid-row{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:483px){
    .grid-row{grid-template-columns:1fr;}
  }

/* =====================================================================
   Ajustes compartidos y piezas nuevas
   ===================================================================== */
:root{
  --border-color:rgba(0,0,0,.16);
  --line:rgba(0,0,0,.14);
  --wa:#25D366;
}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:0.125rem solid var(--ink);
  outline-offset:0.1875rem;
}

/* Logo como imagen: para cambiarlo basta reemplazar img/logo-horizontal.svg */
.navbar .logo img{height:2.875rem;width:auto;}
footer img.foot-logo{height:3.5rem;width:auto;margin:0 auto 1.5rem auto;}

/* Íconos del navbar (enlaces o botones) */
a.icon-btn, button.icon-btn{cursor:pointer;}
.icon-btn svg{stroke-linecap:round;stroke-linejoin:round;}
.nav-links a{
  color:#000;
  font-size:1.0625rem;
  font-weight:500;
  cursor:pointer;
  padding:0.375rem 0.125rem;
  border-bottom:0.125rem solid transparent;
  transition:border-color .2s ease, opacity .2s ease;
}
.nav-links a:hover, .nav-links a.active{border-color:#000;}

/* ---------- INICIO ---------- */
.hero{background-color:var(--noche);}
.hero.sin-imagen .hero-dimmer{opacity:0;}
a.hero-btn{display:inline-block;}
.btn-pill{
  display:inline-block;
  background:var(--acento);
  color:#000;
  font-size:1rem;
  font-weight:500;
  padding:0.8125rem 1.75rem;
  border-radius:6.25rem;
  box-shadow:0 1px 1px rgba(0,0,0,.08);
  transition:transform .15s ease;
}
.btn-pill:hover{transform:translateY(-0.125rem);}
.mas-link{text-align:center;margin-top:2.5rem;}
.cat-btn.span-3{grid-column:span 3;}
.cat-btn.span-6{grid-column:span 6;aspect-ratio:16/5;}
.wide-block img{background:var(--gray-block);}

/* ---------- TARJETAS ---------- */
.product-card{display:block;color:inherit;transition:transform .2s ease;}
.product-card:hover{transform:translateY(-0.1875rem);}
.product-card .card-link{text-decoration:underline;}
.product-card .card-link::after{content:'';position:absolute;inset:0;z-index:1;border-radius:0.875rem;}
button.cart-btn{border:0;padding:0;cursor:pointer;z-index:2;color:#fff;transition:transform .15s ease, box-shadow .15s ease;}
button.cart-btn:hover{transform:scale(1.08);box-shadow:0 0.3125rem 0 rgba(20,20,22,.14);}
button.cart-btn:active{transform:scale(.96);}
.product-card .product-title{font-weight:600;}
.price-old{
  font-size:0.9375rem;
  font-weight:500;
  color:var(--gris);
  text-decoration:line-through;
  margin-left:0.375rem;
}
.skeleton-card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:0.875rem;
  box-shadow:0.3125rem 0.3125rem 0 rgba(20,20,22,.08);
  height:26.25rem;
  overflow:hidden;
}
.skeleton-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:17.25rem;
  background:#ececea;
}
.skeleton-card::after, .skeleton-block::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:shimmer 1.3s infinite;
}
.skeleton-block{background:#ececea !important;}
.skeleton-block > *{display:none;}
@keyframes shimmer{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .skeleton-card::after, .skeleton-block::after{animation:none;}
}
.catalog-error{
  grid-column:1 / -1;
  text-align:center;
  color:var(--gris);
  font-size:1rem;
  padding:3rem 1.25rem;
}
.catalog-error button{
  margin-top:1rem;
  background:var(--ink);
  color:#fff;
  padding:0.75rem 1.5rem;
  border-radius:6.25rem;
  font-weight:600;
}

/* ---------- CATEGORÍA ---------- */
.category-header{text-align:center;padding:3.75rem 1.25rem 1.5rem 1.25rem;}
.category-header h1{
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:700;
  letter-spacing:-1.2px;
  margin:0;
  color:var(--ink);
}
.cat-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.625rem;
  padding:0 1.25rem 2.5rem 1.25rem;
}
.cat-chip{
  padding:0.5625rem 1.25rem;
  border:1px solid rgba(0,0,0,.35);
  border-radius:6.25rem;
  font-size:0.875rem;
  font-weight:500;
  background:var(--bg);
  transition:all .2s ease;
}
.cat-chip:hover, .cat-chip.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.section-divider{
  max-width:84rem;
  margin:0 auto;
  border:none;
  border-top:1px solid var(--border-color);
}
.catalog-wrap{padding:3rem 0 5rem 0;}
body.page-categoria .grid-row{grid-template-columns:repeat(4,1fr);gap:2rem 1.75rem;}
body.page-categoria .product-title{font-size:1.25rem;}
.catalog-empty{
  grid-column:1 / -1;
  text-align:center;
  color:var(--gris);
  font-size:1rem;
  padding:2.5rem 1.25rem;
}
.catalog-empty a{text-decoration:underline;}

/* ---------- PRODUCTO ---------- */
body.page-producto footer{margin-top:5rem;}
body.page-producto .img-placeholder img{object-fit:contain;}
.img-placeholder.has-image{background:var(--card-bg);}
.product-detail-container{
  max-width:84rem;
  margin:3rem auto;
  padding:0 clamp(1.25rem,5vw,2.5rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:start;
}
.product-gallery{display:flex;flex-direction:column;gap:1.25rem;}
.main-image-placeholder{height:33.75rem;border-radius:0.875rem;}
.thumbs{display:flex;gap:0.75rem;flex-wrap:wrap;}
.thumb{
  width:5.25rem;height:5.25rem;
  border-radius:0.625rem;
  border:0.125rem solid transparent;
  overflow:hidden;
  background:var(--card-bg);
  padding:0;
  cursor:pointer;
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb.active{border-color:var(--ink);}
.product-details-info{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  opacity:0;
  transform:translateY(1.75rem);
}
.product-details-info.reveal{animation:fadeInUp .8s cubic-bezier(.22,.9,.34,1) forwards;}
@media (prefers-reduced-motion: reduce){
  .product-details-info{animation:none;opacity:1;transform:none;}
}
.product-brand-tag{
  font-size:0.875rem;
  font-weight:500;
  color:var(--gris);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.product-main-title{
  font-size:clamp(1.75rem, 3vw, 2.625rem);
  font-weight:700;
  margin:0;
  line-height:1.2;
}
.product-main-price{font-size:2rem;font-weight:700;color:var(--ink);}
.product-main-price .price-old{font-size:1.25rem;}
.selector-group label{
  display:block;
  font-size:0.875rem;
  font-weight:600;
  margin-bottom:0.5rem;
  text-transform:lowercase;
}
.sizes-grid{display:flex;flex-wrap:wrap;gap:0.625rem;}
.size-btn{
  padding:0.625rem 1.375rem;
  border:1px solid rgba(0,0,0,.35);
  border-radius:6.25rem;
  font-size:0.875rem;
  font-weight:500;
  background:var(--bg);
  cursor:pointer;
  transition:all .2s ease;
}
.size-btn.active, .size-btn:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.quantity-box{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(0,0,0,.35);
  border-radius:6.25rem;
  overflow:hidden;
  background:var(--bg);
  width:8.125rem;
  justify-content:space-between;
  padding:0.375rem 1rem;
}
.qty-btn{font-size:1.125rem;font-weight:600;cursor:pointer;padding:0 0.25rem;}
.qty-val{font-size:1rem;font-weight:600;}
.btn-shop-pay{
  width:100%;
  background:var(--acento);
  color:#000;
  font-size:1rem;
  font-weight:600;
  padding:1rem;
  border-radius:6.25rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.625rem;
  box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.08);
  transition:transform .15s ease;
}
.btn-shop-pay:hover{transform:translateY(-0.125rem);}
.btn-shop-pay svg{width:1.375rem;height:1.375rem;stroke:#000;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.product-note{font-size:0.8125rem;color:var(--gris);margin:0;}
.tabs-row{
  display:flex;
  gap:1.5rem;
  border-bottom:1px solid var(--border-color);
  padding-bottom:0.5rem;
  margin-top:0.625rem;
}
.tab-item{font-size:0.9375rem;font-weight:600;color:var(--ink);position:relative;}
.tab-item::after{
  content:'';
  position:absolute;
  bottom:-0.5625rem;
  left:0; right:0;
  height:0.125rem;
  background:var(--acento);
}
.product-description-text{font-size:0.9375rem;line-height:1.6;color:var(--gris);}
.product-description-text p{margin:0 0 0.75rem 0;}
.product-description-text ul{margin:0.75rem 0;padding-left:1.25rem;}
.product-description-text li{margin-bottom:0.375rem;}
.other-goodies-wrap{
  max-width:84rem;
  margin:5rem auto 2.5rem auto;
  padding:0 clamp(1.25rem,5vw,2.5rem);
}
.goodies-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}

/* ---------- BUSCADOR ---------- */
.search-panel{
  position:fixed;
  top:var(--nav-h);
  left:0; right:0;
  background:var(--bg);
  z-index:999;
  box-shadow:0 0.75rem 1.5rem rgba(0,0,0,.12);
  padding:1.25rem clamp(1.25rem,5vw,4.5rem) 1.5rem clamp(1.25rem,5vw,4.5rem);
  display:none;
}
.search-panel.open{display:block;}
.search-panel input{
  width:100%;
  max-width:45rem;
  display:block;
  margin:0 auto;
  padding:0.875rem 1.375rem;
  border:1px solid rgba(0,0,0,.35);
  border-radius:6.25rem;
  font:inherit;
  font-size:1rem;
}
.search-results{max-width:45rem;margin:0.75rem auto 0 auto;display:flex;flex-direction:column;}
.search-item{
  display:flex;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.75rem 0.5rem;
  border-bottom:1px solid var(--line);
  font-size:0.9375rem;
}
.search-item:hover{background:#f6f6f4;}
.search-item span:last-child{color:var(--gris);white-space:nowrap;}
.search-empty{padding:0.75rem 0.5rem;color:var(--gris);font-size:0.875rem;}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  width:3.625rem;height:3.625rem;
  border-radius:50%;
  background:var(--wa);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0.375rem 1.125rem rgba(0,0,0,.22);
  z-index:900;
  transition:transform .15s ease;
}
.wa-float:hover{transform:translateY(-0.125rem);}
.wa-float svg{width:1.875rem;height:1.875rem;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.social-btn svg.wa-icon{width:1.375rem;height:1.375rem;stroke:#383838;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.social-btn img{width:1.375rem;height:1.375rem;display:block;}

/* ---------- RESPONSIVO (va después de las reglas base) ---------- */
@media (max-width:1178px){
  body.page-categoria .grid-row{grid-template-columns:repeat(3,1fr);}
  .product-detail-container{grid-template-columns:1fr;gap:2rem;}
  .main-image-placeholder{height:25rem;}
  .goodies-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:828px){
  .navbar .logo img{height:2.125rem;}
  body.page-categoria .grid-row{grid-template-columns:repeat(2,1fr);}
  .goodies-grid{grid-template-columns:1fr;}
  .cat-btn.span-6{aspect-ratio:16/10;}
  .wa-float{right:1rem;bottom:1rem;}
}
@media (max-width:483px){
  body.page-categoria .grid-row{grid-template-columns:1fr;}
}

/* ---------- MENÚ EN CELULAR ---------- */
.menu-btn{display:none;}
@media (max-width:828px){
  .menu-btn{display:flex;}
  .nav-links.open{
    display:flex;
    flex-direction:column;
    gap:0;
    position:fixed;
    top:var(--nav-h);
    left:0; right:0;
    background:var(--suave);
    padding:0.25rem clamp(1.25rem,5vw,4.5rem) 1.125rem clamp(1.25rem,5vw,4.5rem);
    box-shadow:0 0.75rem 1.5rem rgba(0,0,0,.18);
    z-index:998;
  }
  .nav-links.open li{border-top:1px solid rgba(0,0,0,.12);}
  .nav-links.open a{display:block;padding:1rem 0.125rem;font-size:1.125rem;border-bottom:0;}
}

/* ---------- ICONOS (archivos en img/iconos/) ---------- */
.ico{
  display:inline-block;
  width:1em;height:1em;
  flex:none;
  background-color:currentColor;
  -webkit-mask:var(--i) center / contain no-repeat;
          mask:var(--i) center / contain no-repeat;
}
.icon-btn .ico{width:2.125rem;height:2.125rem;color:#000;}
.cart-btn .ico{width:1.9375rem;height:1.9375rem;color:#fff;}
.btn-shop-pay .ico{width:1.5rem;height:1.5rem;color:#000;}
.wa-float .ico{width:2.125rem;height:2.125rem;color:#fff;}
.social-btn .ico{width:1.5625rem;height:1.5625rem;color:#383838;}
.cat-icon{width:3.75rem;height:3.75rem;}
.cat-icon .ico{width:100%;height:100%;}
@media (max-width:828px){
  .icon-btn .ico{width:1.8125rem;height:1.8125rem;}
}

/* ---------- EFECTO AL PASAR EL MOUSE EN LAS TARJETAS ---------- */
:root{
  --giro:5deg;     /* cuánto gira la foto al pasar el mouse (prueba 3deg, 5deg o 8deg) */
  --zoom:1.15;     /* acercamiento: tapa las esquinas al girar. Si subes el giro a 8deg, usa 1.2 */
}
.media-inner{
  position:absolute;
  inset:-1px;          /* sobresale 1px para que ningún borde fraccionario deje ver el fondo */
  transition:transform .6s cubic-bezier(.22,.7,.25,1);
  will-change:transform;
}
.media-inner img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:opacity .45s ease;
}
.media-inner .img-alt{opacity:0;}
.shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 64%);
  transform:translateX(-135%);
}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .media-inner{transform:rotate(var(--giro)) scale(var(--zoom));}
  .product-card:hover .img-alt{opacity:1;}
  .product-card:hover .shine{transform:translateX(135%);transition:transform .85s ease .05s;}
}
@media (prefers-reduced-motion:reduce){
  .media-inner{transition:none;}
  .product-card:hover .media-inner{transform:none !important;}
  .shine{display:none;}
}

/* ---------- CARRITO ---------- */
.icon-btn{position:relative;}
.cart-count{
  position:absolute;
  top:0.625rem;right:0.375rem;
  min-width:1.375rem;height:1.375rem;
  padding:0 0.375rem;
  border-radius:0.6875rem;
  background:var(--acento);
  color:#000;
  font-size:0.75rem;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0.125rem var(--acento);
}
.cart-count[hidden]{display:none;}
.cart-count.bump{animation:bump .4s ease;}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

.cart-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:2000;
}
.cart-overlay.open{opacity:1;visibility:visible;}
body.cart-open{overflow:hidden;}

.cart-drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(27.5rem,100%);
  background:var(--bg);
  z-index:2001;
  display:flex;
  flex-direction:column;
  transform:translateX(104%);
  visibility:hidden;
  transition:transform .35s cubic-bezier(.22,.7,.25,1), visibility .35s;
  box-shadow:-0.75rem 0 2rem rgba(0,0,0,.18);
}
.cart-drawer.open{transform:none;visibility:visible;}
.cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid #eee;
}
.cart-head h2{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.4px;}
.cart-close{
  width:2.75rem;height:2.75rem;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--ink);
  transition:background .2s ease;
}
.cart-close:hover{background:#f0f0f0;}
.cart-close .ico{width:1.5rem;height:1.5rem;color:var(--ink);}
.cart-body{flex:1;overflow-y:auto;padding:0.5rem 1.5rem;}
.cart-empty{text-align:center;padding:4rem 0;color:var(--gris);}
.cart-empty p{margin:0 0 1.25rem 0;font-size:1.0625rem;}
.cart-line{
  display:grid;
  grid-template-columns:4.75rem 1fr auto;
  gap:0.875rem;
  padding:1.125rem 0;
  border-bottom:1px solid #f0f0f0;
  align-items:start;
}
.cart-line-off{grid-template-columns:1fr auto;opacity:.75;}
.cart-thumb{width:4.75rem;height:6rem;border-radius:0.625rem;}
body .cart-thumb.img-placeholder img{object-fit:cover;}
.cart-thumb span{font-size:0.625rem;padding:0.125rem 0.375rem;}
.cart-info{display:flex;flex-direction:column;gap:0.1875rem;min-width:0;}
.cart-name{font-size:1rem;font-weight:600;line-height:1.3;color:var(--ink);}
.cart-meta{font-size:0.8125rem;color:var(--gris);}
.cart-qty{
  margin-top:0.5rem;
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  border:1px solid var(--border-color);
  border-radius:6.25rem;
  padding:0.25rem 0.625rem;
  align-self:flex-start;
}
.cart-qty button{font-size:1.125rem;font-weight:600;cursor:pointer;padding:0 0.25rem;line-height:1;}
.cart-qty span{font-size:0.9375rem;font-weight:600;min-width:1rem;text-align:center;}
.cart-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.625rem;}
.cart-side strong{font-size:1rem;font-weight:700;}
.cart-remove{font-size:0.8125rem;color:var(--gris);text-decoration:underline;text-underline-offset:0.1875rem;cursor:pointer;}
.cart-remove:hover{color:var(--ink);}
.cart-foot{padding:1.125rem 1.5rem 1.5rem 1.5rem;border-top:1px solid #eee;}
.cart-foot:empty{display:none;}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.0625rem;margin-bottom:0.375rem;}
.cart-total strong{font-size:1.625rem;font-weight:700;}
.cart-note{margin:0 0 0.75rem 0;font-size:0.8125rem;color:var(--gris);line-height:1.45;}
.cart-clear{display:block;margin:0.875rem auto 0 auto;font-size:0.8125rem;color:var(--gris);text-decoration:underline;text-underline-offset:0.1875rem;cursor:pointer;}
.cart-clear:hover{color:var(--ink);}

/* selector rápido de talla */
.quick-wrap{
  position:fixed;
  inset:0;
  z-index:2100;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.quick-box{
  position:relative;
  width:min(23.75rem,100%);
  background:var(--bg);
  border-radius:1.125rem;
  padding:1.75rem 1.625rem 1.625rem 1.625rem;
  display:flex;
  flex-direction:column;
  gap:0.375rem;
  box-shadow:0 1.25rem 3.125rem rgba(0,0,0,.3);
}
.quick-box .cart-close{position:absolute;top:0.625rem;right:0.625rem;}
.quick-name{font-size:1.3125rem;font-weight:700;line-height:1.3;padding-right:2.25rem;}
.quick-price{font-size:1.125rem;font-weight:600;margin-bottom:0.5rem;}
.quick-box .selector-group{margin-bottom:0.75rem;}

/* página de producto: botones */
.btn-add{border:0;font-family:inherit;}
.btn-add .ico{color:#000;}
.btn-wa-solo{background:transparent;border:0.125rem solid var(--ink);box-shadow:none;margin-top:0.25rem;}
.product-details-info .btn-shop-pay{margin-top:0;}

@media (max-width:828px){
  .wa-nav{display:none;}          /* en el celular el WhatsApp ya está en el botón flotante y en el menú */
  .cart-count{top:0.375rem;right:0.125rem;}
}

/* ---------- UTILIDADES ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.section-sub{text-align:center;margin:-0.75rem auto 1.75rem auto;max-width:35rem;padding:0 1.25rem;color:var(--gris);font-size:1rem;line-height:1.5;}
footer .fine-priv{display:block;margin-top:0.375rem;}

/* ---------- GALERÍA DEL PRODUCTO (deslizar, pellizcar, doble toque) ---------- */
.gal{
  position:relative;
  width:100%;height:33.75rem;
  border-radius:0.875rem;
  border:1px solid var(--line);
  background:var(--card-bg);
  overflow:hidden;
  touch-action:pan-y;           /* el dedo en vertical sigue moviendo la página */
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:zoom-in;
}
.gal.zoomed{touch-action:none;cursor:zoom-out;}
.gal:focus-visible{outline:0.1875rem solid var(--noche);outline-offset:0.125rem;}
.gal-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.22,.8,.25,1);will-change:transform;}
.gal-slide{flex:0 0 100%;height:100%;overflow:hidden;}
.gal-slide img{width:100%;height:100%;object-fit:contain;transform-origin:0 0;-webkit-user-drag:none;user-select:none;pointer-events:none;}
.gal-x{
  position:absolute;top:0.75rem;right:0.75rem;
  width:2.625rem;height:2.625rem;border-radius:50%;
  background:rgba(20,20,22,.78);color:#fff;
  display:none;align-items:center;justify-content:center;
  z-index:3;
}
.gal.zoomed .gal-x{display:flex;}
.gal-x .ico{width:1.375rem;height:1.375rem;}
.gal-hint{
  position:absolute;top:0.75rem;left:0.75rem;
  background:rgba(20,20,22,.7);color:#fff;
  font-size:0.75rem;font-weight:500;
  padding:0.375rem 0.6875rem;border-radius:6.25rem;
  pointer-events:none;
  animation:galHint .5s ease 4s forwards;
  z-index:2;
}
.gal.zoomed .gal-hint{display:none;}
@keyframes galHint{to{opacity:0;}}
.gal-nav{
  position:absolute;top:50%;
  width:2.75rem;height:2.75rem;margin-top:-1.375rem;
  border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 0.125rem 0.5rem rgba(0,0,0,.18);
  display:none;align-items:center;justify-content:center;
  z-index:3;
  transition:opacity .2s ease;
}
.gal-nav .ico{width:1.625rem;height:1.625rem;}
.gal-prev{left:0.75rem;}
.gal-prev .ico{transform:scaleX(-1);}
.gal-next{right:0.75rem;}
.gal-nav:disabled{opacity:0;pointer-events:none;}
.gal.zoomed .gal-nav{display:none !important;}
@media (hover:hover) and (pointer:fine){
  .gal-nav{display:flex;opacity:0;}
  .gal:hover .gal-nav:not(:disabled),.gal:focus-within .gal-nav:not(:disabled){opacity:1;}
  .gal:hover .gal-hint{animation:none;opacity:1;}
}
.gal-dots{
  position:absolute;left:0;right:0;bottom:0.625rem;
  display:flex;justify-content:center;
  z-index:2;pointer-events:none;
}
.gal-dot{
  width:1.375rem;height:1.375rem;padding:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
}
.gal-dot::before{
  content:'';
  width:0.5rem;height:0.5rem;border-radius:50%;
  background:rgba(20,20,22,.28);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
  transition:width .2s ease, background .2s ease;
}
.gal-dot.on::before{width:1.25rem;border-radius:0.5rem;background:var(--ink);}
.gal.zoomed .gal-dots{display:none;}
.thumb{transition:border-color .15s ease;}

/* ---------- ASÍ LO VISTEN ELLOS (publicaciones de clientes) ---------- */
.looks-wrap{max-width:84rem;margin:0 auto;padding:2.5rem clamp(1.25rem,5vw,2.5rem) 3.5rem clamp(1.25rem,5vw,2.5rem);}
.looks-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.75rem 1.5rem;}   /* 4 por fila; si hay pocas, quedan centradas */
.look{
  position:relative;
  display:flex;flex-direction:column;
  flex:0 0 calc((100% - 4.5rem) / 4);
  min-width:0;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:0.875rem;
  box-shadow:0.3125rem 0.3125rem 0 rgba(20,20,22,.08);
  overflow:hidden;
}
.look.extra{display:none;}
.looks-grid.abierto .look.extra{display:flex;}
.look-head{display:flex;align-items:center;gap:0.625rem;padding:0.75rem 0.875rem;}
.look-avatar{
  width:2.5rem;height:2.5rem;flex:none;
  border-radius:50%;
  border:0.125rem solid var(--ink);
  background:var(--acento);
  display:flex;align-items:center;justify-content:center;
}
.look-avatar .ico{width:1.375rem;height:1.375rem;color:var(--ink);}
.look-who{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.look-who b{font-size:0.9375rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.look-who small{font-size:0.75rem;color:var(--gris);}
.look-video{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:0.25rem;
  font-size:0.75rem;font-weight:600;
  padding:0.25rem 0.5625rem 0.25rem 0.375rem;border-radius:6.25rem;
  border:1.5px solid var(--ink);
}
.look-video .ico{width:1rem;height:1rem;}
.look-media{position:relative;aspect-ratio:4 / 5;background:var(--gray-block);}
.look-track{
  display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.look-track::-webkit-scrollbar{display:none;}
.look-track:focus-visible{outline:0.1875rem solid var(--noche);outline-offset:-0.1875rem;}
.look-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;}
.look-slide img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;}
.look-count{
  position:absolute;top:0.625rem;right:0.625rem;
  background:rgba(20,20,22,.72);color:#fff;
  font-size:0.75rem;font-weight:600;
  padding:0.25rem 0.625rem;border-radius:6.25rem;
  pointer-events:none;
}
.look-nav{
  position:absolute;top:50%;
  width:2.375rem;height:2.375rem;margin-top:-1.1875rem;
  border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 0.125rem 0.5rem rgba(0,0,0,.2);
  display:none;align-items:center;justify-content:center;
  transition:opacity .2s ease;
}
.look-nav .ico{width:1.375rem;height:1.375rem;}
.look-prev{left:0.5rem;}
.look-prev .ico{transform:scaleX(-1);}
.look-next{right:0.5rem;}
@media (hover:hover) and (pointer:fine){
  .look-nav{display:flex;opacity:0;}
  .look-media:hover .look-nav,.look-media:focus-within .look-nav{opacity:1;}
}
.look-dots{
  position:absolute;left:0;right:0;bottom:0.625rem;
  display:flex;justify-content:center;gap:0.3125rem;
  pointer-events:none;
}
.look-dot{
  width:0.4375rem;height:0.4375rem;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0.1875rem rgba(0,0,0,.45);
  transition:background .2s ease, transform .2s ease;
}
.look-dot.on{background:var(--bg);transform:scale(1.25);}
.look-acts{display:flex;gap:1.125rem;padding:0.75rem 0.875rem 0.125rem 0.875rem;font-weight:600;font-size:0.9375rem;}
.look-act{display:inline-flex;align-items:center;gap:0.375rem;}
.look-act .ico{width:1.5rem;height:1.5rem;}
.look-act:first-child .ico{color:var(--noche);}
.look-text{
  margin:0;padding:0.5rem 0.875rem 0.25rem 0.875rem;
  font-size:0.875rem;line-height:1.5;color:var(--gris);
  white-space:pre-line;overflow-wrap:anywhere;
}
.look-text b{color:var(--ink);}
.look-text a{text-decoration:underline;}
.look-text.corto{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.look-vermas{align-self:flex-start;padding:0 0.875rem 0.375rem 0.875rem;font-size:0.8125rem;font-weight:500;color:var(--gris);text-decoration:underline;text-underline-offset:0.125rem;}
.look-foot{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.625rem 0.875rem 0.875rem 0.875rem;margin-top:auto;}
.look-ver,.look-prod{
  display:inline-block;max-width:100%;
  font-size:0.8125rem;font-weight:600;
  padding:0.5rem 0.875rem;border-radius:6.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .15s ease;
}
.look-ver{background:var(--acento);color:#000;box-shadow:0 1px 1px rgba(0,0,0,.08);}
.look-prod{border:1.5px solid var(--ink);padding:0.4062rem 0.8125rem;}
.look-ver:hover,.look-prod:hover{transform:translateY(-0.125rem);}
.look-ver:focus-visible,.look-prod:focus-visible,.look-vermas:focus-visible{outline:0.1875rem solid var(--noche);outline-offset:0.125rem;}

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq-wrap{max-width:51.25rem;margin:0 auto;padding:2.5rem clamp(1.25rem,5vw,2.5rem) 3.5rem clamp(1.25rem,5vw,2.5rem);}
.faq-list{display:flex;flex-direction:column;gap:0.875rem;}
.faq-item{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:0.875rem;
  box-shadow:0.25rem 0.25rem 0 rgba(20,20,22,.08);
}
.faq-item summary{
  position:relative;
  list-style:none;cursor:pointer;
  padding:1.125rem 3.375rem 1.125rem 1.25rem;
  font-weight:600;font-size:1.0625rem;line-height:1.4;
  border-radius:0.875rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline:0.1875rem solid var(--noche);outline-offset:0.125rem;}
.faq-item summary::after{
  content:'';
  position:absolute;right:1.375rem;top:50%;
  width:0.625rem;height:0.625rem;
  border-right:0.1562rem solid var(--ink);border-bottom:0.1562rem solid var(--ink);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.faq-resp{padding:0 1.25rem 1.125rem 1.25rem;font-size:0.9375rem;line-height:1.65;color:var(--gris);overflow-wrap:anywhere;}
.faq-resp p{margin:0 0 0.625rem 0;}
.faq-resp p:last-child{margin-bottom:0;}
.faq-resp a{text-decoration:underline;}
.faq-wa{text-align:center;margin:1.625rem 0 0 0;font-size:0.9375rem;color:var(--gris);}
.faq-wa a{font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem;}

@media (max-width:1265px){
  .look{flex-basis:calc((100% - 1.5rem) / 2);}
}
@media (max-width:1178px){
  .gal{height:27.5rem;}
}
@media (max-width:828px){
  .gal{height:clamp(20rem,112vw,28.75rem);}
  .looks-wrap,.faq-wrap{padding-top:1.75rem;padding-bottom:2.5rem;}
  .faq-item summary{font-size:1rem;padding:1rem 3rem 1rem 1rem;}
  .faq-item summary::after{right:1.125rem;}
  .faq-resp{padding:0 1rem 1rem 1rem;}
}
@media (max-width:690px){
  .looks-grid{max-width:27.5rem;margin:0 auto;}
  .look{flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  .gal-track{transition:none;}
  .gal-hint{animation:none;}
  .look-track{scroll-behavior:auto;}
  .faq-item summary::after{transition:none;}
}

/* ---------- ETIQUETAS (Nuevo, Últimas unidades, Agotado) Y CUENTA REGRESIVA ---------- */
.card-tags{
  position:absolute;top:0.75rem;left:0.75rem;right:4.125rem;z-index:2;      /* la estrella ocupa el lado derecho */
  display:flex;flex-direction:column;align-items:flex-start;gap:0.375rem;
  pointer-events:none;                      /* el clic pasa al enlace de la tarjeta */
}
.insignia{
  display:inline-flex;align-items:center;gap:0.375rem;
  padding:0.3125rem 0.625rem;
  border-radius:0.375rem;
  background:var(--bg);color:var(--ink);
  font-size:0.7188rem;font-weight:700;letter-spacing:.6px;line-height:1.1;
  text-transform:uppercase;white-space:nowrap;
  box-shadow:0 1px 0.1875rem rgba(20,20,22,.16);
}
.insignia .ico{width:0.9375rem;height:0.9375rem;color:currentColor;flex:none;}
.card-tags .insignia{max-width:100%;white-space:normal;}
.insignia-nuevo{background:var(--acento);}
.insignia-ultimas{background:var(--acento);color:#fff;}
.insignia-oferta{background:var(--acento);}
.insignia-agotado{background:var(--ink);color:#fff;}
.insignia-pronto{background:var(--acento);color:#fff;text-transform:none;font-size:0.7812rem;letter-spacing:0;font-variant-numeric:tabular-nums;}
.insignia-pronto b{font-weight:700;}

.product-card.es-agotado .img-placeholder img{filter:grayscale(1);opacity:.55;}
.product-card.es-agotado .price-row strong{color:var(--gris);}
.cart-btn-off{background:#cfcfd3;box-shadow:none;cursor:default;}
.cart-btn-off .ico{color:#fff;}
.cart-btn-pronto{background:var(--acento);}

/* página del producto */
.product-tagrow{display:flex;align-items:center;flex-wrap:wrap;gap:0.375rem 0.875rem;}
.cuenta-bloque{
  display:flex;flex-direction:column;gap:0.75rem;
  padding:1rem 1rem 1.125rem 1rem;
  border:1px solid var(--line);
  border-radius:0.875rem;
  background:var(--suave);
}
.cuenta-tit{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;font-weight:600;}
.cuenta-tit .ico{width:1.375rem;height:1.375rem;color:var(--ink);}
.cuenta-caja{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;}
.cuenta-caja div{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0.625rem;
  padding:0.5625rem 0.125rem 0.5rem 0.125rem;
  text-align:center;
}
.cuenta-caja b{display:block;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;font-variant-numeric:tabular-nums;}
.cuenta-caja small{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gris);}
.btn-off,.btn-off:hover{background:#e2e2e6;color:var(--gris);box-shadow:none;cursor:not-allowed;transform:none;border:0;font-family:inherit;}
.btn-off .ico{color:var(--gris);}

/* ---------- FAVORITOS Y COMPARTIR ---------- */
.fav-btn{
  position:absolute;top:0.625rem;right:0.625rem;z-index:2;
  width:2.75rem;height:2.75rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  box-shadow:0 0.125rem 0 rgba(20,20,22,.12);
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease;
}
.fav-btn:hover{transform:scale(1.08);}
.fav-btn:active{transform:scale(.94);}
.fav-ico{position:relative;display:block;width:1.625rem;height:1.625rem;}
.fav-ico .ico{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);transition:transform .28s cubic-bezier(.3,1.7,.5,1), color .2s ease;}
.fav-ico .ico + .ico{color:var(--acento);transform:scale(0);}
.fav-btn.on .fav-ico .ico:first-child{color:var(--noche);}
.fav-btn.on .fav-ico .ico + .ico{transform:scale(1);}
.fav-btn.pop .fav-ico{animation:latido .5s ease;}
@keyframes latido{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

.nav-fav-li{display:none;}
.nav-fav-n{font-size:.85em;opacity:.85;}
.fav-count{background:var(--acento);color:#000;}
@media (max-width:828px){
  #btn-favs{display:none;}                 /* en el celular los favoritos están en el menú */
  .nav-fav-li{display:list-item;}
  .nav-links.open .nav-fav-li button{display:block;width:100%;text-align:left;padding:1rem 0.125rem;font-size:1.125rem;color:#000;border-bottom:0;}
}

.acciones-extra{display:flex;flex-wrap:wrap;gap:0.75rem;}
.acciones-extra .fav-btn.fav-texto,.share-btn{
  position:static;
  flex:1 1 9.375rem;
  width:auto;height:auto;
  display:flex;align-items:center;justify-content:center;gap:0.625rem;
  padding:0.75rem 1.125rem;
  border:0.125rem solid var(--ink);
  border-radius:6.25rem;
  background:var(--bg);
  box-shadow:none;
  font-family:inherit;font-size:0.9375rem;font-weight:600;color:var(--ink);
  cursor:pointer;
  transition:transform .15s ease, background .2s ease;
}
.acciones-extra .fav-btn.fav-texto:hover,.share-btn:hover{transform:translateY(-0.125rem);background:var(--suave-2);}
.share-btn .ico{width:1.375rem;height:1.375rem;color:var(--ink);}
.fav-btn.fav-texto .fav-ico{width:1.5rem;height:1.5rem;}
.fav-btn.fav-texto.on{background:var(--suave);}

.fav-line .cart-info{align-items:flex-start;}
.fav-add{
  margin-top:0.5rem;
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.4375rem 0.875rem;
  border-radius:6.25rem;
  background:var(--acento);color:#000;
  font-size:0.8125rem;font-weight:600;
  cursor:pointer;
}
.fav-add .ico{width:1.125rem;height:1.125rem;color:#000;}
.fav-nota b{font-weight:600;color:var(--ink);}
.cart-empty .fav-vacio{font-size:0.875rem;margin:-0.5rem 0 1.25rem 0;}
.fav-pie{margin:0.75rem 0 0 0;text-align:center;}

/* ---------- COMBINA CON ---------- */
.combina-wrap{position:relative;margin-top:4rem;}
.combina-wrap .goodies-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;}
.combina-wrap .product-card{flex:0 1 calc((100% - 4.5rem) / 4);min-width:0;}
@media (max-width:1178px){.combina-wrap .product-card{flex-basis:calc((100% - 1.5rem) / 2);}}
@media (max-width:690px){.combina-wrap .product-card{flex-basis:100%;}}

/* ---------- CARRITO: la línea recién agregada ---------- */
.cart-line.nueva{animation:lineaNueva 1.8s ease .35s both;border-radius:0.625rem;}
@keyframes lineaNueva{0%{background:#C9EDE8}100%{background:rgba(201,237,232,0)}}

/* ---------- SUBRAYADO DE LOS TITULOS: una sola línea simple ---------- */
.section-title::after,.category-header h1::after{
  content:'';
  display:block;
  width:3.5rem;height:0.1875rem;
  margin:0.875rem auto 0 auto;
  border-radius:0.125rem;
  background:var(--acento);
}
/* se dibuja desde el centro cuando el título entra en pantalla */
html.linea-anim .section-title::after,html.linea-anim .category-header h1::after{
  transform:scaleX(0);
  transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
html.linea-anim .section-title.visto::after,html.linea-anim .category-header h1.visto::after{transform:scaleX(1);}

@media (prefers-reduced-motion: reduce){
  .fav-btn.pop .fav-ico,.cart-line.nueva{animation:none !important;}
}

/* =====================================================================
   MARCA BUEN DATO
   Paleta: turquesa #39C5BB, morado #7C3AED (botones), noche #080625,
   menta #E3F6F3, gris var(--gris), negro y blanco.
   Poppins y fondo #fffdf5. Para cambiar un color de la marca, edita
   las variables del principio de este archivo (:root).
   ===================================================================== */
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-500.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2');}

::selection{background:var(--acento);color:var(--negro);}
.navbar :focus-visible{outline-color:var(--noche);}
.hero :focus-visible,footer :focus-visible{outline-color:var(--blanco);}

/* cargando: el monograma BD rebota */
#page-loader .loader-spin{
  width:6rem;height:4.8125rem;border:0;border-radius:0;
  background:url(img/ursona-circulo.webp) center / contain no-repeat;
  animation:rebote .9s ease-in-out infinite;
}
@keyframes rebote{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-0.625rem) rotate(3deg)}}

/* títulos */
.section-title{font-weight:700;letter-spacing:-.8px;line-height:1.15;}
.category-header h1{letter-spacing:-.8px;line-height:1.15;}
.section-title::after,.category-header h1::after{background:var(--acento);}

/* barra superior */
.navbar{box-shadow:0 0.125rem 0.625rem rgba(0,0,0,.12);}
.nav-links{gap:2.125rem;}
.nav-links a,.nav-links button{color:var(--negro);font-size:0.9375rem;font-weight:600;}
.nav-links a:hover,.nav-links a.active,.nav-links button:hover{border-color:var(--noche);}
.icon-btn:hover{background:rgba(8,6,37,.14);}
@media (min-width:829px){
  .icon-btn{width:3.75rem;height:3.75rem;}
  .icon-btn .ico{width:1.875rem;height:1.875rem;}
}
.cart-count,.fav-count{background:var(--noche);color:var(--blanco);}
.icon-btn .ico{color:var(--blanco);}

/* portada */
.hero-copy{color:var(--blanco);}
.hero-copy h1{letter-spacing:-.8px;line-height:1.2;}
.hero-copy p{font-weight:500;color:var(--suave);}

/* botones */
:root{
  --sombra:0 0.25rem 1rem rgba(0,0,0,.08);
  --sombra-fuerte:0 0.625rem 1.625rem rgba(0,0,0,.14);
  --error:#B3261E;     /* rojo oscuro: los avisos de error se leen bien sobre el fondo claro */
  --apagado:#e6e6e6;   /* botones desactivados */
  --apagado-texto:#767676;
}
.hero-btn,.btn-pill{
  background:var(--acento);color:var(--negro);
  font-weight:600;border:0;
  box-shadow:0 0.1875rem 0.625rem rgba(0,0,0,.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.hero-btn{background:var(--acento);color:var(--negro);padding:0.75rem 1.75rem;}
.btn-pill{padding:0.75rem 1.625rem;}
.btn-pill:hover{transform:translateY(-0.125rem);box-shadow:0 0.375rem 1rem rgba(0,0,0,.22);}
.btn-pill:active{transform:none;}
.hero-btn:hover{box-shadow:0 0.375rem 1rem rgba(0,0,0,.35);}
.btn-shop-pay,.btn-add{
  background:var(--acento);color:var(--negro);
  border:0;font-weight:700;
  box-shadow:0 0.25rem 0.75rem rgba(0,0,0,.14);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-shop-pay:hover{transform:translateY(-0.125rem);box-shadow:0 0.5rem 1.125rem rgba(0,0,0,.2);}
.btn-shop-pay:active{transform:none;}
.btn-shop-pay .ico,.btn-add .ico{color:var(--blanco);}
.btn-wa-solo{background:var(--suave);border:0;box-shadow:none;}
.btn-wa-solo .ico{color:var(--negro);}
.btn-wa-solo:hover{background:var(--suave-2);box-shadow:none;}
.btn-off,.btn-off:hover{background:var(--apagado);color:var(--apagado-texto);border:0;box-shadow:none;transform:none;}
.btn-off .ico{color:var(--apagado-texto);}
.catalog-error button{background:var(--noche);}

/* tarjetas de producto */
.product-card{
  border:1px solid var(--line);border-radius:1rem;
  box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-0.1875rem);box-shadow:var(--sombra-fuerte);}
.product-card .card-link::after{border-radius:1rem;}
.product-card .img-placeholder{border-radius:0.9375rem 0.9375rem 0 0;}
.skeleton-card{border:1px solid var(--line);border-radius:1rem;box-shadow:var(--sombra);}
.product-brand{color:var(--gris);font-weight:600;}
.price-row strong{font-weight:700;}
button.cart-btn{border:0;box-shadow:0 0.1875rem 0.5rem rgba(0,0,0,.2);}
button.cart-btn:hover{transform:scale(1.08);box-shadow:0 0.3125rem 0.75rem rgba(0,0,0,.24);}
button.cart-btn:active{transform:scale(.96);}
.cart-btn .ico{color:var(--blanco);}
.cart-btn-off{background:var(--apagado);box-shadow:none;}
.cart-btn-off .ico{color:var(--apagado-texto);}
.cart-btn-pronto{background:var(--noche);}
.cart-btn-pronto .ico{color:var(--blanco);}

/* etiquetas */
.insignia{border:0;border-radius:0.375rem;box-shadow:0 1px 0.1875rem rgba(0,0,0,.2);padding:0.25rem 0.5625rem;font-weight:700;}
.insignia-nuevo{background:var(--acento);color:var(--negro);}
.insignia-ultimas{background:var(--suave);color:var(--negro);}
.insignia-oferta{background:var(--noche);color:var(--blanco);}
.insignia-agotado{background:var(--gris);color:var(--blanco);}
.insignia-pronto{background:var(--blanco);color:var(--negro);}
.fav-btn{background:rgba(255,253,245,.96);border:0;box-shadow:0 0.125rem 0.5rem rgba(0,0,0,.22);}

/* categorías y bloques */
.cat-btn{box-shadow:var(--sombra);border:1px solid var(--line);}
.cat-label{color:inherit;}
.wide-block .block-inner{background:transparent;}
.wide-block img{background:transparent;mix-blend-mode:multiply;}   /* el fondo blanco de la imagen toma el color de la página */
.cat-chip{border:0;background:var(--suave);color:var(--negro);font-weight:600;}
.cat-chip:hover{background:var(--acento);color:var(--negro);border-color:transparent;}
.cat-chip.active,.cat-chip.active:hover{background:var(--noche);color:var(--blanco);}

/* página del producto */
.gal,.main-image-placeholder{border:1px solid var(--line);border-radius:1rem;box-shadow:var(--sombra);}
.thumb{border:0.125rem solid transparent;}
.thumb.active{border-color:var(--noche);}
.product-main-title{letter-spacing:-.6px;}
.quantity-box{border:0;background:var(--suave);}
.tab-item::after{background:var(--noche);height:0.1875rem;}
.cuenta-bloque{border:1px solid var(--line);}
.cuenta-caja div{border:1px solid var(--line);}
.acciones-extra .fav-btn.fav-texto,.share-btn{
  border:0;background:var(--suave);box-shadow:none;
  transition:transform .15s ease, background .2s ease;
}
.acciones-extra .fav-btn.fav-texto:hover,.share-btn:hover{background:var(--suave-2);transform:translateY(-0.125rem);}
.acciones-extra .fav-btn.fav-texto.on{background:var(--blanco);box-shadow:inset 0 0 0 0.125rem var(--noche);}

/* tallas */
.size-btn{
  min-width:3.25rem;padding:0.5625rem 1.125rem;
  border:0.125rem solid transparent;background:var(--suave);
  font-weight:600;color:var(--negro);box-shadow:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.size-btn:hover{background:var(--acento);color:var(--negro);border-color:transparent;}
.size-btn.active,.size-btn.active:hover{background:var(--noche);color:var(--blanco);border-color:transparent;}
.talla-aviso{margin:0.625rem 0 0 0;font-size:0.8125rem;font-weight:500;color:var(--gris);}
.talla-aviso[hidden]{display:none;}
.grupo-talla.falta-talla .talla-aviso{color:var(--error);font-weight:600;}
.grupo-talla.falta-talla .size-btn:not(.active){border-color:var(--error);}
.grupo-talla.falta-talla .sizes-grid{animation:sacudir .4s ease;}
@keyframes sacudir{0%,100%{transform:translateX(0)}20%{transform:translateX(-0.4375rem)}45%{transform:translateX(0.375rem)}70%{transform:translateX(-0.25rem)}90%{transform:translateX(0.125rem)}}
@media (prefers-reduced-motion:reduce){.grupo-talla.falta-talla .sizes-grid{animation:none;}}

/* botones de compra que esperan una talla (se pueden tocar: avisan qué falta) */
.btn-shop-pay[aria-disabled="true"],.btn-shop-pay[aria-disabled="true"]:hover,.btn-add[aria-disabled="true"]{
  background:var(--apagado);color:var(--apagado-texto);
  box-shadow:none;transform:none;cursor:not-allowed;
}
.btn-shop-pay[aria-disabled="true"] .ico,.btn-add[aria-disabled="true"] .ico{color:var(--apagado-texto);}

/* carrito, buscador y ventana de talla */
.cart-qty{background:var(--suave);border:0;}
.fav-add{background:var(--acento);color:var(--negro);}
.fav-add .ico{color:var(--blanco);}
#toast{background:var(--noche);color:var(--blanco);border-radius:0.75rem;font-weight:600;}
.wa-float .ico{color:#fff;}

/* publicaciones de clientes y preguntas */
.look{border:1px solid var(--line);border-radius:1rem;box-shadow:var(--sombra);}
.look-avatar{border:0;background:var(--suave);}
.look-video{border-color:rgba(0,0,0,.3);}
.look-ver{background:var(--acento);color:var(--negro);}
.look-prod{border:0;background:var(--suave);padding:0.5rem 0.875rem;}
.faq-item{border:1px solid var(--line);box-shadow:var(--sombra);}
.faq-item[open]{background:var(--suave);}
.faq-item summary{font-weight:600;}

/* pie de página */
footer{background:var(--noche);box-shadow:none;color:var(--suave);}
footer .fine-print{color:var(--suave);font-weight:500;}
.social-btn{background:var(--blanco);transition:transform .15s ease, background .2s ease;}
.social-btn:hover{background:var(--acento);transform:translateY(-0.125rem);}
.social-btn .ico{color:var(--negro);}
@media (max-width:828px){
  footer img.foot-logo{height:3rem;}
}


/* =====================================================================
   BOTONES EN MORADO, MENÚ CENTRADO Y FILAS DE PRODUCTOS CENTRADAS
   (el color morado se cambia en --realce, al principio del archivo)
   ===================================================================== */

/* botones y etiquetas que destacan: morado con texto e íconos blancos
   (el botón secundario de WhatsApp, .btn-wa-solo, se queda en menta para que el principal destaque) */
.hero-btn,.btn-pill,.btn-shop-pay:not(.btn-wa-solo),.btn-add,.fav-add,.look-ver,
button.cart-btn:not(.cart-btn-off):not(.cart-btn-pronto){
  background:var(--realce);color:var(--blanco);
}
.hero-btn .ico,.btn-pill .ico,.btn-shop-pay:not(.btn-wa-solo) .ico,.btn-add .ico,.fav-add .ico,.look-ver .ico,
.cart-btn:not(.cart-btn-off) .ico{color:var(--blanco);}
.insignia-nuevo{background:var(--realce);color:var(--blanco);}
.hero-btn:hover,.btn-pill:hover,.look-ver:hover,.fav-add:hover,
.btn-shop-pay:not(.btn-wa-solo):not([aria-disabled="true"]):hover,.btn-add:not([aria-disabled="true"]):hover,
button.cart-btn:not(.cart-btn-off):not(.cart-btn-pronto):hover{background:var(--realce-2);}
.btn-shop-pay,.btn-add,.fav-add,.look-ver,.hero-btn,.btn-pill{transition:transform .15s ease, box-shadow .15s ease, background .2s ease;}
.btn-add:not([aria-disabled="true"]):hover,.fav-add:hover,.look-ver:hover{transform:translateY(-0.125rem);}
button.cart-btn{transition:transform .15s ease, box-shadow .15s ease, background .2s ease;}

/* redes del pie: al pasar el mouse se vuelven moradas con el ícono blanco */
.social-btn:hover{background:var(--realce);}
.social-btn:hover .ico{color:var(--blanco);}

/* menú: Inicio, Productos y Soporte en blanco; al pasar el mouse crecen y cambian de color */
.nav-links a,.nav-links button{
  display:inline-block;
  color:var(--blanco);font-size:1rem;font-weight:600;
  text-shadow:0 1px 0.125rem rgba(8,6,37,.3);   /* el blanco sobre turquesa necesita un poco de sombra para leerse */
  transition:transform .18s ease, color .18s ease, border-color .18s ease;
}
.nav-links a.active{border-color:var(--blanco);}
.nav-links a:hover,.nav-links button:hover{
  color:var(--noche);border-color:var(--noche);
  transform:scale(1.12);text-shadow:none;opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .nav-links a:hover,.nav-links button:hover{transform:none;}
}
/* el menú queda en el centro exacto de la barra (si hay espacio) */
@media (min-width:829px){
  .navbar{display:grid;grid-template-columns:1fr auto 1fr;}
  .navbar .logo{justify-self:start;}
  .nav-icons{justify-self:end;}
}
/* en pantallas medianas (tablet) los íconos se achican para que el menú siga en el centro */
@media (min-width:829px) and (max-width:1104px){
  .nav-links{gap:1.5rem;}
  .nav-icons{gap:0.25rem;}
  .icon-btn{width:2.875rem;height:2.875rem;}
  .icon-btn .ico{width:1.5625rem;height:1.5625rem;}
  .cart-count{top:0.25rem;right:0;}
}
/* menú desplegable del celular: fondo menta, letras negras */
@media (max-width:828px){
  .nav-links.open a,.nav-links.open .nav-fav-li button{color:var(--negro);text-shadow:none;}
  .nav-links.open a.active{color:var(--realce);}
  .nav-links.open a:hover,.nav-links.open .nav-fav-li button:hover{
    color:var(--realce);transform:scale(1.04);transform-origin:left center;
  }
}

/* filas de productos: siempre centradas, hasta 5 por fila (4 en Productos);
   si una fila queda incompleta, sus tarjetas se quedan en el medio */
.grid-row{
  --cols:5;--gx:1.75rem;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.5rem var(--gx);
}
.grid-row > *{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));min-width:0;}
.grid-row > .catalog-empty,.grid-row > .catalog-error{flex:0 0 100%;}
body.page-categoria .grid-row{--cols:4;gap:2rem var(--gx);}
@media (max-width:1178px){
  .grid-row,body.page-categoria .grid-row{--cols:3;}
}
@media (max-width:828px){
  .grid-row,body.page-categoria .grid-row{--cols:2;}
}
@media (max-width:483px){
  .grid-row,body.page-categoria .grid-row{--cols:1;}
}
/* "Combina con" y "Otros productos": también centrados */
.goodies-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;}
.goodies-grid .product-card,.goodies-grid .skeleton-card{flex:0 1 calc((100% - 4.5rem) / 4);min-width:0;}
@media (max-width:1178px){.goodies-grid .product-card,.goodies-grid .skeleton-card{flex-basis:calc((100% - 1.5rem) / 2);}}
@media (max-width:690px){.goodies-grid .product-card,.goodies-grid .skeleton-card{flex-basis:100%;}}


/* =====================================================================
   PÁGINA DE TÉRMINOS Y POLÍTICA DE CONTENIDO (terminos.html)
   ===================================================================== */
.legal{max-width:48.75rem;margin:0 auto;padding:0.25rem clamp(1.25rem,5vw,2.5rem) 4.5rem;line-height:1.7;}
.legal-fecha{text-align:center;color:var(--gris);font-size:0.875rem;margin:0 0 1.75rem 0;}
.legal h2{font-size:clamp(1.3125rem,2.6vw,1.6875rem);font-weight:700;letter-spacing:-.5px;line-height:1.25;margin:0 0 0.875rem 0;}
.legal h3{font-size:1.0625rem;font-weight:600;margin:1.625rem 0 0.5rem 0;}
.legal p,.legal li{font-size:1rem;}
.legal p{margin:0 0 0.75rem 0;}
.legal ul{margin:0 0 0.75rem 0;padding-left:1.375rem;}
.legal li{margin-bottom:0.625rem;}
.legal > section{margin-top:2.75rem;}
.legal > section[id]{scroll-margin-top:calc(var(--nav-h) + 1.25rem);}
.legal > .legal-resumen{margin-top:0;background:var(--suave);border-radius:1rem;padding:1.375rem 1.625rem 0.75rem 1.625rem;}
.legal-resumen h2{font-size:1.25rem;margin-bottom:0.625rem;}
.legal-indice{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin:1.75rem 0 0 0;}
.legal-indice a{background:var(--suave);color:var(--negro);font-weight:600;font-size:0.875rem;line-height:1.3;padding:0.5rem 0.875rem;border-radius:6.25rem;transition:background .2s ease;}
.legal-indice a:hover{background:var(--suave-2);}
.legal-accion{margin-top:1.125rem;}
.legal-accion .btn-pill[hidden]{display:none;}
body.page-terminos footer{margin-top:1.5rem;}

/* enlace a los términos en el pie de página */
.foot-links{margin:1.125rem 0 0.625rem 0;text-align:center;}
.foot-links a{color:var(--suave);font-size:0.875rem;font-weight:500;text-decoration:underline;text-underline-offset:0.1875rem;transition:color .2s ease;}
.foot-links a:hover{color:var(--blanco);}

/* Enlaces de las preguntas frecuentes (dentro de las respuestas y el de WhatsApp): color noche y negrita */
.faq-resp a{color:var(--noche);font-weight:700;text-decoration:underline;text-underline-offset:0.1875rem;text-decoration-thickness:1.5px;transition:text-decoration-color .2s ease;}
.faq-resp a:hover{text-decoration-color:var(--acento);}
.faq-wa a{color:var(--noche);font-weight:700;}
.faq-wa a:hover{text-decoration-color:var(--acento);}

/* "Otros productos": la foto llena todo el marco de la tarjeta, como en el inicio (sin franjas a los lados).
   La regla de "contener" de la página del producto era para la galería grande y también les llegaba a estas tarjetas. */
body.page-producto #sec-otros .product-card .img-placeholder img{object-fit:cover;}


/* =====================================================================
   PULIDO (noviembre 2026)
   Correcciones de errores y mejoras de experiencia. Cada bloque dice qué
   arregla. Las medidas de celular viven en las mismas media queries que
   el resto del archivo (720 px y 600 px).
   ===================================================================== */

/* --- Movimiento: respetar "reducir movimiento" también en el desplazamiento suave --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* --- Enlace "Saltar al contenido" (solo se ve al navegar con teclado) --- */
.saltar{
  position:fixed;top:0.75rem;left:0.75rem;z-index:10001;
  padding:0.75rem 1.125rem;border-radius:6.25rem;
  background:var(--noche);color:var(--blanco);
  font-weight:600;font-size:0.9375rem;
  transform:translateY(-200%);
  transition:transform .15s ease;
}
.saltar:focus-visible{transform:none;outline:0.1875rem solid var(--acento);outline-offset:0.125rem;}
main:focus{outline:none;}

/* --- Cargador: si ya hay copia local del catálogo, la página se pinta al instante y no hace falta la pantalla menta --- */
html.con-copia #page-loader{display:none;}

/* --- ERROR 1: categorías en celular. Las reglas .span-3/.span-6 (escritorio) pisaban la de celular y la cuadrícula
       se rompía (3 cuadros diminutos + 2 gigantes). Aquí ganan por especificidad. --- */
@media (max-width:828px){
  .cat-wrap .cat-btn,.cat-wrap .cat-btn.span-3,.cat-wrap .cat-btn.span-6{grid-column:span 1;aspect-ratio:16/10;}
  /* si el número de categorías es impar, la última ocupa las dos columnas como una franja baja */
  .cat-wrap .cat-btn:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:34/10;}
}

/* --- ERROR 7: en escritorio, los cuadros de la fila incompleta eran 1,5 veces más altos. Con estas proporciones
       miden lo mismo de alto que los demás. --- */
@media (min-width:829px){
  .cat-btn.span-3{aspect-ratio:24/10;}
  .cat-btn.span-6{aspect-ratio:48/10;}
}

/* --- ERROR 2: "Agregar al carrito" sin talla elegida se veía violeta (activo) salvo con el mouse encima.
       La regla morada general iba después que la de aria-disabled; esta va al final y gana. --- */
.btn-shop-pay[aria-disabled="true"],.btn-add[aria-disabled="true"],
.btn-shop-pay[aria-disabled="true"]:hover,.btn-add[aria-disabled="true"]:hover{
  background:var(--apagado);color:var(--apagado-texto);
  box-shadow:none;transform:none;cursor:not-allowed;
}
.btn-shop-pay[aria-disabled="true"] .ico,.btn-add[aria-disabled="true"] .ico{color:var(--apagado-texto);}

/* --- ERROR 3: en la página del producto, TODAS las tarjetas (Combina con, Otros productos, Quizá te interese)
       llenan el marco con la foto, como en el inicio. "Contener" queda solo para la galería grande. --- */
body.page-producto .product-card .img-placeholder img,
body.page-404 .product-card .img-placeholder img{object-fit:cover;}

/* --- ERROR 4: saltos de contenido al cargar. Los esqueletos miden lo mismo que el contenido final. --- */
.skeleton-card{height:28.25rem;}                               /* tarjeta real: foto 276 + textos + 90 de base */
.main-image-placeholder{height:33.75rem;}                      /* igual que .gal */
@media (max-width:1178px){ .main-image-placeholder{height:27.5rem;} }
@media (max-width:828px){ .main-image-placeholder{height:clamp(20rem,112vw,28.75rem);} }
.cat-chips{min-height:4.75rem;}                                /* los filtros aparecen después del catálogo: se reserva su alto */
.catalog-bar{min-height:2.75rem;}
/* columna de datos del producto mientras llega el catálogo: barras grises que ocupan el lugar del título, precio y botones */
.product-details-info.esqueleto-info{opacity:1;transform:none;animation:none;gap:1rem;}
.sk{display:block;border-radius:0.5rem;background:#ececea;position:relative;overflow:hidden;}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.3s infinite;}
.sk-marca{width:6.875rem;height:0.875rem;}
.sk-titulo{width:80%;height:2.5rem;}
.sk-precio{width:5.625rem;height:1.875rem;}
.sk-linea{width:60%;height:1rem;margin-top:0.5rem;}
.sk-boton{height:3.375rem;border-radius:6.25rem;margin-top:0.25rem;}
@media (prefers-reduced-motion:reduce){ .sk::after{animation:none;} }

/* --- ERROR 6: zonas de toque. Botones +/− de cantidad (eran 18x27 px) y puntos de la galería (22 px). --- */
.quantity-box{width:auto;min-width:8.25rem;padding:0.1875rem 0.375rem;gap:0.25rem;}
.qty-btn{width:2.375rem;height:2.375rem;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s ease;}
.qty-btn:hover{background:var(--suave-2);}
.qty-val{min-width:1.75rem;text-align:center;}
.cart-qty{padding:0.125rem 0.25rem;gap:0.25rem;}
.cart-qty button{width:2rem;height:2rem;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;}
.cart-qty button:hover{background:var(--suave-2);}
.gal-dot{width:1.625rem;height:1.625rem;}

/* --- ERROR 8: textos por debajo de 12 px --- */
.insignia{font-size:0.75rem;}
.insignia-pronto{font-size:0.7812rem;}
.cuenta-caja small{font-size:0.75rem;}
.cart-thumb span{font-size:0.6875rem;}

/* --- Portada con imagen: degradado y sombra para que el texto se lea con cualquier foto (sin imagen no cambia nada) --- */
.hero:not(.sin-imagen) .hero-dimmer{
  opacity:1;
  background:linear-gradient(180deg,rgba(8,6,37,.42) 0%,rgba(8,6,37,.28) 45%,rgba(8,6,37,.55) 100%);
}
.hero:not(.sin-imagen) .hero-copy h1,.hero:not(.sin-imagen) .hero-copy p{text-shadow:0 0.125rem 0.875rem rgba(0,0,0,.45),0 1px 0.125rem rgba(0,0,0,.4);}

/* --- Menú: la página actual también se marca para lectores de pantalla (aria-current); el estilo es el mismo --- */
.nav-links a[aria-current="page"]{border-color:var(--blanco);}

/* --- Migas de pan en el producto (Inicio › Categoría › Producto) --- */
.migas{
  max-width:84rem;margin:1.75rem auto -1.25rem auto;
  padding:0 clamp(1.25rem,5vw,2.5rem);
  font-size:0.875rem;color:var(--gris);
  display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;
  min-height:1.3125rem;
}
.migas a{color:var(--gris);text-decoration:underline;text-underline-offset:0.1875rem;text-decoration-color:rgba(90,90,90,.45);transition:color .15s ease;}
.migas a:hover{color:var(--noche);text-decoration-color:var(--noche);}
.migas .sep{color:rgba(90,90,90,.6);}
.migas [aria-current="page"]{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(60vw,26.25rem);}
@media (max-width:828px){ .migas{margin:1.125rem auto -0.875rem auto;font-size:0.8125rem;} }
body.page-producto .product-detail-container{margin-top:2.5rem;}
/* Mientras llega el catálogo, un espacio del alto de la pantalla mantiene el pie de página fuera de la vista;
   así, cuando se dibujan las secciones, nada de lo que se ve salta de lugar. Al terminar de cargar, desaparece. */
.espaciador-carga{height:100vh;}
body.catalogo-listo .espaciador-carga{height:0;}

/* --- Catálogo: conteo, orden y filtros deslizables en celular --- */
.catalog-bar{
  max-width:84rem;margin:-0.75rem auto 1.375rem auto;
  padding:0 clamp(1.25rem,5vw,2.5rem);
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem 1.25rem;flex-wrap:wrap;
}
.catalog-count{margin:0;font-size:0.875rem;font-weight:500;color:var(--gris);}
.catalog-order{display:inline-flex;align-items:center;gap:0.625rem;font-size:0.875rem;font-weight:600;}
.catalog-order[hidden]{display:none;}
.catalog-order select{
  -webkit-appearance:none;appearance:none;
  font:inherit;font-weight:600;font-size:0.875rem;color:var(--negro);
  background:var(--suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23080625' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.875rem center;
  border:0;border-radius:6.25rem;
  padding:0.625rem 2.5rem 0.625rem 1rem;
  cursor:pointer;
  transition:background-color .15s ease;
}
.catalog-order select:hover{background-color:var(--suave-2);}
.catalog-order select:focus-visible{outline:0.125rem solid var(--ink);outline-offset:0.1875rem;}
.catalog-sub{text-align:center;margin:-0.625rem 0 1.375rem 0;color:var(--gris);font-size:0.9375rem;}
.catalog-sub a{color:var(--noche);font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem;}
@media (max-width:828px){
  .cat-chips{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    padding:0.125rem 1.25rem 1.75rem 1.25rem;min-height:4rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding:0 1.25rem;
    /* los bordes se desvanecen para que se note que hay más filtros a los lados */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.125rem,#000 calc(100% - 1.125rem),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 1.125rem,#000 calc(100% - 1.125rem),transparent 100%);
  }
  .cat-chips::-webkit-scrollbar{display:none;}
  .cat-chip{flex:none;scroll-snap-align:start;}
  .catalog-bar{margin-top:-0.25rem;}
}

/* --- Buscador: enlace "Ver todos los resultados" al final del desplegable --- */
.search-todos{
  display:flex;justify-content:center;align-items:center;gap:0.5rem;
  margin-top:0.625rem;padding:0.75rem 0.5rem;
  font-size:0.875rem;font-weight:600;color:var(--noche);
  border-radius:0.75rem;background:var(--suave);
  transition:background .15s ease;
}
.search-todos:hover{background:var(--suave-2);}
.search-item{border-radius:0.5rem;}
.search-item:hover{background:var(--suave);}
.search-item b{font-weight:700;color:var(--ink);}
.search-item .search-marca{display:block;font-size:0.75rem;font-weight:500;color:var(--gris);}

/* --- Publicaciones solo de texto (sin fotos): el texto es el protagonista, como una cita --- */
.look.solo-texto .look-text{
  font-size:1.0625rem;line-height:1.5;font-weight:500;color:var(--ink);
  padding:1.375rem 1.125rem 0.625rem 1.125rem;
  display:block;-webkit-line-clamp:unset;
}
.look.solo-texto .look-text::before{content:'\201C';display:block;font-size:2.75rem;line-height:.6;color:var(--acento);font-weight:700;margin-bottom:0.5rem;}
.look.solo-texto .look-vermas{display:none;}
.look.solo-texto .look-acts{padding-top:0.375rem;}

/* --- Pie de página: enlaces de navegación --- */
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0.375rem 1.375rem;margin:0 0 0.875rem 0;}
.foot-nav a{color:var(--blanco);font-size:0.9375rem;font-weight:600;transition:color .15s ease;}
.foot-nav a:hover{color:var(--acento);}

/* --- Página no encontrada (404.html) y producto inexistente --- */
.no-encontrado{text-align:center;max-width:38.75rem;margin:0 auto;padding:3.5rem clamp(1.25rem,5vw,2.5rem) 1.5rem;}
.no-encontrado-codigo{margin:0 0 0.375rem 0;font-size:clamp(3.5rem,10vw,6rem);font-weight:700;line-height:1;letter-spacing:-0.1875rem;color:var(--acento);}
.no-encontrado h1{font-size:clamp(1.625rem,4vw,2.5rem);font-weight:700;letter-spacing:-.8px;line-height:1.15;margin:0 0 0.75rem 0;}
.no-encontrado p{color:var(--gris);font-size:1rem;line-height:1.55;margin:0 0 1.5rem 0;}
.no-encontrado-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem;}
.btn-pill.btn-pill-suave,.btn-pill.btn-pill-suave:hover{background:var(--suave);color:var(--negro);box-shadow:none;}
.btn-pill.btn-pill-suave:hover{background:var(--suave-2);}
body.page-404 footer{margin-top:4rem;}
body.page-producto .no-encontrado{grid-column:1 / -1;padding-top:1.5rem;}

/* --- Barra fija de compra en el celular (página del producto): aparece cuando el botón principal sale de pantalla --- */
.barra-compra{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  display:none;align-items:center;gap:0.75rem;
  padding:0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom)) 1rem;
  background:rgba(255,253,245,.96);
  -webkit-backdrop-filter:blur(0.625rem);backdrop-filter:blur(0.625rem);
  box-shadow:0 -0.375rem 1.25rem rgba(0,0,0,.1);
  transform:translateY(110%);
  transition:transform .25s ease;
}
.barra-compra .barra-precio{display:flex;flex-direction:column;min-width:0;line-height:1.15;}
.barra-compra .barra-precio small{font-size:0.75rem;color:var(--gris);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;}
.barra-compra .barra-precio strong{font-size:1.25rem;font-weight:700;}
.barra-compra .btn-shop-pay{flex:1;width:auto;padding:0.875rem 1rem;font-size:0.9375rem;margin:0;}
@media (max-width:828px){
  .barra-compra{display:flex;}
  body.con-barra .barra-compra{transform:none;}
  body.con-barra{padding-bottom:5.25rem;}
  body.con-barra .wa-float{bottom:5.75rem;}
  body.con-barra #toast{bottom:6.5rem;}
}
@media (prefers-reduced-motion:reduce){ .barra-compra{transition:none;} }

/* --- Tarjetas en celular: dos por fila, más compactas (antes: una sola columna bajo 420 px).
       Para volver a una columna, cambia --cols:2 por --cols:1 en la regla de 420 px de aquí abajo. --- */
@media (max-width:690px){
  .product-card{padding-bottom:4.375rem;border-radius:0.875rem;}
  .product-card .card-link::after{border-radius:0.875rem;}
  .product-card .img-placeholder{height:auto;aspect-ratio:4/5;border-radius:0.8125rem 0.8125rem 0 0;}
  .product-card .copy{padding:0.75rem 0.75rem 0 0.75rem;}
  .product-brand{font-size:0.75rem;letter-spacing:.3px;margin-bottom:0.25rem;}
  .product-card .product-title,body.page-categoria .product-title{font-size:1rem;line-height:1.3;}
  .price-row{left:0.75rem;bottom:0.75rem;height:auto;gap:1px;font-size:0.75rem;}
  .price-row strong{font-size:1.1875rem;}
  .price-old{font-size:0.75rem;margin-left:0.25rem;}
  .cart-btn{width:2.875rem;height:2.875rem;right:0.625rem;bottom:0.625rem;}
  .cart-btn .ico{width:1.5625rem;height:1.5625rem;}
  .fav-btn{width:2.375rem;height:2.375rem;top:0.5rem;right:0.5rem;}
  .fav-ico{width:1.375rem;height:1.375rem;}
  .card-tags{top:0.5rem;left:0.5rem;right:3.125rem;}
  .insignia{padding:0.25rem 0.4375rem;font-size:0.75rem;letter-spacing:.3px;}
  .skeleton-card{height:auto;aspect-ratio:169/338;}
  .skeleton-card::before{height:auto;aspect-ratio:4/5;}
}
@media (max-width:483px){
  .grid-row,body.page-categoria .grid-row{--cols:2;--gx:0.75rem;gap:1.125rem var(--gx);}
  .goodies-grid .product-card,.goodies-grid .skeleton-card,.combina-wrap .product-card{flex-basis:calc((100% - 0.75rem) / 2);}
  .goodies-grid,.combina-wrap .goodies-grid{gap:1.125rem 0.75rem;}
}

/* --- Buscador: flecha del enlace "Ver resultados" --- */
.search-todos .ico{width:1.125rem;height:1.125rem;}

/* --- Producto inexistente dentro de la ficha: el signo de interrogación en lugar del "404" --- */
body.page-producto .no-encontrado-codigo{font-size:clamp(3rem,8vw,5rem);}

/* --- Barra de compra del celular: se esconde mientras el carrito, favoritos o el selector de talla están abiertos --- */
body.cart-open .barra-compra{transform:translateY(110%);}

/* --- Cajones (carrito y favoritos): al abrir, el cajón es visible desde el primer instante, así el foco del teclado
       puede entrar de inmediato al botón de cerrar (antes la transición de "visibility" lo impedía). Al cerrar, sigue
       visible mientras se desliza hacia afuera. --- */
.cart-drawer{transition:transform .35s cubic-bezier(.22,.7,.25,1), visibility 0s linear .35s;}
.cart-drawer.open{transition:transform .35s cubic-bezier(.22,.7,.25,1), visibility 0s;}
@media (prefers-reduced-motion:reduce){ .cart-drawer,.cart-drawer.open{transition:none;} }