/* ==========================================================================
   Decoclick — sistema de diseño
   Amarillo #FDCD01 · negro · blanco. Fondo claro.
   El motivo de marca es la caja con la esquina inferior derecha redondeada,
   tomado del bloque del logo en sus piezas de Facebook.
   ========================================================================== */

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

:root {
  /* color */
  --amarillo: #FDCD01;
  --amarillo-hover: #E8BC00;
  --amarillo-tenue: #FFF6D0;
  --negro: #000000;
  --tinta: #121212;
  --tinta-2: #5C5C5C;
  --tinta-3: #8A8A8A;
  --blanco: #FFFFFF;
  --papel: #F5F5F3;
  --linea: #E3E3DF;

  /* tipografía */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --texto: 'Archivo', 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: 400;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  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(--amarillo);
  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(--amarillo-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(--amarillo); }

.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(--amarillo); }
.cinta__wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cinta__wa:hover { color: var(--amarillo); }

/* ==========================================================================
   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(--amarillo);
  border-radius: var(--radio-marca);
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: .86;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
.logo:hover .logo__bloque { background: var(--amarillo-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(--amarillo); }
.buscador__enviar {
  padding-inline: var(--s5);
  border: 2px solid var(--negro);
  border-radius: 0 4px 4px 0;
  background: var(--amarillo);
  display: grid;
  place-items: center;
}
.buscador__enviar:hover { background: var(--amarillo-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(--amarillo);
  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(--amarillo);
  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(--amarillo);
  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(--amarillo); }
.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;
  text-transform: uppercase;
}
.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(--amarillo-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(--amarillo);
  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(--amarillo);
}
.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(--amarillo); }

/* ==========================================================================
   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(--amarillo);
  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(--amarillo);
  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);
}
.categoria {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  text-align: center;
  transition: transform .16s ease, background-color .16s ease;
}
.categoria:hover { transform: translateY(-4px); background: var(--amarillo); }
.categoria__figura {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--papel);
  margin-inline: auto;
  width: 72%;
}
.categoria:hover .categoria__figura { background: var(--blanco); }
.categoria__figura img { width: 100%; height: 100%; object-fit: cover; }
.categoria__nombre { font-family: var(--display); font-size: 1.0625rem; text-transform: uppercase; line-height: 1.05; }
.categoria__conteo { font-size: .8125rem; color: var(--tinta-2); font-weight: 600; }
.categoria:hover .categoria__conteo { color: var(--negro); }

/* ==========================================================================
   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(--amarillo); 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(--amarillo); }
.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(--amarillo);
  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;
  text-transform: uppercase;
  color: var(--amarillo);
}
.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(--amarillo); }
.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;
  text-transform: uppercase;
  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(--amarillo);
  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(--amarillo); }
.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(--amarillo-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(--amarillo); }

@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(--amarillo); border-color:var(--amarillo); 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(--amarillo)}

/* 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(--amarillo); 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(--amarillo); }
.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; }