/* ============================================================
   Comercial Zafiro - sistema de diseno
   Tema bloqueado en claro. Decision deliberada: la fotografia de
   producto de Kolida viene sobre fondo blanco, un tema oscuro la
   degradaria. Sin inversion de secciones salvo el footer, que
   cierra la pagina.

   Escala de radios (regla unica, aplicada en todo el sitio):
     - botones e inputs .... 10px
     - tarjetas e imagenes . 14px
     - chips de filtro ..... pill (unico caso de radio completo)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* marca, extraida del logo */
  --azul:          #0060fe;
  --azul-press:    #0b4bc4;
  --azul-suave:    #eef4ff;
  --grafito:       #353b42;

  /* neutros frios, una sola familia */
  --tinta:         #1a1f26;
  --tinta-2:       #3d4550;
  --apagado:       #5f6975;
  --apagado-2:     #8b95a1;
  --linea:         #e4e8ed;
  --linea-fuerte:  #cfd6de;
  --superficie:    #ffffff;
  --superficie-2:  #f6f8fa;
  --superficie-3:  #eef1f5;

  --exito:         #0f7a4d;

  /* radios */
  --r-control: 10px;
  --r-tarjeta: 14px;

  /* sombras tintadas al matiz del fondo, nunca negro puro */
  --sombra-1: 0 1px 2px rgba(26, 31, 38, .05), 0 1px 3px rgba(26, 31, 38, .04);
  --sombra-2: 0 4px 12px rgba(26, 31, 38, .07), 0 1px 3px rgba(26, 31, 38, .05);
  --sombra-3: 0 12px 32px rgba(26, 31, 38, .10), 0 2px 8px rgba(26, 31, 38, .05);

  /* curvas propias, las nativas no tienen fuerza */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* capas, escala documentada y cerrada */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 50;
  --z-flotante: 60;

  --ancho: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--azul); color: #fff; }

.salta-a-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--azul); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-control) 0;
  z-index: var(--z-flotante); font-weight: 500;
}
.salta-a-contenido:focus { left: 0; }

/* ---------- 3. Utilidades de layout ---------- */
.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.seccion--ajustada { padding-block: clamp(2.5rem, 5vw, 4rem); }
.seccion--gris { background: var(--superficie-2); }

.encabezado-seccion { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.encabezado-seccion p { margin-top: .875rem; color: var(--apagado); font-size: 1.0625rem; max-width: 60ch; }

.display {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  letter-spacing: -.038em;
  line-height: 1.05;
  font-weight: 600;
  text-wrap: balance;
}

/* Nota sobre mix-blend-mode: multiply, usado mas abajo en cada contenedor de
   foto. La fotografia de producto de Kolida viene sobre fondo blanco, y
   multiplicar la funde con la superficie clara de la tarjeta en vez de dejar
   un recuadro blanco pegado. Cada contenedor lleva isolation: isolate para
   que la mezcla no atraviese al fondo de la pagina. */
.titulo-2 {
  font-size: clamp(1.75rem, 1.3rem + 1.55vw, 2.5rem);
  letter-spacing: -.032em;
}
.titulo-3 { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); letter-spacing: -.02em; }

