/* Inter: SIL Open Font License 1.1, /activos/OFL-Inter-3b0a5fca3d.txt */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/activos/inter-latin-wght-normal-3100e775e8.woff2") format("woff2");
}

/* Fraunces: SIL Open Font License 1.1, /activos/OFL-Fraunces-cd3384cafa.txt */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/activos/fraunces-latin-opsz-normal-7234ed860a.woff2") format("woff2");
}

/*
 * Estilos del catalogo MGE. Primero celular; se amplia a 720 px y 1024 px.
 * Diseño premium ("C en negro", 2026-10-01): colores, letras, radios, sombras,
 * espacio y movimiento viven en las variables de :root. Las reglas @font-face
 * de Inter y Fraunces no estan aqui: construir.ts las antepone con las URL
 * publicadas de las fuentes.
 * Sin estilos en linea en el HTML: la CSP solo permite esta hoja.
 */

:root {
  /* Colores. --naranja-texto es el naranja de los textos chicos (AA sobre
     blanco y sobre el fondo); --naranja-oscuro, el del precio grande. */
  --negro: #141414;
  --gris-fondo: #f4f4f2;
  --superficie: #ffffff;
  --gris-borde: #e4e4e0;
  --gris-texto: #6b6b6b;
  --naranja: #f07d20;
  --naranja-oscuro: #d4650c;
  --naranja-texto: #b3540a;
  --naranja-claro: #f5a65b;
  --naranja-suave: #fdf0e5;
  --verde: #1fa84f;
  --verde-oscuro: #178a40;
  --texto-parrafo: #444444;
  --pie-texto: #cfcfcf;
  --pie-aviso: #bdbdbd;
  --pie-tenue: #8f8f8f;
  --pie-linea: #333333;
  --pie-recuadro: #262626;

  /* Letras */
  --letra-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --letra-titulos: "Fraunces", Georgia, "Times New Roman", serif;

  /* Formas */
  --radio: 10px;
  --radio-tarjeta: 16px;
  --radio-etiqueta: 8px;
  --radio-medio: 12px;
  --sombra: 0 2px 10px rgba(0, 0, 0, 0.08);
  --sombra-tarjeta: 0 4px 16px rgba(0, 0, 0, 0.06);
  --sombra-tarjeta-alzada: 0 12px 28px rgba(0, 0, 0, 0.12);
  --sombra-flecha: 0 2px 10px rgba(0, 0, 0, 0.18);

  /* Espacio y movimiento */
  --espacio-seccion: 36px;
  --duracion-corta: 150ms;
  --duracion-media: 200ms;
  --duracion-larga: 300ms;
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 1024px) {
  :root {
    --espacio-seccion: 56px;
  }
}

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

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  font-family: var(--letra-texto);
  font-size: 16px;
  line-height: 1.45;
  color: var(--negro);
  background: var(--gris-fondo);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

/* Fraunces solo en los titulos, todos en este selector: la etapa que agregue
   un titulo suma aqui su selector. Lo demas hereda Inter del body. */
.encabezado-pagina h1,
.texto h1,
.texto h2,
.seccion__titulo,
.hero__titulo,
.pie__titulo,
.ficha__seccion > h2,
.ofertas-grupo__titulo {
  font-family: var(--letra-titulos);
  font-weight: 700;
}

.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

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

.icono {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

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

.boton--primario {
  background: var(--naranja);
  color: #ffffff;
}

.boton--primario:hover {
  background: var(--naranja-oscuro);
}

.boton--secundario {
  background: var(--negro);
  color: #ffffff;
}

/* "Conoce mas": sin relleno, con borde negro; se llena al pasar el puntero. */
.boton--contorno {
  border: 1.5px solid var(--negro);
  background: transparent;
  color: var(--negro);
}

.boton--contorno:hover {
  background: var(--negro);
  color: #ffffff;
}

.boton--whatsapp {
  background: var(--verde);
  color: #ffffff;
}

.boton--whatsapp:hover {
  background: var(--verde-oscuro);
}

.boton--whatsapp-borde {
  background: #ffffff;
  color: var(--verde-oscuro);
  border-color: var(--verde);
}

/* "Como llegar": al lado del WhatsApp, que es el principal, va discreto. */
.boton--ruta {
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--gris-borde);
  background: #ffffff;
  color: var(--negro);
  font-weight: 700;
  font-size: 0.85rem;
}

.boton--ruta:hover {
  border-color: var(--naranja);
}

.boton:focus-visible,
.pestanas__boton:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

/* ---------- Encabezado ---------- */

/* Blanco, pegado arriba al bajar y con una sombra leve. Por ser sticky es
   tambien el ancla del menu movil y del panel ancho de Productos. */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* En el celular: menu, logo y "Mi pedido". Desde 768 px entran el buscador
   y el menu de escritorio (ver "Encabezado y menu de escritorio"). */
.encabezado__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "menu logo pedido";
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.logo {
  grid-area: logo;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.logo__imagen {
  height: 54px;
  width: auto;
}

.logo__texto {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--negro);
}

.logo__descriptor {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--naranja-texto);
}

/* Campo redondeado con la lupa adentro. La lupa es el boton de enviar: en el
   HTML va despues del campo (el campo se tabula primero) y order la pone a
   la izquierda, como en la maqueta. */
.buscador {
  grid-area: buscador;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--gris-fondo);
}

/* El anillo de foco rodea todo el campo, no solo el texto. */
.buscador:focus-within {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

/* En movil el buscador vive dentro del menu; arriba solo caben logo y pedido. */
.encabezado__fila > .buscador {
  display: none;
}

/* En la busqueda y en el 404 el campo no ocupa todo el ancho. */
.encabezado-pagina .buscador,
.texto .buscador {
  max-width: 560px;
}

/* Ahi el campo se dibuja sobre el gris de la pagina (el del encabezado va
   sobre blanco): en blanco se distingue. El fondo lo lleva el formulario,
   no el input, que es transparente. */
.encabezado-pagina .buscador,
.texto .buscador {
  background: var(--superficie);
}

/* 16 px en el celular: con menos, el iPhone acerca la pagina al escribir.
   El del encabezado de escritorio baja a 13 px (ver el @media de 768 px). */
.buscador input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--negro);
  font: inherit;
  font-size: 1rem;
}

.buscador input::placeholder {
  color: var(--gris-texto);
  opacity: 1;
}

.buscador input:focus-visible {
  outline: none;
}

.buscador button {
  order: -1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-texto);
  cursor: pointer;
}

.buscador button:hover {
  color: var(--negro);
}

.buscador .icono {
  width: 16px;
  height: 16px;
}

.boton-pedido {
  grid-area: pedido;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radio);
  background: var(--naranja);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.boton-pedido:hover {
  background: var(--naranja-oscuro);
}

/* El numero va en naranja-texto: el naranja del boton no da contraste sobre blanco. */
.boton-pedido__conteo {
  min-width: 1.6em;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--naranja-texto);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* ---------- Menu principal (dos <details>, sin JavaScript) ---------- */

/* En movil solo esta el boton de menu; la barra de escritorio se esconde. */
.menu-principal {
  display: none;
}

.menu-movil {
  grid-area: menu;
}

/* Inter 600 de 14 px, sin mayusculas: "Productos ▾" como en la maqueta. */
.menu-movil__boton,
.menu-desplegable__boton {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--negro);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.menu-movil__boton::-webkit-details-marker,
.menu-desplegable__boton::-webkit-details-marker {
  display: none;
}

.menu-movil__boton::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--negro);
  box-shadow:
    0 -7px 0 var(--negro),
    0 7px 0 var(--negro);
}

.menu-desplegable__boton::after {
  content: "▾";
  font-size: 0.7em;
  color: var(--naranja);
}

.menu-desplegable[open] > .menu-desplegable__boton::after {
  content: "▴";
}

.menu-movil__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 25;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 12px 16px 20px;
  background: #ffffff;
  border-top: 1px solid var(--gris-borde);
  box-shadow: var(--sombra);
}

.menu-movil__secciones {
  display: grid;
  margin: 12px 0;
  border-top: 1px solid var(--gris-borde);
}

.menu-movil__secciones .menu-desplegable {
  border-bottom: 1px solid var(--gris-borde);
}

.boton-pedido--movil {
  justify-content: center;
}

.menu-panel__columnas {
  display: grid;
  gap: 14px;
}

/* Como los antetitulos de las secciones: chico, espaciado y en naranja-texto. */
.menu-grupo__titulo {
  display: block;
  margin: 0 0 4px;
  color: var(--naranja-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.menu-lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 0 10px;
  list-style: none;
  font-size: 0.9rem;
}

.menu-lista a {
  display: block;
  padding: 5px 0;
  text-decoration: none;
}

.menu-lista a:hover {
  color: var(--naranja-texto);
}

/* El nombre manda; el conteo va al lado, gris y mas chico. */
.menu-lista__conteo {
  color: var(--gris-texto);
  font-size: 0.8rem;
  font-weight: 400;
}

/* ---------- Secciones del inicio ---------- */

/* Solo arriba y abajo: la seccion tambien lleva .contenedor y no debe
   borrarle los 16 px de los lados. */
.seccion {
  padding-top: calc(var(--espacio-seccion) / 2);
  padding-bottom: calc(var(--espacio-seccion) / 2);
}

.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 12px;
}

/* Fraunces 700 le llega del selector agrupado de los titulos. */
.seccion__titulo {
  font-size: 1.6rem;
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .seccion__titulo {
    font-size: 2rem;
  }
}

