/* --------------------------------------------------------------------------
   PIEDRA NATURAL & MÁS — Catálogo de clientes
   Identidad tomada de piedranaturalymas.com.mx

   Tres reglas que definen la marca y hay que respetar en todo lo nuevo:
     1. Esquinas rectas. El radio de borde es 0 en todas partes.
     2. Rejilla de líneas finas negras en lugar de sombras difusas. Cuando algo
        necesita despegarse del fondo se usa una sombra DURA y desplazada
        (--sombra-dura), nunca un desenfoque.
     3. Interfaz (menús, botones, etiquetas, claves) en PP Fraktion Mono
        MAYÚSCULAS; textos y títulos en PP Fragment.

   El sitio de la marca es de un solo tema claro sobre fondo crema, así que
   aquí tampoco hay variante oscura: los colores se pintan explícitamente para
   que el modo oscuro del visitante no altere la identidad.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------- Tipografía - */
/* Fuentes de la marca (Pangram Pangram). Ver README: la licencia web es del
   negocio, estos archivos vienen del propio sitio de Piedra Natural. */

@font-face {
  font-family: "PP Fragment";
  src: url("/fuentes/PPFragment-GlareLight.woff2") format("woff2"), url("/fuentes/PPFragment-GlareLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Fragment";
  src: url("/fuentes/PPFragment-GlareRegular.woff2") format("woff2"), url("/fuentes/PPFragment-GlareRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Fraktion Mono";
  src: url("/fuentes/PPFraktionMono-Regular.woff2") format("woff2"), url("/fuentes/PPFraktionMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Fraktion Mono";
  src: url("/fuentes/PPFraktionMono-Bold.woff2") format("woff2"), url("/fuentes/PPFraktionMono-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta exacta del sitio de la marca */
  --crema: #e5e2c1;
  --crema-claro: #efedd7;
  --crema-hueso: #f5f3e3;
  --negro: #1f1f1f;
  --cafe: #937e6d;
  --naranja: #ef6348;

  /* Los otros dos colores de la marca. MARCA.md los documenta para las series
     de las gráficas del dashboard; aquí se usan para dar significado a la
     disponibilidad, que es el dato que el cliente busca de un vistazo:
     olivo = hay en piso, terracota = hay que pedirlo. Las variantes oscuras
     son para texto sobre crema, donde el tono pleno no contrasta lo bastante. */
  --olivo: #6f7f4a;
  --olivo-oscuro: #4a5730;
  --olivo-tenue: #e4e7cf;
  --terracota: #b3543a;
  --terracota-oscuro: #8a3f2b;
  --terracota-tenue: #f3e1d9;

  /* Derivados para tintes suaves */
  --naranja-tenue: #fbe3dd;
  --cafe-tenue: #e6dfd6;
  --linea: #1f1f1f;
  --linea-suave: #c8c4a2;

  /* Fondo detrás de las fotos de producto. Las fotos de Aspel vienen sobre
     blanco: con fondo crema se veía un recuadro blanco dentro de otro crema.
     En blanco la foto se funde con su marco y sigue completa (contain). */
  --foto-producto: #fff;

  --texto: var(--negro);
  --texto-suave: #5d564a;
  /* Era #8a8271, que sobre el crema daba 2.90:1 y lo lleva casi todo el texto
     chico de la interfaz: conteos, claves, rótulos de filtro. Oscurecido hasta
     4.66:1 pasa el mínimo de WCAG AA sin dejar de leerse como secundario. */
  --texto-tenue: #6a614e;

  /* Crema translúcido: el único "color" que existe sobre los paneles negros */
  --crema-30: rgba(229, 226, 193, .3);
  --crema-14: rgba(229, 226, 193, .14);

  /* ---------------------------------------------------------------- Vidrios --
     Las barras que se quedan fijas (cabecera, barra de resultados, panel de
     sugerencias, cajón de filtros) dejan pasar lo que corre por debajo en vez
     de taparlo: se ve que la página sigue ahí y la navegación se lee como una
     capa encima, no como un bloque pegado.

     No contradice la regla 2 de la identidad: el desenfoque es del FONDO
     (backdrop-filter), no una sombra difusa. Las sombras siguen siendo duras.

     Las opacidades son altas a propósito. Sobre la portada negra, el crema al
     76 % todavía deja el texto negro por encima de 9:1, y al pasar al 88 % de
     la cabecera desplazada sube aún más. Más transparencia que ésta se ve
     bonita en el hero y se vuelve ilegible a media página. */
  --vidrio-crema: rgba(229, 226, 193, .76);
  --vidrio-crema-denso: rgba(229, 226, 193, .88);
  --vidrio-claro: rgba(239, 237, 215, .82);
  --vidrio-hueso: rgba(245, 243, 227, .8);
  --vidrio-blanco: rgba(255, 255, 255, .52);
  --vidrio-blanco-fuerte: rgba(255, 255, 255, .84);
  --vidrio-negro: rgba(31, 31, 31, .88);
  --desenfoque: saturate(1.6) blur(16px);
  --desenfoque-suave: saturate(1.3) blur(9px);

  --fuente-texto: "PP Fragment", "Iowan Old Style", Georgia, serif;
  --fuente-ui: "PP Fraktion Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Alto real de la cabecera. Lo mide el JS al cargar y al cambiar el tamaño
     de la ventana, porque en móvil la cabecera se parte en dos renglones.
     De él cuelgan todos los `position: sticky` y los `scroll-margin`. */
  --alto-cabecera: 62px;

  /* `window.innerHeight` medido por JS, en vez de `100vh` a secas: en algunos
     navegadores/zooms `100vh` no coincide exactamente con el alto visible
     real, y esa diferencia es justo lo que empujaba el banner de inicio
     fuera de una sola pantalla. El valor de aqui es solo el respaldo de
     antes de que el JS corra. */
  --alto-visible: 100vh;

  /* Elevación de la marca: desplazada y sin desenfoque. */
  --sombra-dura: 5px 5px 0 rgba(31, 31, 31, .16);
  --transicion: .16s ease;
  /* Curva de las entradas: rápida al salir, con un frenado largo. */
  --salida: cubic-bezier(.16, .84, .3, 1);
}

/* Barras de desplazamiento finas y del color de la marca, en lugar de las
   grises del sistema, que es lo que más delata a una página vieja. */
* { scrollbar-width: thin; scrollbar-color: var(--linea-suave) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--linea-suave); border: 2px solid var(--crema); }
*::-webkit-scrollbar-thumb:hover { background: var(--cafe); }

* { box-sizing: border-box; }

/* Cualquier regla propia de `display` le gana al [hidden] del navegador. */
[hidden] { display: none !important; }

html {
  background: var(--crema);
  scroll-behavior: smooth;
  /* La cabecera cambia de alto al hacer scroll (se aprieta/se suelta). Sin
     esto, el navegador "ancla" el scroll a un elemento cercano y corrige la
     posicion solito cada vez que ese alto cambia, para que el contenido no
     de un salto visual. Ese ajuste automatico es justo lo que cruzaba el
     umbral de nuevo y volvia a mover la cabecera: un bucle de correcciones
     que se siente como que la pagina "se sigue moviendo sola". Se apaga la
     anticipation en toda la pagina; el ajuste de --alto-cabecera ya se
     encarga de que nada quede mal alineado despues del cambio real. */
  overflow-anchor: none;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* `width: 100%` es indispensable: casi todos los <main> son `.contenedor`
   (margin: 0 auto), y en un flex en columna un margen automático anula el
   estiramiento. Sin esto el main tomaba el ancho mínimo de su contenido, y
   una tabla o un campo ancho empujaba la página entera fuera de la pantalla
   del teléfono (pasaba en /solicitud y, antes de su parche, en /cuenta). */
body > main { flex: 1; width: 100%; min-width: 0; }

.sin-animaciones,
.sin-animaciones * {
  scroll-behavior: auto !important;
}
.sin-animaciones *,
.sin-animaciones *::before,
.sin-animaciones *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

body.diseno-compacto .portada-texto {
  padding-top: clamp(30px, 5vw, 62px);
  padding-bottom: clamp(28px, 4.5vw, 54px);
}
body.diseno-compacto .inicio-atajos {
  padding: clamp(30px, 5vw, 54px) 0;
}
body.diseno-compacto .atajo-card { min-height: 190px; }

/* Mientras el cajón de filtros está abierto la página de atrás no se mueve.
   Hay que bloquear los dos: según el navegador, el que hace scroll es <html>. */
body.con-cajon { overflow: hidden; }
html:has(body.con-cajon) { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fuente-texto);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.15;
  text-wrap: balance;
}

a { color: var(--negro); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--linea-suave); }
ul { margin: 0; padding: 0; list-style: none; }

.contenedor { max-width: 1360px; margin: 0 auto; padding: 0 22px; }
@media (max-width: 560px) { .contenedor { padding: 0 16px; } }

/* Texto de interfaz: mono, mayúsculas, apretado. */
.ui, .filtro-titulo, .etiqueta, .estado-solicitud, .clave-art,
table.datos thead th, .paginacion button, .pestanas button, .globo {
  font-family: var(--fuente-ui);
}

/* Un solo anillo de foco para todo el sitio. Se usa :focus-visible para que no
   aparezca al hacer clic con el ratón.
   El naranja solo no sirve: sobre el crema da 2.44:1 y el mínimo para un
   elemento de interfaz es 3:1. La línea negra pegada al elemento es la que
   garantiza que se vea; el naranja va por fuera y es el que lo hace de la
   marca. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--negro);
}

/* Sobre los paneles negros (portada y pie) la línea negra desaparece: ahí la
   que hace el trabajo es la crema. */
.portada-catalogo :focus-visible,
.pie :focus-visible {
  box-shadow: 0 0 0 2px var(--crema);
}

/* Sólo para lectores de pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Enlace de salto: invisible hasta que se llega con el teclado. */
.saltar {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-160%);
  background: var(--negro); color: var(--crema);
  padding: 10px 16px;
  font-family: var(--fuente-ui); font-size: 12px; text-transform: uppercase;
}
.saltar:focus { transform: none; text-decoration: none; }

/* ------------------------------------------------------------- Cabecera -- */

.cabecera {
  background: var(--vidrio-crema);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 50;
  isolation: isolate;
  animation: cabecera-entrada .42s var(--salida) both;
  transition: background .28s ease, box-shadow .28s ease;
}

/* Con la página arriba del todo la cabecera es sólo una lámina; en cuanto se
   empieza a bajar se cierra un poco y suelta la sombra dura de la marca, para
   que se lea que hay contenido corriendo por debajo. La clase la pone comun.js. */
.cabecera.desplazada {
  background: var(--vidrio-crema-denso);
  box-shadow: 0 4px 0 rgba(31, 31, 31, .07);
}

.cabecera::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--naranja);
  transform: scaleX(0); transform-origin: left center;
  animation: linea-cabecera .72s .18s var(--salida) both;
  pointer-events: none;
}

@keyframes cabecera-entrada {
  from { opacity: .001; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes linea-cabecera {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ------------------------------------------------------- Banner de ofertas --
   Va pegado bajo la cabecera y NO es sticky: se anuncia al entrar y luego cede
   la pantalla al catálogo. El sello naranja es el único uso del color de acento
   en un bloque de ancho completo, para que se lea como aviso y no como parte de
   la navegación. */

.banner-ofertas {
  background: var(--vidrio-claro);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  backdrop-filter: var(--desenfoque-suave);
  border-bottom: 1px solid var(--linea);
  font-family: var(--fuente-ui);
}

.banner-ofertas-fila {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 22px; flex-wrap: wrap;
}

.banner-ofertas-sello {
  flex: none;
  background: var(--naranja); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px;
}

.banner-ofertas-texto {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; color: var(--texto);
}
.banner-ofertas-texto strong { font-weight: 700; }

.banner-ofertas-vigencia {
  color: var(--texto-tenue); text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .04em; margin-left: 8px;
}

.banner-ofertas-mas,
.banner-ofertas-enlace {
  flex: none; font-family: var(--fuente-ui);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 12px; border: 1px solid var(--linea);
  background: transparent; color: var(--texto);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.banner-ofertas-mas:hover,
.banner-ofertas-enlace:hover { background: var(--negro); color: var(--crema); }

.banner-ofertas-lista { border-top: 1px solid var(--linea-suave); }
.banner-ofertas-lista ul { list-style: none; margin: 0; padding: 4px 22px 10px; }
.banner-ofertas-lista li { border-bottom: 1px solid var(--linea-suave); }
.banner-ofertas-lista li:last-child { border-bottom: 0; }

.banner-ofertas-lista a {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; text-decoration: none; color: var(--texto); font-size: 12px;
}
.banner-ofertas-lista a:hover strong { text-decoration: underline; }
.banner-ofertas-lista span {
  color: var(--texto-tenue); text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .04em;
}

@media (max-width: 620px) {
  .banner-ofertas-fila { gap: 9px; padding: 9px 16px; }
  .banner-ofertas-texto { flex-basis: 100%; order: 3; }
  .banner-ofertas-vigencia { display: block; margin: 3px 0 0; }
}

/* --- Carrusel de ofertas -------------------------------------------------- */

@keyframes ofertas-entrada {
  from { opacity: .001; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ofertas-progreso {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.banner-ofertas {
  position: relative;
  overflow: hidden;
  background: var(--negro);
  color: var(--crema);
  border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: ofertas-entrada .34s var(--salida) both;
}
.banner-ofertas::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(229, 226, 193, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(229, 226, 193, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .42;
  pointer-events: none;
}

.banner-ofertas-marco {
  position: relative;
  padding: 8px 22px 9px;
  display: grid;
  gap: 6px;
}
.banner-ofertas-cabecera {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.banner-ofertas-sello {
  display: inline-flex; align-items: center;
  min-height: 22px;
  background: var(--naranja); color: var(--negro);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px;
}
.banner-ofertas-controles {
  margin-left: auto;
  display: flex;
  border: 1px solid var(--crema-30);
}
.banner-ofertas-nav {
  width: 26px; height: 22px; padding: 0;
  border: 0; border-right: 1px solid var(--crema-30);
  background: transparent; color: var(--crema);
  font-family: var(--fuente-ui); font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.banner-ofertas-nav:last-child { border-right: 0; }
.banner-ofertas-nav:hover,
.banner-ofertas-nav:focus-visible {
  background: var(--crema);
  color: var(--negro);
  outline: 0;
}

.banner-ofertas-ventana {
  overflow: hidden;
  border: 1px solid var(--crema-30);
  background: rgba(229, 226, 193, .06);
}
.banner-ofertas-pista {
  display: flex;
  transition: transform .52s var(--salida);
  will-change: transform;
}
.banner-ofertas-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 130px;
  display: grid;
  grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr);
}
.banner-ofertas-foto {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 0;
  height: 100%;
  background: var(--foto-producto);
  border-right: 1px solid var(--crema-30);
}
.banner-ofertas-foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: saturate(.96) contrast(1.05);
  transition: opacity .42s ease, transform .62s ease;
}
.banner-ofertas-foto.sin-foto {
  display: grid;
  place-items: center;
  background: var(--crema);
}
.banner-ofertas-foto.sin-foto img {
  width: 62%; height: 62%;
  object-fit: contain;
  filter: none;
  opacity: .72;
}
.banner-ofertas-foto img.cargada { opacity: 1; }
.banner-ofertas-slide:not([aria-hidden="true"]):hover .banner-ofertas-foto img {
  transform: scale(1.045);
}

.banner-ofertas-contenido {
  min-width: 0;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.banner-ofertas-meta,
.banner-ofertas-pie {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--fuente-ui);
  text-transform: uppercase;
  font-size: 9.5px;
  line-height: 1.3;
  color: rgba(229, 226, 193, .76);
}
.banner-ofertas-meta span:first-child {
  color: var(--negro);
  background: var(--crema);
  padding: 3px 7px;
  font-weight: 700;
}
.banner-ofertas-texto {
  margin: 0;
  flex: 0 1 auto;
  order: 0;
  min-width: 0;
  color: var(--crema);
  font-family: var(--fuente-texto);
  font-size: 20px;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.banner-ofertas-texto strong {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 400;
}
.banner-ofertas-pie { margin-top: 2px; order: 1; }
.banner-ofertas-enlace {
  margin-left: auto;
  border: 1px solid var(--crema);
  background: var(--crema);
  color: var(--negro);
  padding: 8px 12px;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.banner-ofertas-enlace:hover,
.banner-ofertas-enlace:focus-visible {
  background: var(--naranja);
  color: var(--negro);
  border-color: var(--naranja);
  outline: 0;
}

.banner-ofertas-puntos {
  display: flex; justify-content: center; align-items: center; gap: 7px;
}
.banner-ofertas-punto {
  width: 28px; height: 5px; padding: 0;
  border: 1px solid var(--crema-30);
  background: transparent;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.banner-ofertas-punto:hover,
.banner-ofertas-punto:focus-visible {
  border-color: var(--crema);
  outline: 0;
}
.banner-ofertas-punto.activo {
  background: var(--naranja);
  border-color: var(--naranja);
}
/* Los puntos miden 5 px de alto: una capa invisible les da un área que sí
   se puede atinar con el dedo, sin cambiar cómo se ven. */
.banner-ofertas-punto { position: relative; }
.banner-ofertas-punto::after { content: ""; position: absolute; inset: -14px -3px; }
@media (pointer: coarse) {
  .banner-ofertas-nav { width: 40px; height: 32px; }
  .abrir-filtros, .boton.chico { min-height: 40px; }
}
.banner-ofertas-progreso {
  height: 2px;
  overflow: hidden;
  background: rgba(229, 226, 193, .18);
}
.banner-ofertas-progreso span {
  display: block;
  width: 100%; height: 100%;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left center;
}
.banner-ofertas.progreso-activo .banner-ofertas-progreso span {
  animation: ofertas-progreso 6.5s linear both;
}

@media (max-width: 760px) {
  .banner-ofertas {
    width: 100vw;
    max-width: 100vw;
  }
  .banner-ofertas-marco { padding: 8px 16px 9px; }
  /* Foto y texto lado a lado también en el teléfono. Apilados, el carrusel
     llegaba a 340-450 px y empujaba el contenido de cada página fuera de la
     primera pantalla. La foto va completa (contain) en su columna. */
  .banner-ofertas-slide {
    grid-template-columns: minmax(104px, 34%) minmax(0, 1fr);
    height: auto;
    min-height: 150px;
  }
  .banner-ofertas-foto {
    min-height: 0;
    border-right: 1px solid var(--crema-30);
    border-bottom: 0;
  }
  /* Fuera del flujo: si no, el alto natural de la foto estira toda la fila. */
  .banner-ofertas-foto:not(.sin-foto) img { position: absolute; inset: 0; }
  .banner-ofertas-contenido { padding: 10px 12px; gap: 6px; }
  .banner-ofertas-texto { font-size: 18px; line-height: 1.1; }
  .banner-ofertas-pie { align-items: flex-start; }
  .banner-ofertas-enlace {
    flex-basis: 100%;
    margin-left: 0;
    text-align: center;
  }
}

@media (max-width: 460px) {
  .banner-ofertas-cabecera { align-items: stretch; }
  .banner-ofertas-sello { flex: 1 1 auto; }
  .banner-ofertas-controles { flex: none; }
  .banner-ofertas-nav { width: 32px; }
  .banner-ofertas-texto { font-size: 17px; }
  .banner-ofertas-meta,
  .banner-ofertas-pie { font-size: 10px; }
  .banner-ofertas-enlace { padding: 9px 10px; }
}

.cabecera-fila {
  display: flex; align-items: stretch; gap: 0;
  min-height: 64px; padding-left: clamp(18px, 5vw, 72px);
  transition: min-height .26s var(--salida);
}

/* --- La cabecera se aprieta al bajar -------------------------------------
   Entre la fila de la marca y la de acciones, el encabezado se queda con más
   de 100 px de pantalla pegados arriba TODO el rato. Cuando ya se está leyendo
   el catálogo eso es demasiado: la marca ya se vio, lo que hace falta es el
   producto. Al bajar, la fila pasa de 64 a 50 px y el logo y el sello encogen
   con ella; unos 30 px devueltos sin que nada desaparezca ni salte de sitio.

   El alto real lo vuelve a medir comun.js en cuanto cambia el estado, porque
   de `--alto-cabecera` cuelgan la barra de resultados y los `scroll-margin`. */

.cabecera.desplazada .cabecera-fila { min-height: 50px; }
.cabecera.desplazada .menu-principal a { min-height: 50px; }
.cabecera.desplazada .marca { padding-top: 6px; padding-bottom: 6px; }
.cabecera.desplazada .marca .logo-principal { height: 20px; }
.cabecera.desplazada .marca .logo-sello { height: 19px; max-width: 19px; }
.cabecera.desplazada .cabecera-util { padding-top: 6px; padding-bottom: 6px; }
.cabecera.desplazada .acciones > .boton,
.cabecera.desplazada .menu-interno > .boton { min-height: 36px; }

.marca {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 clamp(252px, 26vw, 372px);
  min-width: 0; padding: 10px 22px 10px 0;
  transition: transform .24s var(--salida), padding .26s var(--salida);
}
.marca:hover { text-decoration: none; }
.marca::after {
  content: "";
  position: absolute; left: 0; right: 22px; bottom: 8px; height: 1px;
  background: var(--linea);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .26s var(--salida);
}
.marca:hover,
.marca:focus-visible { transform: translateY(-1px); }
.marca:hover::after,
.marca:focus-visible::after { transform: scaleX(1); }
.marca-logos {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.marca img { display: block; width: auto; object-fit: contain; }
.marca .logo-principal {
  height: 23px; max-width: min(245px, 76%);
  transition: height .26s var(--salida);
}
.marca .logo-sello {
  /* Sin raya vertical junto al logo: el hueco de .marca-logos (gap) ya los
     separa. El tamaño es el mismo que cuando llevaba raya y relleno. */
  height: 24px; max-width: 24px; flex: none;
  transform-origin: center center;
  transition: transform .34s var(--salida), filter .24s ease,
              height .26s var(--salida), max-width .26s var(--salida);
}
.marca:hover .logo-sello,
.marca:focus-visible .logo-sello {
  transform: rotate(8deg) scale(1.04);
  filter: contrast(1.1);
}
.marca .lema {
  font-family: var(--fuente-ui);
  font-size: 10px; line-height: 1.35; text-transform: uppercase;
  color: var(--texto-tenue); letter-spacing: .04em;
  max-width: 22ch;
}

.menu-principal {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch;
  background: transparent;
  border-left: 1px solid var(--linea);
}
/* Las celdas eran blancas macizas. Ahora son vidrio: la rejilla de líneas
   negras sigue marcando la estructura y el color de abajo (la portada negra,
   una foto del catálogo) se cuela por dentro del menú. */
.menu-principal a {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 0 18px;
  background: var(--vidrio-blanco); color: var(--negro);
  border-right: 1px solid var(--linea);
  font-family: var(--fuente-ui); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-align: center;
  transition: background .24s ease, color .24s ease, transform .24s var(--salida),
              min-height .26s var(--salida);
}
.menu-principal a::before {
  content: "";
  position: absolute; inset: auto 0 0; height: 3px;
  background: var(--naranja);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s var(--salida), height .28s var(--salida);
  pointer-events: none;
}
.menu-principal .logo-blog {
  display: block; flex: none;
  width: auto; height: 34px;
  transition: height .26s var(--salida);
}
.cabecera.desplazada .menu-principal .logo-blog { height: 28px; }

/* El enlace que se va del sitio lo dice. Era el único del menú que abría una
   pestaña nueva sin avisar. El `/ ""` deja la flecha muda para el lector de
   pantalla: es una señal para el ojo, no una palabra que leer. */
.menu-principal a[target="_blank"]::after {
  content: "↗" / "";
  margin-left: 6px; font-size: 10px; font-weight: 400;
  opacity: .5;
  transition: opacity .24s ease, transform .24s var(--salida);
}
.menu-principal a[target="_blank"]:hover::after,
.menu-principal a[target="_blank"]:focus-visible::after {
  opacity: 1; transform: translate(1px, -1px);
}

.menu-principal a:hover,
.menu-principal a:focus-visible {
  background: var(--vidrio-blanco-fuerte); color: var(--negro); text-decoration: none;
  transform: translateY(-1px);
}
.menu-principal a:hover::before,
.menu-principal a:focus-visible::before,
.menu-principal a[aria-current="page"]::before {
  transform: scaleX(1);
}
/* La página en la que se está es la única celda que sí se cierra: es el ancla
   de la barra. Aun así queda un 12 % de fondo para que no se lea como un
   parche negro pegado encima del vidrio. */
.menu-principal a[aria-current="page"] {
  background: var(--vidrio-negro); color: var(--crema);
}
.menu-principal a[aria-current="page"]::before {
  height: 4px;
}

.menu-principal-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 54px; min-height: 54px; padding: 0; margin: 0;
  border: 0; border-left: 1px solid var(--linea);
  background: var(--vidrio-blanco); color: var(--negro); cursor: pointer;
}
.menu-principal-toggle span[aria-hidden="true"] {
  display: block; width: 21px; height: 2px; margin: 0;
  background: currentColor;
  transition: transform .26s var(--salida), opacity .18s ease;
}
/* Las tres rayas se cruzan al abrir: el mismo botón dice cerrar sin cambiar de
   sitio ni de tamaño. */
.cabecera.menu-abierto .menu-principal-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecera.menu-abierto .menu-principal-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.cabecera.menu-abierto .menu-principal-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cabecera.menu-abierto .menu-principal-toggle { background: var(--negro); color: var(--crema); }

/* --- "Cuenta": una celda mas de la barra principal, junto al resto de los
   enlaces, con un desplegable que junta productos/solicitud/sesion. Antes
   era una fila entera aparte (`cabecera-util`) solo para esto. */
.menu-cuenta { position: relative; flex: 0 0 auto; align-self: stretch; }
.menu-cuenta > button {
  height: 100%; min-height: 64px; padding: 0 20px;
  display: flex; align-items: center; gap: 8px;
  border: 0; border-left: 1px solid var(--linea);
  background: var(--vidrio-blanco); color: var(--negro); cursor: pointer;
  font-family: var(--fuente-ui); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  transition: background .24s ease, color .24s ease, min-height .26s var(--salida);
}
.menu-cuenta > button:hover,
.menu-cuenta > button:focus-visible,
.menu-cuenta > button[aria-expanded="true"] {
  background: var(--vidrio-blanco-fuerte); color: var(--negro);
}
.cabecera.desplazada .menu-cuenta > button { min-height: 50px; }

.menu-cuenta-lista {
  position: absolute; top: 100%; right: 0; z-index: 60;
  display: flex; flex-direction: column;
  min-width: 216px; max-width: calc(100vw - 32px);
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-dura);
  transform-origin: top right;
  animation: desplegar .16s var(--salida) both;
}
.menu-cuenta-lista[hidden] { display: none; }
.menu-cuenta-lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea-suave);
  font-family: var(--fuente-ui); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--negro);
}
.menu-cuenta-lista a:last-child { border-bottom: 0; }
.menu-cuenta-lista a:hover { background: var(--naranja); text-decoration: none; }

/* --- Grupo "Inspiración" (Ambientes + Blog): una celda del menu con su
   desplegable, igual que "Cuenta". Lo arma comun.js (armarGrupoInspiracion).
   Por defecto el grupo esta "aplanado" (sus dos enlaces son celdas normales
   del menu); solo en escritorio ancho se vuelve boton + desplegable. */
.menu-grupo { display: contents; }
.menu-grupo-boton { display: none; }
.menu-grupo-lista { display: contents; }
.menu-grupo-lista .en-grupo { display: none; }
/* La lista aplanada lleva `hidden` (lo usa el desplegable de escritorio), y la
   regla global `[hidden] { display: none !important }` le ganaba: abajo de
   980 px "Inspiración" y "Blog" desaparecían del menú. Sólo aquí, donde el
   grupo va aplanado, se le contesta con la misma fuerza. */
@media (max-width: 980px) {
  .menu-grupo-lista[hidden] { display: contents !important; }
}

@media (min-width: 981px) {
  .menu-grupo {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex;
  }
  .menu-grupo-boton {
    position: relative; flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 64px; padding: 0 18px;
    border: 0; border-right: 1px solid var(--linea);
    background: var(--vidrio-blanco); color: var(--negro); cursor: pointer;
    font-family: var(--fuente-ui); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    transition: background .24s ease, color .24s ease, min-height .26s var(--salida);
  }
  .cabecera.desplazada .menu-grupo-boton { min-height: 50px; }
  .menu-grupo-boton::before {
    content: "";
    position: absolute; inset: auto 0 0; height: 3px;
    background: var(--naranja);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .28s var(--salida);
  }
  .menu-grupo-boton:hover,
  .menu-grupo-boton:focus-visible,
  .menu-grupo-boton[aria-expanded="true"] { background: var(--vidrio-blanco-fuerte); }
  .menu-grupo-boton:hover::before,
  .menu-grupo-boton:focus-visible::before,
  .menu-grupo-boton.activo::before { transform: scaleX(1); }
  /* Igual que el enlace de la pagina actual: la celda del grupo se cierra en
     negro cuando se esta en Ambientes o en Blog. */
  .menu-grupo-boton.activo { background: var(--vidrio-negro); color: var(--crema); }
  .menu-grupo-boton.activo::before { height: 4px; }
  .menu-grupo-flecha { font-size: 10px; transition: transform .24s var(--salida); }
  .menu-grupo-boton[aria-expanded="true"] .menu-grupo-flecha { transform: rotate(180deg); }

  .menu-grupo-lista {
    position: absolute; top: 100%; left: 0; z-index: 60;
    display: flex; flex-direction: column;
    min-width: max(100%, 216px);
    background: var(--crema-claro);
    border: 1px solid var(--linea);
    box-shadow: var(--sombra-dura);
    transform-origin: top left;
    animation: desplegar .16s var(--salida) both;
  }
  .menu-grupo-lista[hidden] { display: none; }
  .menu-grupo-lista .en-grupo { display: inline; }
  .menu-grupo-lista .sin-grupo { display: none; }
  /* Dentro del desplegable los enlaces dejan de ser celdas de la barra: filas
     como las de "Cuenta". */
  .menu-principal .menu-grupo-lista a {
    flex: none; min-height: 0;
    justify-content: flex-start; padding: 12px 16px;
    background: transparent;
    border-right: 0; border-bottom: 1px solid var(--linea-suave);
    font-size: 12.5px; font-weight: 400; letter-spacing: .04em; text-align: left;
  }
  .menu-principal .menu-grupo-lista a:last-child { border-bottom: 0; }
  .menu-principal .menu-grupo-lista a::before { display: none; }
  .menu-principal .menu-grupo-lista a:hover,
  .menu-principal .menu-grupo-lista a:focus-visible { background: var(--naranja); transform: none; }
  .menu-principal .menu-grupo-lista a[aria-current="page"] { background: var(--negro); color: var(--crema); }
}

.cabecera-util {
  display: flex; align-items: center; gap: 16px;
  max-width: 1360px; margin: 0 auto; padding: 10px 22px;
  border-top: 1px solid var(--linea);
  /* Un tono de vidrio mas claro que el resto de la cabecera: separa la fila
     de acciones del renglon de marca sin caer en una linea dura de mas. */
  background: var(--vidrio-blanco);
  animation: cabecera-util-entrada .38s .08s var(--salida) both;
  transition: padding .26s var(--salida);
}
@keyframes cabecera-util-entrada {
  from { opacity: .001; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

.buscador {
  flex: 1 1 300px; display: flex; align-items: center;
  max-width: 560px; align-self: center; gap: 0;
  /* Sin esto el formulario hereda el ancho intrínseco del <input> (~235 px)
     más el botón, y en teléfonos de 320 px se salía 20 px por la derecha. */
  min-width: 0;
}
.campo-busqueda { position: relative; flex: 1; display: flex; min-width: 0; }

.buscador input {
  flex: 1; min-width: 0;
  padding: 9px 34px 9px 34px;
  border: 1px solid var(--linea); border-right: 0;
  /* La lupa va como fondo del propio campo: un archivo menos que pedir.
     El campo es translúcido en reposo y se cierra en blanco al enfocarlo: así
     el sitio donde se escribe es lo único macizo de toda la cabecera. */
  background: var(--vidrio-hueso)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8271' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.6 15.6 21 21'/%3E%3C/svg%3E")
    no-repeat 11px 50% / 14px 14px;
  font-family: var(--fuente-ui); font-size: 13px;
  outline: none; border-radius: 0;
  transition: background-color var(--transicion), box-shadow var(--transicion);
}
.buscador input::placeholder { color: var(--texto-tenue); text-transform: uppercase; font-size: 12px; }
.buscador input:focus { background-color: #fff; box-shadow: inset 0 -2px 0 var(--naranja); }
/* La "x" nativa de Chrome duplicaría nuestro botón de borrar. */
.buscador input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.borrar-busqueda {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--texto-tenue); font-size: 17px; line-height: 1;
}
.borrar-busqueda:hover { color: var(--negro); background: var(--crema); }

/* --- Panel de sugerencias ------------------------------------------------ */

.sugerencias {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  max-height: min(420px, 68vh); overflow-y: auto; overscroll-behavior: contain;
  margin-top: -1px;
  /* Éste NO lleva vidrio, aunque cuelgue de la cabecera que sí lo lleva. Un
     elemento con backdrop-filter se convierte en la raíz del fondo de sus
     descendientes: el panel sólo podría desenfocar lo que pintó la cabecera, y
     la parte que sobresale por debajo se quedaría translúcida SIN desenfoque,
     que es justo lo ilegible. Una lista de resultados se lee o no se lee. */
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-dura);
  transform-origin: top center;
  animation: desplegar .16s var(--salida) both;
}
.sugerencias[hidden] { display: none; }

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.sug-titulo {
  margin: 0; padding: 9px 12px 6px;
  font-family: var(--fuente-ui); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
  border-bottom: 1px solid var(--linea-suave);
  background: var(--crema-hueso);
  position: sticky; top: 0;
}

.sug-opcion {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--linea-suave);
}
.sug-opcion:last-child { border-bottom: 0; }
.sug-opcion.activa { background: var(--naranja); }
.sug-opcion.principal { background: var(--crema-hueso); }
.sug-opcion.principal.activa { background: var(--naranja); }

.sug-icono {
  flex: none; width: 20px; text-align: center;
  font-family: var(--fuente-ui); font-size: 13px; color: var(--texto-tenue);
}
.sug-opcion.activa .sug-icono { color: var(--negro); }

.sug-foto {
  flex: none; width: 40px; height: 40px; object-fit: contain;
  border: 1px solid var(--linea-suave); background: var(--foto-producto);
}

.sug-texto {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fuente-ui); font-size: 12px; text-transform: uppercase;
  color: var(--negro);
}
.sug-texto b { font-weight: 700; }
.sug-detalle {
  display: block; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--fuente-ui); font-size: 10px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--texto-tenue);
}
.sug-detalle:empty { display: none; }
/* En el teléfono la clave le quitaba medio renglón al nombre ("TABARCA BL…").
   El nombre y las medidas bastan para elegir; la clave sale en la ficha. */
@media (max-width: 560px) {
  .sug-opcion.producto .sug-clave { display: none; }
}
.sug-opcion.producto .sug-texto { text-transform: none; font-family: var(--fuente-texto); font-size: 14px; }

.sug-clave, .sug-cuenta {
  flex: none;
  font-family: var(--fuente-ui); font-size: 10px; color: var(--texto-tenue);
  text-transform: uppercase;
}
.sug-opcion.activa .sug-clave, .sug-opcion.activa .sug-cuenta { color: var(--negro); }

.sug-opcion.tenue .sug-texto { color: var(--texto-tenue); font-size: 10px; letter-spacing: .06em; }
.sug-opcion.tenue.activa .sug-texto { color: var(--negro); }

.acciones { display: flex; align-items: stretch; margin-left: auto; }

/* --- Cabecera del panel interno ------------------------------------------
   Lleva hasta diez botones. En el teléfono se repartían el ancho en partes
   iguales (flex: 1 1 0) y quedaban de 20 px con el texto encimado. Ahí se
   vuelven una tira que se arrastra de lado, como el menú del sitio. */
.quien-interno {
  display: flex; align-items: center; padding: 0 14px;
  font-size: 13.5px; color: var(--texto-suave); white-space: nowrap;
}
.buscar-interno { display: flex; gap: 8px; min-width: 0; }
.buscar-interno input {
  flex: 1 1 230px; min-width: 0;
  padding: 8px 12px; border: 1px solid var(--linea); border-radius: 0;
  background: var(--crema-hueso);
}
/* Grupos de la cabecera interna (Catalogo / Sitio web / Equipo): una celda
   mas de la rejilla con su desplegable, mismo panel que "Cuenta" del sitio. */
.menu-interno { position: relative; display: flex; }
.menu-interno[hidden] { display: none; }
.menu-interno > .boton { gap: 8px; }
.menu-interno > .boton::before {
  content: ""; order: 2;
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--salida);
}
.menu-interno > .boton[aria-expanded="true"]::before { transform: translateY(3px) rotate(225deg); }
.menu-interno-lista {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: flex; flex-direction: column;
  min-width: 216px; max-width: calc(100vw - 32px);
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-dura);
  transform-origin: top left;
  animation: desplegar .16s var(--salida) both;
}
.menu-interno-lista[hidden] { display: none; }
.menu-interno-lista button {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 0;
  border-bottom: 1px solid var(--linea-suave);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--fuente-ui); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--negro);
}
.menu-interno-lista button:last-child { border-bottom: 0; }
.menu-interno-lista button:hover,
.menu-interno-lista button:focus-visible { background: var(--naranja); }
.menu-interno-lista button:disabled { opacity: .55; cursor: progress; }

