/* Maderas Barese II — hoja única, se inyecta EN LÍNEA en el head.

   ORDEN QUE IMPORTA. Primero va la CAPA DE COMPATIBILIDAD (lo que necesitan las
   otras 24 páginas: formularios, migas, fichas del SILO) y DESPUÉS la PIEL DE
   ENCARTE, portada tal cual del mockup aprobado. La piel va segunda a propósito:
   donde las dos definen la misma clase, gana el encarte.

   La piel viene de docs/mockups/home-v2-encarte.html sin reinterpretarla. Un
   intento anterior de "aplicar los tokens" a la estructura vieja quedó en algo
   parecido pero no igual, y parecido no sirve: el dueño aprobó ESE diseño.

   Sin JavaScript y sin una sola petición de red: la veta de la madera y las
   etiquetas de precio están DIBUJADAS con degradados. Quien entra desde
   Marketplace lo hace desde la calle, con la señal que haya. */

/* ═════════ CAPA DE COMPATIBILIDAD (las otras 24 páginas) ═════════ */
/* Maderas Barese II — hoja única, se inyecta EN LÍNEA en el head.

   PIEL DE ENCARTE: cartón, veta de madera, titular condensado en mayúsculas y
   el precio grande en rojo. La voz de un depósito que vende, no de una revista.
   (Antes era editorial serif; se cambió porque el negocio necesita que se lea
   el precio desde lejos, no que se vea elegante de cerca.)

   Sin esquinas redondeadas y sin JavaScript. Los degradados que hay son los que
   DIBUJAN la madera y las etiquetas de precio: existen justamente para no tener
   que cargar imágenes.

   Debe verse terminada con fuentes del sistema: eso es lo que ve el primer
   visitante con internet lento, y es el único que decide si se queda. */

@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

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

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

/* ── Capa moderna (CSS puro, 0 KB de JavaScript) ──────────────────
   Transiciones entre páginas y revelados al desplazar, nativos del navegador.
   Donde no hay soporte, el contenido simplemente se ve fijo: nada se rompe. */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: salir .18s ease-in both; }
::view-transition-new(root) { animation: entrar .24s ease-out both; }
@keyframes salir  { to { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

@supports (animation-timeline: view()) {
  .revelar {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
  @keyframes aparecer {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important; transition: none !important;
  }
  .revelar { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--fs-body);
  line-height: 1.65;
  /* espacio para la barra de acción fija del móvil */
  padding-bottom: 56px;
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--e5);
  text-wrap: balance;
}
/* Interlineado apretado: en condensada mayúscula no hay descendentes que
   choquen, y el bloque se lee como un cartel en vez de como un párrafo. */
h1 { font-size: var(--fs-display); line-height: 0.94; }
h2 { font-size: var(--fs-h2); line-height: 1.0; margin-top: var(--e8); }
h3 { font-size: var(--fs-h3); line-height: 1.05; margin-top: var(--e6); }

p, ul, ol { margin: 0 0 var(--e5); max-width: var(--columna); }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: var(--e2); }

a { color: var(--verde); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--verde-scuro); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
}

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

/* ── estructura ───────────────────────────────────────────────── */

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

.seccion { padding: clamp(56px, 4vw + 40px, 160px) 0; }
.seccion--papel  { background: var(--carta-2); }
.seccion--bosque { background: var(--verde-scuro); color: var(--carta); }
.seccion--bosque h1, .seccion--bosque h2, .seccion--bosque h3 { color: var(--carta); }
.seccion--bosque a { color: var(--pino); }

.rotulo {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  line-height: 1.4;
  margin: 0 0 var(--e3);
}
.seccion--bosque .rotulo { color: var(--pino); }

.destacado { color: var(--tinta-2); }
.pequeno { font-size: var(--fs-small); color: var(--tinta-2); }

/* Filete "venatura": el activo gráfico de la marca. Separa sin encerrar. */
.venatura { display: block; width: 88px; height: 8px; margin: var(--e5) 0; color: var(--ottone); }
.venatura--centro { margin-left: auto; margin-right: auto; }

/* ── encabezado ───────────────────────────────────────────────── */

.cabecera {
  border-bottom: 1px solid var(--linea);
  background: var(--carta);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); min-height: 72px;
}
.marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: var(--tinta); }
.marca__nombre { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.marca__nombre span { display: block; font-size: var(--fs-label); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta-2); font-family: var(--texto); }

.menu { display: none; }
@media (min-width: 900px) {
  .menu { display: flex; align-items: center; gap: var(--e6); }
  .menu a { color: var(--tinta); text-decoration: none; font-size: var(--fs-small); }
  .menu a:hover { color: var(--verde); text-decoration: underline; }
  .menu__cta {
    border: 1px solid var(--verde); color: var(--verde) !important;
    padding: 10px var(--e4); text-decoration: none !important;
  }
  .menu__cta:hover { background: var(--verde); color: var(--carta) !important; }
  .plegable { display: none; }
}

/* Menú móvil sin JavaScript: <details> nativo */
.plegable > summary {
  list-style: none; cursor: pointer; padding: var(--e3);
  margin-right: calc(var(--e3) * -1);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable__panel {
  position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--carta); border-bottom: 1px solid var(--linea);
  padding: var(--e5) var(--gutter) var(--e7);
}
.plegable__panel a {
  display: block; font-family: var(--display); font-size: 1.5rem;
  padding: var(--e4) 0; color: var(--tinta); text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.plegable__panel a:last-child { border-bottom: none; }

/* ── barra de acción del móvil ────────────────────────────────── */

.barra-accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; height: 56px; background: var(--verde-scuro);
}
.barra-accion a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--e2);
  color: var(--carta); text-decoration: none; font-size: var(--fs-small);
  border-right: 1px solid rgba(246,243,237,.18);
}
.barra-accion a:last-child { border-right: none; }
.barra-accion svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 768px) { .barra-accion { display: none; } }

/* ── portada ──────────────────────────────────────────────────── */

/* La portada va sobre VETA DE MADERA dibujada con degradados (ver más abajo):
   cero imágenes, cero peticiones de red, y se ve igual de bien en el teléfono
   del que entra desde Marketplace con dos rayas de señal. */
.portada {
  padding: clamp(48px, 6vw, 128px) 0 clamp(40px, 4vw, 96px);
  position: relative;
}
/* El titular va en una caja de papel sobre la veta: sin ella, la condensada
   negra sobre la madera pierde contraste y deja de cumplir accesibilidad. */
.portada__caja {
  background: var(--carta);
  padding: clamp(20px, 4vw, 40px);
  max-width: 34rem;
  box-shadow: 0 4px 14px rgba(23, 21, 18, .14);
}
/* 24ch: en condensada entra bastante más texto por línea que en la serif que
   había antes, así que la caja puede ser más angosta sin partir el titular. */
.portada__titulo { max-width: 24ch; }
/* La palabra destacada. En mayúsculas la cursiva no funciona —se ve inclinada
   y nada más—, así que el énfasis lo lleva el COLOR de la marca. */
.portada__titulo em { font-style: normal; font-weight: 900; color: var(--verde); }
.portada__bajada { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); max-width: 40ch;
  color: var(--tinta-2); line-height: 1.5; }

/* ── BANNERS Y BANDAS (lectura de revista) ────────────────────────
   Bloques a todo el ancho que se leen de un golpe al bajar. Hoy viven de
   tipografía y color (0 KB de imagen, carga instantánea); cuando lleguen las
   fotos del dueño entran como fondo SIN rediseñar: basta añadir --foto. */

.banda {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: clamp(40px, 7vw, 88px) 0;
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
}
a.banda:hover .banda__titulo { text-decoration: underline; text-underline-offset: 6px; }

.banda__interior {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter);
  position: relative; z-index: 2;
}
.banda__rotulo {
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 var(--e3); color: var(--tinta-2);
}
.banda__titulo {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); line-height: 1.05;
  margin: 0 0 var(--e4); max-width: 16ch;
}
.banda__texto { max-width: 42ch; color: var(--tinta-2); margin: 0 0 var(--e5); }
.banda__pie { font-size: var(--fs-small); font-weight: 600; color: var(--verde); }