.mono {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.icono { width: 1.25em; height: 1.25em; flex: none; }
.icono--sm { width: 1em; height: 1em; }

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-size: .9375rem; font-weight: 500; line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              transform 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primario { background: var(--azul); color: #fff; box-shadow: var(--sombra-1); }
.btn--primario:hover { background: var(--azul-press); box-shadow: var(--sombra-2); }

.btn--wa { background: var(--azul); color: #fff; box-shadow: var(--sombra-1); }
.btn--wa:hover { background: var(--azul-press); box-shadow: var(--sombra-2); }

.btn--linea { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn--linea:hover { border-color: var(--tinta-2); background: var(--superficie-2); }

.btn--fantasma { background: transparent; color: var(--tinta); border-color: transparent; padding-inline: .625rem; }
.btn--fantasma:hover { background: var(--superficie-3); }

.btn--bloque { width: 100%; }
.btn--sm { padding: .625rem 1rem; font-size: .875rem; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .375rem;
  font-weight: 500; color: var(--azul); white-space: nowrap;
}
.enlace-flecha svg { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .enlace-flecha:hover svg { transform: translateX(3px); }
}

/* ---------- 5. Navegacion ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--linea);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: #fff; } }

.nav__fila {
  height: 68px;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__logo img { height: 30px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__menu a {
  padding: .5rem .75rem; border-radius: 8px;
  font-size: .9375rem; color: var(--tinta-2);
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.nav__menu a:hover { color: var(--tinta); background: var(--superficie-3); }
.nav__menu a[aria-current="page"] { color: var(--azul); font-weight: 500; }
.nav__acciones { display: flex; align-items: center; gap: .625rem; margin-left: .5rem; }

.nav__toggle { display: none; background: none; border: 0; padding: .5rem; border-radius: 8px; cursor: pointer; margin-left: auto; }
.nav__toggle:hover { background: var(--superficie-3); }

@media (max-width: 900px) {
  .nav__menu, .nav__acciones { display: none; }
  .nav__toggle { display: block; }
  .nav[data-abierto="true"] .nav__menu {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; inset-inline: 0; top: 68px;
    background: var(--superficie); border-bottom: 1px solid var(--linea);
    padding: .75rem var(--gutter) 1.25rem; gap: .125rem;
    box-shadow: var(--sombra-2);
  }
  .nav[data-abierto="true"] .nav__menu a { padding: .75rem .5rem; font-size: 1rem; }
  .nav[data-abierto="true"] .nav__acciones { display: flex; padding: .75rem var(--gutter) 1.25rem; }
}

/* ---------- 6. Hero, split asimetrico ---------- */
.hero { padding-top: clamp(2.5rem, 5vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } }

.hero__copy p {
  margin-top: 1.125rem;
  font-size: 1.0625rem; line-height: 1.6; color: var(--apagado);
  max-width: 46ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.875rem; }

.hero__figura {
  position: relative; isolation: isolate;
  border-radius: var(--r-tarjeta);
  background: linear-gradient(160deg, var(--superficie-2) 0%, var(--superficie-3) 100%);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  display: grid; place-items: center;
  min-height: 340px;
}
.hero__figura img { max-height: 460px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- 7. Banda de respaldo ---------- */
.banda {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
}
.banda__lista {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .banda__lista { grid-template-columns: repeat(3, 1fr); } }
.banda__item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.5rem 0;
}
@media (min-width: 780px) {
  .banda__item { padding: 1.75rem clamp(1rem, 3vw, 2rem); }
  .banda__item + .banda__item { border-left: 1px solid var(--linea); }
  .banda__item:first-child { padding-left: 0; }
  .banda__item:last-child { padding-right: 0; }
}
@media (max-width: 779px) { .banda__item + .banda__item { border-top: 1px solid var(--linea); } }
.banda__item svg { color: var(--azul); margin-top: .125rem; }
.banda__item strong { display: block; font-weight: 600; font-size: .9375rem; }
.banda__item span { display: block; color: var(--apagado); font-size: .875rem; margin-top: .1875rem; }

/* ---------- 8. Bento de categorias ---------- */
.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(230px, auto); }
  .bento__celda:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .bento__celda:nth-child(2) { grid-row: span 1; }
  .bento__celda:nth-child(3) { grid-row: span 1; }
  .bento__celda:nth-child(5) { grid-column: span 2; }
  /* la celda grande abarca dos filas: la foto llena el alto disponible
     en vez de dejar un hueco entre imagen y titulo */
  .bento__celda:nth-child(1) .bento__img { max-height: none; }
}

/* Dos filas de grilla en vez de imagen en absoluto: asi el texto y la foto
   nunca pueden solaparse, ni en 360px ni en la celda grande. */
.bento__celda {
  position: relative;
  display: grid; grid-template-rows: minmax(80px, 1fr) auto; gap: 1rem;
  min-height: 220px;
  padding: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  overflow: hidden; isolation: isolate;
  background: var(--superficie);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.bento__celda:nth-child(1) { background: var(--superficie-2); }
.bento__celda:nth-child(4) { background: var(--azul-suave); }
@media (hover: hover) and (pointer: fine) {
  .bento__celda:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); transform: translateY(-2px); }
  .bento__celda:hover .bento__img { transform: scale(1.03); }
}
.bento__img {
  width: 100%; height: 100%;
  max-height: 160px;
  object-fit: contain; object-position: right center;
  mix-blend-mode: multiply;
  transition: transform 240ms var(--ease-out);
  pointer-events: none;
}
.bento__celda:nth-child(1) .bento__img { max-height: 320px; object-position: center center; }
.bento__texto { position: relative; max-width: 36ch; }
.bento__texto h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.bento__celda:nth-child(1) .bento__texto h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.bento__texto p { margin-top: .375rem; color: var(--apagado); font-size: .9rem; line-height: 1.5; }
.bento__conteo { margin-top: .875rem; color: var(--azul); font-weight: 500; font-size: .875rem; display: inline-flex; align-items: center; gap: .375rem; }
.bento__celda a::after { content: ''; position: absolute; inset: 0; }

/* ---------- 9. Tarjeta de producto ---------- */
.rejilla-productos {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.rejilla-productos > * { display: flex; }
.rejilla-productos > .item-catalogo > .producto { width: 100%; }

.producto {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .producto:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
  .producto:hover .producto__img img { transform: scale(1.04); }
}
/* Contenedor de foto con proporcion fija. La imagen va posicionada en
   absoluto en vez de usar height:100%: como el alto del contenedor sale de
   aspect-ratio, el porcentaje no resuelve y la foto cuadrada se recortaba. */
.producto__img {
  position: relative;
  aspect-ratio: 4 / 3; isolation: isolate;
  background: var(--superficie-2);
  overflow: hidden;
}
.producto__img img {
  position: absolute; top: 1rem; left: 1rem;
  width: calc(100% - 2rem); height: calc(100% - 2rem);
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 240ms var(--ease-out);
}
.producto__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.125rem 1.25rem; gap: .5rem; }
.producto__cat { color: var(--apagado-2); font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; }
.producto__nombre {
  font-size: 1.0625rem; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.producto__nombre a::after { content: ''; position: absolute; inset: 0; z-index: var(--z-base); }
.producto__desc {
  color: var(--apagado); font-size: .875rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.producto__pie { margin-top: auto; padding-top: .875rem; }
.producto__pie .btn { position: relative; z-index: 2; }

/* ---------- 10. Carrusel horizontal ---------- */
.carrusel {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 280px);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.carrusel > * { scroll-snap-align: start; }
.carrusel::-webkit-scrollbar { height: 8px; }
.carrusel::-webkit-scrollbar-track { background: var(--superficie-3); border-radius: 99px; }
.carrusel::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 99px; }
.carrusel::-webkit-scrollbar-thumb:hover { background: var(--apagado-2); }

.fila-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 640px) {
  .fila-titulo { flex-direction: column; align-items: flex-start; gap: .625rem; }
}

/* ---------- 11. Sectores ---------- */
.sectores { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sectores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sectores { grid-template-columns: repeat(4, 1fr); } }

.sector { display: flex; flex-direction: column; }
.sector__img {
  position: relative;
  aspect-ratio: 3 / 2; isolation: isolate;
  border-radius: var(--r-tarjeta);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.sector__img img {
  position: absolute; top: 1.25rem; left: 1.25rem;
  width: calc(100% - 2.5rem); height: calc(100% - 2.5rem);
  object-fit: contain; mix-blend-mode: multiply;
}
.sector h3 { margin-top: 1rem; font-size: 1.0625rem; }
.sector p { margin-top: .375rem; color: var(--apagado); font-size: .9rem; line-height: 1.55; }

/* ---------- 12. Bloque Mercado Publico ---------- */
.mp {
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--azul-suave);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .mp { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.mp h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); letter-spacing: -.03em; }
.mp p { margin-top: .875rem; color: var(--tinta-2); max-width: 54ch; }
.mp__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.mp__datos { display: grid; gap: .875rem; }
.mp__dato {
  background: var(--superficie); border: 1px solid #d9e4fb;
  border-radius: var(--r-control); padding: .875rem 1rem;
}
.mp__dato span { display: block; color: var(--apagado); font-size: .8125rem; }
.mp__dato strong { display: block; font-size: 1rem; margin-top: .125rem; }

/* ---------- 13. Formulario ---------- */
.contacto-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contacto-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } }

.campo { display: grid; gap: .5rem; margin-bottom: 1.125rem; }
.campo label { font-size: .875rem; font-weight: 500; color: var(--tinta); }
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: .75rem .875rem;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  font-size: .9375rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--apagado); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 96, 254, .16);
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo__ayuda { font-size: .8125rem; color: var(--apagado); }
.campo__error { font-size: .8125rem; color: #b42318; display: none; }
.campo[data-error="true"] input,
.campo[data-error="true"] textarea { border-color: #b42318; }
.campo[data-error="true"] .campo__error { display: block; }

.datos-contacto { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); overflow: hidden; }
.datos-contacto li { background: var(--superficie); padding: 1.125rem 1.25rem; display: flex; gap: .875rem; align-items: flex-start; }
.datos-contacto svg { color: var(--azul); margin-top: .1875rem; }
.datos-contacto span { display: block; color: var(--apagado); font-size: .8125rem; }
.datos-contacto strong { display: block; font-weight: 500; margin-top: .0625rem; }

/* ---------- 14. Catalogo: filtros y buscador ---------- */
.catalogo { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .catalogo { grid-template-columns: 250px minmax(0, 1fr); } }

.filtros { position: sticky; top: 92px; }
@media (max-width: 999px) { .filtros { position: static; } }

/* En escritorio la lista va siempre abierta y el resumen no existe.
   Bajo 1000px se pliega: si no, 27 filtros empujan el primer producto
   fuera de pantalla en tablet y telefono. */
.filtros__resumen { display: none; }
.filtros__caja > summary::-webkit-details-marker { display: none; }
.filtros__caja > summary::marker { content: ''; }

@media (max-width: 999px) {
  .filtros__caja { border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); }
  .filtros__resumen {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    list-style: none; cursor: pointer;
    min-height: 48px; padding: .75rem 1rem;
    font-size: .9375rem; font-weight: 500;
  }
  .filtros__resumen svg { transition: transform 180ms var(--ease-out); color: var(--apagado); }
  .filtros__caja[open] > .filtros__resumen { border-bottom: 1px solid var(--linea); }
  .filtros__caja[open] > .filtros__resumen svg { transform: rotate(180deg); }
  .filtros__caja > .filtros__grupo { padding: 1rem 1rem 0; }
  .filtros__caja > .filtros__grupo:last-child { padding-bottom: 1rem; }
  .filtros__grupo + .filtros__grupo { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
}

@media (min-width: 1000px) {
  .filtros__grupo + .filtros__grupo { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--linea); }
}
.filtros__titulo { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); margin-bottom: .75rem; }
.filtros__lista { display: grid; gap: .125rem; }
.filtros__lista button {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left;
  padding: .5rem .625rem; border: 0; background: none; border-radius: 8px;
  font-size: .9375rem; color: var(--tinta-2); cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.filtros__lista button:hover { background: var(--superficie-3); color: var(--tinta); }
.filtros__lista button[aria-pressed="true"] { background: var(--azul-suave); color: var(--azul); font-weight: 500; }
.filtros__lista button em { font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--apagado-2); }
.filtros__lista button[aria-pressed="true"] em { color: var(--azul); }

