/* =========================================================
   MasterSuspension v3 · ronda 3 · «El taller, de día»
   Blanco, gris acero y el naranja de la marca en las piezas y en lo que se toca.
   ========================================================= */

/* Tipografía: Barlow (Jeremy Tribby, OFL; licencia en assets/fonts/Barlow-OFL.txt).
   Grotesca de ancho normal con aire de cartelería vial: firme, clara, nada rara. Subconjunto latino. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-500-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin.woff2) format("woff2"); }

:root {
  --bg: #FFFFFF;          /* fondo */
  --bg-2: #F3F4F6;        /* bandas y paneles (gris frío, nada de crema) */
  --bg-3: #E9EBEE;        /* hover, piso */
  --fg: #121417;          /* texto */
  --fg-2: #5A5F68;        /* texto secundario (6,4:1 sobre blanco) */
  --line: #DFE2E6;
  --line-2: #ECEEF1;
  --orange: #EA580C;      /* marca: piezas, estrellas, subrayados, texto grande */
  --orange-ink: #C2410C;  /* botones y texto naranja chico (5,2:1 con blanco) */
  --orange-ink-hi: #9A3412;
  --orange-tint: #FFF1E8;
  --green: #15803D;

  --f-sans: "Barlow", system-ui, sans-serif;

  --gut: clamp(16px, 4vw, 56px);
  --max: 1328px;
  --col-gap: 24px;
  --sec: clamp(72px, 9vw, 128px);
  --r: 8px;               /* botones */
  --r-card: 14px;         /* tarjetas y paneles */
  --shadow: 0 1px 2px rgba(18, 20, 23, .05), 0 8px 24px rgba(18, 20, 23, .07);
  --ease: cubic-bezier(.25, 1, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; color-scheme: light; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* números tabulares solo donde se alinean o cambian (estado, datos, horario, odómetro); en el texto, proporcionales */
.status, .need__k, .years__num, .hours td, .reviews__pos, .call__digits, .foot__base { font-variant-numeric: tabular-nums; }
::selection { background: var(--orange); color: #fff; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 8px; top: -60px; background: var(--fg); color: #fff; font-weight: 600; padding: 10px 14px; border-radius: var(--r); z-index: 50; }
.skip:focus { top: 8px; }

.ico { width: 22px; height: 22px; flex: none; }
.ico--s { width: 17px; height: 17px; }

/* ---------- estado en vivo ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--fg-2); }
.status b { font-weight: 600; color: var(--fg); }
.status__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(21, 128, 61, .16); flex: none; }

/* ---------- botones ----------
   Tres piezas, siempre iguales: el primario naranja (solo WhatsApp), el redondo con filete para
   acciones chicas (carrusel, flecha de cada fila) y el fantasma con filete para acciones secundarias.
   Todos se hunden 1 px al apretar. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: var(--r); font-weight: 600; font-size: 16.5px; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn--wa { background: var(--orange-ink); color: #fff; }
.btn--wa:hover { background: var(--orange-ink-hi); }
.btn--ghost { min-height: 40px; padding: 0 14px; font-size: 15px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--ghost .ico { width: 18px; height: 18px; color: var(--fg-2); }
.btn--ghost.is-done { border-color: var(--green); color: var(--green); }
.btn--ghost.is-done .ico { color: var(--green); }
.ibtn {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 50%; color: var(--fg); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
.ibtn svg { width: 20px; height: 20px; }
.ibtn:hover { background: var(--fg); border-color: var(--fg); color: #fff; }
.ibtn:active { transform: translateY(1px); }

/* ---------- links de acción: negros, subrayados finos; naranja solo al pasar el mouse ---------- */
.lnk { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--line); transition: color .2s, text-decoration-color .2s; }
.lnk:hover { color: var(--orange-ink); text-decoration-color: currentColor; }
.lnk .ico--s { color: var(--fg-2); transition: color .2s, transform .25s var(--ease); }
.lnk:hover .ico--s { color: inherit; transform: translate(1px, -1px); }

/* =========================================================
   ENCABEZADO
   ========================================================= */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand__name { font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.top__nav { display: flex; gap: 28px; }
.top__nav a { text-decoration: none; font-size: 16px; font-weight: 500; color: var(--fg-2); transition: color .2s; }
.top__nav a:hover { color: var(--fg); }
.top .status { padding-left: 24px; border-left: 1px solid var(--line); height: 28px; }

/* =========================================================
   1 · MOSTRADOR (hero + «¿Qué necesitás?»)
   ========================================================= */
.hero { padding-top: clamp(32px, 5vw, 72px); overflow-x: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  grid-template-areas:
    "say say say say say say desk desk desk desk desk desk"
    "road road road road road road desk desk desk desk desk desk";
  grid-template-rows: auto 1fr;
}
.hero__say { grid-area: say; padding-top: 8px; }
.display {
  font-weight: 700;
  font-size: clamp(46px, 6vw, 86px);
  line-height: 1; letter-spacing: -.025em;
  text-wrap: balance;
}
.hero__sub { margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; color: var(--fg-2); }

/* el mostrador */
.desk { grid-area: desk; align-self: start; }
.desk__q { font-weight: 600; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.01em; padding-bottom: 12px; }
.desk__list { border-top: 1px solid var(--line); }
.desk__list li { border-bottom: 1px solid var(--line); }
.need {
  display: grid; align-items: center;
  grid-template-columns: 112px minmax(0, 1fr) auto 44px;
  column-gap: 20px;
  margin: 6px -12px; padding: 9px 12px;
  border-radius: var(--r-card);
  text-decoration: none;
  transition: background-color .2s;
}
.need:hover, .need:focus-visible { background: var(--bg-2); }
.need:focus-visible { outline-offset: 0; }
.need:active { background: var(--bg-3); }
/* la flecha es un botón redondo: al pasar el mouse se llena de naranja (abre WhatsApp) */
.need__go { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); background: var(--bg); transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease); }
.need__go { padding: 11px; }
.need:hover .need__go, .need:focus-visible .need__go { background: var(--orange-ink); border-color: var(--orange-ink); color: #fff; transform: translateX(3px); }
.need__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.need__t { font-weight: 600; font-size: clamp(22px, 2vw, 27px); line-height: 1.1; letter-spacing: -.01em; }
.need__d { font-size: 16px; line-height: 1.4; color: var(--fg-2); max-width: 36ch; }
.need__dato { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 112px; }
.need__k { font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -.015em; white-space: nowrap; }
.need__l { font-size: 14px; line-height: 1.3; color: var(--fg-2); margin-top: 2px; }
.need__dato--word .need__k { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.desk__note { margin-top: 16px; font-size: 15px; color: var(--fg-2); display: flex; gap: 8px; align-items: center; }

/* la pieza: póster quieto y, encima, la secuencia renderizada (site.js la reproduce) */
.need__fig { position: relative; width: 112px; height: 90px; }
.need__poster, .need__seq { position: absolute; inset: 0; width: 100%; height: 100%; }
.need__poster { object-fit: contain; }
.need__seq { background-repeat: no-repeat; background-position: 0 0; opacity: 0; }
.need__fig.is-seq .need__seq { opacity: 1; }
.need__fig.is-seq .need__poster { opacity: 0; }

/* la avenida: la camioneta (render) llega rodando y estaciona debajo del titular, sobre el piso del taller,
   que cruza toda la pantalla debajo de las dos columnas. En desktop no cruza la lista: queda en su columna.
   Apilado (tablet y mobile) sale rodando con el scroll. */
.road { grid-area: road; align-self: end; position: relative; margin-top: clamp(28px, 3vw, 44px); isolation: isolate; }
/* la caja de .car termina en la línea de piso (--gy): debajo solo asoma la sombra, sobre el piso */
.car { position: relative; z-index: 1; width: min(100%, 700px); aspect-ratio: var(--cw) / var(--gy); will-change: transform; }
.car__body { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--ch) / var(--gy) * 100%); transform-origin: 50% 80%; }
.car__body img { width: 100%; height: 100%; }
.car__wheel { position: absolute; z-index: 1; width: calc(var(--ws) / var(--cw) * 100%); aspect-ratio: 1; top: calc((var(--wy) - var(--ws) / 2) / var(--gy) * 100%); margin-left: calc(var(--ws) / -2 / var(--cw) * 100%); }
.car__wheel--r { left: calc(var(--wx1) / var(--cw) * 100%); }
.car__wheel--f { left: calc(var(--wx2) / var(--cw) * 100%); }
.car__wheel img { width: 100%; height: 100%; }
/* luces de freno: un resplandor rojo sobre la óptica trasera del render (px 106, 385 de 1800×720), que se
   prende al frenar y se apaga al quedar estacionada */