/* Cinta de color de la categoría: la firma visual de cada sección */
.banda::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--ficha, transparent); z-index: 3;
}
@media (min-width: 768px) { .banda::before { width: 10px; } }

.banda--papel  { background: var(--carta-2); }
.banda--bosque { background: var(--verde-scuro); color: var(--carta); }
.banda--bosque .banda__rotulo { color: var(--pino); }
.banda--bosque .banda__texto  { color: rgba(246,243,237,.82); }
.banda--bosque .banda__pie    { color: var(--pino); }

/* Madera: bloque cálido para categorías de material */
.banda--madera { background: var(--wengue); color: var(--carta); }
.banda--madera .banda__rotulo { color: var(--pino); }
.banda--madera .banda__texto  { color: rgba(246,243,237,.82); }
.banda--madera .banda__pie    { color: var(--pino); }

/* Con foto (se activa cuando el dueño entregue las suyas) */
.banda--foto { color: var(--carta); }
.banda--foto .banda__rotulo,
.banda--foto .banda__pie { color: var(--pino); }
.banda--foto .banda__texto { color: rgba(246,243,237,.88); }
.banda__fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.banda--foto::after {           /* velo para que el texto siempre se lea */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(18,59,25,.92) 0%, rgba(18,59,25,.72) 55%, rgba(18,59,25,.45) 100%);
}
/* El contenido real de las cuatro bandas de la landing no usa
   `.banda__interior` (ese nombre se quedó sin un solo llamador): usa
   `.banda__in`. Sin levantarlo por encima del fondo y del velo —los dos
   `position:absolute` de arriba— quedaría PINTADO DEBAJO de los dos, según
   el orden de apilamiento normal de CSS (un elemento sin position queda
   por debajo de cualquier descendiente posicionado, tenga o no z-index). */
.banda--foto > .banda__in { position: relative; z-index: 2; }
/* El rótulo y la bajada sí existen acá, con otro nombre que `.banda__rotulo`
   y `.banda__texto`: mismo tono que ya usa `.oscura` para lo mismo, así el
   ícono de servicios (la única de las cuatro que ya era `.oscura`) no
   cambia de paleta al ganar la foto detrás. */
.banda--foto .kicker { color: var(--ottone-chiaro); }
.banda--foto .sec-cab__bajada { color: var(--verde-claro); }

/* Banda partida: mitad texto, mitad color/foto (formato de catálogo) */
@media (min-width: 900px) {
  .banda--partida .banda__interior {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--e8); align-items: center;
  }
  .banda--partida .banda__titulo { max-width: none; }
}
.banda__lamina {
  min-height: 200px; border: 1px solid var(--linea);
  display: flex; align-items: flex-end; padding: var(--e4);
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
}

/* Cintillo: franja fina de aviso comercial (sin estridencia) */
.cintillo {
  background: var(--verde-scuro); color: var(--carta);
  padding: var(--e3) 0; font-size: var(--fs-small); text-align: center;
}
.cintillo strong { color: var(--pino); font-weight: 600; }

/* Escaparate: tira de 3-4 bloques altos, tipo página de revista */
.escaparate { display: grid; gap: 1px; background: var(--linea); }
@media (min-width: 700px)  { .escaparate { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .escaparate--4 { grid-template-columns: repeat(4, 1fr); } }
.escaparate__pieza {
  background: var(--carta); padding: var(--e6) var(--e5);
  display: flex; flex-direction: column; min-height: 220px;
  text-decoration: none; color: inherit;
}
.escaparate__pieza:hover { background: var(--carta-2); }
.escaparate__num {
  font-family: var(--display); font-size: 1.5rem; color: var(--ottone);
  line-height: 1; margin-bottom: var(--e4);
}
.escaparate__pieza h3 { margin: 0 0 var(--e3); font-size: var(--fs-h3); }
.escaparate__pieza p { font-size: var(--fs-small); color: var(--tinta-2); flex: 1; margin-bottom: var(--e3); }
.escaparate__pieza span { font-size: var(--fs-small); font-weight: 600; color: var(--verde); }

/* ── retícula y tarjetas ──────────────────────────────────────── */

.rejilla { display: grid; gap: var(--e5); }
@media (min-width: 700px)  { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  border: 1px solid var(--linea); background: var(--carta);
  padding: var(--e5); display: flex; flex-direction: column;
}
.tarjeta__ficha { height: 2px; margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e4); }
.tarjeta h3 { margin-top: 0; }
.tarjeta p { flex: 1; margin-bottom: var(--e4); font-size: var(--fs-small); color: var(--tinta-2); }
.tarjeta a { font-size: var(--fs-small); }

/* ── bloque de servicio ───────────────────────────────────────── */

.servicio { background: var(--verde-tinta); padding: var(--e6); border: 1px solid var(--linea); }
.servicio__dato {
  font-family: var(--display); font-size: var(--fs-h3);
  display: block; margin: var(--e4) 0; color: var(--verde-scuro);
}

/* ── puente contextual (enlace autorizado entre silos) ────────── */

.puente {
  border-left: 2px solid var(--rosso); padding: var(--e3) 0 var(--e3) var(--e4);
  margin: var(--e7) 0; max-width: var(--columna); font-size: var(--fs-small);
}

/* ── botones ──────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 12px var(--e5);
  background: var(--verde); color: var(--carta); text-decoration: none;
  border: 1px solid var(--verde); font-size: var(--fs-body); font-family: var(--texto);
  cursor: pointer;
}
.boton:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); color: var(--carta); }
.boton--linea { background: transparent; color: var(--verde); }
.boton--linea:hover { background: var(--verde); color: var(--carta); }
.boton svg { width: 18px; height: 18px; flex: none; }

/* ── tabla de medidas: el activo diferencial ──────────────────── */

.tabla-envoltura { overflow-x: auto; margin: 0 0 var(--e5); border: 1px solid var(--linea); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { padding: var(--e3) var(--e4); text-align: left; border-bottom: 1px solid var(--linea);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
th { background: var(--carta-2); font-weight: 600; letter-spacing: 0.02em; }
tbody tr:nth-child(even) { background: var(--carta-2); }
td:first-child { font-weight: 600; }

/* ── preguntas frecuentes (details nativo) ────────────────────── */

.faq { max-width: var(--columna); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; padding: var(--e4) 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: var(--e4); min-height: 44px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ottone); font-size: 1.25rem; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: var(--e4); margin: 0; color: var(--tinta-2); }

/* ── migas de pan ─────────────────────────────────────────────── */

.migas { font-size: var(--fs-small); color: var(--tinta-2); padding: var(--e4) 0 0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0;
  max-width: none; }
.migas li::after { content: "/"; margin-left: var(--e2); color: var(--linea); }
.migas li:last-child::after { content: ""; }

/* ── datos del negocio ────────────────────────────────────────── */

.nap { font-style: normal; line-height: 1.8; }
.nap dt { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-2); margin-top: var(--e4); }
.nap dd { margin: 0; }
.seccion--bosque .nap dt { color: var(--pino); }

/* ── pie ──────────────────────────────────────────────────────── */

.pie { background: var(--verde-scuro); color: var(--carta); padding: var(--e8) 0 var(--e7); }
.pie a { color: var(--carta); text-decoration: none; font-size: var(--fs-small); }
.pie a:hover { text-decoration: underline; color: var(--pino); }
.pie h2, .pie h3 { color: var(--carta); }
.pie__enlaces { list-style: none; padding: 0; margin: 0; }
.pie__enlaces li { margin-bottom: var(--e2); }
.pie__legal { border-top: 1px solid rgba(246,243,237,.18); margin-top: var(--e7);
  padding-top: var(--e5); font-size: var(--fs-small); color: rgba(246,243,237,.75); }

/* ── formulario ───────────────────────────────────────────────── */

.campo { margin-bottom: var(--e5); max-width: var(--columna); }
.campo label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--e2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px var(--e3);
  border: 1px solid var(--linea); background: var(--carta);
  font-family: var(--texto); font-size: var(--fs-body); color: var(--tinta);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo__ayuda { font-size: var(--fs-small); color: var(--tinta-2); margin: var(--e2) 0 0; }
.trampa { position: absolute; left: -9999px; }