.buscador { position: relative; margin-bottom: 1.5rem; }
.buscador input {
  width: 100%;
  padding: .75rem .875rem .75rem 2.625rem;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  font-size: .9375rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.buscador input::placeholder { color: var(--apagado); }
.buscador input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 96, 254, .16);
}
.buscador svg { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--apagado); pointer-events: none; }

.barra-resultados { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.barra-resultados p { color: var(--apagado); font-size: .9375rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--linea-fuerte); border-radius: 99px;
  background: var(--superficie); font-size: .8125rem; cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.chip:hover { background: var(--superficie-3); }

.vacio { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1.5rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--r-tarjeta); background: var(--superficie-2); }
.vacio h3 { font-size: 1.125rem; }
.vacio p { margin-top: .5rem; color: var(--apagado); max-width: 40ch; margin-inline: auto; }
.vacio .btn { margin-top: 1.25rem; }

/* ---------- 15. Ficha de producto ---------- */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .875rem; color: var(--apagado); padding-block: 1.5rem; }
.migas a:hover { color: var(--tinta); }
.migas svg { color: var(--apagado-2); }
.migas [aria-current] { color: var(--tinta); }

.ficha { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.galeria__principal {
  border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--superficie-2);
  position: relative;
  aspect-ratio: 4 / 3; isolation: isolate; overflow: hidden;
}
.galeria__principal img {
  position: absolute; inset: clamp(1.5rem, 4vw, 2.5rem);
  width: auto; height: auto;
  inline-size: calc(100% - 2 * clamp(1.5rem, 4vw, 2.5rem));
  block-size: calc(100% - 2 * clamp(1.5rem, 4vw, 2.5rem));
  object-fit: contain; mix-blend-mode: multiply;
}
.galeria__miniaturas { display: flex; gap: .625rem; margin-top: .75rem; flex-wrap: wrap; }
.galeria__miniaturas button {
  width: 68px; height: 68px; padding: .375rem; isolation: isolate;
  border: 1px solid var(--linea); border-radius: var(--r-control);
  background: var(--superficie-2); cursor: pointer;
  transition: border-color 160ms var(--ease-out);
}
.galeria__miniaturas button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.galeria__miniaturas button[aria-pressed="true"] { border-color: var(--azul); }