/* Va dentro del h2 pero en Inter: chico, en mayusculas y espaciado. */
.seccion__antetitulo {
  display: block;
  margin-bottom: 4px;
  color: var(--naranja-texto);
  font-family: var(--letra-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.45;
  text-transform: uppercase;
}

.seccion__ver-todo {
  flex: none;
  color: var(--naranja-texto);
  font-weight: 600;
}

/* En movil los enlaces de la cabecera van en su propia linea: al lado del
   titulo quedaban apretados contra el borde. */
.seccion__enlaces {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4px 12px;
  font-size: 0.85rem;
  font-weight: 700;
}

.seccion__enlaces a {
  color: var(--naranja-texto);
}

/* La frase de la temporada debajo del titulo de su seccion. */
.seccion__frase {
  max-width: 62ch;
  margin: -4px 0 4px;
  color: var(--texto-parrafo);
}

/* Marco del carrusel de categorias: las flechas van a los lados, fuera de la
   tira, porque el script copia todo lo que hay dentro del <nav>. Desde
   720 px el marco les deja 56 px a cada lado. */
.carrusel-marco {
  position: relative;
}

/* Sin scroll-snap: el script la mueve pixel a pixel y un punto de anclaje
   obligatorio la haria saltar de tarjeta en tarjeta. Sin relleno a los lados
   (la vuelta sin fin necesita que las copias empiecen igual que las
   originales); arriba y abajo, aire para la sombra de las fichas. */
.carrusel-categorias {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 18px 0;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.carrusel-categorias::-webkit-scrollbar {
  display: none;
}

/* Ficha blanca redondeada: la foto arriba y el nombre debajo. */
.categoria-tarjeta {
  flex: 0 0 118px;
  padding: 10px;
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  text-align: center;
  text-decoration: none;
}

.categoria-tarjeta__imagen {
  width: 100%;
  height: 70px;
  object-fit: contain;
}

.categoria-tarjeta__nombre {
  display: block;
  margin-top: 6px;
  color: var(--negro);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

/* El lugar de las flechas se reserva siempre, aunque sin JavaScript no
   salgan: si apareciera recien cuando el script las muestra, la tira se
   angostaria de golpe al cargar la portada. */
@media (min-width: 720px) {
  .carrusel-marco {
    padding: 0 56px;
  }
}

/* ---------- Banner ---------- */

/* El marco sostiene las flechas y los puntos, encima del banner y fuera de
   la tira (adentro contarian como diapositivas). */
.hero-marco {
  position: relative;
}

/* Sin JavaScript el banner se desliza a mano, de a una diapositiva. */
.hero {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--naranja);
}

.hero::-webkit-scrollbar {
  display: none;
}

.hero__diapositiva {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  color: #ffffff;
  text-decoration: none;
}

.hero__imagen {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* La tira es flex: todas las diapositivas quedan del alto de la mas alta.
   300 px en el celular, 360 px desde 720 px y 420 px desde 1024 px. Abajo
   queda lugar para los puntos. */
.hero__generado {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 300px;
  padding: 32px 20px 48px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--naranja), var(--naranja-oscuro));
}

.hero__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * El velo negro no es decoracion: el texto es blanco y las fotos traen pasto
 * al sol justo donde va el titulo. Hasta 1279 px el texto llega casi al
 * borde derecho y el velo es casi parejo; desde 1280 px es el de la maqueta,
 * cargado a la izquierda para no tapar la foto.
 */
.hero__generado--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.9) 0%, rgba(12, 12, 12, 0.72) 60%, rgba(12, 12, 12, 0.5) 100%);
}

/* Sin foto la diapositiva es naranja y el texto va en negro: el blanco sobre
   naranja no llega al contraste AA (2,74:1); el negro da 4,97:1 o mas. */
.hero__generado:not(.hero__generado--foto) {
  color: var(--negro);
}

.hero__generado > div {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.hero__generado p {
  margin: 0 0 12px;
}

.hero__antetitulo {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--negro);
}

.hero__generado--foto .hero__antetitulo {
  color: var(--naranja-claro);
}

/* Fraunces 700 le llega del selector agrupado de los titulos. Es un <p>: el
   margen va con dos clases para ganarle a ".hero__generado p". */
.hero__titulo {
  font-size: 2rem;
  line-height: 1.04;
}

.hero__generado .hero__titulo {
  margin: 10px 0 14px;
}

.hero__generado--foto .hero__titulo + p {
  opacity: 0.9;
}

.hero__generado .boton {
  padding: 13px 24px;
  font-size: 0.9375rem;
}

.hero__generado--foto .boton--secundario {
  background: var(--naranja);
}

/* Flechas de los carruseles (banner y categorias). Salen del HTML con
   hidden, porque sin JavaScript no harian nada, y sitio.ts se lo quita. En
   el celular no se muestran: taparian el texto o las fichas, y alli se
   desliza con el dedo. */
.flecha-carrusel {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--negro);
  box-shadow: var(--sombra-flecha);
  transform: translateY(-50%);
  cursor: pointer;
}

.flecha-carrusel .icono {
  width: 20px;
  height: 20px;
}

.flecha-carrusel--anterior {
  left: 10px;
}

.flecha-carrusel--siguiente {
  right: 10px;
}

/* En un extremo de la tira (cuando no da la vuelta) la flecha de ese lado se atenua. */
.flecha-carrusel[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.flecha-carrusel:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

.flecha-carrusel--hero {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.flecha-carrusel--hero.flecha-carrusel--anterior {
  left: 18px;
}

.flecha-carrusel--hero.flecha-carrusel--siguiente {
  right: 18px;
}

/* Puntos del banner: el punto es el ::before y el boton es mas grande, para
   que el dedo le atine. El de la diapositiva que se ve es una pastilla naranja. */
.hero__indicadores {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  display: flex;
  transform: translateX(-50%);
}

.hero__indicador {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero__indicador::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
}

.hero__indicador[aria-current="true"]::before {
  width: 26px;
  background: var(--naranja);
}

.hero__indicador:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 0;
  border-radius: 99px;
}

@media (min-width: 720px) {
  .hero__generado {
    min-height: 360px;
    padding: 48px 72px 56px;
  }

  .hero__titulo {
    font-size: 2.6rem;
  }

  .flecha-carrusel {
    display: flex;
  }
}

/* Desde 1024 px el texto se alinea con .contenedor (nunca a menos de 72 px
   del borde, para dejar lugar a la flecha). */
@media (min-width: 1024px) {
  .hero__generado {
    min-height: 420px;
    padding: 86px max(72px, calc(50% - 584px));
  }

  .hero__titulo {
    font-size: 3.125rem;
  }
}

@media (min-width: 1280px) {
  .hero__generado--foto::after {
    background: linear-gradient(90deg, rgba(12, 12, 12, 0.9) 0%, rgba(12, 12, 12, 0.55) 48%, rgba(12, 12, 12, 0.05) 100%);
  }
}

/* ---------- Beneficios ---------- */

/* Barra blanca de borde a borde bajo el banner; el relleno lateral alinea su
   contenido con .contenedor en pantallas anchas. Dos columnas hasta 1023 px,
   cuatro desde 1024 px. */
.beneficios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  margin: 0;
  padding: 16px max(16px, calc(50% - 584px));
  list-style: none;
  border-bottom: 1px solid var(--gris-borde);
  background: var(--superficie);
}

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

/* El icono va en naranja (currentColor) sobre su recuadro naranja claro. */
.beneficios__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-medio);
  background: var(--naranja-suave);
  color: var(--naranja);
}

.beneficios__icono .icono {
  width: 24px;
  height: 24px;
}