/* El error se marca con filete y palabra, no solo con color: en pantalla al
   sol o con daltonismo, el rojo solo no comunica nada. */
.error {
  border-left: 3px solid var(--rosso); padding: var(--e3) var(--e4);
  background: var(--carta-2); color: var(--rosso-scuro);
  max-width: var(--columna); font-size: var(--fs-small); margin: 0 0 var(--e5);
}

/* ── aviso de configuración (solo desarrollo) ─────────────────── */

.aviso-config {
  background: #FEF3C7; border-bottom: 1px solid #D9A404; color: #6B4A00;
  padding: var(--e3) var(--gutter); font-size: var(--fs-small);
}
.aviso-config strong { color: #6B4A00; }

/* ═══════════════════════════════════════════════════════════════════
   PIEL DE ENCARTE
   La voz de un depósito de madera: cartón, veta, precio grande y rojo.
   Todo DIBUJADO con degradados — cero imágenes, cero peticiones de red.
   Importa más de lo que parece: quien entra desde Marketplace lo hace con
   el teléfono y la señal que haya en la calle, y una portada que tarda es
   una portada que nadie ve.
   ═══════════════════════════════════════════════════════════════════ */

/* ── vetas de madera ───────────────────────────────────────────────
   Cuatro capas: fibra fina, brillo del cepillado, un nudo, y sombra en los
   bordes. Cada especie cambia solo el color base y el tono de la fibra. */

.veta { background-color: var(--pino); }
.veta,
.veta-pino, .veta-saqui, .veta-wengue {
  background-image:
    repeating-linear-gradient(92deg, rgba(169,123,79,0) 0 6px, rgba(169,123,79,.13) 6px 7px,
      rgba(169,123,79,0) 7px 15px, rgba(62,43,33,.09) 15px 16px, rgba(169,123,79,0) 16px 34px),
    repeating-linear-gradient(88deg, rgba(246,243,237,0) 0 21px, rgba(246,243,237,.22) 21px 23px,
      rgba(246,243,237,0) 23px 47px),
    radial-gradient(ellipse 26px 12px at 18% 40%, rgba(62,43,33,.22), rgba(62,43,33,.06) 60%, transparent 70%),
    linear-gradient(180deg, rgba(62,43,33,.10), rgba(62,43,33,0) 35%, rgba(62,43,33,.12));
}
.veta-pino   { background-color: var(--pino); }
.veta-saqui  { background-color: var(--saqui); }
.veta-wengue { background-color: var(--wengue); color: var(--carta); }

/* ── cintillo: la franja de la tasa del día ────────────────────────
   Es lo que hace que el sitio se vea VIVO. Un precio en dólares sin la tasa
   al lado no le sirve a nadie en Venezuela, y la tasa cambia todos los días:
   verla arriba dice «esto se actualizó hoy». */

.cintillo {
  background: var(--verde-scuro);
  color: var(--carta);
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: clamp(.75rem, .7rem + .3vw, .9rem);
  letter-spacing: .02em;
}
.cintillo__in {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  align-items: center; justify-content: center;
  padding: var(--e3) var(--gutter);
}
.cintillo strong { color: var(--pino); font-weight: 900; }

/* ── etiqueta de precio ────────────────────────────────────────────
   El estallido rojo del encarte. Es el elemento que más trabaja de toda la
   página: en un depósito la primera pregunta es siempre cuánto vale. */

.estallido {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--rosso); color: #fff;
  font-family: var(--titular); font-weight: 900;
  padding: var(--e2) var(--e4);
  line-height: 1;
  /* Recorte en diagonal: da el aire de etiqueta pegada sin una sola imagen. */
  clip-path: polygon(0 6%, 100% 0, 96% 100%, 4% 94%);
  box-shadow: 0 2px 8px rgba(142,30,23,.35);
}
.estallido__monto { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
.estallido__unidad {
  font-family: var(--texto); font-weight: 600; font-size: .625rem;
  text-transform: uppercase; letter-spacing: .06em; opacity: .92; margin-top: 2px;
}

/* ── tarjeta de producto ───────────────────────────────────────────
   Fondo cartón, medida en monoespaciada, precio arriba a la derecha. */

.kraft {
  background: var(--kraft);
  border: 1px solid rgba(62,43,33,.18);
  padding: var(--e4);
  position: relative;
}
.kraft__medida {
  font-family: var(--cota); font-size: .875rem; color: var(--tinta-2);
  letter-spacing: -.02em;
}
.kraft__nombre {
  font-family: var(--titular); font-weight: 900; text-transform: uppercase;
  font-size: 1.0625rem; line-height: 1.05; margin: var(--e2) 0 var(--e1);
}
.kraft .estallido { position: absolute; top: calc(var(--e4) * -1); right: var(--e3); }

/* ── grito: la franja de llamada ───────────────────────────────────
   Una sola por página. Si hay dos, no hay ninguna. */

.grito {
  background: var(--rosso); color: #fff;
  text-align: center; padding: clamp(28px, 5vw, 56px) var(--gutter);
}
.grito h2, .grito h3 { color: #fff; margin-top: 0; }
.grito p { color: rgba(255,255,255,.92); margin-inline: auto; }

/* ── botones del encarte ───────────────────────────────────────────
   Sólidos, condensados y en mayúsculas. Alto mínimo 48px: es un dedo, no un
   ratón, y por debajo de eso se falla el toque. */

.boton {
  font-family: var(--titular); font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; min-height: 48px; display: inline-flex;
  align-items: center; justify-content: center; gap: var(--e2);
}

/* ── ajustes de la piel sobre lo que ya existía ────────────────── */

.rotulo, .banda__rotulo {
  font-family: var(--titular); font-weight: 700; text-transform: uppercase;
}
.marca__nombre { font-family: var(--titular); font-weight: 900; text-transform: uppercase; }
.menu a, .menu__cta { font-family: var(--titular); font-weight: 700; text-transform: uppercase; }
.banda__titulo { font-family: var(--titular); font-weight: 900; text-transform: uppercase; }
/* La medida siempre en cota, esté donde esté. */
.medida, .nap__medida { font-family: var(--cota); letter-spacing: -.02em; }

/* Un solo punto de control del movimiento, para todo el encarte. */
@media (prefers-reduced-motion: reduce) {
  .estallido, .kraft { transition: none; }
}


/* ═════════ PIEL DE ENCARTE (manda sobre lo de arriba) ═════════ */

/* =========================================================================
   MADERAS BARESE II — HOME · dirección "ENCARTE"
   Un solo archivo. Cero recursos externos. Cero imágenes. Todo CSS/SVG.

   AUDITORÍA DE CONTRASTE (calculada, WCAG 2.1 relative luminance)
   sobre --carta #F6F3ED : tinta 16,45 · tinta-2 8,69 · verde 7,27 · rosso 5,90
                           ottone-scuro 6,25 · ottone 4,35 (SOLO >=24px o >=18,66 bold)
   sobre --carta-2 #EDE8DE: tinta 14,92 · tinta-2 7,88 · verde 6,59 · rosso 5,35
                           ottone-scuro 5,67 · ottone 3,95 (PROHIBIDO en kicker)
   sobre --ficha #FCFAF6  : tinta 17,48 · tinta-2 9,23 · rosso 6,27 · ottone-scuro 6,64
   sobre --verde-scuro    : carta 11,38 · verde-claro 8,09 · ottone-chiaro 5,56
                           ottone puro 2,62 PROHIBIDO · rosso como texto 1,93 PROHIBIDO
   sobre --verde-tinta    : tinta 13,90 · tinta-2 7,34 · rosso 4,98 · verde-scuro 9,62
   sobre --verde   : carta 7,27      sobre --rosso : carta 5,90
   sobre --rosso-scuro: carta 8,07   sobre --wengue: carta 12,04
   sobre --pino    : tinta 10,19 · verde-scuro 7,05 · (rosso 3,65 y verde 4,50: NO)
   sobre --saqui   : tinta 4,89 · (carta 3,36: NO)
   sobre --kraft   : tinta 13,03  (regla dura: en madera/kraft el párrafo va en --tinta)

   REGLAS DURAS DE LA DIRECCIÓN
   1. El rosso es DINERO. Solo precio, oferta y CTA de WhatsApp. Los errores del
      formulario van en --rosso-scuro CON icono, nunca solo color.
   2. Cartela rectangular por defecto. Máximo DOS estallidos en toda la página
      (héroe y ficha destacada) y nunca dos visibles en la misma pantalla.
   3. Rojo y verde no se tocan: mínimo 24px de separación + keyline de 1px del
      color del papel alrededor de toda superficie rosso.
   4. Presupuesto de madera: 8 elementos con veta en toda la página
      (héroe + 4 fichas de categoría + 3 muestrarios). Nada más.
      Prohibido background-attachment:fixed, filter y backdrop-filter sobre veta.
   5. La fecha de referencia de precios vive en UNA sola variable: --fecha-ref.
   ========================================================================= */

:root{
  /* ---- paleta aprobada por el cliente ---- */
  --carta:#F6F3ED;        /* papel */
  --carta-2:#EDE8DE;      /* superficies */
  --linea:#DDD6C8;        /* filetes */
  --tinta:#171512;        /* texto */
  --tinta-2:#4A443B;      /* secundario */
  --verde:#1C5C26;        /* marca */
  --verde-scuro:#123B19;  /* bandas invertidas */
  --verde-tinta:#DCE3D6;  /* bloques */
  --rosso:#B3261E;        /* precio / oferta / WhatsApp */
  --rosso-scuro:#8E1E17;
  --ottone:#8A6E33;       /* latón */
  --pino:#D9BE93;
  --saqui:#A97B4F;
  --wengue:#3E2B21;

  /* ---- tinte oscuro y tinte claro del MISMO latón (no son colores nuevos) ---- */
  --ottone-scuro:#6F5626;   /* sombra del latón — para texto pequeño sobre papel */
  --ottone-chiaro:#C9A85C;  /* luz del latón — para texto sobre banda verde oscura */

  /* ---- auxiliares ---- */
  --ficha:#FCFAF6;        /* blanco cálido de ficha (nunca #FFF puro) */
  --verde-claro:#C8D2C4;  /* párrafo sobre banda verde */
  --kraft:#E4D9C4;

  /* ---- la fecha de referencia de precios: cambiar SOLO aquí ---- */
  /* la fecha ya NO vive aquí: la pone el servidor en el HTML */

  /* ---- tipografía ---- */
  --titular:"Arial Narrow","Roboto Condensed","Avenir Next Condensed","Liberation Sans Narrow","Helvetica Neue Condensed",system-ui,sans-serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --cota:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;

  /* ---- sombras: solo existen tres ---- */
  --s1:0 1px 0 rgba(221,214,200,.9), 0 2px 8px rgba(23,21,18,.10);
  --s2:0 4px 14px rgba(23,21,18,.14);
  --s3:0 -2px 12px rgba(23,21,18,.18);

  --max:1180px;
}

/* ======================= reset mínimo ======================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--carta); color:var(--tinta);
  font-family:var(--texto); font-size:15px; line-height:1.55;
  overflow-x:hidden;
  padding-bottom:calc(60px + env(safe-area-inset-bottom) + 16px);
}
img,svg{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ottone); outline-offset:2px; border-radius:4px}
.oscura :focus-visible{outline-color:var(--ottone-chiaro)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ======================= titulares ======================= */
h1,h2,h3,.tt{
  font-family:var(--titular); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.92; margin:0;
  text-wrap:balance;
}
/* Plan B: si el sistema no tiene condensada real, se comprime el H1 del héroe.
   Nunca hay alturas fijas en contenedores de titular. */
@supports not (font-stretch:75%){
  .hero__h1{transform:scaleX(.88); transform-origin:left top}
}
@supports (font-stretch:75%){
  h1,h2,h3,.tt{font-stretch:75%}
}

/* ======================= texturas ======================= */
/* VETA (3 capas de periodo distinto, alfa <= .13, un solo nudo por pieza) */
.veta-pino{
  background-color:var(--pino);
  background-image:
    repeating-linear-gradient(92deg, rgba(169,123,79,0) 0 6px, rgba(169,123,79,.13) 6px 7px, rgba(169,123,79,0) 7px 15px, rgba(62,43,33,.09) 15px 16px, rgba(169,123,79,0) 16px 34px),
    repeating-linear-gradient(88deg, rgba(246,243,237,0) 0 21px, rgba(246,243,237,.22) 21px 23px, rgba(246,243,237,0) 23px 47px),
    radial-gradient(ellipse 26px 12px at 18% 40%, rgba(62,43,33,.22), rgba(62,43,33,.06) 60%, transparent 70%),
    linear-gradient(180deg, rgba(62,43,33,.10), rgba(62,43,33,0) 35%, rgba(62,43,33,.12));
}
.veta-saqui{
  background-color:var(--saqui);
  background-image:
    repeating-linear-gradient(92deg, rgba(62,43,33,0) 0 6px, rgba(62,43,33,.18) 6px 7px, rgba(62,43,33,0) 7px 15px, rgba(62,43,33,.10) 15px 16px, rgba(62,43,33,0) 16px 34px),
    repeating-linear-gradient(88deg, rgba(217,190,147,0) 0 21px, rgba(217,190,147,.18) 21px 23px, rgba(217,190,147,0) 23px 47px),
    radial-gradient(ellipse 24px 11px at 74% 62%, rgba(62,43,33,.26), rgba(62,43,33,.06) 60%, transparent 70%),
    linear-gradient(180deg, rgba(62,43,33,.10), rgba(62,43,33,0) 35%, rgba(62,43,33,.14));
}
.veta-wengue{
  background-color:var(--wengue);
  background-image:
    repeating-linear-gradient(92deg, rgba(217,190,147,0) 0 6px, rgba(217,190,147,.10) 6px 7px, rgba(217,190,147,0) 7px 15px, rgba(0,0,0,.14) 15px 16px, rgba(217,190,147,0) 16px 34px),
    repeating-linear-gradient(88deg, rgba(217,190,147,0) 0 21px, rgba(217,190,147,.07) 21px 23px, rgba(217,190,147,0) 23px 47px),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 35%, rgba(0,0,0,.18));
}
.veta-verde{  /* ficha de servicios: no es madera, es la marca */
  background-color:var(--verde);
  background-image:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,.13) 6px 7px, rgba(0,0,0,0) 7px 15px),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 35%, rgba(0,0,0,.16));
}
/* CARTÓN KRAFT */
.kraft{
  background-color:var(--kraft);
  background-image:
    repeating-linear-gradient(45deg, rgba(138,110,51,.06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(138,110,51,.05) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 30% 20%, rgba(246,243,237,.35), transparent 55%);
}
/* PAPEL DE ENCARTE: trama de imprenta sobre bandas claras */
.banda--papel{position:relative}
.banda--papel::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(23,21,18,.018) 0 1px, transparent 1px 3px);
}
.banda--papel > *{position:relative; z-index:1}
/* TOPE DE FIBRA: los anillos del canto. Tres líneas y deja de ser un azulejo marrón. */
.fibra{
  position:absolute; left:0; top:0; bottom:0; width:12px; z-index:2;
  background:repeating-radial-gradient(circle at 0 50%, rgba(62,43,33,.34) 0 2px, rgba(217,190,147,.55) 2px 5px);
  border-right:1px solid rgba(62,43,33,.28);
}