.ficha__info h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -.035em; }
.ficha__modelo { font-family: var(--mono); font-size: .875rem; color: var(--apagado); margin-top: .625rem; }
.ficha__desc { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.65; color: var(--tinta-2); max-width: 52ch; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ficha__nota { margin-top: 1.25rem; font-size: .875rem; color: var(--apagado); max-width: 46ch; }
.ficha__meta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); display: grid; gap: .75rem; }
.ficha__meta div { display: flex; gap: .75rem; font-size: .9375rem; }
.ficha__meta dt { color: var(--apagado); min-width: 8.5rem; }
.ficha__meta dd { margin: 0; font-weight: 500; }

/* ---------- 16. Footer ---------- */
.pie { background: var(--grafito); color: #d9dee5; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pie__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie__logo img { height: 34px; width: auto; }
.pie__grid p { margin-top: 1rem; font-size: .9375rem; line-height: 1.6; color: #aab3bf; max-width: 34ch; }
.pie h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8792a0; font-weight: 600; margin-bottom: 1rem; }
.pie li + li { margin-top: .625rem; }
.pie a { font-size: .9375rem; color: #d9dee5; transition: color 160ms var(--ease-out); }
.pie a:hover { color: #fff; }
.pie__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: #8792a0;
}

/* ---------- 17. Boton flotante WhatsApp ---------- */
.wa-flotante {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-flotante);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8125rem 1.125rem;
  background: var(--azul); color: #fff;
  border-radius: 99px; box-shadow: var(--sombra-3);
  font-size: .9375rem; font-weight: 500;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.wa-flotante:hover { background: var(--azul-press); }
.wa-flotante:active { transform: translateY(1px); }
@media (max-width: 520px) { .wa-flotante span { display: none; } .wa-flotante { padding: .875rem; } }

/* ---------- 18. Revelado al entrar en viewport ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* El escalonado va en los hijos: son ellos los que entran, 60ms entre uno y
     otro para que no aparezca todo de golpe. */
  .revelar > * { opacity: 0; transform: translateY(14px); }
  .revelar.visible > * {
    opacity: 1; transform: none;
    transition: opacity 280ms var(--ease-out) calc(var(--i, 0) * 60ms),
                transform 280ms var(--ease-out) calc(var(--i, 0) * 60ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .revelar > * { opacity: 1; transform: none; }
}

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

/* ---------- 20. Slider de destacados ----------
   Curvas y duraciones: la pista se mueve en pantalla, asi que usa ease-in-out;
   el contenido de cada lamina entra, asi que usa ease-out. La pista dura 520ms
   por ser una seccion explicativa de marketing, no un control de interfaz.
   Solo se animan transform y opacity. */
.slider { position: relative; }

.slider__viewport {
  overflow: hidden;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  touch-action: pan-y;
}

.slider__pista {
  display: flex;
  will-change: transform;
  transition: transform 520ms var(--ease-in-out);
}
.slider[data-arrastrando="true"] .slider__pista { transition: none; }

.slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 820px) {
  .slide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .slide__media { order: 2; }
  .slide__texto { order: 1; }
}

.slide__media {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 3;
  background: var(--superficie-2);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
}
.slide__media img {
  position: absolute; top: 6%; left: 6%;
  width: 88%; height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* la foto entra creciendo apenas: nunca desde scale(0) */
  transform: scale(1.06);
  transition: transform 700ms var(--ease-out);
}
.slide[data-activa="true"] .slide__media img { transform: scale(1); }

.slide__meta {
  font-family: var(--mono); font-size: .8125rem;
  color: var(--apagado); letter-spacing: .02em;
}
.slide__nombre {
  margin-top: .5rem;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  letter-spacing: -.035em;
}
.slide__desc {
  margin-top: .875rem; max-width: 42ch;
  color: var(--apagado); font-size: 1.0625rem; line-height: 1.6;
}
.slide__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Entrada escalonada del texto: 60ms entre piezas, nada entra a la vez. */
.slide__texto > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.slide[data-activa="true"] .slide__texto > * { opacity: 1; transform: none; }
.slide[data-activa="true"] .slide__meta   { transition-delay:  60ms; }
.slide[data-activa="true"] .slide__nombre { transition-delay: 120ms; }
.slide[data-activa="true"] .slide__desc   { transition-delay: 180ms; }
.slide[data-activa="true"] .slide__cta    { transition-delay: 240ms; }

/* Los controles van bajo el visor. Flotando sobre la lamina, la flecha
   izquierda se montaba encima del texto de la descripcion. */
.slider__controles {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1.25rem;
}
.slider__flecha {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linea-fuerte); border-radius: 99px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out),
              background-color 160ms var(--ease-out);
}
.slider__flecha--prev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .slider__flecha:hover { border-color: var(--tinta-2); background: var(--superficie-2); }
  .slider__flecha--next:hover { transform: scale(1.06); }
  .slider__flecha--prev:hover { transform: rotate(180deg) scale(1.06); }
}
.slider__flecha--next:active { transform: scale(.94); }
.slider__flecha--prev:active { transform: rotate(180deg) scale(.94); }

.slider__puntos { display: flex; justify-content: center; gap: .5rem; }
.slider__punto {
  position: relative; overflow: hidden;
  width: 40px; height: 4px; padding: 0;
  border: 0; border-radius: 99px;
  background: var(--linea-fuerte); cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.slider__punto::after {           /* area de toque de 44px sin engordar la barra */
  content: ''; position: absolute; inset: -20px -4px;
}
.slider__punto:hover { background: var(--apagado-2); }
.slider__barra {
  display: block; height: 100%; width: 100%;
  background: var(--azul); border-radius: 99px;
  transform: scaleX(0); transform-origin: left center;
}
/* La barra avanza a ritmo constante, por eso linear y no una curva. */
.slider__punto[aria-selected="true"] .slider__barra { animation: barra-avance var(--autoplay, 6500ms) linear forwards; }
.slider[data-pausado="true"] .slider__punto[aria-selected="true"] .slider__barra { animation-play-state: paused; }
@keyframes barra-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }

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

/* ---------- 21. Entrada del hero ----------
   Una sola vez por carga. Animacion CSS (no JS) para que corra fuera del hilo
   principal mientras la pagina todavia esta cargando. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *, .hero__figura {
    animation: hero-entra 520ms var(--ease-out) both;
  }
  .hero__copy > *:nth-child(1) { animation-delay:  40ms; }
  .hero__copy > *:nth-child(2) { animation-delay: 100ms; }
  .hero__copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero__figura               { animation-delay: 120ms; }
}
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 22. Elevacion de la barra al bajar ----------
   Se anima la opacidad de un pseudoelemento, no la sombra: opacity no repinta. */
.nav::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 1px;
  box-shadow: 0 6px 20px rgba(26, 31, 38, .10);
  background: var(--linea);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.nav[data-elevada="true"]::after { opacity: 1; }
.centinela-nav { position: absolute; top: 0; height: 1px; width: 100%; pointer-events: none; }

/* ---------- 23. Menu movil, entra desde la barra ---------- */
@media (max-width: 900px) {
  .nav[data-abierto="true"] .nav__menu,
  .nav[data-abierto="true"] .nav__acciones {
    transform-origin: top center;
    animation: menu-baja 200ms var(--ease-out) both;
  }
  .nav[data-abierto="true"] .nav__acciones { animation-delay: 40ms; }
}
@keyframes menu-baja {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 25. Galeria de la ficha, fundido ----------
   Un desenfoque minimo tapa el salto entre dos fotos distintas. */
#imagen-principal {
  transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}
#imagen-principal[data-cambiando="true"] { opacity: 0; filter: blur(6px); }

/* ---------- 26. Catalogo, aparicion de resultados ----------
   Filtrar pasa decenas de veces por sesion: solo opacidad, 160ms, sin
   desplazamiento. Lo justo para que la rejilla no cambie de golpe. */
@media (prefers-reduced-motion: no-preference) {
  .item-catalogo[data-entra="true"] { animation: item-aparece 160ms var(--ease-out) both; }
}
@keyframes item-aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 27. Movimiento reducido ----------
   Menos y mas suave, no cero: se conservan los fundidos que ayudan a entender
   el cambio y se quita todo desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .slider__pista { transition: none; }
  .slide__media img { transform: none; transition: none; }
  .slide__texto > * { transform: none; transition: opacity 200ms ease; }
  .slider__punto[aria-selected="true"] .slider__barra { animation: none; transform: scaleX(1); }
  .hero__copy > *, .hero__figura { animation: none; }
  .nav[data-abierto="true"] .nav__menu,
  .nav[data-abierto="true"] .nav__acciones { animation: none; }
}

/* ---------- 28. Areas de toque en tactil ----------
   Bajo 1024px se asume pantalla tactil (telefono o tablet). Apple y Google
   piden 44 y 48 px de lado; WCAG 2.5.8 exige 24. Se sube todo lo que se toca:
   botones, nav, filtros, chips y enlaces de listas. Los enlaces incrustados en
   un parrafo quedan fuera, que es la excepcion que contempla la norma. */
@media (max-width: 1023px) {
  .btn { min-height: 46px; }
  .btn--sm { min-height: 44px; padding-block: .75rem; }

  .nav__fila { height: 64px; }
  .nav__toggle { padding: .875rem; min-width: 48px; min-height: 48px; display: grid; place-items: center; }
  .nav__logo { display: flex; align-items: center; min-height: 46px; padding-block: .5rem; }

  .nav__menu a { min-height: 46px; display: flex; align-items: center; }

  .filtros__lista button { min-height: 46px; padding-block: .75rem; }
  .chip { min-height: 40px; padding-block: .5rem; }

  .pie li + li { margin-top: .125rem; }
  .pie ul a { display: inline-flex; align-items: center; min-height: 44px; }

  .datos-contacto a { display: inline-flex; align-items: center; min-height: 40px; }
  .enlace-flecha { display: inline-flex; min-height: 44px; align-items: center; }

  .migas { gap: .25rem .375rem; }
  .migas a { display: inline-flex; align-items: center; min-height: 40px; }

  .galeria__miniaturas button { width: 72px; height: 72px; }

  .bento__texto h3 a,
  .producto__nombre a { display: inline-block; }
}

/* ---------- 19. Impresion ---------- */
@media print {
  .nav, .wa-flotante, .pie, .filtros { display: none; }
  body { color: #000; }
}