.beneficios__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.beneficios__titulo {
  color: var(--negro);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.beneficios__detalle {
  color: var(--gris-texto);
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .beneficios {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ---------- Puntos y sobre nosotros ---------- */

/* El banner salta a "#categorias" (el carrusel de arriba) y "#ofertas", y
   el indice de /ofertas/ a cada grupo. El encabezado pegajoso taparia el
   titulo: el salto se detiene su alto mas 16 px antes. Alto del encabezado:
   70 px en el celular (logo de 54 + 8 + 8), unos 120 de 768 a 1023 (dos
   filas) y 88 desde 1024. */
.seccion[id],
.carrusel-marco[id],
.ofertas-grupo {
  scroll-margin-top: 86px;
}

@media (min-width: 768px) {
  .seccion[id],
  .carrusel-marco[id],
  .ofertas-grupo {
    scroll-margin-top: 136px;
  }
}

@media (min-width: 1024px) {
  .seccion[id],
  .carrusel-marco[id],
  .ofertas-grupo {
    scroll-margin-top: 104px;
  }
}

/* Puntos de venta en la portada: tarjeta blanca con el mapa a un lado y la
   lista al otro. Desde 720 px van en dos columnas (1,2 : 1). La columna de la
   lista es implicita (grid-auto-columns): sin mapa no hay segunda columna y
   la lista ocupa todo el ancho. */
.puntos-portada {
  display: grid;
  gap: 20px;
  padding: 16px;
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

@media (min-width: 720px) {
  .puntos-portada {
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1.2fr);
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
  }
}

/* El mapa es una imagen de 1200 x 800: width y height guardan su lugar. */
.puntos-portada__mapa {
  margin: 0;
}

.puntos-portada__mapa img {
  width: 100%;
  border-radius: var(--radio-medio);
}

.puntos-portada__mapa figcaption {
  margin-top: 4px;
  color: var(--gris-texto);
  font-size: 0.75rem;
  text-align: right;
}

.puntos-portada__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.puntos-portada__lista .boton {
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 18px;
  font-size: 0.875rem;
}

/* Cada punto: la viñeta naranja (un circulo de CSS: el lector de pantalla no
   la lee), el nombre y debajo el municipio. */
.punto-compacto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  color: var(--negro);
  text-decoration: none;
}

.punto-compacto::before {
  content: "";
  grid-row: span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--naranja);
}

.punto-compacto:hover .punto-compacto__nombre {
  color: var(--naranja-texto);
}

.punto-compacto__nombre {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.punto-compacto__lugar {
  color: var(--gris-texto);
  font-size: 0.8125rem;
}

/* Sobre nosotros en la portada: tarjeta blanca con una foto del banner y el
   texto. Desde 720 px, foto y texto lado a lado en mitades iguales; sin foto
   el texto es la unica columna (la segunda es implicita, como en los puntos). */
.sobre-nosotros {
  display: grid;
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

/* Alto fijo en el celular y el de la tarjeta desde 720 px: la foto nunca
   empuja nada al cargar. */
.sobre-nosotros__foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.sobre-nosotros__cuerpo {
  padding: 24px 20px;
}

/* El titulo va dentro de la tarjeta, sin la cabecera de la seccion. */
.sobre-nosotros .seccion__titulo {
  margin: 0 0 12px;
}

.sobre-nosotros__texto {
  max-width: 760px;
  margin: 0;
  color: var(--texto-parrafo);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sobre-nosotros__cuerpo .boton {
  margin-top: 18px;
  padding: 9px 18px;
  font-size: 0.875rem;
}

@media (min-width: 720px) {
  .sobre-nosotros {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .sobre-nosotros__foto {
    height: 100%;
    min-height: 260px;
  }

  .sobre-nosotros__cuerpo {
    align-self: center;
    padding: 34px;
  }
}

/* 30 px en escritorio, como la maqueta (los demas titulos de seccion, 32). */
@media (min-width: 1024px) {
  .sobre-nosotros .seccion__titulo {
    font-size: 1.875rem;
  }
}

/* ---------- Productos ---------- */

/* Aire arriba y abajo: la fila se desplaza de lado y sin el cortaria la
   sombra de las tarjetas, tambien la de la tarjeta alzada al pasar el
   puntero (sube 3 px y su sombra llega 40 px por debajo). */
.fila-productos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px 0 28px;
}

.fila-productos > * {
  scroll-snap-align: start;
}

.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Tarjeta blanca redondeada. La foto va de borde a borde sobre blanco, sin
   recuadro gris; marca, nombre, precio y boton llevan el margen del cuerpo
   (16 px a los lados). */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta__enlace {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

/* La tarjeta recorta con overflow: hidden, y el anillo de foco de afuera
   (2 px de separacion + 3 de grosor) se perderia. Va hacia adentro. */
.tarjeta__enlace:focus-visible {
  outline-offset: -3px;
}

/* Alto fijo: la foto (cuadrada) se centra adentro y nada se mueve al cargar.
   overflow: hidden deja a la Etapa 5 acercarla sin que se salga. */
.tarjeta__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 10px;
  overflow: hidden;
  background: var(--superficie);
}

.tarjeta__imagen {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sin foto: el cuadro gris con "MGE", centrado en el mismo lugar. */
.tarjeta__foto .imagen-vacia {
  width: auto;
  border-radius: var(--radio-medio);
}

/* "-15%": en la foto de la tarjeta y, desde la Etapa 3, junto al precio de
   la ficha. Blanco sobre naranja, como los botones (excepcion aprobada). */
.etiqueta-descuento {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radio-etiqueta);
  background: var(--naranja);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.tarjeta__foto .etiqueta-descuento {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

.tarjeta__marca {
  margin: 4px 16px 0;
  color: var(--naranja-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Inter 600 negro, dos lineas como maximo con puntos suspensivos. El alto de
   dos lineas deja precios y botones a la misma altura en una fila. */
.tarjeta__nombre {
  display: -webkit-box;
  min-height: 2.6em;
  margin: 4px 16px 10px;
  overflow: hidden;
  color: var(--negro);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tarjeta > .precio {
  margin: 0 16px;
}

/* El boton siempre abajo, aunque el nombre o el precio ocupen menos. */
.tarjeta__acciones {
  margin-top: auto;
  padding: 12px 16px 16px;
}

/* El boton de la tarjeta, en 14 px como en la maqueta (el general mide 15,2). */
.tarjeta__acciones .boton {
  font-size: 0.875rem;
}

@media (min-width: 720px) {
  .tarjeta__foto {
    height: 170px;
  }
}

/* Celular: tarjetas compactas. En las filas de la portada se ven dos y un
   pedazo de la tercera (que avisa que hay mas), y en las categorias caben
   unas cinco por pantalla. El precio no se achica: el naranja necesita texto
   grande para el contraste. */
@media (max-width: 719px) {
  .fila-productos {
    grid-auto-columns: 46%;
    gap: 10px;
  }

  .rejilla-productos {
    gap: 10px;
  }

  .tarjeta__foto {
    height: 120px;
    padding: 8px;
  }

  .tarjeta__foto .etiqueta-descuento {
    top: 8px;
    left: 8px;
  }

  .tarjeta__marca {
    margin: 2px 12px 0;
  }

  .tarjeta__nombre {
    margin: 2px 12px 8px;
    font-size: 0.875rem;
  }

  .tarjeta > .precio {
    margin: 0 12px;
  }

  .tarjeta__acciones {
    padding: 10px 12px 12px;
  }

  /* "Agregar al pedido" en una sola linea: a 13 px mide unos 111 px y el
     boton de la tarjeta mas angosta (fila de la portada) deja 118. */
  .tarjeta__acciones .boton {
    padding: 10px 6px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

.imagen-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--gris-fondo);
  color: #c4c4c4;
  font-size: 1.6rem;
  font-weight: 700;
}

.precio {
  display: flex;
  flex-direction: column;
}

.precio__anterior {
  color: var(--gris-texto);
  font-size: 0.8rem;
}

.precio__valor {
  font-size: 1.2rem;
  font-weight: 700;
}

.precio__descuento {
  color: var(--naranja-texto);
  font-size: 0.8rem;
  font-weight: 700;
}

.precio__vigencia {
  color: var(--gris-texto);
  font-size: 0.72rem;
}

.precio__consultar {
  color: var(--gris-texto);
  font-weight: 700;
}

/* En la ficha: el tachado con la etiqueta "-15%" al lado, en una linea; el
   precio grande debajo, en naranja-precio si hay descuento (3,37:1 sobre el
   fondo de la pagina: vale por ser texto grande en negrita); y abajo cuanto
   se ahorra y, en ofertas, hasta cuando vale. */
.precio--ficha {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.precio--ficha .precio__valor,
.precio--ficha .precio__descuento,
.precio--ficha .precio__vigencia,
.precio--ficha .precio__consultar {
  flex-basis: 100%;
}

.precio--ficha .precio__valor {
  font-size: 2rem;
  line-height: 1.15;
}

.precio--ficha .precio__anterior ~ .precio__valor {
  color: var(--naranja-oscuro);
}

.precio--ficha .precio__anterior {
  font-size: 0.95rem;
}

.precio--ficha .etiqueta-descuento {
  font-size: 0.8125rem;
}

.precio--ficha .precio__descuento {
  font-size: 0.9375rem;
  font-weight: 600;
}

.precio--ficha .precio__vigencia {
  font-size: 0.8125rem;
}

/* En la tarjeta: tachado chico y precio grande, negro sin descuento y en
   naranja-precio con descuento (3,71:1 sobre blanco: vale por ser texto
   grande en negrita, 19 px o mas). */
.tarjeta .precio__anterior {
  font-size: 0.75rem;
}

.tarjeta .precio__valor {
  color: var(--negro);
  font-size: 1.2rem;
}

.tarjeta .precio__anterior + .precio__valor {
  color: var(--naranja-oscuro);
}

@media (min-width: 720px) {
  .tarjeta .precio__valor {
    font-size: 1.3125rem;
  }
}

/* ---------- Categoria ---------- */

/* Titulo de pagina (categoria, busqueda, puntos de venta, pedido): Fraunces
   700 le llega del selector agrupado de los titulos; debajo, el detalle en
   gris. */
.encabezado-pagina {
  padding: 24px 0 12px;
}

.encabezado-pagina h1 {
  margin: 0 0 10px;
  font-size: 1.75rem;
  line-height: 1.1;
}

.encabezado-pagina p {
  margin: 0;
  color: var(--gris-texto);
}

@media (min-width: 1024px) {
  .encabezado-pagina h1 {
    font-size: 2.5rem;
  }
}

/* ---------- Ofertas ---------- */

/* /ofertas/: arriba, una pastilla blanca por categoria con su conteo, que
   salta a su grupo; debajo, un grupo por categoria con su rejilla. */
.ofertas-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 4px;
}

.ofertas-indice__enlace {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--negro);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.ofertas-indice__enlace:hover {
  border-color: var(--negro);
}

.ofertas-indice__enlace span {
  color: var(--gris-texto);
  font-size: 0.8125rem;
}

.ofertas-grupo {
  padding-top: 24px;
}

/* Fraunces 700 le llega del selector agrupado de los titulos. */
.ofertas-grupo__titulo {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

@media (min-width: 1024px) {
  .ofertas-grupo__titulo {
    font-size: 1.75rem;
  }
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}

/* Filtro por marca (categorias que no son de maquinas y busqueda): pastillas
   blancas como las de "Todas las categorias"; la elegida, negra. */
.filtro {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.filtro[aria-pressed="true"] {
  border-color: var(--negro);
  background: var(--negro);
  color: #ffffff;
}

/* ---------- Filtros y orden de las categorias de maquinas ---------- */

/* Sin JavaScript el panel y la barra no harian nada: se esconden y la pagina
   queda con todas las tarjetas. sitio.ts quita la clase. */
.filtrable--sin-js .filtros-panel,
.filtrable--sin-js .filtrable__barra {
  display: none;
}

.tarjeta--filtrada {
  display: none;
}

/* Panel de filtros: tarjeta blanca redondeada. En el celular va plegado
   detras de "Filtrar"; desde 1024 px el script lo abre a la izquierda. */
.filtros-panel {
  margin: 0 0 16px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

/* "Filtrar ▾" en Inter 600 de 15 px, sin mayusculas, como los menus. */
.filtros-panel__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.filtros-panel__boton::-webkit-details-marker {
  display: none;
}

.filtros-panel__boton::after {
  content: "▾";
  color: var(--naranja);
}

.filtros-panel[open] > .filtros-panel__boton::after {
  content: "▴";
}

.filtros-panel__cuerpo {
  display: grid;
  gap: 16px;
  padding: 4px 18px 18px;
}

.filtro-grupo {
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--gris-borde);
}

/* Como los antetitulos, pero en negro: chico, en mayusculas y espaciado. */
.filtro-grupo__titulo {
  padding: 0;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.filtro-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Casilla propia: cuadro redondeado con borde gris; marcada, naranja-precio
   con un visto blanco (el ::before recortado con clip-path). Borde y casilla
   marcada pasan el 3:1 de un control sobre blanco. El anillo de foco es el
   de input:focus-visible. */
.filtro-opcion input {
  flex: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--gris-texto);
  border-radius: 6px;
  background: var(--superficie);
  appearance: none;
  cursor: pointer;
}

.filtro-opcion input::before {
  content: "";
  width: 11px;
  height: 11px;
  background: #ffffff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
}

.filtro-opcion input:checked {
  border-color: var(--naranja-oscuro);
  background: var(--naranja-oscuro);
}

.filtro-opcion input:checked::before {
  transform: scale(1);
}

.filtro-opcion:hover input:not(:checked) {
  border-color: var(--negro);
}

/* Con los colores forzados de Windows (alto contraste) los fondos se pierden
   y el visto no se veria: vuelve la casilla del sistema. */
@media (forced-colors: active) {
  .filtro-opcion input {
    appearance: auto;
  }

  .filtro-opcion input::before {
    content: none;
  }
}

.filtro-opcion__conteo {
  color: var(--gris-texto);
}

.filtrable__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 12px;
}

.filtrable__conteo {
  margin: 0;
  color: var(--gris-texto);
  font-size: 0.9rem;
}

.filtrable__quitar {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--naranja-texto);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* "Ordenar" y su selector. La flecha propia la dibuja ::after con dos
   bordes, a la derecha de la caja y encima del <select> (lo ultimo de la
   caja); el selector le deja lugar con su relleno derecho y no la tapa
   porque la flecha no recibe clics. */
.filtrable__orden-caja {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.filtrable__orden-caja::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--naranja);
  border-bottom: 2px solid var(--naranja);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.filtrable__orden {
  font-size: 0.875rem;
  font-weight: 600;
}

/* 16 px en el celular (con menos, el iPhone acerca la pagina al tocarlo);
   14 px desde 1024 px. */
.filtrable__selector {
  min-height: 42px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--negro);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.filtrable__selector:hover {
  border-color: var(--negro);
}

@media (min-width: 1024px) {
  .filtrable__selector {
    font-size: 0.875rem;
  }
}

.filtrable__vacio {
  margin: 0;
  padding: 24px 0;
  text-align: center;
}

/* ---------- Ficha de producto ---------- */

/* Ruta de la pagina (categoria y ficha): chica y gris; el enlace se marca al
   pasar el puntero. */
.migas {
  padding: 16px 0 0;
  color: var(--gris-texto);
  font-size: 0.8125rem;
}

.migas a {
  text-decoration: none;
}

.migas a:hover {
  color: var(--naranja-texto);
  text-decoration: underline;
}

.ficha {
  display: grid;
  gap: 24px;
  padding: 16px 0 24px;
}

/* La foto grande, sobre blanco, en una tarjeta redondeada. */
.ficha__galeria {
  padding: 16px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.ficha__imagen {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Sin foto: el cuadro gris con "MGE", redondeado dentro de la tarjeta. */
.ficha__galeria .imagen-vacia {
  border-radius: var(--radio-medio);
}

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

.ficha__marca {
  align-self: flex-start;
  padding: 2px 10px;
  border: 1px solid var(--naranja);
  border-radius: var(--radio-etiqueta);
  color: var(--naranja-texto);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Inter 600 negro, grande: 26 px en el celular y 34 px desde 1024 px. */
.ficha__nombre {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .ficha__nombre {
    font-size: 2.125rem;
  }
}

/* Tallas y colores: botones que llevan a la pagina de cada opcion del grupo.
   La actual va en negro con letra blanca; el foco es el anillo naranja de
   a:focus-visible. */
.ficha__opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ficha__opciones-titulo {
  margin: 0;
  color: var(--gris-texto);
  font-size: 0.9rem;
}

.ficha__opciones-titulo strong {
  color: var(--negro);
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opciones__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--negro);
  font-weight: 600;
  text-decoration: none;
}

.opciones__boton:hover {
  border-color: var(--negro);
}

.opciones__boton[aria-current="page"] {
  border-color: var(--negro);
  background: var(--negro);
  color: #ffffff;
}

/* Notas de la ficha y de "Mi pedido": recuadro naranja claro con raya naranja. */
.nota {
  margin: 0;
  padding: 10px 14px;
  border-left: 4px solid var(--naranja);
  border-radius: 0 var(--radio-medio) var(--radio-medio) 0;
  background: var(--naranja-suave);
  font-size: 0.85rem;
}

.cantidad {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.cantidad__control {
  display: inline-flex;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.cantidad__control button {
  width: 44px;
  border: 0;
  background: var(--gris-fondo);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.cantidad__control input {
  width: 56px;
  min-height: 44px;
  border: 0;
  background: var(--superficie);
  color: var(--negro);
  font: inherit;
  text-align: center;
}

/* Retiro en los puntos: el icono de tienda naranja y el texto al lado. El
   texto va en un <span>: como hijos sueltos del flex, el enlace y el resto
   de la frase quedarian en dos columnas. */
.ficha__retiro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-medio);
  background: var(--superficie);
  font-size: 0.875rem;
}

.ficha__retiro .icono {
  width: 22px;
  height: 22px;
  color: var(--naranja);
}

.ficha__retiro a {
  color: var(--naranja-texto);
  font-weight: 600;
}

.confianza {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.confianza li::before {
  content: "✓ ";
  color: var(--naranja);
  font-weight: 700;
}

.ficha__seccion {
  padding: 8px 0 16px;
}

/* Descripcion, que trae, atributos, detalles y descargables en una tarjeta blanca.
   Con JavaScript el script pone arriba la fila de pestañas; sin JavaScript
   las secciones se ven una debajo de otra, cada una con su h2. */
.ficha__pestanas {
  padding: 8px 20px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

/* La fila de pestañas va de borde a borde de la tarjeta; la activa se
   subraya en naranja encima de la raya gris (margin-bottom: -1px). */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -8px -20px 8px;
  padding: 0 8px;
  border-bottom: 1px solid var(--gris-borde);
}

.pestanas__boton {
  min-height: 48px;
  margin-bottom: -1px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--gris-texto);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.pestanas__boton:hover {
  color: var(--negro);
}

.pestanas__boton[aria-selected="true"] {
  border-bottom-color: var(--naranja);
  color: var(--negro);
}

.ficha__seccion--oculta {
  display: none;
}

.atributos,
.que-trae {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

/* ¿Para qué máquina sirve?: las motosierras de una espada o una cadena, una
   por renglon y sin viñetas, en el tamaño del texto de la ficha. Las que MGE
   vende son enlaces; la nota de abajo va en gris y mas chica. */
.maquinas {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}

.maquinas a {
  color: var(--naranja-texto);
  font-weight: 600;
}

.maquinas__nota {
  margin: 12px 0 0;
  color: var(--gris-texto);
  font-size: 0.875rem;
}

/* Descargables: cada manual es un renglon con un icono de documento naranja,
   el nombre en grande y el peso en gris, para que se vea que es un archivo
   para bajar. 44 px de alto: se toca bien con el dedo. */
.descargables {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.descargable {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--negro);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.descargable .icono {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--naranja);
}

.descargable__texto {
  display: grid;
  line-height: 1.3;
}

.descargable:hover .descargable__nombre {
  color: var(--naranja-texto);
  text-decoration: underline;
}

.descargable__peso {
  color: var(--gris-texto);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Videos de la ficha: incrustados, en rejilla de 16:9; como enlaces, igual
   que los descargables pero con el icono de reproducir. */
.videos {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .videos {
    grid-template-columns: 1fr 1fr;
  }
}

.video__marco {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radio-medio);
  background: var(--negro);
}

.video__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__titulo {
  margin: 8px 0 0;
  font-weight: 600;
}

.videos-enlaces {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--negro);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.video-enlace .icono {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--naranja);
}

.video-enlace__texto {
  display: grid;
  line-height: 1.3;
}

.video-enlace:hover .video-enlace__titulo {
  color: var(--naranja-texto);
  text-decoration: underline;
}

.video-enlace__fuente {
  color: var(--gris-texto);
  font-size: 0.875rem;
  font-weight: 400;
}

.ficha__seccion h2 {
  font-size: 1.25rem;
}

/* "Tambien te puede servir" va fuera de la tarjeta, como un titulo de
   seccion de la portada (Fraunces le llega por .ficha__seccion > h2). */
.ficha__relacionados {
  padding-top: calc(var(--espacio-seccion) / 2);
}

.ficha__relacionados > h2 {
  margin-bottom: 12px;
  font-size: 1.6rem;
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .ficha__relacionados > h2 {
    font-size: 2rem;
  }
}

.caracteristicas {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.caracteristicas th,
.caracteristicas td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
}

.caracteristicas th {
  width: 45%;
  color: var(--gris-texto);
  font-weight: 600;
}

/* ---------- Pedido y formularios ---------- */

/* La lista y el resumen. Desde 720 px van lado a lado (ver el @media del
   final): el resumen es la segunda columna. */
.pedido {
  display: grid;
  gap: 20px;
  padding: 8px 0 32px;
}

/* Pedido vacio, y el aviso del <noscript> sin JavaScript: tarjeta blanca. */
.pedido__vacio {
  margin: 0;
  padding: 32px 24px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  text-align: center;
}

.pedido__vacio a {
  color: var(--naranja-texto);
  font-weight: 600;
}

.pedido__avisos {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.pedido__avisos:empty {
  margin-bottom: 0;
}

.pedido__aviso {
  margin: 0;
  padding: 10px 14px;
  border-left: 4px solid var(--naranja);
  border-radius: 0 var(--radio-medio) var(--radio-medio) 0;
  background: var(--naranja-suave);
  font-size: 0.875rem;
}

/* Cada producto del pedido en su tarjeta blanca: la foto, y al lado el
   nombre, la referencia, la cantidad con el total de la linea y "Quitar". */
.pedido__lista {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pedido__linea {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.pedido__linea-imagen {
  width: 72px;
  height: 72px;
  object-fit: contain;
  font-size: 0.8rem;
}

.pedido__linea .imagen-vacia {
  border-radius: var(--radio-medio);
}

.pedido__linea-nombre {
  color: var(--negro);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.pedido__linea-nombre:hover {
  color: var(--naranja-texto);
}

.pedido__linea-oferta {
  margin-top: 2px;
  color: var(--gris-texto);
  font-size: 0.8125rem;
}

.pedido__linea-controles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* El total de la linea, en negro y grande. */
.pedido__linea-controles strong {
  font-size: 1.0625rem;
  font-weight: 700;
}

.pedido__quitar {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-texto);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.pedido__quitar:hover {
  color: var(--negro);
}

/* El resumen: tarjeta blanca destacada con una raya naranja arriba. */
.pedido__resumen {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--gris-borde);
  border-top: 4px solid var(--naranja);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.pedido__resumen > p {
  margin: 0;
}

.pedido__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.25rem;
  font-weight: 700;
}

.formulario {
  display: grid;
  gap: 12px;
}

.formulario label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.entrega {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-medio);
}

.entrega legend {
  padding: 0 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.formulario .entrega__opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 400;
}

.formulario .entrega__opcion input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--naranja-oscuro);
}

.entrega__campos {
  display: grid;
  gap: 12px;
}

.entrega__campos--oculto {
  display: none;
}

/* Campos redondeados sobre gris claro, como el buscador; 16 px para que el
   iPhone no acerque la pagina al escribir. Los radios conservan su forma. */
.formulario input:not([type="radio"]),
.formulario select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--gris-fondo);
  color: var(--negro);
  font: inherit;
  font-size: 1rem;
}

.aviso-pago {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: var(--radio-medio);
  background: var(--negro);
  color: #ffffff;
  font-size: 0.85rem;
  line-height: 1.5;
}

.aviso-pago strong {
  color: var(--naranja);
}

/* ---------- Puntos de venta ---------- */

.punto__intro {
  max-width: 760px;
  margin: 0;
}

/* Una columna en el celular, dos desde 720 px y tres desde 1024 px (ver los
   @media del final). */
.puntos {
  display: grid;
  gap: 16px;
  padding: 20px 0 8px;
}

/* Cada punto en su tarjeta blanca. Es un flex en columna para que el boton
   de WhatsApp (su ultimo hijo) quede abajo en todas las tarjetas de una
   fila, aunque unas tengan mas datos que otras. */
.punto {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.punto__nombre {
  margin-bottom: 4px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Como los antetitulos: chico, espaciado y en naranja-texto. */
.punto__lugar {
  margin: 0 0 12px;
  color: var(--naranja-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.punto__dato {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.punto__horario {
  color: var(--gris-texto);
}

.punto__rutas {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
}

.punto .boton--whatsapp {
  margin-top: auto;
}

/* El mapa es una imagen fija de 1200 x 800; width y height en el HTML guardan
   su lugar mientras carga. Va en una tarjeta blanca redondeada. */
.puntos__mapa {
  margin: 20px 0 0;
  padding: 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.puntos__mapa img {
  width: 100%;
  border-radius: var(--radio-medio);
}

.puntos__mapa figcaption {
  margin-top: 6px;
  color: var(--gris-texto);
  font-size: 0.75rem;
  text-align: right;
}

/* ---------- Textos (como comprar, legales, sobre nosotros, 404) ---------- */

/* Columna de lectura de unos 70 caracteres. Solo arriba y abajo: el elemento
   tambien lleva .contenedor y no debe borrarle los 16 px de los lados (antes
   el texto llegaba al borde de la pantalla en el celular). El color va en la
   columna y no en los <p>: el aviso de pago (un <p> blanco sobre negro) y los
   botones conservan el suyo. */
.texto {
  max-width: 720px;
  padding-top: 24px;
  padding-bottom: 40px;
  color: var(--texto-parrafo);
  line-height: 1.65;
}

/* Fraunces 700 les llega del selector agrupado de los titulos. */
.texto h1,
.texto h2 {
  color: var(--negro);
  line-height: 1.15;
}

.texto h1 {
  margin-bottom: 16px;
  font-size: 2rem;
}

.texto h2 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: 1.375rem;
}

/* Enlaces en naranja-texto (4,55:1 sobre el fondo de la pagina). */
.texto a:not(.boton) {
  color: var(--naranja-texto);
  font-weight: 600;
}

.pasos {
  display: grid;
  gap: 12px;
  padding-left: 1.4rem;
}

.pasos li::marker {
  color: var(--naranja-texto);
  font-weight: 700;
}

.lista-puntos {
  display: grid;
  gap: 6px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.lista-puntos li::before {
  content: "▸ ";
  color: var(--naranja);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .texto h1 {
    font-size: 2.5rem;
  }
}

/* ---------- Pie ---------- */

/* Negro, en cuatro columnas desde 1024 px (dos desde 720 px, una debajo de
   otra en el celular): marca, maquinas, ayuda y contacto; debajo, el aviso
   de pago y la linea final. Los 90 px de abajo dejan la linea final libre
   del boton flotante de WhatsApp, que la maqueta no dibuja. Los titulos van
   en Fraunces por el selector agrupado de arriba. */
.pie {
  margin-top: 24px;
  padding: 44px 0 90px;
  background: var(--negro);
  color: var(--pie-texto);
  font-size: 0.875rem;
  line-height: 1.5;
}

.pie__columnas {
  display: grid;
  gap: 28px;
}

/* Una columna de la cuadricula puede encogerse aunque el correo no quepa
   entero; sin esto empujaria la pagina hacia los lados en el celular. */
.pie__marca,
.pie__columna {
  min-width: 0;
}

/* 64 px, como el del encabezado: el PNG mide 765 x 517, se achica y no pierde nitidez. */
.pie__logo {
  width: auto;
  height: 64px;
}

/* Sin logo claro, el logo de siempre (fondo blanco) va en un recuadro blanco. */
.pie__logo-recuadro {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radio-medio);
  background: var(--superficie);
}

/* Sin ningun logo, el nombre como en el encabezado, pero claro sobre negro. */
.pie__marca .logo__texto,
.pie__marca .logo__descriptor {
  display: block;
}

.pie__marca .logo__texto {
  color: #ffffff;
}

.pie__marca .logo__descriptor {
  color: var(--naranja);
}

.pie__lema {
  margin: 14px 0;
}

.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radio);
  background: var(--pie-recuadro);
  color: #ffffff;
  text-decoration: none;
}

.pie__red:hover {
  background: var(--pie-linea);
}

.pie__red .icono {
  width: 20px;
  height: 20px;
}

/* Una red sin icono propio muestra su nombre: el recuadro se estira. */
.pie__red--texto {
  width: auto;
  padding: 0 12px;
  font-weight: 600;
}

.pie__titulo {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 0.9375rem;
}

.pie__enlaces {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2;
}

/* Las maquinas son muchas (17 el 2026-10-01): hasta 1023 px van en dos
   columnas de texto; desde 1024 px, en una (ver el @media de abajo). */
.pie__enlaces--productos {
  columns: 2;
  column-gap: 16px;
}

.pie__enlaces--productos li {
  break-inside: avoid;
}

.pie__enlaces a,
.pie__contacto p a {
  text-decoration: none;
}

.pie__enlaces a:hover,
.pie__contacto p a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.pie__contacto .boton {
  padding: 10px 16px;
  font-size: 0.875rem;
}

.pie__contacto p {
  margin: 10px 0 0;
  line-height: 1.8;
}

/* El aviso de siempre es negro; dentro del pie, que ya es negro, va con un
   borde gris. "Pago seguro:" sigue en naranja (.aviso-pago strong). */
.pie .aviso-pago {
  margin: 26px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--pie-linea);
  border-radius: var(--radio-medio);
  background: transparent;
  color: var(--pie-aviso);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* La linea final no va dentro de .contenedor: toma su mismo ancho y margen
   para quedar alineada con las columnas. */
.pie__base {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 16px;
  color: var(--pie-tenue);
  font-size: 0.75rem;
}

@media (min-width: 720px) {
  .pie__columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pie__columnas {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }

  .pie__enlaces--productos {
    columns: auto;
  }
}

/* ---------- Flotantes ---------- */

.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.whatsapp-flotante .icono {
  width: 30px;
  height: 30px;
}

.notificacion {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 40;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: var(--radio);
  background: var(--negro);
  color: #ffffff;
  font-weight: 700;
  box-shadow: var(--sombra);
}

.notificacion a {
  color: var(--naranja);
}

/* ---------- Pantallas medianas y grandes ---------- */

/* ---------- Encabezado y menu de escritorio ---------- */

/* De 768 a 1023 px, dos filas: logo, buscador y pedido arriba; el menu
   abajo. La fila no lleva relleno abajo para que el borde de abajo de los
   <details> sea el del encabezado: de ahi cuelgan los paneles. */
@media (min-width: 768px) {
  .encabezado__fila {
    grid-template-areas:
      "logo buscador pedido"
      "navegacion navegacion navegacion";
    gap: 4px 20px;
    padding-bottom: 0;
  }

  .logo__imagen {
    height: 64px;
  }

  .encabezado__fila > .buscador {
    display: flex;
  }

  .encabezado__fila > .buscador input {
    font-size: 0.8125rem;
  }

  .menu-movil {
    display: none;
  }

  /* El texto de "Productos" queda alineado con el logo. */
  .menu-principal {
    grid-area: navegacion;
    display: flex;
    gap: 8px;
    margin-left: -10px;
  }

  .menu-desplegable {
    position: relative;
  }

  .menu-desplegable__boton:hover {
    color: var(--naranja-texto);
  }

  .menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 25;
    max-height: 72vh;
    overflow-y: auto;
    padding: 20px;
    border-top: 1px solid var(--gris-borde);
    border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
    background: var(--superficie);
    box-shadow: var(--sombra);
  }

  /* El panel de Productos no cuelga del boton: va de borde a borde de la
     ventana. Para eso su <details> deja de ser el ancla (position: static) y
     el panel se posiciona contra .encabezado (sticky), que ocupa todo el
     ancho: top: 100% lo deja justo debajo. El relleno lateral lo alinea con
     .contenedor cuando la ventana es ancha. */
  .menu-desplegable--ancho {
    position: static;
  }

  .menu-panel--ancho {
    left: 0;
    right: 0;
    padding: 24px max(16px, calc(50% - 584px)) 28px;
    border-radius: 0;
  }

  .menu-panel--ayuda {
    min-width: 260px;
  }

  /* Un grupo debajo de otro; dentro, las categorias en tantas columnas como
     quepan (a 1280 px entran cuatro). */
  .menu-panel--ancho .menu-panel__columnas {
    gap: 22px;
  }

  .menu-panel--ancho .menu-grupo__titulo {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gris-borde);
  }

  .menu-panel--ancho .menu-lista {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 24px;
  }

  .menu-panel--ancho .menu-lista a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gris-borde);
    font-size: 0.95rem;
    font-weight: 500;
  }

  .menu-panel .menu-lista {
    padding-bottom: 0;
  }
}

/* Desde 1024 px, una sola fila: logo, Productos, Atencion al cliente,
   espacio, buscador de 300 px y "Mi pedido". Sin relleno arriba ni abajo: el
   logo trae su margen (64 + 12 + 12 = 88 px) y los botones del menu ocupan
   esos 88 px, asi los dos paneles cuelgan del borde de abajo del encabezado. */
@media (min-width: 1024px) {
  .encabezado__fila {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "logo navegacion buscador pedido";
    gap: 26px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo {
    padding: 12px 0;
  }

  .menu-principal {
    gap: 4px;
    margin-left: 0;
  }

  .menu-principal .menu-desplegable__boton {
    min-height: 88px;
  }

  .encabezado__fila > .buscador {
    justify-self: end;
    width: 300px;
  }
}

@media (min-width: 720px) {
  .seccion__enlaces {
    width: auto;
  }

  .rejilla-productos {
    grid-template-columns: repeat(3, 1fr);
  }

  .fila-productos {
    grid-auto-columns: calc((100% - 36px) / 4);
  }

  /* Foto y datos arriba: la tarjeta de la foto no se estira al alto de los datos. */
  .ficha {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }

  /* El resumen al lado de la lista. Es una columna implicita: con el pedido
     vacio esta escondido (hidden) y la lista ocupa todo el ancho. */
  .pedido {
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1.4fr);
    grid-auto-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

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

@media (min-width: 1024px) {
  .rejilla-productos {
    grid-template-columns: repeat(4, 1fr);
  }

  /* En escritorio el panel va abierto a la izquierda (el script lo abre) y
     las tarjetas a la derecha, de tres en fondo. */
  .filtrable--con-panel:not(.filtrable--sin-js) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .filtrable--con-panel:not(.filtrable--sin-js) .rejilla-productos {
    grid-template-columns: repeat(3, 1fr);
  }

  .filtrable--con-panel .filtros-panel__boton {
    display: none;
  }

  /* Abierto y sin "Filtrar" arriba: el cuerpo lleva el relleno de la tarjeta
     y el primer grupo no lleva raya (el borde de la tarjeta ya separa). */
  .filtrable--con-panel .filtros-panel__cuerpo {
    padding-top: 18px;
  }

  .filtrable--con-panel .filtro-grupo:first-child {
    padding-top: 0;
    border-top: 0;
  }

  /* Cuatro tarjetas a la vista con 18 px entre ellas, como la maqueta. */
  .rejilla-productos,
  .fila-productos {
    gap: 18px;
  }

  .fila-productos {
    grid-auto-columns: calc((100% - 54px) / 4);
  }

  /* Puntos de venta: tres tarjetas por fila. Va aqui, despues de la regla
     de 720 px que pone dos, para ganarle. */
  .puntos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Movimiento ---------- */

/* Duraciones de 150 a 300 ms (--duracion-corta, --duracion-media y
   --duracion-larga), todas con --curva. Lo que desplaza o escala se apaga
   con movimiento reducido, en el @media del final; los cambios de color se
   quedan. */

/* La tarjeta sube 3 px, su sombra crece y la foto se acerca un 4 % dentro
   de su recuadro (.tarjeta__foto la recorta). Solo con puntero: en una
   pantalla tactil el :hover se queda pegado despues de tocar. */
.tarjeta {
  transition:
    transform var(--duracion-media) var(--curva),
    box-shadow var(--duracion-media) var(--curva);
}

.tarjeta__imagen {
  transition: transform var(--duracion-media) var(--curva);
}

@media (hover: hover) {
  .tarjeta:hover {
    box-shadow: var(--sombra-tarjeta-alzada);
    transform: translateY(-3px);
  }

  .tarjeta:hover .tarjeta__imagen {
    transform: scale(1.04);
  }
}

/* Botones y piezas que se tocan: cambian de tono al pasar el puntero, en
   150 ms. Es solo color, asi que vale igual con movimiento reducido. */
.boton,
.boton-pedido,
.flecha-carrusel,
.buscador button,
.ofertas-indice__enlace,
.pie__red,
.whatsapp-flotante {
  transition:
    background-color var(--duracion-corta) var(--curva),
    border-color var(--duracion-corta) var(--curva),
    color var(--duracion-corta) var(--curva);
}

/* El negro se aclara un tono: el blanco sobre #333333 da 12,6:1. */
.boton--secundario:hover {
  background: #333333;
}

/* En el banner con foto el secundario es naranja: se oscurece como el principal. */
.hero__generado--foto .boton--secundario:hover {
  background: var(--naranja-oscuro);
}

/* "Consultar precio" y "Pedir solo este": el borde verde se llena, como el
   de contorno se llena de negro. Queda igual al boton de WhatsApp (blanco
   sobre verde, la excepcion aprobada). */
.boton--whatsapp-borde:hover {
  background: var(--verde);
  color: #ffffff;
}

/* La flecha atenuada de un extremo no reacciona. */
.flecha-carrusel:not([aria-disabled="true"]):hover {
  color: var(--naranja-texto);
}

.whatsapp-flotante:hover {
  background: var(--verde-oscuro);
}

/* El numero de "Mi pedido" da un salto al agregar: sitio.ts pone la clase y
   la quita al terminar. Es hijo de .boton-pedido (inline-flex), asi que
   acepta transform aunque sea un <span>. */
.boton-pedido__conteo--rebote {
  animation: rebote-conteo var(--duracion-larga) var(--curva);
}

@keyframes rebote-conteo {
  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.3);
  }
}

/* Secciones de la portada que aparecen subiendo la primera vez que entran en
   pantalla. Las dos clases las pone sitio.ts: el HTML no las trae y sin
   JavaScript se ve todo. La transicion va en la segunda: esconder es
   instantaneo y solo se anima la entrada. */
.aparicion {
  opacity: 0;
  transform: translateY(16px);
}

.aparicion--visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duracion-larga) var(--curva),
    transform var(--duracion-larga) var(--curva);
}

/* Si el teclado llega a una seccion que todavia no aparecio, se muestra ya:
   el foco nunca queda en algo invisible. */
.aparicion:focus-within {
  opacity: 1;
  transform: none;
}

/* Al imprimir sale todo, haya entrado en pantalla o no. */
@media print {
  .aparicion {
    opacity: 1;
    transform: none;
  }
}

/* Los desplegables del menu aparecen con un desvanecido corto cada vez que
   se abren: la animacion arranca cuando el panel empieza a mostrarse. */
.menu-desplegable[open] > .menu-panel,
.menu-movil[open] > .menu-movil__panel {
  animation: aparecer-menu var(--duracion-corta) var(--curva);
}

@keyframes aparecer-menu {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Movimiento reducido: nada se desplaza ni se escala. Los cambios de color
   (botones, la sombra de la tarjeta) se quedan: no son movimiento. */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .tarjeta:hover,
  .tarjeta:hover .tarjeta__imagen {
    transform: none;
  }

  .boton-pedido__conteo--rebote {
    animation: none;
  }

  /* sitio.ts no esconde secciones con movimiento reducido; si la preferencia
     cambia con la pagina abierta, las que ya estaban escondidas se ven. */
  .aparicion {
    opacity: 1;
    transform: none;
  }

  .menu-desplegable[open] > .menu-panel,
  .menu-movil[open] > .menu-movil__panel {
    animation: none;
  }
}

/* ---------- Temporada ---------- */

/*
 * config/temporada.json prende un tema por unas fechas: el body lleva
 * tema-<nombre> y arriba del encabezado va la franja de aviso, que lleva a
 * /ofertas/. Todo lo de abajo se apaga solo cuando el tema termina (o con
 * "tema": null), sin tocar esta hoja.
 */
.aviso-temporada {
  display: block;
  padding: 8px 16px;
  background: var(--negro);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.aviso-temporada:hover {
  text-decoration: underline;
}

/* La diapositiva de la temporada abre el banner: oscura, con el texto en
   blanco y el boton naranja, como las que llevan foto. */
.hero__generado.hero__generado--temporada {
  background: linear-gradient(150deg, #2b2b2b, var(--negro));
  color: #ffffff;
}

.hero__generado--temporada .hero__antetitulo {
  color: var(--naranja-claro);
}

.hero__generado--temporada .boton--secundario {
  background: var(--naranja);
}

/*
 * Halloween: noche morada con imagenes realistas (foto de cementerio,
 * calabazas, esqueleto, calavera, murcielagos, arañas, telarañas y una vela)
 * de Pixabay, uso comercial sin atribucion. Viven en
 * material/temporada/halloween/ y llegan como variables --deco-<nombre> (ver
 * src/estilos/decoracion.ts); cada una lleva "none" de respaldo, asi una
 * imagen que falte no borra el resto del fondo. Las piezas son fondos o
 * pseudoelementos sin texto y con pointer-events: none: nunca tapan un clic.
 * El fondo de la pagina, las tarjetas y los textos siguen siendo los de
 * siempre (el contraste AA no cambia). Sin animaciones: el diseño admite
 * solo dos. Sobre --noche el blanco da 18:1 y --naranja-claro 9:1.
 */
.tema-halloween {
  --noche: #1a0f24;
  --noche-media: #2e1845;
  --noche-texto: #e8def0;
  --velo-noche: rgba(14, 7, 22, 0.78);
}

.tema-halloween .aviso-temporada {
  background: linear-gradient(90deg, var(--noche), var(--noche-media), var(--noche));
  color: var(--naranja-claro);
}

/* Una calabaza tallada a cada lado del aviso. */
.tema-halloween .aviso-temporada::before,
.tema-halloween .aviso-temporada::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 23px;
  vertical-align: -6px;
  background: var(--deco-calabaza, none) no-repeat center / contain;
}

.tema-halloween .aviso-temporada::before {
  margin-right: 8px;
}

.tema-halloween .aviso-temporada::after {
  margin-left: 8px;
}

/* Una raya naranja y morada al pie del encabezado blanco. */
.tema-halloween .encabezado {
  background-image: linear-gradient(90deg, var(--naranja), #6b2fa0 50%, var(--naranja));
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 3px;
}

/* Una calabacita antes del antetitulo de cada seccion del inicio. */
.tema-halloween .seccion__antetitulo::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 17px;
  margin-right: 6px;
  vertical-align: -3px;
  background: var(--deco-calabaza, none) no-repeat center / contain;
}

/* Telarañas oscuras en la esquina de una ficha de categoria si y otra no. */
.tema-halloween .categoria-tarjeta {
  position: relative;
}

.tema-halloween .categoria-tarjeta:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 44px;
  border-top-right-radius: var(--radio-tarjeta);
  background: var(--deco-telarana, none) no-repeat right top / contain;
  opacity: 0.5;
  pointer-events: none;
}

/*
 * La primera diapositiva: la foto del cementerio bajo la luna, con un velo
 * para que el texto blanco se lea. En el celular el velo es parejo (el texto
 * ocupa todo el ancho); desde 1024 px se carga a la izquierda, donde va el
 * texto, y deja ver la luna. Arriba a la derecha cuelga una telaraña con su
 * araña; desde 1024 px, abajo a la derecha, el esqueleto con su guadaña.
 */
.tema-halloween .hero__generado--temporada {
  background:
    linear-gradient(var(--velo-noche), var(--velo-noche)),
    var(--deco-fondo-banner, none) center / cover no-repeat,
    linear-gradient(160deg, var(--noche-media), var(--noche));
}

.tema-halloween .hero__generado--temporada .hero__titulo {
  color: var(--naranja);
}

.tema-halloween .hero__generado--temporada::before,
.tema-halloween .hero__generado--temporada::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tema-halloween .hero__generado--temporada::before {
  top: 0;
  right: 0;
  width: 76px;
  height: 73px;
  background: var(--deco-telarana-clara, none) no-repeat right top / contain;
  opacity: 0.8;
}

.tema-halloween .hero__generado--temporada::after {
  display: none;
}

@media (min-width: 1024px) {
  .tema-halloween .hero__generado--temporada {
    background:
      linear-gradient(90deg, rgba(14, 7, 22, 0.92) 0%, rgba(14, 7, 22, 0.78) 38%, rgba(14, 7, 22, 0.2) 68%, rgba(14, 7, 22, 0.05) 100%),
      var(--deco-fondo-banner, none) center / cover no-repeat,
      linear-gradient(160deg, var(--noche-media), var(--noche));
  }

  .tema-halloween .hero__generado--temporada::before {
    width: 170px;
    height: 164px;
  }

  .tema-halloween .hero__generado--temporada::after {
    right: max(40px, calc(50% - 560px));
    bottom: 0;
    display: block;
    width: 176px;
    height: 320px;
    background: var(--deco-esqueleto, none) no-repeat center bottom / contain;
    filter: drop-shadow(0 0 16px rgba(240, 125, 32, 0.45));
  }
}

/*
 * La seccion de promociones del inicio: un panel de noche con las tarjetas
 * blancas. Por encima del borde se asoman un murcielago (izquierda) y tres
 * calabazas encendidas (derecha), sobre el fondo claro de la pagina; desde
 * 1024 px cuelga ademas una araña entre el titulo y "Ver todas". De borde a
 * borde hasta 1199 px; desde 1200, con las esquinas redondas.
 */
.tema-halloween #ofertas {
  position: relative;
  margin-top: 60px;
  padding-top: 28px;
  padding-bottom: 8px;
  background: linear-gradient(160deg, var(--noche-media), var(--noche));
  color: #ffffff;
}

.tema-halloween #ofertas::before,
.tema-halloween #ofertas::after,
.tema-halloween #ofertas .seccion__cabecera::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tema-halloween #ofertas::before {
  bottom: 100%;
  left: 12px;
  width: 104px;
  height: 56px;
  margin-bottom: -6px;
  background: var(--deco-murcielago, none) no-repeat center / contain;
}

.tema-halloween #ofertas::after {
  bottom: 100%;
  right: 12px;
  width: 156px;
  height: 50px;
  margin-bottom: -8px;
  background: var(--deco-calabazas, none) no-repeat center bottom / contain;
  filter: drop-shadow(0 0 10px rgba(240, 125, 32, 0.5));
}

.tema-halloween #ofertas .seccion__cabecera::after {
  display: none;
}

@media (min-width: 1024px) {
  .tema-halloween #ofertas::before {
    left: 24px;
    width: 150px;
    height: 82px;
  }

  .tema-halloween #ofertas::after {
    right: 32px;
    width: 230px;
    height: 74px;
  }

  /* El hilo es un degradado de 1 px; la araña va al final, con un brillo
     para que se vea sobre la noche. */
  .tema-halloween #ofertas .seccion__cabecera::after {
    top: 0;
    left: 54%;
    display: block;
    width: 44px;
    height: 112px;
    background:
      var(--deco-arana, none) no-repeat center bottom / 44px auto,
      linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) no-repeat center top / 1px 76px;
    filter: drop-shadow(0 0 6px rgba(240, 125, 32, 0.6));
  }
}

@media (min-width: 1200px) {
  .tema-halloween #ofertas {
    padding-right: 24px;
    padding-left: 24px;
    border-radius: var(--radio-tarjeta);
  }
}

.tema-halloween #ofertas .seccion__antetitulo,
.tema-halloween #ofertas .seccion__ver-todo {
  color: var(--naranja-claro);
}

