/* ===================================================================
   209 · Mundo Metal · Angol
   Demo comercial sin encargo. Construida el 02-09-2026.

   RUBRO LIBRE, verificado contra identidades.md Y contra la carpeta
   `demos\proyecto excel` (leccion de la 204 y la 208): no hay ningun
   PROVEEDOR DE MAQUINARIA DE CONSTRUCCION en las 208 previas. Angol
   tiene dos demos (automotriz-angola, vet-san-francisco) y ninguna de
   este rubro.
   Los dos parientes y sus deslindes:
   · 184-motosierras (Loncoche) VENDE Y REPARA maquinaria FORESTAL, y
     su pagina es de MANTENCION: «la cadena avisa».
   · 199-myd (Loncoche) ARRIENDA. La maquina no es del cliente y vuelve.
   Aca la maquina SE COMPRA y se queda: por eso la pieza firma no es
   como cuidarla ni como pedirla prestada, sino QUE PREGUNTAR ANTES DE
   PAGARLA.

   DIRECCION - «LA MAQUINA BARATA SALE CARA EL DIA QUE SE ROMPE»
   Y no por la maquina: por el repuesto. Una betonera parada en marzo
   que necesita una pieza que hay que traer de afuera deja la obra
   detenida. Ese es el punto que nadie mira antes de pagar, y es el que
   ordena la pagina entera.

   PALETA — acero y franja:
   acero `#EEEFEC` + panel `#E3E4E0` + panel-2 `#D9DAD5` +
   tinta `#1A1B18` (15,1:1) + medio `#55564F` (5,1:1 sobre el peor
   fondo, calibrado de entrada).
   ACENTO: **LA FRANJA DE ADVERTENCIA**. `#6E5100` para TEXTO (5,2:1
   sobre panel-2) y `#F2C000` para OBJETOS.
   **La diferencia con los otros amarillos del registro no es el tono:
   es la FORMA.** Aca el amarillo casi nunca es un relleno plano —
   aparece en RAYAS DIAGONALES a 45 grados, que es como se pinta en la
   realidad todo lo que se mueve o corta. Deslindes: el `#E9B21C` de la
   205 es PINTURA DE EJE en el pavimento y se usa como LINEA; el de la
   127 es AMARILLO DE MAQUINARIA como acento pleno; el de la 121 es un
   rotulo; el de la 158 es PASTEL de manta; la viruta de la 200 es
   METAL CALIENTE. Ninguno es un patron.
   Y el naranjo de la 184 (carcasa de plastico inyectado) queda
   PROHIBIDO aca a proposito: son los dos negocios de maquinaria del
   registro y no pueden compartir familia de color.

   TRIO — verificado contra identidades.md el 02-09-2026:
   · Display CABIN CONDENSED (0 usos). Condensada, sobria, de rotulo de
     galpon; aguanta titulares de tres lineas sin gritar.
   · Cuerpo COMMISSIONER (4 usos).
   · Mono M PLUS 1 CODE (5 usos).

   ESTRUCTURA: lista numerada 01-06 con UNO DESTACADO (el repuesto, que
   es la pregunta que ordena las otras cinco) + comparador de dos
   columnas. **El comparador se deslinda de los tres del registro: el
   de la 197 son DOS MATERIALES que el negocio hace por igual, el de la
   200 es HACER O COMPRAR una pieza, el de la 206 son DOS MANERAS DE
   COMPRAR el mismo mueble. Este es COMPRAR O ARRENDAR, y la columna de
   arrendar le dice al cliente que a veces NO le compre.**

   AMBIENTE: EL PATRON QUE CORRE (primero del registro). Las mismas
   rayas diagonales de la franja, al 4,5% de opacidad, avanzando en
   26 s. Es la identidad puesta a andar, y no hay ningun ambiente de
   PATRON CONTINUO en las 208 anteriores: todos los demas son objetos
   sueltos (gotas, hojas, granos, marcas) o un haz. Solo transform.

   REGLA DE DATOS: ni un precio y **ninguna marca de tercero**, ni para
   bien ni para mal. En maquinaria los precios cambian con el dolar, y
   nombrar marcas en una demo compromete al negocio con algo que no
   dijo. Verificado en el DOM.
   =================================================================== */

