/* =============================================================
   SANITARIOS TICOS
   Paleta de marca: naranja del logo sobre papel cálido y pizarra.
   1. Tokens · 2. Reset · 3. Utilidades · 4. Cabecera
   5. Componentes · 6. Bloques · 7. Pie · 8. Efectos
   9. Responsive · 10. Reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* =============================================================
     PALETA MONOCROMÁTICA · un solo matiz, el del camión
     =============================================================

     El naranja del rótulo es #ef6511 — matiz 22,7°. De ahí sale TODA
     la escala: el papel es ese mismo naranja desaturado y subido de
     luz; los fondos oscuros son ese mismo naranja bajado, no un azul
     pizarra prestado. Antes el sitio tenía dos familias peleando
     (papel cálido + pizarra fría); ahora es una sola, y las secciones
     se distinguen por PESO dentro de la escala, no por cambio de
     color. Eso es lo que da el juego sin ensuciar.

     Cada paso está comprobado contra AA (ver abajo).
     ============================================================= */
  --c-50:  #fcf8f5;   /* papel */
  --c-100: #f7ece6;   /* papel, un paso */
  --c-200: #eedcd0;   /* papel hondo · filetes */
  --c-300: #ddbba7;   /* bordes sobre oscuro */
  --c-400: #c88e6a;   /* texto suave sobre oscuro — 6,1:1 */
  --c-500: #ef6511;   /* la marca. El del camión, sin tocar */
  --c-600: #b44d0e;   /* naranja de texto sobre papel — 5,0:1 */
  --c-700: #813a0e;   /* naranja hondo */
  --c-800: #452511;   /* oscuro medio */
  --c-900: #29190f;   /* oscuro de sección */
  --c-950: #19100b;   /* tinta */

  /* Papel — el 80 % de la página */
  --paper:    var(--c-50);
  --paper-2:  var(--c-100);
  --paper-3:  var(--c-200);
  --white:    #ffffff;

  /* Tinta */
  --ink:      var(--c-950);
  --ink-2:    #3b2a1e;
  --muted:    #78685e;   /* 5,0:1 sobre papel */
  --muted-2:  #847368;   /* 4,6:1 sobre papel-2 */

  /* Naranja de marca — acento, nunca fondo grande */
  --orange:      var(--c-500);
  --orange-dk:   var(--c-600);  /* 5,0:1 — enlaces y texto */
  --orange-lt:   #e59b63;
  --orange-soft: rgba(239,101,17,.10);
  --orange-tint: var(--c-100);   /* el naranja suave ya compuesto, opaco */
  --orange-line: rgba(239,101,17,.28);

  /* Las secciones oscuras. Ya no son pizarra fría: son el mismo
     naranja al fondo de su escala. El nombre se conserva para no
     reescribir medio archivo, pero de frío ya no tienen nada. */
  --slate:    var(--c-900);
  --slate-2:  var(--c-800);
  --slate-3:  #5a3419;

  --wa:       #25d366;

  --line:     rgba(25,16,11,.13);
  --line-2:   rgba(25,16,11,.22);
  --line-lt:  rgba(252,248,245,.16);

  /* Una sola familia con eje de ancho (Archivo, Omnibus-Type). El
     titular usa el corte estrecho y pesado —el del logo y el rótulo del
     camión— y el texto el corte normal. Titular y párrafo son la misma
     tipografía, no dos que se llevan bien.
     Ver DIRECCION-DE-ARTE.md §4. */
  --sans:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Anchos del eje wdth. Se aplican con font-stretch, que es la forma
     estándar (no font-variation-settings, que se salta la cascada). */
  --ancho-cartel:  68%;   /* h1 y cifras grandes */
  --ancho-titular: 76%;   /* h2, h3 y piezas de display */
  --ancho-texto:  100%;   /* cuerpo */

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --wrap: 1240px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --head-h: 74px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--sans);
  font-stretch: var(--ancho-texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-stretch: var(--ancho-titular);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* El h1 es el titular de cartel de cada página: va en el corte más
   estrecho y pesado, en versalitas, como está pintado el costado del
   tanque. Es el único que va en caja alta — en un párrafo sería
   ilegible, y repetido en cada h2 dejaría de significar nada. */
h1 {
  font-stretch: var(--ancho-cartel);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
}

/* Todo lo que use la familia de display en versión ancha se ve blando
   al lado del h1. Estas piezas van en el corte de titular. */
.btn, .marquee span, .pull, .arrow,
.fact strong, .fact b, .row-t h3,
.hq b, .qa summary,
.data a, .data span, .data small, .foot .foot-t, .foot h4,
.cover-kick, .cover-stamp strong, .asistente-cab strong,
.urgente-t, .urgente-tel, .f label, .marcas b {
  font-stretch: var(--ancho-titular);
}

strong, b { font-weight: 600; }
::selection { background: var(--orange); color: var(--white); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Transiciones entre páginas.
   Es la ganancia de fluidez más grande de un sitio de seis páginas:
   sin esto, cada clic del menú da un parpadeo en blanco. */
@view-transition { navigation: auto; }

/* El paso: una franja naranja cruza la pantalla y detrás va quedando
   la página nueva. Es el costado del camión pasando.

   Sustituye a un iris —el círculo que se abría desde el clic—, que
   quedaba bien pero es el diafragma de una cámara: podría estar en
   cualquier sitio del mundo y no decía nada de esta empresa.

   La franja no es un elemento nuevo: es el fondo del propio grupo de la
   transición, que se ve en el hueco entre la página que sale y la que
   entra. La que sale se va primero, la que entra viene un poco atrás, y
   entre las dos queda el naranja. Cero HTML, cero JavaScript.

   Es el mismo naranja del costado del camión y la misma franja que
   encabeza el documento de cotización: un elemento de marca haciendo
   tres trabajos en vez de tres efectos sin relación. */
:root {
  --paso-tiempo: .62s;
  --paso-curva: cubic-bezier(0.65, 0, 0.2, 1);
}

::view-transition-group(root) { background: var(--orange); }

::view-transition-old(root) {
  animation: paso-sale var(--paso-tiempo) var(--paso-curva) forwards;
}
::view-transition-new(root) {
  animation: paso-entra var(--paso-tiempo) var(--paso-curva) forwards;
}

/* La que sale se recorta por la izquierda hasta desaparecer. */
@keyframes paso-sale {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

/* La que entra sale 16 % después y llega junto con la otra al final,
   para que no quede una tira sin cubrir al terminar. Ese 16 % ES el
   ancho de la franja naranja; va escrito y no en una variable porque
   los porcentajes de @keyframes no aceptan var(). Si se quiere una
   franja más ancha, se sube acá. */
@keyframes paso-entra {
  0%   { clip-path: inset(0 100% 0 0); }
  16%  { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* La barra de teléfonos y la cabecera son idénticas en todas las
   páginas. Nombrándolas, el navegador las deja quietas en vez de
   fundirlas: al navegar sólo cambia el contenido, como en una app. */
@media (prefers-reduced-motion: no-preference) {
  .bar  { view-transition-name: barra-contacto; }
  .head { view-transition-name: cabecera; }
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gut) * 2), 1440px); margin-inline: auto; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--paper); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Las etiquetas de sección se eliminaron por completo — el número, la
   línea y la barra. Las secciones abren con el h2 solo y se separan
   por campo de color y ancho de contenedor.
   Ver DIRECCION-DE-ARTE.md §7.

   Franja alterna: reemplaza las reglas de 1px que separaban ítems
   dentro de una lista. Sale de la banda blanca que cruza el tanque del
   camión: separa por materia, no por raya. El margen negativo saca el
   color hasta un poco más allá del texto y lo devuelve con relleno, así
   el texto sigue alineado con el resto de la página. */
.franjas > *:nth-child(odd) { background: var(--paper-2); }
.franjas > * {
  padding-inline: 1.05rem;
  margin-inline: -1.05rem;
}
/* Sobre fondo papel-2 la alternancia se invierte, o no se vería. */
.block-paper2 .franjas > *:nth-child(odd) { background: var(--paper); }
/* Sobre pizarra, un tono más claro de la misma pizarra. */
.block-dark .franjas > *:nth-child(odd) { background: var(--slate-2); }

/* .split sólo era rejilla a partir de 1024px, así que abajo de eso sus
   dos mitades se apilaban pegadas: el titular terminaba y el párrafo
   empezaba en la línea siguiente, sin aire. Definirlo como rejilla de
   una columna desde el inicio le da ese respiro en tableta y celular. */
.split { display: grid; gap: 1.15rem; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 40rem; }
.dim { color: var(--muted); }
.mark { color: var(--orange); }

/* =============================================================
   4. Cabecera
   ============================================================= */
.bar {
  background: var(--slate);
  color: rgba(250,247,242,.82);
  font-size: .8rem;
  letter-spacing: .01em;
}
.bar-in {
  width: min(100% - (var(--gut) * 2), 1440px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px; flex-wrap: wrap;
}
/* La silueta del país al lado de "Cobertura en todo el país". El PNG
   venía en blanco sobre negro sólido: se le pasó la luminosidad al canal
   alfa, así que ahora es una silueta blanca que sirve sobre la pizarra
   de la barra sin recuadro negro. */
.bar-in > span:first-child {
  color: rgba(250,247,242,.6);
  display: inline-flex; align-items: center; gap: .55rem;
}
/* 1.75em sobre los 12,8px de la barra son 22px: a menos que eso la
   silueta deja de leerse como Costa Rica. El archivo mide 44px de alto,
   el doble, para que no se vea borrosa en pantallas retina. */
.bar-mapa { height: 1.75em; width: auto; flex: 0 0 auto; opacity: .88; }
.bar-links { display: flex; align-items: center; gap: 1.15rem; }
.bar-links a { display: inline-flex; align-items: center; gap: .4rem; transition: color .2s var(--ease); }
.bar-links a:hover { color: var(--orange-lt); }
.bar-links .wa { color: #7ff0a9; }

.head {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper);
  transition: box-shadow .3s var(--ease);
}
.head.is-stuck { box-shadow: 0 1px 20px rgba(27,25,23,.09); }
.head-in {
  /* La MISMA medida que el contenido (--wrap). Estaba en 1440 mientras
     todo lo demás iba en 1240: el logo arrancaba 45px más a la
     izquierda que el titular, y esa esquina vacía era lo primero que
     se veía al abrir. Una página se alinea por una sola columna. */
  width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto;
  min-height: var(--head-h);
  display: flex; align-items: center; gap: 1.5rem;
}

.logo { display: block; margin-right: auto; }
.logo img { height: 42px; width: auto; }

.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu a:not(.menu-cta) {
  position: relative;
  font-size: .93rem; font-weight: 500; color: var(--ink-2);
  padding: .35rem 0;
  transition: color .2s var(--ease);
}
.menu a:not(.menu-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.menu a:not(.menu-cta):hover { color: var(--ink); }
.menu a:not(.menu-cta):hover::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

.burger { display: none; width: 40px; height: 40px; padding: 12px 8px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   5. Componentes
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.02rem; }

.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { background: var(--orange-dk); color: var(--paper); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--slate); }

.btn-line { border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn-line-lt { border-color: var(--line-lt); color: var(--paper); }
.btn-line-lt:hover { background: var(--paper); color: var(--ink); }

/* Un botón apagado tiene que verse apagado: el de "Continuar" se
   bloquea cuando la zona no se cotiza sola, y sin esto parecía que la
   página no respondía. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--orange); }

.btn-wa { background: var(--wa); color: #06331b; }
.btn-wa:hover { background: #1cb955; }

.arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--display); font-weight: 600; color: var(--orange-dk); font-size: .93rem; }
.arrow i { font-style: normal; transition: transform .3s var(--ease); }
.arrow:hover i { transform: translateX(5px); }

/* Marquesina de contacto */
.marquee {
  background: var(--orange);
  color: var(--ink);
  overflow: hidden;
}
.marquee-track {
  display: flex; width: max-content;
  animation: slide 38s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 600;
  font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .7rem 0;
  white-space: nowrap;
}
/* El separador pone TODO el espacio, y el mismo de cada lado. Antes el
   espacio salía del gap por la izquierda (.8rem) y de dos paddings por
   la derecha (3.2rem), así que el rombo quedaba pegado al texto que
   terminaba en vez de en medio de los dos. */
.marquee span::after {
  content: "◆"; font-size: .55em; opacity: .55;
  margin: 0 1.6rem;
  /* La letra ◆ no llena su caja: sin esto se apoya un pelo abajo. */
  position: relative; top: -.05em;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================================================
   6. Bloques
   ============================================================= */
.block { padding-block: clamp(3.8rem, 8vw, 7rem); }

/* Dos secciones seguidas del mismo tono se leían como un hueco enorme:
   el respiro de abajo de una más el de arriba de la siguiente, sin nada
   que las separe a la vista. Cuando el tono se repite, la segunda no
   vuelve a abrir espacio; con el de la primera alcanza y sobra.
   Ver DIRECCION-DE-ARTE.md §27. */
.block:not(.block-paper2):not(.block-dark) + .block:not(.block-paper2):not(.block-dark),
.block-paper2 + .block-paper2,
.block-dark + .block-dark { padding-top: 0; }
.block-tight { padding-block: clamp(2.6rem, 5vw, 4rem); }
.block-paper2 { background: var(--paper-2); }
.block-dark { background: var(--slate); color: var(--paper); }
.block-dark h1, .block-dark h2, .block-dark h3 { color: var(--paper); }
.block-dark .lead { color: rgba(250,247,242,.76); }
.block-dark .dim { color: rgba(250,247,242,.55); }

/* --- Portada asimétrica --- */
.cover { position: relative; padding-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.cover-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }

/* Antes era una píldora con borde y un punto parpadeando — el mismo
   badge de "✨ Novedad" que trae cualquier plantilla. Ahora es una
   nota de rótulo: cuadro macizo del naranja del camión y la frase
   suelta, sin caja ni parpadeo. */
.cover-kick {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .01em;
  color: var(--orange-dk);
  margin-bottom: 1.3rem;
}

/* Razón display:cuerpo de 5,2x (88px sobre 17px), que es la del costado
   del tanque: el titular contra la letra legal de la esquina. Antes
   estaba en 2,7x, que es lo que lo hacía sentirse plano.
   Ver DIRECCION-DE-ARTE.md §4. */
.cover h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: -.015em;
  /* En versalitas condensadas caben bastantes más caracteres por línea
     que en caja baja, así que la medida se ensancha: con 15ch el
     titular se partía en cuatro renglones. */
  max-width: 19ch;
}
/* Antes "manos ticas" iba en naranja dentro del titular: el gesto más
   automático que existe, y gastaba el acento porque el naranja ya
   estaba en el botón y en los enlaces. Ahora el énfasis es de posición
   —"hoy mismo" cae solo en su línea— que es el argumento de venta de
   quien llega con el tanque rebalsándose. Ver DIRECCION-DE-ARTE.md §4. */
.cover h1 em { font-style: normal; display: block; }
.cover-sub { margin-top: 1.5rem; font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); max-width: 33rem; }
.cover-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }

/* Cualquier fila de 2-3 botones sueltos (llamar / WhatsApp / formulario,
   cotizar / llamar, etc.). En vez de flex (cada botón del ancho de su
   propio texto), es una cuadrícula de 2 columnas: cada columna se
   ensancha al botón más largo que le toque, así los que quedan alineados
   verticalmente (ej. "Llamar" sobre "Llenar el formulario") coinciden en
   ancho. En móvil se apilan todos del mismo ancho, como antes. */
.btn-row { display: grid; grid-template-columns: repeat(2, max-content); gap: .7rem; }
.btn-row .btn { width: 100%; }

.cover-media { position: relative; }
.cover-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* Era una tarjeta blanca flotando sobre la foto con sombra difusa —
   se veía pegada encima, no parte de la imagen. Ahora es un pie de
   foto sobre la propia imagen, con el mismo degradado que ya usan las
   fotos de la galería, así que el sitio habla un solo idioma. El
   cuadrito naranja es el mismo de la nota de arriba del titular. */
.cover-stamp {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: .6rem;
  padding: 3.4rem 1.3rem 1.1rem;
  /* La foto tiene el camión naranja justo donde cae el texto, así que
     el velo tiene que ser firme abajo o el blanco no se lee. Arranca
     transparente para que no se note dónde empieza. */
  background: linear-gradient(rgba(15,13,11,0), rgba(15,13,11,.68) 45%, rgba(15,13,11,.93));
  color: var(--paper);
}
.cover-stamp::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; background: var(--orange);
  transform: translateY(-1px);
}
.cover-stamp .txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cover-stamp strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .95rem; letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(15,13,11,.55);
}
.cover-stamp .txt span {
  font-size: .82rem; color: rgba(250,247,242,.76); text-wrap: pretty;
  text-shadow: 0 1px 10px rgba(15,13,11,.55);
}