@media (max-width: 980px) {
  .cabecera-interna .cabecera-fila { flex-wrap: wrap; }
  .cabecera-interna .marca { flex: 1 1 100%; }
  /* Con las herramientas agrupadas ya no hace falta arrastrar una tira: las
     celdas se reparten el ancho y, si no caben, bajan de fila. Nada de
     overflow aqui, que recortaria los desplegables que cuelgan de ellas. */
  .cabecera-interna .acciones {
    position: relative; flex-wrap: wrap;
    width: calc(100% + 16px); margin-left: -16px;
  }
  .cabecera-interna .acciones > .boton,
  .cabecera-interna .menu-interno { flex: 1 1 auto; border-left: 1px solid var(--linea); }
  .cabecera-interna .acciones > :first-child { border-left: 0; }
  .cabecera-interna .menu-interno > .boton {
    width: 100%; border-left: 0; justify-content: center;
    padding: 0 10px; font-size: 11.5px;
  }
  /* El nombre y "Salir" van en una fila arriba de los botones, para que el
     desplegable abra pegado a ellos y no del otro lado de otra fila. */
  .cabecera-interna .quien-interno {
    order: -2; flex: 1 1 60%; justify-content: flex-start;
    min-height: 40px; border-bottom: 1px solid var(--linea-suave);
  }
  .cabecera-interna .acciones > #btn-salir {
    order: -1; flex: 0 0 auto; min-height: 40px;
    border-left: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave);
  }
  /* El desplegable se ancla a la cabecera entera y no al boton: asi abre a
     todo lo ancho bajo la fila y nunca se sale por la orilla de la pantalla. */
  .cabecera-interna .menu-interno { position: static; }
  .cabecera-interna .menu-interno-lista { left: 0; right: 0; max-width: none; }
  .buscar-interno { width: 100%; }
}

/* Los enlaces del encabezado forman una rejilla, como en el sitio de la marca. */
.acciones > .boton,
.menu-interno > .boton {
  position: relative; overflow: hidden;
  border: 0; border-left: 1px solid var(--linea);
  padding: 0 18px; min-height: 44px; display: flex; align-items: center;
  background: transparent;
  transition: background .22s ease, color .22s ease, transform .22s var(--salida), min-height var(--transicion);
}
.acciones > .boton:last-child { border-right: 1px solid var(--linea); }
/* La rayita de hover va pegada al fondo del boton, nunca a la mitad: por eso
   el boton necesita el min-height de arriba. Sin espacio de sobra ahi abajo,
   esta linea terminaba cruzando el propio texto en vez de subrayarlo. */
.acciones > .boton::after,
.menu-interno > .boton::after {
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: 6px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .24s var(--salida);
}
.acciones > .boton:hover,
.acciones > .boton:focus-visible,
.menu-interno > .boton:hover,
.menu-interno > .boton:focus-visible,
.menu-interno > .boton[aria-expanded="true"] {
  background: var(--naranja); color: var(--negro); text-decoration: none;
  transform: translateY(-1px);
}
.acciones > .boton:hover::after,
.acciones > .boton:focus-visible::after,
.menu-interno > .boton:hover::after,
.menu-interno > .boton:focus-visible::after,
.menu-interno > .boton[aria-expanded="true"]::after { transform: scaleX(1); }

@media (max-width: 980px) {
  .cabecera-fila {
    position: relative;
    min-height: 58px; padding-left: 16px;
    flex-wrap: wrap; justify-content: space-between;
  }
  .marca {
    flex: 1 1 100%; max-width: 100%; min-height: 58px;
    padding-right: 12px;
  }
  .marca .logo-principal { height: 20px; max-width: min(224px, calc(100vw - 32px)); }
  .marca .logo-sello { height: 21px; max-width: 21px; }
  .marca .lema { display: none; }
  .menu-principal-toggle { display: none; }

  /* Aquí la cabecera ya no se queda pegada arriba, así que no hay nada que
     devolver: se anula el apretón del scroll para que no encoja mientras se
     va yendo de la pantalla. */
  .cabecera.desplazada .cabecera-fila { min-height: 58px; }
  .cabecera.desplazada .menu-principal a { min-height: 48px; }
  .cabecera.desplazada .marca { padding-top: 10px; padding-bottom: 10px; }
  .cabecera.desplazada .marca .logo-principal { height: 20px; }
  .cabecera.desplazada .marca .logo-sello { height: 21px; max-width: 21px; }
  .cabecera.desplazada .cabecera-util { padding-top: 10px; padding-bottom: 10px; }
  .cabecera.desplazada .acciones > .boton,
  .cabecera.desplazada .menu-interno > .boton { min-height: 44px; }
  .menu-principal {
    display: flex; flex-basis: 100%; order: 3;
    margin-left: -16px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border-top: 1px solid var(--linea); border-left: 0;
  }
  .menu-principal::-webkit-scrollbar { display: none; }
  /* `flex-grow` para que la tira llene el ancho cuando las celdas caben, en
     vez de dejar un hueco suelto a la derecha. */
  .menu-principal a {
    flex: 1 0 auto; min-width: 124px;
    min-height: 48px; padding: 0 10px;
    font-size: 10.5px; letter-spacing: .04em;
  }
  /* La nav ya se volvio tira de ancho completo (arriba): "Cuenta" pasa a su
     propia fila justo debajo, en vez de apretujarse junto al logo. */
  /* Igual que la tira de arriba, se come el padding izquierdo de la fila para
     ir de orilla a orilla en lugar de quedar corrida 16 px. */
  .menu-cuenta { order: 4; width: calc(100% + 16px); margin-left: -16px; border-top: 1px solid var(--linea); }
  .menu-cuenta > button { width: 100%; justify-content: center; min-height: 48px; font-size: 10.5px; }
  .menu-cuenta-lista { left: 0; right: 0; }
  .cabecera-util { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .buscador { flex: 1 1 100%; max-width: none; }
  .acciones { margin-left: 0; width: 100%; border-top: 1px solid var(--linea); }
  .acciones > .boton {
    flex: 1 1 0; min-width: 0; justify-content: center;
    min-height: 44px; padding: 0 10px; text-align: center;
    font-size: 11.5px;
  }
  .acciones > .boton:first-child { border-left: 0; }
  .acciones > .boton:last-child { border-right: 0; }
}

/* --- Menú desplegable en el teléfono -------------------------------------
   Entre 620 y 980 px las cinco entradas caben en una tira que se arrastra de
   lado. Abajo de 620 ya no: la tira se corta a media palabra y hay que saber
   que se puede empujar para ver que existe "Contacto".

   Ahí entra el botón, que ya venía en el marcado de todas las páginas y ya
   estaba enganchado en comun.js (con su aria-expanded), pero no se enseñaba
   nunca y la clase `menu-abierto` no tenía ni una regla: media función a
   medio terminar. Esto la cierra.

   El panel NO lleva vidrio aunque cuelgue de la cabecera que sí: al salirse
   de ella no tendría fondo que desenfocar y quedaría translúcido a secas
   encima del catálogo. Color pleno y la sombra dura de la marca. */

@media (max-width: 620px) {
  .cabecera-fila { flex-wrap: nowrap; padding-left: 16px; }
  .marca { flex: 1 1 auto; max-width: none; padding-right: 12px; min-width: 0; }
  .menu-principal-toggle { display: flex; flex: none; align-self: stretch; }

  /* La nav se vuelve el desplegable del hamburguesa (abajo) y deja de ocupar
     un lugar en la fila: "Cuenta" recupera su lugar junto al logo y el
     hamburguesa en vez de la fila completa que le tocaba en la tira de 980px. */
  .menu-cuenta { order: 0; width: auto; margin-left: 0; border-top: 0; flex: none; }
  .menu-cuenta > button { width: auto; padding: 0 12px; font-size: 10px; }
  /* Aquí el botón vuelve a ser una celda angosta en la orilla derecha: la
     lista se ancla a esa orilla. Con el `left: 0` de la tira de 980 px se
     abría hacia la derecha y se salía de la pantalla. */
  .menu-cuenta-lista { left: auto; right: 0; }

  .menu-principal {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    flex-direction: column; align-items: stretch;
    flex-basis: auto; margin-left: 0;
    overflow: hidden;
    background: var(--crema-claro);
    border: 0; border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra-dura);
    max-height: 0; visibility: hidden;
    transition: max-height .26s var(--salida), visibility 0s linear .26s;
  }
  .cabecera.menu-abierto .menu-principal {
    max-height: 72vh; visibility: visible; overflow-y: auto;
    transition: max-height .3s var(--salida), visibility 0s;
  }

  .menu-principal a {
    flex: none; min-width: 0; min-height: 50px;
    justify-content: flex-start; padding: 0 18px;
    background: transparent;
    border-right: 0; border-bottom: 1px solid var(--linea-suave);
    font-size: 12px; letter-spacing: .06em;
  }
  .menu-principal a:last-child { border-bottom: 0; }
  .menu-principal a:hover,
  .menu-principal a:focus-visible {
    background: var(--crema-hueso); transform: none;
  }
  .menu-principal a[aria-current="page"] { background: var(--negro); }

  /* En vertical la barra del acento va al costado, no debajo. */
  .menu-principal a::before {
    inset: 0 auto 0 0; width: 3px; height: auto;
    transform: scaleY(0); transform-origin: center top;
  }
  .menu-principal a:hover::before,
  .menu-principal a:focus-visible::before,
  .menu-principal a[aria-current="page"]::before {
    width: 3px; transform: scaleY(1);
  }
}

@media (max-width: 560px) {
  .marca .logo-sello { display: none; }
  .marca .logo-principal { max-width: 100%; }
}

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

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--linea);
  border-radius: 0;
  background: var(--crema);
  color: var(--negro);
  font-family: var(--fuente-ui);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--negro); color: var(--crema); text-decoration: none; }
.boton:active { transform: translateY(1px); }

.boton.principal { background: var(--negro); color: var(--crema); }
.boton.principal:hover { background: var(--naranja); color: var(--negro); }
.boton.principal:disabled { opacity: .45; cursor: not-allowed; background: var(--negro); color: var(--crema); }

.boton.claro { background: var(--crema-hueso); color: var(--negro); }
.boton.claro:hover { background: var(--naranja); color: var(--negro); }

/* Botón sobre fondo negro: sólo la línea y el texto en crema. */
.boton.fantasma { background: transparent; border-color: var(--crema); color: var(--crema); }
.boton.fantasma:hover { background: var(--crema); color: var(--negro); }

.boton.bloque { width: 100%; }
.boton.chico { padding: 6px 12px; font-size: 11.5px; }
.boton.peligro { border-color: var(--naranja); color: #a8371f; background: var(--crema); }
.boton.peligro:hover { background: var(--naranja); color: var(--negro); }

/* Confirmación dentro del propio botón al agregar a la solicitud. */
.boton.confirmado,
.boton.principal.confirmado { background: var(--naranja); color: var(--negro); }

.boton .unidad { font-size: 9.5px; opacity: .65; letter-spacing: .06em; }

.globo {
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--naranja); color: var(--negro);
  font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
  border-radius: 0;
}
.boton.principal .globo { background: var(--crema); color: var(--negro); }

/* ------------------------------------------------------------- Portada --- */

.portada-catalogo {
  position: relative;
  background: var(--negro);
  color: var(--crema);
  border-bottom: 1px solid var(--linea);
  /* Sin `overflow:hidden` aqui: si el alto calculado via
     `calc(100vh - var(--alto-cabecera))` queda un poco corto (redondeos,
     zoom del navegador), esto recortaba el borde inferior del collage y con
     el la descripcion que sube al pasar el cursor. Sigue conteniendose en
     movil (abajo), donde `.portada-collage` sangra con margenes negativos. */
}

.portada-catalogo > .contenedor { position: relative; }

/* El alto se ata a lo que sobra de pantalla bajo la cabecera (no al ancho:
   un `vw` no dice nada de cuanto mide la ventana de alto), para que la
   portada llene la pantalla inicial sin cortarse ni pedir scroll. El piso y
   el piso es solo para no romperse en ventanas muy bajas. El 1px es el
   `border-bottom` de `.portada-catalogo`. */
.portada-grid {
  min-height: max(420px, calc(var(--alto-visible) - var(--alto-cabecera) - 1px));
  display: grid; grid-template-columns: minmax(0, .96fr) minmax(360px, 1.04fr);
  align-items: stretch;
}

.portada-texto {
  padding: clamp(24px, min(5vw, calc(var(--alto-visible) * .064)), 64px) 32px clamp(28px, 4.5vw, 48px) 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-width: 0;
}

.sobretitulo {
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--naranja);
}
.sobretitulo .punto { width: 5px; height: 5px; background: currentColor; flex: none; }

.portada-catalogo h1 {
  /* Crece con el alto de la ventana para llenar la columna, topado por su
     ancho (~.47 del contenedor; "CANTERAS &" mide ~6.6em) para no partir
     mas lineas. Con el `margin-top:auto` de aqui y el de `.cifras`, el
     bloque titulo-lema-botones queda centrado en el espacio sobre las
     cifras, en vez de dejar un hueco muerto abajo. */
  margin-top: auto;
  font-size: clamp(40px, min(calc((min(100vw, 1360px) * .47 - 32px) / 6.6), calc(var(--alto-visible) * .105)), 104px);
  font-weight: 300;
  line-height: .97;
  color: var(--crema);
}

.portada-lema {
  margin: clamp(14px, calc(var(--alto-visible) * .024), 28px) 0 0; color: var(--crema);
  opacity: .72; max-width: 52ch; font-size: clamp(17px, min(1.8vw, calc(var(--alto-visible) * .028)), 27px);
  line-height: 1.45;
}