.tema-halloween #ofertas .seccion__frase {
  color: var(--noche-texto);
}

/* El titulo de /ofertas/: la foto del cementerio con velo, una telaraña
   arriba a la derecha y la calabaza con su lapida abajo a la derecha. El
   texto va encima de todo y no pisa la calabaza. */
.tema-halloween .ofertas-cabecera {
  position: relative;
  overflow: hidden;
  margin: 12px 0 16px;
  padding: 28px 20px 120px;
  border-radius: var(--radio-tarjeta);
  background:
    linear-gradient(var(--velo-noche), var(--velo-noche)),
    var(--deco-fondo-banner, none) center 60% / cover no-repeat,
    linear-gradient(160deg, var(--noche-media), var(--noche));
  color: #ffffff;
}

.tema-halloween .ofertas-cabecera > * {
  position: relative;
  z-index: 1;
}

.tema-halloween .ofertas-cabecera::before,
.tema-halloween .ofertas-cabecera::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tema-halloween .ofertas-cabecera::before {
  top: 0;
  right: 0;
  width: 110px;
  height: 106px;
  background: var(--deco-telarana-clara, none) no-repeat right top / contain;
  opacity: 0.8;
}

.tema-halloween .ofertas-cabecera::after {
  right: 12px;
  bottom: 6px;
  width: 112px;
  height: 105px;
  background: var(--deco-calabaza-lapida, none) no-repeat right bottom / contain;
}