/* --- Tira de datos ---
   Las franjas alternas sirven en una lista vertical, donde marcan el
   ritmo de lectura. En una fila de cuatro no hay orden que las
   justifique: quedaban dos bloques tintados sueltos, como un error.
   Aquí va UNA sola franja que cruza los cuatro datos —la banda que
   cruza el tanque del camión, que también es una sola— y los datos se
   separan entre sí por aire. */
.facts {
  display: grid;
  gap: clamp(1.3rem, 3vw, 2.6rem);
  /* Columnas fijas, no auto-fit: con cuatro datos, auto-fit caía a tres
     columnas en anchos intermedios y el cuarto quedaba solo abajo. Dos
     o cuatro siempre reparten parejo. */
  grid-template-columns: repeat(2, 1fr);
  background: var(--paper-2);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
@media (min-width: 880px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}
.fact { display: grid; align-content: start; }

.fact strong {
  font-family: var(--display); font-stretch: var(--ancho-cartel); font-weight: 800;
  font-size: clamp(2.6rem, 4.8vw, 3.9rem); line-height: .9;
  color: var(--orange); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.fact b {
  margin-top: .7rem;
  font-family: var(--display); font-weight: 700;
  font-size: .92rem; color: var(--ink);
}
.fact span {
  margin-top: .25rem;
  font-size: .87rem; color: var(--muted);
  max-width: 17rem; text-wrap: pretty;
}

/* --- Índice de servicios (filas, no tarjetas) ---
   SIN numeración. El propio DIRECCION-DE-ARTE.md §"Cero numeración"
   la había sacado —"fuera los números de las filas de servicio"— y
   había vuelto al CSS. Un 01–05 no ordena nada acá: nadie contrata el
   servicio 3 por ser el 3, y es de los tics que delatan la plantilla.

   El peso lo da ahora la escala: una barra del matiz de la marca que
   se va oscureciendo fila por fila. Juega con la paleta, acompaña la
   lectura hacia abajo y no inventa un orden que no existe. */
.index { --paso: 0; }
.row {
  position: relative;
  display: grid; grid-template-columns: 4px 1fr auto;
  gap: clamp(.9rem, 2.5vw, 1.8rem);
  align-items: stretch;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  transition: background-color .3s var(--ease);
}
.row::before {
  content: ""; width: 4px; border-radius: 2px;
  background: var(--c-300);
  transition: background-color .3s var(--ease);
}
/* Cada fila un paso más honda en la misma escala. */
.row:nth-child(1)::before { background: var(--c-300); }
.row:nth-child(2)::before { background: var(--c-400); }
.row:nth-child(3)::before { background: var(--c-500); }
.row:nth-child(4)::before { background: var(--c-600); }
.row:nth-child(5)::before { background: var(--c-700); }
.row:hover { background: var(--paper-2); }
.row:hover::before { background: var(--c-500); }
.row-t { min-width: 0; align-self: center; }
.row-t h3 { font-size: clamp(1.25rem, 2.6vw, 1.85rem); letter-spacing: -.03em; }
.row-t p { margin-top: .35rem; color: var(--muted); font-size: .93rem; max-width: 44ch; }
.row-go {
  width: 44px; height: 44px; flex: 0 0 auto; align-self: center;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.row:hover .row-go { background: var(--orange); border-color: var(--orange); color: var(--white); transform: rotate(-45deg); }
.row-go .ico { width: 18px; height: 18px; }

/* Vista previa flotante en escritorio */
.row-peek {
  position: absolute; right: 6rem; top: 50%;
  width: 200px; height: 140px;
  transform: translateY(-50%) scale(.94) rotate(-2deg);
  opacity: 0; pointer-events: none;
  object-fit: cover;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  z-index: 2;
  border: 4px solid var(--white);
  box-shadow: 0 18px 40px rgba(27,25,23,.22);
}
.row:hover .row-peek { opacity: 1; transform: translateY(-50%) scale(1) rotate(1.5deg); }

/* --- Banda editorial alternada (servicios en detalle) --- */
.band:nth-of-type(even) { background: var(--paper-2); }
.band-in {
  display: grid; gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.band-media { position: relative; }
.band-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.band-copy h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin-bottom: .9rem; }
.band-copy > p { color: var(--ink-2); }
.band-list { margin: 1.5rem 0 1.7rem; display: grid; gap: .55rem; }
.band-list li { position: relative; padding-left: 1.55rem; font-size: .94rem; color: var(--ink-2); }
.band-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--orange);
}
.band-for { font-size: .86rem; color: var(--muted); margin-bottom: 1.4rem; }
.band-for b { color: var(--ink); font-weight: 600; }

/* --- Placa tipográfica (servicio sin foto) --- */
.plate {
  aspect-ratio: 4/3;
  background: var(--slate);
  color: var(--paper);
  display: grid; place-content: center;
  text-align: center; padding: 2rem;
  position: relative; overflow: hidden;
}
.plate::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(239,101,17,.09) 14px 16px);
}
.plate-ico { position: relative; width: 68px; height: 68px; margin: 0 auto 1.1rem; color: var(--orange); }
.plate-ico .ico { width: 100%; height: 100%; stroke-width: 1.3; }
.plate p { position: relative; font-family: var(--display); font-size: 1.05rem; color: rgba(250,247,242,.82); max-width: 22ch; }