/* ======================= estructura de banda ======================= */
.banda{padding:28px 16px}
.banda__in{max-width:var(--max); margin:0 auto}
.oscura{background:var(--verde-scuro); color:var(--carta)}
.oscura p{color:var(--verde-claro)}
/* corte de imprenta: tira de 4px al entrar/salir de banda oscura o de veta */
.corte{height:4px; background:var(--ottone)}
.corte--rosso{background:var(--rosso)}
.filete{height:1px; background:var(--linea)}

/* cabecera de sección */
.sec-cab{margin-bottom:20px}
.sec-cab__filete{width:48px; height:2px; background:var(--ottone); margin-bottom:10px}
.kicker{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ottone-scuro); margin:0 0 6px;  /* ottone puro NO llega a AA aquí */
}
.oscura .kicker{color:var(--ottone-chiaro)}
.sec-cab h2{font-size:clamp(1.75rem,6vw,2.75rem)}
.sec-cab__bajada{margin:8px 0 0; color:var(--tinta-2); font-size:14px; max-width:62ch}

/* ======================= 1. BARRA DE SERVICIO (32px, NO sticky) ======================= */
.servicio{
  background:var(--verde-scuro); color:var(--carta);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  height:32px; display:flex; align-items:center;
}
.servicio__in{
  max-width:var(--max); margin:0 auto; padding:0 16px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.servicio__horario{font-family:var(--cota); letter-spacing:.06em; text-transform:none; font-size:11px; color:var(--verde-claro)}
.servicio__tel{color:var(--ottone-chiaro); text-decoration:none; font-family:var(--cota); font-size:11px; letter-spacing:.04em; white-space:nowrap}
@media (max-width:479px){ .servicio__ciudad{display:none} }

/* ======================= 2. CABECERA (sticky, se compacta) ======================= */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:var(--carta);
  border-bottom:1px solid var(--linea);
  box-shadow:0 3px 0 var(--ottone);
  transition:padding .18s ease;
}
.cabecera__in{
  max-width:var(--max); margin:0 auto; padding:8px 12px;
  display:flex; align-items:center; gap:10px;
  transition:padding .18s ease;
}
.is-compact .cabecera__in{padding:3px 12px}
.is-compact .marca__texto{display:none}