.tema-halloween .ofertas-cabecera h1 {
  color: var(--naranja);
}

.tema-halloween .ofertas-cabecera p {
  max-width: 62ch;
  color: var(--noche-texto);
}

@media (min-width: 720px) {
  .tema-halloween .ofertas-cabecera {
    padding: 40px 220px 40px 32px;
  }

  .tema-halloween .ofertas-cabecera::after {
    right: 40px;
    bottom: 10px;
    width: 168px;
    height: 158px;
  }
}

/* "-23%" en noche con letra naranja clara. */
.tema-halloween .etiqueta-descuento {
  background: var(--noche);
  color: var(--naranja-claro);
}

/* El pie, en noche en lugar de negro (los grises del pie dan lo mismo: los
   dos fondos tienen casi la misma luminancia). Sobre su borde se asoman un
   murcielago a la izquierda y, a la derecha, la vela y una calabaza; entre
   las dos va la calavera de la sorpresa (mas abajo). */
.tema-halloween .pie {
  position: relative;
  margin-top: 96px;
  background: var(--noche);
}

.tema-halloween .pie::before,
.tema-halloween .pie::after {
  content: "";
  position: absolute;
  bottom: 100%;
  pointer-events: none;
}

.tema-halloween .pie::before {
  right: max(16px, calc(50% - 584px));
  width: 240px;
  height: 92px;
  margin-bottom: -14px;
  background:
    var(--deco-vela, none) no-repeat left bottom / auto 88px,
    var(--deco-calabaza, none) no-repeat right bottom / auto 66px;
}