/* --- Pasos --- */
.steps { display: grid; gap: 0; }
.step { background: var(--slate); padding: 1.7rem 1.5rem; }
.step:nth-child(even) { background: var(--slate-2); }
.step h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.step p { font-size: .9rem; color: rgba(250,247,242,.7); }

/* --- Cobertura --- */
.reach { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.reach h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.hq { display: grid; gap: 0; }
.hq li {
  display: grid; grid-template-columns: 14rem 1fr;
  align-items: baseline; gap: 1rem;
  padding-block: 1.05rem;
}
.hq b { font-family: var(--display); font-size: 1.15rem; }
.hq span { font-size: .88rem; color: rgba(250,247,242,.6); }
.reach-note {
  margin-top: 1.6rem; padding: 1.2rem 1.3rem;
  border-left: 3px solid var(--orange);
  background: rgba(250,247,242,.05);
  font-size: .95rem; color: rgba(250,247,242,.82);
}
.reach-note b { color: var(--ink); }
.block-dark .reach-note b { color: var(--paper); }

/* --- Prueba / galería --- */
.shots { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.shot { position: relative; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 1.6rem .95rem .8rem;
  background: linear-gradient(transparent, rgba(15,13,11,.55) 45%, rgba(15,13,11,.9));
  color: var(--paper); font-size: .82rem; font-weight: 500;
}

/* --- Cita / mensaje destacado --- */
.pull {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1.18; letter-spacing: -.03em;
  max-width: 24ch;
}
.pull em { font-style: normal; color: var(--orange-dk); }

/* --- Señales --- */
/* Las siete señales eran recuadros con borde, que parecían filtros de
   una interfaz e invitaban a un clic que no existe. Son una lista para
   leer, así que se leen: mismo tratamiento que "quiénes nos contratan".
   Ver DIRECCION-DE-ARTE.md §11, tic 4. */
.signals {
  font-stretch: var(--ancho-titular);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.7; letter-spacing: -.012em;
  color: var(--ink-2);
  max-width: 52rem;
  text-wrap: pretty;
}
.signal { display: inline; white-space: nowrap; }
.signal:not(:last-child)::after {
  content: "\00b7";
  margin: 0 .5rem 0 .55rem;
  color: var(--orange);
  font-weight: 700;
}

/* --- Marcas de la empresa (bloque "La empresa") --- */
.marcas { display: grid; gap: 0; margin-top: 1.6rem; }
.marcas li {
  display: grid; gap: .2rem;
  padding-block: .95rem;
}
.marcas b { font-family: var(--display); font-size: 1rem; }
.marcas span { font-size: .92rem; color: var(--muted); }

/* --- Quiénes nos contratan ---
   Eran nueve recuadros con borde, que parecían filtros de una tienda:
   invitaban a hacer clic y no llevan a ningún lado. Como es una lista
   para leer de corrido, ahora se lee de corrido — un solo párrafo en la
   tipografía de titulares, separado por puntos naranja. Ocupa la mitad
   del alto y se ve como una frase pensada, no como una barra de UI. */
/* --- Aviso de emergencia (cierre de portada) --- */
.urgente {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem;
  margin-bottom: 2.4rem; padding: 1.15rem 1.4rem;
  border-left: 3px solid var(--orange);
  background: rgba(250,247,242,.05);
}
.urgente-t { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--paper); }
.urgente-tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 1.75rem); letter-spacing: -.02em;
  color: var(--orange-lt);
  transition: color .2s var(--ease);
}
.urgente-tel:hover { color: var(--paper); }
.urgente-tel .ico { width: .8em; height: .8em; stroke-width: 2; }
.urgente-n { flex: 1 1 16rem; font-size: .88rem; color: rgba(250,247,242,.6); }