/* marca: el logo real del cliente */
.marca{display:flex; align-items:center; gap:9px; text-decoration:none; min-height:44px; flex:1 1 auto}
.escudo{
  /* Marca aplanada a la paleta (aprobado por Jose 29/7): mismas letras, sin
     el brillo con degradado que envejecia la pantalla. Verde #1C5C26 y rojo
     #B3261E, los mismos del resto del sitio. */
  width:46px; height:auto; flex:0 0 46px; display:block;
}
.marca__texto{line-height:1}
.marca__n{font-family:var(--titular); font-weight:900; font-size:17px; text-transform:uppercase; letter-spacing:-.01em; display:block}
.marca__s{font-family:var(--cota); font-size:9.5px; letter-spacing:.1em; color:var(--tinta-2); text-transform:uppercase}

/* chip TASA DEL DÍA: es un enlace real de WhatsApp, 44px de área táctil */
.tasa{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px;
  border:1px solid var(--ottone-scuro); border-radius:999px;
  color:var(--ottone-scuro); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; text-decoration:none; white-space:nowrap;
}
.tasa::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--verde); flex:0 0 8px}
@media (max-width:400px){ .tasa__larga{display:none} }

.wa-icono{
  width:44px; height:44px; flex:0 0 44px; border-radius:8px;
  background:var(--rosso); display:grid; place-items:center; color:var(--carta);
  box-shadow:0 2px 0 var(--rosso-scuro);
}

/* navegación */
.nav-desk{display:none}
.nav-desk a{
  font-family:var(--titular); font-weight:700; font-size:15px; text-transform:uppercase;
  letter-spacing:.01em; text-decoration:none; padding:12px 9px; display:inline-block;
  border-bottom:2px solid transparent;
}
.nav-desk a:hover,.nav-desk a:focus-visible{border-bottom-color:var(--rosso)}

.menu{position:relative}
.menu > summary{
  list-style:none; width:44px; height:44px; display:grid; place-items:center;
  cursor:pointer; border:1px solid var(--linea); border-radius:8px; background:var(--carta-2);
}
.menu > summary::-webkit-details-marker{display:none}
.menu__barras, .menu__barras::before, .menu__barras::after{
  display:block; width:20px; height:2px; background:var(--tinta); content:""; position:relative;
}
.menu__barras::before{position:absolute; top:-6px}
.menu__barras::after{position:absolute; top:6px}
.menu[open] > summary{background:var(--verde); border-color:var(--verde)}
.menu[open] .menu__barras, .menu[open] .menu__barras::before, .menu[open] .menu__barras::after{background:var(--carta)}
.menu__panel{
  position:absolute; right:0; top:52px; width:min(84vw,300px);
  background:var(--carta); border:1px solid var(--linea); border-radius:10px;
  box-shadow:var(--s2); padding:6px; z-index:70;
}
.menu__panel a{
  display:block; padding:13px 12px; min-height:44px; text-decoration:none;
  font-family:var(--titular); font-weight:800; font-size:16px; text-transform:uppercase;
  border-bottom:1px solid var(--linea);
}
.menu__panel a:last-child{border-bottom:0}