.portada-acciones { display: flex; gap: 0; flex-wrap: wrap; margin-top: clamp(24px, calc(var(--alto-visible) * .042), 48px); }
.portada-acciones .boton { padding: 18px 36px; font-size: 15px; }
.portada-acciones .boton + .boton { border-left: 0; }
.portada-acciones .boton.principal { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.portada-acciones .boton.principal:hover { background: var(--naranja); border-color: var(--naranja); }

.portada-catalogo .cifras {
  margin-top: auto;
  padding-top: 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--crema-30);
}
.portada-catalogo .cifra {
  padding: 16px 12px;
  border-right: 1px solid var(--crema-30);
  min-width: 0;
  text-align: center;
}
.portada-catalogo .cifra:last-child { border-right: 0; }
.portada-catalogo .cifra b {
  font-family: var(--fuente-ui); font-size: clamp(20px, min(2.6vw, calc(var(--alto-visible) * .042)), 40px); font-weight: 700;
  display: block; line-height: 1.15; color: var(--crema);
}
.portada-catalogo .cifra span {
  display: block; margin-top: 6px;
  font-family: var(--fuente-ui); font-size: 11px; text-transform: uppercase;
  color: var(--crema); opacity: .58; letter-spacing: .05em; line-height: 1.4;
}
.portada-catalogo .cifra .linea-cifra { display: block; height: 34px; margin-top: 16px; }

/* --- Collage: los tres productos con foto que abren el catálogo ----------- */

.portada-collage {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  /* `minmax(0, …)` + imagen absoluta: si no, las fotos (1000x1000) empujan
     las filas y la portada se hace mas alta que la pantalla. */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--crema-30);
  border-left: 1px solid var(--crema-30);
  /* Sangra hasta el borde derecho real de la ventana: `.contenedor` centra
     con `max-width:1360px` y dejaba un margen negro ahi (22px de su propio
     padding, mas el espacio libre por pasar de 1360px de ancho), igual que
     el que se ve a la izquierda antes del texto. El texto se queda dentro
     del contenedor porque a el si le hace falta ese respiro para leerse. */
  margin-right: calc(-22px - max(0px, (100vw - 1360px) / 2));
}
.portada-collage .pieza {
  position: relative; overflow: hidden; display: block;
  background: #fff;
  min-height: 130px;
}
.portada-collage .grande { grid-row: 1 / span 2; }
/* `contain`, no `cover`: son fotos de producto sobre fondo blanco y con
   `cover` se cortaban los lados de la pieza. El padding derecho extra evita
   que la barra de scroll tape el borde, porque el sangrado usa `100vw`. */
.portada-collage .pieza img {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  padding: 18px;
  filter: saturate(.94) contrast(1.04);
  opacity: 0;
  transition: opacity .45s ease, transform .5s ease;
}
.portada-collage .pieza:not(.grande) img { padding-right: 27px; }
.portada-collage .pieza img.cargada { opacity: 1; }
.portada-collage .pieza:hover img { transform: scale(1.04); }

.titulo-pieza {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 9px 12px;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--fuente-ui); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform: translateY(101%);
  transition: transform .2s ease;
}
.portada-collage .pieza:hover .titulo-pieza,
.portada-collage .pieza:focus-visible .titulo-pieza { transform: none; }

@media (max-width: 980px) {
  /* Aqui si hace falta: `.portada-collage` sangra con margenes negativos
     (abajo) para llegar al borde de la pantalla, y esto lo contiene. */
  .portada-catalogo { overflow: hidden; }
  .portada-grid { grid-template-columns: 1fr; min-height: 0; }
  .portada-texto { padding-right: 0; }
  .portada-collage {
    min-height: 250px; margin: 0 -22px;
    grid-template-columns: 1fr 1fr;
    border-left: 0; border-top: 1px solid var(--crema-30);
  }
  .portada-collage .grande { grid-row: 1 / span 2; }
}

@media (max-width: 620px) {
  .portada-catalogo h1 { font-size: 38px; line-height: 1.02; }
  .portada-collage { min-height: 200px; margin: 0 -16px; }
  .portada-acciones { flex-direction: column; align-items: stretch; }
  .portada-acciones .boton + .boton { border-left: 1px solid; border-top: 0; }
  .portada-catalogo .cifra { padding: 14px 6px 0; }
}

@media (max-width: 400px) {
  .portada-catalogo h1 { font-size: 34px; }
}

/* ------------------------------------------------------ Páginas públicas -- */

/* --- Portada editorial a pantalla completa ------------------------------- */
.portada-carrusel { position: relative; min-height: max(520px, calc(var(--alto-visible) - var(--alto-cabecera))); overflow: hidden; isolation: isolate; background: var(--negro); color: var(--crema); border-bottom: 1px solid var(--linea); }
.portada-pista, .portada-slide { position: absolute; inset: 0; }
.portada-slide { visibility: hidden; opacity: 0; transition: opacity .9s var(--salida), visibility 0s .9s; }
.portada-slide.activa { z-index: 1; visibility: visible; opacity: 1; transition-delay: 0s; }
.portada-slide > img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.04); transform: scale(1.035); transition: transform 7s linear; }
.portada-slide.activa > img { transform: scale(1); }
.portada-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 20, 18, .76) 0%, rgba(20, 20, 18, .45) 43%, rgba(20, 20, 18, .08) 72%), linear-gradient(0deg, rgba(20, 20, 18, .42) 0%, transparent 45%); }
.portada-contenido { position: absolute; z-index: 2; left: max(22px, calc((100vw - 1360px) / 2 + 22px)); top: clamp(28px, 6vh, 70px); bottom: 88px; width: min(760px, calc(100vw - 44px)); display: flex; flex-direction: column; justify-content: center; color: var(--crema); }
.portada-rotulo { margin: 0 0 18px; font-family: var(--fuente-ui); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja); }
.portada-contenido h1, .portada-contenido h2 { max-width: 12ch; color: var(--crema); font-size: clamp(42px, min(7.2vw, calc(var(--alto-visible) * .105)), 96px); font-weight: 300; line-height: .92; text-wrap: balance; transform: translateY(20px); opacity: 0; transition: transform .8s .16s var(--salida), opacity .6s .16s ease; }
.portada-contenido > p:not(.portada-rotulo) { max-width: 48ch; margin: 22px 0 0; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.42; color: var(--crema); opacity: 0; transform: translateY(14px); transition: transform .7s .28s var(--salida), opacity .55s .28s ease; }
.portada-slide.activa :is(h1, h2, .portada-contenido > p) { opacity: 1; transform: none; }
.portada-contenido .portada-acciones { margin-top: 30px; }
.portada-contenido > .boton { width: fit-content; max-width: 100%; align-self: flex-start; margin-top: 30px; }
.portada-contenido .boton { border-color: var(--crema); padding: 15px 26px; }
.portada-contenido .boton.principal { background: var(--crema); color: var(--negro); }
.portada-contenido .boton.principal:hover { background: var(--naranja); border-color: var(--naranja); }
.portada-contenido .boton.fantasma { color: var(--crema); }
.portada-controles { position: absolute; z-index: 4; right: max(22px, calc((100vw - 1360px) / 2 + 22px)); bottom: 28px; display: flex; align-items: center; border: 1px solid rgba(229, 226, 193, .48); background: rgba(31, 31, 31, .2); -webkit-backdrop-filter: var(--desenfoque-suave); backdrop-filter: var(--desenfoque-suave); }
.portada-flecha, .portada-pausa, .portada-indicador { border-radius: 0; cursor: pointer; color: var(--crema); }
.portada-flecha { width: 52px; height: 48px; border: 0; border-right: 1px solid rgba(229, 226, 193, .48); background: transparent; font-size: 22px; }
.portada-flecha.siguiente { border-right: 0; border-left: 1px solid rgba(229, 226, 193, .48); }
.portada-flecha:hover, .portada-pausa:hover { background: var(--crema); color: var(--negro); }
.portada-indicadores { flex: 1; display: flex; gap: 8px; padding: 0 18px; }
.portada-indicador { position: relative; flex: 1; height: 20px; padding: 0; border: 0; background: transparent; }
.portada-indicador::before { content: ""; position: absolute; inset: 9px 0 auto; height: 2px; background: rgba(229, 226, 193, .34); }
.portada-indicador.activo::before { background: var(--naranja); }
.portada-contador { min-width: 76px; margin: 0; font-family: var(--fuente-ui); font-size: 11px; text-align: center; letter-spacing: .08em; }
.portada-pausa { position: absolute; z-index: 4; top: 22px; right: max(22px, calc((100vw - 1360px) / 2 + 22px)); width: 42px; height: 42px; border: 1px solid rgba(229, 226, 193, .6); background: rgba(31, 31, 31, .25); font-family: var(--fuente-ui); -webkit-backdrop-filter: var(--desenfoque-suave); backdrop-filter: var(--desenfoque-suave); }

@media (max-width: 700px) {
  .portada-carrusel { min-height: max(560px, calc(var(--alto-visible) - var(--alto-cabecera))); }
  .portada-velo { background: linear-gradient(0deg, rgba(20, 20, 18, .88) 0%, rgba(20, 20, 18, .45) 62%, rgba(20, 20, 18, .12) 100%); }
  .portada-contenido { left: 16px; top: 18px; bottom: 82px; width: calc(100vw - 32px); justify-content: flex-end; }
  .portada-contenido h1, .portada-contenido h2 { font-size: clamp(42px, 13vw, 64px); }
  .portada-contenido > p:not(.portada-rotulo) { max-width: 34ch; font-size: 17px; }
  .portada-contenido .portada-acciones { align-items: flex-start; gap: 8px; }
  .portada-contenido .portada-acciones .boton + .boton { border: 1px solid var(--crema); }
  .portada-controles { left: auto; right: 16px; bottom: 18px; }
  .portada-flecha { width: 44px; }
  .portada-contador { display: block; min-width: 68px; }
  .portada-indicadores { padding: 0 10px; gap: 5px; }
  .portada-pausa { top: 14px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .portada-slide, .portada-slide > img, .portada-contenido h1, .portada-contenido h2, .portada-contenido > p { transition: none; }
}

.inicio-atajos {
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--linea);
}
.pagina-cabeza-dos {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; margin-bottom: 1px;
  border-bottom: 1px solid var(--linea);
}
.pagina-cabeza-dos h2 {
  max-width: 14ch; margin: 0;
  font-size: clamp(31px, 5vw, 56px);
  line-height: 1; font-weight: 300;
}
.atajos-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea);
}
.atajo-card {
  min-width: 0; min-height: 230px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 20px;
  background: var(--crema-claro); color: var(--negro);
  text-decoration: none;
}
.atajo-card:hover {
  background: #fff; color: var(--negro); text-decoration: none;
}
.atajo-card .rotulo,
.sucursal-info .rotulo {
  margin: 0;
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.atajo-card strong {
  font-size: 25px; line-height: 1.05; font-weight: 400;
}
.atajo-card span:last-child {
  color: var(--texto-suave); line-height: 1.45;
}

.sucursales-pagina {
  /* Es lo primero que se ve en Contacto: va pegado a la cabecera, sin aire
     arriba. El espacio antes de la siguiente seccion si se queda. */
  padding: 0 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--linea);
}
.sucursales-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea);
}
.sucursal-card {
  min-width: 0; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--crema-claro);
}
.sucursal-foto {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--negro);
  border-bottom: 1px solid var(--linea);
}
.sucursal-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sucursal-mapa {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: var(--crema); border-top: 1px solid var(--linea);
}
.sucursal-mapa iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.sucursal-info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(20px, 3vw, 30px);
}
.sucursal-info h3 {
  margin: 0; font-size: clamp(34px, 5vw, 58px);
  line-height: .95; font-weight: 300; color: var(--negro);
}
.sucursal-datos {
  width: 100%; margin: 0;
  display: grid; gap: 1px;
  background: var(--linea-suave);
  border: 1px solid var(--linea-suave);
}
.sucursal-datos div {
  min-width: 0; padding: 12px 13px;
  background: var(--crema-hueso);
}
.sucursal-datos dt {
  margin: 0 0 4px;
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
}
.sucursal-datos dd {
  margin: 0;
  color: var(--texto-suave);
  line-height: 1.36;
  overflow-wrap: anywhere;
}
.sucursal-datos a { color: var(--negro); }
.sucursal-datos a:hover { color: var(--naranja); text-decoration: none; }

/* Telefonos como botones de copiar, no enlaces "tel:": en una computadora
   nadie tiene marcador para un "tel:", asi que el clic copia el numero para
   pegarlo donde si se pueda marcar (ver copiarTexto en comun.js). */
.sucursal-telefonos { display: flex; flex-wrap: wrap; gap: 6px; }
.sucursal-tel {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--linea-suave);
  background: #fff; color: var(--negro);
  font: inherit; font-size: 13px; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.sucursal-tel:hover,
.sucursal-tel:focus-visible { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.sucursal-tel-linea {
  font-family: var(--fuente-ui); font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-tenue);
}
.sucursal-tel:hover .sucursal-tel-linea,
.sucursal-tel:focus-visible .sucursal-tel-linea { color: inherit; opacity: .72; }
.sucursal-acciones {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 0;
}
.sucursal-acciones .boton + .boton { border-left: 0; }

/* Pantallas táctiles: los botones de copiar teléfono medían menos de 30 px
   de alto. */
@media (pointer: coarse) {
  .sucursal-tel { min-height: 40px; align-items: center; padding: 8px 11px; }
}

@media (max-width: 760px) {
  .pagina-cabeza-dos { display: block; }
  .pagina-cabeza-dos h2 { margin-top: 8px; }
  .atajos-grid,
  .sucursales-grid { grid-template-columns: 1fr; }
  .sucursal-acciones {
    width: 100%; flex-direction: column; align-items: stretch;
  }
  .sucursal-acciones .boton + .boton {
    border-left: 1px solid var(--linea);
    border-top: 0;
  }
}

/* --------------------------------------------------- Cintillo de marcas -- */

.cintillo-marcas {
  background: var(--crema-claro);
  border-bottom: 1px solid var(--linea);
}
.cintillo-fila {
  display: flex; align-items: center; gap: 16px;
  min-height: 52px;
}
.cintillo-rotulo {
  flex: none;
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.cintillo-pistas {
  display: flex; gap: 0; overflow-x: auto; flex: 1;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cintillo-marca {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-left: 1px solid var(--linea-suave);
  font-family: var(--fuente-ui); font-size: 11.5px; text-transform: uppercase;
  color: var(--texto-suave); white-space: nowrap;
}
.cintillo-pistas .cintillo-marca:last-child { border-right: 1px solid var(--linea-suave); }
.cintillo-marca:hover { background: var(--naranja); color: var(--negro); text-decoration: none; }
.cintillo-marca .cuenta { font-size: 10px; color: var(--texto-tenue); }
.cintillo-marca:hover .cuenta { color: var(--negro); }

@media (max-width: 620px) {
  .cintillo-rotulo { display: none; }
  .cintillo-fila { min-height: 46px; }
}

/* --------------------------------------------------------- Inspiración --- */

#inspiracion { scroll-margin-top: calc(var(--alto-cabecera) + 8px); }

.inspiracion {
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  padding: clamp(44px, 6vw, 78px) 0;
}
.inspiracion-cabeza {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .6fr);
  gap: clamp(22px, 4vw, 58px); align-items: end;
  padding-bottom: 22px; margin-bottom: 28px;
  border-bottom: 1px solid var(--linea);
}
.inspiracion-cabeza h1,
.inspiracion-cabeza h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: .98; font-weight: 300; letter-spacing: 0;
}
.inspiracion-cabeza > p:last-child {
  margin: 0; color: var(--texto-suave);
  font-size: 17px; line-height: 1.48;
}
/* Esquinas rectas otra vez: sin excepciones a la regla 1 de identidad. Lo que
   la hace sentir liviana es que arranca CONTRAIDA (un resumen de una linea) y
   se abre con un clic, no que tenga bordes redondos. */
.inspiracion-navegacion {
  position: sticky; top: var(--alto-cabecera); z-index: 5;
  margin-bottom: 22px;
  border: 1px solid var(--linea);
  background: var(--vidrio-claro);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  backdrop-filter: var(--desenfoque-suave);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.inspiracion-navegacion.abierta {
  background: var(--vidrio-crema-denso);
  box-shadow: var(--sombra-dura);
}

.inspiracion-nav-toggle {
  display: flex; width: 100%; align-items: center; gap: 12px;
  padding: 13px 16px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--fuente-ui); text-align: left;
  color: var(--negro);
}
.inspiracion-nav-toggle .rotulo { flex: none; margin: 0; }
.inspiracion-nav-resumen {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inspiracion-nav-flecha {
  flex: none; font-size: 12px; color: var(--texto-tenue);
  transition: transform var(--transicion);
}
.inspiracion-navegacion.abierta > .inspiracion-nav-toggle .inspiracion-nav-flecha { transform: rotate(180deg); }
.inspiracion-nav-toggle:hover .inspiracion-nav-resumen { color: var(--negro); }
.inspiracion-nav-toggle:focus-visible { outline: 2px solid var(--naranja); outline-offset: -2px; }

/* Truco de "auto height" animado: 0fr colapsa el contenido sin medirlo a
   mano, 1fr lo deja crecer a su alto natural. `overflow: hidden` en el
   contenedor interno es lo que de verdad recorta mientras esta en 0fr. */
.inspiracion-nav-cuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--salida);
}
.inspiracion-navegacion.abierta .inspiracion-nav-cuerpo { grid-template-rows: 1fr; }
.inspiracion-nav-cuerpo-interno {
  overflow: hidden; min-height: 0;
  opacity: 0; transition: opacity .18s ease;
}
.inspiracion-navegacion.abierta .inspiracion-nav-cuerpo-interno { opacity: 1; transition-delay: .08s; }

/* Espacios y Marcas son, cada uno, su propio acordeon anidado dentro del
   panel de Filtros: arrancan contraidos igual que el panel, y se abren
   independiente uno del otro (subcabeza ahora es un <button>). */