/* --- Preguntas --- */
.qa { }
.qa details { }

/* El acordeón abría de golpe y la página daba un salto: lo que estabas
   leyendo se te iba de la pantalla. Animar la altura lo arregla — no es
   decoración, es que deja de moverse el suelo bajo el dedo.
   Va dentro de @supports: donde el navegador no lo entienda, abre de
   golpe como hasta ahora. Sin regresión. */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .qa details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .32s var(--ease), content-visibility .32s allow-discrete;
  }
  .qa details[open]::details-content { block-size: auto; }
}
.qa summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 2.6rem 1.15rem 0;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  position: relative;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.5rem;
  width: 12px; height: 12px;
  border-right: 1.6px solid var(--orange); border-bottom: 1.6px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { color: var(--orange-dk); }
.qa-body { padding: 0 2.6rem 1.3rem 0; }
.qa-body p { color: var(--ink-2); font-size: .95rem; }
.qa-body a { color: var(--orange-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --- Formulario --- */
.form { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.f { display: grid; gap: .35rem; }
.f-full, .form > .btn, .form-alt, .form-msg { grid-column: 1 / -1; }
.f label { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.f .opt { font-weight: 400; color: var(--muted-2); }
/* 16px es el mínimo: por debajo de eso, Safari en iPhone hace zoom
   automático al tocar el campo y deja la página descuadrada. */
.f input, .f select, .f textarea {
  font: inherit; font-size: 1rem;
  padding: .78rem .9rem;
  border: 1px solid var(--line-2);
  background: var(--white);
  color: var(--ink);
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f textarea { resize: vertical; min-height: 5.4rem; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.f.is-error input, .f.is-error select { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.1); }
.f-consiente {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .82rem; line-height: 1.4; color: var(--muted);
  cursor: pointer;
}
.f-consiente input { margin-top: .1rem; flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--orange); }
.f-consiente a { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.f-consiente.is-error { color: #c0392b; }

.form-alt { font-size: .86rem; color: var(--muted); }
.form-alt a { color: var(--orange-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form-msg { font-size: .88rem; color: var(--orange-dk); font-weight: 500; min-height: 1.2em; }
.form-msg.is-error { color: #c0392b; }

/* --- Datos de contacto --- */
.data { display: grid; gap: 0; }
.data li { display: flex; gap: 1rem; align-items: baseline; padding-block: 1rem; }
.data small {
  min-width: 6.5rem; font-size: .82rem; color: var(--muted-2);
}
.data a, .data span { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.data a { transition: color .2s var(--ease); }
.data a:hover { color: var(--orange); }

/* =============================================================
   7. Pie
   ============================================================= */
.foot .dim { color: rgba(250,247,242,.62); }
.foot { background: var(--slate); color: rgba(250,247,242,.68); padding-top: clamp(3.4rem, 7vw, 5rem); font-size: .92rem; }
.foot-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.foot-brand img { height: 74px; width: auto; margin-bottom: 1rem; }
.foot-brand p { max-width: 24rem; font-size: .9rem; }
.foot h3.foot-t, .foot h4 { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--orange-lt); margin-bottom: .9rem; }
.foot-col { display: flex; flex-direction: column; gap: .5rem; }
.foot-col a { transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--paper); }
.social { display: flex; gap: .5rem; margin-top: 1.2rem; }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-lt);
  color: rgba(250,247,242,.75);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.social a:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.social svg { width: 17px; height: 17px; }
.foot-end {
  margin-top: 3rem; padding-block: 2.2rem 1.3rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  font-size: .78rem; color: rgba(250,247,242,.45);
}

/* =============================================================
   Asistente de preguntas (chat)
   Apilado arriba del botón de WhatsApp, mismo lado. Estilo de burbujas
   (esquina "cola" asimétrica) en vez del rectángulo plano de antes.
   ============================================================= */
.asistente { position: fixed; right: 1rem; bottom: 5.4rem; z-index: 81; }

/* Los dos botones flotantes viven encima del contenido. En vez de
   reservarles un hueco permanente en cada lista (que le robaba ancho
   al texto en el celular), se apartan solos mientras se baja y vuelven
   apenas se sube. El panel del chat abierto nunca se esconde. */
.asistente, .wa-fab { transition: transform .3s var(--ease), opacity .3s var(--ease); }
body.fabs-fuera .asistente:not(.is-open),
body.fabs-fuera .wa-fab {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}

/* Los dos botones flotantes comparten caja: mismo alto, mismo ancho
   mínimo, mismo radio. Antes tenían el padding distinto por dos
   centésimas y se veían desalineados uno encima del otro sin que se
   supiera por qué. La geometría vive acá y cada uno pone su color. */
.asistente-fab, .wa-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  /* Ancho fijo, no mínimo: con `min-width` cada uno crecía lo que le
     pedía su contenido —la cara de Frank pesa más que el icono de
     WhatsApp— y quedaban desiguales por tres píxeles. */
  /* El ancho sale de la cuenta, no del ojo: la etiqueta "Hablar con
     Frank" mide 114px, Frank y su aire se comen 3,25rem por la
     izquierda y quedan 1,2rem de margen derecho. Con 11,75rem sobra lo
     justo para que nunca se parta en dos líneas.

     Se apretó a propósito: los dos botones flotan sobre el contenido y
     a 13,5rem le tapaban una columna entera de datos. */
  width: 11.75rem;
  min-height: 2.85rem;
  padding: .6rem 1.2rem;
  /* Redondeados a pedido del propietario. El problema del botón viejo
     nunca fue el radio: era el degradado de tres paradas, el anillo
     latiendo y el icono de destello. Eso no vuelve. */
  border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: .88rem;
}

.asistente-fab {
  position: relative; overflow: visible;
  /* Beto era una píldora flotante con degradado naranja, anillo que
     late sin parar y un destello de icono. Eso es el chatbot que trae
     puesto cualquier sitio generado — seis tics del catálogo en un solo
     componente, y lo primero que hace pensar "otra web de IA".

     Ahora es rectangular como todos los botones del sitio, de un solo
     naranja plano, y la cara es la mascota del camión: lo único de acá
     que no puede estar en ningún otro lado. */
  background: var(--orange);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(27,25,23,.24);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease);
}
/* ---------------------------------------------------------------
   Frank

   No va metido dentro del botón: se para SOBRE él y le saca la cabeza
   por arriba. Un muñeco de 26px encogido dentro de la píldora es una
   mancha; parado y saliéndose se lee de una y le da al botón algo que
   ningún sitio genérico tiene.

   Son dos capas —cuerpo y brazo— exportadas en el mismo lienzo, así
   que se apilan con inset:0 y el hombro cae siempre en el mismo punto.
   El brazo gira sobre ese hombro y saluda de verdad.
   --------------------------------------------------------------- */
.asistente-fab { padding-left: 3.25rem; }
.asistente-fab .frank {
  position: absolute; left: .5rem; bottom: 0;
  width: 36px; height: 74px;
}
/* Dos envoltorios y no uno: `.frank` se encarga de entrar y salir,
   `.frank-vivo` de respirar. Si compartieran elemento se pelearían por
   el mismo `transform` y uno le pisaría el otro. */
.asistente-fab .frank-vivo {
  position: absolute; inset: 0;
  animation: frankRespira 4.2s ease-in-out infinite;
}
.asistente-fab .frank img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.asistente-fab .frank-brazo {
  /* El CODO, no el hombro. La gente saluda desde el codo, y además eso
     resuelve la juntura de raíz: el hombro nunca se mueve, así que no
     hay hueco que destapar, y si al girar se abriera una rendija,
     detrás hay piel del mismo brazo — no fondo de página. El borde del
     corte va desvanecido, así que la transición entre las dos capas de
     piel no tiene línea que ver. */
  transform-origin: 86.2% 28.8%;
  animation: frankSaluda 6s var(--ease-soft) infinite;
}
/* Respira. Un pixel y medio en noventa: no se ve, se siente. */
@keyframes frankRespira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
/* Saluda tres veces y descansa. Un muñeco que se mueve sin parar deja
   de ser simpático a los diez segundos. */
/* Ahora el saludo va para los dos lados, que es como se saluda de
   verdad. Antes el brazo sólo podía abrirse hacia afuera porque al ir
   hacia adentro la mano se metía en la gorra; girando desde el codo el
   recorrido es corto y eso ya no pasa. */
@keyframes frankSaluda {
  0%, 62%, 90%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(12deg); }
  70% { transform: rotate(-10deg); }
  74% { transform: rotate(12deg); }
  78% { transform: rotate(-10deg); }
  82% { transform: rotate(12deg); }
}
/* El mismo gesto, sin el descanso. Los porcentajes son los de arriba
   reescalados: el 62% pasa a ser el 0 y el 90% el 100, y la duración
   es la que ese tramo ocupaba dentro del ciclo largo — 28% de 6s son
   1,68s. Así la mano se mueve EXACTAMENTE a la misma velocidad, sólo
   que sin esperar el turno. */
@keyframes frankSaludaYa {
  0%, 100%  { transform: rotate(0deg); }
  14.3%     { transform: rotate(12deg); }
  28.6%     { transform: rotate(-10deg); }
  42.9%     { transform: rotate(12deg); }
  57.1%     { transform: rotate(-10deg); }
  71.4%     { transform: rotate(12deg); }
}
/* Al pasarle el mouse saluda de una, sin esperar el turno — pero al
   mismo ritmo.

   Antes acá se comprimía el ciclo entero a 1,4s, descanso incluido, y
   el gesto salía cuatro veces más rápido: la mano parecía un
   limpiaparabrisas. La respiración tampoco se acelera; el cuerpo no
   tiene por qué cambiar de ritmo porque uno pase el mouse. */
.asistente-fab:hover .frank-brazo {
  animation: frankSaludaYa 1.68s var(--ease-soft) infinite;
}

/* Al abrir el chat no desaparece de golpe: baja el brazo y se mete
   detrás del botón. Desaparecer de un frame se lee como un error. */
.asistente-fab .frank {
  transition: transform .32s var(--ease), opacity .24s var(--ease);
}
.asistente.is-open .asistente-fab .frank.ico-abrir {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
}
.asistente.is-open .asistente-fab .frank-brazo { animation: none; transform: rotate(0deg); }
.asistente.is-open .asistente-fab { padding-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .asistente-fab .frank-brazo, .asistente-fab:hover .frank-brazo,
  .asistente-fab .frank-vivo { animation: none !important; }
  .asistente-fab .frank { transition: none; }
}

.asistente-cab .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.asistente-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,25,23,.3); background: var(--orange-dk); color: var(--paper); }
.asistente-fab .cara { width: 26px; height: 26px; display: block; }
.asistente-fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asistente-fab .ico-cerrar { display: none; }
.asistente.is-open .asistente-fab { background: var(--slate); color: var(--paper); box-shadow: 0 6px 20px rgba(27,25,23,.28); }
.asistente.is-open .asistente-fab .ico-abrir { display: none; }
.asistente.is-open .asistente-fab .ico-cerrar { display: block; }

.asistente-panel[hidden] { display: none; }
.asistente-panel {
  position: absolute; right: 0; bottom: calc(100% + .8rem);
  width: min(23rem, calc(100vw - 2rem));
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27,25,23,.26);
  display: flex; flex-direction: column;
  max-height: min(32rem, 75vh);
  transform-origin: bottom right;
  transform: scale(.92) translateY(10px);
  opacity: 0;
  transition: transform .28s var(--ease), opacity .22s var(--ease);
}
.asistente-panel.is-visible { transform: scale(1) translateY(0); opacity: 1; }

.asistente-cab {
  padding: 1.05rem 1.15rem;
  background: var(--slate);
  color: var(--paper);
  display: flex; align-items: center; gap: .7rem;
}
.asistente-cab .avatar {
  /* 40 y no 34: el recorte pasó de ser sólo la cara a incluir gorra,
     hombros y el logo del pecho, y a 34px eso no se leía. */
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--orange);
}
.asistente-cab .avatar img { width: 30px; height: 30px; display: block; }
.asistente-cab .txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.asistente-cab strong { font-family: var(--display); font-size: .96rem; }
.asistente-cab span { font-size: .78rem; color: rgba(250,247,242,.62); }

