/* ==========================================================================
   Chapinya — sistema de diseño
   Negro del logo · ámbar de la flecha · y los colores del ave (turquesa,
   verde, rojo) como acentos. Fondo claro para que las fotos de producto, que
   vienen con fondo blanco, no queden flotando en un recuadro.
   Misma estructura que las otras tiendas del motor, con la marca propia.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* color */
  --marca: #F5AC0F;          /* la flecha del logo */
  --marca-hover: #E19E0E;
  --marca-tenue: #FEF3DB;
  --turquesa: #1597B3;       /* cabeza del ave */
  --verde: #7BB144;
  --rojo: #E0452F;
  --negro: #000000;
  --tinta: #121212;
  --tinta-2: #5C5C5C;
  --tinta-3: #8A8A8A;
  --blanco: #FFFFFF;
  --papel: #F5F5F3;
  --linea: #E3E3DF;

  /* tipografía */
  /* Una sola familia —Poppins— y la jerarquía la hacen los PESOS: 800 en los
     títulos, 600 en etiquetas y botones, 400 en el texto corrido. Con dos
     familias distintas el sitio se veía de dos marcas. */
  --display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* espaciado */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  --ancho: 1320px;
  --radio: 10px;
  --radio-marca: 0 0 26px 0;   /* el motivo del logo */

  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --sombra-alta: 0 4px 12px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.12);
}

/* --------------------------------------------------------- base --------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------ tipografía ------ */

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
}

.etiqueta {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* --------------------------------------------------------- botones ------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 14px var(--s5);
  border: 2px solid var(--negro);
  border-radius: 4px;
  background: var(--marca);
  color: var(--negro);
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.boton:hover { background: var(--marca-hover); transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--negro { background: var(--negro); color: var(--blanco); }
.boton--negro:hover { background: #242424; }

.boton--linea { background: transparent; }
.boton--linea:hover { background: var(--marca); }

.boton--bloque { width: 100%; }

.boton[disabled] {
  background: var(--papel);
  border-color: var(--linea);
  color: var(--tinta-3);
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Barra superior
   ========================================================================== */

.cinta {
  background: var(--negro);
  color: var(--blanco);
  font-size: .8125rem;
  font-weight: 500;
}
.cinta__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 38px;
}
.cinta__envios { display: flex; align-items: center; gap: var(--s2); }
.cinta__enlaces { display: flex; align-items: center; gap: var(--s5); }
.cinta a:hover { color: var(--marca); }
.cinta__wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cinta__wa:hover { color: var(--marca); }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  padding-block: var(--s4);
}

.logo { display: inline-block; line-height: 0; }
/* El logo de la marca, tal cual lo entregó la clienta: el círculo amarillo con
   la bolsita en la O. Antes había un bloque de texto armado con CSS que se le
   parecía; ya no hace falta, pero los estilos quedan porque el correo y los
   productos sin foto siguen usando la misma caja. */
.logo__img {
  display: block;
  width: auto;
  height: 78px;
  transition: transform .15s ease;
}
.logo:hover .logo__img { transform: scale(1.04); }

.logo__bloque {
  display: block;
  padding: 9px var(--s4) 11px;
  background: var(--marca);
  border-radius: var(--radio-marca);
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: .86;
  transition: background-color .15s ease;
}
.logo:hover .logo__bloque { background: var(--marca-hover); }
.logo__bloque span { display: block; font-style: italic; }

/* buscador */
.buscador { position: relative; display: flex; }
.buscador__campo {
  flex: 1;
  min-width: 0;
  padding: 14px var(--s5);
  border: 2px solid var(--negro);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  font: inherit;
  background: var(--blanco);
}
.buscador__campo::placeholder { color: var(--tinta-3); }
.buscador__campo:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--marca); }
.buscador__enviar {
  padding-inline: var(--s5);
  border: 2px solid var(--negro);
  border-radius: 0 4px 4px 0;
  background: var(--marca);
  display: grid;
  place-items: center;
}
.buscador__enviar:hover { background: var(--marca-hover); }

/* acciones */
.acciones { display: flex; align-items: center; gap: var(--s6); }
.accion {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: .8125rem;
  font-weight: 600;
}
.accion:hover { color: var(--tinta-2); }
.accion__conteo {
  position: absolute;
  top: -7px; left: 13px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--marca);
  border: 1.5px solid var(--negro);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
}
.accion__etiqueta { display: grid; line-height: 1.15; }
.accion__etiqueta small { color: var(--tinta-2); font-weight: 500; }
.accion__etiqueta strong { font-weight: 800; }

/* ==========================================================================
   Navegación amarilla
   ========================================================================== */

.nav {
  background: var(--marca);
  border-bottom: 2px solid var(--negro);
}
.nav__fila { display: flex; align-items: stretch; gap: var(--s6); }