.car__brake {
  position: absolute; left: calc(106 / 1800 * 100%); top: calc(385 / 720 * 100%);
  width: calc(96 / 1800 * 100%); height: calc(200 / 720 * 100%); transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 64, 40, 1) 0, rgba(255, 64, 40, .55) 34%, rgba(255, 64, 40, 0) 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .5s var(--ease);
}
.car.is-lit .car__brake { opacity: 1; transition-duration: .12s; }
/* el piso del taller: la franja del gris del estudio (el mismo de «Cómo trabajamos»), a todo lo ancho */
.hero__floor { background: var(--bg-2); border-top: 1px solid var(--line); }
.floor__in { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding-block: 18px 20px; font-size: 15px; font-weight: 500; color: var(--fg-2); }
.floor__in span { display: inline-flex; gap: 6px; align-items: center; }

/* =========================================================
   2 · LOS DUEÑOS
   ========================================================= */
.owners { padding-top: var(--sec); }
.owners__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; align-items: end; }

.years { grid-column: 1 / span 5; }
.years__n { display: flex; align-items: baseline; gap: 14px; }
.years__num { font-weight: 700; font-size: clamp(120px, 15vw, 220px); line-height: .8; letter-spacing: -.045em; }
.years__u { font-weight: 700; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; letter-spacing: -.02em; color: var(--orange); }
.years__since { margin-top: 22px; font-size: 19px; line-height: 1.4; font-weight: 500; color: var(--fg-2); }
.years__since::first-line { color: var(--fg); font-weight: 600; }