.asistente-hilo {
  flex: 1; min-height: 12rem;
  overflow-y: auto;
  padding: 1.1rem 1.1rem .3rem;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--paper-2);
}
.asistente-msg {
  white-space: pre-line;   /* Beto resume los datos en varias líneas */
  font-size: .89rem; line-height: 1.48; max-width: 86%;
  padding: .6rem .85rem;
  border-radius: 16px;
  animation: asistenteAparece .28s var(--ease-soft) both;
}
@keyframes asistenteAparece { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.asistente-msg.es-bot {
  align-self: flex-start; border-bottom-left-radius: 4px;
  background: var(--paper); color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(27,25,23,.06), 0 4px 14px rgba(27,25,23,.05);
}
.asistente-msg.es-bot a {
  color: var(--orange-dk); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.asistente-msg.es-usuario {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: var(--orange);
  color: var(--ink); font-weight: 500;
}

.asistente-typing {
  align-self: flex-start; display: inline-flex; gap: .28rem;
  padding: .75rem .95rem;
  border-radius: 16px; border-bottom-left-radius: 4px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(27,25,23,.06), 0 4px 14px rgba(27,25,23,.05);
}
.asistente-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2);
  animation: asistenteTyping 1.1s ease-in-out infinite;
}
.asistente-typing span:nth-child(2) { animation-delay: .15s; }
.asistente-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes asistenteTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.asistente-sugeridas[hidden] { display: none; }
.asistente-sugeridas { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem 1.1rem .9rem; background: var(--paper-2); }
.asistente-sugeridas button {
  font-size: .78rem; color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .38rem .8rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.asistente-sugeridas button:hover { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dk); }