.nav__catalogo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  margin-left: calc(var(--s5) * -1);
  background: var(--negro);
  color: var(--blanco);
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  min-width: 290px;
}
.nav__catalogo:hover { background: #1c1c1c; }

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin: 0; padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nav__enlaces a { padding-block: var(--s4); display: inline-block; }
.nav__enlaces a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav__destacado { color: var(--negro); }
.nav__destacado::after {
  content: 'HOY';
  margin-left: 6px;
  padding: 2px 5px;
  background: var(--negro);
  color: var(--marca);
  font-size: .625rem;
  border-radius: 3px;
  vertical-align: 2px;
}

/* ==========================================================================
   Hero — mega menú + banners
   ========================================================================== */

.hero { padding-block: var(--s6) var(--s8); }
.hero__reja {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

/* --- mega menú --- */
.menu {
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
}
.menu__lista { margin: 0; padding: 0; list-style: none; }
.menu__item { position: relative; border-bottom: 1px solid var(--linea); }
.menu__item:last-child { border-bottom: 0; }

.menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  font-weight: 600;
  font-size: .9375rem;
  transition: background-color .12s ease;
}
.menu__enlace:hover,
.menu__item:focus-within .menu__enlace { background: var(--marca); }
.menu__conteo { color: var(--tinta-3); font-size: .8125rem; font-weight: 500; }
.menu__item:hover .menu__conteo,
.menu__item:focus-within .menu__conteo { color: var(--tinta); }

.menu__panel {
  position: absolute;
  top: -2px; left: 100%;
  z-index: 20;
  min-width: 260px;
  padding: var(--s5);
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: 0 var(--radio) var(--radio) var(--radio);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.menu__item:hover .menu__panel,
.menu__item:focus-within .menu__panel {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.menu__panel h3 {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: 1rem;
}
.menu__sublista { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.menu__sublista a {
  display: flex; justify-content: space-between; gap: var(--s5);
  padding: 6px var(--s2);
  border-radius: 4px;
  font-size: .9375rem;
}
.menu__sublista a:hover { background: var(--marca-tenue); }
.menu__sublista span { color: var(--tinta-3); font-size: .8125rem; }

/* --- tarjeta de ayuda, bajo el menú --- */
.ayuda {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  background: var(--papel);
}
.ayuda p { margin: var(--s2) 0 var(--s4); font-size: .9375rem; color: var(--tinta-2); }
.ayuda .boton { padding-block: 11px; font-size: .8125rem; }

/* --- banners --- */
.banners { display: grid; gap: var(--s5); }
.banners__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }

.destacado {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  min-height: 420px;
  padding: var(--s7);
  background: var(--marca);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  overflow: hidden;
}
.destacado__texto { position: relative; z-index: 2; }
.destacado__eyebrow {
  display: inline-block;
  margin-bottom: var(--s4);
  padding: 6px var(--s3);
  background: var(--negro);
  color: var(--blanco);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.destacado__titulo {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  max-width: 12ch;
  margin-bottom: var(--s3);
}
.destacado__bajada {
  max-width: 34ch;
  margin: 0 0 var(--s5);
  font-weight: 500;
}
.destacado__figura {
  position: relative;
  align-self: stretch;
  margin: 0;
  /* las fotos traen fondo blanco propio: en vez de disimularlo, lo hacemos
     deliberado con una tarjeta. Fundirlo con blend falsea el color real. */
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  overflow: hidden;
}
.destacado__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* la caja de precio: el gesto que viene de sus piezas */
.precio-caja {
  display: inline-block;
  margin-bottom: var(--s5);
  background: var(--negro);
  color: var(--blanco);
  padding: var(--s3) var(--s5) var(--s4);
}
.precio-caja__rotulo {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.precio-caja__monto {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: .9;
  color: var(--marca);
}
.precio-caja__monto sup {
  font-size: .375em;
  vertical-align: super;
  margin-left: 2px;
}
.precio-caja__nota {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 600;
  color: #C9C9C9;
}

/* banners secundarios */
.mini {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 210px;
  padding: var(--s5);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  background: var(--papel);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mini:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.mini--negro { background: var(--negro); color: var(--blanco); }
.mini__titulo { font-size: 1.625rem; max-width: 8ch; position: relative; z-index: 2; }
.mini__pie { position: relative; z-index: 2; font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
.mini__pie::after { content: ' →'; }
.mini__figura {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%);
          mask-image: linear-gradient(to right, transparent, #000 42%);
}
.mini--negro .mini__pie { color: var(--marca); }

/* ==========================================================================
   Secciones
   ========================================================================== */

.seccion { padding-block: var(--s8); }
.seccion--papel { background: var(--papel); }

.seccion__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--negro);
}
.seccion__titulo { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.seccion__intro { margin: var(--s2) 0 0; color: var(--tinta-2); font-weight: 500; }

/* la caja del logo, reusada como marcador de sección */
.marcador {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 5px var(--s4) 7px;
  background: var(--marca);
  border-radius: var(--radio-marca);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.seccion__vertodo {
  flex: none;
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--marca);
  padding-bottom: 2px;
}
.seccion__vertodo:hover { border-bottom-color: var(--negro); }
.seccion__vertodo::after { content: ' →'; }

/* ==========================================================================
   Categorías
   ========================================================================== */

.categorias {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s5);
}
/* Amarillas siempre, no solo al pasar el mouse: en el celular no hay mouse y
   las categorías quedaban blancas, perdidas entre las tarjetas de producto. Lo
   pidió la clienta. Al pasar por encima se levantan y dejan una sombra negra
   dura, que es el mismo trazo de los bordes de la marca. */
.categoria {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--marca);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  text-align: center;
  color: var(--negro);
  transition: transform .16s ease, box-shadow .16s ease;
}
.categoria:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--negro); }
.categoria__figura {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blanco);   /* el círculo blanco separa la foto del amarillo */
  margin-inline: auto;
  width: 72%;
}
.categoria__figura img { width: 100%; height: 100%; object-fit: cover; }
.categoria__nombre { font-family: var(--display); font-size: 1.0625rem; line-height: 1.05; }
/* Negro y no gris: el gris sobre amarillo no pasa el contraste mínimo para leer. */
.categoria__conteo { font-size: .8125rem; color: var(--negro); font-weight: 600; opacity: .78; }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

.reja-productos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s5);
}