:root {
  --acero:   #EEEFEC;
  --panel:   #E3E4E0;
  --panel-2: #D9DAD5;   /* el peor fondo: todo se calibra contra este */
  --tinta:   #1A1B18;
  --medio:   #55564F;
  --franja:  #6E5100;   /* TEXTO */
  --franja-o:#F2C000;   /* OBJETOS: nunca texto */
  --borde:   #C4C5BE;

  --sale:   cubic-bezier(.16, 1, .3, 1);
  --sale-2: cubic-bezier(.2, 0, 0, 1);

  --ancho: min(92vw, 1160px);
  --p--1: clamp(.78rem, .74rem + .18vw, .88rem);
  --p-0:  clamp(1rem, .95rem + .25vw, 1.1rem);
  --p-1:  clamp(1.16rem, 1.04rem + .5vw, 1.4rem);
  --p-2:  clamp(1.6rem, 1.3rem + 1.3vw, 2.35rem);
  --p-3:  clamp(2rem, 1.5rem + 2.3vw, 3.4rem);
  --p-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.7rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--acero); color: var(--tinta);
  font-family: Commissioner, "Segoe UI", system-ui, sans-serif;
  font-size: var(--p-0); line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
.ancho { width: var(--ancho); margin-inline: auto; }

.rotulo {
  font-family: "M PLUS 1 Code", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--franja); margin: 0 0 1.4rem;
}
.h2 {
  font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: var(--p-3); line-height: 1.06; letter-spacing: -.005em; margin: 0 0 1.5rem;
}
.h2--chico { font-size: var(--p-2); }
.mini { font-size: var(--p--1); color: var(--medio); max-width: 72ch; }
.mini b { color: var(--tinta); }
.nota { font-size: var(--p--1); color: var(--medio); max-width: 76ch; margin-top: 2.4rem; }
.nota b { color: var(--tinta); }
.falta { color: var(--medio); font-style: italic; }
.ej { color: var(--medio); font-style: italic; border-bottom: 1px dashed var(--borde); }
.ej::after {
  content: " (ej.)"; font-family: "M PLUS 1 Code", ui-monospace, monospace;
  font-size: .8em; font-style: normal; opacity: .85;
}

/* -- BANDA DE PROPUESTA ------------------------------------------ */
/* La banda lleva la franja de verdad: rayas diagonales en el borde. */
.propuesta { background: var(--tinta); color: var(--acero); position: relative; }
.propuesta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(45deg,
    var(--franja-o) 0 10px, var(--tinta) 10px 20px);
}
.propuesta__in { padding: .9rem 0 1.1rem; }
.propuesta__q { font-family: "M PLUS 1 Code", ui-monospace, monospace; font-size: var(--p--1); letter-spacing: .03em; margin: 0 0 .2rem; color: var(--franja-o); }
.propuesta__d { margin: 0; font-size: var(--p--1); line-height: 1.5; max-width: 100ch; }

/* -- CABECERA ---------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 50;
  background: var(--acero); border-bottom: 1px solid var(--borde);
  transition: transform .3s var(--sale-2), background-color .3s ease, border-color .3s ease;
}
.cab__in { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .55rem 0; }
.cab__marca { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; min-height: 44px; }
.cab__txt {
  font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: var(--p-1); line-height: 1.06; display: flex; flex-direction: column; gap: .2rem;
}
.cab__sub {
  font-family: "M PLUS 1 Code", ui-monospace, monospace; font-weight: 400;
  font-size: .5em; letter-spacing: .06em; color: var(--medio); text-transform: uppercase;
}
.cab__nav { display: flex; align-items: center; gap: 1.5rem; }
.cab__nav a {
  font-size: var(--p--1); text-decoration: none; color: var(--medio);
  min-height: 44px; display: inline-flex; align-items: center; transition: color .2s ease;
}
.cab__nav a:hover, .cab__nav a:focus-visible { color: var(--tinta); }
.cab__tel { color: var(--franja) !important; font-family: "M PLUS 1 Code", ui-monospace, monospace; white-space: nowrap; }

/* Cabecera 175a - LA FRANJA DE ADVERTENCIA: el rectangulo con las rayas
   diagonales que se pintan en todo lo que se mueve o corta. Ninguna
   demo del registro tiene un PATRON de rayas como objeto. */