/* Opciones del cotizador dentro del hilo. Se ven como respuestas que
   la persona podría dar, no como un formulario: quedan del lado derecho,
   alineadas con sus propios mensajes. */
.asistente-ops {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .35rem;
  margin: -.15rem 0 .2rem auto;
  max-width: 88%;
}
.asistente-ops button {
  text-align: right;
  font-size: .82rem; line-height: 1.3;
  color: var(--orange-dk);
  background: var(--orange-soft);
  border: 1px solid transparent;
  border-radius: 14px 14px 4px 14px;
  padding: .5rem .8rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.asistente-ops button:hover { border-color: var(--orange); }

/* El puente del formulario al cotizador. */
.form-seguir {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: .3rem; padding: .9rem 1rem;
  background: var(--orange-soft);
  font-size: .92rem; color: var(--ink-2);
}
.form-seguir span { flex: 1 1 14rem; }

/* Enlace al documento de la cotización, dentro del hilo. */
.asistente-doc { display: flex; margin: -.1rem 0 .3rem; }
.asistente-doc a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  color: var(--orange-dk);
  border-bottom: 1px solid var(--orange-line);
  padding-bottom: .1rem;
}
.asistente-doc a:hover { border-bottom-color: var(--orange); }

/* Botón de cotizar. Mismo patrón del traspaso: el [hidden] explícito
   antes de darle display propio. */
.asistente-cotiza[hidden] { display: none; }
.asistente-cotiza {
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--orange-soft);
  flex: 1 1 0; min-width: 0;
}
.asistente-cotiza button {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; min-height: 42px; padding: .6rem .7rem;
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  color: var(--orange-dk); white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.asistente-cotiza button:hover { background: rgba(214,88,20,.14); }

/* Las dos acciones comparten una sola fila. */
.asistente-acciones { display: flex; }
.asistente-acciones > *:first-child:not([hidden]) + * { border-left: 1px solid var(--line); }
.asistente-cotiza svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Traspaso a WhatsApp. El [hidden] va primero y explícito: un elemento
   con display propio ignora el atributo hidden del navegador, y en este
   proyecto ya nos pasó tres veces. */
.asistente-pase[hidden] { display: none; }
.asistente-pase {
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  flex: 1 1 0; min-width: 0;
}
.asistente-pase a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 42px; padding: .6rem .7rem;
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  color: #0a6b32;  /* 5.7:1 sobre el papel-2 del panel */
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.asistente-pase a:hover { background: rgba(37,211,102,.14); }
.asistente-pase svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.asistente-form {
  display: flex; gap: .5rem;
  padding: .8rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.asistente-form input {
  flex: 1; font: inherit; font-size: .9rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .6rem 1rem;
  background: var(--paper-2);
}
.asistente-form input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); background: var(--paper); }
/* El campo es una píldora y el botón era un cuadrado: no combinaban.
   Ahora es un círculo del mismo alto. */
.asistente-form button {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--orange); color: var(--ink);
  border-radius: 50%;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.asistente-form button:hover { background: var(--orange-dk); color: var(--paper); }
.asistente-form button:hover { background: var(--orange-dk); color: var(--paper); }
.asistente-form button:active { transform: scale(.94); }
.asistente-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.asistente-aviso {
  font-size: .7rem; color: var(--muted-2); text-align: center;
  padding: 0 1rem .8rem; background: var(--paper);
}
.asistente-aviso a { color: var(--muted-2); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 539px) {
  /* El mismo margen derecho que .wa-fab: con .6rem contra 1rem los dos
     botones quedaban escalonados y se veía como un error. */
  .asistente { right: 1rem; bottom: 4.7rem; }
  .asistente-panel { bottom: calc(100% + .6rem); }
}

/* WhatsApp flotante */
.wa-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  background: var(--wa);
  color: #06331b;
  box-shadow: 0 6px 20px rgba(27,25,23,.24);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,25,23,.3); background: #1fbe5b; }
.wa-fab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================
   8. Efectos
   ============================================================= */
.js .rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.js .rv.on { opacity: 1; transform: none; }

/* Red de seguridad: si main.js no llega a arrancar, el script de <head> marca
   esta clase a los 3 s y todo el contenido se muestra igual. */
.rv-rescate .rv { opacity: 1 !important; transform: none !important; }

/* =============================================================
   9. Responsive
   ============================================================= */
@media (max-width: 1023px) {
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 20px 40px rgba(27,25,23,.12);
    padding: 0 var(--gut);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .4s var(--ease), opacity .25s var(--ease), padding .3s var(--ease);
  }
  .head.is-open .menu { max-height: 32rem; opacity: 1; padding-block: .4rem 1.2rem; }
  .menu a:not(.menu-cta) { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .menu a:not(.menu-cta)::after { display: none; }
  .menu .menu-cta { margin-top: 1rem; width: 100%; padding-block: .9rem; }
  .burger { display: flex; }
  .row-peek { display: none; }

}