.inspiracion-grupo + .inspiracion-grupo .inspiracion-subcabeza { border-top: 1px solid var(--linea); }
.inspiracion-subcabeza {
  display: flex; width: 100%; justify-content: space-between; align-items: baseline;
  gap: 16px; margin: 0;
  padding: 12px 16px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.inspiracion-subcabeza:hover h2,
.inspiracion-subcabeza:hover h3 { color: var(--naranja); }
.inspiracion-subcabeza:focus-visible { outline: 2px solid var(--naranja); outline-offset: -2px; }
.inspiracion-grupo.abierto > .inspiracion-subcabeza .inspiracion-nav-flecha { transform: rotate(180deg); }
.inspiracion .rotulo {
  margin: 0;
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.inspiracion-subcabeza h2,
.inspiracion-subcabeza h3 {
  margin: 0; font-size: 16px; font-weight: 400; color: var(--texto);
  transition: color var(--transicion);
}
.inspiracion-subcuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s var(--salida);
}
.inspiracion-grupo.abierto .inspiracion-subcuerpo { grid-template-rows: 1fr; }
.inspiracion-subcuerpo-interno { overflow: hidden; min-height: 0; }
.inspiracion-tabs,
.inspiracion-marcas-nav {
  display: flex; overflow-x: auto;
  background: #fff;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  /* Barra de scroll oculta a proposito: se arrastra con el dedo o el mouse. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.inspiracion-tabs::-webkit-scrollbar,
.inspiracion-marcas-nav::-webkit-scrollbar { display: none; }
.inspiracion-tabs.arrastrando,
.inspiracion-marcas-nav.arrastrando { cursor: grabbing; scroll-behavior: auto; }
.inspiracion-tab,
.inspiracion-marca-tab {
  flex: 0 0 auto;
  min-height: 48px; padding: 0 18px;
  border: 0; border-right: 1px solid var(--linea);
  background: #fff; color: var(--negro);
  font-family: var(--fuente-ui); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.inspiracion-tab:hover,
.inspiracion-marca-tab:hover { background: var(--naranja); color: var(--negro); }
.inspiracion-tab.activa,
.inspiracion-marca-tab.activa { background: var(--negro); color: var(--crema); }
.inspiracion-marca-tab span {
  margin-left: 8px; color: inherit; opacity: .62;
  font-size: 10px;
}
.inspiracion-panel { margin-top: 22px; }
.inspiracion-panel-cabeza {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  padding: 0 0 14px; margin-bottom: 1px;
  border-bottom: 1px solid var(--linea);
}
.inspiracion-panel-cabeza h2,
.inspiracion-panel-cabeza h3 {
  margin: 4px 0 0; font-size: 27px; line-height: 1.05; font-weight: 300;
}
.inspiracion-panel-cabeza > p {
  margin: 0;
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
  white-space: nowrap;
}
/* ------------------------------------------------------------ Blog (/blog) --
   Pagina propia (menu: Inspiración > Blog) con las notas tipo recomendacion
   que se escriben en /interno. */
.blog-cabeza {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--linea);
}
.blog-cabeza h1 {
  margin: 4px 0 0;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1; font-weight: 300;
}
.blog-cabeza > p:last-child {
  margin: 0; max-width: 42ch; color: var(--texto-suave);
  font-size: 15px; line-height: 1.45;
}
@media (max-width: 620px) {
  .blog-cabeza { display: block; }
  .blog-cabeza > p:last-child { margin-top: 10px; }
}

/* Portada del blog. La nota destacada (o, si no hay, la mas reciente) va a
   todo lo ancho; las demas en una rejilla pareja. Las fotos van enteras (sin
   recorte) dentro de un marco de alto fijo, sobre el fondo hueso: asi las
   tarjetas alinean sin importar si la portada es vertical u horizontal. */
.blog-tarjeta {
  display: flex; flex-direction: column;
  background: var(--crema-claro); color: var(--negro);
  border: 1px solid var(--linea);
  text-decoration: none;
  transition: box-shadow .24s ease, transform .24s var(--salida), border-color .24s ease;
}
.blog-tarjeta:hover,
.blog-tarjeta:focus-visible {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--negro);
  box-shadow: var(--sombra-dura);
}
.blog-tarjeta:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.blog-tarjeta-foto {
  display: flex; align-items: center; justify-content: center;
  height: 230px; padding: 14px;
  background: var(--crema-hueso);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
}
.blog-tarjeta-foto img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform .5s var(--salida);
}
.blog-tarjeta:hover .blog-tarjeta-foto img { transform: scale(1.03); }
.blog-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.blog-tarjeta-meta {
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.blog-tarjeta-meta b { color: var(--naranja); font-weight: 700; }
.blog-tarjeta-titulo {
  font-family: var(--fuente-texto); font-size: 19px; line-height: 1.15; font-weight: 400;
  text-transform: uppercase;
}
.blog-tarjeta-resumen {
  color: var(--texto-suave); font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-tarjeta-leer {
  margin-top: auto; padding-top: 8px;
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.blog-tarjeta-leer span { color: var(--naranja); display: inline-block; transition: transform .24s var(--salida); }
.blog-tarjeta:hover .blog-tarjeta-leer span { transform: translateX(5px); }

.blog-mosaico {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.blog-destacadas { display: grid; gap: 20px; margin-bottom: 28px; }
.blog-tarjeta.grande { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.blog-tarjeta.grande.sin-foto { grid-template-columns: 1fr; }
.blog-tarjeta.grande .blog-tarjeta-foto { height: auto; min-height: 340px; border-bottom: 0; border-right: 1px solid var(--linea); padding: 22px; }
.blog-tarjeta.grande .blog-tarjeta-foto img { max-height: 420px; }
.blog-tarjeta.grande .blog-tarjeta-cuerpo { justify-content: center; padding: clamp(22px, 4vw, 48px); gap: 12px; }
.blog-tarjeta.grande .blog-tarjeta-titulo { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.05; font-weight: 300; }
.blog-tarjeta.grande .blog-tarjeta-resumen { font-size: 16px; -webkit-line-clamp: 5; }
.blog-tarjeta.grande .blog-tarjeta-leer { margin-top: 6px; }
@media (max-width: 760px) {
  .blog-tarjeta.grande { grid-template-columns: 1fr; }
  .blog-tarjeta.grande .blog-tarjeta-foto { min-height: 0; height: 260px; border-right: 0; border-bottom: 1px solid var(--linea); }
}

/* ------------------------------------------------ Nota (/blog/<id>-...) ---
   Encabezado en tres diseños y un cuerpo de bloques. El texto se lee en una
   columna angosta; las imagenes pueden salirse a "ancho" o "completo". */
article.nota { padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 6vw, 80px); background: var(--crema); }
article.nota .rotulo {
  margin: 0;
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
article.nota .rotulo a { color: inherit; }
article.nota .rotulo a:hover { color: var(--naranja); text-decoration: none; }

/* Barra de lectura, fija arriba de todo. */
.nota-progreso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 3px;
  background: var(--naranja); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

.nota-aviso {
  margin: 0 0 22px; padding: 10px 14px;
  background: var(--negro); color: var(--crema);
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

.nota-cabecera { margin-bottom: clamp(28px, 4vw, 48px); }
.nota-cabecera h1 {
  margin: 10px 0 0;
  font-size: clamp(30px, 4.2vw, 54px); line-height: 1; font-weight: 300;
  letter-spacing: -.01em;
}
.nota-entrada {
  margin: 16px 0 0; max-width: 62ch;
  color: var(--texto-suave); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
}
/* Portada entera (sin recorte) pero topada de alto; lo que sobra es fondo. */
.nota-portada {
  margin: 0; padding: clamp(12px, 2vw, 24px);
  background: var(--crema-hueso); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
}
.nota-portada img { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; }

.nota-cabecera.diseno-portada-grande .nota-cabecera-texto { max-width: 820px; margin-bottom: 26px; }
.nota-cabecera.diseno-portada-lateral {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px); align-items: center;
}
.nota-cabecera.diseno-portada-lateral .nota-portada img { max-height: 440px; }
.nota-cabecera.diseno-solo-titulo {
  max-width: 760px; margin-left: auto; margin-right: auto; text-align: center;
  padding-bottom: 28px; border-bottom: 1px solid var(--linea);
}
.nota-cabecera.diseno-solo-titulo .nota-entrada { margin-left: auto; margin-right: auto; }
@media (max-width: 820px) {
  .nota-cabecera.diseno-portada-lateral { grid-template-columns: 1fr; }
}

.nota-cuerpo { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.nota-bloque { width: 100%; max-width: 700px; margin: 0; }

/* Texto corrido: parrafos, listas y formato en linea. */
.nota-texto p,
.nota-destacado p,
.nota-paso-cuerpo p,
.nota-imagen-texto-cuerpo p { margin: 0 0 14px; }
.nota-texto p { font-size: 17px; line-height: 1.72; color: var(--texto); }
.nota-bloque p:last-child,
.nota-bloque ul:last-child,
.nota-bloque ol:last-child { margin-bottom: 0; }
.nota-bloque strong { font-weight: 700; color: var(--negro); }
.nota-bloque em { font-style: italic; }
.nota-texto a,
.nota-destacado a,
.nota-paso-cuerpo a,
.nota-imagen-texto-cuerpo a,
.nota-bloque figcaption a {
  color: var(--negro); text-decoration: underline;
  text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.nota-texto a:hover,
.nota-destacado a:hover,
.nota-paso-cuerpo a:hover,
.nota-imagen-texto-cuerpo a:hover { color: var(--naranja); }
.nota-cuerpo ul,
.nota-cuerpo .nota-texto ol,
.nota-destacado ol,
.nota-paso-cuerpo ol,
.nota-imagen-texto-cuerpo ol {
  margin: 0 0 14px; padding: 0; list-style: none;
  font-size: 17px; line-height: 1.6;
}
.nota-cuerpo ul li,
.nota-cuerpo .nota-texto ol li,
.nota-destacado ol li,
.nota-paso-cuerpo ol li,
.nota-imagen-texto-cuerpo ol li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.nota-cuerpo ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; background: var(--naranja); transform: rotate(45deg);
}
.nota-cuerpo .nota-texto ol,
.nota-destacado ol,
.nota-paso-cuerpo ol,
.nota-imagen-texto-cuerpo ol { counter-reset: lista; }
.nota-cuerpo .nota-texto ol li,
.nota-destacado ol li,
.nota-paso-cuerpo ol li,
.nota-imagen-texto-cuerpo ol li { counter-increment: lista; }
.nota-cuerpo .nota-texto ol li::before,
.nota-destacado ol li::before,
.nota-paso-cuerpo ol li::before,
.nota-imagen-texto-cuerpo ol li::before {
  content: counter(lista) "."; position: absolute; left: 0; top: 0;
  font-family: var(--fuente-ui); font-weight: 700; font-size: .82em; line-height: 1.95; color: var(--naranja);
}

.nota-texto.estilo-entrada p {
  font-size: clamp(19px, 1.8vw, 22px); line-height: 1.55; font-weight: 300; color: var(--texto-suave);
}
.nota-texto.estilo-entrada p:first-child::first-letter {
  float: left; margin: 6px 10px 0 0;
  font-size: 3.4em; line-height: .8; font-weight: 400; color: var(--naranja);
}
.nota-texto.estilo-columnas { max-width: 960px; columns: 2 300px; column-gap: 44px; }
.nota-texto.estilo-columnas p { break-inside: avoid-column; }

.nota-subtitulo { scroll-margin-top: calc(var(--alto-cabecera) + 20px); }
.nota-subtitulo.nivel-2 {
  margin-top: 18px; margin-bottom: -4px;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.1; font-weight: 400;
}
.nota-subtitulo.nivel-2::before {
  content: ""; display: block; width: 36px; height: 3px; margin-bottom: 14px;
  background: var(--naranja);
}
.nota-subtitulo.nivel-3 {
  margin-top: 6px; margin-bottom: -10px;
  font-size: 18px; line-height: 1.2; font-weight: 400;
}
.nota-subtitulo.centro { text-align: center; }
.nota-subtitulo.centro::before { margin-left: auto; margin-right: auto; }

/* Indice de la nota. */
.nota-indice {
  padding: 18px 22px; border: 1px solid var(--linea); background: var(--crema-claro);
}
.nota-indice ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: indice; display: grid; gap: 6px; }
.nota-indice li { counter-increment: indice; display: flex; gap: 10px; align-items: baseline; padding: 0; margin: 0; font-size: 15px; }
.nota-cuerpo .nota-indice li::before {
  content: counter(indice, decimal-leading-zero); position: static; transform: none;
  width: auto; height: auto; background: none;
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700; color: var(--naranja);
}
.nota-indice a { color: var(--negro); }
.nota-indice a:hover { color: var(--naranja); text-decoration: none; }

/* Imagenes de los bloques: enteras, sin recorte, con alto topado. */
.nota-imagen { display: flex; flex-direction: column; align-items: center; }
.nota-imagen img,
.nota-galeria img,
.nota-imagen-texto-foto img,
.nota-paso-foto img {
  display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;
}
.nota-imagen img { max-height: 560px; border: 1px solid var(--linea); background: var(--crema-hueso); }
.nota-imagen.ancho-completo img { max-height: 680px; }
.nota-imagen.ancho-completo { padding: clamp(12px, 2vw, 24px); background: var(--crema-hueso); border: 1px solid var(--linea); }
.nota-imagen.ancho-completo img { border: 0; }
.nota-bloque figcaption {
  margin-top: 10px; align-self: stretch; text-align: center;
  font-family: var(--fuente-ui); font-size: 11px; letter-spacing: .03em; color: var(--texto-tenue);
}
.nota-imagen.ancho-ancho,
.nota-galeria { max-width: 980px; }
.nota-imagen.ancho-completo { max-width: none; }

/* Posicion y tamaño: el marco ocupa una parte del ancho del bloque y se pega
   a la izquierda, al centro o a la derecha; la foto y su pie lo siguen. */
.nota-imagen-marco { display: flex; flex-direction: column; align-items: center; width: 100%; }
.nota-imagen.tamano-mediana .nota-imagen-marco { width: 62%; }
.nota-imagen.tamano-chica .nota-imagen-marco { width: 40%; }
.nota-imagen.posicion-izquierda { align-items: flex-start; }
.nota-imagen.posicion-izquierda .nota-imagen-marco { align-items: flex-start; }
.nota-imagen.posicion-izquierda img { margin-left: 0; }
.nota-imagen.posicion-izquierda figcaption { text-align: left; }
.nota-imagen.posicion-derecha { align-items: flex-end; }
.nota-imagen.posicion-derecha .nota-imagen-marco { align-items: flex-end; }
.nota-imagen.posicion-derecha img { margin-right: 0; }
.nota-imagen.posicion-derecha figcaption { text-align: right; }
@media (max-width: 620px) {
  .nota-imagen.tamano-mediana .nota-imagen-marco { width: 100%; }
  .nota-imagen.tamano-chica .nota-imagen-marco { width: 64%; }
}

.nota-galeria-fotos { columns: 2; column-gap: 12px; }
.nota-galeria.columnas-3 .nota-galeria-fotos { columns: 3; }
.nota-galeria.columnas-4 .nota-galeria-fotos { columns: 4; }
.nota-galeria-fotos > div {
  break-inside: avoid; margin-bottom: 12px;
  display: flex; justify-content: center; padding: 8px;
  background: var(--crema-hueso); border: 1px solid var(--linea);
}
.nota-galeria img { max-height: 340px; }
@media (max-width: 620px) {
  .nota-galeria.columnas-3 .nota-galeria-fotos,
  .nota-galeria.columnas-4 .nota-galeria-fotos { columns: 2; }
}

.nota-imagen-texto {
  max-width: 980px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px); align-items: center;
}
.nota-imagen-texto-foto { padding: 12px; background: var(--crema-hueso); border: 1px solid var(--linea); }
.nota-imagen-texto-foto img { max-height: 420px; }
.nota-imagen-texto.sin-foto { grid-template-columns: 1fr; max-width: 700px; }
.nota-imagen-texto.foto-derecha .nota-imagen-texto-foto { order: 2; }
/* Imagen antes o despues del texto: una sola columna, foto a todo lo ancho. */
.nota-imagen-texto.foto-arriba,
.nota-imagen-texto.foto-abajo { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 18px; }
.nota-imagen-texto.foto-abajo .nota-imagen-texto-foto { order: 2; }
.nota-imagen-texto h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.1; font-weight: 400; text-transform: uppercase; }
.nota-imagen-texto-cuerpo p { font-size: 16px; line-height: 1.65; color: var(--texto-suave); }
@media (max-width: 760px) {
  .nota-imagen-texto { grid-template-columns: 1fr; }
  .nota-imagen-texto.foto-derecha .nota-imagen-texto-foto { order: 0; }
}

/* Citas: con raya lateral o grande y centrada. */
.nota-cita { padding: 6px 0 6px 26px; border-left: 3px solid var(--naranja); }
.nota-cita p {
  margin: 0;
  font-family: var(--fuente-texto); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; font-weight: 300;
}
.nota-cita cite {
  display: block; margin-top: 12px;
  font-family: var(--fuente-ui); font-style: normal; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
}
.nota-cita.estilo-grande {
  max-width: 860px; padding: clamp(24px, 4vw, 44px) 0; border-left: 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  text-align: center;
}
.nota-cita.estilo-grande::before {
  content: "\201C"; display: block; height: .55em; margin-bottom: 8px;
  font-family: var(--fuente-texto); font-size: 84px; line-height: 1; color: var(--naranja);
}
.nota-cita.estilo-grande p { font-size: clamp(24px, 3vw, 36px); line-height: 1.2; }

/* Recuadros: consejo, importante y nota. */
.nota-destacado {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 20px 22px; border: 1px solid var(--linea); border-left-width: 4px;
}
.nota-destacado-icono { display: grid; place-items: center; width: 40px; height: 40px; }
.nota-destacado-titulo {
  margin: 2px 0 6px !important;
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.nota-destacado p, .nota-destacado li { font-size: 16px; line-height: 1.6; }
.nota-destacado.variante-consejo { background: var(--cafe-tenue); border-color: var(--cafe); }
.nota-destacado.variante-consejo .nota-destacado-icono,
.nota-destacado.variante-consejo .nota-destacado-titulo { color: var(--cafe); }
.nota-destacado.variante-importante { background: var(--naranja-tenue); border-color: var(--naranja); }
.nota-destacado.variante-importante .nota-destacado-icono,
.nota-destacado.variante-importante .nota-destacado-titulo { color: #8f2d18; }
.nota-destacado.variante-nota { background: var(--crema-claro); border-color: var(--negro); }

/* Pasos numerados: numero grande, texto y (opcional) foto a un lado. */
.nota-pasos { max-width: 860px; padding: 0; list-style: none; counter-reset: none; }
.nota-cuerpo .nota-pasos > li::before { content: none; }
.nota-paso {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px 20px;
  padding: 24px 0; border-top: 1px solid var(--linea);
  margin: 0;
}
.nota-cuerpo .nota-pasos > .nota-paso { padding-left: 0; margin-bottom: 0; }
.nota-paso:last-child { border-bottom: 1px solid var(--linea); }
.nota-paso.con-foto { grid-template-columns: 74px minmax(0, 1fr) minmax(0, .9fr); align-items: start; }
.nota-paso-num {
  font-family: var(--fuente-texto); font-size: 52px; line-height: .9; font-weight: 300;
  color: var(--naranja);
}
.nota-paso-cuerpo h3 { margin: 4px 0 10px; font-size: 21px; line-height: 1.15; font-weight: 400; text-transform: uppercase; }
.nota-paso-cuerpo p, .nota-paso-cuerpo li { font-size: 16px; line-height: 1.65; color: var(--texto-suave); }
.nota-paso-foto { padding: 10px; background: var(--crema-hueso); border: 1px solid var(--linea); }
.nota-paso-foto img { max-height: 340px; }
@media (max-width: 700px) {
  .nota-paso,
  .nota-paso.con-foto { grid-template-columns: 52px minmax(0, 1fr); }
  .nota-paso-num { font-size: 38px; }
  .nota-paso-foto { grid-column: 2; margin-top: 10px; }
}

.nota-boton { text-align: left; }
.nota-boton.centro { text-align: center; }
.nota-boton .boton { min-width: 220px; justify-content: center; }
.nota-boton .boton.nota-boton-wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.nota-boton .boton.nota-boton-wa:hover { background: #17603c; border-color: #17603c; }

.nota-separador { border: 0; }
.nota-separador.linea { border-top: 1px solid var(--linea); }
.nota-separador.espacio { height: clamp(10px, 3vw, 32px); }
.nota-separador.adorno { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.nota-separador.adorno span { flex: 1; border-top: 1px solid var(--linea); }
.nota-separador.adorno i { width: 9px; height: 9px; background: var(--naranja); transform: rotate(45deg); }

/* Compartir al final de la nota. */
.nota-compartir {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--linea);
}
.nota-compartir > div { display: flex; gap: 8px; flex-wrap: wrap; }

.nota-otras {
  margin-top: clamp(48px, 7vw, 88px); padding-top: 24px;
  border-top: 1px solid var(--negro);
}
.nota-otras-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; margin-top: 14px;
}
.nota-otra {
  display: flex; flex-direction: column; gap: 8px;
  color: var(--negro); text-decoration: none;
}
.nota-otra:hover { text-decoration: none; }
.nota-otra-foto {
  display: flex; align-items: center; justify-content: center;
  height: 170px; padding: 10px;
  background: var(--crema-hueso); border: 1px solid var(--linea); margin-bottom: 4px;
}
.nota-otra-foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; }
.nota-otra-titulo {
  font-family: var(--fuente-texto); font-size: 16px; line-height: 1.2; text-transform: uppercase;
  transition: color .2s ease;
}
.nota-otra:hover .nota-otra-titulo { color: var(--naranja); }

@media (prefers-reduced-motion: reduce) {
  .blog-tarjeta, .blog-tarjeta-foto img, .blog-tarjeta-leer span { transition: none; }
}

/* Escenas: fotos de ambiente en columnas (mosaico), cada una ENTERA y a su
   proporcion natural. No se recortan: los puntos van en % de la foto, y un
   recorte los moveria fuera del material que señalan. */
.insp-escenas {
  columns: 3 300px; column-gap: 14px;
}
.insp-escena {
  break-inside: avoid;
  margin: 0 0 14px;
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  animation: insp-entrada .5s var(--salida) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes insp-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.insp-escena-foto { position: relative; background: var(--crema-hueso); }
.insp-escena-foto img { display: block; width: 100%; height: auto; }

/* Punto sobre la foto: un cuadro chico de vidrio (blanco translucido con
   desenfoque) que casi no tapa el ambiente. Al pasar el mouse (o al primer
   toque en pantalla tactil) se vuelve una ficha blanca con la parte del
   ambiente en mono y el nombre del material en la letra de los titulos.
   Esquinas rectas, como el resto de la identidad. */
.insp-punto {
  position: absolute; z-index: 2;
  display: flex; align-items: center;
  /* Sin esto, cerca del borde derecho el ancho se limita al espacio que queda
     a la derecha del punto y el nombre se corta aunque abra hacia la izquierda. */
  width: max-content;
  transform: translate(-11px, -50%);
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  color: var(--negro);
  text-decoration: none;
  transition: background .28s var(--salida), border-color .28s var(--salida), box-shadow .28s var(--salida);
}
.insp-punto:hover { text-decoration: none; }
/* El cuadro visible es de 22 px: con el dedo se fallaba seguido. Esta capa
   invisible amplía el área que responde al toque sin tapar más la foto. */
.insp-punto::after {
  content: ''; position: absolute; inset: -11px;
}
.insp-punto::before {
  /* Pulso muy suave para que se note que se puede tocar. */
  content: ''; position: absolute; left: -1px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  border: 1px solid rgba(255, 255, 255, .8);
  animation: insp-pulso 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes insp-pulso {
  0%   { transform: scale(1);   opacity: .7; }
  60%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.insp-punto-marca {
  position: relative; flex: none;
  width: 20px; height: 20px;
}
.insp-punto-marca::before {
  /* Punto blanco al centro; al abrir se vuelve una rayita oscura. */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: width .28s var(--salida), height .28s var(--salida), background .28s var(--salida);
}

.insp-punto-texto {
  display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center;
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0;
  transition: max-width .38s var(--salida), padding .38s var(--salida), opacity .2s ease;
}
.insp-punto-etiqueta {
  grid-column: 1; grid-row: 1;
  font-family: var(--fuente-ui); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.insp-punto-nombre {
  grid-column: 1; grid-row: 2;
  font-family: var(--fuente-texto); font-size: 15px; font-weight: 400; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
}
.insp-punto-flecha {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 14px; color: var(--naranja);
  transform: translateX(-4px);
  transition: transform .28s var(--salida);
}

.insp-punto:hover,
.insp-punto:focus-visible,
.insp-punto.abierto {
  z-index: 3;
  background: rgba(255, 255, 255, .94);
  border-color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.insp-punto:hover::before,
.insp-punto:focus-visible::before,
.insp-punto.abierto::before { animation: none; opacity: 0; }
.insp-punto:hover .insp-punto-marca::before,
.insp-punto:focus-visible .insp-punto-marca::before,
.insp-punto.abierto .insp-punto-marca::before { width: 1px; height: 26px; background: var(--linea); }
.insp-punto:hover .insp-punto-texto,
.insp-punto:focus-visible .insp-punto-texto,
.insp-punto.abierto .insp-punto-texto {
  max-width: min(300px, 64vw); opacity: 1;
  padding: 8px 14px 8px 4px;
  transition-delay: 0s, 0s, .08s;
}
.insp-punto:hover .insp-punto-flecha,
.insp-punto:focus-visible .insp-punto-flecha,
.insp-punto.abierto .insp-punto-flecha { transform: none; }
.insp-punto:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* Cerca del borde derecho: el cuadro se queda en su lugar y la ficha se abre
   hacia la izquierda. */
.insp-punto.hacia-izquierda {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 11px), -50%);
}
.insp-punto.hacia-izquierda::before { left: auto; right: -1px; }
.insp-punto.hacia-izquierda:hover .insp-punto-texto,
.insp-punto.hacia-izquierda:focus-visible .insp-punto-texto,
.insp-punto.hacia-izquierda.abierto .insp-punto-texto { padding: 8px 4px 8px 14px; }

@media (prefers-reduced-motion: reduce) {
  .insp-escena { animation: none; }
  .insp-punto::before { animation: none; opacity: 0; }
}

.inspiracion-vacia {
  grid-column: 1 / -1; margin: 0; padding: 18px;
  background: var(--crema-claro); color: var(--texto-suave);
}

@media (max-width: 980px) {
  .inspiracion-cabeza { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 620px) {
  .inspiracion { padding: 36px 0; }
  .inspiracion-cabeza { gap: 12px; margin-bottom: 22px; }
  .inspiracion-nav-toggle { padding: 11px 14px; }
  .inspiracion-nav-resumen { font-size: 12px; }
  .inspiracion-subcabeza { display: block; padding: 10px 14px; }
  .inspiracion-subcabeza h2,
  .inspiracion-subcabeza h3 { margin-top: 3px; font-size: 14px; }
  .inspiracion-tab,
  .inspiracion-marca-tab { min-height: 44px; padding: 0 14px; font-size: 10.5px; }
  .inspiracion-panel-cabeza { display: block; }
  .inspiracion-panel-cabeza h2,
  .inspiracion-panel-cabeza h3 { font-size: 24px; }
  .inspiracion-panel-cabeza > p { margin-top: 8px; }
  .insp-escenas { columns: 1; }
}

/* -------------------------------------------------------------- Diseño --- */

#catalogo { scroll-margin-top: calc(var(--alto-cabecera) + 8px); }

.columnas {
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: 0; padding: 0 0 64px;
}
.columnas > .lateral { border-right: 1px solid var(--linea); }
.columnas > .resultados { padding: 0 0 0 26px; min-width: 0; }

.panel {
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  border-radius: 0;
}
.panel-cabeza {
  padding: 12px 16px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.panel-cabeza h2 { font-size: 14px; letter-spacing: .02em; }
.panel-cuerpo { padding: 16px; }

/* ------------------------------------------------------------- Filtros --- */

.lateral {
  align-self: start;
  position: sticky; top: calc(var(--alto-cabecera) + 20px);
  max-height: calc(100vh - var(--alto-cabecera) - 40px);
  display: flex; flex-direction: column;
  padding: 24px 24px 24px 0;
  background: transparent;
}
.lateral-cabeza, .lateral-pie { display: none; }
.lateral-cuerpo { overflow-y: auto; overscroll-behavior: contain; }

.grupo-filtro + .grupo-filtro { margin-top: 26px; }

.filtro-titulo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-tenue);
  margin: 0 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--linea-suave);
}

/* Cuando el titulo lleva un "Limpiar" al lado, la línea la pinta el contenedor. */
.filtro-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--linea-suave);
}
.filtro-cabeza .filtro-titulo { margin: 0; padding: 0; border-bottom: 0; }
.filtro-limpiar {
  flex: none; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--fuente-ui); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--naranja);
  border-bottom: 1px solid currentColor;
}
.filtro-limpiar:hover { color: var(--negro); }

/* Disponibilidad, Marcas y Lineas son, cada uno, su propio acordeon: arrancan
   contraidos (salvo que ya lleguen con ese filtro puesto desde la URL) y no
   estorban mientras se abren los demas. Mismo truco de "auto height" animado
   que ya usa Inspiracion (grid-template-rows 0fr/1fr). */
.grupo-filtro-toggle {
  display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between;
  gap: 10px; border: 0; background: transparent; padding: 0; margin: 0;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.grupo-filtro-toggle:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.grupo-filtro-flecha {
  flex: none; font-size: 10px; color: var(--texto-tenue);
  transition: transform var(--transicion);
}
.grupo-filtro.abierto .grupo-filtro-flecha { transform: rotate(180deg); }

.grupo-filtro-cuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s var(--salida);
}
.grupo-filtro.abierto .grupo-filtro-cuerpo { grid-template-rows: 1fr; }
.grupo-filtro-cuerpo-interno { overflow: hidden; min-height: 0; }

.interruptor {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; cursor: pointer; user-select: none;
  font-family: var(--fuente-ui); font-size: 11.5px; text-transform: uppercase;
  color: var(--texto-suave);
}
.interruptor:hover { color: var(--negro); }
/* La casilla nativa no se puede pintar con esquinas rectas en todos los
   navegadores, así que se oculta y se dibuja una propia. */
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .casilla {
  flex: none; width: 16px; height: 16px;
  border: 1px solid var(--linea); background: var(--crema-hueso);
  display: grid; place-items: center;
  transition: background var(--transicion);
}
.interruptor input:checked + .casilla { background: var(--naranja); }
.interruptor input:checked + .casilla::after {
  content: ""; width: 8px; height: 4px;
  border-left: 2px solid var(--negro); border-bottom: 2px solid var(--negro);
  transform: rotate(-45deg) translate(1px, -1px);
}
.interruptor input:focus-visible + .casilla { outline: 2px solid var(--naranja); outline-offset: 2px; }

.filtro-buscar {
  width: 100%; margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--linea-suave); background: var(--crema-hueso);
  font-family: var(--fuente-ui); font-size: 11px; text-transform: uppercase;
  outline: none;
}
.filtro-buscar::placeholder { color: var(--texto-tenue); }
.filtro-buscar:focus { border-color: var(--linea); background: #fff; }

/* Las listas NO se desplazan por su cuenta.
   Antes cada una tenía su `max-height` con `overflow-y: auto`, así que en una
   columna de 260 px convivían tres barras de desplazamiento: la del cuerpo del
   panel y una por lista. Además de verse anticuado, obligaba a acertarle a la
   correcta. Ahora la única que se mueve es `.lateral-cuerpo`, y las listas
   largas se recortan con el botón "ver todas". */
.lista-lineas, .lista-marcas {
  display: flex; flex-direction: column; gap: 1px;
}

.ver-todas {
  width: 100%; margin-top: 8px; padding: 8px;
  border: 1px dashed var(--linea-suave); background: transparent; cursor: pointer;
  font-family: var(--fuente-ui); font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-suave);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.ver-todas:hover { border-style: solid; border-color: var(--linea); background: var(--negro); color: var(--crema); }

.item-filtro {
  display: flex; gap: 9px; align-items: center;
  width: 100%; text-align: left;
  padding: 7px 9px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font-family: var(--fuente-ui); font-size: 11.5px; text-transform: uppercase;
  color: var(--texto-suave);
  transition: background var(--transicion), color var(--transicion);
}
.item-filtro:hover { background: var(--crema-hueso); border-color: var(--linea-suave); color: var(--negro); }
.item-filtro.activa { background: var(--naranja); border-color: var(--linea); color: var(--negro); font-weight: 700; }
.item-filtro .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-filtro .cuenta { font-size: 10px; color: var(--texto-tenue); flex: none; }
.item-filtro.activa .cuenta { color: var(--negro); }

/* La casilla dice que se pueden marcar varias a la vez. */
.item-filtro .casilla {
  flex: none; width: 13px; height: 13px;
  border: 1px solid var(--linea-suave); background: var(--crema-hueso);
  display: grid; place-items: center;
}
.item-filtro:hover .casilla { border-color: var(--linea); }
.item-filtro.activa .casilla { background: var(--negro); border-color: var(--negro); }
.item-filtro.activa .casilla::after {
  content: ""; width: 7px; height: 3px;
  border-left: 2px solid var(--crema); border-bottom: 2px solid var(--crema);
  transform: rotate(-45deg) translate(1px, -1px);
  animation: palomear .2s var(--salida) both;
}
/* La palomita se dibuja de izquierda a derecha en vez de aparecer de golpe. */
@keyframes palomear {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Opcion que con los filtros puestos no daria ningun producto. Se deja a la
   vista, apagada, en lugar de esconderla: que desaparezcan opciones mientras
   se filtra desorienta más que verlas en cero. */
.item-filtro.vacia { opacity: .38; cursor: not-allowed; }
.item-filtro.vacia:hover { background: transparent; border-color: transparent; color: var(--texto-suave); }
.item-filtro.vacia:hover .casilla { border-color: var(--linea-suave); }

.lista-vacia {
  margin: 0; padding: 10px 9px;
  font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue);
}
.linea-lista { display: block; height: 28px; }

/* --- El mismo <aside> convertido en cajón cuando no caben dos columnas --- */

/* Mientras el servidor recalcula los conteos, las listas se apagan y no se
   dejan pulsar. Sin esto se puede marcar una opción leyendo el número viejo. */
.lista-marcas, .lista-lineas { transition: opacity .18s ease; }
.lateral.actualizando .lista-marcas,
.lateral.actualizando .lista-lineas { opacity: .4; pointer-events: none; }

.abrir-filtros { display: inline-flex; align-items: center; gap: 6px; }

/* Escritorio: el boton "Filtros" pliega la columna lateral y la rejilla
   toma todo el ancho (con auto-fill le caben mas tarjetas por fila). La
   transicion solo se activa tras el primer clic, para que al cargar con
   la preferencia guardada no se vea la columna cerrarse. */
@media (min-width: 901px) {
  body.plegado-animado .columnas { transition: grid-template-columns .24s ease; }
  body.plegado-animado .columnas > .lateral,
  body.plegado-animado .columnas > .resultados { transition: opacity .18s ease, padding .24s ease; }
  body.filtros-plegados .columnas { grid-template-columns: 0 minmax(0, 1fr); }
  body.filtros-plegados .columnas > .lateral {
    min-width: 0; overflow: hidden; padding-right: 0; border-right: 0;
    opacity: 0; visibility: hidden;
  }
  body.filtros-plegados .columnas > .resultados { padding-left: 0; }
}

.velo {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(31, 31, 31, .42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fundir .22s ease both;
}
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  .columnas { grid-template-columns: 1fr; }
  .columnas > .resultados { padding-left: 0; }
  .abrir-filtros { display: inline-flex; }

  /* En móvil la cabecera ocupa tres renglones: dejarla pegada se comería
     media pantalla. Se suelta, y lo que se queda arriba es la barra fija que
     le sigue en cada página (resultados en el catálogo, filtros en
     inspiración), que es lo que sirve mientras se recorre el contenido.
     `relative` y no `static` en la cabecera: sin posición, el desplegable del
     menú se metería por debajo de las tarjetas en lugar de encima.
     Sin este `top: 0` esas barras se quedan pegadas a `var(--alto-cabecera)`
     (la regla base, mas abajo en el archivo, gana el empate de cascada) y
     flotan a media pantalla en vez de pegarse al borde real. */
  .cabecera { position: relative; }
  #catalogo { scroll-margin-top: 0; }
  .inspiracion-navegacion { top: 0; }

  .columnas > .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: min(86vw, 380px); max-height: none;
    padding: 0;
    background: var(--vidrio-claro);
    -webkit-backdrop-filter: var(--desenfoque);
    backdrop-filter: var(--desenfoque);
    border-right: 1px solid var(--linea);
    box-shadow: var(--sombra-dura);
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  .columnas > .lateral.abierto {
    transform: none; visibility: visible;
    transition: transform .24s ease, visibility 0s;
  }

  .lateral-cabeza {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--linea);
    flex: none;
  }
  .lateral-titulo {
    margin: 0;
    font-family: var(--fuente-ui); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
  }
  .lateral-cuerpo { flex: 1; padding: 18px; }
  .lateral-pie {
    display: block; flex: none;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea); background: var(--crema-hueso);
  }
}