.tema-halloween .pie::after {
  left: max(16px, calc(50% - 584px));
  width: 120px;
  height: 64px;
  margin-bottom: 10px;
  background: var(--deco-murcielago-2, none) no-repeat center / contain;
}

/*
 * Piezas de la temporada que trae el HTML (paginas/temporada.ts): escondidas
 * salvo bajo un tema que las vista, asi una temporada nueva no muestra nada a
 * medio hacer.
 */
.escena-temporada,
.temporada-sorpresa,
.hero__niebla,
.ojos {
  display: none;
}

/*
 * Halloween en movimiento. Estas animaciones son de la temporada y no siguen
 * los 150-300 ms del diseño: un murcielago cruza la pantalla en segundos.
 * Todas se apagan con movimiento reducido (al final), y entonces el script
 * tampoco mueve ojos ni lanza vuelos.
 */

/* Ojos que siguen el puntero: el script pone data-mira (0 derecha, 2 abajo,
   4 izquierda, 6 arriba) y la pupila se corre --alcance hacia alla. */
.tema-halloween .ojos {
  position: absolute;
  display: flex;
  pointer-events: none;
}

.tema-halloween .ojos__ojo {
  position: relative;
  display: block;
  overflow: hidden;
}

.tema-halloween .ojos__pupila {
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
  transition: transform var(--duracion-media) var(--curva);
}