.owners__say { grid-column: 6 / span 7; padding-bottom: 6px; }
.owners__q { font-weight: 600; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -.018em; text-wrap: balance; }
.owners__p { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--fg-2); max-width: 52ch; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .years.is-armed .years__n { opacity: 0; transform: translateY(14px); }
  .years.is-in .years__n { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .8s var(--ease); }
}

/* odómetro: los dígitos usan la tipografía del número grande */
.years .ms-odo { font-family: inherit; line-height: inherit; }
.years .ms-odo-d, .years .ms-odo-col > span { height: .86em; line-height: .86em; }
.years .ms-odo-d {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* ---------- reseñas: carrusel de a 3 (2 en tablet, 1 en mobile) ---------- */
.reviews { margin-top: clamp(56px, 7vw, 96px); --per: 3; --gap: var(--col-gap); }
.reviews__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.reviews__k { font-size: 16px; font-weight: 600; white-space: nowrap; }
.reviews__k b { color: var(--fg-2); font-weight: 500; margin-left: 8px; }
.reviews__ctl { display: none; gap: 8px; }
.rbtn[hidden] { display: none; }
.rbtn--prev svg { transform: scaleX(-1); }
.rbtn__play { display: none; }
.reviews.is-paused-user .rbtn__pause { display: none; }
.reviews.is-paused-user .rbtn__play { display: block; }

/* la línea de arriba es el reloj: se llena de naranja hasta el próximo pase */
.reviews__time { height: 2px; background: var(--line-2); border-radius: 2px; position: relative; overflow: hidden; }
.reviews__time i { position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.reviews__vp { padding-top: 20px; }
.reviews__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

.rev {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-2); border-radius: var(--r-card);
  padding: 26px 26px 24px;
}
.rev__stars { color: var(--orange); letter-spacing: .14em; font-size: 16px; line-height: 1; }
.rev blockquote p { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.45; text-wrap: pretty; }
.rev mark { color: inherit; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 3px no-repeat; padding-bottom: 2px; }
.rev__who { font-size: 15px; font-weight: 600; margin-top: auto; padding-top: 6px; }
.rev__who span { color: var(--fg-2); font-weight: 400; }
.more { margin-top: 24px; font-size: 16px; }

/* con JS: una fila que se desliza */
.reviews.is-carousel .reviews__ctl { display: flex; }
.reviews.is-carousel .reviews__vp { overflow: hidden; margin: -2px; padding: 22px 2px 2px; touch-action: pan-y; }
.reviews.is-carousel .reviews__track { display: flex; gap: var(--gap); }
.reviews.is-carousel .rev { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); }
.reviews.is-carousel .rev[hidden] { display: none; }
.reviews.is-carousel .rev.is-moving { will-change: transform; }
.reviews.is-run .reviews__time i { animation: rev-time var(--dwell, 7s) linear both; }
.reviews.is-paused .reviews__time i { animation-play-state: paused; }
@keyframes rev-time { to { transform: scaleX(1); } }
/* las tarjetas que llegan muestran su texto de abajo hacia arriba mientras se deslizan */
.rev__stars, .rev blockquote, .rev__who { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.rev blockquote { transition-delay: 70ms; }
.rev__who { transition-delay: 140ms; }
.rev.is-arriving .rev__stars, .rev.is-arriving blockquote, .rev.is-arriving .rev__who { opacity: 0; transform: translateY(10px); transition: none; }

/* =========================================================
   3 · CÓMO TRABAJAMOS → assets/despiece.css (dueño: agente 3D)
   ========================================================= */
.h2 { font-weight: 700; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.022em; text-wrap: balance; }

/* =========================================================
   4 · CONTACTO
   ========================================================= */
.call { padding-block: var(--sec); }
.call__promise {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2); border-radius: var(--r-card);
  padding: 20px 24px; margin-bottom: clamp(44px, 6vw, 80px);
  font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; letter-spacing: -.01em;
}
.call__promise .ico { width: 30px; height: 30px; color: var(--orange-ink); }
.call__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; align-items: start; }
.call__main { grid-column: 1 / span 6; padding-top: 8px; }
.call__h { font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.025em; }
.call__sla { margin-top: 14px; font-size: 19px; color: var(--fg-2); }
.call__num { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; margin-top: clamp(28px, 3.4vw, 44px); }
.call__lab { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--orange-ink); }
.call__digits {
  font-weight: 700; font-size: clamp(52px, 7vw, 104px); line-height: .95; letter-spacing: -.03em; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .14em; text-decoration-color: var(--line);
  transition: color .2s, text-decoration-color .2s;
}
.call__num:hover .call__digits { color: var(--orange-ink); text-decoration-color: currentColor; }
/* debajo del número: copiarlo (para marcarlo desde otro teléfono) y el mail */
.call__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.call__mail { font-size: 17px; font-weight: 500; }