/* ------------------------------------------------ Barra de resultados ---- */

.barra-resultados {
  position: sticky; top: var(--alto-cabecera); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 0 12px;
  margin-bottom: 16px;
  /* Segunda barra fija de la página, y la que más rato se queda arriba. Mismo
     vidrio que la cabecera para que las dos se lean como una sola capa. */
  background: var(--vidrio-crema);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--linea);
}
.barra-resultados .cuenta {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--fuente-ui); font-size: 11.5px;
  text-transform: uppercase; color: var(--texto-suave); letter-spacing: .04em;
}
.barra-resultados .cuenta b { color: var(--negro); font-weight: 700; font-size: 13px; }
.barra-resultados .cuenta .rango { color: var(--texto-tenue); }

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

.selector { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.etiqueta-selector {
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
}
.selector select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--linea); border-radius: 0;
  padding: 7px 28px 7px 11px;
  background: var(--crema-hueso)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231f1f1f' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
    no-repeat right 9px center / 10px 7px;
  font-family: var(--fuente-ui); font-size: 11px; text-transform: uppercase;
  cursor: pointer;
}
.selector select:hover { background-color: var(--crema); }

.vista { display: flex; border: 1px solid var(--linea); }
.vista button {
  width: 34px; height: 32px; padding: 0;
  border: 0; background: var(--crema-hueso); cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--texto-tenue);
  transition: background var(--transicion), color var(--transicion);
}
.vista button + button { border-left: 1px solid var(--linea); }
.vista button:hover { color: var(--negro); }
.vista button[aria-pressed="true"] { background: var(--negro); color: var(--crema); }

@media (max-width: 900px) {
  /* Con la cabecera ya no fija (ver arriba), esta es la primera barra fija de
     la página en móvil: debe pegarse al borde superior real, no a la altura
     de la cabecera. */
  .barra-resultados { top: 0; padding: 12px 0; gap: 10px; }
  .barra-resultados .cuenta { order: 3; flex: 1 1 100%; }
  .controles { margin-left: auto; }
}
@media (max-width: 480px) {
  .etiqueta-selector { display: none; }
  .vista { display: none; }
}

/* ------------------------------------------------------ Filtros activos -- */

.filtros-activos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}
.chip-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--linea);
  background: var(--crema-claro);
  padding: 4px 4px 4px 10px;
  font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase;
  color: var(--texto-suave);
  max-width: 100%;
  animation: aparecer-chip .2s var(--salida) both;
}
@keyframes aparecer-chip {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.chip-filtro .rotulo { color: var(--texto-tenue); }
.chip-filtro b {
  color: var(--negro); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-filtro .quitar {
  flex: none; width: 20px; height: 20px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--texto-tenue);
}
.chip-filtro .quitar:hover { background: var(--naranja); color: var(--negro); }

.chip-limpiar {
  border: 1px solid var(--linea-suave); background: transparent;
  padding: 4px 11px; cursor: pointer;
  font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase;
  color: var(--texto-tenue);
}
.chip-limpiar:hover { border-color: var(--linea); background: var(--negro); color: var(--crema); }

/* ------------------------------------------------------------- Rejilla --- */

.catalogo-productos { display: grid; gap: 40px; }

.grupo-productos { min-width: 0; }
.grupo-encabezado {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 18px; padding-bottom: 10px;
}
.grupo-encabezado .rotulo {
  margin: 0 0 2px;
  font-family: var(--fuente-ui); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; color: var(--texto-tenue); letter-spacing: .1em;
}
.grupo-encabezado h2 { font-size: clamp(21px, 3vw, 38px); font-weight: 300; }
.grupo-acciones { display: flex; align-items: center; gap: 12px; flex: none; }
.grupo-encabezado .conteo {
  font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase;
  color: var(--texto-tenue); white-space: nowrap;
}

.grupo-rejilla,
.rejilla-productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
}

/* -------------------------------------------------- Tarjeta de producto -- */

/* Entrada escalonada: las tarjetas suben una tras otra en lugar de aparecer
   todas de golpe. El retardo lo pone el JS en --i, y va topado para que la
   última no se haga esperar medio segundo. */
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.tarjeta-producto {
  position: relative;
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column;
  min-width: 0;
  animation: entrar .34s var(--salida) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.tarjeta-producto:hover,
.tarjeta-producto:focus-within {
  background: var(--crema-hueso);
  transform: translateY(-3px);
  box-shadow: var(--sombra-dura);
}

.tarjeta-producto .foto {
  position: relative;
  aspect-ratio: 4 / 3; background: var(--crema-claro);
  border-bottom: 1px solid var(--linea);
  overflow: hidden; display: block;
}
.tarjeta-producto .foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity .35s ease, transform .3s ease;
}
.tarjeta-producto .foto img.cargada { opacity: 1; }
.tarjeta-producto:hover .foto img { transform: scale(1.04); }

/* La insignia se monta sobre la foto: es el dato que se lee de un vistazo.
   Cuelga de la tarjeta, no del enlace de la foto, para que siga siendo texto
   que el lector de pantalla anuncia. */
.tarjeta-producto > .etiqueta {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: var(--olivo-tenue);
}
.tarjeta-producto > .etiqueta.pedido { background: var(--terracota-tenue); }

.ver-ficha {
  position: absolute; right: 0; bottom: 0;
  padding: 6px 11px;
  background: var(--negro); color: var(--crema);
  font-family: var(--fuente-ui); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .06em;
  transform: translateY(101%);
  transition: transform .18s ease;
}
.tarjeta-producto:hover .ver-ficha,
.tarjeta-producto:focus-within .ver-ficha { transform: none; }

.tarjeta-producto .cuerpo {
  padding: 14px; display: flex; flex-direction: column; gap: 9px; flex: 1;
}
.tarjeta-producto .encabezado {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  min-width: 0;
}
/* El título ya llega limpio (nombreProducto en comun.js): sin prefijo de
   marca, sin código y sin medidas. Dos renglones bastan; las medidas van
   aparte, en mono chico, como el resto de los datos de la tarjeta. Ambos
   reservan su alto para que las tarjetas de una fila queden parejas. */
.tarjeta-producto .titulo {
  min-height: 2.44em;
  font-size: 15.5px; line-height: 1.22; color: var(--negro);
  text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.detalle-producto {
  margin: -3px 0 0; min-height: 2.8em;
  font-family: var(--fuente-ui); font-size: 10px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .03em; color: var(--texto-tenue);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-producto .titulo:hover { color: var(--negro); text-decoration: underline; }

/* Palabras buscadas dentro del nombre. Subrayado en naranja en lugar del
   resaltador amarillo del navegador, que no existe en esta paleta. */
mark {
  background: transparent; color: inherit;
  font-weight: 700;
  box-shadow: inset 0 -.42em 0 var(--naranja-tenue);
}

.marca-producto {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fuente-ui); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--naranja);
  color: var(--negro);
}
.marca-producto:hover { color: var(--naranja); text-decoration: none; }
.marca-producto.sin-marca { border-bottom-color: var(--linea-suave); color: var(--texto-tenue); }

.clave-art {
  font-family: var(--fuente-ui); font-size: 10px;
  text-transform: uppercase; color: var(--texto-tenue); letter-spacing: .03em;
  flex: none;
}

/* Disponible y sobre pedido eran dos etiquetas casi idénticas en negro y café:
   había que leerlas para distinguirlas. Con el olivo y la terracota de la marca
   se separan de un vistazo, y el punto sigue llevando el dato aunque alguien no
   distinga los dos tonos. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border: 1px solid;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}
.etiqueta::before {
  content: ""; width: 6px; height: 6px; background: currentColor;
  flex: none;
}
.etiqueta.disponible { border-color: var(--olivo); color: var(--olivo-oscuro); }
.etiqueta.pedido { border-color: var(--terracota); color: var(--terracota-oscuro); }
/* El punto de "sobre pedido" va hueco: la forma también distingue, no solo el color. */
.etiqueta.pedido::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* --- Agregar a la solicitud ---------------------------------------------- */

.agregar { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }

/* Ficha de producto: un campo suelto, sin los pasos +/- de la rejilla. */
.agregar > input {
  width: 72px; padding: 9px 6px; text-align: center;
  border: 1px solid var(--linea);
  background: var(--crema-hueso); border-radius: 0;
  font-family: var(--fuente-ui); font-size: 13px;
}

.agregar .contador {
  display: flex; flex: none;
  border: 1px solid var(--linea); background: var(--crema-hueso);
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.agregar .contador:hover,
.agregar .contador:focus-within {
  border-color: var(--negro);
  background: var(--crema-claro);
  box-shadow: 3px 3px 0 var(--naranja-tenue);
}
.agregar .contador .paso {
  width: 26px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--fuente-ui); font-size: 14px; line-height: 1;
  color: var(--texto-suave);
  transition: background var(--transicion), color var(--transicion), transform .12s ease;
}
.agregar .contador .paso:hover { background: var(--naranja); color: var(--negro); transform: scale(1.08); }
.agregar .contador .paso:active { transform: scale(.9); }
.agregar .contador input {
  width: 44px; padding: 6px 2px; text-align: center;
  border: 0; border-inline: 1px solid var(--linea-suave);
  background: transparent;
  font-family: var(--fuente-ui); font-size: 12px;
}
.agregar > .boton { flex: 1; padding: 7px 10px; font-size: 11px; min-width: 0; }

/* El barrido da respuesta al pasar por el CTA sin romper la geometria recta
   del catalogo. La confirmacion hace un pulso corto al agregar. */
.agregar > .boton.principal {
  position: relative; isolation: isolate; overflow: hidden;
  border-color: var(--negro);
  transition: color .2s ease, background .2s ease, transform .16s var(--salida), box-shadow .2s ease;
}
.agregar > .boton.principal::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--naranja);
  transform: translateX(-102%);
  transition: transform .28s var(--salida);
}
.agregar > .boton.principal:hover { background: var(--negro); color: var(--negro); box-shadow: 4px 4px 0 var(--linea-suave); }
.agregar > .boton.principal:hover::before { transform: translateX(0); }
.agregar > .boton.principal:active { transform: scale(.98); box-shadow: 1px 1px 0 var(--linea-suave); }
@keyframes confirmar-agregado {
  0% { transform: scale(.98); }
  48% { transform: scale(1.025); }
  100% { transform: none; }
}
.agregar > .boton.principal.confirmado {
  animation: confirmar-agregado .34s var(--salida) both;
  box-shadow: 4px 4px 0 var(--linea-suave);
}
.agregar > .boton.principal.confirmado::before { transform: translateX(0); }

/* Las flechitas nativas del input number estorban en una celda de 44px. */
.agregar input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.agregar input[type="number"]::-webkit-outer-spin-button,
.agregar input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Vista de lista ------------------------------------------------------ */

body[data-vista="lista"] .grupo-rejilla,
body[data-vista="lista"] .rejilla-productos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body[data-vista="lista"] .tarjeta-producto { flex-direction: row; min-height: 132px; }
body[data-vista="lista"] .tarjeta-producto:hover { transform: none; }
body[data-vista="lista"] .tarjeta-producto .foto {
  flex: none; width: 132px; aspect-ratio: 1 / 1;
  border-bottom: 0; border-right: 1px solid var(--linea);
}
body[data-vista="lista"] .tarjeta-producto .titulo {
  min-height: 0; -webkit-line-clamp: 2; font-size: 17px;
}
body[data-vista="lista"] .detalle-producto { min-height: 0; }
body[data-vista="lista"] .tarjeta-producto .cuerpo { padding: 11px 16px; gap: 5px; }
body[data-vista="lista"] .agregar { max-width: 360px; padding-top: 2px; }
body[data-vista="lista"] .agregar .contador input { padding-block: 5px; }
body[data-vista="lista"] .agregar > .boton { padding-block: 6px; }

@media (max-width: 1400px) {
  body[data-vista="lista"] .grupo-rejilla,
  body[data-vista="lista"] .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  body[data-vista="lista"] .grupo-rejilla,
  body[data-vista="lista"] .rejilla-productos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body[data-vista="lista"] .tarjeta-producto { min-height: 108px; }
  body[data-vista="lista"] .tarjeta-producto .foto { width: 108px; }
  body[data-vista="lista"] .tarjeta-producto .cuerpo { padding: 12px; }
  body[data-vista="lista"] .tarjeta-producto .titulo { font-size: 14px; }
}

/* --- Rejilla en pantallas chicas ----------------------------------------- */

@media (max-width: 700px) {
  .catalogo-productos { gap: 30px; }
  .grupo-rejilla, .rejilla-productos {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .grupo-encabezado { align-items: flex-start; flex-direction: column; gap: 8px; }
  .grupo-acciones { width: 100%; justify-content: space-between; }
  .tarjeta-producto .foto { aspect-ratio: 1 / 1; }
  .tarjeta-producto .cuerpo { padding: 11px; gap: 7px; }
  .tarjeta-producto .titulo { font-size: 13px; min-height: 2.44em; }
  .detalle-producto { font-size: 9.5px; }
  .tarjeta-producto .encabezado { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ver-ficha { display: none; }
  .agregar { flex-direction: column; gap: 6px; }
  .agregar .contador { width: 100%; }
  /* El input number trae un ancho mínimo intrínseco que no cede con
     `width: auto`: en dos columnas empujaba el "+" fuera de la tarjeta y
     aplastaba el "−". Con base 0 y min-width 0 el campo toma sólo lo que
     sobra y los pasos conservan un área táctil fija. */
  .agregar .contador .paso { flex: 0 0 36px; width: 36px; height: 36px; }
  .agregar .contador input { flex: 1 1 0; width: 0; min-width: 0; }
  .agregar > .boton { width: 100%; }
  .boton .unidad { display: none; }
}

/* Con el contador ya flexible, dos columnas caben hasta en teléfonos de
   360 px; una sola columna dejaba fotos enormes y la página el doble de larga. */
@media (max-width: 340px) {
  .grupo-rejilla, .rejilla-productos { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- Esqueletos ---- */

/* El esqueleto conserva la trama diagonal de la marca (líneas, no desenfoque),
   pero en lugar de parpadear la trama se desplaza: se lee como "cargando" en
   vez de como un elemento roto que aparece y desaparece. */
.esqueleto {
  background: repeating-linear-gradient(
    -45deg, var(--crema-claro), var(--crema-claro) 9px, var(--crema-hueso) 9px, var(--crema-hueso) 18px);
  background-size: 200% 200%;
  border: 1px solid var(--linea-suave);
  animation: correr 1.1s linear infinite;
}
@keyframes correr {
  from { background-position: 0 0; }
  to { background-position: -51px 0; }
}

.tarjeta-esqueleto {
  border: 1px solid var(--linea-suave);
  display: flex; flex-direction: column;
}
.tarjeta-esqueleto .foto { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--linea-suave); }
.tarjeta-esqueleto .cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.tarjeta-esqueleto .renglon { height: 13px; border: 0; }
.tarjeta-esqueleto .renglon.corto { width: 42%; height: 9px; }
.tarjeta-esqueleto .renglon.medio { width: 68%; }
.tarjeta-esqueleto .boton-falso { height: 30px; margin-top: 6px; border: 0; }

@media (max-width: 700px) {
  .tarjeta-esqueleto .foto { aspect-ratio: 1 / 1; }
  .tarjeta-esqueleto .cuerpo { padding: 11px; }
}

/* ----------------------------------------------------------- Paginación -- */

.paginacion {
  display: flex; gap: 0; justify-content: center; align-items: center;
  margin-top: 40px; flex-wrap: wrap;
}
.paginacion button {
  min-width: 40px; min-height: 40px; padding: 8px 13px;
  border: 1px solid var(--linea); border-right: 0;
  background: var(--crema); cursor: pointer;
  font-size: 12px; text-transform: uppercase;
  transition: background var(--transicion), color var(--transicion);
}
.paginacion button:last-child { border-right: 1px solid var(--linea); }
.paginacion button:hover:not(:disabled) { background: var(--negro); color: var(--crema); }
.paginacion button.activa { background: var(--naranja); color: var(--negro); font-weight: 700; }
.paginacion button:disabled { opacity: .35; cursor: default; }
.paginacion .salto-paginas {
  padding: 0 8px; color: var(--texto-tenue);
  font-family: var(--fuente-ui); font-size: 12px;
}
/* En escritorio manda la lista numerada; en móvil, "Página X de Y". */
.paginacion .pagina-actual { display: none; }

@media (max-width: 620px) {
  .paginacion { gap: 0; }
  .paginacion .numero, .paginacion .salto-paginas { display: none; }
  .paginacion .pagina-actual {
    display: block; flex: 1; text-align: center;
    padding: 0 12px;
    border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
    line-height: 38px;
    font-family: var(--fuente-ui); font-size: 11px; text-transform: uppercase;
    color: var(--texto-suave);
    white-space: nowrap;
  }
  .paginacion .salto { flex: none; }
  .paginacion .salto:last-child { border-right: 1px solid var(--linea); }
}
@media (max-width: 400px) {
  .paginacion .texto-salto { display: none; }
}

/* --------------------------------------------------------- Ficha detalle - */

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; padding: 26px 0 54px; }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; gap: 22px; } }

/* Descripción escrita en el panel interno: solo existe en el sitio. */
.texto-ficha { margin: 16px 0 0; max-width: 60ch; }
.texto-ficha p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave); }
.texto-ficha p:last-child { margin-bottom: 0; }

.detalle-ficha {
  margin: -4px 0 12px;
  font-family: var(--fuente-ui); font-size: 12px; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave);
}
.ficha .imagen {
  background: var(--foto-producto); border: 1px solid var(--linea);
  overflow: hidden; aspect-ratio: 1 / 1;
}
.ficha .imagen img { width: 100%; height: 100%; object-fit: contain; }

.ficha h1 { font-size: clamp(23px, 3vw, 31px); font-weight: 300; line-height: 1.2; margin-bottom: 12px; }

.datos-tecnicos { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.datos-tecnicos th {
  text-align: left; font-family: var(--fuente-ui); font-size: 10.5px;
  font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-tenue);
  padding: 9px 0; width: 42%; border-bottom: 1px solid var(--linea-suave);
}
.datos-tecnicos td { padding: 9px 0; border-bottom: 1px solid var(--linea-suave); }

.miga {
  font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase;
  color: var(--texto-tenue); padding: 16px 0 0; letter-spacing: .03em;
}
.miga a { color: var(--texto-suave); }

/* ------------------------------------------------------------- Tablas ---- */

.tabla-contenedor { overflow-x: auto; }

table.datos { width: 100%; border-collapse: collapse; font-size: 14px; }
table.datos thead th {
  text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue);
  padding: 10px 14px; border-bottom: 1px solid var(--linea); white-space: nowrap;
  background: var(--crema);
}
table.datos tbody td { padding: 12px 14px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos tbody tr:hover { background: var(--crema-hueso); }
.num { text-align: right; font-family: var(--fuente-ui); font-size: 13px; white-space: nowrap; }
/* Folios y claves dentro de tablas: partidos en tres renglones no se leen. */
table.datos td.clave-art { white-space: nowrap; }

.mini-foto {
  width: 48px; height: 48px; object-fit: contain;
  border: 1px solid var(--linea); background: var(--foto-producto); flex: none;
}

/* ------------------------------------------------------------ Formas ----- */

.campo { margin-bottom: 16px; }
.campo label {
  display: block; font-family: var(--fuente-ui); font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); margin-bottom: 7px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: 0;
  background: var(--crema-hueso); outline: none;
  font-size: 15px;
}
.campo input[type="color"] {
  height: 42px;
  padding: 3px;
  cursor: pointer;
}
.campo input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.campo input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.campo input[type="color"]::-moz-color-swatch { border: 0; border-radius: 0; }
.campo textarea { resize: vertical; min-height: 84px; font-family: var(--fuente-texto); }
.campo textarea.mono { font-family: var(--fuente-ui); font-size: 12px; line-height: 1.55; min-height: 180px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: #fff; box-shadow: inset 0 0 0 2px var(--naranja);
}
.campo .ayuda { font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase; color: var(--texto-tenue); margin-top: 6px; }
.forma-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .forma-dos { grid-template-columns: 1fr; } }

.admin-seccion {
  border-top: 1px solid var(--linea-suave);
  padding-top: 18px;
  margin-top: 20px;
}
.admin-seccion:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.admin-seccion h3 {
  margin: 0 0 14px;
  font-family: var(--fuente-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-tenue);
}
.admin-carrusel { display: grid; gap: 14px; margin: 18px 0 26px; }
/* --------------------------------------------------- Marketing (panel) --- */
#modal-marketing { padding: 12px; }
.modal-caja.marketing-modal { max-width: 1520px; max-height: 96vh; background: var(--crema-hueso); }
.marketing-modal .modal-cabeza { background: var(--crema-hueso); padding: 18px 28px; }
.marketing-modal .modal-cabeza h2 { font-size: clamp(22px, 2.4vw, 32px); }
.marketing-modal .modal-cuerpo { padding: 24px 28px 32px; }
.marketing-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.marketing-barra p { margin: 0; color: var(--texto-suave); font-size: 15px; }
.marketing-barra select { min-width: 210px; padding: 11px 14px; border: 1px solid var(--linea); background: var(--crema-claro); font-family: var(--fuente-ui); font-size: 13px; cursor: pointer; }

.mk-panel { padding: 22px 24px; border: 1px solid var(--linea); background: var(--crema-claro); box-shadow: var(--sombra-dura); }
.mk-panel h3 { margin: 0 0 18px; font-size: 21px; }
.mk-panel-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mk-panel-cabeza h3 { margin: 0; }

/* KPIs */
.mk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mk-kpis article {
  position: relative; overflow: hidden; min-height: 196px;
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 0;
  border: 1px solid var(--linea); background: var(--crema-claro); box-shadow: var(--sombra-dura);
}
.mk-kpis span, .mk-kpis-sec span { font-family: var(--fuente-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); }
.mk-kpis strong { font-family: var(--fuente-ui); font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -.02em; }
.mk-kpi-destacado { background: var(--negro) !important; color: var(--crema); }
.mk-kpi-destacado span { color: var(--crema) !important; opacity: .7; }
.mk-kpi-destacado strong { color: var(--naranja); }
.mk-kpi-destacado .mk-delta { color: var(--crema); }
.mk-spark { display: block; width: calc(100% + 40px); height: 46px; margin: auto -20px 0; }
.mk-spark-area { fill: var(--naranja); opacity: .14; }
.mk-spark-linea { fill: none; stroke: var(--naranja); stroke-width: 2; stroke-linejoin: round; }
.mk-medidor { height: 10px; margin: auto 0 20px; border: 1px solid var(--crema-30); background: var(--crema-14); }
.mk-medidor div { height: 100%; background: var(--naranja); }