.producto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.producto:hover {
  border-color: var(--negro);
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}

.producto__figura {
  position: relative;
  aspect-ratio: 1;
  background: var(--blanco);
  overflow: hidden;
}
.producto__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.producto:hover .producto__figura img { transform: scale(1.045); }

.producto__marcas {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 2;
  display: grid;
  gap: 4px;
  justify-items: start;
}
.marca-pill {
  padding: 3px var(--s2);
  background: var(--negro);
  color: var(--blanco);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.marca-pill--variantes { background: var(--marca); color: var(--negro); }
.marca-pill--ultimas { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 1.5px var(--negro); }

.producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s2);
  padding: var(--s4);
}
.producto__categoria {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.producto__nombre {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto__stock { font-size: .75rem; font-weight: 600; color: #1B7A3D; }
.producto__stock--bajo { color: #B45309; }
.producto__stock--cero { color: var(--tinta-3); }

.producto__precio {
  margin-top: auto;
  padding-top: var(--s2);
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
}
.producto__precio small {
  font-family: var(--texto);
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinta-2);
  letter-spacing: .04em;
  display: block;
  margin-bottom: 2px;
}
.producto__precio .q { color: var(--tinta-2); }

.producto .boton { margin-top: var(--s3); padding-block: 11px; }

/* ==========================================================================
   Banner de temporada
   ========================================================================== */

.temporada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s7);
  padding: var(--s8);
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
}
.temporada__titulo { font-size: clamp(2rem, 4vw, 3.25rem); max-width: 14ch; }
.temporada__titulo em { font-style: normal; color: var(--marca); }
.temporada__bajada { max-width: 42ch; color: #D4D4D4; margin: var(--s4) 0 var(--s6); }
.temporada__galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.temporada__galeria img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--blanco);
}

/* ==========================================================================
   Beneficios
   ========================================================================== */