@media (max-width: 719px) {
  .hq li { grid-template-columns: 1fr; gap: .3rem; }
  .bar-in { justify-content: center; padding-block: .4rem; }
  .bar-in > span:first-child { display: none; }
  .bar-links { gap: .9rem; font-size: .78rem; }
  .cover-btns .btn { width: 100%; }
  .btn-row { grid-template-columns: 1fr; }
  /* La foto es baja en el celular: menos velo, para que se siga viendo
     el camión y no quede media imagen tapada. */
  .cover-stamp { padding: 2.1rem 1.1rem .95rem; }
  .cover-stamp strong { font-size: .9rem; }
  .cover-stamp .txt span { font-size: .78rem; }
  .form { grid-template-columns: 1fr; }
  .row-go { display: none; }
  /* En el teléfono los dos flotantes se encogen a un círculo. La regla
     vieja usaba `min-width: 0`, que ya no deshace nada porque ahora el
     ancho es fijo — quedaban de 216px con el texto escondido, o sea dos
     manchas de color. El `:not(.frank)` es para que el muñeco no se
     esconda con el texto: acá él ES el botón. */
  /* Sólo el hijo directo, que es la etiqueta. Sin el `>` esta regla
     también escondía a `.frank-vivo`, el envoltorio que respira, y el
     botón quedaba vacío en el teléfono. */
  .wa-fab > span, .asistente-fab > span:not(.frank) { display: none; }
  .wa-fab, .asistente-fab { width: 3.1rem; min-height: 3.1rem; padding: 0; }
  .asistente-fab { padding-left: 0; }
  .asistente-fab .frank { left: 50%; margin-left: -18px; width: 36px; height: 74px; }
  .foot-end { flex-direction: column; }

  /* Los cuatro datos en 2×2. Apilados uno debajo de otro ocupaban
     media pantalla de puro scroll para decir "3 camiones, 24/7". */
  .fact strong { font-size: 1.9rem; }
  .fact b { margin-top: .5rem; font-size: .86rem; }
  .fact span { font-size: .82rem; }

  /* El número de cada servicio pasa arriba del título. Al lado se
     comía 55 px de ancho y quedaba flotando a media altura, así que
     los títulos se partían en tres líneas. */
  .row { grid-template-columns: 1fr; gap: .3rem; align-items: start; }

  /* Sin la cuadrícula de escritorio (grid-auto-rows) el alto de cada
     foto queda indefinido; aquí sí hace falta fijarlo. A partir de
     720px el grid ya define el alto y esto sobra —de hecho, ahí
     rompía las fotos que ocupan más de una columna. */
  .shots { grid-template-columns: 1fr 1fr; }
  .shot { aspect-ratio: 1; }
  .shot figcaption { padding: 1.2rem .7rem .6rem; font-size: .74rem; }

  /* Áreas táctiles: en el dedo, 20 px de alto no se aciertan. Los
     teléfonos de la barra y los enlaces del pie son de lo que más se
     toca, así que se les da altura de botón real. */
  /* En el celular el aire de escritorio se vuelve puro scroll: eran
     unos 120 px muertos por sección, y con nueve secciones eso es más
     de una pantalla entera de nada. Se aprieta el ritmo vertical sin
     que el contenido quede encimado. */
  .block { padding-block: 2.4rem; }
  .block-tight { padding-block: 1.8rem; }
  .split { gap: 1.4rem; }
  .shots { gap: .5rem; }
  .row { padding-block: 1.05rem; }
  .signals { line-height: 1.62; }
  .urgente { margin-bottom: 1.8rem; padding: 1rem 1.1rem; }

  .bar-links a, .foot-col a, .data a, .arrow {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .bar-in { min-height: 0; }
  .foot-col { gap: 0; }
  .social a { width: 44px; height: 44px; }

  .qa-body { padding-right: 0; }
}

@media (min-width: 720px) {
  .shots { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .shot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .shot:nth-child(2) { grid-column: span 2; }
  .shot:nth-child(3), .shot:nth-child(4) { grid-column: span 1; }
  /* El mosaico nació con cuatro tejas. Al llegar más fotos se le sumó una
     fila de dos mitades, con el mismo alto que la teja grande para que no
     queden dos rendijas anchas. */
  .shot:nth-child(5), .shot:nth-child(6) { grid-column: span 2; grid-row: span 2; }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cover-grid { grid-template-columns: 1fr 1.06fr; }
  .band-in { grid-template-columns: 1fr 1fr; }
  .band:nth-of-type(even) .band-media { order: 2; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .reach { grid-template-columns: 1fr 1fr; }
  .split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .split-sticky { position: sticky; top: 110px; }
}

/* Sangrado de la imagen de portada hasta el borde del viewport */
@media (min-width: 1024px) {
  /* La foto llega justo hasta el borde derecho de la ventana */
  /* La foto se salía hasta el borde de la ventana mientras el texto
     quedaba metido en su columna: todo el peso a un lado y una franja
     muerta al otro. Ahora las dos columnas comparten la medida y la
     imagen termina donde termina la página. */
  .cover-media img { aspect-ratio: 3/2.4; }
  /* La foto sangra hasta el borde de la ventana. Antes cortaba el velo
     antes de ese borde y el corte se veía como un tajo vertical sobre
     la foto. Ahora el velo llega hasta el filo —así no hay costura— y
     lo que se detiene es el texto, con relleno del mismo ancho que
     sobresale la foto. */
  .cover-stamp {
    padding: 4.5rem calc((100vw - min(100vw - var(--gut) * 2, var(--wrap))) / 2 + 1.6rem) 1.4rem 1.6rem;
  }
}

/* =============================================================
   10. Reduced-motion — sólo lo intrusivo
   ============================================================= */

/* =====================================================================
   Cotizador público (/cotizar)
   Las mismas piezas del sitio —papel, tinta, naranja de acción— en
   formato de una pregunta a la vez. No es un formulario largo: es una
   conversación con botones, para que se pueda contestar de pie en el
   patio, con el teléfono en una mano.
   Ver DIRECCION-DE-ARTE.md §22.
   ===================================================================== */
.cot-caja {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.2rem, 3.5vw, 2.2rem);
  box-shadow: 0 1px 2px rgba(27,25,23,.04), 0 12px 32px -22px rgba(27,25,23,.4);
}

/* Riel de pasos. Los números son la promesa de que esto se acaba. */
.cot-rail { display: flex; align-items: center; gap: .45rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.cot-rail li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--muted); font-weight: 600;
}
.cot-rail li::before {
  content: attr(data-n);
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-2);
  font-size: .78rem; color: var(--muted); background: var(--paper);
}
.cot-rail li + li::after { content: none; }
.cot-rail li:not(:last-child) { padding-right: .45rem; border-right: 1px solid var(--line); }
/* [hidden] pierde contra el display explícito de arriba. */
.cot-rail li[hidden] { display: none; }
.cot-rail li.is-hecho::before {
  content: "✓"; background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.cot-rail li.is-ahora { color: var(--ink); }
.cot-rail li.is-ahora::before { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (max-width: 600px) {
  .cot-rail li { font-size: 0; gap: 0; padding-right: .3rem; }
  .cot-rail li::before { font-size: .78rem; }
}

.cot-paso[hidden] { display: none !important; }
.cot-pregunta { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-stretch: var(--ancho-titular); margin: 0 0 .35rem; }
.cot-ayuda { color: var(--muted); font-size: .92rem; margin: 0 0 1.1rem; max-width: 44rem; }

.cot-grupo + .cot-grupo { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.cot-grupo h3 { font-size: .95rem; font-stretch: var(--ancho-texto); margin: 0 0 .7rem; color: var(--ink-2); }

.cot-ops { display: grid; gap: 0; }
.cot-op {
  display: flex; align-items: baseline; gap: .8rem;
  width: 100%; text-align: left;
  padding: 1.05rem 1.1rem;
  background: none; border: 0; border-radius: 0;
  font: inherit; color: var(--ink); cursor: pointer;
  transition: background-color .18s var(--ease-soft);
}
.cot-ops .cot-op:nth-child(odd) { background: var(--paper-2); }
.cot-op b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  letter-spacing: -.01em;
}
.cot-op:hover { background: var(--orange-soft); }
.cot-ops .cot-op.is-elegido { background: var(--orange-tint); box-shadow: inset 3px 0 0 var(--orange); }
.cot-op.is-elegido b::after { content: " ✓"; color: var(--orange-dk); }

.cot-nav {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.cot-atras {
  background: none; border: 0; padding: .5rem 0; font: inherit;
  color: var(--muted); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.cot-atras:hover { color: var(--ink); }
.cot-nav .btn { margin-left: auto; }
.cot-msg { font-size: .88rem; font-weight: 500; color: var(--orange-dk); min-height: 1.2em; flex-basis: 100%; }
.cot-msg.is-error { color: #c0392b; }

/* Monto, IVA y total. Sólo aparece cuando la persona pidió factura. */
.cot-cuentas { margin: 1rem 0 0; max-width: 24rem; }
.cot-cuenta {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-2);
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
.cot-cuenta span:last-child { font-weight: 600; }
.cot-cuenta.es-total {
  border-bottom: 0; margin-top: .4rem; padding: .7rem .9rem;
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-left: 3px solid var(--orange);
  font-size: 1.1rem; font-weight: 700;
}
/* Cuando no se sabe la antigüedad del tanque. */
.cot-nota-ant {
  margin: .9rem 0 0; padding-left: .9rem;
  border-left: 2px solid var(--line-2);
  color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 44rem;
}

/* Cuando la zona no tiene precio automático. No es un error —la persona
   no hizo nada mal y el trabajo se puede hacer igual—, así que no va en
   rojo: es un aviso con las dos salidas a mano. */
.cot-fuera {
  margin-top: 1.1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--orange);
  border-left-width: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 7%, transparent);
}
.cot-fuera p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.cot-fuera .cot-fuera-t {
  color: var(--ink); font-weight: 700; font-size: 1rem; margin-bottom: .35rem;
}
.cot-fuera-acc { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.cot-fuera-acc .btn { flex: 0 1 auto; }
@media (max-width: 520px) { .cot-fuera-acc .btn { flex: 1 1 100%; justify-content: center; } }

/* Resultado. El monto manda; todo lo demás lo acompaña. */
.cot-monto {
  font-family: var(--display); font-stretch: var(--ancho-cartel); font-weight: 700;
  font-size: clamp(2.3rem, 7vw, 3.6rem); line-height: 1; letter-spacing: -.01em;
  margin: .2rem 0 .5rem;
}
/* Sin mayúsculas rastreadas: son la firma tipográfica que Byron ya
   rechazó dos veces. Basta con que sea pequeño y gris. */
.cot-monto small { display: block; font-size: .82rem; font-stretch: var(--ancho-texto); font-weight: 600; color: var(--muted); letter-spacing: .01em; margin-bottom: .45rem; }
.cot-oficial {
  background: var(--orange-tint); border-left: 3px solid var(--orange);
  padding: .85rem 1rem; border-radius: 0 10px 10px 0; color: var(--ink-2);
  font-size: .92rem; margin: 1.2rem 0;
}
.cot-oficial b { color: var(--ink); }
.cot-desglose { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: .4rem; }
.cot-desglose th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; padding-bottom: .4rem; }
.cot-desglose td { padding: .5rem 0; border-top: 1px solid var(--line); }
.cot-desglose td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cot-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.cot-numero { font-size: .88rem; color: var(--muted); margin-top: 1.2rem; }
.cot-numero b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Cargando: el botón se apaga y dice qué está pasando. */
.cot-caja[aria-busy="true"] .cot-op,
.cot-caja[aria-busy="true"] .btn { pointer-events: none; opacity: .55; }

@media (max-width: 720px) {
  .cot-acciones .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .asistente, .wa-fab { transition: none; }

  /* Los tres movimientos que se agregaron también se apagan. El de las
     páginas no se puede desactivar desde @view-transition, pero sí
     quitándole la animación a sus pseudoelementos. */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .qa details::details-content { transition: none; }
}


/* =============================================================
   La banda del cotizador en la portada

   Es la primera cosa después de la portada a propósito: entraban
   cotizaciones solas aun con el botón escondido en el menú, así que
   vale la pena que se vea sin bajar. Se lee como una ventana sobre el
   papel —borde, sombra, el naranja sólo en el filo de arriba— y no
   como otra franja de la página.
   ============================================================= */
/* El ritmo sale del token del sitio, no de un número inventado para esta
   sección sola (§45.4). Sin el padding de abajo, el borde de la caja
   quedaba pegado al de la barra naranja: cero separación, medido. */
.cotiza-banda { padding-block: clamp(2.6rem, 5vw, 4rem); }
.cotiza-caja {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.4rem;
  align-items: center;
  padding: 2.2rem 2.4rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--orange);
  border-radius: 16px;
  box-shadow: 0 18px 44px -26px rgba(27,25,23,.42);
}
/* Sin rótulo en mayúsculas rastreadas encima del título: es la
   tipografía que delata una página hecha por una máquina, y acá
   además no decía nada que el título no dijera. */
.cotiza-txt h2 {
  margin: 0 0 .7rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.15; letter-spacing: -.01em;
}
.cotiza-txt p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 34rem; }

.cotiza-lbl {
  display: block; font-size: .85rem; font-weight: 600; color: var(--muted);
  margin-bottom: .7rem;
}
/* Cada servicio es un renglón que se toca, no una tarjeta: tres
   tarjetas acá harían competencia a las tarjetas de servicios que ya
   vienen más abajo. */
.cotiza-op {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; margin-bottom: .5rem;
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
  background: var(--paper);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.cotiza-op svg { width: 18px; height: 18px; color: var(--orange-dk); flex: 0 0 auto; }
.cotiza-op:hover {
  border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent);
  transform: translateX(3px);
}
.cotiza-todos {
  display: inline-block; margin-top: .3rem; font-size: .88rem; font-weight: 600;
  color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .cotiza-caja { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.7rem 1.4rem; }
  .cotiza-txt p { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .cotiza-op:hover { transform: none; } }


/* =============================================================
   La barra del precio del cotizador (§45.2)

   De tesla.com/modely/design, medido: el monto vive a la vista desde
   la primera respuesta y se actualiza, en vez de aparecer al final.
   La proporción etiqueta:número que se midió allá es 1:3.

   Acá NO va fija al borde inferior como la de Tesla: esta caja ya es
   una isla sobre el papel, y una barra flotante encima de ella sería
   una superficie más (§34, caja sobre caja). Va pegada arriba del
   riel, que es donde la vista ya está.
   ============================================================= */
.cot-barra {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1.2rem;
  margin: 0 0 1.4rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--line-2);
}
.cot-barra-num { display: flex; align-items: baseline; gap: .55rem; }
/* 12px / peso 400 / gris, como la etiqueta medida en la referencia. */
.cot-barra-et { font-size: .78rem; font-weight: 400; color: var(--muted); }
.cot-barra strong {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  font-stretch: var(--ancho-cartel, 80%);
  font-weight: 800; line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Cuando en vez de un monto va una frase ("la cotiza el encargado"),
   el corte de cartel no aplica: es texto, no cifra. */
.cot-barra strong.es-texto {
  font-size: 1.05rem; font-stretch: normal; font-weight: 700;
  letter-spacing: 0; color: var(--orange-dk);
}
.cot-barra-pie { margin: 0; font-size: .8rem; color: var(--muted); }
.cot-barra-pie:empty { display: none; }

/* El paso del lugar, en filas sin caja (§45.2). Antes cada select iba
   en su propio recuadro; eran tres cajas dentro de la caja grande. */
.cot-lugar-filas { display: grid; gap: 0; }
.cot-lugar-filas .f {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .2rem 1rem; margin: 0;
  padding: .85rem 0; border-bottom: 1px solid var(--line-2);
}
.cot-lugar-filas .f label {
  grid-column: 1; font-size: .78rem; font-weight: 400; color: var(--muted); margin: 0;
}
.cot-lugar-filas .f select {
  grid-column: 1 / -1; grid-row: 2;
  border: 0; border-radius: 0; padding: 0; height: auto;
  background: none; font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.cot-lugar-filas .f select:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 4px;
}
.cot-lugar-filas .f select:disabled { color: var(--muted); font-weight: 400; }

/* =============================================================
   MAYÚSCULAS RASTREADAS — la regla

   Byron lo señaló tres veces: el rótulo diminuto en mayúsculas con
   mucho tracking ("CAMIONES CISTERNA", "SIN LLAMAR A NADIE") es la
   tipografía que delata una página hecha por una máquina. No está
   prohibida por fea: está prohibida por repetida.

   En el SITIO PÚBLICO no se usa. Las cifras y los rótulos se
   distinguen por tamaño y peso, que es lo que ya hace el resto.

   Las dos excepciones vivas, las dos declaradas:
     · .marquee span — es un rótulo que corre, y el rótulo del camión
       es la referencia principal del proyecto (§2.1).
     · la barra de la tabla del documento imprimible — una vez por
       pieza, justificada contra la referencia B (§12).
   ============================================================= */