.mk-delta { font-style: normal; font-family: var(--fuente-ui); font-size: 12px; color: var(--texto-tenue); }
.mk-sube { color: var(--olivo-oscuro); }
.mk-baja { color: var(--terracota); }
.mk-nuevo { color: var(--naranja); }
.mk-kpi-destacado .mk-sube { color: #a9bd74; }
.mk-kpi-destacado .mk-baja { color: #f39a85; }

.mk-kpis-sec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid var(--linea); background: var(--linea); }
.mk-kpis-sec article { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; background: var(--crema-claro); }
.mk-kpis-sec strong { font-family: var(--fuente-ui); font-size: clamp(22px, 2vw, 30px); line-height: 1.05; }

/* Grafica de trafico */
.mk-tendencia { margin-top: 22px; }
.mk-leyenda { display: flex; gap: 18px; font-family: var(--fuente-ui); font-size: 12px; color: var(--texto-suave); }
.mk-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.mk-clave { display: inline-block; width: 14px; height: 4px; vertical-align: middle; margin-right: 6px; }
.mk-leyenda .mk-clave { margin: 0; }
.mk-clave-vistas { background: var(--naranja); }
.mk-clave-sesiones { background: var(--olivo); }

.mk-area { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: clamp(240px, 38vh, 400px) 30px; }
.mk-eje-y { position: relative; }
.mk-eje-y span { position: absolute; right: 10px; transform: translateY(-50%); font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue); }
.mk-lienzo { position: relative; border-left: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.mk-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-guia { stroke: var(--linea-suave); stroke-width: 1; stroke-dasharray: 3 4; }
.mk-relleno-vistas { fill: var(--naranja); opacity: .16; }
.mk-relleno-sesiones { fill: var(--olivo); opacity: .16; }
.mk-linea-vistas, .mk-linea-sesiones { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mk-linea-vistas { stroke: var(--naranja); }
.mk-linea-sesiones { stroke: var(--olivo); }
.mk-eje-x { grid-column: 2; position: relative; }
.mk-eje-x span { position: absolute; top: 8px; transform: translateX(-50%); white-space: nowrap; font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue); }
.mk-eje-x span:first-child { transform: none; }
.mk-eje-x span:last-child { transform: translateX(-100%); }

.mk-columnas { position: absolute; inset: 0; }
.mk-columna { position: absolute; top: 0; bottom: 0; left: calc(var(--x) - var(--w) / 2); width: var(--w); outline: none; }
.mk-columna > * { visibility: hidden; }
.mk-columna:hover > *, .mk-columna:focus > * { visibility: visible; }
.mk-guia-v, .mk-punto, .mk-tooltip { position: absolute; left: 50%; pointer-events: none; }
.mk-guia-v { top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--linea); }
.mk-punto { width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--crema-claro); border-radius: 50%; box-shadow: 0 0 0 1px var(--linea); }
.mk-punto-vistas { background: var(--naranja); }
.mk-punto-sesiones { background: var(--olivo); }
.mk-tooltip {
  top: 10px; z-index: 2; margin-left: 14px; min-width: 210px;
  display: grid; gap: 5px; padding: 12px 14px;
  background: var(--negro); color: var(--crema); box-shadow: var(--sombra-dura);
  font-family: var(--fuente-ui); font-size: 12px;
}
.mk-columna-izq .mk-tooltip { margin-left: 0; transform: translateX(calc(-100% - 14px)); }
.mk-tooltip b { margin-bottom: 4px; font-size: 13px; color: var(--naranja); }
.mk-tooltip span { display: flex; align-items: center; gap: 0; }
.mk-tooltip strong { margin-left: auto; padding-left: 14px; }

/* Embudo + dona */
.mk-fila-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.mk-embudo { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.mk-embudo-texto { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 16px; }
.mk-embudo-texto strong { font-family: var(--fuente-ui); font-size: 22px; }
.mk-embudo-pista { height: 26px; background: var(--crema); border: 1px solid var(--linea); }
.mk-embudo-pista div { height: 100%; border-right: 1px solid var(--linea); transition: width .6s var(--salida); }
.mk-embudo small { display: block; margin-top: 5px; font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue); }

.mk-dona { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.mk-dona-figura { position: relative; width: min(220px, 100%); aspect-ratio: 1; flex: none; }
.mk-dona-figura svg { width: 100%; height: 100%; }
.mk-dona-figura > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mk-dona-figura strong { font-family: var(--fuente-ui); font-size: 34px; line-height: 1; }
.mk-dona-figura span { font-family: var(--fuente-ui); font-size: 11px; text-transform: uppercase; color: var(--texto-tenue); }
.mk-dona ul { flex: 1; min-width: 180px; margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mk-dona li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 16px; }
.mk-dona li i { width: 14px; height: 14px; border: 1px solid var(--linea); }
.mk-dona li b { font-family: var(--fuente-ui); }
.mk-dona li small { min-width: 44px; text-align: right; font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue); }

/* Rankings con barra */
.marketing-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.mk-ancho { margin-top: 22px; }
.marketing-tabla ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.marketing-tabla li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  isolation: isolate; font-size: 15px;
}
.marketing-tabla li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; width: var(--p);
  background: var(--c); opacity: .16; border-left: 3px solid var(--c);
}
.marketing-tabla li:hover::before { opacity: .26; }
.marketing-tabla li > em { flex: none; width: 22px; font-style: normal; font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue); }
.marketing-tabla li > span { flex: 1; min-width: 0; }
.marketing-tabla li strong { display: block; overflow-wrap: anywhere; font-weight: 400; }
.marketing-tabla li small { display: block; color: var(--texto-tenue); font-family: var(--fuente-ui); font-size: 10px; overflow-wrap: anywhere; }
.marketing-tabla li > b { flex: none; font-family: var(--fuente-ui); font-size: 16px; }
.marketing-tabla .mk-acciones { flex: none; display: flex; gap: 6px; }
@media (max-width: 640px) { .marketing-tabla li:has(.mk-acciones) { flex-wrap: wrap; } .marketing-tabla .mk-acciones { width: 100%; padding-left: 34px; } }

@media (max-width: 1200px) {
  .mk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mk-fila-dos, .marketing-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #modal-marketing { padding: 0; }
  .modal-caja.marketing-modal { max-height: 100vh; height: 100%; }
  .marketing-modal .modal-cabeza { padding: 14px 16px; }
  .marketing-modal .modal-cuerpo { padding: 16px; }
  .marketing-barra { align-items: stretch; flex-direction: column; }
  .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-kpis-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-kpis article { min-height: 140px; padding: 14px 14px 0; }
  .mk-spark { width: calc(100% + 28px); margin: auto -14px 0; }
  .mk-kpi-destacado { grid-column: 1 / -1; min-height: 120px !important; }
  .mk-panel { padding: 16px; }
  .mk-area { grid-template-columns: 40px minmax(0, 1fr); }
  .mk-tooltip { min-width: 170px; }
}
/* Marketing: secciones, ayudas y salidas */
.mk-seccion { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--linea); }
.mk-seccion:first-child { margin-top: 0; }
.mk-seccion h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); }
.mk-seccion p { margin: 0; color: var(--texto-suave); font-size: 15px; }
.mk-subtitulo { margin: -10px 0 16px; color: var(--texto-tenue); font-size: 14px; line-height: 1.4; }
.mk-panel-cabeza .mk-subtitulo { margin: 6px 0 0; }
.mk-ayuda { margin: 0; color: var(--texto-tenue); font-size: 13px; line-height: 1.35; }
.mk-kpi-destacado .mk-ayuda { color: var(--crema); opacity: .75; }
.mk-vacio { margin: 0; }
.mk-fila-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.mk-fila-tres:first-of-type { margin-top: 0; }
.mk-seccion + .mk-fila-tres, .mk-seccion + .mk-fila-dos, .mk-seccion + .mk-panel { margin-top: 0; }
.mk-fila-tres .mk-dona { flex-direction: column; align-items: stretch; }
.mk-fila-tres .mk-dona-figura { width: min(200px, 100%); margin: 0 auto; }
.mk-resumen-salidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.mk-resumen-salidas article { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--linea); border-top: 6px solid var(--c); background: var(--crema-claro); }
.mk-resumen-salidas span { font-family: var(--fuente-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); }
.mk-resumen-salidas strong { font-family: var(--fuente-ui); font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
.mk-resumen-salidas small { font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-tenue); }
.mk-canales { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.mk-canales li { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.mk-canal-nombre { font-size: 16px; }
.mk-canal-nombre small, .mk-canales b small { display: block; font-family: var(--fuente-ui); font-size: 10px; font-weight: 400; color: var(--texto-tenue); }
.mk-canal-pista { height: 22px; background: var(--crema); border: 1px solid var(--linea); }
.mk-canal-pista div { height: 100%; border-right: 1px solid var(--linea); }
.mk-canales b { min-width: 64px; text-align: right; font-family: var(--fuente-ui); font-size: 18px; }
.mk-insignia { display: inline-block; margin-bottom: 3px; padding: 2px 7px; border: 1px solid var(--c); color: var(--c); font-style: normal; font-family: var(--fuente-ui); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.marketing-tabla li > b { text-align: right; }
.marketing-tabla li > b u { text-decoration: none; font-size: 10px; font-weight: 400; color: var(--texto-tenue); }
.marketing-tabla li > b small { font-weight: 400; }
@media (max-width: 1200px) {
  .mk-fila-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-resumen-salidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mk-fila-tres { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mk-seccion { margin-top: 30px; }
  .mk-canales li { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-canal-pista { grid-column: 1 / -1; grid-row: 2; }
}
.campo-con-sufijo { display: flex; align-items: stretch; max-width: 260px; }
.campo-con-sufijo input { min-width: 0; flex: 1; }
.campo-con-sufijo span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--linea); border-left: 0; background: var(--negro); color: var(--crema); font-family: var(--fuente-ui); font-size: 10px; text-transform: uppercase; }
.admin-carrusel-item { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.7fr); gap: 16px; padding: 14px; border: 1px solid var(--linea); background: var(--crema-claro); }
.admin-carrusel-foto { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.admin-carrusel-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--linea); background: var(--negro); }
.admin-carrusel-foto .boton { text-align: center; }
.admin-carrusel-campos { min-width: 0; }
@media (max-width: 760px) { .admin-carrusel-item { grid-template-columns: 1fr; } }

/* Editor de puntos de un ambiente (modal "Inspiración" del interno): la foto
   entera, sin recorte, con los puntos numerados en el mismo % que en el sitio. */
.insp-editor {
  position: relative; max-width: 560px;
  border: 1px solid var(--linea); background: var(--crema-hueso);
  cursor: crosshair; -webkit-user-select: none; user-select: none;
  touch-action: none;
}
.insp-editor img { display: block; width: 100%; height: auto; pointer-events: none; }
.insp-editor-punto {
  position: absolute; width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: #fff; color: var(--negro);
  border: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  font: 700 12px var(--fuente-ui);
  cursor: grab; touch-action: none;
}
.insp-editor-punto.arrastrando { cursor: grabbing; background: var(--naranja); }
.insp-punto-fila {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--linea-suave);
}
.insp-punto-fila .num {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--negro); color: var(--crema);
  font: 700 12px var(--fuente-ui);
}
.insp-punto-fila .campo { margin-bottom: 8px; }
.insp-punto-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.insp-punto-acciones a { font-size: 12px; }

/* Editor de notas del blog (modal "Blog" del interno). */
.blog-disenos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.blog-diseno {
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  padding: 8px; border: 1px solid var(--linea); background: var(--crema-claro);
  font-size: 12px;
}
.blog-diseno input { position: absolute; opacity: 0; width: 0; height: 0; }
.blog-diseno:has(input:checked) { border-color: var(--negro); box-shadow: inset 0 0 0 1px var(--negro); background: #fff; }
.blog-diseno:has(input:focus-visible) { outline: 2px solid var(--naranja); outline-offset: 2px; }
/* Miniatura del encabezado: i = titulo, b = portada. */
.blog-diseno-muestra {
  display: grid; gap: 4px; height: 54px; padding: 5px;
  background: var(--crema-hueso); border: 1px solid var(--linea-suave);
}
.blog-diseno-muestra i { display: block; background: var(--negro); height: 6px; align-self: start; width: 70%; }
.blog-diseno-muestra b { display: block; background: var(--texto-tenue); opacity: .45; }
.muestra-grande { grid-template-rows: 6px 1fr; }
.muestra-lateral { grid-template-columns: 1fr 1fr; align-items: center; }
.muestra-lateral b { height: 100%; }
.muestra-titulo { place-items: center; }
.muestra-titulo i { align-self: center; justify-self: center; width: 60%; }

.blog-foto { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.blog-foto img {
  max-width: 180px; max-height: 130px; width: auto; height: auto;
  border: 1px solid var(--linea); background: var(--crema-hueso);
}
.blog-foto-acciones { display: flex; flex-direction: column; gap: 6px; }
.blog-foto-vacia {
  display: grid; place-items: center;
  min-width: 150px; min-height: 90px; padding: 10px;
  border: 1px dashed var(--borde-fuerte, var(--linea)); background: var(--crema-hueso);
  cursor: pointer; font-size: 12px; color: var(--texto-suave);
}
.blog-foto-vacia:hover { border-color: var(--negro); color: var(--negro); }
.subiendo { opacity: .5; pointer-events: none; }

.blog-bloque {
  border: 1px solid var(--linea); background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.blog-bloque:focus-within { border-color: var(--negro); box-shadow: 3px 3px 0 var(--negro); }
.blog-bloque.recien { animation: blog-recien 1.2s ease; }
@keyframes blog-recien { from { box-shadow: 0 0 0 3px var(--naranja); } to { box-shadow: none; } }
.blog-bloque.arrastrando { opacity: .4; }
.blog-bloque.soltar-antes { box-shadow: 0 -3px 0 var(--naranja); }
.blog-bloque.soltar-despues { box-shadow: 0 3px 0 var(--naranja); }
.blog-bloque-cabeza {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--linea-suave); background: var(--crema-claro);
  font-size: 13px;
}
.blog-bloque.plegado .blog-bloque-cabeza { border-bottom: 0; }
.blog-bloque-asa {
  cursor: grab; user-select: none; padding: 2px 4px; letter-spacing: -2px;
  color: var(--texto-tenue); font-weight: 700;
}
.blog-bloque-asa:active { cursor: grabbing; }
.blog-bloque-icono {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  background: var(--negro); color: var(--crema); font: 700 12px var(--fuente-ui);
}
.blog-bloque-resumen {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto-tenue); font-size: 12px;
}
.blog-bloque-botones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.blog-bloque-cuerpo { padding: 12px; }
.blog-bloque-cuerpo .campo:last-child { margin-bottom: 0; }

/* Hueco entre bloques: una raya con un "+" que abre la paleta ahi mismo. */
.blog-hueco { position: relative; height: 18px; display: grid; place-items: center; }
.blog-hueco::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed transparent; transition: border-color .15s ease;
}
.blog-hueco:hover::before { border-top-color: var(--naranja); }
.blog-hueco > button {
  position: relative; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--linea); background: var(--crema-claro); cursor: pointer;
  font: 700 14px/1 var(--fuente-ui); color: var(--texto-tenue);
  opacity: .5; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.blog-hueco:hover > button,
.blog-hueco > button:focus-visible { opacity: 1; background: var(--naranja); border-color: var(--naranja); color: #fff; }
/* place-items: normal -- el hueco cerrado centra su "+" con place-items:center,
   y Chrome aplica esa alineacion tambien en bloques: sin resetearla, la paleta
   abierta se encogia a una sola columna al centro. */
.blog-hueco.abierto { height: auto; display: block; place-items: normal; margin: 8px 0; padding: 12px; border: 1px dashed var(--naranja); background: var(--crema-claro); }
.blog-hueco.abierto::before { display: none; }
.blog-hueco-cabeza {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
  font: 700 11px var(--fuente-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--naranja);
}

/* Paleta de bloques: tarjetas con icono, nombre y para que sirve. */
.blog-agregar-titulo {
  margin: 14px 0 8px;
  font: 700 11px var(--fuente-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
}
.blog-paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; width: 100%; }
.blog-paleta-opcion {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left;
  border: 1px solid var(--linea); background: #fff; cursor: pointer; color: var(--negro);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.blog-paleta-opcion:hover,
.blog-paleta-opcion:focus-visible { border-color: var(--negro); transform: translateY(-1px); box-shadow: 2px 2px 0 var(--negro); }
.blog-paleta-icono {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  background: var(--crema-hueso); border: 1px solid var(--linea); font: 700 14px var(--fuente-ui);
}
.blog-paleta-opcion:hover .blog-paleta-icono { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.blog-paleta-opcion strong { display: block; font-size: 12.5px; }
.blog-paleta-opcion small { display: block; font-size: 11px; color: var(--texto-tenue); line-height: 1.3; }

/* Botones segmentados para las opciones de estilo. */
.blog-segmentos { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linea); }
.blog-segmentos button {
  padding: 6px 11px; border: 0; background: var(--crema-hueso); cursor: pointer;
  font: 600 11.5px var(--fuente-ui); color: var(--texto-suave);
}
.blog-segmentos button + button { border-left: 1px solid var(--linea); }
.blog-segmentos button:hover { color: var(--negro); }
.blog-segmentos button[aria-pressed="true"] { background: var(--negro); color: var(--crema); }

/* Textos con barra de formato. */
.blog-formato { margin-bottom: 12px; border: 1px solid var(--linea); background: #fff; }
.blog-formato:focus-within { border-color: var(--negro); }
.blog-formato-barra {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  border-bottom: 1px solid var(--linea-suave); background: var(--crema-claro);
}
.blog-formato-barra button {
  min-width: 30px; padding: 4px 8px; border: 1px solid transparent; background: none; cursor: pointer;
  font: 600 12px var(--fuente-ui); color: var(--texto-suave);
}
.blog-formato-barra button:hover { border-color: var(--linea); background: #fff; color: var(--negro); }
.blog-formato textarea { display: block; width: 100%; border: 0; resize: vertical; padding: 10px 12px; font: inherit; line-height: 1.55; background: transparent; }
.blog-formato textarea:focus { outline: none; }

/* Pasos dentro del editor. */
.blog-pasos { display: grid; gap: 8px; margin-bottom: 10px; }
.blog-paso {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px;
  padding: 10px; border: 1px solid var(--linea-suave); background: var(--crema-claro);
}
.blog-paso-num {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--naranja); color: #fff; font: 700 13px var(--fuente-ui);
}
.blog-paso-campos { display: grid; gap: 8px; }
.blog-paso-campos > input { padding: 8px 10px; border: 1px solid var(--linea); background: #fff; font-weight: 600; }
.blog-paso-campos .blog-formato { margin-bottom: 0; }
.blog-paso-campos .blog-foto { margin-bottom: 0; }
.blog-paso-campos .blog-foto img { max-width: 120px; max-height: 90px; }
.blog-paso-campos .blog-foto-vacia { min-height: 48px; min-width: 130px; }
.blog-paso-acciones { display: flex; flex-direction: column; gap: 4px; }

/* Modales del panel interno: casi toda la pantalla. Con formularios, tablas,
   fotos y opciones lado a lado, las cajas de 600 a 1000 px se quedaban cortas.
   (En celular ocupan la pantalla completa; ver "modales en celular".) */
.modal.modal-amplio { padding: 12px; }
/* Alto fijo y no solo maximo: los modales con poco contenido (usuarios,
   vendedores) quedaban como una franja baja en medio de la pantalla. */
.modal-amplio .modal-caja { max-width: 1480px; height: calc(100vh - 24px); max-height: none; }
.modal-amplio .modal-cabeza { padding: 14px 28px; }
.modal-amplio .modal-cuerpo { padding: 20px 28px; }
.blog-opciones-imagen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px;
}
@media (max-width: 640px) {
  .modal-amplio .modal-cabeza { padding: 12px 14px; }
  .modal-amplio .modal-cuerpo { padding: 14px; }
}

/* Barra final: estado + acciones. Se queda pegada abajo del modal. */
.blog-acciones {
  position: sticky; bottom: -1px; z-index: 2;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 18px -4px 0; padding: 12px 4px;
  background: var(--crema-claro); border-top: 1px solid var(--linea);
}
.blog-estado { display: inline-flex; border: 1px solid var(--linea); }
.blog-estado label { cursor: pointer; }
.blog-estado input { position: absolute; opacity: 0; width: 0; height: 0; }
.blog-estado span { display: block; padding: 7px 12px; font: 600 12px var(--fuente-ui); background: var(--crema-hueso); color: var(--texto-suave); }
.blog-estado label + label span { border-left: 1px solid var(--linea); }
.blog-estado input:checked + span { background: var(--negro); color: var(--crema); }
.blog-estado input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: -2px; }
.blog-etiqueta-borrador {
  margin-left: 6px; padding: 2px 6px; vertical-align: middle;
  background: var(--naranja-tenue); border: 1px solid var(--naranja); color: #8f2d18;
  font: 700 9.5px var(--fuente-ui); text-transform: uppercase; letter-spacing: .08em;
}
@media (max-width: 640px) {
  .blog-bloque-cabeza { flex-wrap: wrap; }
  .blog-bloque-botones { width: 100%; }
  .blog-paso { grid-template-columns: 26px minmax(0, 1fr); }
  .blog-paso-acciones { grid-column: 2; flex-direction: row; }
}
.blog-galeria-editor { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.blog-galeria-foto { position: relative; }
.blog-galeria-foto img { display: block; height: 90px; width: auto; border: 1px solid var(--linea); background: var(--crema-hueso); }
.blog-galeria-foto button { position: absolute; top: 4px; right: 4px; padding: 0 7px; }

.ayuda-texto {
  margin: -6px 0 16px;
  font-size: 13px;
  color: var(--texto-tenue);
}

/* --- Panel interno: productos en el sitio -------------------------------- */

.prod-buscar { display: flex; gap: 8px; margin-bottom: 4px; }
.prod-buscar input {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--linea); border-radius: 0; background: var(--crema-hueso);
}
.prod-conteo {
  margin: 4px 0 10px;
  font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-tenue);
}
.prod-fila {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px; margin-bottom: 6px; text-align: left;
  border: 1px solid var(--linea); background: var(--crema-claro); color: var(--negro);
  cursor: pointer; transition: background var(--transicion), transform var(--transicion);
}
.prod-fila:hover { background: var(--crema-hueso); transform: translateX(2px); }
/* Con el modal a lo ancho, la lista de productos va en dos columnas (una en celular). */
#prod-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: stretch; }
#prod-lista .prod-fila { margin-bottom: 0; height: 100%; }
@media (max-width: 760px) {
  #prod-lista { grid-template-columns: minmax(0, 1fr); }
}
.prod-fila-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-fila-titulo { font-size: 14px; text-transform: uppercase; line-height: 1.2; }
.prod-fila-aspel {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fuente-ui); font-size: 10px; color: var(--texto-tenue);
}
.prod-fila-insignias { display: flex; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.prod-insignia {
  padding: 2px 7px; border: 1px solid var(--olivo); color: var(--olivo-oscuro);
  background: var(--olivo-tenue);
  font-family: var(--fuente-ui); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.prod-insignia.oculto { border-color: var(--terracota); color: var(--terracota-oscuro); background: var(--terracota-tenue); }
.prod-insignia.fabricante { border-color: var(--linea); color: var(--negro); background: var(--crema-hueso); }

/* Lo publicado desde Enriquecimiento, editable aqui mismo. */
.prod-fabricante {
  margin: 18px 0; padding: 14px; min-width: 0;
  border: 1px solid var(--linea); background: var(--crema-hueso);
}
.prod-fabricante legend {
  padding: 0 6px;
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.prod-fabricante .ayuda { margin: 0 0 10px; }
.prod-fab-campos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.prod-fab-fila {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 8px; align-items: start;
}
.prod-fab-fila > span,
.prod-fab-fila > input:first-child {
  padding-top: 9px; font-size: 13.5px; font-weight: 600;
}
.prod-fab-fila > input:first-child { padding-top: 8px; font-weight: 400; }
.prod-fab-fila small { display: block; font-weight: 400; font-size: 10px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.prod-fab-fila input,
.prod-fab-fila textarea { width: 100%; min-width: 0; }
.prod-fab-fila.quitada > :not(button) { opacity: .45; text-decoration: line-through; }
.prod-fab-archivos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.prod-fab-archivo {
  display: flex; flex-direction: column; gap: 6px; width: 132px;
  padding: 8px; border: 1px solid var(--linea-suave); background: var(--crema-claro);
  font-size: 12px;
}
.prod-fab-archivo img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--crema-hueso); }
.prod-fab-archivo.doc { justify-content: space-between; }
.prod-fab-archivo:has(input:checked) { opacity: .5; }
.prod-fab-archivo label { display: flex; gap: 6px; align-items: center; font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase; }
@media (max-width: 620px) {
  .prod-fab-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .prod-fab-fila > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .prod-fab-archivo { width: calc(50% - 5px); }
}

.prod-aspel {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0 18px; padding: 12px;
  border: 1px dashed var(--linea-suave); background: var(--crema-hueso);
}
.prod-aspel .mini-foto { width: 64px; height: 64px; }
.prod-aspel p { margin: 0; }
.prod-aspel-rotulo {
  font-family: var(--fuente-ui); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-tenue);
}
.prod-aspel-texto { margin: 4px 0 !important; font-size: 14px; color: var(--texto-suave); }

.prod-previa-rotulo {
  margin: 18px 0 8px;
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue);
}
.prod-previa-tarjeta {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 300px; padding: 14px;
  border: 1px solid var(--linea); background: var(--crema-claro);
  box-shadow: var(--sombra-dura);
}
.prod-previa-tarjeta.apagada { opacity: .45; }
.prod-previa-titulo { font-size: 15.5px; line-height: 1.22; text-transform: uppercase; }
.prod-previa-tarjeta .detalle-producto { min-height: 0; margin: 0; }
.prod-previa-aviso {
  margin: 0 0 8px;
  font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase;
  color: var(--terracota-oscuro);
}
.prod-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.prod-acciones .peligro { margin-left: auto; }
@media (max-width: 560px) {
  .prod-fila-aspel { white-space: normal; }
  .prod-acciones > * { flex: 1 1 100%; }
  .prod-acciones .peligro { margin-left: 0; }
}