.call__side { grid-column: 7 / span 6; }
.map { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.call__info { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; margin-top: 24px; }
.call__k { font-size: 15px; font-weight: 600; color: var(--fg-2); margin-bottom: 8px; }
.call__v { font-size: 17px; line-height: 1.4; font-weight: 500; }
.call__link { margin-top: 8px; font-size: 16px; }
.hours { border-collapse: collapse; width: 100%; font-size: 16px; }
.hours th { text-align: left; font-weight: 400; padding: 4px 0; color: var(--fg-2); }
.hours td { text-align: right; padding: 4px 0; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 600; color: var(--fg); }
/* la fila de hoy lo dice, además de ir en negrita */
.hours tr.is-today th::after { content: "hoy"; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--orange-ink); }
.status--pill { margin-top: 12px; background: var(--bg-2); padding: 7px 12px; border-radius: 999px; font-size: 14.5px; }

/* =========================================================
   PIE
   ========================================================= */
.foot { background: var(--bg-2); padding-block: 48px 32px; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 2fr .9fr; gap: 32px; align-items: start; }
.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand p { font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.foot__brand b { color: var(--fg); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.foot__k { font-size: 14px; font-weight: 600; color: var(--fg-2); margin-bottom: 12px; }
.foot__today .status { white-space: normal; align-items: flex-start; }
.foot__today .status__dot { margin-top: .3em; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--fg-2); }
.foot__base a { color: var(--fg); text-underline-offset: 3px; white-space: nowrap; }
.brands { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); flex-wrap: wrap; }
.brands img { height: 26px; width: auto; transition: filter .25s, opacity .25s; }
/* en gris para no competir; en color al pasar el mouse */
.brands .b-expoyer { height: 22px; filter: grayscale(1) brightness(.2); opacity: .8; }
.brands .b-liqui { height: 34px; filter: grayscale(1); opacity: .8; }
.brands .b-bardahl { height: 36px; filter: grayscale(1) contrast(1.6); mix-blend-mode: multiply; opacity: .85; }
.brands .b-moura { height: 24px; filter: grayscale(1) brightness(.3); opacity: .8; }
.brands img:hover { filter: none; opacity: 1; }