.franja {
  width: 30px; height: 22px; flex: 0 0 auto; border-radius: 2px;
  border: 1.5px solid var(--tinta);
  background: repeating-linear-gradient(45deg,
    var(--franja-o) 0 6px, var(--tinta) 6px 12px);
}

.js .cab--top { background: transparent; border-bottom-color: transparent; }
.js .cab--oculta { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .cab { transition-duration: 1ms; } }

/* -- PORTADA ----------------------------------------------------- */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 88svh; display: flex; align-items: center; padding: 5rem 0 4rem;
}
.portada__foto { position: absolute; inset: 0; z-index: -3; }
.portada__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.28) 41%, rgba(0,0,0,.76) 62%, #000 80%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.28) 41%, rgba(0,0,0,.76) 62%, #000 80%, #000 100%);
}
/* Velo entero en rgba terminando en alfa 0. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(238,239,236,1) 0%, rgba(238,239,236,1) 37%, rgba(238,239,236,.92) 52%,
    rgba(238,239,236,.52) 69%, rgba(238,239,236,.16) 86%, rgba(238,239,236,0) 97%);
}
.portada__in { position: relative; z-index: 1; }
.portada__h1 {
  font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: var(--p-4); line-height: 1.02; letter-spacing: -.015em; margin: 0 0 1.3rem;
}
.portada__bajada { max-width: 45ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 2.4rem; }
.portada__bajada b { color: var(--tinta); }
.portada__pie { margin: 0; }

/* -- AMBIENTE: EL PATRON QUE CORRE ------------------------------- */
/* Las mismas rayas de la franja, muy tenues, avanzando en 26 s. Es la
   identidad puesta a andar, y no hay ningun ambiente de PATRON CONTINUO
   en las 208 anteriores: todos los demas son objetos sueltos (gotas,
   hojas, granos, marcas) o un haz. Solo transform, sin JS.
   El desplazamiento es de 68 px, que es el periodo de la trama medido
   en horizontal (48 px de trama x raiz de 2): asi el bucle no salta. */
.amb { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.amb--franja::before {
  content: ""; position: absolute; top: -30%; left: -30%; width: 170%; height: 170%;
  background: repeating-linear-gradient(45deg,
    rgba(242, 192, 0, .045) 0 10px, rgba(242, 192, 0, 0) 10px 48px);   /* a .10 y 14px la trama competia con el titular */
  animation: amb-corre 26s linear infinite;
  will-change: transform;
}
@keyframes amb-corre {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(68px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .amb { display: none; } }

/* -- BOTONES ----------------------------------------------------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.8rem;
  border: 1px solid var(--franja); color: var(--franja); background: transparent;
  font-family: "M PLUS 1 Code", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; overflow: hidden; isolation: isolate;
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--franja); transform: translateY(101%); transition: transform .4s var(--sale);
}
.boton:hover, .boton:focus-visible { color: var(--acero); }
.boton:hover::before, .boton:focus-visible::before { transform: translateY(0); }
.boton--fuerte { background: var(--franja); color: var(--acero); }
.boton--fuerte::before { background: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .boton::before { transition-duration: 1ms; } }

.flecha {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-family: "M PLUS 1 Code", ui-monospace, monospace; font-size: var(--p--1); letter-spacing: .05em;
  color: var(--franja); text-decoration: none; border-bottom: 1px solid currentColor;
  transition: border-bottom-width .2s ease;
}
.flecha:hover, .flecha:focus-visible { border-bottom-width: 3px; }

/* -- PIEZA FIRMA: LAS SEIS PREGUNTAS ----------------------------- */
.repuesto { padding: 7rem 0; background: var(--panel); }
.repuesto .intro, .comprar .intro { max-width: 66ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 3rem; }
.repuesto .intro b, .comprar .intro b { color: var(--tinta); }

.preg { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.pr {
  display: grid; grid-template-columns: 4rem 1fr; gap: 1.4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--borde);
}
.pr__n { font-family: "M PLUS 1 Code", ui-monospace, monospace; font-size: var(--p-1); color: var(--franja); line-height: 1.3; }
.pr h3 { font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: var(--p-1); margin: 0 0 .5rem; line-height: 1.14; }
.pr p { margin: 0; color: var(--medio); font-size: var(--p--1); line-height: 1.68; max-width: 78ch; }
.pr p b { color: var(--tinta); }
/* La pregunta que ordena las otras cinco lleva la franja de verdad. */
.pr.destacado { background: var(--acero); padding-inline: 1.2rem; position: relative; }
.pr.destacado::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: repeating-linear-gradient(45deg,
    var(--franja-o) 0 7px, var(--tinta) 7px 14px);
}

/* -- CITA -------------------------------------------------------- */
.cita { position: relative; isolation: isolate; overflow: hidden; min-height: min(48vh, 370px); display: grid; align-items: center; }
.cita img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Peor caso medido a mano: las chispas de la soldadura bajo el velo .84
   sobre tinta dejan el texto acero en 11:1. El auditor marca 1,00:1
   porque no ve el ::after y trepa al body — falso positivo conocido. */
.cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(26,27,24,.84); }
.cita__txt p {
  font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: var(--p-2); line-height: 1.14; max-width: 28ch; margin: 0; color: var(--acero);
}