.layout-pagina { margin-bottom: 18px; }
.layout-pagina .rotulo {
  margin: 0 0 6px;
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave);
}
.layout-lista {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--linea-suave);
}
.layout-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--crema-hueso);
}
.layout-item + .layout-item { border-top: 1px solid var(--linea-suave); }
.layout-item .interruptor { padding: 0; }
.layout-nombre { flex: 1; min-width: 0; font-size: 13.5px; }
.layout-item.oculto .layout-nombre { color: var(--texto-tenue); text-decoration: line-through; }
.layout-mover { display: flex; gap: 2px; flex: none; }
.layout-mover button {
  width: 26px; height: 26px;
  border: 1px solid var(--linea-suave); background: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.layout-mover button:hover:not(:disabled) { border-color: var(--negro); }
.layout-mover button:disabled { opacity: .35; cursor: not-allowed; }

.ayuda-json {
  margin-top: 8px;
  font-family: var(--fuente-ui);
  font-size: 10.5px;
  color: var(--texto-tenue);
}
.ayuda-json summary { cursor: pointer; text-transform: uppercase; }
.ayuda-json pre {
  overflow-x: auto;
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--linea-suave);
  background: var(--crema-hueso);
  color: var(--texto);
  font-size: 11px;
  line-height: 1.45;
}

.mensaje {
  border: 1px solid var(--linea); padding: 12px 15px;
  font-size: 14.5px; margin-bottom: 18px; border-radius: 0;
}
.mensaje .boton { margin-left: 10px; vertical-align: middle; }
.mensaje[hidden] { display: none; }
.mensaje.error { background: var(--naranja-tenue); border-color: var(--naranja); color: #8f2d18; }
.mensaje.exito { background: var(--crema-hueso); border-color: var(--negro); border-left-width: 5px; color: var(--negro); }
.mensaje.info { background: var(--cafe-tenue); border-color: var(--cafe); color: #5b4b3e; }

.pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--linea); margin-bottom: 22px; }
.pestanas button {
  padding: 11px 18px; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-tenue);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas button.activa { color: var(--negro); border-bottom-color: var(--naranja); font-weight: 700; }

.estrecho { max-width: 470px; margin: 40px auto 64px; }
.medio { max-width: 980px; margin: 28px auto 64px; }

/* ------------------------------------------------------------ Estados ---- */

.vacio { padding: 60px 22px; text-align: center; color: var(--texto-suave); }
.vacio .icono { font-size: 40px; line-height: 1; margin: 0 0 14px; color: var(--texto-tenue); }
.vacio h2 { margin-bottom: 10px; font-size: 22px; font-weight: 300; }
.vacio p { max-width: 46ch; margin: 0 auto; }
.vacio-acciones { margin-top: 22px; }
/* Soltar un filtro concreto antes que borrarlos todos. */
.vacio-atajos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.vacio-rotulo {
  margin: 34px 0 12px;
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.vacio-marcas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.estado-solicitud {
  display: inline-block; padding: 2px 8px; border: 1px solid;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
/* Un color por etapa, para que la bandeja de ventas se lea de un vistazo. */
.estado-solicitud.nueva { background: var(--naranja); border-color: var(--linea); color: var(--negro); }
.estado-solicitud.en-proceso { background: var(--terracota-tenue); border-color: var(--terracota); color: var(--terracota-oscuro); }
.estado-solicitud.cotizada { background: var(--olivo-tenue); border-color: var(--olivo); color: var(--olivo-oscuro); }
.estado-solicitud.cerrada { background: transparent; border-color: var(--linea-suave); color: var(--texto-tenue); }

/* --------------------------------------------------------------- Modal --- */

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(31, 31, 31, .68);
  display: grid; place-items: center; padding: 22px;
}
.modal-caja {
  width: 100%; max-width: 740px; max-height: 86vh; overflow-y: auto;
  background: var(--crema-claro); border: 1px solid var(--linea);
  box-shadow: var(--sombra-dura);
}
.modal-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; background: var(--crema-claro);
}
.modal-cuerpo { padding: 20px; }
.cerrar {
  border: 1px solid transparent; background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--negro);
  padding: 2px 9px;
}
.cerrar:hover { border-color: var(--linea); background: var(--naranja); }

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

.pie {
  background: var(--negro); color: var(--crema);
  border-top: 1px solid var(--linea);
  padding: 46px 0 26px; margin-top: auto;
  font-size: 14px;
}
.pie a { color: var(--crema); }
.pie img { height: 19px; width: auto; margin-bottom: 12px; }

/* Un solo pie para todas las vistas (lo arma server.js: piePagina). La
   marca lleva la columna ancha y las demas (contacto, si hay datos en el
   .env, navegacion y cotizacion) se reparten el resto por partes iguales. */
.pie-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr);
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 36px;
}
/* Entre tableta y laptop chica cuatro columnas aprietan el correo: 2 x 2. */
@media (max-width: 1100px) and (min-width: 781px) {
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
}
.pie-marca img { margin-bottom: 16px; }
.pie-lema {
  margin: 0; max-width: 34ch; opacity: .7;
  font-size: 15px; line-height: 1.5;
}
.pie-titulo {
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--crema-30);
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; opacity: .6;
}
.pie .contacto {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  font-family: var(--fuente-ui); font-size: 11.5px; line-height: 1.6; opacity: .88;
  overflow-wrap: anywhere;
}
.pie .enlaces {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--fuente-ui); font-size: 11.5px; text-transform: uppercase;
}
.pie .enlaces a:hover, .pie .contacto a:hover { color: var(--naranja); text-decoration: none; }
.pie .nota {
  font-family: var(--fuente-ui); font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; opacity: .5; margin-top: 34px;
  padding-top: 16px; border-top: 1px solid rgba(229, 226, 193, .22);
  line-height: 1.7;
}

/* En el teléfono las columnas se apilan. Cada lista de enlaces iba además un
   enlace por renglón (con 36 px de alto para el dedo), y el pie llegaba a
   600-700 px: casi una pantalla entera. Ahora cada lista va a dos columnas y
   los espacios se ajustan; el alto depende solo de lo que trae cada página.
   El padding de abajo es lo justo para que el botón de contacto y el de
   "subir" (46 px a 20 px del borde) no tapen la nota final. */
@media (max-width: 780px) {
  .pie { padding-top: 28px; padding-bottom: 76px; }
  /* Marca y contacto a todo lo ancho (el correo y la direccion lo necesitan);
     Navegacion y Cotizacion lado a lado. */
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 22px 16px; }
  .pie-marca, .pie-grid > :has(> .contacto) { grid-column: 1 / -1; }
  .pie-marca img { margin-bottom: 10px; }
  .pie-lema { font-size: 14px; }
  .pie-titulo { margin-bottom: 4px; }
  /* Enlaces de 14 px de alto son difíciles de atinar con el dedo. */
  .pie .enlaces { gap: 0; }
  .pie .enlaces a { display: inline-block; padding: 8px 0; }
  .pie .contacto { gap: 4px; }
  .pie .nota { margin-top: 22px; padding-top: 12px; }
}

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

/* Aviso breve al agregar a la solicitud. */
/* Por encima de los modales (z-index 80): los avisos de lo que se hace dentro
   de un modal, como publicar un enriquecimiento, quedaban tapados por él. */
.flotante {
  position: fixed; right: 20px; bottom: 84px; z-index: 90;
  max-width: 340px; margin: 0;
  display: flex; align-items: center; gap: 11px;
  background: var(--crema-claro);
  box-shadow: var(--sombra-dura);
  animation: entrar-aviso .24s var(--salida) both;
}
@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.flotante[hidden] { display: none; }
.flotante .marca-aviso { flex: none; width: 8px; height: 8px; background: var(--naranja); }
.flotante.error .marca-aviso { background: #8f2d18; }

.consentimiento-analytics {
  position: fixed; z-index: 95; left: 8px; right: 150px; bottom: max(3px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 4px 7px;
  border: 1px solid rgba(31, 31, 31, .22);
  background: rgba(239, 236, 210, .76);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--negro);
  box-shadow: 0 3px 14px rgba(31, 31, 31, .12);
}
.consentimiento-analytics p { min-width: 0; margin: 0; display: flex; align-items: center; gap: 10px; line-height: 1.15; }
.consentimiento-analytics p strong { flex: none; font-family: var(--fuente-ui); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.consentimiento-analytics p span { min-width: 0; font-size: 10px; color: rgba(31, 31, 31, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consentimiento-analytics > div { flex: none; display: flex; gap: 5px; }
.consentimiento-analytics .boton { min-height: 27px; padding: 4px 8px; font-size: 8px; white-space: nowrap; }
.consentimiento-mas {
  flex: none; border: 0; border-bottom: 1px solid currentColor; padding: 2px 0;
  background: transparent; color: var(--texto-suave); cursor: pointer;
  font: 700 9px/1 var(--fuente-ui); text-transform: uppercase; letter-spacing: .04em;
}
.consentimiento-mas:hover, .consentimiento-mas:focus-visible { color: var(--negro); }
.consentimiento-analytics .consentimiento-aceptar,
.modal-privacidad .consentimiento-aceptar {
  min-height: 34px; padding-inline: 16px; font-size: 10px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(31, 31, 31, .2);
}
.consentimiento-rechazar {
  border-color: transparent; background: transparent; color: var(--texto-suave);
  box-shadow: none; text-decoration: underline; text-underline-offset: 3px;
}
.consentimiento-rechazar:hover, .consentimiento-rechazar:focus-visible {
  border-color: var(--linea); color: var(--negro); background: rgba(255, 255, 255, .28);
}
.modal-privacidad { z-index: 110; }
.modal-privacidad .modal-caja { max-width: 820px; }
.modal-privacidad .modal-cabeza h2 { margin: 2px 0 0; font-size: clamp(20px, 3vw, 30px); }
.aviso-privacidad-texto { font-size: 14px; line-height: 1.58; }
.aviso-privacidad-texto h3 { margin: 24px 0 7px; font-size: 17px; }
.aviso-privacidad-texto p { margin: 0 0 12px; }
.aviso-privacidad-texto ul { margin: 0; padding-left: 21px; }
.aviso-privacidad-texto li + li { margin-top: 9px; }
.aviso-privacidad-texto code { font-size: .92em; }
.aviso-privacidad-fecha { color: var(--texto-suave); font-size: 12px; }
.modal-privacidad-acciones {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--linea); background: var(--crema-claro);
}
/* La decision de analitica puede esperar unos segundos: durante el video de
   entrada se oculta por completo para no cubrir su boton "Saltar". Al quitar
   intro.js la clase con-intro, la franja aparece automaticamente. */
html.con-intro .consentimiento-analytics {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}
@media (max-width: 700px) {
  .consentimiento-analytics { left: 4px; right: auto; bottom: max(3px, env(safe-area-inset-bottom)); width: calc(100vw - 8px); align-items: stretch; flex-direction: column; gap: 6px; padding: 7px 8px; }
  .consentimiento-analytics p { display: block; }
  .consentimiento-analytics p span { font-size: 10px; white-space: normal; overflow: visible; }
  .consentimiento-analytics > div { display: grid; grid-template-columns: .7fr 1.3fr; }
  .consentimiento-mas { align-self: flex-start; }
  .modal-privacidad-acciones { display: grid; grid-template-columns: .8fr 1.2fr; padding: 10px; }
}

/* Flor de contacto: boton fijo con petalos y enlaces desplegables. */
.contacto-flor {
  position: fixed;
  right: 84px;
  bottom: 20px;
  z-index: 58;
  font-family: var(--fuente-ui);
}
.contacto-flor-menu {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: min(290px, calc(100vw - 40px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.contacto-flor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--linea);
  background: var(--crema-claro);
  color: var(--negro);
  box-shadow: var(--sombra-dura);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  opacity: 0;
  transform: translate(24px, 28px) scale(.82) rotate(5deg);
  transition:
    opacity .2s ease,
    transform .34s var(--salida),
    background var(--transicion),
    color var(--transicion);
}
.contacto-flor.abierta .contacto-flor-item {
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 42ms);
}
.contacto-flor-item:hover,
.contacto-flor-item:focus-visible {
  background: var(--negro);
  color: var(--crema);
  text-decoration: none;
}
.contacto-flor-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border: 1px solid currentColor;
}
.contacto-flor-icono svg { display: block; }

/* Los petalos "Dirección" y "Teléfono fijo" no son enlaces sueltos: son
   botones que despliegan, a un costado, una tarjeta por sucursal (mapas o
   telefonos para copiar). Viven dentro de un .contacto-flor-item normal
   (mismo padding/fondo/sombra/animacion de entrada), asi que el boton de
   adentro solo tiene que rellenar ese espacio sin verse como boton. */
.contacto-flor-desplegable { position: relative; padding: 0; }
.contacto-flor-desplegable-boton {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border: 0; background: transparent;
  color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit;
  cursor: pointer;
}
.contacto-flor-desplegable-boton:focus-visible {
  outline: 2px solid var(--naranja); outline-offset: -2px;
}

.contacto-flor-sucursales {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s var(--salida);
  /* Ningun .contacto-flor-item trae z-index propio, asi que sin esto la
     tarjeta pinta en orden de DOM: en el menu angosto (donde se abre debajo
     del boton, no a un costado) quedaba tapada por los petalos siguientes
     (Instagram, Facebook...) en vez de encima. */
  z-index: 1;
}
.contacto-flor-desplegable.abierta .contacto-flor-sucursales {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.contacto-flor-sucursal {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  background: var(--crema-claro);
  color: var(--negro);
  box-shadow: var(--sombra-dura);
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.contacto-flor-sucursal:hover,
.contacto-flor-sucursal:focus-visible {
  background: var(--naranja); color: var(--negro); text-decoration: none;
}

/* Grupo de telefonos de una sucursal dentro del desplegable de "Teléfono
   fijo": un titulo chico y sus botones de copiar, uno debajo del otro. */
.contacto-flor-tel-grupo { display: flex; flex-direction: column; gap: 4px; }
.contacto-flor-tel-grupo + .contacto-flor-tel-grupo { margin-top: 4px; }
.contacto-flor-tel-titulo {
  margin: 0 0 2px;
  padding: 6px 12px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-tenue);
  background: var(--crema-claro);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-dura);
}
.contacto-flor-tel-linea {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  color: inherit; opacity: .62;
}

.contacto-flor-boton {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--linea);
  background: var(--crema-claro);
  color: var(--negro);
  box-shadow: var(--sombra-dura);
  cursor: pointer;
  overflow: visible;
  transition: transform var(--transicion), background var(--transicion), color var(--transicion);
}
.contacto-flor-boton:hover,
.contacto-flor-boton:focus-visible {
  background: var(--naranja);
  color: var(--negro);
  transform: translateY(-2px);
}
.contacto-flor .petalo,
.contacto-flor .nucleo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
}
.contacto-flor .petalo {
  width: 19px;
  height: 19px;
  border: 1px solid var(--linea);
  background: var(--crema);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .34s var(--salida), background var(--transicion);
}
.contacto-flor .p1 { background: var(--naranja); }
.contacto-flor .p2 { background: var(--crema-hueso); }
.contacto-flor .p3 { background: var(--crema-hueso); }
.contacto-flor .p4 { background: var(--naranja-tenue); }
.contacto-flor.abierta .p1 { transform: translate(-50%, -150%) rotate(45deg); }
.contacto-flor.abierta .p2 { transform: translate(50%, -50%) rotate(45deg); }
.contacto-flor.abierta .p3 { transform: translate(-50%, 50%) rotate(45deg); }
.contacto-flor.abierta .p4 { transform: translate(-150%, -50%) rotate(45deg); }
.contacto-flor .nucleo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--negro);
  color: var(--crema);
  border: 1px solid var(--linea);
  font-size: 8px;
  font-weight: 700;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.contacto-flor.abierta .contacto-flor-boton {
  background: var(--crema);
}

/* Volver arriba. */
.arriba {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--linea); background: var(--crema-claro);
  color: var(--negro); font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: var(--sombra-dura);
  animation: entrar-aviso .2s var(--salida) both;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.arriba:hover { background: var(--negro); color: var(--crema); transform: translateY(-2px); }

@media (max-width: 560px) {
  .flotante { right: 12px; left: 12px; bottom: 76px; max-width: none; }
  .contacto-flor { right: 64px; bottom: 12px; }
  .contacto-flor-boton { width: 42px; height: 42px; }
  /* Ojo: el menu cuelga del borde derecho de .contacto-flor, que ya esta
     64px adentro del viewport. Restar solo 24px (pensando en .contacto-flor
     pegado al borde) lo hacia mas ancho que el espacio real disponible y se
     salia por la izquierda de la pantalla. */
  .contacto-flor-menu { bottom: 52px; width: calc(100vw - 80px); }
  /* Sin espacio a los costados en una pantalla angosta: la tarjeta de
     sucursales se abre debajo del boton en vez de a un lado. */
  .contacto-flor-sucursales {
    right: auto; left: 0; top: 100%;
    margin-right: 0; margin-top: 8px;
    width: 100%; max-width: none;
    transform: translateY(-8px);
  }
  .contacto-flor-desplegable.abierta .contacto-flor-sucursales { transform: none; }
  .contacto-flor .petalo { width: 15px; height: 15px; }
  .contacto-flor .nucleo { width: 20px; height: 20px; font-size: 7px; }
  .arriba { right: 12px; bottom: 12px; width: 42px; height: 42px; }
}

/* ------------------------------------------------- Movimiento reducido --- */
/* Quien lo pide en su sistema recibe la misma interfaz, sin desplazamientos
   ni animaciones. Las transiciones no se anulan del todo: un cambio de color
   instantáneo se siente roto. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Nada entra desplazándose ni parpadeando: se pinta ya colocado. */
  .esqueleto,
  .tarjeta-producto,
  .chip-filtro,
  .sugerencias,
  .velo,
  .flotante,
  .contacto-flor-item,
  .contacto-flor-sucursales,
  .arriba,
  .banner-ofertas,
  .agregar > .boton.principal.confirmado,
  .banner-ofertas.progreso-activo .banner-ofertas-progreso span,
  .cabecera,
  .cabecera::after,
  .cabecera-util,
  .item-filtro.activa .casilla::after {
    animation: none;
  }
  /* El esqueleto se queda en una trama fija, que sigue leyéndose como hueco. */
  .esqueleto { opacity: .7; }

  .tarjeta-producto:hover { transform: none; }
  .tarjeta-producto:hover .foto img,
  .banner-ofertas-slide:not([aria-hidden="true"]):hover .banner-ofertas-foto img,
  .portada-collage .pieza:hover img,
  .marca:hover,
  .marca:focus-visible,
  .marca:hover .logo-sello,
  .marca:focus-visible .logo-sello,
  .menu-principal a:hover,
  .menu-principal a:focus-visible,
  .acciones > .boton:hover,
  .acciones > .boton:focus-visible,
  .menu-interno > .boton:hover,
  .menu-interno > .boton:focus-visible { transform: none; }
  .arriba:hover { transform: none; }
  .contacto-flor-boton:hover,
  .contacto-flor-boton:focus-visible,
  .contacto-flor-item,
  .contacto-flor.abierta .contacto-flor-item { transform: none; }
  .banner-ofertas-pista,
  .banner-ofertas-foto img,
  .contacto-flor-item,
  .contacto-flor .petalo,
  .ver-ficha, .titulo-pieza,
  .agregar > .boton.principal::before { transition: none; }
  .columnas > .lateral { transition: visibility 0s; }
  body.plegado-animado .columnas,
  body.plegado-animado .columnas > .lateral,
  body.plegado-animado .columnas > .resultados { transition: none; }
}

/* ------------------------------------------------ Vidrios: respaldos ----- */
/* Dos casos en los que las barras vuelven a ser macizas:

   1. El navegador no sabe desenfocar el fondo (Firefox con la opción apagada,
      versiones viejas). Sin el desenfoque, un crema al 76 % sobre una foto no
      es un vidrio: es texto encima de una foto. Se rellena el color pleno.
   2. El visitante pidió menos transparencia en su sistema. Ahí no es cuestión
      de gusto: se le devuelve la interfaz opaca completa.

   Las dos listas dicen lo mismo y van repetidas a propósito: las condiciones
   son independientes (una es del navegador, la otra del usuario) y CSS no deja
   unir un `@supports` y un `@media` en una sola regla.

   Ojo con el cajón de filtros: sólo es una superficie cuando es cajón. En
   escritorio, `.lateral` es transparente por diseño y tiene que seguir
   siéndolo, así que ahí el respaldo va dentro de su misma consulta de ancho. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera, .cabecera.desplazada, .barra-resultados { background: var(--crema); }
  .banner-ofertas { background: var(--negro); }
  .menu-principal a, .menu-principal-toggle { background: #fff; }
  .menu-principal a:hover,
  .menu-principal a:focus-visible { background: var(--crema-hueso); }
  .menu-principal a[aria-current="page"] { background: var(--negro); }
  .buscador input { background-color: var(--crema-hueso); }
  .velo { background: rgba(31, 31, 31, .55); }

  @media (max-width: 900px) {
    .columnas > .lateral { background: var(--crema-claro); }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cabecera, .cabecera.desplazada, .barra-resultados { background: var(--crema); }
  .banner-ofertas { background: var(--negro); }
  .menu-principal a, .menu-principal-toggle { background: #fff; }
  .menu-principal a:hover,
  .menu-principal a:focus-visible { background: var(--crema-hueso); }
  .menu-principal a[aria-current="page"] { background: var(--negro); }
  .buscador input { background-color: var(--crema-hueso); }
  .velo { background: rgba(31, 31, 31, .55); }

  .cabecera, .barra-resultados, .banner-ofertas,
  .columnas > .lateral, .velo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) and (max-width: 900px) {
  .columnas > .lateral { background: var(--crema-claro); }
}

/* --- Panel interno: modales en celular ----------------------------------
   En pantallas chicas un modal flotante con margenes dejaba ver el panel
   detras, encogia las tablas y partia los titulos en dos renglones grandes.
   Aqui cada modal ocupa toda la pantalla, como una hoja: cabecera compacta
   y fija, cuerpo que se desplaza. El !important gana a los max-width que
   cada modal trae en linea para escritorio. */
@media (max-width: 640px) {
  .panel-interno .modal { padding: 0; place-items: stretch; }
  .panel-interno .modal-caja {
    max-width: none !important; max-height: none; height: 100vh; height: 100dvh;
    border: 0; box-shadow: none;
  }
  /* z-index: las celdas de las tablas apiladas van con position:relative y,
     sin esto, al desplazarse se pintaban encima de la cabecera fija. */
  .panel-interno .modal-cabeza { padding: 10px 14px; gap: 10px; z-index: 5; }
  .panel-interno .modal-cabeza h2 {
    margin: 0; font-size: 19px; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .panel-interno .modal-cabeza .cerrar { flex: none; min-width: 40px; min-height: 40px; }
  .panel-interno .modal-cuerpo { padding: 14px; }
  .panel-interno .modal-caja { overflow-x: hidden; }
  .panel-interno .modal .forma-dos { grid-template-columns: 1fr; }
  .panel-interno .modal .ayuda-texto { margin-top: 0; }
  .solo-amplio { display: none; }

  /* Tablas apilables: cada fila es una tarjeta y cada dato lleva el nombre
     de su columna a la izquierda (lo pone etiquetarTablas() en interno.js).
     Las celdas sin titulo (botones) ocupan todo el ancho al final. */
  .panel-interno table.datos.apilable,
  .panel-interno table.datos.apilable tbody { display: block; }
  .panel-interno table.datos.apilable thead { display: none; }
  .panel-interno table.datos.apilable tbody tr {
    display: block; padding: 10px 12px;
    border-bottom: 1px solid var(--linea);
  }
  .panel-interno table.datos.apilable tbody tr:last-child { border-bottom: 0; }
  .panel-interno table.datos.apilable tbody td {
    display: block; position: relative;
    padding: 4px 0 4px 104px; border: 0; min-height: 22px;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  .panel-interno table.datos.apilable tbody td::before {
    content: attr(data-etiqueta);
    position: absolute; left: 0; top: 6px; width: 96px;
    font: 700 9.5px var(--fuente-ui); text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto-tenue);
  }
  .panel-interno table.datos.apilable tbody td:not([data-etiqueta]) { padding-left: 0; }
  .panel-interno table.datos.apilable tbody td:not([data-etiqueta]):has(.boton) {
    display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px;
  }
  .panel-interno table.datos.apilable tbody td:empty { display: none; }
  .panel-interno .tabla-contenedor:has(> table.apilable) { overflow-x: visible; }

  /* Editor del blog: la barra fija de abajo en dos renglones compactos. */
  .blog-acciones { gap: 8px; margin: 14px -14px 0; padding: 10px 14px; }
  .blog-acciones > span { display: none; }
  .blog-estado { width: 100%; }
  .blog-estado label { flex: 1; }
  .blog-estado span { text-align: center; }
  .blog-acciones .boton { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 11px; justify-content: center; text-align: center; }
  .blog-acciones #btn-guardar-blog { flex-basis: 100%; order: 3; padding: 12px 6px; }
  .blog-paleta { grid-template-columns: 1fr 1fr; }
  .blog-paleta-opcion small { display: none; }
  .blog-bloque-botones .boton { padding: 6px 8px; }
}

/* --- Foto que vuela a la solicitud (comun.js, volarALaSolicitud) ----------
   Copia de la foto del producto que viaja en arco hasta el acceso a la
   solicitud de la cabecera. Entera (contain), sobre el mismo fondo de las
   fotos de producto, con el borde y la sombra dura de la marca. */
.vuelo-producto {
  position: fixed; z-index: 200; pointer-events: none;
  display: grid; place-items: center; padding: 6px;
  background: var(--foto-producto, #fff);
  border: 1px solid var(--negro); box-shadow: var(--sombra-dura);
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.vuelo-producto img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* El acceso a la solicitud "recibe" el producto: salta y su globo se enciende. */
.recibe-producto { animation: recibe-producto .6s cubic-bezier(.3, 1.6, .5, 1); }
.recibe-producto .globo { animation: globo-recibe .6s ease; }
@keyframes recibe-producto {
  0% { transform: translateY(0); }
  30% { transform: translateY(-5px) scale(1.06); }
  60% { transform: translateY(1px) scale(.98); }
  100% { transform: none; }
}
@keyframes globo-recibe {
  0%, 100% { transform: none; }
  40% { transform: scale(1.45); background: var(--naranja); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .recibe-producto, .recibe-producto .globo { animation-duration: .01s; }
}

/* --------------------------------------------- Solicitud (/solicitud) ----
   Lista de productos a la izquierda y resumen fijo a la derecha (datos de
   quien envia, obra, comentarios y boton). En pantallas chicas el resumen
   baja debajo de la lista. Fotos enteras (contain), esquinas rectas. */
.sol-pagina { padding-top: clamp(24px, 4vw, 44px); padding-bottom: clamp(40px, 6vw, 72px); }

.sol-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--linea);
}
.sol-cabeza .rotulo {
  margin: 0; font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--naranja);
}
.sol-cabeza h1 { margin: 6px 0 8px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; font-weight: 300; }
.sol-cabeza-texto { margin: 0; max-width: 58ch; color: var(--texto-suave); font-size: 15.5px; line-height: 1.5; }

.sol-pasos { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.sol-pasos li {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--linea); background: var(--crema-claro);
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue);
}
.sol-pasos li span {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--linea); background: var(--crema-hueso); color: var(--texto-tenue);
}
.sol-pasos li.hecho { color: var(--texto-suave); }
.sol-pasos li.hecho span { background: var(--negro); border-color: var(--negro); color: var(--crema); font-size: 0; }
.sol-pasos li.hecho span::before { content: "\2713"; font-size: 12px; }
.sol-pasos li.actual { border-color: var(--negro); color: var(--negro); box-shadow: 3px 3px 0 var(--naranja); }
.sol-pasos li.actual span { background: var(--naranja); border-color: var(--naranja); color: var(--negro); }