.beneficios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  padding-block: var(--s7);
  border-block: 2px solid var(--negro);
}
.beneficio { display: flex; align-items: flex-start; gap: var(--s4); }
.beneficio__icono {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--marca);
  border-radius: var(--radio-marca);
}
.beneficio h3 { margin: 0 0 2px; font-size: .9375rem; font-weight: 800; }
.beneficio p { margin: 0; font-size: .875rem; color: var(--tinta-2); }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie { background: var(--negro); color: var(--blanco); padding-block: var(--s8) var(--s5); margin-top: var(--s9); }
.pie__reja {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid #2A2A2A;
}
.pie__marca { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.pie__marca img { width: 72px; height: 72px; }
.pie__lema { color: #B8B8B8; max-width: 34ch; margin: 0 0 var(--s5); font-size: .9375rem; }
.pie h3 {
  margin: 0 0 var(--s4);
  font-family: var(--display);
  font-size: 1.0625rem;
  color: var(--marca);
}
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.pie a { color: #D2D2D2; font-size: .9375rem; }
.pie a:hover { color: var(--marca); }
.pie__contacto { display: grid; gap: var(--s3); font-size: .9375rem; color: #D2D2D2; }
.pie__contacto strong { color: var(--blanco); }
.pie__legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-top: var(--s5);
  font-size: .8125rem; color: #8A8A8A;
}

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

.wa-flota {
  position: fixed;
  right: var(--s5); bottom: var(--s5);
  z-index: 80;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--negro);
  color: var(--blanco);
  border-radius: 999px;
  font-weight: 700;
  font-size: .875rem;
  box-shadow: var(--sombra-alta);
  transition: transform .16s ease, background-color .16s ease;
}
.wa-flota:hover { transform: translateY(-3px); background: #1E1E1E; }
.wa-flota svg { flex: none; }

/* ==========================================================================
   Estados de carga
   ========================================================================== */

.esqueleto {
  border-radius: var(--radio);
  background: linear-gradient(100deg, var(--papel) 30%, #ECECE9 50%, var(--papel) 70%);
  background-size: 220% 100%;
  animation: brillo 1.3s linear infinite;
}
.esqueleto--tarjeta { aspect-ratio: .72; }
@keyframes brillo { to { background-position: -120% 0; } }

.aviso {
  padding: var(--s6);
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  text-align: center;
  color: var(--tinta-2);
  grid-column: 1 / -1;
}
.aviso code {
  display: inline-block;
  margin-top: var(--s2);
  padding: 4px var(--s2);
  background: var(--papel);
  border-radius: 4px;
  font-size: .875rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

.menu-movil { display: none; }

@media (max-width: 1100px) {
  .reja-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__reja { grid-template-columns: 1fr; }
  .hero__reja > div:first-child { order: 2; }   /* la ayuda, después del hero */
  .menu { display: none; }
  .ayuda { margin-top: 0; }
  .destacado { min-height: 360px; }
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .pie__reja { grid-template-columns: 1fr 1fr; row-gap: var(--s6); }
}

@media (max-width: 860px) {
  .cabecera__fila { grid-template-columns: auto auto; row-gap: var(--s4); }
  .buscador { grid-column: 1 / -1; order: 3; }
  .logo__nombre { font-size: 1.25rem; }
  .nav__catalogo { min-width: 0; }
  .nav__fila { justify-content: flex-start; }
  .nav__enlaces { display: none; }
  .cinta__enlaces { display: none; }
  .reja-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .destacado { grid-template-columns: 1fr; padding: var(--s5); }
  .destacado__figura { display: none; }
  .temporada { grid-template-columns: 1fr; padding: var(--s6); gap: var(--s6); }
  .seccion { padding-block: var(--s7); }
}

@media (max-width: 620px) {
  .contenedor { padding-inline: var(--s4); }
  .nav__catalogo { margin-left: calc(var(--s4) * -1); }
  .reja-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .banners__par { grid-template-columns: 1fr; }
  .beneficios { grid-template-columns: 1fr; }
  .pie__reja { grid-template-columns: 1fr; }
  .pie__legal { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .acciones .accion__etiqueta { display: none; }
  .logo__img { height: 58px; }
  .seccion__cabeza { flex-direction: column; align-items: flex-start; }
  .wa-flota span { display: none; }
  .wa-flota { padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Carrito lateral
   Se abre al agregar un producto, sin sacar a nadie de donde está.
   El marcado lo inyecta comun.js, así vive en las cuatro páginas.
   ========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.velo.abierto { opacity: 1; visibility: visible; }

.cajon {
  position: fixed;
  top: 0; right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(410px, 100vw);
  height: 100dvh;
  background: var(--blanco);
  border-left: 2px solid var(--negro);
  box-shadow: -8px 0 40px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.cajon.abierto { transform: translateX(0); }

.cajon__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex: none;
  padding: var(--s5);
  border-bottom: 2px solid var(--negro);
}
.cajon__titulo {
  font-family: var(--display);
  font-size: 1.25rem;
  margin: 0;
}
.cajon__titulo span { color: var(--tinta-2); font-family: var(--texto); font-size: .875rem; font-weight: 600; }
.cajon__cerrar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: .875rem;
  font-weight: 700;
}
.cajon__cerrar:hover { background: var(--papel); }

.cajon__cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s5);
}

.cajon__linea {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linea);
}
.cajon__figura {
  aspect-ratio: 1;
  border: 1px solid var(--linea);
  border-radius: 6px;
  overflow: hidden;
  background: var(--blanco);
}
.cajon__figura img { width: 100%; height: 100%; object-fit: cover; }
.cajon__nombre { margin: 0 0 2px; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.cajon__variante { font-size: .75rem; color: var(--tinta-2); margin-bottom: var(--s2); }
.cajon__precio { font-family: var(--display); font-size: 1.125rem; white-space: nowrap; }
.cajon__quitar {
  border: 0; background: none; padding: 0;
  font-size: 1.125rem; line-height: 1; color: var(--tinta-3);
}
.cajon__quitar:hover { color: #B00020; }
.cajon .cantidad { width: fit-content; }
.cajon .cantidad button { width: 30px; font-size: .9375rem; }
.cajon .cantidad input { width: 38px; padding-block: 5px; font-size: .875rem; }

.cajon__pie {
  flex: none;
  padding: var(--s5);
  border-top: 2px solid var(--negro);
  background: var(--papel);
}
.cajon__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s2);
}
.cajon__total strong { font-family: var(--display); font-size: 1.75rem; }
.cajon__envio { margin: 0 0 var(--s4); font-size: .8125rem; color: var(--tinta-2); }
.cajon__acciones { display: grid; gap: var(--s2); }

.cajon__vacio { text-align: center; padding: var(--s8) var(--s4); }
.cajon__vacio p { color: var(--tinta-2); margin: 0 0 var(--s5); }

/* aviso de "agregado" dentro del cajón */
.cajon__aviso {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--marca);
  border-radius: var(--radio-marca);
  font-size: .8125rem;
  font-weight: 700;
}

body.cajon-abierto { overflow: hidden; }

@media (max-width: 620px) {
  .cajon { width: 100vw; border-left: 0; }
}

/* ==========================================================================
   Panel de "Todas las categorías"
   Cuelga del botón negro de la barra amarilla. Vive en las cuatro páginas.
   ========================================================================== */

.nav__fila { position: relative; }

.nav__catalogo[aria-expanded="true"] { background: #1c1c1c; }

.catalogo-panel {
  position: absolute;
  top: 100%;
  left: 0;            /* alineado con el borde del botón negro */
  z-index: 70;
  width: min(320px, 100vw);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra-alta);
}
.catalogo-panel[hidden] { display: none; }

.catalogo-panel__lista { margin: 0; padding: 0; list-style: none; }
.catalogo-panel__grupo { border-bottom: 1px solid var(--linea); }
.catalogo-panel__grupo:last-child { border-bottom: 0; }

.catalogo-panel__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  font-weight: 700;
  font-size: .9375rem;
}
.catalogo-panel__cat:hover { background: var(--marca); }
.catalogo-panel__cat span { color: var(--tinta-3); font-weight: 500; font-size: .8125rem; }
.catalogo-panel__cat:hover span { color: var(--negro); }

.catalogo-panel__subs { margin: 0; padding: 0 var(--s5) var(--s4); list-style: none; display: grid; gap: 1px; }
.catalogo-panel__subs a {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 5px var(--s3);
  border-radius: 4px;
  font-size: .875rem;
  color: var(--tinta-2);
}
.catalogo-panel__subs a:hover { background: var(--marca-tenue); color: var(--negro); }
.catalogo-panel__subs span { font-size: .75rem; color: var(--tinta-3); }

.catalogo-panel__pie {
  display: block;
  padding: var(--s4) var(--s5);
  border-top: 2px solid var(--negro);
  background: var(--papel);
  font-weight: 800;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}
.catalogo-panel__pie:hover { background: var(--marca); }

@media (max-width: 860px) {
  .catalogo-panel { left: 0; width: 100vw; }
}

/* ==========================================================================
   Carrusel de la portada
   Las diapositivas se apilan en la misma celda: así el bloque amarillo no
   cambia de alto al pasar de un producto a otro.
   ========================================================================== */

.carrusel{position:relative}
.carrusel__pista{display:grid}

/* La que sale se va primero y la que entra llega después. Si se cruzaran,
   se leerían los dos titulares superpuestos y no se entiende ninguno. */
.carrusel__pista > .destacado{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility 0s .18s;
}
.carrusel__pista > .destacado.activa{
  opacity:1;
  visibility:visible;
  transition:opacity .3s ease .16s, visibility 0s .16s;
}

/* Los controles viven en una barra inferior propia: a los lados tapaban el
   titular, y contra el borde derecho quedaban debajo del botón de WhatsApp. */
/* Abajo a la DERECHA: a la izquierda quedaban encima del texto y del botón del
   anuncio, que es justo lo que el banner quiere que se lea.

   Y sobre una píldora oscura, porque el fondo ahora es una fotografía distinta
   en cada diapositiva: unos puntos con borde negro se perdían sobre la escena
   de Navidad y unos blancos se perderían sobre la de lluvia. Con la píldora se
   leen siempre, sea cual sea la imagen que suba la clienta. */
.carrusel__controles{
  position:absolute; z-index:4;
  right:var(--s5); bottom:var(--s5); left:auto;
  display:flex; align-items:center; gap:var(--s4);
  padding:7px 12px;
  background:rgba(0,0,0,.55);
  border-radius:999px;
  pointer-events:none;
}
@supports (backdrop-filter: blur(6px)) {
  .carrusel__controles{ background:rgba(0,0,0,.38); backdrop-filter:blur(6px) }
}
.carrusel__controles > *{pointer-events:auto}

.carrusel__puntos{display:flex; gap:var(--s2); align-items:center}
.carrusel__punto{
  width:10px; height:10px; padding:0;
  border:2px solid var(--blanco); border-radius:50%;
  background:transparent; cursor:pointer;
}
.carrusel__punto[aria-current="true"]{background:var(--marca); border-color:var(--marca); transform:scale(1.15)}

.carrusel__flechas{display:flex; gap:var(--s2)}
.carrusel__flecha{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--blanco); color:var(--negro);
  border:2px solid var(--negro); border-radius:50%;
  cursor:pointer; transition:background-color .15s ease;
}
.carrusel__flecha:hover{background:var(--marca)}

/* Cuánto falta para el siguiente. Se apaga cuando el carrusel está detenido. */
.carrusel__avance{
  position:absolute; left:0; bottom:0; height:4px; z-index:4;
  /* Amarillo y no negro: la barra corre sobre la imagen del anuncio, y en las
     escenas oscuras el negro no se veía. */
  width:0; background:var(--marca); border-radius:0 2px 2px 0;
}
.carrusel.detenido .carrusel__avance{opacity:.3}

@media (max-width: 860px){
  .carrusel__controles{right:var(--s4); left:auto; bottom:var(--s4); gap:var(--s3); padding:6px 10px}
  .carrusel__flecha{width:36px; height:36px}
}

@media (prefers-reduced-motion: reduce){
  .carrusel__pista > .destacado{transition:none}
  .carrusel__avance{display:none}
}

/* La cuenta es la tercera acción de la cabecera. En pantallas medianas pierde
   su etiqueta antes que el carrito, que es la que la gente busca; el ícono
   sigue ahí y el buscador no se queda sin espacio. */
@media (max-width: 900px) {
  .acciones .accion[href="/cuenta/"] .accion__etiqueta { display: none; }
}

/* ==========================================================================
   Banners del carrusel

   La imagen es el anuncio completo: acá no va padding, ni fondo amarillo, ni
   borde de más — lo que la clienta diseñó tiene que verse tal cual, de borde a
   borde. Por eso `.destacado--banner` deshace el relleno del hero de texto en
   vez de heredarlo.
   ========================================================================== */

.destacado--banner {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--negro);   /* solo se ve si la imagen no cubre del todo */
  overflow: hidden;
}

.banner__enlace { display: block; color: inherit; }

.banner__figura { display: block; }

.banner__img {
  display: block;
  width: 100%;
  height: auto;
  /* La proporción la fija el CSS y no la imagen: así el carrusel no da un salto
     entre una diapositiva y la siguiente si una viene con otra medida. */
  aspect-ratio: 1600 / 700;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 700px) {
  /* Con la imagen vertical se respeta su forma; si la clienta no la subió, la
     de escritorio se recorta a un rectángulo más alto en vez de quedar como una
     franja fina donde no se lee nada. */
  .banner__img { aspect-ratio: 900 / 1100; }
}

/* ==========================================================================
   Carril de productos

   Los destacados pasan de a uno en vez de amontonarse. Va sobre el scroll
   nativo con scroll-snap: en el celular se desliza con el dedo —que es como la
   gente espera que funcione— y en la computadora las flechas hacen el mismo
   movimiento. Si el JavaScript no carga, queda una fila desplazable: nadie se
   queda sin ver los productos.
   ========================================================================== */

.carrusel-productos { position: relative; }

.carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s5) * 4) / 5);   /* 5 a la vista */
  gap: var(--s5);
  overflow-x: auto;
  /* proximity y no mandatory: con mandatory, cuando la ultima tarjeta no
     llena la pantalla el navegador se niega a dejarla ver entera y el
     carril se siente trabado. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* Sitio para que la sombra de las tarjetas no quede cortada al desplazar. */
  padding: 4px 0 12px;
  /* El margen negativo va SOLO en vertical: en horizontal sacaba el carril
     unos pixeles fuera del contenedor y la primera tarjeta quedaba
     desalineada con el titulo de su fila. */
  margin-block: -4px -12px;
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }
.carril__pieza { scroll-snap-align: start; min-width: 0; }

.carril__flecha {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--blanco);
  color: var(--negro);
  border: 2px solid var(--negro);
  border-radius: 50%;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: background-color .15s ease;
}
.carril__flecha:hover { background: var(--marca); }
.carril__flecha--antes { left: calc(var(--s5) * -1); }
.carril__flecha--luego { right: calc(var(--s5) * -1); }
.carril__flecha[hidden] { display: none; }

@media (max-width: 1100px) {
  .carril { grid-auto-columns: calc((100% - var(--s4) * 3) / 4); gap: var(--s4); }
  .carril__flecha--antes { left: 0; }
  .carril__flecha--luego { right: 0; }
}
@media (max-width: 860px) {
  .carril { grid-auto-columns: calc((100% - var(--s4) * 2) / 3); }
}
@media (max-width: 620px) {
  /* Se ve una tarjeta y el borde de la siguiente: ese pedazo asomando es lo que
     le dice a la gente que hay más y que se puede deslizar. */
  .carril {
    /* Dos tarjetas por pantalla y un pedazo de la tercera asomando. Con una y
       media, la foto ocupaba media pantalla de alto y habia que deslizar cuatro
       veces para ver seis productos. */
    grid-auto-columns: 44%;
    gap: var(--s3);
    /* De borde a borde de la pantalla. Encerrado en el contenedor quedaba
       angosto y la tarjeta siguiente asomaba dentro del margen, que no se
       lee como «hay mas» sino como una tarjeta cortada. */
    margin-inline: calc(var(--s4) * -1);
    padding-inline: var(--s4);
    scroll-padding-left: var(--s4);
  }

    /* Las flechas se quedan tambien en el celular: se desliza con el dedo, pero
       no todo el mundo descubre que se puede, y una flecha visible lo dice sin
       explicar nada. Mas chicas y pegadas al borde. */
    .carril__flecha { width: 34px; height: 34px; top: 28%; }
    .carril__flecha--antes { left: 2px; }
    .carril__flecha--luego { right: 2px; }
}