/* -- COMPRAR O ARRENDAR ------------------------------------------ */
.comprar { padding: 7rem 0; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.col { padding: 1.7rem 1.8rem 2rem; background: var(--panel); border-top: 3px solid var(--borde); }
.col--si { border-top-color: var(--franja-o); }
.col__t {
  font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: var(--p-1); margin: 0 0 1.2rem; line-height: 1.15;
}
.col--si .col__t { color: var(--franja); }
.col--no .col__t { color: var(--medio); }
.col__l { margin: 0; padding: 0; list-style: none; }
.col__l li {
  padding: .85rem 0; border-bottom: 1px solid var(--borde);
  font-size: var(--p--1); color: var(--medio); line-height: 1.66;
}
.col__l li:last-child { border-bottom: none; }
.col__l li b { color: var(--tinta); }

/* -- TAJO -------------------------------------------------------- */
.tajo { position: relative; isolation: isolate; overflow: hidden; margin: 0; min-height: min(52vh, 400px); display: flex; align-items: flex-end; }
.tajo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tajo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(26,27,24,.95) 0%, rgba(26,27,24,.8) 34%, rgba(26,27,24,.3) 64%, rgba(26,27,24,0) 92%);
}
.tajo__txt { padding: 2.8rem 0; }
.tajo__txt .rotulo { color: var(--franja-o); }
.tajo__f { font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: var(--p-2); margin: 0; line-height: 1.14; max-width: 28ch; color: var(--acero); }

/* -- MITADES ----------------------------------------------------- */
.mitades { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mitades__txt { padding: 5.5rem clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.mitades__txt p { color: var(--medio); }
.mitades__txt p b { color: var(--tinta); }
.lista { margin: 1.3rem 0; padding: 0; list-style: none; }
.lista li { padding: .6rem 0 .6rem 1.5rem; position: relative; border-bottom: 1px solid var(--borde); font-size: var(--p--1); color: var(--medio); }
.lista li b { color: var(--tinta); }
.lista li::before {
  content: ""; position: absolute; left: 0; top: 1em; width: 10px; height: 4px;
  background: repeating-linear-gradient(45deg, var(--franja-o) 0 3px, var(--tinta) 3px 6px);
}
.lista--marca li { border-bottom: none; padding-bottom: .3rem; }

/* -- MOSAICO ----------------------------------------------------- */
.mos { padding: 7rem 0 0; background: var(--panel-2); }
.mos__grilla { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
.mos__p { margin: 0; overflow: hidden; }
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
.mos__p img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--sale); }
.mos__p:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .mos__p:hover img { transform: none; } }

/* -- CONTACTO ---------------------------------------------------- */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: .13;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
.contacto { padding: 7rem 0; }
.contacto__num { margin: 0 0 1rem; }
.contacto__num a {
  font-family: "Cabin Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 3.4vw, 3.8rem); line-height: 1.05; color: var(--franja);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 3px solid transparent; transition: border-color .25s ease;
}
.contacto__num a:hover, .contacto__num a:focus-visible { border-bottom-color: var(--franja); }
.contacto__nota { color: var(--medio); font-size: var(--p--1); margin: 0 0 2.4rem; max-width: 58ch; }
.contacto__nota b { color: var(--tinta); }