.sol-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 24px; align-items: start;
}

/* Lista de productos */
.sol-items { margin: 0; padding: 0; list-style: none; }
.sol-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: 8px 18px; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--linea-suave);
  transition: opacity .2s ease, transform .2s ease;
}
.sol-item.saliendo { opacity: 0; transform: translateX(24px); }
.sol-item-foto {
  display: grid; place-items: center; width: 96px; height: 96px; padding: 6px;
  background: var(--foto-producto, #fff); border: 1px solid var(--linea);
}
.sol-item-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sol-item-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sol-item-titulo { color: var(--negro); font-size: 16px; line-height: 1.2; text-transform: uppercase; }
.sol-item-titulo:hover { color: var(--naranja); text-decoration: none; }
.sol-item-detalle { margin: 0; min-height: 0; }
.sol-item-info .clave-art { font-family: var(--fuente-ui); font-size: 10.5px; color: var(--texto-tenue); }
.sol-item-nota { margin-top: 6px; }
.sol-item-nota input { display: none; width: 100%; padding: 8px 10px; border: 1px solid var(--linea); background: var(--crema-hueso); font-size: 14px; }
.sol-item-nota input:focus { border-color: var(--negro); outline: none; background: #fff; }
.sol-item-nota.abierta input { display: block; }
.sol-item-nota.abierta .sol-nota-mostrar { display: none; }
.sol-nota-mostrar {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px;
}
.sol-nota-mostrar:hover { color: var(--naranja); }

.sol-item-cantidad { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sol-item-cantidad .contador {
  display: flex; border: 1px solid var(--linea); background: var(--crema-hueso);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.sol-item-cantidad .contador:focus-within,
.sol-item-cantidad .contador:hover { border-color: var(--negro); box-shadow: 3px 3px 0 var(--naranja-tenue); }
.sol-item-cantidad .paso {
  width: 34px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 16px/1 var(--fuente-ui); color: var(--texto-suave);
  transition: background var(--transicion), color var(--transicion);
}
.sol-item-cantidad .paso:hover { background: var(--naranja); color: var(--negro); }
.sol-item-cantidad input {
  width: 64px; padding: 8px 2px; text-align: center;
  border: 0; border-inline: 1px solid var(--linea-suave); background: transparent;
  font-family: var(--fuente-ui); font-size: 14px; -moz-appearance: textfield;
}
.sol-item-cantidad input::-webkit-outer-spin-button,
.sol-item-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sol-item-unidad {
  font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
}
.sol-item-quitar {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border: 1px solid transparent; background: none; cursor: pointer; color: var(--texto-tenue);
  font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.sol-item-quitar span:first-child { font-size: 18px; line-height: 1; }
.sol-item-quitar:hover { color: #8f2d18; border-color: var(--naranja); background: var(--naranja-tenue); }
.sol-agregar-mas {
  display: block; padding: 14px 18px; text-align: center;
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave);
}
.sol-agregar-mas:hover { background: var(--crema-hueso); color: var(--negro); text-decoration: none; }

/* Resumen fijo */
.sol-resumen { position: sticky; top: calc(var(--alto-cabecera) + 16px); }
.sol-resumen-cabeza { padding: 16px 20px; border-bottom: 1px solid var(--linea); background: var(--negro); color: var(--crema); }
.sol-resumen-cabeza h2 { margin: 0; font-size: 20px; font-weight: 300; color: var(--crema); }
.sol-resumen-cabeza p { margin: 4px 0 0; font-size: 14px; color: rgba(229, 226, 193, .78); }
.sol-resumen-cabeza strong { color: var(--naranja); font-weight: 700; }
.sol-quien { padding: 16px 20px; border-bottom: 1px solid var(--linea-suave); display: grid; gap: 4px; }
.sol-quien .rotulo {
  margin: 0; font-family: var(--fuente-ui); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.sol-quien-nombre { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.sol-quien-datos { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--texto-suave); overflow-wrap: anywhere; }
.sol-quien-cambiar { justify-self: start; margin-top: 4px; font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-suave); }
.sol-quien-aviso { margin: 6px 0 0; padding: 8px 10px; background: var(--naranja-tenue); border-left: 3px solid var(--naranja); font-size: 13px; }
.sol-quien.sin-sesion { gap: 8px; background: var(--cafe-tenue); }
.sol-quien.sin-sesion .boton { justify-content: center; }
.sol-resumen-campos { padding: 16px 20px 0; }
.sol-resumen-campos .campo { margin-bottom: 14px; }
.sol-resumen-campos .opcional { font-weight: 400; color: var(--texto-tenue); text-transform: none; letter-spacing: 0; }
.sol-resumen .sol-enviar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: calc(100% - 40px); margin: 0 20px; padding: 15px 16px; font-size: 13px;
}
.sol-enviar span { transition: transform .2s var(--salida); }
.sol-enviar:hover span { transform: translateX(4px); }
.sol-garantias { margin: 14px 20px 18px; padding: 0; list-style: none; display: grid; gap: 6px; }
.sol-garantias li {
  position: relative; padding-left: 20px;
  font-family: var(--fuente-ui); font-size: 11px; color: var(--texto-suave);
}
.sol-garantias li::before {
  content: ""; position: absolute; left: 2px; top: .3em;
  width: 9px; height: 5px; border-left: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja);
  transform: rotate(-45deg);
}

/* Barra de "Deshacer" al quitar un producto */
.sol-deshacer {
  position: fixed; left: 50%; bottom: 20px; z-index: 95; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 18px; background: var(--negro); color: var(--crema);
  box-shadow: var(--sombra-dura); font-size: 14px;
  animation: sol-deshacer-entra .25s var(--salida);
}
.sol-deshacer[hidden] { display: none; }
.sol-deshacer strong { color: #fff; }
.sol-deshacer button {
  flex: none; padding: 8px 12px; border: 1px solid var(--naranja); background: var(--naranja); cursor: pointer;
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--negro);
}
@keyframes sol-deshacer-entra { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Vacia y enviada */
.sol-vacia, .sol-listo { max-width: 720px; margin: 0 auto; padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 44px); text-align: center; }
.sol-vacia-icono, .sol-listo-icono {
  display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px;
  background: var(--crema-hueso); border: 1px solid var(--linea); color: var(--texto-suave);
}
.sol-listo-icono { background: var(--naranja); border-color: var(--naranja); color: var(--negro); }
.sol-vacia h2, .sol-listo h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; }
.sol-vacia p, .sol-listo > p { margin: 0 auto 16px; max-width: 52ch; color: var(--texto-suave); line-height: 1.5; }
.sol-vacia-acciones, .sol-listo-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.sol-folio {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 10px 12px 10px 18px;
  border: 1px solid var(--negro); background: var(--crema-claro); box-shadow: 3px 3px 0 var(--naranja);
}
.sol-folio strong { font-family: var(--fuente-ui); font-size: 22px; letter-spacing: .04em; }
.sol-que-sigue {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 22px; padding: 0; list-style: none; text-align: left;
}
.sol-que-sigue li { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--linea); background: var(--crema-claro); font-size: 13.5px; line-height: 1.4; color: var(--texto-suave); }
.sol-que-sigue li > span {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  background: var(--negro); color: var(--crema); font: 700 12px var(--fuente-ui);
}
.sol-que-sigue strong { display: block; margin-bottom: 2px; color: var(--negro); font-weight: 600; }
.sol-listo-wa { margin: 0 0 22px; padding: 14px; border: 1px dashed var(--linea); }
.sol-listo-wa .rotulo { margin: 0 0 10px; font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.sol-listo-wa div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .sol-grid { grid-template-columns: minmax(0, 1fr); }
  .sol-resumen { position: static; }
}
/* Telefono: foto y nombre arriba; contador y "quitar" en una fila abajo. */
@media (max-width: 640px) {
  .sol-cabeza { margin-bottom: 18px; }
  .sol-pasos { width: 100%; }
  .sol-pasos li { flex: 1 1 0; justify-content: center; padding: 8px 6px; font-size: 9.5px; text-align: center; }
  .sol-pasos li span { display: none; }
  .sol-item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "foto info info" "cant cant quitar";
    gap: 12px; padding: 14px;
  }
  .sol-item-foto { grid-area: foto; width: 72px; height: 72px; }
  .sol-item-info { grid-area: info; }
  .sol-item-cantidad { grid-area: cant; flex-direction: row; justify-content: flex-start; gap: 10px; }
  .sol-item-quitar { grid-area: quitar; }
  .sol-item-cantidad .paso { width: 44px; min-height: 44px; }
  .sol-item-cantidad input { width: 72px; font-size: 16px; }
  .sol-item-nota input { font-size: 16px; min-height: 42px; }
  .sol-que-sigue { grid-template-columns: minmax(0, 1fr); }
  .sol-folio strong { font-size: 18px; }
}

/* ------------------------------------- Terminos y aviso de privacidad ----
   Pagina /terminos: texto largo en una columna comoda de leer, con un indice
   de saltos arriba. */
.legal { max-width: 820px; padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(44px, 6vw, 80px); }
.legal-cabeza { padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--negro); }
.legal-cabeza .rotulo {
  margin: 0; font-family: var(--fuente-ui); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texto-tenue);
}
.legal-cabeza h1 { margin: 10px 0 16px; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.02; font-weight: 300; }
.legal-indice { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-indice a {
  padding: 7px 11px; border: 1px solid var(--linea); background: var(--crema-claro); color: var(--negro);
  font-family: var(--fuente-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.legal-indice a:hover { border-color: var(--negro); color: var(--naranja); text-decoration: none; }
.legal-seccion { padding: 26px 0 8px; scroll-margin-top: calc(var(--alto-cabecera) + 16px); }
.legal-seccion + .legal-seccion { border-top: 1px solid var(--linea); }
.legal-seccion h2 { margin: 0 0 14px; font-size: clamp(21px, 2.2vw, 27px); font-weight: 400; }
.legal-seccion h2::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 12px; background: var(--naranja); }
.legal-seccion h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 600; text-transform: none; }
.legal-seccion p, .legal-seccion li { font-size: 15.5px; line-height: 1.65; color: var(--texto); }
.legal-seccion p { margin: 0 0 12px; }
.legal-seccion ul { margin: 0 0 12px; padding-left: 20px; }
.legal-seccion li { margin-bottom: 6px; }
.legal-seccion a { color: var(--negro); text-decoration: underline; text-decoration-color: var(--naranja); text-underline-offset: 3px; }

/* --- Panel interno: Catálogo → Enriquecimiento de productos -------------- */
.enr-miga { color: var(--texto-tenue); font-weight: 300; }
.enr-pestanas { flex-wrap: wrap; }
.enr-pestanas .globo { margin-left: 4px; }
.enr-h3 { margin: 26px 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.enr-vacio { padding: 22px; text-align: center; color: var(--texto-tenue); border: 1px dashed var(--linea); background: var(--crema-claro); }
.enr-sub { font-size: 11.5px; color: var(--texto-tenue); }
.enr-falta { color: var(--texto-tenue); font-size: 12px; }
.enr-alerta { margin: 8px 0 0; padding: 8px 10px; background: var(--naranja-tenue); border-left: 3px solid var(--naranja); font-size: 12.5px; color: #8f2d18; }
.enr-alerta.suave { background: var(--cafe-tenue); border-color: var(--cafe); color: #5b4b3e; }
.enr-error-linea { margin-top: 3px; font-size: 11.5px; color: #8f2d18; }
.enr-tipo { display: block; font: 600 10.5px var(--fuente-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue); }
.enr-meta { margin: 10px 0 0; font-size: 11.5px; color: var(--texto-tenue); }

.enr-chip {
  display: inline-block; padding: 3px 8px; white-space: nowrap;
  font: 700 10px var(--fuente-ui); text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--linea); background: var(--crema-hueso); color: var(--texto-suave);
}
.enr-chip.estado-enriquecido, .enr-chip.conector-ok, .enr-chip.trabajo-terminado, .enr-chip.cand-aprobado, .enr-chip.cand-automatico { background: #e3efe2; border-color: #6f9a6a; color: #2f5a2a; }
.enr-chip.estado-pendiente, .enr-chip.estado-propuesta, .enr-chip.cand-pendiente, .enr-chip.trabajo-pausado { background: var(--cafe-tenue); border-color: var(--cafe); color: #5b4b3e; }
.enr-chip.estado-asociado, .enr-chip.trabajo-corriendo, .enr-chip.trabajo-pendiente { background: var(--negro); border-color: var(--negro); color: var(--crema); }
.enr-chip.estado-error, .enr-chip.conector-error, .enr-chip.trabajo-error { background: var(--naranja-tenue); border-color: var(--naranja); color: #8f2d18; }
.enr-chip.cand-rechazado, .enr-chip.trabajo-cancelado, .enr-chip.conector-inactivo { opacity: .7; }

/* Resumen: una tarjeta por marca */
.enr-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.enr-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--linea); background: var(--crema-claro); }
.enr-tarjeta.inactiva { opacity: .65; }
.enr-tarjeta header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.enr-tarjeta h3 { margin: 0; font-size: 19px; font-weight: 400; }
.enr-total { margin: 0; font-size: 13px; color: var(--texto-suave); }
.enr-total strong { font: 700 26px var(--fuente-ui); color: var(--negro); margin-right: 4px; }
.enr-barra-texto { display: flex; justify-content: space-between; font-size: 12px; }
.enr-barra-texto strong { font-family: var(--fuente-ui); }
.enr-barra small { font-size: 10.5px; color: var(--texto-tenue); }
.enr-barra-pista { height: 6px; margin: 4px 0 2px; background: var(--crema-hueso); border: 1px solid var(--linea-suave); overflow: hidden; }
.enr-barra-pista i { display: block; height: 100%; background: var(--naranja); transition: width .4s ease; }
.enr-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 0; }
.enr-cifras div { padding: 6px; border: 1px solid var(--linea-suave); background: #fff; text-align: center; }
.enr-cifras dt { font: 600 9.5px var(--fuente-ui); text-transform: uppercase; color: var(--texto-tenue); }
.enr-cifras dd { margin: 2px 0 0; font: 700 16px var(--fuente-ui); }
.enr-progreso { font-size: 11.5px; color: var(--texto-suave); }
.enr-tarjeta footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* Productos */
.enr-filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 8px; margin-bottom: 10px; }
.enr-filtros select, .enr-filtros input { padding: 9px 10px; border: 1px solid var(--linea); background: var(--crema-hueso); min-width: 0; font: inherit; font-size: 13px; }
.enr-masivo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--linea); background: var(--crema-claro); font-size: 12.5px; }
.enr-masivo #enr-seleccion { font: 700 11px var(--fuente-ui); text-transform: uppercase; min-width: 110px; }
.enr-sep { flex: 1; }
.enr-tabla td { vertical-align: middle; }
.enr-mini { display: block; width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--linea); background: var(--foto-producto, #fff); }
.enr-mini.vacia { background: var(--crema-hueso); }
.enr-paginacion { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; font-size: 12.5px; }
.enr-paginacion > span:first-child { margin-right: auto; color: var(--texto-tenue); }

/* Candidatos (por revisar y en el producto) */
.enr-revision { display: grid; gap: 8px; }
.enr-cand { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--linea); background: #fff; }
.enr-cand.estado-rechazado { opacity: .55; }
.enr-cand.estado-aprobado, .enr-cand.estado-automatico { border-color: #6f9a6a; box-shadow: inset 4px 0 0 #6f9a6a; }
.enr-cand-punt { display: grid; place-items: center; height: 58px; border: 1px solid var(--linea); background: var(--cafe-tenue); }
.enr-cand-punt.alta { background: #e3efe2; border-color: #6f9a6a; }
.enr-cand-punt strong { font: 700 22px var(--fuente-ui); line-height: 1; }
.enr-cand-punt small { font-size: 10px; color: var(--texto-tenue); }
.enr-cand-cuerpo p { margin: 0 0 4px; }
.enr-cand-nombre { font-weight: 600; }
.enr-razones { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--texto-suave); }
.enr-cand-acciones { display: flex; flex-direction: column; gap: 5px; }

/* Producto: cabecera y comparación */
.enr-prod-cabeza { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: start; margin: 12px 0 6px; padding: 14px; border: 1px solid var(--linea); background: var(--crema-claro); }
.enr-prod-foto { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--linea); background: var(--foto-producto, #fff); display: grid; place-items: center; font-size: 11px; color: var(--texto-tenue); text-align: center; }
.enr-prod-cabeza h3 { margin: 4px 0 8px; font-size: 18px; font-weight: 400; }
.enr-prod-cabeza p { margin: 0 0 4px; }
.enr-prod-acciones { display: flex; flex-direction: column; gap: 6px; min-width: 230px; }
.enr-comparar td { vertical-align: top; }
.enr-comparar .enr-actual { color: var(--texto-suave); max-width: 320px; }
.enr-comparar .enr-nuevo { max-width: 420px; }
.enr-comparar tr.publicado { background: #f1f6ef; }
.enr-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.enr-foto { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-size: 12px; }
.enr-foto img { width: 100%; height: 150px; object-fit: contain; background: var(--foto-producto, #fff); }
.enr-foto.estado-publicado { border-color: #6f9a6a; box-shadow: inset 0 0 0 1px #6f9a6a; }
.enr-foto-info { display: flex; flex-direction: column; gap: 2px; }
.enr-foto-info small { color: var(--texto-tenue); }
.enr-foto a { font-size: 11px; }
.enr-docs, .enr-pubs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.enr-docs li, .enr-pubs li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--linea-suave); background: #fff; font-size: 13px; }
.enr-pubs li.revertida { opacity: .55; }
.enr-publicar { position: sticky; bottom: -1px; display: flex; gap: 10px; margin-top: 16px; padding: 12px 0; background: var(--crema-claro); border-top: 1px solid var(--linea); overflow: hidden; }
/* Mientras se publica o descarta: barra de carga que recorre el borde de
   arriba. Es una sola peticion sin avance medible, por eso es indeterminada. */
.enr-publicar.ocupada { cursor: progress; }
.enr-publicar.ocupada::before {
  content: ""; position: absolute; left: 0; top: 0; width: 35%; height: 3px;
  background: var(--naranja);
  animation: enr-cargando 1.1s ease-in-out infinite;
}
@keyframes enr-cargando {
  from { transform: translateX(-100%); }
  to { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .enr-publicar.ocupada::before { width: 100%; animation: none; opacity: .7; }
}

/* Conectores */
.enr-conectores { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.enr-conector { padding: 16px; border: 1px solid var(--linea); background: var(--crema-claro); }
.enr-conector header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.enr-conector h3 { margin: 0; font-size: 18px; font-weight: 400; }
.enr-fuente { margin: 8px 0 12px; font-size: 12.5px; color: var(--texto-suave); }
.enr-conector-campos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.enr-conector-campos .campo { margin-bottom: 8px; }
.enr-importar { margin: 6px 0 10px; padding: 12px; border: 1px dashed var(--naranja); background: #fff; font-size: 12.5px; }
.enr-importar p { margin: 0 0 8px; }
.enr-conector footer { display: flex; align-items: center; gap: 12px; }
.enr-acciones-trabajo { white-space: nowrap; }
.enr-fila-errores td { background: var(--crema-claro); font-size: 12px; }
.enr-fila-errores ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 900px) {
  .enr-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enr-conector-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enr-prod-cabeza { grid-template-columns: 80px minmax(0, 1fr); }
  .enr-prod-foto { width: 80px; height: 80px; }
  .enr-prod-acciones { grid-column: 1 / -1; min-width: 0; }
  .enr-conectores { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .enr-filtros { grid-template-columns: minmax(0, 1fr); }
  .enr-cand { grid-template-columns: 56px minmax(0, 1fr); }
  .enr-cand-acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .enr-cifras { grid-template-columns: repeat(2, 1fr); }
}

/* Ficha de producto: fotos adicionales y documentos del fabricante (publicados desde Enriquecimiento). */
.ficha-medios { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Carrusel: foto de Aspel + fotos del material publicadas del fabricante.
   Fotos enteras (contain) sobre el fondo de producto, nunca recortadas. */
.carrusel { position: relative; border: 1px solid var(--linea); background: var(--foto-producto); }
.carrusel-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  aspect-ratio: 1 / 1; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline: 2px solid var(--naranja); outline-offset: -2px; }
.carrusel-foto { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; }
.carrusel-foto img { width: 100%; height: 100%; object-fit: contain; }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--negro); background: rgba(255,255,255,.92); color: var(--negro);
  font-size: 28px; line-height: 1; cursor: pointer;
  transition: background var(--transicion), box-shadow var(--transicion);
}
.carrusel-flecha:hover { background: #fff; box-shadow: 3px 3px 0 var(--naranja); }
.carrusel-flecha.anterior { left: 10px; }
.carrusel-flecha.siguiente { right: 10px; }
.carrusel-contador {
  position: absolute; right: 10px; bottom: 10px; padding: 4px 9px;
  background: var(--negro); color: var(--crema); font: 700 11px var(--fuente-ui); letter-spacing: .06em;
}
.carrusel-miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.carrusel-miniaturas button { flex: none; width: 72px; height: 72px; padding: 3px; border: 1px solid var(--linea); background: var(--foto-producto, #fff); cursor: pointer; }
.carrusel-miniaturas button.activa, .carrusel-miniaturas button:hover { border-color: var(--negro); box-shadow: 2px 2px 0 var(--naranja); }
.carrusel-miniaturas img { width: 100%; height: 100%; object-fit: contain; }
@media (hover: none) {
  .carrusel-flecha { width: 38px; height: 38px; font-size: 24px; }
}
.ficha-documentos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 18px; }
.ficha-fuente { margin: 0; font-size: 12px; color: var(--texto-tenue); }

/* Usuarios del panel: casillas de permisos */
.permisos-campo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.permisos-campo legend {
  padding: 0; margin-bottom: 6px; font-family: var(--fuente-ui); font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave);
}
.permisos-campo .ayuda { font-family: var(--fuente-ui); font-size: 10.5px; text-transform: uppercase; color: var(--texto-tenue); margin-top: 6px; }
.permisos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 18px; }
.permisos-lista .interruptor.extra { color: var(--negro); }
.permisos-lista .interruptor.quitado { text-decoration: line-through; }
.permisos-lista input:disabled + .casilla { opacity: .55; }
.permisos-resumen { font-size: 12px; color: var(--texto-suave); line-height: 1.45; }

/* Bandeja: turno de 30 min de cada solicitud nueva */
.turno-solicitud { display: block; margin-top: 5px; font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
.turno-solicitud.mio { color: var(--negro); font-weight: 700; }
.turno-solicitud.libre { color: var(--olivo-oscuro); font-weight: 700; }
tr.fila-mia > td { background: var(--naranja-tenue); }

/* ===== Salud del sistema (panel interno) ===== */
.salud-resumen { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--c); color: var(--c); font-family: var(--fuente-ui); text-transform: uppercase; letter-spacing: .05em; }
.salud-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.salud-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-left: 4px solid var(--c); background: var(--crema-claro); }
.salud-lista li > i { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--c); }
.salud-lista li > div { flex: 1; min-width: 0; }
.salud-lista strong { display: block; font-weight: 400; }
.salud-lista p { margin: 3px 0 0; color: var(--texto-suave); font-size: 14px; overflow-wrap: anywhere; }
.salud-lista small { display: block; margin-top: 3px; color: var(--texto-tenue); font-family: var(--fuente-ui); font-size: 11px; }
.salud-lista li > b { flex: none; color: var(--c); font-family: var(--fuente-ui); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
.salud-ok { --c: var(--olivo-oscuro); }
.salud-falla { --c: var(--terracota-oscuro); }
.salud-apagado { --c: var(--cafe); }
@media (max-width: 640px) {
  .salud-lista li { flex-wrap: wrap; }
  .salud-lista li > b { width: 100%; padding-left: 22px; }
}