.tema-halloween .ojos[data-mira="0"] .ojos__pupila {
  transform: translate(var(--alcance), 0);
}

.tema-halloween .ojos[data-mira="1"] .ojos__pupila {
  transform: translate(calc(var(--alcance) * 0.7), calc(var(--alcance) * 0.7));
}

.tema-halloween .ojos[data-mira="2"] .ojos__pupila {
  transform: translate(0, var(--alcance));
}

.tema-halloween .ojos[data-mira="3"] .ojos__pupila {
  transform: translate(calc(var(--alcance) * -0.7), calc(var(--alcance) * 0.7));
}

.tema-halloween .ojos[data-mira="4"] .ojos__pupila {
  transform: translate(calc(var(--alcance) * -1), 0);
}

.tema-halloween .ojos[data-mira="5"] .ojos__pupila {
  transform: translate(calc(var(--alcance) * -0.7), calc(var(--alcance) * -0.7));
}

.tema-halloween .ojos[data-mira="6"] .ojos__pupila {
  transform: translate(0, calc(var(--alcance) * -1));
}

.tema-halloween .ojos[data-mira="7"] .ojos__pupila {
  transform: translate(calc(var(--alcance) * 0.7), calc(var(--alcance) * -0.7));
}

/* Unos ojos amarillos entre las tumbas de la primera diapositiva, con la
   pupila rasgada y un parpadeo de vez en cuando. */