/* Todas las tarjetas de una fila, a la misma altura.

   En la cuadricula y en el carril la CELDA ya se estira pareja, pero la tarjeta
   de adentro medía lo que medía su contenido: un nombre de dos líneas la hacía
   más alta que la de al lado, y los botones quedaban escalonados. Con la altura
   completa, el precio se pega abajo (ya tiene margin-top:auto) y los botones
   quedan todos en la misma línea. */
.carril__pieza,
.reja-productos > .producto { height: 100%; }
.carril__pieza > .producto { height: 100%; }

/* El renglón del «Desde»: ocupa su sitio aunque esté vacío. */
.producto__precio small { display: block; }


/* ==========================================================================
   Chapinya — lo propio de la marca
   ========================================================================== */

/* La cabecera va en negro: el logo viene sobre negro y así se ve entero, sin
   recortarlo ni redibujarlo. */
.cabecera { background: var(--negro); color: var(--blanco); border-bottom-color: #222; }
.logo__img { height: 58px; }
.cabecera .accion:hover { color: var(--marca); }
.cabecera .accion__etiqueta small { color: #B9B9B9; }
.cabecera .buscador__campo { border-color: var(--blanco); }
.cabecera .buscador__enviar { border-color: var(--blanco); }
.cabecera .accion__conteo { border-color: var(--blanco); color: var(--negro); }
.cinta { background: #111; border-bottom: 1px solid #222; }

.pie__marca img { width: auto; height: 64px; }

/* Las tarjetas de categoría toman los colores del ave, en el orden en que
   aparecen en el plumaje. Texto negro en todas: pasa contraste en los cinco. */
.categorias { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Las categorías de la portada van en carril, no en cuadrícula. El color lo
   pone la PIEZA del carril y no la tarjeta: dentro del carril cada .categoria
   es hija única de su pieza, así que un nth-child sobre la tarjeta les daría
   el mismo color a todas. */
.carrusel-categorias { position: relative; }
.carrusel-categorias .carril { grid-auto-columns: calc((100% - var(--s5) * 5) / 6); }
.carrusel-categorias .carril__pieza > .categoria { height: 100%; align-content: start; }
.categoria:nth-child(5n+2),
.carrusel-categorias .carril__pieza:nth-child(5n+2) .categoria { background: var(--turquesa); }
.categoria:nth-child(5n+3),
.carrusel-categorias .carril__pieza:nth-child(5n+3) .categoria { background: var(--verde); }
.categoria:nth-child(5n+4),
.carrusel-categorias .carril__pieza:nth-child(5n+4) .categoria { background: var(--rojo); }
.categoria:nth-child(5n+5),
.carrusel-categorias .carril__pieza:nth-child(5n+5) .categoria { background: var(--blanco); }

@media (max-width: 1100px) { .carrusel-categorias .carril { grid-auto-columns: calc((100% - var(--s4) * 4) / 5); } }
@media (max-width: 860px)  { .carrusel-categorias .carril { grid-auto-columns: calc((100% - var(--s4) * 2) / 3); } }
@media (max-width: 620px)  { .carrusel-categorias .carril { grid-auto-columns: calc((100% - var(--s4)) / 2); } }

/* Portada sin banners cargados: bloque de bienvenida con el logo. */
.bienvenida {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--s4);
  min-height: 420px;
  padding: var(--s7);
  background: var(--negro);
  color: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  overflow: hidden;
}
.bienvenida__titulo { font-size: clamp(2.25rem, 4.6vw, 3.9rem); max-width: 13ch; }
.bienvenida__titulo em { font-style: normal; color: var(--marca); }
.bienvenida__texto { max-width: 40ch; margin: 0; color: #D0D0D0; font-size: 1.0625rem; }
.bienvenida__acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.bienvenida .boton--linea { color: var(--blanco); border-color: var(--blanco); }
.bienvenida .boton--linea:hover { color: var(--negro); }
.bienvenida__franjas {
  position: absolute; right: -40px; bottom: -40px; width: 300px; height: 300px;
  border-radius: 50%;
  background: conic-gradient(var(--turquesa) 0 20%, var(--verde) 0 40%, var(--marca) 0 60%, var(--rojo) 0 80%, #1E6FB8 0);
  opacity: .9;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%);
}

/* Diapositiva con texto (la que arma el panel en Portada). */
.destacado--texto { background: var(--negro); color: var(--blanco); }
.destacado--texto .destacado__bajada { color: #D0D0D0; }
.destacado--texto .destacado__eyebrow { background: var(--marca); color: var(--negro); }
.destacado--texto .destacado__figura { border-color: #333; }

@media (max-width: 700px) {
  .logo__img { height: 42px; }
  .bienvenida { min-height: 320px; padding: var(--s6) var(--s5); }
  .bienvenida__franjas { width: 180px; height: 180px; right: -50px; bottom: -50px; }
}

/* Hero en una cuadrícula de 2×2: menú | principal arriba, ayuda | recuadros
   abajo. Cada fila comparte alto, así el cuadro de «¿Dudas?» arranca y termina
   a la par de los dos recuadros de categoría. */
.hero__reja {
  grid-template-columns: 290px minmax(0, 1fr);
  grid-template-areas: "menu principal" "ayuda par";
  align-items: stretch;
}
.hero__reja > .menu      { grid-area: menu; }
.hero__principal         { grid-area: principal; display: grid; }
.hero__principal > *     { height: 100%; }
.hero__reja > .ayuda {
  grid-area: ayuda;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__reja > .ayuda .marcador { align-self: flex-start; }
.hero__reja > .banners__par { grid-area: par; }

@media (max-width: 860px) {
  .hero__reja { grid-template-columns: 1fr; grid-template-areas: "principal" "par" "ayuda"; }
}

/* Bloque principal dedicado a una categoría: texto a la izquierda, collage de
   tres productos a la derecha, cada uno en su tarjeta blanca (las fotos traen
   fondo blanco y así se ve deliberado). */
.bienvenida--categoria {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s6);
}
.bienvenida__cuerpo { display: grid; gap: var(--s4); position: relative; z-index: 1; }
.bienvenida__cuerpo .marcador { justify-self: start; }
.bienvenida__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s3);
  aspect-ratio: 1;
  max-height: 340px;
  justify-self: end;
  width: 100%;
}
.bienvenida__collage a {
  display: block;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  border: 2px solid #222;
  transition: transform .16s ease;
}
.bienvenida__collage a:hover { transform: translateY(-3px); }
.bienvenida__collage a:first-child { grid-row: 1 / 3; }
.bienvenida__collage img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }

/* Recuadro «Todo el catálogo»: tres fotos de categorías distintas. */
.mini__collage {
  position: absolute;
  right: var(--s4); top: 50%;
  transform: translateY(-50%);
  display: flex;
  z-index: 1;
}
.mini__collage img {
  width: 104px; height: 104px;
  object-fit: contain;
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: 50%;
  padding: 8px;
  margin-left: -26px;
  box-shadow: var(--sombra);
}

@media (max-width: 1100px) { .mini__collage img { width: 84px; height: 84px; margin-left: -22px; } }
@media (max-width: 700px) {
  .bienvenida--categoria { grid-template-columns: 1fr; }
  .bienvenida__collage { max-height: 220px; justify-self: stretch; }
}

/* Tarjetas de categoría con relieve. Planas se leían como una franja de
   colores: el nombre heredaba peso 400 y nada separaba la tarjeta del fondo.
   Ahora el nombre va en 800 con sombra suave, el conteo como etiqueta, la
   tarjeta con la sombra dura de la marca (la misma del hover, más corta) y el
   círculo de la foto con borde propio. */
.categoria {
  box-shadow: 3px 3px 0 var(--negro);
  padding-bottom: var(--s5);
}
.categoria:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--negro); }
.categoria__nombre {
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .22);
}
.categoria__conteo {
  justify-self: center;
  padding: 3px 12px;
  background: rgba(0, 0, 0, .82);
  color: var(--blanco);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  opacity: 1;
  letter-spacing: .02em;
}
.categoria__figura {
  border: 2px solid var(--negro);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
/* En la tarjeta blanca la etiqueta invierte, para que no sea igual a las demás. */
.carrusel-categorias .carril__pieza:nth-child(5n+5) .categoria__conteo,
.categoria:nth-child(5n+5) .categoria__conteo { background: var(--marca); color: var(--negro); }
/* El carril deja sitio abajo para la sombra de las tarjetas. */
.carrusel-categorias .carril { padding: 4px 6px 14px 0; }

/* El plan del miembro en la cabecera: «Distribuidor Mayorista» no puede
   empujar el carrito fuera de la fila. */
.accion__plan { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--marca); }