.datos { margin: 0 0 2rem; max-width: 48rem; }
.datos > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--borde); }
.datos dt { font-family: "M PLUS 1 Code", ui-monospace, monospace; font-size: var(--p--1); color: var(--medio); letter-spacing: .05em; text-transform: uppercase; }
.datos dd { margin: 0; text-align: right; font-size: var(--p--1); }

/* -- PARA EL DUENO ----------------------------------------------- */
.dueno { padding: 7rem 0; border-top: 1px solid var(--borde); background: var(--panel-2); }
.dueno__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.dueno h3 {
  font-family: "M PLUS 1 Code", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .09em; text-transform: uppercase;
  color: var(--franja); margin: 2rem 0 1rem;
}
.dueno p { color: var(--medio); max-width: 62ch; }
.dueno p b { color: var(--tinta); }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin-top: 3rem; }

.pie { padding: 3rem 0; border-top: 1px solid var(--borde); }
.pie__in p { font-size: var(--p--1); color: var(--medio); margin: 0 0 .8rem; }
.pie__in p b { color: var(--tinta); }
.pie__leg { opacity: .95; }

/* -- REVEALS ----------------------------------------------------- */
.js [data-rev-grupo] > * { opacity: 0; transform: translateY(22px); }
.js [data-rev-grupo].ok > * {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .55s var(--sale);
  transition-delay: calc(var(--r, 0) * 55ms);
}
[data-rev-grupo] > :nth-child(1){--r:0} [data-rev-grupo] > :nth-child(2){--r:1}
[data-rev-grupo] > :nth-child(3){--r:2} [data-rev-grupo] > :nth-child(4){--r:3}
[data-rev-grupo] > :nth-child(5){--r:4} [data-rev-grupo] > :nth-child(6){--r:5}
@media (prefers-reduced-motion: reduce) {
  .js [data-rev-grupo] > * { opacity: 1; transform: none; transition: none; }
}
:focus-visible { outline: 2px solid var(--franja); outline-offset: 3px; }

/* -- MOVIL ------------------------------------------------------- */
@media (max-width: 980px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto img { aspect-ratio: 16 / 10; height: auto; }
  .dueno__cols { grid-template-columns: 1fr; gap: 1rem; }
  .dos { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cab__nav a:not(.cab__tel) { display: none; }
  .portada { min-height: auto; padding: 3.5rem 0 3rem; }
  /* En telefono el texto cae ENCIMA de la foto: la mascara lateral no
     sirve a 375 px, asi que el velo se da vuelta y baja. */
  .portada__foto img {
    object-position: 60% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg,
      rgba(238,239,236,.84) 0%, rgba(238,239,236,.78) 34%, rgba(238,239,236,.9) 64%, rgba(238,239,236,.98) 100%);
  }
  .pr { grid-template-columns: 2.8rem 1fr; gap: 1rem; }
  .pr.destacado { padding-inline: 1rem; }
  .repuesto, .comprar, .contacto, .dueno { padding: 4.5rem 0; }
  .mos { padding-top: 4.5rem; }
  .mos__grilla { grid-template-columns: repeat(2, 1fr); }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 480px) {
  .cab__sub { font-size: .46em; }
}
@media (max-width: 460px) {
  .datos > div { flex-direction: column; gap: .2rem; }
  .datos dd { text-align: left; }
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }
/* ── BOTON FLOTANTE DE CONTACTO ─────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Los colores de
   marca van a proposito: se reconocen sin leerlos, y eso es lo que hace
   que se toquen. Se ve SIEMPRE por defecto; el JS solo lo aparta sobre
   la portada. Al reves, un fallo del script se llevaria el CTA principal. */
.flota {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--cuerpo, system-ui, sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .16);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.flota--wa { background: #25D366; color: #07310F; }
.flota--ig { background: linear-gradient(120deg, #F9CE34 4%, #EE2A7B 48%, #6228D7 96%); color: #FFFFFF; }
.flota__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.flota:hover, .flota:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .flota--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .flota { width: 56px; padding: 0; justify-content: center; }
  .flota__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .flota { transition: opacity .28s ease; }
  .flota:hover, .flota:focus-visible { transform: none; }
  .js .flota--arriba { transform: none; }
}