.tema-halloween .ojos--oscuridad {
  --alcance: 4px;
  right: 34px;
  bottom: 70px;
  gap: 12px;
  filter: drop-shadow(0 0 6px rgba(255, 190, 0, 0.85));
  animation: parpadear 5.5s ease-in-out infinite;
}

.tema-halloween .ojos--oscuridad .ojos__ojo {
  width: 22px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff6b0, #ffc400 45%, #e06a00);
}

.tema-halloween .ojos--oscuridad .ojos__ojo:first-child {
  transform: rotate(14deg);
}

.tema-halloween .ojos--oscuridad .ojos__ojo:last-child {
  transform: rotate(-14deg);
}

.tema-halloween .ojos--oscuridad .ojos__pupila {
  width: 4px;
  height: 10px;
  border-radius: 50%;
  background: #140a00;
}

@media (min-width: 1024px) {
  .tema-halloween .ojos--oscuridad {
    right: auto;
    bottom: 22%;
    left: 60%;
    gap: 16px;
  }

  .tema-halloween .ojos--oscuridad .ojos__ojo {
    width: 28px;
    height: 15px;
  }
}

/* La niebla baja de la primera diapositiva, que va y viene despacio. */
.tema-halloween .hero__niebla {
  position: absolute;
  right: -10%;
  bottom: 0;
  left: -10%;
  display: block;
  height: 45%;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(225, 215, 240, 0.3), transparent 60%),
    radial-gradient(ellipse at 75% 100%, rgba(225, 215, 240, 0.24), transparent 55%);
  pointer-events: none;
  animation: niebla 14s ease-in-out infinite alternate;
}

/* El titulo de la temporada titila como un letrero al aparecer y queda con
   un brillo naranja. */
.tema-halloween .hero__generado--temporada .hero__titulo {
  animation: titilar-titulo 2.4s ease-out both;
}

/* Las calabazas encendidas y la vela titilan. */
.tema-halloween #ofertas::after,
.tema-halloween .pie::before {
  animation: titilar 2.8s ease-in-out infinite;
}

/* Arañas que bajan por su hilo y despues se mecen: la de la seccion de
   promociones (cuando la seccion aparece) y una en el titulo de cada
   categoria. Desde 1024 px, donde sobra espacio a la derecha. */
@media (min-width: 1024px) {
  .tema-halloween .hero__generado--temporada::after {
    transform-origin: 50% 100%;
    animation: vaiven 4.5s ease-in-out infinite alternate;
  }

  .tema-halloween #ofertas:not(.aparicion) .seccion__cabecera::after,
  .tema-halloween #ofertas.aparicion--visible .seccion__cabecera::after {
    transform-origin: 50% 0;
    animation:
      bajar-arana 1.6s cubic-bezier(0.3, 1.3, 0.5, 1) both,
      mecer 3.2s ease-in-out 1.6s infinite alternate;
  }

  .tema-halloween .encabezado-pagina:not(.ofertas-cabecera):not(:has(.buscador)) {
    position: relative;
  }

  .tema-halloween .encabezado-pagina:not(.ofertas-cabecera):not(:has(.buscador))::after {
    content: "";
    position: absolute;
    top: 0;
    right: 32px;
    width: 40px;
    height: 104px;
    background:
      var(--deco-arana, none) no-repeat center bottom / 40px auto,
      linear-gradient(rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 0.45)) no-repeat center top / 1px 72px;
    transform-origin: 50% 0;
    pointer-events: none;
    animation:
      bajar-arana 1.6s cubic-bezier(0.3, 1.3, 0.5, 1) both,
      mecer 3.2s ease-in-out 1.6s infinite alternate;
  }
}

/* Una telaraña oscura en la esquina de la foto de cada ficha. */
.tema-halloween .ficha__galeria {
  position: relative;
}

.tema-halloween .ficha__galeria::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 89px;
  border-top-right-radius: var(--radio-tarjeta);
  background: var(--deco-telarana, none) no-repeat right top / contain;
  opacity: 0.45;
  pointer-events: none;
}

/* Los murcielagos que cruzan la pantalla: capa fija por encima de todo que
   no atrapa clics. Cada uno vuela por su altura y con su demora, y aletea
   (su imagen va en ::before y se encoge y estira). */
.tema-halloween .escena-temporada {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.tema-halloween .escena-temporada__vuelo {
  position: absolute;
  top: 72%;
  left: -170px;
  display: block;
  width: 120px;
  height: 64px;
  opacity: 0;
}

.tema-halloween .escena-temporada__vuelo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--deco-murcielago-2, none) no-repeat center / contain;
  filter: drop-shadow(0 0 8px rgba(240, 125, 32, 0.55));
  pointer-events: none;
  animation: aletear 0.22s ease-in-out infinite alternate;
}

.tema-halloween .escena-temporada__vuelo:nth-child(2) {
  top: 58%;
  width: 84px;
  height: 45px;
  animation-delay: 0.35s;
}

.tema-halloween .escena-temporada__vuelo:nth-child(3) {
  top: 86%;
  width: 150px;
  height: 80px;
  animation-delay: 0.7s;
}

.tema-halloween .escena-temporada__vuelo:nth-child(4) {
  top: 64%;
  width: 70px;
  height: 37px;
  animation-delay: 1.05s;
}

.tema-halloween .escena-temporada__vuelo:nth-child(5) {
  top: 80%;
  width: 100px;
  height: 53px;
  animation-delay: 1.4s;
}

.tema-halloween .escena-temporada__vuelo:nth-child(6) {
  top: 50%;
  width: 60px;
  height: 32px;
  animation-delay: 1.7s;
}

.tema-halloween.temporada-entrada .escena-temporada__vuelo,
.tema-halloween.temporada-susto .escena-temporada__vuelo {
  animation-name: volar;
  animation-duration: 2.6s;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

/* La sorpresa: la calavera entre la vela y la calabaza del pie, con las
   pupilas encendidas en las cuencas (medidas sobre la imagen de 240 x 211,
   que aqui se ve a 92 x 81). Al tocarla tiembla, sus ojos se ponen rojos y
   sale el globo. */
.tema-halloween .temporada-sorpresa {
  position: absolute;
  right: calc(max(16px, 50% - 584px) + 80px);
  bottom: 100%;
  display: block;
  width: 92px;
  height: 81px;
  margin-bottom: -14px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--deco-calavera, none) no-repeat center bottom / contain;
  cursor: pointer;
}

.tema-halloween .ojos--calavera {
  --alcance: 3px;
  inset: 0;
  display: block;
}

.tema-halloween .ojos--calavera .ojos__ojo {
  position: absolute;
  top: 22px;
  left: 38px;
  width: 16px;
  height: 15px;
  border-radius: 50%;
}

.tema-halloween .ojos--calavera .ojos__ojo:last-child {
  top: 14px;
  left: 62px;
  width: 12px;
  height: 14px;
}

.tema-halloween .ojos--calavera .ojos__pupila {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0 22%, #ff8a1c 50%, rgba(255, 110, 0, 0) 75%);
}

.tema-halloween.temporada-susto .ojos--calavera .ojos__pupila {
  background: radial-gradient(circle, #ffd0d0 0 22%, #ff1a1a 50%, rgba(255, 0, 0, 0) 75%);
}

.tema-halloween.temporada-susto .temporada-sorpresa {
  animation: temblar 0.6s ease-in-out;
}

.tema-halloween .temporada-sorpresa__globo {
  position: absolute;
  right: 50%;
  bottom: 100%;
  width: max-content;
  max-width: 220px;
  margin-bottom: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: var(--sombra-flecha);
  color: var(--noche);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duracion-larga) var(--curva),
    transform var(--duracion-larga) var(--curva);
  pointer-events: none;
}

.tema-halloween.temporada-susto .temporada-sorpresa__globo {
  opacity: 1;
  transform: none;
}

@keyframes parpadear {
  0%,
  90%,
  96%,
  100% {
    transform: scaleY(1);
  }

  93% {
    transform: scaleY(0.1);
  }
}

@keyframes niebla {
  from {
    transform: translateX(-5%);
  }

  to {
    transform: translateX(5%);
  }
}

@keyframes titilar-titulo {
  0% {
    opacity: 0;
  }

  12%,
  20%,
  36% {
    opacity: 1;
  }

  16% {
    opacity: 0.2;
  }

  30% {
    opacity: 0.45;
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 18px rgba(240, 125, 32, 0.5);
  }
}

@keyframes titilar {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(240, 125, 32, 0.45));
  }

  45% {
    filter: drop-shadow(0 0 16px rgba(255, 165, 40, 0.8));
  }

  55% {
    filter: drop-shadow(0 0 6px rgba(240, 125, 32, 0.35));
  }
}

@keyframes vaiven {
  from {
    transform: rotate(-1.5deg);
  }

  to {
    transform: rotate(1.5deg);
  }
}

@keyframes bajar-arana {
  from {
    height: 34px;
  }
}

@keyframes mecer {
  from {
    transform: rotate(-4deg);
  }

  to {
    transform: rotate(4deg);
  }
}

@keyframes aletear {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0.55);
  }
}

@keyframes volar {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.7) rotate(-8deg);
  }

  50% {
    transform: translate(55vw, -28vh) scale(1) rotate(6deg);
  }

  100% {
    opacity: 1;
    transform: translate(calc(100vw + 340px), -70vh) scale(0.5) rotate(-6deg);
  }
}

@keyframes temblar {
  0%,
  100% {
    transform: none;
  }

  20% {
    transform: rotate(-9deg);
  }

  40% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(-5deg);
  }

  80% {
    transform: rotate(3deg);
  }
}

/* Movimiento reducido: la temporada se queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .tema-halloween .ojos--oscuridad,
  .tema-halloween .hero__niebla,
  .tema-halloween .hero__generado--temporada .hero__titulo,
  .tema-halloween #ofertas::after,
  .tema-halloween .pie::before,
  .tema-halloween .hero__generado--temporada::after,
  .tema-halloween #ofertas:not(.aparicion) .seccion__cabecera::after,
  .tema-halloween #ofertas.aparicion--visible .seccion__cabecera::after,
  .tema-halloween .encabezado-pagina:not(.ofertas-cabecera):not(:has(.buscador))::after,
  .tema-halloween .escena-temporada__vuelo::before,
  .tema-halloween.temporada-susto .temporada-sorpresa {
    animation: none;
  }

  .tema-halloween .escena-temporada {
    display: none;
  }
}