/* ======================= 3. HÉROE ======================= */
.hero{
  position:relative; overflow:hidden;
  /* acotado por arriba: en un teléfono de 640px el héroe no puede empujar
     el primer precio fuera de la primera pantalla */
  min-height:clamp(340px, 62vh, 560px); display:flex; align-items:center;
  padding:40px 16px 36px;
  border-bottom:4px solid var(--ottone);
}
.hero__in{max-width:var(--max); margin:0 auto; width:100%; position:relative; z-index:2}
.hero__caja{
  background:rgba(246,243,237,.92);   /* 92% obligatorio: sobre madera el párrafo va en caja */
  border:1px solid rgba(138,110,51,.35);
  border-radius:10px; padding:26px 16px 20px; max-width:min(100%,620px);
  box-shadow:var(--s2);
}
/* cinta verde sesgada del kicker */
.cinta-kicker{
  display:inline-block; background:var(--verde); color:var(--carta);
  padding:6px 14px; transform:skewX(-12deg); margin-bottom:12px;
  box-shadow:0 0 0 1px var(--carta);
}
.cinta-kicker span{
  display:inline-block; transform:skewX(12deg);
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.hero__h1{
  font-size:clamp(2.1rem,9vw,4.4rem); color:var(--tinta);
  text-shadow:0 1px 0 rgba(246,243,237,.35);  /* separa la contraforma sin tocar la ratio */
  margin-bottom:10px;
}
.hero__h1 em{font-style:normal; color:var(--verde)}
.hero__bajada{margin:0 0 16px; font-size:15px; line-height:1.5; color:var(--tinta-2); max-width:52ch}
.hero__botones{display:flex; flex-wrap:wrap; gap:10px}

/* disco de sierra asomando */
.sierra{
  position:absolute; right:-46px; bottom:-52px; width:220px; height:220px;
  color:var(--verde); opacity:.22; z-index:1; pointer-events:none;
}
/* estallido #1 de 2 — solo en el héroe.
   Cuelga del borde superior derecho de la placa: entra en la primera pantalla
   de un 360×640 sin empujar nada. */
.hero__estallido{
  position:absolute; z-index:3; right:-6px; top:-18px;
  filter:drop-shadow(0 2px 0 rgba(23,21,18,.18));
}
@media (min-width:720px){ .hero__estallido{right:16px; top:-14px} }
/* el kicker verde se aparta del estallido rojo: la regla de no-contacto */
.cinta-kicker{max-width:calc(100% - 104px)}
@media (min-width:720px){ .cinta-kicker{max-width:none} }

/* ======================= botones ======================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 20px; border-radius:8px; text-decoration:none;
  font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  border:0; cursor:pointer; text-align:center;
}
.btn--wa{background:var(--rosso); color:var(--carta); box-shadow:0 2px 0 var(--rosso-scuro), 0 0 0 1px var(--carta)}
.btn--wa:hover{background:var(--rosso-scuro)}
.btn--sec{background:transparent; color:var(--verde-scuro); border:2px solid var(--verde-scuro); box-shadow:0 2px 0 rgba(18,59,25,.35)}
.btn--sec:hover{background:var(--verde-tinta)}
.oscura .btn--sec{color:var(--carta); border-color:var(--ottone-chiaro); box-shadow:0 2px 0 rgba(201,168,92,.4)}
.btn:active{transform:translateY(1px)}

/* ======================= 4. CINTILLO DE PRECIOS HONESTOS ======================= */
.cintillo{
  background:var(--verde-tinta); border-top:1px solid rgba(18,59,25,.18); border-bottom:1px solid rgba(18,59,25,.18);
  padding:12px 16px;
}
.cintillo__in{
  max-width:var(--max); margin:0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  min-height:56px;
}
.cintillo__ico{flex:0 0 32px; color:var(--verde-scuro)}
.cintillo p{margin:0; font-size:13.5px; line-height:1.45; color:var(--tinta); flex:1 1 260px}
.cintillo b{color:var(--rosso-scuro)}
.cintillo__fecha{font-family:var(--cota); font-size:12px; color:var(--verde-scuro); white-space:nowrap; font-weight:700}
.cintillo__fecha::after{content:var(--fecha-ref)}

/* ======================= CARTELA DE PRECIO (el caballo de batalla) ======================= */
.cartela{
  position:absolute; right:-10px; bottom:-18px; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:56px; min-width:96px; padding:5px 10px 0;
  background:var(--rosso); color:var(--carta); text-decoration:none;
  border-radius:3px; transform:rotate(-2.2deg);
  /* keyline del papel + sombra dura de latón, sin blur: doble contorno de imprenta */
  box-shadow:0 0 0 2px var(--ficha), 5px 5px 0 var(--ottone);
  overflow:hidden;
}
.cartela:active{transform:rotate(-2.2deg) translateY(1px); box-shadow:0 0 0 2px var(--ficha), 3px 3px 0 var(--ottone)}
.cartela__desde{font-size:9px; font-weight:800; letter-spacing:.12em; opacity:.9; line-height:1}
.cartela__num{
  font-family:var(--titular); font-weight:900; font-size:26px; line-height:.98;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.cartela__uni{font-size:9.5px; font-weight:700; letter-spacing:.04em; line-height:1.1; margin-bottom:3px}
.cartela__ref{
  display:block; width:calc(100% + 20px); margin:0 -10px; padding:3px 6px;
  background:var(--rosso-scuro); font-family:var(--cota); font-size:9px;
  letter-spacing:.04em; text-align:center; line-height:1.2;
}
.cartela__ref::after{content:var(--fecha-ref)}
@media (min-width:640px){
  .cartela{min-width:108px}
  .cartela__num{font-size:30px}
}

/* ======================= ESTALLIDO (máximo 2 en toda la página) ======================= */
.estallido{
  width:104px; height:104px; background:var(--rosso); color:var(--carta);
  display:grid; place-items:center; text-align:center; text-decoration:none;
  transform:rotate(-7deg);
  clip-path:polygon(50% 0%,60.48% 10.88%,75% 6.7%,78.64% 21.36%,93.3% 25%,89.12% 39.52%,100% 50%,89.12% 60.48%,93.3% 75%,78.64% 78.64%,75% 93.3%,60.48% 89.12%,50% 100%,39.52% 89.12%,25% 93.3%,21.36% 78.64%,6.7% 75%,10.88% 60.48%,0% 50%,10.88% 39.52%,6.7% 25%,21.36% 21.36%,25% 6.7%,39.52% 10.88%);
}
.estallido i{display:block; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.12em; opacity:.88}
.estallido b{
  display:block; font-family:var(--titular); font-weight:900; font-size:26px;
  line-height:.95; font-variant-numeric:tabular-nums;
}
.estallido u{display:block; text-decoration:none; font-size:9px; font-weight:700}
@media (min-width:640px){
  .estallido{width:118px; height:118px}
  .estallido b{font-size:30px}
}

/* ======================= CINTA "OFERTA" (máx. 2 por retícula) ======================= */
.cinta{
  position:absolute; left:-6px; top:12px; z-index:5;
  height:22px; display:inline-flex; align-items:center; padding:0 10px;
  background:var(--verde); color:var(--carta); transform:skewX(-12deg);
  box-shadow:0 0 0 1px var(--ficha);
}
.cinta span{transform:skewX(12deg); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.cinta::after{
  content:""; position:absolute; left:0; bottom:-6px; width:6px; height:6px;
  background:var(--verde-scuro); clip-path:polygon(0 0,100% 0,0 100%);
}
.cinta--nuevo{background:var(--ottone-scuro)}
.cinta--nuevo::after{background:#4C3B18}

/* ======================= SEÑAL INDUSTRIAL ======================= */
.senal{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--cota); font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px 3px 8px;
  background:rgba(246,243,237,.94); color:var(--ottone-scuro);
  box-shadow:inset 3px 0 0 var(--ottone-scuro);
}
.senal--verde{color:var(--verde-scuro); box-shadow:inset 3px 0 0 var(--verde)}
.senal--flot{position:absolute; left:12px; top:8px; z-index:3}

/* ======================= FICHA DE PRODUCTO ======================= */
.reticula{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
@media (min-width:640px){ .reticula{grid-template-columns:repeat(3,1fr); gap:12px} }
@media (min-width:960px){ .reticula{grid-template-columns:repeat(4,1fr)} }
.reticula--3{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .reticula--3{grid-template-columns:repeat(3,1fr)} }

.ficha{
  background:var(--ficha); border:1px solid var(--linea); border-radius:8px;
  box-shadow:var(--s1); position:relative; display:flex; flex-direction:column;
}
.ficha:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(221,214,200,.9)}
.ficha__fig{
  position:relative; height:108px; background:var(--carta-2);
  border-radius:7px 7px 0 0; border-bottom:1px solid var(--linea);
  display:grid; place-items:center; color:var(--wengue);
}
.ficha__fig svg{width:82%; height:auto}
.ficha__fig::after{ /* sombra de contacto */
  content:""; position:absolute; left:20%; right:20%; bottom:8px; height:7px;
  background:radial-gradient(ellipse 60% 6px at 50% 100%, rgba(23,21,18,.20), transparent 70%);
}
@media (min-width:640px){ .ficha__fig{height:132px} }

.ficha__cuerpo{padding:24px 12px 12px; display:flex; flex-direction:column; flex:1}
.ficha h3{
  font-size:17px; font-weight:800; letter-spacing:.01em; line-height:1.15;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ficha h3 a{text-decoration:none}
.ficha__desc{margin:5px 0 0; font-size:13px; line-height:1.4; color:var(--tinta-2)}
.ficha__pie{margin-top:auto}

/* BANDA DE COTAS: lo que un carpintero busca de verdad */
.cotas{
  display:flex; align-items:center; gap:7px; height:24px; margin:10px 0 0;
  border-top:1px solid var(--linea); padding-top:2px;
  font-family:var(--cota); font-size:10.5px; color:var(--tinta-2); white-space:nowrap;
}
.cotas i{flex:1 1 auto; height:1px; background:var(--tinta-2); opacity:.45; position:relative; min-width:10px}
.cotas i::before{
  content:""; position:absolute; top:-3px; left:0;
  border:3.5px solid transparent; border-right-color:var(--tinta-2); border-left:0;
}
.cotas i:last-of-type::before{left:auto; right:0; border:3.5px solid transparent; border-left-color:var(--tinta-2); border-right:0}

/* ======================= 5. TEASER "SALE HOY" ======================= */
.teaser .ficha{min-height:0}

/* ======================= 6. BENEFICIOS ======================= */
.benef{display:grid; gap:10px; grid-auto-flow:column; grid-auto-columns:78%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:4px}
.benef > *{scroll-snap-align:start}
@media (min-width:720px){ .benef{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto; overflow:visible} }
.benef__it{display:flex; gap:12px; align-items:flex-start; padding:4px 2px}
.benef__cir{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  background:var(--verde); border:2px solid var(--ottone-chiaro);
  display:grid; place-items:center; color:var(--carta);
}
.benef__it h3{font-size:14px; color:var(--carta); margin-bottom:4px}
.benef__it p{margin:0; font-size:12.5px; line-height:1.4}

/* ======================= 7. CATEGORÍAS + MUESTRARIOS ======================= */
.cats{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
@media (min-width:720px){ .cats{grid-template-columns:repeat(4,1fr); gap:12px} }
.cat{
  position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
  text-decoration:none; display:block; box-shadow:var(--s1);
}
@media (min-width:720px){ .cat{aspect-ratio:3/4} }
.cat__num{
  position:absolute; right:8px; top:-6px; font-family:var(--titular); font-weight:900;
  font-size:64px; line-height:1; opacity:.18; color:var(--carta);
}
.cat--pino .cat__num, .cat--saqui .cat__num{color:var(--tinta); opacity:.20}
.cat__ico{position:absolute; left:12px; top:14px; width:52px; opacity:.5}
.cat--pino .cat__ico, .cat--saqui .cat__ico{color:var(--tinta)}
.cat--wengue .cat__ico, .cat--verde .cat__ico{color:var(--carta)}
.cat__base{
  position:absolute; left:0; right:0; bottom:0; min-height:40px; background:var(--carta);
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 10px;
  border-top:2px solid var(--ottone);
}
.cat__base b{font-family:var(--titular); font-weight:800; font-size:15px; text-transform:uppercase; line-height:1.05}
.cat__base small{display:block; font-family:var(--cota); font-size:9.5px; color:var(--tinta-2); letter-spacing:.02em; text-transform:none}

/* muestrarios: tira con scroll-snap */
.muestras{
  display:grid; grid-auto-flow:column; grid-auto-columns:260px; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:8px 0 12px; margin-top:20px;
}
.muestra{position:relative; height:160px; border-radius:8px; overflow:hidden; scroll-snap-align:start; box-shadow:var(--s1)}
.muestra .fibra{width:14px}
.etiqueta{
  position:absolute; right:14px; top:18px; transform:rotate(-3deg);
  background:var(--carta); border:1px solid var(--linea); border-radius:5px;
  padding:8px 12px 8px 22px; box-shadow:var(--s1); max-width:170px;
}
.etiqueta::before{ /* el agujero de la etiqueta de aserradero */
  content:""; position:absolute; left:8px; top:50%; margin-top:-4px; width:8px; height:8px;
  border-radius:50%; background:radial-gradient(circle at 40% 40%, #B8B0A0, #6B6458);
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.35);
}
.etiqueta::after{ /* el hilo */
  content:""; position:absolute; left:-14px; top:50%; width:16px; height:1px; background:var(--ottone-scuro); transform:rotate(8deg);
}
.etiqueta b{display:block; font-family:var(--titular); font-weight:800; font-size:14px; text-transform:uppercase; line-height:1.05}
.etiqueta small{display:block; font-family:var(--cota); font-size:10.5px; color:var(--tinta-2); margin-top:3px}

/* ======================= divisores de oficio ======================= */
/* CINTA MÉTRICA: mm cada 8px, cm cada 40px, numerales mono cada 80px */
.metrica{
  height:26px; position:relative; background:var(--carta-2);
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  background-image:
    repeating-linear-gradient(90deg, var(--tinta-2) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--ottone-scuro) 0 1px, transparent 1px 40px);
  background-size:100% 7px, 100% 13px;
  background-position:0 0, 0 0;
  background-repeat:repeat-x;
}
.metrica::after{
  content:"10   20   30   40   50   60   70   80   90  100  110  120  130  140  150";
  position:absolute; left:0; right:0; bottom:1px; overflow:hidden; white-space:pre;
  font-family:var(--cota); font-size:9px; color:var(--tinta-2); letter-spacing:3.2em; opacity:.75;
}
/* ASERRÍN: la transición de papel a banda verde */
.aserrin{
  height:18px; background:var(--carta);
  background-image:
    radial-gradient(2px 1px at 12% 60%, rgba(169,123,79,.55), transparent),
    radial-gradient(1.5px 1px at 28% 30%, rgba(217,190,147,.8), transparent),
    radial-gradient(2px 1.5px at 41% 70%, rgba(138,110,51,.45), transparent),
    radial-gradient(1px 1px at 55% 40%, rgba(169,123,79,.6), transparent),
    radial-gradient(2.5px 1px at 68% 65%, rgba(217,190,147,.7), transparent),
    radial-gradient(1.5px 1.5px at 79% 35%, rgba(138,110,51,.4), transparent),
    radial-gradient(2px 1px at 91% 62%, rgba(169,123,79,.5), transparent);
}

/* ======================= 8. LO MÁS PEDIDO ======================= */
.banda--carta2{background:var(--carta-2)}
.semana{
  display:inline-block; font-family:var(--cota); font-size:11px; font-weight:700;
  color:var(--carta); background:var(--verde-scuro); padding:4px 9px; border-radius:4px;
  letter-spacing:.06em; margin-left:8px; vertical-align:middle;
}
/* tarjeta héroe kraft: aquí vive el estallido #2 de 2 */
.kraft-card{
  position:relative; border-radius:10px; border:1px solid rgba(138,110,51,.35);
  box-shadow:var(--s2); padding:18px 16px 20px; margin-bottom:20px;
  display:grid; gap:16px;
}
@media (min-width:820px){ .kraft-card{grid-template-columns:40% 1fr; align-items:center; padding:24px} }
.kraft-card h3{font-size:clamp(1.4rem,5vw,2.1rem); color:var(--tinta); margin-bottom:4px}
.kraft-card__fig{position:relative; display:grid; place-items:center; color:var(--wengue); padding:8px 0}
.kraft-card__fig svg{width:min(240px,80%)}
.vinetas{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.vinetas li{display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--tinta)}
.check{
  flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--verde);
  display:grid; place-items:center; color:var(--carta); margin-top:1px;
}
.tip{
  margin:14px 0 0; background:var(--verde-tinta); border-left:4px solid var(--verde);
  padding:12px; border-radius:0 6px 6px 0;
}
.tip b{display:block; font-family:var(--titular); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-scuro); margin-bottom:3px}
.tip p{margin:0; font-size:13px; line-height:1.45; color:var(--tinta)}
.kraft-card__estallido{position:absolute; right:8px; top:-14px; z-index:6; filter:drop-shadow(0 2px 0 rgba(23,21,18,.18))}
@media (min-width:820px){ .kraft-card__estallido{right:18px; top:-18px} }

/* ficha "ver todas" */
.ficha--todas{
  background:var(--verde-scuro); border-color:var(--verde-scuro); color:var(--carta);
  text-decoration:none; display:grid; place-items:center; text-align:center; padding:18px 12px; min-height:150px;
}
.ficha--todas b{font-family:var(--titular); font-weight:900; font-size:18px; text-transform:uppercase; line-height:1.05; display:block}
.ficha--todas small{display:block; margin-top:6px; font-family:var(--cota); font-size:11px; color:var(--ottone-chiaro)}

/* ======================= 9. TALLER ======================= */
.serv{display:grid; gap:10px}
@media (min-width:720px){ .serv{grid-template-columns:repeat(3,1fr); gap:12px} }
.serv__it{
  background:rgba(246,243,237,.06); border:1px solid rgba(201,168,92,.35);
  border-radius:8px; padding:16px 14px;
}
.serv__it svg{color:var(--ottone-chiaro); width:44px; height:44px; margin-bottom:10px}
.serv__it h3{font-size:18px; color:var(--carta); margin-bottom:6px}
.serv__it p{margin:0 0 10px; font-size:13.5px}
.serv__it a{color:var(--ottone-chiaro); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:10px 0; min-height:44px}
.serv__nota{
  margin-top:16px; font-family:var(--cota); font-size:12px; color:var(--verde-claro);
  border-top:1px dashed rgba(201,168,92,.4); padding-top:12px;
}

/* ======================= 10. INSUMOS + COMPARATIVA ======================= */
.insumos{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
@media (min-width:560px){ .insumos{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .insumos{grid-template-columns:repeat(6,1fr)} }
.insumo{
  background:var(--ficha); border:1px solid var(--linea); border-radius:8px;
  min-height:96px; padding:10px; display:flex; gap:10px; align-items:center;
  text-decoration:none; position:relative; box-shadow:var(--s1);
}
.insumo svg{flex:0 0 40px; width:40px; color:var(--wengue)}
.insumo b{display:block; font-family:var(--titular); font-weight:800; font-size:13.5px; text-transform:uppercase; line-height:1.1}
.precio-etq{ /* etiqueta rectangular chica: aquí no hay cartelas, para no saturar */
  display:inline-block; margin-top:6px; background:var(--rosso); color:var(--carta);
  font-family:var(--titular); font-weight:900; font-size:13px; line-height:24px; height:24px;
  padding:0 8px; border-radius:3px; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1px var(--ficha), 3px 3px 0 var(--ottone);
}

.comp{display:grid; gap:10px; margin-top:24px}
@media (min-width:720px){ .comp{grid-template-columns:repeat(3,1fr); gap:12px} }
.comp__c{background:var(--ficha); border:1px solid var(--linea); border-radius:8px; padding:0 0 14px; overflow:hidden}
.comp__c > h3{padding:14px 14px 0; font-size:19px}
.comp__c--pvc{background:var(--verde-tinta); border-color:rgba(18,59,25,.28); border-top:4px solid var(--verde)}
.comp__etq{
  display:inline-block; margin:12px 14px 0; background:var(--verde); color:var(--carta);
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:3px;
}
.comp__l{list-style:none; margin:10px 0 0; padding:0 14px}
.comp__l li{
  display:flex; gap:8px; align-items:baseline; padding:7px 0; font-size:13px; line-height:1.4;
  border-bottom:1px solid var(--linea);
}
.comp__c--pvc .comp__l li{border-bottom-color:rgba(18,59,25,.15)}
.comp__l li:last-child{border-bottom:0}
.comp__l span{flex:0 0 16px; font-weight:900; font-size:14px}
.si{color:var(--verde)} .no{color:var(--rosso-scuro)}
.comp__c--pvc .si{color:var(--verde-scuro)}

/* ======================= 11. LISTA + PRESUPUESTO ======================= */
.grito{
  background:var(--rosso); color:var(--carta); padding:32px 16px; text-align:center;
  border-top:4px solid var(--rosso-scuro); border-bottom:4px solid var(--rosso-scuro);
}
.grito h2{font-size:clamp(1.8rem,7vw,3rem); margin-bottom:10px}
.grito p{max-width:56ch; margin:0 auto 18px; font-size:15px; color:#F4DAD8}
.grito .btn{background:var(--carta); color:var(--rosso-scuro); box-shadow:0 2px 0 rgba(23,21,18,.3)}
.grito .btn:hover{background:#fff}

.presup{background:var(--verde-tinta)}
.presup__grid{display:grid; gap:24px}
@media (min-width:900px){ .presup__grid{grid-template-columns:1.05fr .95fr; gap:32px; align-items:start} }
.campo{display:block; margin-bottom:12px}
.campo > span{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-2); margin-bottom:5px}
.campo input,.campo textarea,.campo select{
  width:100%; min-height:48px; background:var(--carta); border:1px solid var(--linea);
  border-bottom:2px solid var(--linea); border-radius:6px; padding:12px; font-size:15px;
}
.campo textarea{min-height:88px; resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-bottom-color:var(--ottone); outline-offset:1px}
/* error: nunca solo color, y nunca en --rosso (aquí el rosso significa dinero) */
.error{display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--rosso-scuro); margin-top:5px; font-weight:700}
.presup .btn--wa{width:100%; min-height:52px; margin-top:4px}

.albaran{ /* testimonio firmado como nota de despacho */
  background:var(--carta); border:1px solid var(--linea); border-radius:8px; padding:18px 16px;
  box-shadow:var(--s1); position:relative; margin-top:20px;
}
.albaran::before{
  content:"“"; position:absolute; right:14px; top:-14px;
  font-family:Georgia,"Times New Roman",serif; font-size:88px; line-height:1;
  color:var(--ottone); opacity:.45;
}
.albaran blockquote{margin:0; font-size:15px; line-height:1.5; color:var(--tinta); max-width:46ch}
.albaran figcaption{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--linea);
  font-family:var(--cota); font-size:11.5px; color:var(--tinta-2); letter-spacing:.02em;
}
.medidas-caja{
  background:var(--carta); border:1px solid var(--linea); border-radius:8px; padding:16px; box-shadow:var(--s1);
}
.medidas-caja h3{font-size:18px; margin-bottom:8px}
.medidas-caja p{margin:0 0 10px; font-size:13.5px; color:var(--tinta-2)}
.medidas-caja svg{width:100%; height:auto; color:var(--verde-scuro)}

/* ======================= PIE ======================= */
.pie{background:var(--verde-scuro); color:var(--carta)}
.pie__grid{display:grid; gap:24px; padding:28px 16px; max-width:var(--max); margin:0 auto}
@media (min-width:760px){ .pie__grid{grid-template-columns:1.2fr 1fr 1fr; gap:32px; padding:40px 16px} }
.pie h3{font-size:16px; color:var(--ottone-chiaro); margin-bottom:12px; letter-spacing:.04em}
.pie ul{list-style:none; margin:0; padding:0}
.pie ul a{display:block; padding:11px 0; min-height:44px; text-decoration:none; font-size:14px; color:var(--verde-claro)}
.pie ul a:hover{color:var(--carta); text-decoration:underline; text-underline-offset:3px}
.pie address{font-style:normal; font-size:14px; color:var(--verde-claro); line-height:1.6}
.pie__dato{font-family:var(--cota); font-size:12.5px; color:var(--ottone-chiaro)}

/* mini-mapa dibujado en CSS */
.mapa{
  position:relative; height:128px; border-radius:8px; margin-top:14px; overflow:hidden;
  border:1px solid rgba(201,168,92,.35);
  background:#0D2C13;
  background-image:
    repeating-linear-gradient(90deg, rgba(201,168,92,.20) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(201,168,92,.20) 0 2px, transparent 2px 28px),
    linear-gradient(122deg, transparent 0 46%, rgba(201,168,92,.42) 46% 50%, transparent 50%);
}
.mapa__pin{
  position:absolute; left:52%; top:44%; width:14px; height:14px; margin:-7px 0 0 -7px;
  background:var(--rosso); border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 0 0 2px var(--carta), 0 0 0 8px rgba(179,38,30,.28);
}
.mapa__etq{
  position:absolute; left:8px; bottom:8px; background:rgba(18,59,25,.92);
  font-family:var(--cota); font-size:10.5px; color:var(--carta); padding:4px 7px; border-radius:4px;
  border:1px solid rgba(201,168,92,.4);
}
.pie__eslogan{background:var(--verde); text-align:center; padding:26px 16px; position:relative; overflow:hidden}
.pie__eslogan h2{font-size:clamp(1.5rem,5vw,2.25rem); color:var(--carta); position:relative; z-index:1}
.pie__marca-agua{
  position:absolute; left:50%; top:50%; width:200px; height:230px; margin:-115px 0 0 -100px;
  background:var(--carta); opacity:.12; z-index:0;
  clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);
}
.legal{
  padding:14px 16px calc(16px + env(safe-area-inset-bottom)); font-size:11.5px; color:var(--verde-claro);
  max-width:var(--max); margin:0 auto; display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between;
}
.legal a{color:var(--verde-claro); padding:8px 0; display:inline-block}
.legal p{margin:0}
@media (max-width:400px){.legal{flex-direction:column; gap:2px}}

/* ======================= BARRA FLOTANTE MÓVIL ======================= */
.flot{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex;
  height:calc(60px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  box-shadow:var(--s3); border-top:2px solid var(--ottone);
}
.flot a{
  display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  font-family:var(--titular); font-weight:900; font-size:16px; text-transform:uppercase;
  letter-spacing:.04em; min-height:48px;
}
.flot__wa{flex:0 0 60%; background:var(--rosso); color:var(--carta)}
.flot__pre{flex:1 1 40%; background:var(--verde); color:var(--carta)}
@media (min-width:900px){
  .flot{display:none}
  body{padding-bottom:0}
  .nav-desk{display:flex; align-items:center; gap:2px}
  .menu{display:none}
}

/* ======================= movimiento ======================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
  .muestras,.benef{scroll-snap-type:none}
  .ficha:active,.btn:active,.cartela:active{transform:none}
}
@media print{ .flot,.cabecera{position:static} }

/* logo completo del pie: sobre verde oscuro el blanco del contorno lo despega */
/* El logo comparte contenedor y sangria con .pie__grid: sin esto arranca en el
   borde de la ventana y no alinea con la columna de "Donde estamos". */
.pie__marca{max-width:var(--max); margin:0 auto; padding:26px 16px 0}
.pie__marca svg{width:170px; height:auto; max-width:55%; display:block; margin:0 auto}
.pie__marca + .pie__grid{padding-top:18px}
@media(min-width:760px){
  .pie__marca{padding:36px 16px 0}
  .pie__marca svg{margin:0}
  .pie__marca + .pie__grid{padding-top:22px}
}