/* ---------- barra fija mobile ---------- */
.dock { display: none; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {
  .top__nav { display: none; }
  .hero__grid {
    grid-template-areas:
      "say say say say say say say say say say say say"
      "desk desk desk desk desk desk desk desk desk desk desk desk"
      "road road road road road road road road road road road road";
    grid-template-rows: auto;
  }
  .desk { margin-top: 36px; }
  .car { width: min(70%, 600px); }
  .years { grid-column: 1 / -1; }
  .owners__say { grid-column: 1 / -1; }
  .reviews { --per: 2; }
  .reviews__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call__main, .call__side { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brands { grid-column: 1 / -1; grid-row: 2; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .top { position: static; }
  .top__in { height: 62px; gap: 12px; }
  .brand img { width: 30px; height: 30px; }
  .brand__name { font-size: 19px; }
  .top .status { border-left: 0; padding-left: 0; font-size: 14px; height: auto; }
  .top .status span:last-child { display: none; }
  .top .status::after { content: attr(data-short); font-weight: 600; color: var(--fg); }
  .top__cta { display: none; }

  .hero { padding-top: 24px; }
  .display { font-size: clamp(40px, 11.4vw, 54px); line-height: 1.02; }
  .hero__sub { font-size: 20px; margin-top: 12px; }
  .desk { margin-top: 28px; }
  .desk__q { font-size: 22px; padding-bottom: 8px; }
  .need { grid-template-columns: 76px minmax(0, 1fr) 36px; column-gap: 14px; margin: 4px -8px; padding: 8px; align-items: start; }
  .need__fig { width: 76px; height: 61px; }
  .need__txt { gap: 3px; }
  .need__t { font-size: 21px; }
  .need__d { font-size: 15px; line-height: 1.35; }
  .need__dato { grid-column: 2; grid-row: 2; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; margin-top: 8px; text-align: left; }
  .need__k, .need__dato--word .need__k { font-size: 14px; font-weight: 600; letter-spacing: 0; background: var(--bg-2); padding: 3px 8px; border-radius: 6px; }
  .need:hover .need__k { background: var(--bg-3); }
  .need__l { font-size: 14px; margin-top: 0; }
  .need__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 36px; height: 36px; padding: 8px; }
  .desk__note { font-size: 14px; }

  .road { margin-top: 32px; }
  .car { width: 100%; min-width: 0; }
  .floor__in { font-size: 14px; padding-block: 14px 16px; }

  .years__num { font-size: clamp(110px, 34vw, 150px); }
  .years__since { font-size: 17px; margin-top: 16px; }
  .owners__q { font-size: 28px; line-height: 1.15; }
  .owners__p { font-size: 17px; }
  .reviews { --per: 1; --gap: 12px; }
  .reviews__track { grid-template-columns: 1fr; }
  .reviews__src { display: none; }
  .rev { padding: 22px 20px 20px; }
  .rev blockquote p { font-size: 18px; }

  .h2 { font-size: 38px; }
  /* .proc* y .ot* → assets/despiece.css */

  .call__promise { padding: 16px 18px; gap: 12px; font-size: 19px; align-items: flex-start; }
  .call__promise .ico { width: 26px; height: 26px; }
  .call__h { font-size: 42px; }
  .call__sla { font-size: 17px; }
  .call__digits { font-size: clamp(48px, 14.5vw, 64px); }
  .call__info { grid-template-columns: 1fr; gap: 24px; }

  .foot { padding-block: 40px 28px; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .foot__brands { grid-row: auto; }
  .brands { gap: 18px 24px; }
  .foot__base { flex-direction: column; }

  .dock {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(18, 20, 23, .06);
  }
  .dock__wa {
    flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
    min-height: 56px; padding: 7px 16px; border-radius: 12px;
    background: var(--orange-ink); color: #fff; text-decoration: none;
  }
  .dock__wa .ico { grid-row: 1 / span 2; width: 26px; height: 26px; }
  .dock__t { font-weight: 700; font-size: 18px; line-height: 1.1; }
  .dock__s { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.2; }
  .dock__s .status__dot { width: 7px; height: 7px; background: #BBF7D0; box-shadow: none; }
  .dock__map { width: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =========================================================
   ESTADOS Y MOVIMIENTO (site.js / status.js)
   ========================================================= */

/* Estado en vivo: el punto cambia con el estado; abierto, respira (un aro que se expande cada 2,8 s) */
@keyframes live { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  [data-status="open"] .status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: live 2.8s cubic-bezier(.2, .6, .4, 1) infinite; }
  [data-status-reply="open"] .status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #BBF7D0; animation: live 2.8s cubic-bezier(.2, .6, .4, 1) infinite; }
}
[data-status="lunch"] .status__dot { background: var(--orange); box-shadow: 0 0 0 3px rgba(234, 88, 12, .18); }
[data-status="closed"] .status__dot { background: #9AA0A8; box-shadow: none; }
[data-status-reply="lunch"] .status__dot { background: #FED7AA; }
[data-status-reply="closed"] .status__dot { background: rgba(255, 255, 255, .6); }

/* Barra mobile: se esconde sobre el contacto */
.dock { transition: transform .32s var(--ease); }
.dock.is-hidden { transform: translateY(110%); }

/* Camioneta de la avenida (site.js la coreografía): entra rodando a velocidad de calle, frena (luces de
   freno, la trompa se hunde y la suspensión rebota) y queda estacionada. Estacionada, al pasar el mouse se
   mece sobre la suspensión y al tocarla salta como con hidráulicos: las ruedas no se mueven, la carrocería sí. */
@keyframes car-dive {
  0% { transform: none; }
  26% { transform: translateY(1.8%) rotate(1.4deg); }
  54% { transform: translateY(-.6%) rotate(-.45deg); }
  78% { transform: translateY(.2%) rotate(.14deg); }
  100% { transform: none; }
}
@keyframes car-sway {
  0% { transform: none; }
  30% { transform: translateY(1.4%) rotate(.45deg); }
  60% { transform: translateY(-.6%) rotate(-.22deg); }
  82% { transform: translateY(.2%) rotate(.08deg); }
  100% { transform: none; }
}
@keyframes car-hydra {
  0% { transform: none; }
  12% { transform: translateY(-3.6%) rotate(-1.3deg); }
  30% { transform: translateY(2.8%) rotate(1.5deg); }
  48% { transform: translateY(-1.9%) rotate(-1deg); }
  64% { transform: translateY(1.1%) rotate(.55deg); }
  80% { transform: translateY(-.5%) rotate(-.22deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .car:not(.is-ready) { visibility: hidden; }
  .car.is-braking .car__body { animation: car-dive 900ms cubic-bezier(.3, .6, .3, 1) both; }
  .car.is-sway .car__body { animation: car-sway 1s cubic-bezier(.3, .6, .3, 1) both; }
  .car.is-hydra .car__body { animation: car-hydra 1.5s cubic-bezier(.3, .6, .3, 1) both; }
  /* el primer tramo entra en orden: titular quieto; las filas del mostrador aparecen en cascada desde el
     primer pintado (animación CSS: no depende del script ni destella), cada pieza hace su gesto al llegar;
     la camioneta llega después y la dirección se enciende cuando estaciona (o a los 2,9 s, lo que pase antes) */
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .js .desk__list li { animation: rise-in .55s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 95ms); }
  .js .floor__in { animation: rise-in .5s var(--ease) 2.9s both; }
  .js .hero.is-parked .floor__in { animation-delay: 0s; }
  /* el mapa aparece ya cargado, sin el salto gris → calles */
  .js .map iframe { opacity: 0; transition: opacity .6s var(--ease); }
  .js .map iframe.is-loaded { opacity: 1; }
}

/* Reseñas: el fragmento clave se subraya en naranja cuando la tarjeta queda quieta */
@media (prefers-reduced-motion: no-preference) {
  .rev.is-armed mark { background-size: 0% 3px; }
  .rev.is-in mark { background-size: 100% 3px; transition: background-size 600ms var(--ease) 250ms; }
}

.dock__s { min-width: 0; }
.dock__s .status__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }