/* ==========================================================================
   MAIN.CSS — CSS consolidado MOBILE FIRST
   Grupo Crisol · new.grupocrisol.com
   Orden:
     1. Tokens (mobile-first)
     2. Base (reset, tipografía, iconos, enlaces)
     3. Layout (contenedores, grids, footer)
     4. Cabecera
   (continúa en siguientes secciones)
   ========================================================================== */


/* ==========================================================================
   1) TOKENS · MOBILE FIRST
   Base = móvil (<500px). Escala con min-width.
   ========================================================================== */

:root{
  /* ── Colores marca ── */
  --r: #8e1f30;
  --rO: #6a1724;
  --rC: #c78f98;
  --rC2: #e9d2d6;
  --rC3: #f1e7e9;
  --g: #545759;
  --gO: #1b1c1d;
  --g2: #6b6e70;
  --gM: #999;
  --gC: #ddd;
  --gC2: #efefef;
  --gC3: #eeeeee6b;
  --w2:#faf7f2;

  /* ── Tipografía base ── */
  --fuente-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";

  /* ── Escala tipográfica — BASE MÓVIL (<500px) ── */
  --fXS: clamp(0.86rem, calc(0.840rem + 0.100vw), 0.92rem);
  --fS:  clamp(1.02rem, calc(0.990rem + 0.140vw), 1.08rem);
  --fM:  clamp(1.10rem, calc(1.060rem + 0.200vw), 1.18rem);
  --fL:  clamp(1.17rem, calc(1.120rem + 0.220vw), 1.28rem);
  --fXL: clamp(1.28rem, calc(1.200rem + 0.350vw), 1.45rem);
  --f2XL: clamp(1.6rem, calc(1.443rem + 0.696vw), 2rem);
  --f3XL: clamp(2.1rem, calc(1.748rem + 1.565vw), 3rem);
  --f4XL: clamp(3rem,   calc(2.217rem + 3.478vw), 5rem);

  /* ── Espacios — BASE MÓVIL (768px -15%) ── */
  --eXS:  clamp(0.128rem, calc(0.110rem + 0.074vw), 0.170rem);
  --eS:   clamp(0.298rem, calc(0.247rem + 0.222vw), 0.425rem);
  --eM:   clamp(0.468rem, calc(0.401rem + 0.296vw), 0.638rem);
  --eL:   clamp(0.638rem, calc(0.554rem + 0.370vw), 0.850rem);
  --eX:   clamp(0.935rem, calc(0.802rem + 0.592vw), 1.275rem);
  --eXL:  clamp(1.190rem, calc(0.990rem + 0.887vw), 1.700rem);
  --e2XL: clamp(1.700rem, calc(1.368rem + 1.478vw), 2.550rem);
  --e3XL: clamp(2.210rem, calc(1.744rem + 2.070vw), 3.400rem);
  --e4XL: clamp(3rem, calc(3rem + 4vw), 8rem);

  /* ── Border-radius ── */
  --rP: 8px;
  --rM: 16px;
  --rB: 999px;

  /* ── Sombras ── */
  --shadowC: 0 2px 6px rgba(0, 0, 0, 0.18);

  /* ── Line-height ── */
  --lhXS: 1.45;
  --lhS:  1.50;
  --lhM:  1.50;
  --lhL:  1.45;
  --lhXL: 1.35;
  --lh2XL: 1.30;
  --lh3XL: 1.15;
  --lh4XL: 1.05;
}

/* ── 501px+: tipografía tablet ── */
@media (min-width: 501px){
  :root{
    --fXS: clamp(0.84rem, calc(0.820rem + 0.090vw), 0.90rem);
    --fS:  clamp(1.00rem, calc(0.970rem + 0.130vw), 1.06rem);
    --fM:  clamp(1.07rem, calc(1.030rem + 0.180vw), 1.16rem);
  }
}

/* ── 769px+: tipografía + espacios desktop ── */
@media (min-width: 769px){
  :root{
    --fXS: clamp(0.75rem, calc(0.730rem + 0.087vw), 0.8rem);
    --fS:  clamp(0.95rem, calc(0.930rem + 0.087vw), 1rem);
    --fM:  clamp(1.05rem, calc(0.991rem + 0.261vw), 1.2rem);
    --fL:  clamp(1.15rem, calc(1.091rem + 0.261vw), 1.3rem);
    --fXL: clamp(1.25rem, calc(1.152rem + 0.435vw), 1.5rem);

    --eXS:  clamp(0.15rem, calc(0.130rem + 0.087vw), 0.2rem);
    --eS:   clamp(0.35rem, calc(0.291rem + 0.261vw), 0.5rem);
    --eM:   clamp(0.55rem, calc(0.472rem + 0.348vw), 0.75rem);
    --eL:   clamp(0.75rem, calc(0.652rem + 0.435vw), 1rem);
    --eX:   clamp(1.1rem,  calc(0.943rem + 0.696vw), 1.5rem);
    --eXL:  clamp(1.4rem,  calc(1.165rem + 1.043vw), 2rem);
    --e2XL: clamp(2rem,    calc(1.609rem + 1.739vw), 3rem);
    --e3XL: clamp(2.6rem,  calc(2.052rem + 2.435vw), 4rem);
  }
}


/* ==========================================================================
   2) BASE · Reset + tipografía + iconos + enlaces
   ========================================================================== */

*,
*::before,
*::after{ box-sizing: border-box; }
*{ margin: 0; }

html{
  color: var(--gO);
  font-family: var(--fuente-base);
  font-size: 100%;
  font-weight: 400;
  font-style: normal;
}

body{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.estructura{ flex: 1 0 auto; }

:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
}

/* ── Enlaces globales ── */
a, .item-accion{
  color: var(--r);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease-out;
}

a:not(.bx-prev):not(.bx-next)::after, .item-accion:not(.sin-subrayado)::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

a:hover, a:focus-visible{ color: var(--gO); }

a:not(.bx-prev):not(.bx-next):hover::after, a:not(.bx-prev):not(.bx-next):focus-visible::after,
.item-accion:hover::after, .item-accion:focus-visible::after{
  transform: scaleX(1);
}

a{ text-decoration: none; }

/* No subrayado en enlaces con imagen */
a:has(img):hover::after,
a:has(img):focus-visible::after,
a:has(*[style*="background-image"]):hover::after,
a:has(*[style*="background-image"]):focus-visible::after,
a:has(.bg-cover):hover::after,
a:has(.bg-cover):focus-visible::after{
  content: none !important;
}

.lateral-icono-enlace:after, .footer-ig:after{ display: none; }

/* ── Tipografía por defecto ── */
h1{
  font-size: var(--f3XL);
  font-weight: 300;
  line-height: var(--lh3XL);
}

p{
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

section header h2{
  font-weight: 300;
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  padding-top: var(--eXL);
}

section h3{
  font-weight: 400;
  font-size: var(--fXL);
  line-height: var(--lhXS);
}

/* ── Iconos ── */
.cabecera-icono{ font: inherit; }

.cabecera-icono-svg, .icono, .cabecera-fam-icono{
  width: 1.5rem;
  height: 1.5rem;
}

.icono{
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.i-color{ fill: var(--g); }

.icono-boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--rM);
  border: none;
  background: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  color: var(--rC);
}

.icono-boton:hover{ background: var(--gC2); }

.icono-boton-carrito{ position: relative; }

.icono-boton-carrito [data-js="carrito-badge"]{ font-size: var(--fS); color: var(--g); }
.icono-boton-listas{
  font-size: 0;
  line-height: 0;
  color: var(--g);
}

.icono-listas{ color: var(--rC); }
.icono-boton--login{ color: var(--rC); }
.icono-carrito{ color: var(--rC); }



/* ==========================================================================
   3) LAYOUT · Contenedores, grids, footer
   ========================================================================== */

.cabecera-top{
  display: none;
  justify-content: flex-end;
  align-items: baseline;
  padding: var(--eXS) var(--eL) 0 0;
  font-size: var(--fXS);
}

/* ── DosColumnas ── */
.DosColumnas-layout{
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}

.DosColumnas-layout .columna-resumen{
  position: static;
  top: auto;
  width: 100%;
}

.DosColumnas-layout .columna-resumen .resumen{
  position: static;
  top: auto;
}

@media (min-width: 501px){
  .DosColumnas-layout{
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: var(--eL);
    align-items: flex-start;
    padding-top: var(--eXL);
  }
  .DosColumnas-layout .columna-resumen{
    position: sticky;
    top: var(--eXL);
    align-self: start;
    margin-bottom: var(--e3XL);
    max-height: calc(100vh - (var(--eXL) * 2));
    width: auto;
  }
}

@media (min-width: 1025px){
  .DosColumnas-layout{
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  }
}

/* ── Wrappers ── */
.pagina{
  max-width: var(--maxW);
  margin: 0 auto;
  padding: 0 var(--eXL);
}

.seccion{ padding: var(--eXL) 0; }
.seccion--estrecha{ max-width: 1200px; margin-inline: auto; }

.fila{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eL);
  align-items: stretch;
}

.col{
  flex: 1 1 18rem;
  min-width: 0;
}

.principal{
  margin: 0 auto;
  padding: var(--eS) var(--eL);
}

h2.seccion-familia{
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 500;
  padding-top: var(--eXL);
}

/* ── Buscador ── */
.buscador{
  display: flex;
  align-items: center;
  gap: var(--eS);
  padding: 0 var(--eM);
  border-radius: var(--rB);
  background: var(--gC2);
  width: 100%;
  outline: none;
}

.buscador:focus-within{
  outline: 1px solid var(--rC2);
  outline-offset: 2px;
}

.buscador__campo{
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--eS) 0;
  font: inherit;
  color: var(--gO);
}

.buscador__campo:focus{ outline: none; }
.buscador__campo::placeholder{ color: var(--gM); }

.buscador__boton{
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--rC);
}

.buscador__icono{
  width: var(--eXL);
  height: var(--eXL);
}

.buscador__icono:hover{ fill: var(--g); }

@media (min-width: 769px){
  .buscador__icono{
    width: var(--eL);
    height: var(--eL);
  }
}

/* ── Sticky resúmenes ── */
.carrito-resumen, .resumen-presupuesto{
  position: sticky;
  top: var(--eXL);
  align-self: start;
}

/* ── Grids de listado ── */
.grid-productos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  justify-content: start;
  align-items: stretch;
  gap: var(--eM);
  padding-bottom: var(--e2XL);
}

@media (min-width: 501px){
  .grid-productos{
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr))
  }
}

.grid-nav{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  justify-content: stretch;
  align-items: stretch;
  gap: var(--eS);
  margin-top: var(--eL);
}

/* ── Filtros contenedor ── */
.contenedor-filtros-chip{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eM);
  padding: 0;
  margin: var(--eL) 0;
  align-items: center;
}

/* Móvil: chips ocultos, solo "Ver filtros" + "Ordenar" */
.filtros-chips{
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 2.2rem;
}
.filtros-mas{ display: inline-flex; }

.filtro-orden-wrapper{
  margin-left: auto;
}

@media (min-width: 501px){
  .filtros-chips{
    display: flex;
    flex-wrap: nowrap;
    gap: var(--eS);
    align-items: center;
  }
}

@media (min-width: 1025px){
  .filtros-mas{ display: none; }
}

/* ── Hero layout helpers ── */
.hero-layout__frase{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  white-space: pre-line;
}

.hero-layout__miga{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-transform: uppercase;
  color: var(--g);
}

/* ── Resultado indicador ── */
.resultado-indicador{
  margin: var(--eL) 0;
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--gM);
}

.contenedor-filtros-chip + .resultado-indicador{
  margin-top: 0;
  margin-left: var(--eL);
}


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

.footer{
  margin-top: var(--e2XL);
  padding: var(--eL) var(--eXL);
  background: var(--rC3);
  border-top: 1px solid var(--rC);
  position: relative;
}

.footer-cols{
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.footer-h{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 700;
  margin-bottom: 0;
}

.footer-p{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 300;
  opacity: 0.9;
}

.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  row-gap: var(--eXS);
  column-gap: var(--eL);
  flex-wrap: wrap;
}

.footer-list a{ color: var(--gO); }
.footer-list a:hover{ color: var(--r); }

.footer-bottom{
  margin-top: var(--eXL);
  padding-top: var(--eM);
  border-top: 1px solid var(--gC);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eS);
}

.footer-copy{ opacity: 0.8; }

/* Icono flotante Instagram */
.footer-ig{
  position: absolute;
  top: 0;
  right: var(--eM);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  color: var(--rC);
  z-index: 2;
  background: white;
  border-radius: var(--rB);
  border: 1px solid var(--rC);
}

.footer-ig:hover{ border-radius: var(--rP); }

.footer-ig-icon{
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--rC);
  stroke: none;
}

.footer-ig:hover .footer-ig-icon{ fill: var(--gO); }

@media (min-width: 769px){
  .footer{ padding: var(--eXL) var(--eXL); }
  .footer-cols{
    flex-direction: row;
    gap: var(--eXL);
  }
  .footer-h{ margin-bottom: var(--eS); }
  .footer-list{
    display: grid;
    gap: var(--eXS);
  }
  .footer-bottom{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer-ig{
    right: var(--eXL);
    width: calc(var(--eL) * 2);
    height: calc(var(--eL) * 2);
  }
}

@media (min-width: 1025px){
  .footer{ padding: var(--eXL) var(--eXL); }
  .footer-cols{ gap: var(--e3XL); }
  .footer-list li a{ font-size: var(--fXS); }
}


/* ==========================================================================
   LEGAL / AYUDA
   ========================================================================== */

.hero-layout-ayuda{ max-height: fit-content !important; }
.hero-layout-ayuda .hero-texto{ max-width: 100% !important; }
.bloque-ayuda p{ padding-bottom: var(--eM); }
.bloque-ayuda h3{
  border-bottom: 1px dotted var(--g);
  width: fit-content;
  margin-bottom: var(--eL);
  margin-top: var(--eL);
  color: var(--rC);
}
.bloque-ayuda .enfatizado{ background: var(--rC3); padding: var(--eM); }
.bloque-ayuda li::marker{ color: var(--rC); }
.bloque-ayuda strong{ font-weight: 500; color: var(--rC); }
.bloque-ayuda ul, .bloque-ayuda ol{ margin: var(--eL) 0; }
.resumen-ayuda ul{ margin-top: var(--eL); }
.resumen-ayuda li{
  list-style: none;
  margin-bottom: var(--eS);
  background: transparent;
  padding: var(--eS) var(--eM);
}
.resumen-ayuda li:hover{
  background: var(--gC3);
  border-radius: var(--rP);
}
.site-footer-list{
  padding-left: 0;
  border-bottom: 1px solid var(--gC);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--eL);
  row-gap: 0;
}
.site-footer-p{ font-size: var(--fXS); }
.resumen-titulo .t-desktop{ display: none; }
.resumen-titulo .t-mobile{ display: block; }
.item-acciones-ayuda{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--eL); margin-top: var(--eL); }

@media (min-width: 501px){
  .site-footer-list{
    display: block;
    justify-content: initial;
  }
  .resumen-titulo .t-desktop{ display: block; }
  .resumen-titulo .t-mobile{ display: none; }
}


/* ==========================================================================
   4) CABECERA · MOBILE FIRST
   ========================================================================== */

.cabecera{
  position: relative;
  top: 0;
  z-index: 950;
  background: white;
  border-bottom: 1px solid var(--rC2);
  box-shadow: 0 2px 8px var(--rC3);
}

.cabecera-contenido{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eXS);
  padding: 0 var(--eS) var(--eM);
  border-bottom: 1px solid var(--rC2);
  flex-wrap: wrap;
  margin: 0;
}

.cabecera-identidad, .cabecera-buscador, .cabecera-acciones{
  display: flex;
  align-items: center;
}

/* ── Identidad (móvil base) ── */
.cabecera-hamburguesa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--eXS);
  min-width: 44px;
  min-height: 44px;
  order: 0;
}
.cabecera-hamburguesa .icono{
  width: 1.5rem;
  height: 1.5rem;
}

.cabecera-identidad{
  flex: 1 1 auto;
  gap: var(--eM);
  order: 1;
  min-width: 0;
}

.cabecera-identidad .claim{ display: none; }

/* ── Buscador (móvil base: full width) ── */
.cabecera-buscador{
  flex: 1 1 100%;
  max-width: none;
  min-width: 0;
  order: 3;
}

/* ── Acciones (móvil base) ── */
.cabecera-acciones{
  flex: 0 0 auto;
  gap: 0;
  order: 2;
}

.cabecera-acciones a{ display: none; }

/* ── Saludo ── */
.cabecera-saludo{
  padding: var(--eXS) var(--eL) 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-align: right;
  color: var(--g);
}

.cabecera-saludo span{
  color: var(--r);
  font-weight: 600;
  border-right: 1px solid var(--r);
  padding-right: var(--eL);
}

.cabecera-ayuda{
  color: var(--gO);
  text-decoration: none;
  font-weight: 800;
  font-size: var(--fXS);
  opacity: .5;
}

.cabecera-ayuda:hover{ color: var(--r); }

/* ── Logo ── */
.logo{
  display: inline-flex;
  align-items: center;
  color: inherit;
  margin-top: -3px;
}

.logo::after{ display: none; }

.logo-img{
  display: block;
  height: 28px;
  width: auto;
}

.claim::before{ content: "[ "; color: var(--r); }
.claim::after{ content: " ]"; color: var(--r); }

/* ── Badge carrito ── */
.badge-carrito{
  font-weight: 700;
  font-size: var(--fS);
  line-height: 1;
  padding: calc(var(--eXS) * 1.5);
  margin-left: var(--eXS);
  color: var(--gO);
}

.indicador-carro{
  position: absolute;
  top: 3px;
  left: 13px;
  width: 5px;
  height: 5px;
  border-radius: var(--rB);
  background-color: var(--r);
  pointer-events: none;
  opacity: 0;
}

.indicador-carro-activo{
  opacity: 1;
  animation: cabecera-carrito-pulso 1.8s ease-in-out infinite;
}

@keyframes cabecera-carrito-pulso{
  0%{ opacity: 0.2; }
  50%{ opacity: 1; }
  100%{ opacity: 0.2; }
}

/* ── Slogan (oculto en móvil) ── */
.cabecera-slogan{ display: none; }
.bloque-cabecera p{ display: none; }

/* ── CTA cabecera (móvil base) ── */
.cabecera-cta{
  display: flex;
  gap: var(--eM);
  margin-left: 0;
  margin-top: var(--eM);
  padding-bottom: var(--eM);
  align-items: flex-end;
  border-bottom: 1px dotted var(--rC2);
  justify-content: center;
  width: 100%;
}

.cabecera-cta:last-child{ border-bottom: none; }

.cabecera-cta > a{ display: block; font-size: var(--fXS); }

/* Zona de Cata oculta en móvil (5º enlace), visible desde 400px */
.cabecera-cta > a:nth-of-type(5){ display: none; }
@media (min-width: 400px){
  .cabecera-cta > a:nth-of-type(5){ display: block; }
}

/* "y fabricantes" solo en desktop */
.cabecera-cta-sufijo{ display: none; }

.cabecera-cta > a:not([data-js="cta-indice-catalogo"]){ margin-bottom: 2px; }

.cabecera-cta-texto{ font-weight: 600; font-size: var(--fL); }

.cabecera-cta-icono{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cabecera-cta-grupo{
  display: none;
}

.cabecera-cta-familias{ display: none; }

/* ── CTA item píldora ── */
.cabecera-cta-item{
  padding-inline: var(--eL);
  border-radius: 0 var(--rP) var(--rP) 0;
  border: none;
  background: var(--r);
  font-size: var(--fS);
  line-height: var(--lhS);
  color: white;
  white-space: nowrap;
  cursor: pointer;
}

.cabecera-cta-item--indice{ font-weight: 600; }
.cabecera-cta-item:hover{ background: var(--g); }

/* ── Icono rotatorio ── */
.cabecera-icono-svg-rotatorio{
  fill: var(--rC);
  animation: cabecera-rotar-indice 8s linear infinite;
  transform-origin: center center;
}

.cabecera-cta-grupo--indice:hover .cabecera-icono-svg-rotatorio,
.cabecera-cta-grupo--indice:focus-within .cabecera-icono-svg-rotatorio{
  animation-play-state: paused;
}

@keyframes cabecera-rotar-indice{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ── Familias destacadas (panel JS) ── */
.cabecera-fam-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cabecera-fam-link:focus{ color: var(--gO); }

.cabecera-fam-link{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  padding: var(--eS) 0 0 0;
  border: none;
  background: none;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--r);
  cursor: pointer;
}

.cabecera-fam-link:hover{ color: var(--g); }

.cabecera-fam-link:focus-visible{
  color: var(--gO);
  outline: 2px solid var(--rC);
  outline-offset: 2px;
  border-radius: var(--rP);
}

.cabecera-fam-texto{ position: relative; text-wrap: nowrap; }

.cabecera-fam-texto::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.2s ease;
}

.cabecera-fam-link:hover .cabecera-fam-texto::after,
.cabecera-fam-link:focus-visible .cabecera-fam-texto::after{
  width: 100%;
}

.cabecera-fam-wrapper.is-open .cabecera-fam-texto::after{ width: 0 !important; }

.cabecera-cta-familias .cabecera-fam-panel:before{
  left: var(--cabecera-fam-arrow-x, 18px);
}

.cabecera-fam-wrapper.is-open .cabecera-fam-link:hover .cabecera-fam-texto::after,
.cabecera-fam-wrapper.is-open .cabecera-fam-link:focus-visible .cabecera-fam-texto::after{
  width: 0 !important;
}

.cabecera-fam-wrapper.is-open .cabecera-fam-texto::after{
  width: 100%;
  transition: none;
}

.cabecera-fam-panel{ top: calc(100% + 12px) !important; }
.cabecera-fam-panel[hidden]{ display: none; }
.cabecera-fam-titulo{ display: none; }

.cabecera-fam-link-familia{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  margin: 0 0 var(--eM);
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 300;
}

.cabecera-fam-lista-subfamilias{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--eXS);
}

.cabecera-fam-item-subfamilia a{
  display: flex;
  align-items: center;
  gap: var(--eM);
  padding: var(--eXS);
  border-radius: var(--rP);
}

.cabecera-fam-item-subfamilia a:hover{ background: var(--rC3); }

.cabecera-fam-img-subfamilia{
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(.7);
  transition: filter .2s ease;
}
.cabecera-fam-item-subfamilia a:hover .cabecera-fam-img-subfamilia{ filter: grayscale(0); }

.cabecera-fam-subnombre{
  font-size: var(--fS);
  line-height: var(--lhS);
  text-wrap: nowrap;
}

/* ── Cabecera reducida (clonada por JS) ── */
.cabecera--reducida{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 952;
  background: white;
  border-bottom: 1px solid var(--rC2);
  box-shadow: 0 1px 8px var(--rC3);
  transform: translateY(-110%);
  transition: transform 0.22s ease-out;
}

.cabecera--reducida.is-visible{ transform: translateY(0); }

.cabecera--reducida .cabecera-contenido{
  padding: 0 var(--eS) var(--eM) var(--eS);
}

.cabecera--reducida .cabecera-saludo{
  padding-bottom: 0;
  margin-bottom: -12px;
}

/* ── RESPONSIVE CABECERA ── */

@media (min-width: 769px){
  .cabecera-contenido{
    flex-wrap: wrap;
    margin: 0;
  }

  .cabecera-acciones{
    order: 2;
    flex: 0 0 auto;
    gap: var(--eS);
  }

  .cabecera-acciones a{ display: inline; }

  .cabecera-buscador{
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .cabecera-cta > a{ display: inline; font-size: inherit; }

  /* Ocultar Red de ventas en cabecera cuando se muestra como sección aparte */
  .cabecera-cta-redventas{ display: none; }

  .cabecera-slogan{
    display: block;
    font-size: var(--fXL);
    line-height: var(--lh2XL);
    font-weight: 300;
    padding: var(--eS) var(--eXL);
  }

  .cabecera-cta{
    justify-content: flex-start;
    margin-left: var(--eXL);
  }
.cabecera-cta-grupo {
  display: inherit;
}
  .buscador__boton .buscador__icono{
    width: var(--eL);
    height: var(--eL);
  }
}

@media (min-width: 600px){
  .cabecera-identidad .claim{ display: inline; }
}

@media (min-width: 1025px){
  .cabecera-contenido{
    flex-wrap: nowrap;
  }

  .cabecera-identidad{
    gap: var(--eL);
    flex: 0 1 auto;
  }

  .logo-img{ height: 36px; }

  .cabecera-buscador{
    order: 2;
    flex: 1 1 auto;
    max-width: 600px;
    margin: 0 auto;
  }

  .cabecera-acciones{
    order: 3;
    gap: var(--eS);
  }

  .cabecera-slogan{
    font-size: var(--f2XL);
    padding: var(--eM) var(--eXL);
  }

  .cabecera-top{ display: flex; }
  .bloque-cabecera p{ display: block; }

  .cabecera-cta{
    width: calc(100% - (var(--eXL) * 2));
    margin-left: var(--eXL);
    margin-top: var(--eXS);
    justify-content: flex-start;
  }

  .cabecera-cta > a{ display: inline; }

  /* Mostrar "y fabricantes" en desktop */
  .cabecera-cta-sufijo{ display: inline; }

  .cabecera-cta-grupo{ display: inline-flex; }

  .cabecera-cta-familias{ display: flex; }

  .cabecera-cta-familias .cabecera-fam-panel{
    max-width: calc(100vw - (var(--eM) * 2));
  }

  .cabecera-cta-familias .cabecera-fam-wrapper:nth-last-child(-n+2){
    display: inline-flex;
  }
}

@media (min-width: 376px){
  .cabecera-acciones .icono-boton-listas{
    font-size: inherit !important;
    line-height: inherit !important;
  }
}


/* ==========================================================================
   5) UI · PRECIOS, CHECKOUT, FLECHAS, BOTONES, CHIPS
   ========================================================================== */

/* ── Precio ── */
.precioFormatoP{
  color: var(--r);
  font-size: var(--fXL);
  display: flex;
  width: fit-content;
  line-height: var(--lh2XL);
}

.precioFormatoP sup{
  margin-top: calc(var(--eS) * -.45);
  font-size: var(--fXS);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
}

.carro-precio{
  display: flex;
  align-items: center;
  gap: var(--eS);
  padding-top: var(--eXS);
}

.precioFormato{
  color: var(--r);
  font-size: var(--f3XL);
  display: flex;
  padding: 0 0 var(--eM) 0;
  width: fit-content;
  align-items: center;
}

.precioFormato sup{
  margin-top: calc(var(--eL) * -1);
  font-size: var(--fXL);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.precioFormato sup span{
  font-weight: 300;
  font-size: var(--fL);
  margin-left: var(--eXS);
}

.precio-desde{
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
  margin-right: var(--eXS);
}

.precio-rango{
  display: flex;
  flex-direction: column;
}
.precio-rango__linea{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  line-height: 1.1;
}
.precio-rango__linea .precioFormato{
  padding: 0;
  margin: 0;
  line-height: 1;
}

/* ── Checkout pasos ── */
.checkout-pasos{
  font-size: var(--fS);
  margin: var(--eS) 0 var(--eL);
  padding: var(--eS) var(--eM);
  width: fit-content;
  border-radius: var(--rP);
  border: 1px solid var(--rC3);
  outline: 1px solid var(--rC);
  outline-offset: 2px;
  background: white;
}

.checkout-pasos__lista{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eL);
  padding: 0;
  margin: 0;
  list-style: none;
}

.checkout-pasos__item{
  display: flex;
  align-items: center;
  gap: var(--eS);
}

.checkout-pasos__numero{
  width: var(--eXL);
  height: var(--eXL);
  border-radius: 50%;
  border: 1px solid var(--gC);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fXS);
  background: white;
  color: var(--g2);
}

.checkout-pasos__texto{
  white-space: nowrap;
  color: var(--g2);
}

.checkout-pasos__item--activo .checkout-pasos__numero{
  background: var(--r);
  color: white;
  font-weight: 700;
  outline: 1px solid var(--rC);
  outline-offset: 2px;
}

.checkout-pasos__item--activo .checkout-pasos__texto{
  font-weight: 600;
  color: var(--gO);
}

/* ── Stepper ── */
.stepper{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  border: 1px solid var(--rC);
  padding: var(--eS);
  border-radius: var(--rP);
  background: white;
  width: 100%;
  justify-content: space-between;
  margin-bottom: var(--eS);
}

.stepper button{
  width: var(--eXL);
  height: var(--eXL);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: white;
  border-radius: var(--rB);
  cursor: pointer;
  color: var(--rC);
  font-size: var(--fXL);
}

.stepper button:hover{ background: var(--rC2); color: var(--gO); }

.stepper input{
  width: 45px;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: var(--fM);
  font-weight: 500;
  color: var(--gO);
}

.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.producto-cta__cantidad-input:focus,
.producto-cta__cantidad-input:focus-visible{
  outline: none;
  box-shadow: none;
  color: var(--gM);
}

.stepper input[type="number"]{ -moz-appearance: textfield; }

/* ── Flechas controles ── */
.flechas-controles{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.flecha-prev, .flecha-next{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--e2XL);
  height: var(--e2XL);
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rB);
  transition: all .2s ease;
  cursor: pointer;
}

.flecha-prev{ left: var(--eL); }
.flecha-next{ right: var(--eL); }

.flecha-prev:hover, .flecha-next:hover{
  background: var(--rC2);
  border-color: var(--rC);
}

.flecha-prev:focus-visible, .flecha-next:focus-visible{
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

.flecha-prev .icono, .flecha-next .icono{
  width: var(--eM);
  height: var(--eM);
  display: block;
  fill: var(--rC);
}

.flecha-prev:hover .icono, .flecha-next:hover .icono{
  fill: var(--g);
}

.flecha-prev .icono{ transform: scaleX(-1); }

.slider .flecha-prev{ left: -20px; opacity: .9; }
.slider .flecha-next{ right: -20px; opacity: .9; }

/* ── Botones CTA ── */
.boton-principal, .boton-secundario{
  cursor: pointer;
  font-size: var(--fM);
  font-weight: 500;
  border-radius: var(--rP);
  border: 0;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Evitar que los botones <a> hereden el subrayado y color del hover global */
a.boton-principal:hover,
a.boton-secundario:hover{ text-decoration: none; }
a.boton-principal::after,
a.boton-secundario::after{ display: none !important; }

.boton-principal{
  background: var(--r);
  border: 1px solid var(--r);
  color: white;
  padding: var(--eM);
}

.boton-secundario{
  background: var(--gC);
  color: var(--gO);
  padding: var(--eM);
  border: 1px solid var(--gM);
}

.boton-principal:hover{ background: var(--gO); border: 1px solid var(--gO); color: white; }
.boton-secundario:hover{ background: var(--gO); color: white; }
.apariencia-boton:hover{ color: white; }

.producto-cta__guardar{ color: var(--g2); }
.producto-cta__guardar:hover{ color: var(--gM); }
.producto-cta__guardar.is-activo{ color: var(--r); }

/* ── Chips variantes ── */
.chips{ display: flex; gap: var(--eS); flex-wrap: wrap; }

.grupo-chips{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  padding: var(--eM) 0;
}

.variantes__select{
  display: inline-block;
  font-size: var(--fS);
  font-weight: 600;
  padding: var(--eXS) var(--eL);
  border: 1px solid var(--rC2);
  border-radius: var(--rB);
  background: var(--rC3);
  color: var(--gO);
  cursor: pointer;
  max-width: 100%;
  transition: background-color 0.2s, border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--eM) center;
  padding-right: calc(var(--eL) + 1em);
}
.variantes__select:hover{
  background-color: var(--gC2);
  border-color: var(--gM);
}
.variantes__select:focus{
  border-color: var(--r);
  outline: none;
}

.chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--gC);
  background: white;
  cursor: pointer;
  font-size: var(--fS);
  color: var(--gO);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover{ background: var(--gC2); }
.chip--activo:hover{ background: var(--rC3); }

.chip[data-variante="modelo"],
.chip[data-variante="atributo"]{ border-color: var(--gC);min-height: 48px; min-width: 48px; }

.chip[data-variante="modelo"].chip--activo,
.chip[data-variante="atributo"].chip--activo{
  border-color: var(--rC);
  background: var(--rC3);
  color: var(--gO);
}

.chip[data-variante="tipo"]{
  border-color: var(--gC);
  padding: 0.2em;
  flex-direction: column;
  align-items: stretch;
}

.chip[data-variante="tipo"].chip--activo{
  border-color: var(--r);
  background: var(--rC3);
  color: var(--gO);
}

.chip-thumb{
  width: var(--e4XL);
  height: var(--e4XL);
  padding: 0;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

.chip-precio{
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: right;
  color: var(--gM);
  white-space: nowrap;
  padding-top: 0.15em;
  font-weight: 600;
}
.chip-precio__desde{
  font-size: var(--fXXS, 0.65rem);
  font-weight: 400;
}

/* ── Stock: badges e indicadores ── */
.chip-stock-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  background: #2e7d32;
  color: white;
  font-size: 0.6rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
}

.chip--en-stock{
  background-color: #e8f5e9;
  border-color: #66bb6a;
}
.chip--en-stock.chip--activo{
  background-color: #c8e6c9;
  border-color: #43a047;
}

.entrega-stock{
  color: #2e7d32;
  font-weight: 600;
}

/* ── Chips filtros (details) ── */
details.filtro-chip{ position: relative; }
details.filtro-chip[open]{ z-index: 1000; }
details.filtro-chip > summary{ position: relative; z-index: 2; }

details.filtro-chip[open] > summary::before{
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  cursor: default;
  z-index: 1;
}

details.filtro-chip .filtro-chip-panel{
  position: absolute;
  z-index: 3;
}


.filtro-chip{ position: relative; }

.filtro-chip-resumen{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: var(--fS);
  gap: var(--eS);
  padding: var(--eXS) var(--eL);
  border-radius: var(--rB);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  border: 1px solid var(--rC2);
  background: var(--rC3);
  white-space: nowrap;
}

.filtro-chip-etiqueta{ font-weight: 600; font-size: var(--fS); }
.filtro-chip-estado{ font-weight: 400; font-size: var(--fXS); opacity: 0.7; }

.filtro-chip-resumen:hover{
  background: var(--gC2);
  border: 1px solid var(--gM);
}

.filtro-chip-resumen::-webkit-details-marker{ display: none; }

.filtro-chip[open] > .filtro-chip-resumen{
  border-color: var(--r);
  background: var(--rC3);
}

.filtro-chip-panel{
  position: absolute;
  left: 0;
  top: calc(100% + 20px);
  min-width: 240px;
  max-width: 360px;
  border: 1px solid var(--gC);
  border-radius: var(--rM);
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--eM);
  z-index: 3;
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

.filtro-chip-panel:before{
  content: "";
  display: block;
  position: absolute;
  top: -12px;
  left: 18px;
  width: 2rem;
  height: 2px;
  background: var(--rC2);
}

/* Panel del filtro Ordenar: alineado a la derecha */
.filtro-orden-wrapper .filtro-chip-panel{
  left: auto;
  right: 0;
}
.filtro-orden-wrapper .filtro-chip-panel:before{
  left: auto;
  right: 18px;
}

/* ── Filtro precio: slider doble ── */
.filtro-precio-rangos{ display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--eM); }
.filtro-precio-rango{
  cursor: pointer; display: flex; align-items: center; gap: var(--eS);
  padding: var(--eXS) var(--eS); border-radius: var(--rP);
  font-size: var(--fXS); transition: background .15s;
}
.filtro-precio-rango:hover{ background: var(--rC3); }
.filtro-precio-rango input[type="radio"]{ margin: 0; accent-color: var(--r); }

.filtro-precio-slider{ padding: var(--eS) 0; }
.filtro-precio-slider-track{
  position: relative; height: 6px; border-radius: 3px;
  background: var(--gC2); margin: var(--eL) 0;
}
.filtro-precio-slider-relleno{
  position: absolute; height: 100%; border-radius: 3px;
  background: var(--r); top: 0;
}
.filtro-precio-slider-thumb{
  position: absolute; top: 50%; width: 24px; height: 24px;
  border-radius: 50%; background: white; border: 2px solid var(--r);
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translate(-50%, -50%);
  cursor: grab; touch-action: none; z-index: 2;
}
.filtro-precio-slider-thumb:active{ cursor: grabbing; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.filtro-precio-etiquetas{
  display: flex; justify-content: space-between;
  font-size: var(--fXS); color: var(--g2); padding-top: var(--eXS);
}
.filtro-precio-borrar{ font-weight: 600; color: var(--r); border-bottom: 1px solid var(--gC2); padding-bottom: var(--eS); margin-bottom: var(--eXS); }

.filtros__panel-opciones{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  max-height: 240px;
  overflow: auto;
  padding-right: var(--eS);
}

.filtro-opcion{
  display: flex;
  gap: var(--eS);
  align-items: center;
}

.filtros__acciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eS);
  margin-top: var(--eM);
}

.filtros-reset, .filtros-mas{
  background: white;
  color: var(--g);
  font-size: var(--fS);
  cursor: pointer;
  padding: var(--eS) var(--eL);
  border-radius: var(--rB);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  border: 1px solid var(--rC2);
}

.filtros-reset:hover, .filtros-mas:hover{
  color: white;
  background: var(--gM);
  border-color: var(--gM);
}

/* ── Acciones en cards ── */
.producto-card__btn{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--g2);
  font-size: var(--fS);
  transition: color 0.15s ease;
}

.producto-card__btn:hover{ color: var(--gO); }
.producto-card__btn svg{ width: var(--eX); height: var(--eX); }

.icono-boton-carrito, .icono-boton-listas{
  background: transparent;
  border: 0;
}

/* ── Item acciones / enlaces animados ── */
.item-acciones{
  display: flex;
  gap: var(--eM);
  align-items: center;
}

.item-accion{
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--rC);
  height: fit-content;
}

.item-accion:hover{ color: var(--rO); }

/* ── Red de ventas filtros ── */
#redVentas .filtro-chip[data-filtro-id="provincia"] .filtro-chip-panel{
  max-width: 520px;
}

#redVentas .filtro-chip[data-filtro-id="provincia"] .filtro-chip-panel .filtros__panel-opciones{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--eS);
}

/* ── Modal ── */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--eL);
  z-index: 999;
}

.modal-overlay--visible{ display: flex; }

.modal-panel{
  width: min(520px, calc(100vw - (var(--eL) * 2)));
  border-radius: var(--rM);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  background: white;
  padding: var(--eX) var(--eX) var(--eL);
}

.modal__titulo{ margin: 0 0 var(--eS); }
.modal__desc{ margin: 0 0 var(--eL); opacity: 0.85; }

.modal__select, .modal__input{
  width: 100%;
  padding: var(--eM);
  border-radius: var(--rP);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: white;
  margin-bottom: var(--eL);
}

.modal__acciones{
  display: flex;
  gap: var(--eM);
  justify-content: flex-end;
}

/* ── Otros UI ── */
.icono-boton-carrito [data-js="carrito-badge"]{ font-size: var(--fS); line-height: 0; }

body[data-pagina="redVentas"] .chip{
  border: 1px solid var(--rC2);
  background: white;
  border-radius: var(--rB);
  padding: var(--eM) var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  cursor: pointer;
}

body[data-pagina="redVentas"] .chip.is-active,
body[data-pagina="redVentas"] .chip--active{
  background: var(--rC2);
  border-color: var(--rC2);
}

.filtros-acciones{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* HERO subfamilia imágenes dinámicas */
.subfamilia-hero-imagenes{
  display: flex;
  gap: var(--eXS);
  overflow: hidden;
  align-items: stretch;
}

.subfamilia-hero-imagenes img{
  height: 100%;
  max-height: 140px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Filtros activos (móvil) */
.filtros-activos{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eS);
  margin-top: var(--eS);
  flex: 0 0 100%;
}

.filtro-activo-chip{
  font-size: .7rem;
  border: 0;
  padding: var(--eXS) var(--eS);
  border-radius: var(--rP);
  cursor: pointer;
  color: var(--gO);
}

.filtro-activo-chip:hover{ background: var(--gC2); }

@media (min-width: 769px){
  .filtros-activos{ display: none; }
  .filtro-activo-chip{
    font-size: var(--fXS);
    background: var(--rC3);
    border: 1px solid var(--rC2);
  }
}

@media (min-width: 1025px){
  .filtros-chips{
    flex-wrap: nowrap;
    overflow: visible;
  }
  .contenedor-filtros-chip{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
}


/* ==========================================================================
   6) CARDS · Mini-card, producto-card, ZC-card
   ========================================================================== */

/* ── Mini card (navegación) ── */
.mini-card{
  position: relative;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: white;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.mini-card-enlace{
  display: block;
  text-decoration: none;
  color: inherit;
}

.mini-card-imagen{
  position: relative;
  overflow: hidden;
  padding: var(--eM);
  opacity: .7;
  filter: grayscale(1);
  transition: filter .2s ease, opacity .2s ease;
}

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

.mini-card-imagen--vacia{
  display: grid;
  place-items: center;
  background: var(--gC3);
}

.mini-card__inicial{
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  font-weight: 600;
  color: var(--gM);
}

.mini-card-texto{
  padding: 0 var(--eM) var(--eM);
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  color: var(--g);
}

.mini-card-texto > p{ margin: 0; }

.mini-card-titulo{
  margin: 0;
  font-size: var(--fM);
  font-weight: 700;
}

.mini-card-meta{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gM);
}

.mini-card-descripcion{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--g);
  opacity: .9;
}

.mini-card-contador{
  margin: var(--eS) 0 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
}

.mini-card:hover{
  border-color: var(--r);
  transform: translateY(-2px);
  box-shadow: var(--shadowC);
}

.mini-card:hover .mini-card-imagen{ opacity: 1; filter: grayscale(0); }
.mini-card:hover .mini-card-titulo{ color: var(--r); }

.mini-card:focus-within{
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

/* ── Producto card ── */
.producto-card{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 20rem;
  height: 100%;
  padding: var(--eS);
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  overflow: hidden;
  outline: 0 solid transparent;
  outline-offset: 2px;
  transition: border-color .2s ease, outline-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card-imagen-link{
  display: block;
  position: relative;
  text-decoration: none;
}

.producto-card > a[href]{ text-decoration: none; }

.card-imagen{
  padding-top: 100%;
  background-size: cover;
  background-position: center;
  transform-origin: bottom center;
  transition: transform .2s ease;
  background-color: var(--gC2);
}

.card-imagen:after{ display: none; }

.producto-card:hover .card-imagen{ transform: scale(1.08); }

.producto-card-contenido{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  padding-top: var(--eS);
}

.producto-card-contenido p{ margin-top: 0; }
.producto-card-contenido p:not(:first-of-type):not(.precioFormato){ margin-top: var(--eXS); font-weight: 300; }

.card-titulo{
  font-size: var(--fM);
  font-weight: 500;
  line-height: var(--eXL);
}

.card__subfamilia{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
  opacity: .9;
  font-weight: 500;
}

.card-ruta{
  margin: var(--eL) 0 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  padding-top: var(--eS);
}

.card-ruta a{ color: var(--r); text-decoration: none !important; }
.card-ruta a:hover{ color: var(--gO); }

.card-ruta-sep{ padding: 0 var(--eXS); color: var(--gM); }

.producto-card-descripcion{
  font-size: var(--fS);
  line-height: var(--lhXS);
  color: var(--gO);
}

.card-coleccion, .card-marca{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gO);
  font-weight: 500 !important;
}

.card-coleccion-link, .card-marca-link{
  color: var(--r);
  text-underline-offset: 2px;
}

.card-coleccion-link:hover, .card-marca-link:hover{ color: var(--gO); }

.card-pie{
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--eS);
  margin-bottom: var(--eL);
}

.card__precio--consultar{
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
  font-weight: 600;
}

.producto-card:hover{
  border-color: var(--rC);
  outline: 2px solid var(--rC2);
  box-shadow: var(--shadowC);
}

.producto-card-acciones{
  position: relative;
  margin: calc(-1 * var(--eM));
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: var(--gC3);
}

/* Área clickable ocupa todo el alto */
.producto-card-acciones .producto-card__btn,
.producto-card-acciones a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eL);
  flex: 1 1 100%;
  color: inherit;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
}

.producto-card:hover .producto-card-acciones{ background: var(--r); }
.producto-card:hover .producto-card-acciones a,
.producto-card:hover .producto-card-acciones button{ color: white; }
.producto-card-acciones .btn-texto{ margin-top: 2px; }
.producto-card-acciones .btn-texto:hover{ color: var(--rC2); text-decoration: underline; }
.producto-card:hover .producto-card-acciones a::after,
.producto-card:hover .producto-card-acciones button::after{ display: none; }
.producto-card:hover .producto-card-acciones:hover{ background: var(--g); }

/* Acciones dobles: "Añadir" + "Guardar" */
.producto-card-acciones--doble{
  container-type: inline-size;
}
.producto-card-acciones--doble .card-jcart{
  flex: 1 1 50%;
  display: flex;
}
.producto-card-acciones--doble .card-jcart .producto-card__btn{
  width: 100%;
}
.producto-card-acciones--doble > .producto-card__btn{
  flex: 1 1 50%;
  border-left: 1px solid rgba(255,255,255,0.2);
}

/* Ocultar todos los textos cuando la tarjeta es estrecha */
@container (max-width: 180px){
  .producto-card-acciones--doble .btn-texto{ display: none; }
}

.subfamilia-card-titulo{
  position: relative;
  display: inline-block;
}

.subfamilia-card-titulo::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

.subfamilia-card-enlace:hover .subfamilia-card-titulo::after,
.subfamilia-card-enlace:focus-visible .subfamilia-card-titulo::after{
  transform: scaleX(1);
}

/* Slide-card base */
.slide-card{
  position: relative;
  flex: 0 0 auto;
  width: 210px;
  border-inline: 1px dotted var(--rC2);
  transition: all .2s ease;
}

/* ── ZC Card (editorial) ── */
.zc-card{
  border-radius: var(--rP);
  overflow: hidden;
  background: white;
  border: 2px solid white;
  transition: border-color .2s ease, outline-color .2s ease;
}

.zc-card:hover{
  border-color: var(--rC);
  outline: 1px solid var(--rC);
  outline-offset: 2px;
}

.zc-card:hover h2{ color: var(--r); }

.zc-card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.zc-card-media img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.zc-card-texto{
  padding: var(--eL);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  flex: 1;
}

.zc-card-text{ padding: var(--eM) var(--eL); }

.zc-card-categoria{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-transform: uppercase;
  opacity: .75;
  margin: 0;
}

.zc-card-titulo{
  margin: 0;
  font-size: var(--fL);
  font-weight: 500;
  padding-bottom: var(--eM);
}

.zc-card-excerpt{
  margin: 0;
  opacity: .85;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  padding-bottom: var(--eM);
}

.zc-card-meta{
  display: flex;
  justify-content: space-between;
  gap: var(--eS);
  margin-top: var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: .7;
}

.zc-rel-cta{ margin-bottom: var(--eXL); }

/* ── Card micro-interacciones ── */
.producto-card__toast{ opacity: 0; z-index: 50; }

.producto-card__toast.is-run{
  animation: toastCentro 1.2s ease-out 1;
}

@keyframes toastCentro{
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.98); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); }
}

.producto-card__btn.is-activo{ color: var(--gM); }
.producto-card__btn--listas.is-activo{ color: var(--rC); }

.producto-card__estado{
  display: none;
  margin-left: var(--eXS);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  position: absolute;
  right: 0;
  top: -10px;
  opacity: .5;
}

.producto-card__btn.is-activo .producto-card__estado{ display: inline-block; }

.producto-card__btn.is-pulso{
  animation: btnPulso 0.9s ease-out 1;
}

@keyframes btnPulso{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Móvil: carro btn solo icono (excepto en acciones dobles) */
.producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto{ font-size: 0; }
.producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto::after{
  content: attr(data-label-mobile);
  font-size: var(--fS);
}

@media (min-width: 501px){
  .producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto{ font-size: var(--fS); }
  .producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto::after{ content: none; }
}

@media (min-width: 769px){
  .card-titulo{ line-height: calc(var(--eXL) - var(--eS)); }
}


/* ==========================================================================
   7) SLIDERS
   ========================================================================== */

.grupo-sliders{ margin-top: var(--eXL); }

.slider{
  position: relative;
  margin: var(--eL) 0;
  padding-top: var(--eL);
  border-top: 1px dotted var(--rC);
}

.slider__header{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eM);
  margin-bottom: var(--eM);
}

.slider__header h2, .zc-slider__header h2{
  margin: 0;
  font-size: var(--f2XL);
  line-height: var(--lhXL);
  font-weight: 500;
}

.slider__subtitulo{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
}

.slider-track{
  display: flex;
  gap: var(--eS);
  overflow-x: auto;
  padding: var(--eS) 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Barra progreso */
.slider[data-barra="1"] .slider-track{
  scrollbar-width: none;
}

.slider[data-barra="1"] .slider-track::-webkit-scrollbar{ height: 0; }

.slider[data-barra="1"] .slider__bar{
  margin-top: var(--eS);
  height: 4px;
  background: var(--gC2);
  border-radius: var(--rB);
  overflow: hidden;
}

.slider[data-barra="1"] .slider__bar-fill{
  height: 100%;
  width: 0%;
  background: var(--gM);
  border-radius: var(--rB);
  transition: width 0.12s ease;
}

.slider[data-barra="1"] .slider__bar.is-hidden{ display: none; }

/* ── Slide-card (renderSlider) ── */
.card-imagen:after{ display: none; }

.slide-card:hover{ border-inline: 1px solid var(--rC); }
.slide-card:hover .slide-nombre{ color: var(--gO); }

.slide-card::before, .slide-card::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  border-left: 1px dotted transparent;
  opacity: 0;
  transition: opacity .15s ease;
}

.slide-card:hover::before, .slide-card:hover::after{
  border-left-color: var(--rC2);
  opacity: 1;
}

.slide-nombre, .slide-meta, .slide-precio{ padding: 0 var(--eM); }

.slide-card > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.slide-card > a > img{
  display: block;
  width: 80%;
  margin: 0 auto;
  height: 180px;
  object-fit: contain;
  border-radius: var(--rP);
}

.slide-nombre{
  margin: var(--eM) 0 var(--eXS) 0;
  font-weight: 400;
  color: var(--r);
  font-size: var(--fM);
  line-height: calc(var(--sS) - var(--sXS));
}

.slide-meta{
  margin: 0 0 var(--eS) 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: 0.8;
  color: var(--g);
}

.slide-precio{
  margin: 0 0 var(--eL) 0;
  font-weight: 600;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.slide-precio-desde{
  margin-right: var(--eXS);
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
}

.slide-precio-valor{
  font-weight: 700;
  color: var(--gO);
}

/* ── HOME últimas ── */
section.home-ultimas{ margin-top: 0; }

.home-ultimas .slider-track{ align-items: stretch; }

.home-ultimas .slide-card .producto-card{
  border-block: none;
  border-radius: 0;
  padding-bottom: 0;
}

.home-ultimas .slide-card .producto-card .card-pie .precioFormato{
  padding-bottom: 0;
}

.home-ultimas .slide-card .producto-card:hover{
  outline: none;
  box-shadow:
    -2px 0 0 white,
     2px 0 0 white,
    -4px 0 0 var(--rC2),
     4px 0 0 var(--rC2);
}

.home-ultimas .card__subfamilia{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  margin-top: var(--eXS);
  color: var(--gM);
  opacity: 0.9;
  font-weight: 500;
}

.home-tematicos .slider[data-slider="tematico"] .slide-card{ border-inline: 0; }
.home-tema .h3_destacado{ padding-top: var(--eL); }

.home-ultimas__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eL);
}

.home-ultimas__cta{
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
}

/* ── CTA overlay (hero portada) ── */
.cta-overlay{
  position: absolute;
  left: var(--e2XL);
  bottom: var(--eXL);
  z-index: 3;
  width: clamp(280px, 85vw, 420px);
  padding: var(--eL);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gO);
  border-radius: var(--rM);
  box-shadow: var(--shadowC);
}

.cta-overlay .hero-titulo{
  margin: 0 0 var(--eS) 0;
  font-size: var(--fM);
  line-height: var(--lhXL);
  font-weight: 300;
  color: var(--rO);
}

.cta-overlay .hero-texto{ display: none; }

.cta-overlay .hero-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (min-width: 769px){
  .cta-overlay .hero-titulo{
    font-size: clamp(var(--fXL), 2.2vw, var(--f2XL));
  }
  .cta-overlay .hero-texto{
    display: block;
    margin: 0 0 var(--eL) 0;
    max-width: 40rem;
    font-size: var(--fS);
    line-height: var(--lhS);
    color: rgba(0, 0, 0, 0.75);
  }

  .home-ultimas .card__subfamilia{ margin-top: var(--eM); }
  .producto-card-descripcion{ font-size: var(--fXS); }
  .slider .card-pie{ margin-top: 0; margin-bottom: var(--eS); }
  .slider .producto-card{ padding: var(--eS) var(--eM); }
}

/* ── Slider editorial (ZC) ── */
.zc-slider{
  position: relative;
  margin: var(--eL) 0;
  padding-top: var(--eL);
  border-top: 1px dotted var(--rC);
}

.zc-slider__subtitulo{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
}

.zc-slider-track{
  display: flex;
  gap: var(--eS);
  overflow-x: auto;
  padding: var(--eS) 0;
}

.zc-slide-card{ flex: 0 0 auto; }

.zc-slider__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.zc-slider__img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--rP);
  background: var(--gC2);
  display: block;
}

.zc-slider__title{
  margin: var(--eM) 0 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 500;
  text-align: center;
}


/* ==========================================================================
   8) ASIDES (laterales)
   ========================================================================== */

/* ── Overlay + lock scroll ── */
.lateral-overlay{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease-out, visibility .25s ease-out;
}

.lateral-overlay--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.body--no-scroll, body.body--no-scroll{ overflow: hidden; }

/* ── Lateral base (móvil: full width) ── */
.lateral{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1200;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  /*  width: 100%;   Lo quito porque hacía que ocupara más ancho de la ventana de visualización*/
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .25s ease-out, opacity .25s ease-out, visibility .25s ease-out;
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lateral--derecha{
  right: 0;
  left: 0;
  transform: translateX(100%);
}

.lateral--izquierda{
  left: 0;
  right: 0;
  transform: translateX(-100%);
}

.lateral--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

@media (min-width: 501px){
  .lateral{
    width: clamp(20vw, 25rem, 100vw);
  }

  .lateral--derecha{
    left: auto;
  }

  .lateral--izquierda{
    right: auto;
  }
}

/* ── Cabecera lateral ── */
.lateral__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eM);
  padding: var(--eM) var(--eL);
  background: var(--r);
  color: white;
}

.lateral__logo{
  display: block;
  max-width: 30%;
  height: var(--eXL);
}

.lateral__cerrar{
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--eXS);
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lateral__cerrar:focus-visible{
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: var(--rP);
}

.lateral__cerrar-icono{
  border-radius: 50%;
  padding: 4px;
  width: 24px;
  height: 24px;
  fill: white;
  transition: background 0.2s ease, fill 0.2s ease;
}

.lateral__cerrar-icono:hover{
  background: var(--rC2);
  fill: var(--r);
}

.i-cerrar{
  width: var(--eXL);
  height: var(--eXL);
  fill: white;
}

/* ── Contenido y pie ── */
.lateral-contenido, .lateral__contenido{
  padding: var(--eL);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.lateral-pie{
  padding: var(--eL);
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  border-top: 1px dotted var(--rC);
  padding-top: var(--eL);
}

.lateral-contenido-cabecera{
  display: flex;
  align-items: center;
  gap: var(--eS);
}

.lateral-cabecera-titulo{
  margin: 0;
  font-size: var(--fL);
  line-height: var(--lhL);
  font-weight: 600;
  width: 100%;
}

.lateral-cabecera-frase-info{
  padding: var(--eS);
  margin: 0 0 var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
  background: var(--gC3);
  border-radius: var(--rP);
  cursor: pointer;
  animation: demoPulse 2s ease-in-out infinite;
}

@keyframes demoPulse{
  0%{ background: #ffffff; }
  50%{ background: #efefef; }
  100%{ background: #fff; }
}

.aside-login-demo p{ color: var(--rC); font-size: var(--fXS); }
.aside-login-demo{ display: block; margin-bottom: var(--eM); }

/* Pie carrito */
.lateral-pie-total{
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--eL);
}

.lateral-acciones-pie{
  display: flex;
  justify-content: flex-end;
  gap: var(--eS);
  flex-wrap: wrap;
}

.linea-aside .linea-titulo{ font-size: var(--fM); line-height: calc(var(--eL) * 1.3); }

.aside-filtros__acciones{ margin-top: var(--eXL); display: flex; gap: var(--eM); }

.lateral .item-accion:hover{ color: var(--g); }
.linea-aside .linea-contenedor-datos{ width: 100%; justify-content: space-between; }

/* ── Aside carrito ── */
#lateral-carrito .aside-carrito{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lineas-aside{
  border: 0;
  padding: 0;
  margin: var(--eL) 0 var(--eM);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.linea-aside{
  border: 1px solid var(--gC2);
  padding: var(--eL);
  border-radius: var(--rP);
}

.imagen-aside{
  display: block;
  width: var(--e2XL);
}

.linea-detalle-aside p{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
}

.item-acciones-aside{
  padding-top: var(--eXS);
  display: flex;
  flex-wrap: wrap;
  gap: var(--eS);
}

.linea-aside .linea-datos, .linea-aside .linea-contenedor{ width: 100%; }
.linea-aside .linea-datos{ justify-content: space-between; }
.aside-carrito__vacio-pasos{ margin: var(--eL) 0; }

/* ── Aside listas ── */
.aside-listas__pie{
  background: white;
  padding: var(--eXL);
}

#lateral-listas .aside-listas__contenido{
  overflow: hidden;
  min-height: 0;
  padding-bottom: calc(var(--e2XL) + var(--eS));
}

#lateral-listas .contenedor-items-aside{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--eL);
  padding-top: var(--eS);
}

.aside-item{
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  padding: var(--eM);
  position: relative;
}

.aside-item__label{
  position: absolute;
  top: calc(-3.8 * var(--eXS));
  left: var(--eM);
  font-size: var(--fXS);
  line-height: 1;
  color: var(--g);
  background: white;
  padding: var(--eXS) var(--eS);
  width: fit-content;
  border-radius: var(--rP);
}

.boton-lista{ width: 100%; }
.aside-lista__badge{ font-size: var(--fXS); color: var(--gM); }
.aside-carrito__vacio-cta{ margin-top: var(--eL); }
.lateral--listas .lateral-contenido-cabecera{ margin-bottom: var(--eL); }

/* ── Aside login ── */
.aside-login-cuerpo{
  padding: 0;
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
}

.aside-login__texto{
  margin: 0 0 var(--eS);
  color: var(--gO);
  line-height: var(--lhS);
  font-size: var(--fS);
}

.aside-login__form{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eS);
}

.aside-login__input{
  width: 100%;
  padding: var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--gC3);
  background: white;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.aside-login__msg{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g2);
}

.aside-login__card{
  display: flex;
  align-items: center;
  gap: var(--eM);
  border: 1px solid var(--gC3);
  border-radius: var(--rM);
  padding: var(--eM);
}

.aside-login__avatar{
  width: calc(var(--eXL) + var(--eS));
  height: calc(var(--eXL) + var(--eS));
  border-radius: var(--rB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.78);
  flex: 0 0 auto;
}

.aside-login__card-textos{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}

.aside-item-cabecera{ margin-top: var(--eM); }
.aside-login__card-nombre{ margin: 0; font-weight: 700; }
.aside-login__card-rol{ margin: 0; color: rgba(0,0,0,.55); font-size: var(--fXS); }

.aside-login__remember{
  display: flex;
  align-items: center;
  gap: var(--eXS);
  font-size: var(--fXS);
  color: var(--gO);
  cursor: pointer;
}
.aside-login__remember input{ margin: 0; accent-color: var(--r); }

.aside-login__error{
  margin: 0 0 var(--eS);
  padding: var(--eS) var(--eM);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--rP);
  color: #991b1b;
  font-size: var(--fXS);
  line-height: var(--lhS);
}
.aside-login__ok{
  margin: 0 0 var(--eS);
  padding: var(--eS) var(--eM);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--rP);
  color: #166534;
  font-size: var(--fXS);
  line-height: var(--lhS);
}

/* Menú cuenta usuario (menu_cuenta_cliente) */
.lateral-menu-cuenta{
  margin-top: var(--eM);
  border-top: 1px solid var(--gC3);
  padding-top: var(--eXS);
}
.lateral-menu-cuenta ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.lateral-menu-cuenta li a{
  display: flex;
  align-items: center;
  gap: var(--eS);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid var(--gC3);
  transition: color .15s;
}
.lateral-menu-cuenta li:last-child a{ border-bottom: none; }
.lateral-menu-cuenta li a:hover{ color: var(--r); }
.lateral-menu-cuenta li.nav-separador{
  height: 0;
  border-bottom: 1px solid var(--gC3);
  margin: var(--eXS) 0;
}
.lateral-menu-cuenta li.nav-separador + li a{ border-top: none; }

/* SVG icon class stubs from menu_cuenta_cliente() — shown as inline text for now */
.lateral-menu-cuenta .svg-icon::before{
  content: '';
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.svg-misdatos::before  { mask-image: url('/assets/iconos.svg#usuario'); -webkit-mask-image: url('/assets/iconos.svg#usuario'); }
.svg-corazon::before   { mask-image: url('/assets/iconos.svg#corazon'); -webkit-mask-image: url('/assets/iconos.svg#corazon'); }
.svg-pptos::before     { mask-image: url('/assets/iconos.svg#presupuesto'); -webkit-mask-image: url('/assets/iconos.svg#presupuesto'); }
.svg-pedidos::before   { mask-image: url('/assets/iconos.svg#pedidos'); -webkit-mask-image: url('/assets/iconos.svg#pedidos'); }
.svg-fabrica::before   { mask-image: url('/assets/iconos.svg#fabrica'); -webkit-mask-image: url('/assets/iconos.svg#fabrica'); }
.svg-ref::before       { mask-image: url('/assets/iconos.svg#referencia'); -webkit-mask-image: url('/assets/iconos.svg#referencia'); }
.svg-print::before     { mask-image: url('/assets/iconos.svg#imprimir'); -webkit-mask-image: url('/assets/iconos.svg#imprimir'); }
.svg-users::before     { mask-image: url('/assets/iconos.svg#usuarios'); -webkit-mask-image: url('/assets/iconos.svg#usuarios'); }
.svg-cliente::before   { mask-image: url('/assets/iconos.svg#usuario'); -webkit-mask-image: url('/assets/iconos.svg#usuario'); }
.svg-descarga::before  { mask-image: url('/assets/iconos.svg#descarga'); -webkit-mask-image: url('/assets/iconos.svg#descarga'); }
.svg-stock::before     { mask-image: url('/assets/iconos.svg#stock'); -webkit-mask-image: url('/assets/iconos.svg#stock'); }
.svg-cancel::before    { mask-image: url('/assets/iconos.svg#cerrar'); -webkit-mask-image: url('/assets/iconos.svg#cerrar'); }
.svg-cex::before       { mask-image: url('/assets/iconos.svg#envio'); -webkit-mask-image: url('/assets/iconos.svg#envio'); }
.svg-nacex::before     { mask-image: url('/assets/iconos.svg#envio'); -webkit-mask-image: url('/assets/iconos.svg#envio'); }
.svg-dhl::before       { mask-image: url('/assets/iconos.svg#envio'); -webkit-mask-image: url('/assets/iconos.svg#envio'); }

.lateral-icono-enlace:first-child{ border-top: none; }

.icono-boton--logueado svg, .icono-boton--logueado .icono{ fill: var(--r); }

.cabecera-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--r);
  color: #fff;
  font-size: var(--fXS);
  font-weight: 600;
  line-height: var(--fXS);
  letter-spacing: 0.5px;
}

.lateral__titulo{
  margin: 0 0 var(--eXS);
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 600;
}

.lateral__frase{
  margin: 0 0 var(--eL);
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
}

.lateral-menu__contenido--transicion{
  opacity: .55;
  transition: opacity .12s ease;
}

/* Vista 1: familias */
.lateral-icono-enlaces{ padding-left: 0; margin: var(--eXL) 0; }

.lateral-icono-enlace{
  display: flex;
  align-items: center;
  gap: var(--eS);
  border-bottom: 1px dotted var(--gC);
}

.lateral-icono-enlace .lateral-icono-enlace__icono{ fill: var(--g); }
.lateral-icono-enlace:hover .lateral-icono-enlace__icono{ fill: var(--r); }

.lateral-enlace-texto{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
  text-decoration: none;
  color: inherit;
  padding: 0.6rem 0;
  min-height: 50px;
  line-height: 1.2;
  font-size: 1.2rem;
}

@media (min-width: 501px){
  .lateral-enlace-texto{
    min-height: 40px;
  }
}
.lateral-icono-enlace-nombre{
    flex-grow: 1;    
}

.lateral-icono-enlace-flecha{
  width: var(--eL);
  height: var(--eL);
  flex-shrink: 0;
  fill: var(--rC3);
}

.lateral-icono-enlace:hover .lateral-icono-enlace-flecha{ fill: var(--rC); }

/* Vista 2: subfamilias */
.lateral-menu__volver{
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 var(--eM);
  font-size: var(--fM);
  line-height: var(--lhXS);
  cursor: pointer;
  color: var(--rC);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
}

.lateral-menu__volver:hover{ color: var(--r); }
.lateral-menu__volver-icono{ transform: rotate(180deg); }

.lateral-menu__titulo-familia{
  font-size: var(--f2XL);
  line-height: var(--lhXL);
  font-weight: 600;
  margin: 0 0 var(--eS);
  padding-bottom: var(--eS);
  margin-bottom: var(--eL);
  color: var(--gO);
  border-bottom: 1px dotted var(--rC);
}

.lateral-menu__link-familia{
  display: inline-block;
  margin-bottom: var(--eM);
  font-size: var(--fXL);
  line-height: var(--lhXS);
}

.lateral-menu__subfamilias{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eS);
}

.lateral-menu__subfamilia{
  display: flex;
  align-items: center;
  gap: var(--eS);
  font-size: 1.5rem;
}

.lateral-menu__subfamilia-img{
  width: calc(var(--eXL) + var(--eS));
  height: calc(var(--eXL) + var(--eS));
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(.7);
  transition: filter .2s ease;
}

.lateral-menu__subfamilia:hover .lateral-menu__subfamilia-img{ filter: grayscale(0); }

.lateral-menu__error{
  color: var(--r);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.aside-login__editorial{
  margin: var(--eXL) 0 var(--eS);
}

.aside-login__editorial:hover a{ color: white; }
.aside-login__editorial a:after{ display: none; }

/* ── FAB índice (móvil, ayuda) ── */
.fab-indice{
  position: fixed;
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1100;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--rC);
  background: var(--r);
  color: white;
  outline: 1px solid var(--rC2);
  outline-offset: 2px;
  font-weight: 600;
  font-size: var(--fM);
  box-shadow: var(--shadowC);
  cursor: pointer;
}

.fab-indice:hover{
  background: var(--gO);
  outline-color: var(--gM);
  border-color: var(--gM);
}

.resumen-titulo .t-mobile{ font-size: var(--fL); font-weight: 600; }
.fab-indice[hidden]{ display: none !important; }

.fab-top{
  position: fixed;
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rC);
  background: white;
  color: var(--r);
  cursor: pointer;
  box-shadow: var(--shadowC);
  transition: background 0.2s, color 0.2s;
}
.fab-top:hover{
  background: var(--r);
  color: white;
}
.fab-top .icono{
  width: 1.2rem;
  height: 1.2rem;
  transform: rotate(-90deg);
}

.ayuda-layout .columna-resumen > aside.resumen{
  position: fixed;
  background: white;
  left: var(--eL);
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1101;
  max-height: 72vh;
  overflow: auto;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

body.is-indice-open .ayuda-layout .columna-resumen > aside.resumen{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ayuda-layout .columna-resumen > aside.resumen .indice-close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

body.is-indice-open .lateral-overlay{
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 501px){
  .fab-indice{ display: none; }
  .ayuda-layout .columna-resumen > aside.resumen{
    position: sticky;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    max-height: none;
  }
}

/* ── Lateral filtros ── */
.lateral--filtros .lateral__contenido{ padding: 16px; }

.aside-filtros__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--borde-suave);
}

.aside-filtros__titulo{
  font: inherit;
  font-weight: 700;
  margin: 0;
}

.aside-filtros__chips{
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lateral--filtros .aside-filtros__chips{
  display: grid;
  gap: 10px;
}


.lateral--filtros .filtro-chip{ width: 100%; }
.lateral--filtros .filtro-chip-resumen{ width: 100%; }


/* ==========================================================================
   9) TOAST + BADGE
   ========================================================================== */

.producto-card__toast{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 60;
}

.producto-card__toast-caja{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--rC2);
  background: white;
  color: var(--gO);
  box-shadow: var(--shadowC);
  white-space: nowrap;
}

.producto-card__toast--carrito .producto-card__toast-caja{ border-color: var(--gC); }
.producto-card__toast--listas .producto-card__toast-caja{ border-color: var(--rC2); }

.producto-card__toast-texto{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 600;
}

/* Badge */
.card__badge{
  position: absolute;
  z-index: 200;
  top: var(--eXL);
  left: 0px;
  font-size: var(--fXS);
  font-weight: 600;
  text-transform: uppercase;
  outline-offset: 2px;
  pointer-events: none;
  padding: var(--eXS) var(--eS);
  border-radius: 0 var(--rP) var(--rP) 0;
  transition: padding 0.2s;
}

.card__badge--novedad{
  color: white;
  background: var(--rC);
  outline: 1px solid var(--rC);
}

.card__badge--liquidacion{
  color: white;
  background: var(--gM);
  outline: 1px solid var(--gM);
}

.card__badge--stock{
  position: absolute;
  top: var(--eS);
  right: var(--eS);
  left: auto;
  padding: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2e7d32;
  color: white;
  font-size: 0.7rem;
  line-height: 1;
  outline: 1px solid #2e7d32;
}

.producto-card:hover .card__badge:not(.card__badge--stock){ padding-left: var(--eL); }
.slide-card .card__badge:not(.card__badge--stock){ left: 2px; }
.slide-card:hover .card__badge:not(.card__badge--stock){ padding-left: var(--eM); }


/* ==========================================================================
   10) BREADCRUMBS + HERO (interno)
   ========================================================================== */

.ruta-producto{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-bottom: var(--eL);
  padding-top: var(--eL);
  gap: var(--eXS);
  row-gap: var(--eXS);
}

.ruta-producto a,
.ruta-producto [aria-current="page"],
.ruta-producto .pagina-actual{
  white-space: nowrap;
}

.ruta-producto a{
  font-size: var(--fS);
  line-height: var(--lhS);
  text-decoration: none;
}

.hero-frase{ white-space: pre-line; }

.ruta-producto a:focus-visible{
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
  border-radius: var(--rP);
}

.ruta-producto__sep, .ruta-producto .entre-rutas{
  padding: 0 var(--eXS);
  opacity: .75;
}

.ruta-producto [aria-current="page"],
.ruta-producto .pagina-actual{
  font-weight: 600;
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero interno */
.hero-layout{
  display: flex;
  position: relative;
  align-items: center;
  max-height: fit-content;
  border-radius: var(--rP);
  gap: var(--sp-L);
  margin-top: calc(-1 * (var(--sp-M)));
  border-bottom: 0;
}

body[data-pagina="subfamilia"] .hero-layout{
  margin: var(--e2XL) 0;
  min-height: 4rem;
  overflow: hidden;
  padding-bottom: 0;
}

.hero-layout > *{ min-width: 0; }

.hero-layout .hero-texto{
  max-width: 100%;
  font-size: var(--fS);
  line-height: var(--lhS);
  opacity: .9;
  padding-bottom: var(--eL);
}

.hero-layout .hero-titulo{
  margin: 0 0 var(--eS);
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: var(--eM);
}

.hero-marca-logo{
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.hero-layout .hero-titulo svg{
  transform: scale(2);
  fill: var(--rC);
}

.hero-layout .hero-frase{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.hero-layout .hero-contador{
  position: relative;
  margin-top: var(--eL);
  margin-left: var(--eXL);
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--g);
  opacity: .9;
  white-space: nowrap;
}

.hero-layout .subfamilia-hero-imagenes{ display: none; }

@media (min-width: 769px){
  .hero-layout{
    min-height: 120px;
    border-bottom: 1px dotted var(--g);
    padding-bottom: var(--eS);
    overflow: hidden;
  }

  .hero-layout .hero-contador{
    position: absolute;
    right: var(--eXL);
    bottom: var(--eM);
    margin-top: 0;
    margin-left: 0;
  }

  body[data-pagina="subfamilia"] .hero-layout{
    padding-bottom: 0;
  }

  .hero-layout .subfamilia-hero-imagenes{
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    height: 100%;
    z-index: 1;
  }

  .hero-layout .subfamilia-hero-imagenes img{
    height: 100%;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
  }

  .ruta-producto [aria-current="page"],
  .ruta-producto .pagina-actual{
    max-width: 34ch;
  }

  body[data-pagina="subfamilia"] .hero-layout{ margin: 0; }
}

/* ── Familia hero ── */
.familia-hero{
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: white;
  border-bottom: 1px solid var(--rC);
  padding-bottom: var(--eL);
  max-height: none;
}

.familia-hero__col--media{ position: relative; flex: 2 1 0; min-height: auto; }
.familia-hero__media{ height: auto; }

.familia-hero__video{ display: none; }

.familia-hero__overlay{
  position: relative;
  padding: 0;
  background: white;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.familia-hero-texto{
  pointer-events: auto;
  padding: 0;
  color: var(--gO);
  border-radius: var(--rM);
  max-width: 52ch;
}

.familia-hero-titulo{
  margin: 0;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, var(--f4XL));
  line-height: var(--lh4XL);
  color: var(--g);
  padding-bottom: var(--eL);
}

.familia-hero-frase{ display: none; }

.familia-hero-intro{
  margin-top: var(--eL);
  font-size: var(--fS);
  line-height: var(--lhS);
  border-top: 1px solid var(--gO);
  padding-top: var(--eS);
}

.familia-hero__col--subfamilias{
  flex: 100%;
  padding: 0;
  padding-bottom: var(--eL);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: white;
}

.familia-hero .subfamilia-card-imagen{ display: none; }

.familia-productos__subtitulo{ display: none; }

.familia-hero .subfamilia-card-enlace{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--eM);
}

.familia-hero .subfamilia-card-enlace::after{ content: none; }

.familia-hero .subfamilia-card-titulo{
  margin: 0;
  padding-top: 0;
  flex: 1 1 auto;
  font-size: var(--fXL);
  line-height: var(--lhXL);
}

.familia-hero .subfamilia-card-imagen{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.familia-hero .subfamilia-card-imagen img{
  width: var(--e2XL);
  height: var(--e2XL);
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  filter: saturate(.5);
  transform: scale(.8);
}

@media (min-width: 501px){
  .familia-hero .subfamilia-card-imagen{ display: inline-flex; }
  .grid-subfamilias{
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--eM);
    column-gap: var(--eXL);
  }
}

@media (min-width: 769px){
  .familia-hero{
    flex-direction: row;
    border-radius: var(--rM);
    background: linear-gradient(135deg, var(--rC2), var(--rC3), var(--gC2), white);
    border-bottom: 0;
    padding-bottom: 0;
    max-height: 25rem;
  }

  .familia-hero__col--media{ min-height: 320px; }
  .familia-hero__media{ height: 100%; }
  .familia-hero__video{ display: block; width: 100%; height: 100%; object-fit: cover; }

  .familia-hero__overlay{
    position: absolute;
    inset: 0;
    padding: var(--eXL);
    background: transparent;
  }

  .familia-hero-texto{
    padding: var(--eXL);
    color: var(--gO);
  }

  .familia-hero-titulo{
    color: white;
    font-weight: 400;
  }

  .familia-hero-frase{
    display: block;
    margin-top: var(--eS);
    padding: var(--eS);
    border-radius: var(--rP);
    background: var(--gC3);
    font-size: var(--fL);
    line-height: var(--lhL);
  }

  .familia-hero__col--subfamilias{
    flex: 1 1 0;
    padding: var(--eL);
    overflow-y: auto;
    max-height: 25rem;
  }

  .familia-productos__subtitulo{ display: block; }

  .ruta-producto [aria-current="page"],
  .ruta-producto .pagina-actual{
    display: inline-block;
  }

  .ruta-producto > .ruta-producto__sep:nth-last-child(2){
    display: inline;
  }
}

@media (min-width: 1025px){
  .familia-hero__col--subfamilias{ flex: 1 1 0; }
}

/* ── Subfamilia hero ── */
.subfamilia-hero__ilustracion{
  flex: 0 0 3.5rem;
  position: relative;
  z-index: 3;
  min-width: 3.5rem;
  background-color: white;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.subfamilia-hero__ilustracion img{
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: grayscale(.7);
  transition: filter .2s ease;
}

.subfamilia-hero-texto{
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: var(--eS) 0;
  background: white;
  justify-content: center;
  flex: 1 1 auto;
}

.subfamilia-hero-texto .hero-contador{ display: none; }

.subfamilia-hero-titulo{
  margin: 0;
  font-size: 1.5rem;
  line-height: var(--lh3XL);
  color: var(--r);
  text-wrap: wrap;
  font-weight: 500;
}

.subfamilia-hero-frase{ display: none; }

@media (min-width: 501px){
  .subfamilia-hero__ilustracion{
    flex: 0 0 5rem;
    min-width: 5rem;
  }

  .subfamilia-hero__ilustracion img{
    width: 4.5rem;
    height: 4.5rem;
  }

  .subfamilia-hero-texto{
    position: relative;
    z-index: 2;
    padding: var(--eS) 0;
    background: linear-gradient(
      to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 35%,
      rgba(255,255,255,.95) 55%,
      rgba(255,255,255,.85) 75%,
      rgba(255,255,255,0) 100%
    );
    flex: 1 1 auto;
  }

  .subfamilia-hero-titulo{
    font-size: var(--f3XL);
    line-height: 1;
    font-weight: 300;
  }

  .subfamilia-hero-frase{
    display: block;
    margin: 0;
    font-size: var(--fS);
    line-height: var(--lhXS);
    color: var(--g2);
    width: 85%;
  }
}

@media (min-width: 769px){
  .ruta-producto [aria-current="page"],
  .ruta-producto .pagina-actual{
    display: inline-block;
  }
}


/* ==========================================================================
   11) PÁGINA · Portada (HOME hero + confianza)
   ========================================================================== */

/* ── HOME hero (oculto en móvil < 500px) ── */
.home-hero{ display: none; }
.confianza{ display: none; }

@media (min-width: 501px){
  .home-hero{
    display: block;
    position: relative;
    overflow: hidden;
    height: clamp(13rem, 38vh, 13rem);
    min-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: -14px;
  }

  .cta-overlay{ background: transparent; }
  .cta-overlay .hero-titulo{ display: none; }

  .confianza{ display: block; }
  /* Zona de Cata: visible en todos los breakpoints */
}

@media (min-width: 769px){
  .home-hero{
    height: clamp(250px, calc(218px + 12.9vw), 500px);
    min-height: 250px;
  }

  .cta-overlay{
    background: rgba(255, 255, 255, 0.92);
  }

  .cta-overlay .hero-titulo{ display: block; }
}

.home-hero .hero-carrusel{
  position: relative;
  height: 100%;
}

/* Slides sin bxSlider (fallback JS custom con .is-active) */
.home-hero .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.home-hero .hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Slides con bxSlider: neutralizar estilos custom, dejar que bxSlider controle */
.home-hero .bx-wrapper .hero-slide{
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.home-hero .hero-media{
  position: absolute;
  inset: 0;
  margin: 0;
}

/* bxSlider: hero-media debe ser relativo para que el slide tenga altura */
.home-hero .bx-wrapper .hero-media{
  position: relative;
  inset: auto;
}

/* bxSlider: el slide necesita ser contenedor posicional para el .cta-overlay */
.home-hero .bx-wrapper .hero-slide{
  position: relative;
}

/* bxSlider: imagen ocupa la altura del hero */
.home-hero .bx-wrapper .hero-media img{
  height: clamp(13rem, 38vh, 13rem);
}

@media (min-width: 501px){
  .home-hero .bx-wrapper .hero-media img{
    height: clamp(13rem, 38vh, 13rem);
  }
}
@media (min-width: 769px){
  .home-hero .bx-wrapper .hero-media img{
    height: clamp(250px, calc(218px + 12.9vw), 500px);
  }
}

.home-hero .hero-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right center;
}

.home-hero .hero-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.15)
  );
}

/* ── Confianza ── */
.confianza-flex{
  display: flex;
  list-style-type: none;
  gap: var(--eS);
  padding: var(--eL) 0;
}

.confianza-flex li{
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  background: var(--gC2);
  border-radius: var(--rP);
  padding: var(--e2XL) var(--eL);
}

.confianza-flex li:last-of-type{ background: var(--gC); }
.confianza-flex li:hover{ background: var(--rC2); }
.confianza-flex h3{ font-size: var(--fM); color: var(--gO); font-weight: 500; }
.confianza-flex p{ font-size: var(--fXS); }

.link-subrayado-centro{ display: inline-block; }

.link-subrayado-centro::after{
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.link-subrayado-centro:hover::after,
.link-subrayado-centro:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}


/* ==========================================================================
   12) PÁGINA · Buscador sugerencias
   ========================================================================== */

.buscador__sugerencias{
  position: absolute;
  top: calc(100% + var(--eS));
  left: 0;
  right: 0;
  z-index: 300;
  margin-top: 0;
  padding: var(--eXS) 0;
  max-height: 18rem;
  overflow-y: auto;
  border-radius: var(--rM);
  background: white;
  border: 1px solid var(--gM);
  box-shadow: 0 2px 4px var(--gC3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--eXS)));
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  scrollbar-width: thin;
  scrollbar-color: var(--gC2) transparent;
}

.buscador__sugerencias--visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 521px){
  .buscador__sugerencias{ max-height: 22rem; }
}

.buscador-sugerencias__correccion{ padding: var(--eXS) var(--eS); }

.buscador-sugerencias__texto-correccion{
  margin: 0;
  font-size: var(--fS);
  color: var(--gM);
}

.buscador-sugerencias__boton-correccion{
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--eXS);
  font: inherit;
  font-weight: 600;
  color: var(--r);
  cursor: pointer;
  text-decoration: underline;
}

.buscador-sugerencias__boton-correccion:hover{ color: var(--g); }

.buscador-sugerencias__boton-correccion:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
  border-radius: var(--rP);
}

.buscador-sugerencias__grupo + .buscador-sugerencias__grupo{
  border-top: 1px solid var(--gC);
  margin-top: var(--eXS);
  padding-top: var(--eXS);
}

.buscador-sugerencias__titulo-grupo{
  margin: var(--eS) var(--eM) var(--eXS);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-transform: uppercase;
  color: var(--gM);
}

.buscador-sugerencias__lista{
  list-style: none;
  margin: 0;
  padding: 0;
}

.buscador-sugerencias__item{ margin: 0; padding: 0; }

.buscador-sugerencias__enlace{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  padding: var(--eS) var(--eM);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--rP);
  margin: 0 var(--eS);
}

.buscador-sugerencias__enlace:hover{ background: rgba(0, 0, 0, 0.03); }

.buscador-sugerencias__enlace:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
}

.buscador-sugerencias__nombre{
  font-weight: 600;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

.buscador-sugerencias__descripcion{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g2);
}


/* ==========================================================================
   13) PÁGINA · Cookies
   ========================================================================== */

.cookies{
  position: fixed;
  left: var(--eL);
  right: var(--eL);
  bottom: var(--eL);
  z-index: 9999;
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.cookies.is-hide{ display: none; }

.cookies__inner{
  display: flex;
  gap: var(--eL);
  align-items: stretch;
  flex-direction: column;
  padding: var(--eL);
}

.cookies__txt{ min-width: 0; }

.cookies__p{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

.cookies__p--mini{
  margin-top: var(--eXS);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: .9;
}

.cookies__link{ text-decoration: none; }
.cookies__link:hover{ text-decoration: underline; }

.cookies__actions{
  display: flex;
  gap: var(--eS);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.cookies .btn, .cookies-modal .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eL);
  border-radius: var(--rB);
  border: 1px solid var(--gC);
  background: white;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

.cookies .btn:hover, .cookies-modal .btn:hover{
  border-color: var(--r);
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

.cookies .btn:focus-visible, .cookies-modal .btn:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
}

.cookies .btn--ghost, .cookies-modal .btn--ghost{ background: transparent; }

@media (min-width: 721px){
  .cookies__inner{
    flex-direction: row;
    align-items: center;
  }
  .cookies__actions{ justify-content: flex-end; }
}

/* Cookie modal */
.cookies-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.cookies-modal.is-open{ display: block; }

.cookies-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.cookies-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - (var(--eL) * 2)));
  background: white;
  border-radius: var(--rP);
  border: 1px solid var(--gC);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
}

.cookies-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--eM) var(--eL);
  border-bottom: 1px solid var(--gC);
}

.cookies-modal__h{
  margin: 0;
  font-size: var(--fL);
  line-height: var(--lhL);
  font-weight: 600;
}

.cookies-modal__x{
  border: 0;
  background: transparent;
  font-size: var(--f2XL);
  line-height: 1;
  cursor: pointer;
  color: var(--gO);
}

.cookies-modal__x:hover{ color: var(--r); }

.cookies-modal__body{
  padding: var(--eL);
  display: grid;
  gap: var(--eM);
}

.cookies-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eL);
  padding: var(--eM);
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: var(--gC3);
}

.cookies-opt__txt{ min-width: 0; }
.cookies-opt__t{ font-weight: 700; font-size: var(--fS); line-height: var(--lhS); }

.cookies-opt__d{
  opacity: .9;
  font-size: var(--fS);
  line-height: var(--lhS);
  margin-top: var(--eXS);
  color: var(--g);
}

.cookies-modal__mini{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: .9;
  margin: 0;
}

.cookies-modal__foot{
  padding: var(--eM) var(--eL);
  border-top: 1px solid var(--gC);
  display: flex;
  gap: var(--eS);
  flex-wrap: wrap;
  justify-content: flex-end;
}

html.is-modal-open, html.is-modal-open body{ overflow: hidden; }


/* ==========================================================================
   14) PÁGINAS · Formularios checkout, Listas+Carro, Producto, RedVentas, ZonaCata, Cuenta
   (incluidos inline, sus responsive ya están convertidos mobile-first)
   ========================================================================== */

/* ── Checkout formularios ── */
.linea-bloque{ padding: var(--eL); }

.linea-bloque-titulo{
  margin: 0;
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 500;
  background: var(--rC2);
  border-radius: var(--rP);
  padding: var(--eL);
}

.linea-bloque-texto{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gM);
}

.bloque{ padding: var(--eL); }
.linea-bloque__campos{ margin-top: var(--eL); }
.linea-bloque__acciones{ margin-top: var(--eL); }

.bloque-acciones{
  display: flex;
  gap: var(--eL);
  align-items: center;
  justify-content: flex-end;
  margin-right: 0;
}

.campos{
  display: flex;
  gap: var(--eL);
  flex-wrap: wrap;
}

.campo{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 220px;
}

.campo__label{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gO);
  opacity: .88;
}

.campo input, .campo select, .campo textarea{
  width: 100%;
  padding: var(--eS) var(--eL);
  border-radius: var(--rP);
  border: 1px solid var(--rC);
  background: white;
  color: inherit;
  font: inherit;
  line-height: var(--lhS);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.campo input::placeholder, .campo textarea::placeholder{ opacity: .55; }
.campo input:hover, .campo select:hover, .campo textarea:hover{ border-color: var(--rC2); }

.campo input:focus, .campo input:focus-visible,
.campo select:focus, .campo select:focus-visible,
.campo textarea:focus, .campo textarea:focus-visible{
  outline: none;
  border-color: var(--rC2);
  background: var(--gC3);
  box-shadow: 0 0 0 3px var(--rC);
}

.campo input:active, .campo select:active, .campo textarea:active{
  transform: translateY(0.5px);
}

.campo input:disabled, .campo select:disabled, .campo textarea:disabled{
  opacity: .6;
  cursor: not-allowed;
  background: rgba(0,0,0,0.03);
}

.campo input[readonly], .campo textarea[readonly]{
  background: rgba(0,0,0,0.02);
  border-style: dashed;
}

.campo input:invalid, .campo select:invalid, .campo textarea:invalid{
  border-color: var(--r);
}

.campo input:invalid:focus, .campo input:invalid:focus-visible,
.campo select:invalid:focus, .campo select:invalid:focus-visible,
.campo textarea:invalid:focus, .campo textarea:invalid:focus-visible{
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.campo-XS{ flex: 0 1 clamp(7rem, 12vw, 9rem); }
.campo-S{ flex: 0 1 clamp(11rem, 20vw, 15rem); }
.campo-M{ flex: 1 1 clamp(16rem, 30vw, 22rem); }
.campo-L{ flex: 1 1 clamp(18rem, 36vw, 28rem); }
.campo-XL{ flex: 1 1 clamp(22rem, 55vw, 44rem); }

.campo__control{ width: 100%; }

/* Checkout pago */
.checkout-metodos{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eL);
  margin-top: var(--eL);
}

.checkout-metodos__opcion{
  display: inline-flex;
  align-items: center;
  gap: var(--eS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--rC);
  background: white;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.checkout-metodos__opcion:hover{ border-color: var(--rC2); }

.checkout-metodos__opcion input[type="radio"]{
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  accent-color: var(--r);
}

.checkout-metodos__texto{
  font-weight: 600;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
  white-space: nowrap;
}

@supports selector(:has(*)){
  .checkout-metodos__opcion:has(input[type="radio"]:checked){
    border-color: var(--rC2);
    background: var(--gC3);
    box-shadow: 0 0 0 2px var(--rC3);
  }
}

.checkout-metodos__opcion--activa{
  border-color: var(--rC2);
  background: var(--gC3);
  box-shadow: 0 0 0 2px var(--rC3);
}

.metodos-paneles{ margin-top: var(--eL); }

.metodo-panel{
  border: 1px solid var(--rC);
  border-radius: var(--rP);
  background: white;
  padding: var(--eL);
}

.metodo-panel h3{ margin: 0 0 var(--eS); font-size: var(--fL); line-height: var(--lhL); color: var(--gO); }
.metodo-panel p{ margin: 0 0 var(--eS); font-size: var(--fS); line-height: var(--lhS); color: var(--gM); }
.metodo-panel strong{ font-weight: 700; color: var(--gO); }
.metodo-panel--oculto{ display: none; }
.metodo-panel .campo, .texto-nota{ margin-top: var(--eL); }

@media (min-width: 769px){
  .lineas .bloque-acciones{ flex-direction: row; }
}

/* ── Listas + Carro (incluido inline) ── */
/* (Included from 24_listas_carro.css — resumen, lineas, actionbar, carrito, listas responsive all mobile-first) */

.resumen{
  position: static;
  top: auto;
  align-self: start;
  height: fit-content;
  border: 1px solid var(--gM);
  overflow: hidden;
  outline: 1px solid var(--gC);
  outline-offset: 2px;
  padding: var(--eL);
  border-radius: var(--rM);
}

.resumen-titulo{
  background: var(--r);
  color: white;
  font-weight: 500;
  margin: calc(var(--eL) * -1);
  margin-bottom: var(--eL);
  padding: var(--eL);
  display: flex;
  font-size: var(--fS);
  justify-content: space-between;
  align-items: center;
  padding-left: var(--eXL);
}

@media (min-width: 501px){
  .resumen-titulo{
    background: var(--g);
    display: block;
    font-size: inherit;
    padding-left: var(--eL);
  }
}

.resumen-ayuda li{ margin: 0; }

.resumen-listas-indice{
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.resumen-nota p{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
}

.resumen-listas{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.resumen-lista{ padding: var(--eM); }
.resumen-lista--activa{ border-color: var(--gM); }
.resumen-lista--activa .boton-lista{ font-weight: 400; color: var(--gO); }
.resumen-lista--activa .boton-lista:hover{ color: white; }

.resumen-lista-contador{
  margin-left: var(--eM);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  font-weight: 600;
}

.resumen-lista .item-acciones{ margin-top: var(--eS); }

/* Lineas */
.lineas{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--gC2);
  border-radius: var(--rM);
  padding: var(--eL);
}

.linea-cabecera-lista{ position: relative; }

.linea-cabecera-titulo{
  background: var(--gC2);
  margin: calc(var(--eXL) * -1) calc(var(--eXL) * -1) 0;
  padding: var(--eXL);
}

.linea-titulo{
  display: block;
  margin: 0;
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 300;
  border-radius: var(--rP);
  padding: 0;
}

.linea-meta{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
}

.resumen-linea-acciones{
  display: flex;
  justify-content: space-between;
  gap: var(--eS);
  flex-wrap: wrap;
}

.lineas-listas .resumen-linea-acciones{
  position: absolute;
  bottom: -35px;
  right: 0;
  margin-right: var(--eS);
}

.lineas-contenedor-linea{
  list-style: none;
  padding-left: 0;
  margin: var(--eL) 0;
}

.linea-lista:not(:last-of-type),
.linea-carro:not(:last-of-type){
  padding-bottom: var(--eL);
  border-bottom: 1px dotted var(--gC);
}

.linea-contenedor{
  display: flex;
  align-items: flex-start;
  gap: var(--eS);
  padding-top: var(--eL);
}

.linea-imagen{
  width: calc(var(--e2XL) + var(--eXS));
  flex: 0 0 auto;
}

.linea-miniatura{ width: 100%; height: auto; display: block; }

.linea-datos{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eXS);
  min-width: 0;
}

.linea.linea-lista .linea-titulo{
  display: flex;
  font-size: var(--fXL);
  flex-direction: column;
  justify-content: flex-start;
}

.linea-contenedor-datos{
  display: flex;
  flex-direction: row;
  gap: var(--eM);
  padding-top: var(--eXS);
  flex-wrap: wrap;
}

.linea .item-acciones{ padding-top: var(--eS); }
.listas-detalle__vacio{ margin-top: var(--eXL); color: var(--gM); }

/* Resumen carro */
.resumen-dato, .resumen-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--eS);
  margin: 0;
}

.resumen-total{
  border-block: 1px dotted var(--rC);
  margin-block: var(--eL);
  padding-block: var(--eS);
}

.resumen-iva, .resumen-portes{ font-weight: 700; }

.estimacion-nota{
  font-weight: 400;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
  margin-block: var(--eL);
}

.resumen-detalle{ margin: var(--eL) 0; }

.resumen-detalle-desplegable{
  display: flex;
  align-items: center;
  gap: var(--eS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  background: white;
  cursor: pointer;
  font-size: var(--fS);
  line-height: var(--lhS);
  border: 2px solid white;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.resumen-detalle svg{ transform: rotate(0deg) scale(.7); fill: var(--rC); }
.resumen-detalle-desplegable:hover{ background: var(--gC2); color: var(--r); }

.resumen-detalle[open] > .resumen-detalle-desplegable{
  background: white;
  border-color: var(--rC2);
}

.resumen-detalle[open] svg{ transform: rotate(90deg) scale(.7); }

.resumen-detalle__contenido{
  background: white;
  border-radius: var(--rP);
  padding: var(--eM);
  display: flex;
  margin-top: var(--eXS);
  flex-direction: column;
  gap: var(--eL);
}

.resumen-lista button .listas-indice__pill{
  position: absolute;
  left: var(--e2XL);
  color: var(--gM);
  background: white;
  font-size: var(--fXS);
  padding: var(--eXS);
  border: 1px solid var(--rC);
  border-radius: var(--rP);
  margin-top: -28px;
}

.resumen-linea{
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--eM);
}

.resumen-linea-item{
  display: flex;
  gap: var(--eXS);
  min-width: 0;
}

.resumen-linea-imagen img, .resumen-linea img{
  width: var(--eXL);
  height: auto;
  display: block;
}

.resumen-linea__info{ text-align: left; min-width: 0; }
.resumen-linea__info p{ margin: 0; font-size: var(--fXS); line-height: var(--lhXS); }

.resumen-linea__datos p{
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-size: var(--fXS);
  line-height: var(--lhXS);
}

.resumen-linea__datos{ flex: 0 0 auto; }
.resumen-linea-acciones{ margin-bottom: var(--eL); }
.resumen-carro .resumen-linea-acciones{ justify-content: center; gap: var(--eM); }
.resumen-boton-principal{ width: 100%; }

.resumen-presupuesto{
  margin-top: var(--eL);
  padding-top: var(--eL);
  border-top: 1px dotted var(--rC);
}

.resumen-presupuesto-summary{
  cursor: pointer;
  font-weight: 400;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.resumen-presupuesto-texto{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
  margin: 0;
}

.resumen-presupuesto-contenido{
  margin-top: var(--eS);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
}

.resumen-presupuesto-summary::marker{ color: var(--rC); }
.resumen-presupuesto .boton-secundario{ opacity: 1; filter: none; }

/* Actionbar móvil y carro responsive */
.resumen-ayuda li:hover{ background: white; }
.lineas .linea-carro{ width: 100%; }

.linea-carro .linea-contenedor-datos{ justify-content: space-between; }
.linea-carro .linea-detalle{ display: flex; gap: var(--eL); flex-wrap: wrap; }
.linea-carro .stepper{ width: auto; }
.linea-carro .linea-imagen{ flex: 0 0 50px; }

@media (min-width: 501px){
  .item-acciones-ayuda{ flex-direction: column; justify-content: flex-start; }
  .linea-carro .linea-imagen{ flex: 0 0 auto; }
}

@media (min-width: 769px){
  .resumen-ayuda li{ padding: 0 0 var(--eL); }
  .resumen-ayuda li a{ line-height: var(--lhS); }
  .bloque-ayuda ul, .bloque-ayuda ol{ padding-left: var(--eL); }
  .lineas{ padding: var(--eXL); }
  .bloque-ayuda ul li, .bloque-ayuda ol li{ margin-bottom: var(--eM); }
  .linea-titulo{ font-size: var(--f2XL); }
  .linea-contenedor{ padding: var(--eL); }

  /* Actionbar desktop: hidden */
  body.has-actionbar{ padding-bottom: 0; }
}

/* Actionbar móvil */
body.has-actionbar{ padding-bottom: 76px; }

.actionbar-movil{
  position: fixed;
  left: var(--eL);
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
  padding: var(--eM);
  background: var(--rC3);
  border: 1px solid var(--rC);
  border-radius: var(--rM);
  box-shadow: var(--shadowC);
}

.actionbar-movil__bloque{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}

.actionbar-movil__label{ font-size: var(--fXS); line-height: var(--lhS); opacity: .85; }
.actionbar-movil__sub{ font-size: var(--fXS); line-height: var(--lhS); opacity: .7; white-space: nowrap; }
.actionbar-movil__total{ font-size: var(--fS); line-height: var(--lhS); font-weight: 700; color: var(--r); white-space: nowrap; }
.actionbar-movil__cta{ white-space: nowrap; }

.actionbar-movil.is-compacta{ padding: 8px 10px; }
.actionbar-movil.is-compacta .actionbar-movil__bloque{ display: none; }
.actionbar-movil.is-compacta .actionbar-movil__cta{ width: 100%; justify-content: center; }

@media (min-width: 769px){
  body.has-actionbar{ padding-bottom: 0; }
  .actionbar-movil{ display: none; }

  .DosColumnas-layout{ display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
  .DosColumnas-layout .resumen{ position: sticky; top: var(--eXL); }
}

/* Listas responsive */
.listas-layout{
  display: flex;
  flex-direction: column-reverse;
}

.listas-layout .resumen-listas-indice{ margin-top: var(--eL); }
.listas-layout .resumen-nota{ display: none; }
.listas-layout .lineas-listas .resumen-linea-acciones{ position: relative; margin-top: -50px; }
.listas-layout .lineas-listas .resumen-linea-acciones button{ font-size: var(--fXS); width: 180px; }
.listas-layout .item-acciones{ flex-wrap: wrap; border-top: 1px dotted var(--gC); gap: var(--eL); padding-top: var(--eL); }
.listas-layout .linea-lista .linea-titulo{ font-size: var(--fL); }

@media (min-width: 769px){
  .listas-layout{ flex-direction: row; }
  .listas-layout .lineas-listas{ width: 100%; }
  .listas-layout .lineas{ padding: var(--eL); }
  .listas-layout .lineas-contenedor-linea{ margin-top: var(--e2XL); }
  .listas-layout .resumen-nota{ display: block; }
  .listas-layout .resumen-listas-indice{ margin-top: 0; }
}


/* ==========================================================================
   15) PÁGINAS · Producto, Red de ventas, Zona de Cata, Cuenta
   (Estilos específicos de página — ya mobile-first)
   ========================================================================== */

/* ── Producto ── */
.producto-layout{
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.producto-media, .producto-info{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.producto-info{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
}

.producto-info__cabecera{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  padding-bottom: var(--eL);
}

/* ── CTA: Cantidad + Carrito ── */
.producto-cta{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cta__label{
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
  line-height: var(--lhXS);
}

.cta__multiplo{
  font-style: italic;
  font-weight: 300;
}

.producto-total__label{
  font-size: var(--fS);
  font-weight: 400;
  color: var(--g);
  white-space: nowrap;
}

.cta__total .precioFormato{ line-height: 0.5; }

/* Altura uniforme para stepper, botones y total */
.producto-cta .stepper{ margin-bottom: 0; }
.producto-cta .cta__boton,
.producto-cta .stepper{
  height: 2.75rem;
  box-sizing: border-box;
}
.producto-cta .cta__boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Móvil (base):
   [stepper]      [Total]
   [Añadir]       [Ver carrito]
   [Guardar ─────────────────]
── */
.cta__fila-principal{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--eS);
  align-items: center;
  margin-top: var(--eXS);
}

.cta__cantidad{ grid-column: 1; grid-row: 1; }
.cta__cantidad .stepper{ width: auto; }
.cta__total{
  grid-column: 2; grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: var(--eS);
  justify-content: flex-end;
}
.cta__anadir{ grid-column: 1; grid-row: 2; }
.cta__ver-carrito{ grid-column: 2; grid-row: 2; justify-self: end; }
.cta__guardar{ grid-column: 1 / -1; grid-row: 3; }

.producto-especificaciones__lista{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--eS);
  row-gap: var(--eXS);
}

.producto-especificaciones__term{
  grid-column: 1;
  text-wrap: wrap;
  font-weight: 600;
  color: var(--gO);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.producto-especificaciones__def{
  grid-column: 2;
  color: var(--g2);
  font-size: var(--fS);
  line-height: var(--lhS);
  word-break: break-word;
}

.producto-especificaciones__term::after{ content: ":"; }

.producto-media--detalle{ display: none; }

.producto-media--detalle--mobile,
.producto-media--detalle--mobile.docs--mobile{
  display: block;
}

.producto-detalle-titulo{
  font-size: var(--fL);
  line-height: var(--lhL);
  margin: 0 0 var(--eS);
}

.descripcion__larga{ margin-top: var(--eM); }

.producto-docs__texto{
  margin: 0;
  font-weight: 300;
  color: var(--g2);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.producto-docs__cta{ margin: var(--eS) 0 0 0; }
.producto-docs__link{ color: var(--r); text-decoration: none; font-weight: 600; }
.producto-docs__link:hover{ text-decoration: underline; }

#zc-relacionados{ scroll-margin-top: 120px; }

.producto-media-principal{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: white;
}

.producto-media-imagen{
  width: 100%;
  height: 100%;
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.carril-miniaturas{
  display: flex;
  gap: var(--eS);
  overflow-x: auto;
  margin-top: var(--eS);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.chip-miniatura{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: var(--rP);
  border: 2px solid var(--gC2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  scroll-snap-align: start;
}

.chip-miniatura--activa{
  border-color: var(--rC);
  box-shadow: 0 0 0 1px var(--rC);
}

.producto-resumen{
  border-block: 1px dotted var(--rC);
  padding-bottom: var(--eL);
}

.producto-resumen__seleccionado{
  color: var(--rC);
  font-style: italic;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.producto-resumen__seleccionado::before{
  content: "Has seleccionado: ";
  font-weight: 500;
  color: var(--gO);
  font-style: normal;
}

.producto-especificaciones{
  border-top: 1px dotted var(--rC);
  margin: var(--eL) 0;
  padding-top: var(--eL);
}

.producto-especificaciones__subtitulo{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 600;
  color: var(--gM);
  text-decoration: underline;
  padding: var(--eM) 0 var(--eXS);
}

.producto-cta__favorito{
  cursor: pointer;
  border-radius: var(--rB);
  border: 1px solid var(--gC);
  background: white;
  padding: var(--eXS) var(--eS);
  font-size: var(--fS);
  line-height: var(--lhS);
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  color: var(--g2);
}

.producto-cta__favorito::before{ content: "♡"; font-size: 1rem; line-height: 1; }

.producto-cta__favorito--activo{
  border-color: var(--r);
  background: var(--rC2);
  color: var(--r);
}

.producto-cta__favorito--activo::before{ content: "♥"; }

.producto-lista{
  margin-top: var(--eM);
  padding-top: var(--eS);
  border-top: 1px solid var(--gC);
}

.producto-lista__titulo{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 600;
  margin: 0 0 var(--eS);
}

.producto-lista__items{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
}

.producto-lista__item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fXS);
  line-height: var(--lhXS);
}

.producto-lista__item--vacio{ font-style: italic; color: var(--g2); }

.producto-lista__quitar{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-decoration: underline;
  color: var(--g2);
}

.producto-lista__quitar:hover{ color: var(--r); }

.producto-resumen .precioFormato{
  margin: 0;
  padding: var(--eXS) 0;
  line-height: 1;
}

.producto-resumen .precioFormato sup{ top: -0.25em; }

@media (min-width: 501px){
  .cta__fila--botones{
    width: fit-content;
    flex-direction: row;
    align-items: flex-start;
  }
  .cta__fila--botones .boton-principal,
  .cta__fila--botones .boton-secundario{ width: auto; }
  .cta__fila--cantidad{ width: fit-content; }
  .producto-resumen .precioFormato{ padding: var(--eS) 0; }
}

/* ── CTA >=501px:
   [stepper][Añadir]      [Total]
   [Guardar]        [Ver carrito]
── */
@media (min-width: 501px){
  .cta__fila-principal{
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
  }
  .cta__cantidad{ grid-column: 1; grid-row: 1; }
  .cta__anadir{ grid-column: 2; grid-row: 1; }
  .cta__total{ grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .cta__guardar{ grid-column: 1 / 3; grid-row: 2; }
  .cta__ver-carrito{ grid-column: 3; grid-row: 2; justify-self: end; }
}

@media (min-width: 769px){
  .producto-layout{
    flex-direction: row;
    gap: var(--eXL);
  }
  .producto-media{ flex: 1 1 60%; }
  .producto-info{ flex: 1 1 40%; }

  .producto-media--detalle{ display: block; margin-top: var(--eL); }
  .producto-media--detalle--mobile,
  .producto-media--detalle--mobile.docs--mobile{ display: none; }

  .producto-especificaciones__term{ text-wrap: balance; }

  /* CTA 769px: vuelve a móvil (3 líneas) */
  .cta__fila-principal{
    grid-template-columns: 1fr auto;
  }
  .cta__cantidad{ grid-column: 1; grid-row: 1; }
  .cta__total{ grid-column: 2; grid-row: 1; }
  .cta__anadir{ grid-column: 1; grid-row: 2; }
  .cta__ver-carrito{ grid-column: 2; grid-row: 2; justify-self: end; }
  .cta__guardar{ grid-column: 1 / -1; grid-row: 3; }
}

@media (min-width: 1025px){
  .producto-layout{ gap: var(--eXL); }
  .chip-miniatura{ width: 50px; height: 50px; }
  .producto-especificaciones__lista{ column-gap: var(--eM); }
  .producto-especificaciones__term{ text-wrap: nowrap; }
}

/* CTA >=1400px: horizontal como >=501px */
@media (min-width: 1400px){
  .cta__fila-principal{
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
  }
  .cta__cantidad{ grid-column: 1; grid-row: 1; }
  .cta__anadir{ grid-column: 2; grid-row: 1; }
  .cta__total{ grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .cta__guardar{ grid-column: 1 / 3; grid-row: 2; }
  .cta__ver-carrito{ grid-column: 3; grid-row: 2; justify-self: end; }
}


/* ── Cuenta ── */
.cuenta{ margin-top: var(--eXL); }

.cuenta h1{
  margin: 0 0 var(--eM);
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  font-weight: 600;
}

.cuenta-acciones, .cuenta-acciones-top{
  display: flex;
  gap: var(--eS);
  flex-wrap: wrap;
  margin-top: var(--eM);
}

.lbt-enlace{
  border-top: 1px dotted var(--rC2);
  margin-top: var(--eM);
  padding: var(--eM) 0;
}

.cuenta-cabecera{
  display: flex;
  align-items: center;
  gap: var(--eM);
  padding: var(--eM);
  border-radius: var(--rM);
  background: var(--gC2);
  margin-bottom: var(--eL);
}

.cuenta-avatar{
  width: var(--e2XL);
  height: var(--e2XL);
  border-radius: var(--rB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fL);
  line-height: 1;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.78);
  flex: 0 0 auto;
}

.cuenta-identidad{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
  flex: 1 1 auto;
}

.cuenta-nombre{
  margin: 0;
  font-weight: 700;
  font-size: var(--fM);
  line-height: var(--lhM);
}

.cuenta-email, .cuenta-tipo{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
}

@media (max-width: 860px){
  .cuenta-layout{ grid-template-columns: 1fr; }
}

.resumen-item{
  list-style-type: none;
  padding: var(--eM);
}

.resumen-item:not(:last-of-type){ border-bottom: 1px dotted var(--gC); }
.lateral-icono-enlace:last-child{ border: 0; }

.linea-tabla{
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--eS);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.linea-tabla th, .linea-tabla td{
  padding: var(--eS) var(--eM);
  border-bottom: 1px solid var(--gC2);
  text-align: left;
  color: var(--gM);
}

.linea-tabla thead th{ font-weight: 500; color: var(--gO); }

.cuenta-resumen-link{ display: flex; align-items: center; gap: var(--eS); }
.cuenta-menu-icono{ width: 1em; height: 1em; flex: 0 0 auto; opacity: .9; }
.cuenta-titulo{ display: flex; align-items: center; gap: var(--eS); }
.cuenta-titulo-icono{ width: 1.5em; height: 1.5em; flex: 0 0 auto; opacity: .95; }

.linea-bloque-texto .cuenta-dato{ color: var(--gO); }
.lineas #herramientas .linea-bloque-texto:first-of-type{ margin-bottom: var(--eXL); }
.cuenta-titulo-texto{ color: var(--gO); }
.linea-bloque-titulo svg{ color: white; }

.bloque[data-js="pedido-detalle"],
.bloque[data-js="cliente-detalle"],
.bloque .bloque{
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  margin-top: var(--eL);
}


/* ==========================================================================
   16) bxSlider OVERRIDES — compatibilidad con nuevo diseño
   ========================================================================== */

/* Reset bxSlider defaults para que se integre con el diseño */
.bx-wrapper{
  position: relative;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

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

.bx-viewport{
  overflow: hidden;
  position: relative;
  height: auto !important;
}

/* Hero: bxSlider fade mode necesita height fija, no auto */
.home-hero .bx-viewport{
  height: clamp(13rem, 38vh, 13rem) !important;
}
@media (min-width: 769px){
  .home-hero .bx-viewport{
    height: clamp(250px, calc(218px + 12.9vw), 500px) !important;
  }
}

/* Hero bxSlider: sin controles por defecto, usamos nuestras flechas */
.home-hero .bx-wrapper{
  max-width: 100% !important;
  margin: 0 !important;
}

.home-hero .bx-wrapper .bx-controls{
  display: none;
}

/* Sliders de cards: horizontal, sin pager */
.slider .bx-wrapper .bx-pager{
  display: none;
}

.slider .bx-wrapper .bx-controls-direction{
  display: block;
}
.slider .bx-wrapper .bx-prev,
.slider .bx-wrapper .bx-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: var(--e2XL);
  height: var(--e2XL);
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rB);
  cursor: pointer;
  text-indent: initial;
  overflow: visible;
  transition: all .2s ease;
  font-size: 0;
  line-height: 0;
}
.slider .bx-wrapper .bx-prev{ left: 0; opacity: .9; }
.slider .bx-wrapper .bx-next{ right: 0; opacity: .9; }
.slider .bx-wrapper .bx-prev:hover,
.slider .bx-wrapper .bx-next:hover{
  background: var(--rC2);
  border-color: var(--rC);
}
.slider .bx-wrapper .bx-prev .icono,
.slider .bx-wrapper .bx-next .icono{
  width: var(--eM);
  height: var(--eM);
  display: block;
  fill: var(--rC);
}
.slider .bx-wrapper .bx-prev:hover .icono,
.slider .bx-wrapper .bx-next:hover .icono{ fill: var(--g); }
.slider .bx-wrapper .bx-prev .icono{ transform: scaleX(-1); }

.slider .bx-wrapper{
  max-width: 100% !important;
}

/* Forzar que bxSlider no añada max-width */
.bx-wrapper .bx-viewport{
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  left: 0;
}


/* ==========================================================================
   17) RED DE VENTAS · MOBILE FIRST
   ========================================================================== */

/* --- Base (móvil < 500px) --- */

.tabs-asociados{ margin-top: var(--eXL); }
.tabs-asociados input[type="radio"]{ display: none; }
.tabs-asociados .tab{ display: flex; gap: 0; align-items: flex-end; }

.tabs-asociados .tab label{
  font-size: var(--fL);
  line-height: var(--lhL);
  padding: var(--eM);
  background: white;
  border: 1px solid var(--gC);
  border-bottom: none;
  border-radius: var(--rP) var(--rP) 0 0;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}

.tabs-asociados .contenido{
  border: 1px solid var(--gC);
  border-radius: var(--rM);
  border-top-left-radius: 0;
  background: white;
  overflow: visible;
}

.tabs-asociados .contenido > div{ display: none; }

#tab-1:checked ~ .tab label:nth-child(1),
#tab-2:checked ~ .tab label:nth-child(2){ font-weight: 600; }

#tab-1:checked ~ .tab label:nth-child(1)::after,
#tab-2:checked ~ .tab label:nth-child(2)::after{
  content: "";
  position: absolute;
  left: 1px; bottom: -3px;
  width: calc(100% - 2px); height: 5px;
  background: white;
}

/* Móvil: ocultar tab mapa, forzar listado siempre */
#tab-1 ~ .tab label:nth-child(1){ display: none; }
#tab-1:checked ~ .contenido > .contenido-mapa,
.contenido-mapa{ display: none !important; }
.contenido-listado{ display: flex !important; }
#tab-2:checked ~ .contenido > .contenido-listado{ display: flex !important; }

/* Mapa (oculto en móvil, definido para desktop) */
.contenido-mapa{
  display: flex;
  gap: var(--eXL);
}

.mapa-busqueda{
  flex: 1.5 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.mapa-wrapper{
  position: relative;
  flex: 1 0 auto;
  min-height: 260px;
}
.mapa-wrapper svg{ width: 100%; height: auto; display: block; }

.selector-prov-mun p{
  margin: 0 0 var(--eL);
  font-size: var(--fS); line-height: var(--lhS); color: var(--gO);
}
.selector-prov-mun span{ font-weight: 600; }
.selector-prov{ display: flex; flex-direction: column; gap: var(--eL); }
.selector-prov__control{ display: block; }

/* Resultados provincia */
.resultados-busqueda{
  margin-top: var(--eXL);
  display: flex; flex-direction: column; gap: var(--eL);
  flex: 1 0 0;
  padding: var(--eS) var(--eL);
}

.grid-asociados{ display: flex; flex-direction: column; gap: var(--eL); }
.chips-distribuidores{ display: flex; gap: var(--eM); flex-wrap: wrap; align-items: center; }

/* Tarjeta asociado */
.tarjeta-asociado{
  border-top: 1px solid var(--gC);
  padding-top: var(--eL);
  display: flex; flex-direction: column; gap: var(--eL);
  margin: 0 auto;
}
.tarjeta-asociado[hidden]{ display: none !important; }

.tarjeta-asociado .cabecera{
  display: flex; flex-direction: column; gap: var(--eL);
  border: none; box-shadow: none;
}
.logo-wrap img, .asoc-logo{ width: 100px; height: auto; flex-shrink: 0; }

.datos-asociado h4, .asoc-nombre{
  margin: 0;
  font-size: var(--fXL); line-height: var(--lhXL);
  font-weight: 400; text-transform: uppercase; color: var(--gO);
}
.tarjeta-asociado .asoc-meta a{ word-break: break-word; }

/* Sedes */
.sedes{
  display: flex; flex-direction: column;
  gap: var(--eM); margin-top: var(--eL);
}
.contenido-mapa .sedes{ flex-direction: column; }

.sede{
  max-width: 100%; width: 100%; flex: 1 1 auto;
  padding: var(--eS); margin-bottom: var(--eL);
  display: flex; flex-direction: column; gap: var(--eXS);
  border: 1px solid var(--rC2); border-radius: var(--rP); background: white;
}
.sede h5{ margin: 0; color: var(--r); font-size: var(--fM); line-height: var(--lhM); font-weight: 400; }
.sede p{ margin: 0; color: var(--g); font-size: var(--fS); line-height: var(--lhS); }
.sede-sub{ color: var(--gO); margin-top: var(--eXS); margin-bottom: var(--eS); font-size: var(--fS); line-height: var(--lhS); }

/* Listado */
.contenido-listado{
  padding: var(--eM);
  display: flex; flex-direction: column; gap: var(--eL);
}
#listadoDistribuidores{ display: grid; gap: var(--eXL); }
#listadoDistribuidores .chips-asociados{ display: none; }
.rv-movil-tools{ display: block; }

.intro-metricas{ display: none; }
.num-asoc strong{ font-size: var(--f3XL); line-height: var(--lh3XL); }
.num-sedes strong{ font-size: var(--fXL); line-height: var(--lhXL); font-weight: 500; }
#listadoDistribuidores .chip{ padding: var(--eXS) var(--eL); font-size: var(--fXS); }

/* Sin asociado */
.noAsociado p{ margin: 0; padding-bottom: var(--eS); color: var(--g); font-size: var(--fS); line-height: var(--lhS); }
.lista-vecinas{ margin: 0; padding-left: var(--eL); }
.lista-vecinas li{ margin-bottom: var(--eS); }
.lista-vecinas li::marker{ color: var(--rC); }

/* SVG mapa provincias */
.provinciaSi{ fill: var(--rC); fill-opacity: .7; stroke: white; cursor: pointer; transition: fill .2s ease, fill-opacity .2s ease; }
.provinciaSi:hover{ fill-opacity: 1; }
.provinciaSi.selected{ fill: var(--r); fill-opacity: .8; }
.provinciaNo{ fill: var(--rC); fill-opacity: .3; stroke: white; cursor: pointer; transition: fill-opacity .2s ease; }
.provinciaNo:hover{ fill-opacity: .4; }
.provinciaOtro{ fill: var(--gC); stroke: white; }
svg .marco{ fill: white; stroke: var(--gC); stroke-width: .5; }

#textos text{
  paint-order: stroke fill; stroke: rgba(255,255,255,.9); stroke-width: 2px; stroke-linejoin: round;
  display: none; fill: var(--gO); font-size: var(--fS); line-height: var(--lhS);
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
#textos text.visible{ display: block; opacity: 1; }
#textos text.textoNo{ opacity: .8; }

.cta-redVentas{ display: flex; width: 100%; flex-direction: row-reverse; }

.rv-tooltip{
  position: absolute; top: var(--eS); right: 10%; transform: translateX(-50%); z-index: 2;
  background: white; border: 1px solid var(--gC); border-radius: var(--rP);
  padding: var(--eXS) var(--eS); font-size: var(--fS); line-height: var(--lhS); color: var(--gO);
  pointer-events: none; white-space: nowrap;
}

.rv-listado-prov{ display: block; margin-bottom: var(--eL); }
.rv-listado-prov .selector-prov-mun p{ margin: 0 0 var(--eL); }
.rv-listado-prov .filtro-chip-panel{ max-height: 55vh; overflow: auto; }

/* --- min-width: 501px (phablet) --- */
@media (min-width: 501px){
  #listadoDistribuidores .chips-asociados{ display: flex; flex-wrap: wrap; gap: var(--eS); justify-content: center; align-items: center; }
  .intro-metricas{ display: block; font-size: var(--fL); line-height: var(--lhL); text-align: center; color: var(--gO); }
  .tarjeta-asociado{ border-top: 1px solid var(--gC3); }
  .contenido-listado{ padding: var(--eL); }
  .sedes{ flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .sede{ max-width: 400px; width: auto; flex: 0 0 auto; }
  .tabs-asociados .tab label{ font-size: var(--fXL); line-height: var(--lhXL); padding: var(--eL); }
}

/* --- min-width: 769px (tablet/desktop: mapa visible) --- */
@media (min-width: 769px){
  .tabs-asociados .tab{ gap: var(--eXS); }
  .tabs-asociados .contenido{ overflow: hidden; }
  #tab-1 ~ .tab label:nth-child(1){ display: inline-block; }
  #tab-1:checked ~ .contenido > .contenido-mapa{ display: flex !important; }
  .contenido-listado{ display: none !important; padding: var(--eXL); }
  #tab-2:checked ~ .contenido > .contenido-listado{ display: flex !important; }
  .rv-listado-prov{ display: none; }
}


/* ==========================================================================
   18) ZONA DE CATA · MOBILE FIRST
   ========================================================================== */

/* --- Base (móvil) --- */

body[data-pagina="zonaCata"] .principal{
  background: var(--rC3);
  border-top: 1px solid var(--rC2);
  border-radius: 0 0 var(--rM) var(--rM);
  padding: var(--eL);
}

.ruta-ZC{ max-width: 1200px; margin: 0 auto; padding-top: var(--eXL); }

.articuloZC .hero-titulo{
  font-weight: 500;
  text-underline-offset: 15px;
  text-decoration: underline var(--rC2) double 4px;
}
.articuloZC .hero-frase{ padding-top: var(--eL); }
.articuloZC .hero-titulo, .articuloZC .hero-frase{ text-align: center; }

/* Hero listado */
.zc-hero{ position: relative; text-align: center; padding: var(--eL) 0 var(--eM); }
.zc-hero__logo{ position: absolute; width: 60px; left: calc(50% - var(--eXL)); top: -40%; display: block; }
.ZC-titulo{ margin: var(--eS) 0 0; padding-bottom: 0; }
.zc-hero__lead{ margin: var(--eS) auto 0; max-width: 72ch; opacity: .85; font-size: var(--fS); line-height: var(--lhS); }

/* Filtros */
.zc-filtros{ margin: 0 0 var(--eL) 0; }
.zc-filtros__bar{ display: flex; justify-content: center; }
.zc-filtros__bar .contenedor-filtros-chip{ justify-content: center; }
.zc-filtros__estado{ margin-top: var(--eS); font-size: var(--fS); line-height: var(--lhS); color: var(--g2); opacity: .9; text-align: center; }
.zc-empty{ opacity: .8; font-size: var(--fS); line-height: var(--lhS); }

/* Grid listado */
.zc-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--eL); }

/* Artículo hero */
.zc-hero-layout{ position: relative; margin-top: var(--eL); }
.zc-hero-layout .hero-titulo{ margin: 0 0 var(--eS); }
.zc-hero-layout .hero-frase{ margin: 0 0 var(--eL); opacity: .9; }
.zc-hero-media{ margin: 0 0 var(--eXL); }
.zc-hero-media img{ width: 100%; height: auto; display: block; border-radius: var(--rM); }

/* Meta (fecha + lectura) */
.zc-meta{
  position: static; margin-top: var(--eS); border-radius: var(--rP);
  display: inline-flex; gap: var(--eS); align-items: center;
  background: white; padding: var(--eXS) var(--eM);
  font-size: var(--fXS); line-height: var(--lhXS); color: var(--g2);
  box-shadow: var(--shadowC);
}

/* Índice móvil */
.zc-indice-movil{
  display: block; margin: var(--eL) auto 0; width: min(980px, 92vw);
}
.zc-indice-movil__summary{
  cursor: pointer; list-style: none;
  padding: var(--eS) var(--eM); border: 1px solid var(--gC); border-radius: var(--rP);
  background: white; font-size: var(--fS); line-height: var(--lhS);
}
.zc-indice-movil__summary::-webkit-details-marker{ display: none; }

/* Índice desktop (aside) */
.zc-indice{ display: flex; flex-direction: column; gap: var(--eXS); margin-bottom: var(--eXL); }
.zc-indice h3{ margin: 0 0 var(--eS); font-size: var(--fM); font-weight: 600; }
.zc-indice__link{
  display: block;
  padding: var(--eXS) 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid var(--gC2);
}
.zc-indice__link:hover{ color: var(--r); }

/* Relacionados (aside) */
.zc-rel{ margin-bottom: var(--eXL); }
.zc-rel__titulo{ margin: 0 0 var(--eM); font-size: var(--fM); font-weight: 600; }
.zc-rel__lista{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
}
.zc-rel__lista a{
  display: block;
  padding: var(--eS) 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--r);
  text-decoration: none;
  border-bottom: 1px dotted var(--gC2);
}
.zc-rel__lista a:hover{ text-decoration: underline; }
.zc-rel__cta{
  display: inline-block;
  margin-top: var(--eM);
  font-size: var(--fS);
  font-weight: 600;
  color: var(--r);
  text-decoration: none;
}
.zc-rel__cta:hover{ text-decoration: underline; }

/* Layout artículo: columna única en móvil */
.zc-art-layout{
  display: flex; flex-direction: column;
  gap: var(--eXL); width: min(980px, 92vw); margin: 0 auto; align-items: flex-start;
}
.zc-art-cuerpo{ flex: 2.5 1 0; min-width: 0; }
.zc-art-layout .resumen{ flex: .75 1 0; min-width: 0; }

/* Bloques */
.zc-bloque{ padding-right: 0; border-right: 0; }
.zc-bloque:not(:first-of-type){ padding-top: var(--eXL); }
.zc-bloque__title{ font-size: var(--f2XL); line-height: var(--lh2XL); font-weight: 300; margin: 0 0 var(--eL); color: var(--gO); }

/* Media (texto + figura) — columna en móvil */
.zc-bloque__media{ display: flex; flex-direction: column; gap: var(--eXL); align-items: flex-start; }
.zc-bloque__figura{ flex: 1 1 0; margin: 0; max-width: 300px; align-self: center; }
.zc-bloque__figura img{ width: 100%; height: auto; display: block; border-radius: var(--rP); }
.zc-bloque__figura figcaption{ margin-top: var(--eS); font-size: var(--fXS); line-height: var(--lhXS); text-align: center; color: var(--gM); }
.zc-bloque__col{ flex: 1.5 1 0; display: flex; flex-direction: column; gap: var(--eL); color: var(--g); min-width: 0; }
.zc-bloque__texto p{ margin: 0; padding-bottom: var(--eM); font-size: var(--fS); line-height: var(--lhS); }
.zc-bloque__texto p strong{ font-weight: 600; color: var(--gO); }

/* Lista bloque */
.zc-bloque__lista{ display: flex; flex-direction: column; gap: var(--eS); padding-left: var(--eL); margin: 0; }
.zc-bloque__lista li::marker{ color: var(--rC); }
.zc-bloque__lista .resaltar{ color: var(--gO); font-weight: 600; }

/* Resumen final */
.zc-resumen{ background: var(--gC2); margin-top: var(--eXL); padding: var(--eXL); border-radius: var(--rP) var(--rP) 0 0; }
.zc-resumen h2{ margin: 0; font-size: var(--f2XL); line-height: var(--lh2XL); border-bottom: 2px solid white; padding-bottom: var(--eS); }
.zc-resumen p:first-of-type{ margin-top: var(--eL); }
.zc-resumen p{ margin: 0; padding-bottom: var(--eL); font-size: var(--fS); line-height: var(--lhS); }
.zc-resumen p span{ font-weight: 700; color: var(--gO); }

/* Relacionados (aside) */
.zc-rel{ margin-top: var(--eL); border-top: 2px solid white; padding-top: var(--eL); }
.zc-rel h3{ margin: 0 0 var(--eL); font-weight: 600; }
.zc-rel__cta{ padding-top: var(--eXL); }
.zc-rel__footer{ margin: var(--eM) 0; padding-top: var(--eM); border-top: 1px solid rgba(0,0,0,.08); }
.zc-aside__footer{ margin-top: var(--eL); }

/* Cierre editorial */
.zc-art-cierre__acciones{ margin: var(--eL) 0; display: flex; justify-content: space-between; gap: var(--eM); flex-wrap: wrap; align-items: center; }
.zc-art-cierre__ico{ fill: var(--rC); width: 1em; height: 1em; transform: scale(.7); transform-origin: center; }
.zc-art-cierre__ico--izq{ transform: rotate(180deg) scale(.7); transform-origin: center; }

/* --- min-width: 741px (artículo: media en fila, meta absoluta) --- */
@media (min-width: 741px){
  body[data-pagina="zonaCata"] .principal{ padding: revert; }
  .zc-bloque__media{ flex-direction: row; }
  .zc-bloque__figura{ max-width: none; align-self: flex-start; }
  .zc-meta{
    position: absolute; left: 0; bottom: var(--eM);
    margin-top: 0; border-radius: 0 var(--rP) var(--rP) 0;
  }
}

/* --- min-width: 981px (artículo: layout 2 columnas, índice oculto) --- */
@media (min-width: 981px){
  .zc-art-layout{ flex-direction: row; }
  .zc-bloque{ padding-right: var(--eXL); border-right: 2px dotted var(--rC2); }
  .zc-indice-movil{ display: none; }
}