/* =========================================================
   PORTADA — Quechua Express
   =========================================================
   LIENZO LIMPIO: hoy la web son dos piezas, la cabecera y el
   fondo. La estructura se monta encima cuando el dueño la
   defina, y estos tokens ya están listos para sostenerla.

   Reglas de la casa: el fondo es fotografía real, nunca
   ilustración; el texto sobre foto siempre lleva velo para
   que se lea; un solo acento (el turquesa de la marca) y los
   números en mono.
   ========================================================= */

:root {
  --hondo: #05222A;          /* el fondo del velo: teal casi negro */
  --tinta: #14202B;
  --texto-2: #3A4854;
  --gris: #667581;
  --gris-claro: #9AA6B0;
  --blanco: #FFFFFF;
  --papel: #F7FAFB;
  --marca: #14808F;
  --marca-osc: #0B5B67;
  --marca-suave: #E1F0F2;
  --cian: #5FCBD6;
  --borde: #DFE6EC;
  --borde-fuerte: #C4CFD7;
  --f-ui: "Archivo", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* qué parte de la foto sobrevive cuando la pantalla recorta.
     50% 58% deja la fila de camiones a la vista. */
  --foto-encuadre: 50% 58%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Archivo es una grotesca del linaje industrial del XIX, variable en
   ancho (75–100%) y peso (400–800): un solo archivo por subset cubre
   titular, texto y navegación cambiando la ANCHURA, que es el mismo
   mecanismo con el que Scania, DHL, DB y Caterpillar separan la voz de
   display de la de texto. Además es de Omnibus-Type, de Buenos Aires.

   Reemplazó a Plus Jakarta Sans, que era geométrica —círculos anchos,
   uniones suaves, ascendentes largas— y por eso leía a plantilla de
   software y no a empresa de carga. */
body {
  font-family: var(--f-ui);
  color: var(--tinta);
  background: var(--hondo);
  /* SIN antialiased a propósito. Sobre el teal casi negro del fondo,
     ese ajuste adelgaza los trazos y se come justo el peso que se
     busca en una tipografía industrial. */
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* presente para buscadores y lectores de pantalla, ausente en la pantalla */
.oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* =========================================================
   LA CABECERA — dos pisos
   =========================================================
   Lo que delataba a la anterior no era el color: era que los
   cuatro enlaces pesaban igual. Sin jerarquía entre navegar y
   actuar, cualquier barra se lee a plantilla por bien
   dibujada que esté.

   Aquí la franja de arriba lleva el servicio y la barra de
   abajo lleva la marca, la navegación y UN solo acto.
   ========================================================= */
.encabezado { position: fixed; inset: 0 0 auto 0; z-index: 50; }

/* --- la franja de servicio ------------------------------- */
.franja { background: #04191F; }
.franja-int {
  max-width: 78rem; margin: 0 auto; padding: 0 1.5rem;
  height: 2.1rem; display: flex; align-items: center; gap: 1.5rem;
}
/* dónde opera la casa, dicho en la propia cabecera: es la clase de
   dato que una plantilla nunca trae porque no sabe de qué va la
   empresa */
.franja-donde {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.franja-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.franja-nav a {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62);
  text-decoration: none; white-space: nowrap; transition: color .15s;
}
.franja-nav a:hover { color: #fff; }

/* --- la barra principal ----------------------------------
   Nace transparente sobre la fotografía y se vuelve sólida al
   bajar. El velo del estado transparente existe solo en el
   scroll cero, sobre el trozo de foto que sí controlamos. */
.barra {
  background: linear-gradient(180deg, rgba(4, 25, 31, .55) 0%, rgba(4, 25, 31, 0) 100%);
  border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease;
}
.pegada .barra {
  background: #04191F;
  border-bottom-color: rgba(95, 203, 214, .22);
}
.barra-int {
  max-width: 78rem; margin: 0 auto; padding: 0 1.5rem;
  height: 4.1rem; display: flex; align-items: center; gap: 2.2rem;
}

.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca-q { width: 2.05rem; height: 2.05rem; display: block; flex: none; }
.marca-q img { width: 100%; height: 100%; }
.marca-nombre {
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: #fff;
  white-space: nowrap;
}

/* la navegación en versales con tracking: es señalética, no menú de
   aplicación. El subrayado que aparece al pasar es toda la firma de
   interacción — no hace falta más */
.menu { margin-left: auto; display: flex; align-items: center; gap: 2rem; }
.menu a {
  position: relative; padding: .35rem 0;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-size: .73rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; transition: color .15s;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--cian);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.menu a:hover { color: #fff; }
.menu a:hover::after { transform: scaleX(1); }

/* El botón va RECTO, casi sin radio. La píldora redondeada es, junto
   a la geométrica, lo que más grita plantilla: en Werner los enlaces
   salen redondeados porque es lo que trae su megamenú por defecto,
   no porque alguien lo decidiera. Aquí se decide. */
.cta {
  flex: none; text-decoration: none;
  background: var(--marca); color: #fff;
  padding: .72rem 1.3rem; border-radius: 3px;
  font-size: .73rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .15s;
}
.cta:hover { background: #1796A7; }

/* =========================================================
   EL FONDO — la flota en el patio
   =========================================================
   La foto se sube en color y sin tocar. El revelado se hace
   aquí, en el navegador, con tres capas encima:

     .fondo-tono    lighten  → dónde caen las sombras
     .fondo-luz     darken   → dónde topan las luces
     .fondo-vineta  normal   → el velo que sostiene el texto

   Las dos primeras arman el duotono; los colores de cada una
   los pone el grado, más abajo.

   isolation:isolate encierra los modos de fusión dentro de la
   portada. Sin eso se escapan al fondo del body.
   ========================================================= */
.portada {
  position: relative; isolation: isolate;
  /* la altura la manda .escena (76svh): así la primera pantalla
     alcanza a mostrar el arranque de las acciones y la página no
     abre con un tercio de cielo vacío */
  /* si la foto tarda o falla, la página nunca se ve en blanco */
  background: linear-gradient(165deg, #0A3038 0%, #04191F 55%, #030F14 100%);
  overflow: hidden;
}

.fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

/* La fotografía va QUIETA, a propósito y por decisión del dueño. Se
   probaron encima un revelado con máscara, una trama con sombreador y
   un relieve por mapa de profundidad; ninguno convenció. Tampoco queda
   el vaivén lento del encuadre que hubo un tiempo. La foto de la flota
   se sostiene sola. */
.fondo-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foto-encuadre);
}

.fondo-tono,
.fondo-luz,
.fondo-vineta { position: absolute; inset: 0; pointer-events: none; }

/* =========================================================
   LA ENTRADA
   =========================================================
   Cada pieza del héroe sube y aparece con un retardo propio.
   El escalonado es lo que separa una página que "carga" de
   una que "se presenta".

   OJO CON EL ORDEN DE ESTAS REGLAS. La versión anterior ponía
   el contenido en opacity:0 y confiaba en que la animación lo
   trajera de vuelta. Eso deja la página EN BLANCO si la
   animación no corre: sin JavaScript, con el motor de estilos
   ocupado, o en un navegador que congela animaciones fuera de
   foco. Se comprobó de verdad y el título salía a medias y la
   barra de rastreo no salía.

   Por eso ahora manda lo seguro: todo nace visible, y la
   entrada solo existe cuando <html> lleva la clase .anima, que
   pone un script mínimo en la cabecera. Si ese script no corre,
   no hay animación — pero la página se ve entera, que es lo
   único que no se puede negociar.
   ========================================================= */
.anima [data-sube] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: subir .85s cubic-bezier(.16, .84, .34, 1) forwards;
}
.anima [data-sube="1"] { animation-delay: .10s; }
.anima [data-sube="2"] { animation-delay: .22s; }
.anima [data-sube="3"] { animation-delay: .34s; }
.anima [data-sube="4"] { animation-delay: .46s; }

@keyframes subir {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* las tarjetas y las cifras entran cuando el scroll las alcanza.
   La clase .aparece solo la reparte el JavaScript, y solo si el
   navegador tiene IntersectionObserver para poder quitarla. */
.aparece {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, .84, .34, 1);
}
.aparece.dentro { opacity: 1; transform: translate3d(0, 0, 0); }
.aparece:nth-child(2) { transition-delay: .09s; }
.aparece:nth-child(3) { transition-delay: .18s; }
.aparece:nth-child(4) { transition-delay: .27s; }

/* =========================================================
   LOS DUOTONOS
   =========================================================
   Se cambia la clase de <main> en inicio.blade.php y cambia
   el revelado entero. No hace falta tocar nada más ni volver
   a exportar la imagen.

     duo-noche      el más hondo, la flota apenas insinuada
     duo-petroleo   el turquesa de la casa, con cuerpo
     duo-media      la flota se reconoce sin esfuerzo
     duo-cian       el cian de marca, domado

   POR QUÉ DUOTONO Y NO UN VELO. Un velo deja que la foto
   conserve sus colores y les echa una capa encima: el
   resultado sale grisáceo, lavado, y se lee a "foto con
   filtro". El duotono REMAPEA cada píxel: primero todo pasa a
   gris, y después las sombras se vuelven el color oscuro de la
   casa y las luces el claro. No queda ni un color ajeno a la
   paleta, y por eso se lee a superficie de marca con una
   fotografía dentro. Es lo que hace Cruz del Sur con su azul.

   CÓMO SE ARMA, sin sombreadores ni imágenes prehechas:
     .fondo-foto   grayscale + contraste + brillo bajo
     .fondo-tono   lighten con el color OSCURO → nada puede ser
                   más oscuro que él: ahí caen las sombras
     .fondo-luz    darken  con el color CLARO  → nada puede ser
                   más claro que él: ahí topan las luces
   Entre esos dos topes, la foto entera queda mapeada.

   EL BRILLO SE BAJA ANTES DEL MAPEO. Es lo que hunde los
   medios tonos; sin eso el cielo se va a cian brillante, el
   texto pelea y se pierde la hondura. Fue justo lo que falló
   en el primer intento.
   ========================================================= */

/* la fotografía entra en gris: el duotono se hace sobre la
   luminancia, nunca sobre el color original */
.fondo-foto { filter: grayscale(1) contrast(1.06) brightness(.82); }
.fondo-tono { mix-blend-mode: lighten; }
.fondo-luz  { mix-blend-mode: darken; }

/* el velo que sostiene el texto es el mismo para los cuatro:
   oscurece arriba para la cabecera y abajo para entregar la
   sección clara sin un corte seco */
.fondo-vineta {
  background: linear-gradient(180deg,
    rgba(1, 12, 17, .40) 0%, rgba(1, 12, 17, .04) 32%,
    rgba(1, 12, 17, .04) 62%, rgba(1, 12, 17, .46) 100%);
}

/* --- NOCHE — el que está puesto ---------------------------
   El más hondo de los cuatro, y el más cerca de la referencia
   que trajo el dueño: la flota se insinúa detrás del contenido
   en vez de competir con él. */
.duo-noche .fondo-tono { background: #021419; }
.duo-noche .fondo-luz  { background: #42707B; }

/* --- PETRÓLEO — el turquesa de la casa, con cuerpo -------- */
.duo-petroleo .fondo-tono { background: #04202A; }
.duo-petroleo .fondo-luz  { background: #6E9EA8; }

/* --- MEDIA LUZ — la flota se reconoce sin esfuerzo -------- */
.duo-media .fondo-tono { background: #052932; }
.duo-media .fondo-luz  { background: #8FB8C0; }

/* --- CIAN CONTENIDO — el cian de marca, domado ------------ */
.duo-cian .fondo-tono { background: #03202B; }
.duo-cian .fondo-luz  { background: #4FA9B5; }


/* una veladura de grano finísimo: le quita el plástico a la foto
   comprimida y disimula las bandas del degradado */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .4;
  background-image: radial-gradient(rgba(255, 255, 255, .045) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* =========================================================
   LA ESCENA — lo que vive sobre la fotografía
   =========================================================
   El orden es el que dictó el dueño: el rastreo PRIMERO,
   después los tres botones. Todo al centro, en una pantalla.
   ========================================================= */
/* El héroe ya no ocupa la pantalla entera: con 100svh quedaba un tercio
   de cielo vacío arriba y las acciones caían fuera de vista. A 76svh la
   primera pantalla muestra el rastreo Y el arranque de las acciones, que
   es lo que hace que la página se sienta con contenido y no con relleno. */
.escena {
  min-height: 76svh;
  max-width: 62rem; margin: 0 auto; padding: 8rem 1.5rem 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; color: #fff;
}
/* El titular va CONDENSADO (font-stretch 82%) y con interlineado
   compacto. Es la regla del manual de Caterpillar —versales apretadas,
   interlineado corto— y produce más sensación de masa que cualquier
   cambio de familia. El ancho estrecho además resuelve el español:
   ABASTECIMIENTO o CHALLHUAHUACHO caben sin encoger el cuerpo. */
.escena h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -.015em; line-height: 1.0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.lema {
  margin-top: .8rem; font-size: clamp(.9rem, 1.6vw, 1.02rem);
  color: rgba(255, 255, 255, .85);
}

/* --- el rastreador: la barra, con lo necesario ---
   Más angosta que la fila de tarjetas a propósito: es un buscador,
   no una pancarta. Sin ejemplos en los campos: «N° de orden» y
   «Código» dicen todo lo que hace falta. */
.rastreador {
  margin: 2.2rem auto 0; width: 100%; max-width: 46rem;
  display: flex; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
}
/* el rótulo fijo «Orden de servicio»: el mismo traje que tenía el
   desplegable, sin flecha ni opciones */
.rastreador .rotulo {
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--tinta);
  background: var(--marca-suave); padding: 0 .9rem; flex: none;
  display: flex; align-items: center; white-space: nowrap;
}
.rastreador input {
  flex: 1; min-width: 0; font: inherit; font-size: .95rem; color: var(--tinta);
  border: 0; outline: none; padding: 1.05rem 1.1rem;
}
/* el código corto de la boleta: angosto y con su raya de frontera */
.rastreador input[name="codigo"] {
  flex: none; width: 12.5rem;
  border-left: 1px solid var(--borde); font-family: var(--f-mono); font-size: .88rem;
}
/* la pista bajo la barra: dónde viven los dos datos, con ejemplo */
.rastreador-pista {
  margin: .75rem auto 0; max-width: 46rem; font-size: .82rem; line-height: 1.5;
  color: rgba(255, 255, 255, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.rastreador-pista .mono { font-family: var(--f-mono); font-size: .8rem; color: #fff; }
.rastreador input::placeholder { color: var(--gris); }
.rastreador button {
  font: inherit; font-size: .95rem; font-weight: 700; color: #fff;
  background: var(--marca); border: 0; cursor: pointer;
  padding: 0 1.5rem; display: flex; align-items: center; gap: .5rem;
  transition: background .15s;
}
.rastreador button:hover { background: var(--marca-osc); }

/* =========================================================
   LAS TRES ACCIONES — sobre piso firme, no flotando
   =========================================================
   Los objetos están modelados en isométrico con la paleta de
   la casa: la balanza con las cajas, la ruta de montaña con
   el pin, y el camión de estacas turquesa —el mismo Isuzu
   que tiene la empresa—. Un icono de línea genérico habría
   servido igual de mal que el de cualquier plantilla.
   ========================================================= */
/* Van dentro del héroe, pegadas al rastreador. La sombra es la misma
   que la de la barra para que las dos piezas se lean como un solo
   bloque de mando apoyado sobre la fotografía. */
.acciones {
  width: 100%; max-width: 56rem; margin: .9rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem;
}
.accion {
  display: flex; align-items: center; gap: .95rem; text-align: left;
  text-decoration: none; color: var(--tinta);
  background: #fff; border-radius: 12px;
  padding: 1.15rem 1.2rem 1.15rem .9rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .30);
  transition: box-shadow .18s, transform .18s;
}
.accion:hover {
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38);
  transform: translateY(-2px);
}
.accion img { width: 5.3rem; height: 5.3rem; flex: none; }
.accion div { min-width: 0; }
.accion b { display: block; font-size: 1.02rem; letter-spacing: -.015em; }
/* la descripción se recorta a dos líneas: en tres, las tarjetas
   crecen de alto distinto y el bloque pierde el filo */
.accion span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: .2rem; font-size: .82rem; line-height: 1.4; color: var(--texto-2);
}
.flecha {
  flex: none; font-style: normal; font-size: 1.1rem; color: var(--marca);
  opacity: .45; transition: opacity .18s, transform .18s;
}
.accion:hover .flecha { opacity: 1; transform: translateX(3px); }

/* =========================================================
   LA FRANJA DE RESPALDO — cifras, no adjetivos
   =========================================================
   Lo que hace que una web de carga inspire confianza no es
   decir «somos serios»: es poner números que se pueden
   verificar. Estos salen del historial real del sistema.
   ========================================================= */
.respaldo { background: var(--hondo); padding: 2.2rem 1.5rem; }
.respaldo-int {
  max-width: 68rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.respaldo div { text-align: center; }
.respaldo b {
  display: block; font-size: 2.2rem; font-weight: 600; color: #fff;
  letter-spacing: -.03em; line-height: 1;
}
/* la etiqueta bajo la cifra va en versales con tracking amplio: es el
   equivalente al esténcil sobre el furgón, y hace buena parte del
   trabajo de seriedad industrial por sí sola */
.respaldo span {
  display: block; margin-top: .6rem;
  font-size: .68rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* =========================================================
   LOS TRES SERVICIOS — una sola sección, tres espacios
   ========================================================= */
.servicios { background: var(--papel); padding: 4rem 1.5rem 4.2rem; }
.servicios h2, .sedes h2 {
  max-width: 68rem; margin: 0 auto; color: var(--tinta);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700;
  font-stretch: 88%; letter-spacing: -.01em; line-height: 1.1;
}
/* Las tres van grandes a propósito: es la única sección que explica
   QUÉ hace la empresa, y con el objeto modelado en grande cada
   servicio se reconoce antes de leerse. */
.servicios-tres {
  max-width: 68rem; margin: 2.2rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.servicios article {
  background: #fff; border: 1px solid var(--borde); border-radius: 18px;
  padding: 2.2rem 2rem 2.3rem; color: var(--tinta);
}
.servicios img { width: 9rem; height: 9rem; margin: -.8rem 0 .4rem -.9rem; }
.servicios h3 { margin-top: .5rem; font-size: 1.35rem; letter-spacing: -.02em; }
.tiempo { color: var(--marca-osc); font-size: .92rem; font-weight: 600; margin-top: .25rem; }
.servicios article p:last-child {
  margin-top: .8rem; font-size: .95rem; line-height: 1.6; color: var(--texto-2);
}

/* =========================================================
   LAS SEDES — la línea del corredor, sin mapa ni complique
   ========================================================= */
.sedes { background: #fff; border-top: 1px solid var(--borde); padding: 4rem 1.5rem 4.2rem; }
.sedes-linea {
  max-width: 68rem; margin: 1.8rem auto 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem;
  counter-reset: sede;
}
.sedes-linea li {
  position: relative; padding: 1rem .5rem 1rem 1.1rem;
  border-left: 3px solid var(--marca); background: var(--papel);
  border-radius: 0 10px 10px 0; color: var(--tinta);
}
.sedes-linea b { display: block; font-size: .92rem; letter-spacing: -.01em; }
.sedes-linea .mono { font-size: .75rem; color: var(--gris); }
.sedes-nota {
  max-width: 68rem; margin: 1.2rem auto 0; color: var(--texto-2); font-size: .88rem;
}

/* =========================================================
   LA GALERÍA — «Entregamos más que paquetes»
   =========================================================
   Va sobre el teal hondo y no sobre papel: es la única
   sección de fotografía de la página y el fondo oscuro deja
   que el color de las fotos sea lo único que brilla. Las
   fotos van SIN tratar — la sección se llama «imágenes
   reales», tintarlas sería contradecirla.
   ========================================================= */
.galeria { background: var(--hondo); padding: 4.4rem 1.5rem 4.6rem; }
.galeria h2 {
  max-width: var(--riel); margin: 0 auto; color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.14;
}
.galeria-bajada {
  max-width: var(--riel); margin: .9rem auto 0;
  color: rgba(255, 255, 255, .6); font-size: .92rem;
}
.galeria-tres {
  max-width: var(--riel); margin: 2.4rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.galeria figure { margin: 0; }

/* EL REVELADO COMÚN.
   Las tres fotos vienen de días, cámaras y luces distintas: un valle
   verde muy saturado, una puna gris plomo y un cielo azul con nubes
   blancas. Puestas juntas y crudas no parecen del mismo set, y eso es
   lo que se veía barato.

   El arreglo es el de cualquier reportaje: un REVELADO ÚNICO para
   toda la serie. Se baja la saturación —que es lo que más las separa—
   se iguala el contraste, y encima va un velo del teal de la casa en
   fusión «color», que toma el TONO del velo y la LUMINANCIA de cada
   foto. Así las tres caen a la misma temperatura sin perder su propia
   luz, y sin convertirse en duotono: siguen siendo fotos.

   isolation:isolate encierra la fusión dentro del marco; si no, se
   escaparía al fondo de la sección. */
.galeria .marco {
  position: relative; isolation: isolate;
  border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.galeria img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(.68) contrast(1.07) brightness(.97);
}
.galeria .marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #0E5E6B;
  mix-blend-mode: color;
  opacity: .34;
}
/* un filo interior finísimo: asienta la foto sobre el fondo oscuro
   en vez de dejarla flotando recortada */
.galeria .marco::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.galeria figcaption {
  margin-top: .75rem; font-size: .8rem; line-height: 1.45;
  color: rgba(255, 255, 255, .55);
}

/* =========================================================
   EL PIE
   ========================================================= */
.pie { background: var(--hondo); color: rgba(255, 255, 255, .85); padding: 3rem 1.5rem 1.6rem; }
.pie-int {
  max-width: 68rem; margin: 0 auto; display: flex; gap: 2.5rem;
  align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.pie-marca { display: flex; gap: .8rem; align-items: flex-start; max-width: 20rem; }
.pie-marca .marca-q { width: 2.2rem; height: 2.2rem; flex: none; }
.pie-marca b { color: #fff; }
.pie-marca p { font-size: .82rem; color: rgba(255, 255, 255, .6); margin-top: .2rem; }
.pie-enlaces { display: grid; gap: .55rem; }
.pie-enlaces a {
  color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.pie-enlaces a:hover { color: #fff; }
.pie-libro {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
  padding: .8rem 1rem; transition: border-color .15s;
}
.pie-libro:hover { border-color: rgba(255, 255, 255, .6); }
.pie-libro b { font-size: .8rem; line-height: 1.25; letter-spacing: .01em; }
.pie-legal {
  max-width: 68rem; margin: 2.2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .76rem; color: rgba(255, 255, 255, .45);
}

/* =========================================================
   PANTALLAS CHICAS
   ========================================================= */
@media (max-width: 980px) {
  /* en angosto las tres no caben en fila: pasan a columna y el bloque
     de mando se alarga bajo el rastreador */
  .acciones { grid-template-columns: 1fr; gap: .55rem; }
  .accion span { -webkit-line-clamp: 3; }
}
@media (max-width: 860px) {
  .servicios-tres { grid-template-columns: 1fr; }
  .galeria-tres { grid-template-columns: 1fr; gap: 1.6rem; }
  .sedes-linea { grid-template-columns: repeat(3, 1fr); }
  .respaldo-int { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
}
@media (max-width: 900px) {
  /* la franja de servicio se retira: en angosto compite con la barra
     y su contenido no es lo que se viene a hacer. Werner la oculta
     bajo 980 por la misma razón. */
  .franja { display: none; }
}
@media (max-width: 760px) {
  .barra-int { padding: 0 1.1rem; gap: 1rem; height: 3.9rem; }
  /* en angosto la cabecera guarda solo lo vital: la marca y cotizar.
     Los tres enlaces siguen a un scroll de distancia en el pie. */
  .menu { display: none; }
  .cta { margin-left: auto; padding: .6rem 1rem; font-size: .68rem; }
  /* En vertical el recorte se come casi dos tercios del ancho. Se
     encuadra sobre el Isuzu, que es el que lleva la carrocería
     turquesa y el letrero: si hay que perder camiones, que sobreviva
     el que muestra la marca. */
  :root { --foto-encuadre: 34% 54%; }

  .escena { padding-top: 6rem; min-height: 68svh; }
  .rastreador { flex-wrap: wrap; border-radius: 14px; }
  .rastreador .rotulo { flex: 1 1 100%; padding: .8rem .9rem; }
  /* en el teléfono cada dato en su fila: rótulo, orden, código, botón.
     Repartidos en una fila el ejemplo del código salía cortado */
  .rastreador input { flex: 1 1 100%; }
  .rastreador input[name="codigo"] { flex: 1 1 100%; width: auto; border-left: 0; border-top: 1px solid var(--borde); }
  /* el botón cae a su propia fila: que la llene y centre, no que
     quede huérfano a la izquierda sobre una franja blanca */
  .rastreador button { padding: .9rem 1.2rem; flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .sedes-linea { grid-template-columns: 1fr 1fr; }
  .pie-int { gap: 1.6rem; }
}
@media (max-width: 420px) {
  .marca-nombre { font-size: .92rem; }
  }

/* =========================================================
   QUIEN PIDE QUIETUD
   =========================================================
   El JavaScript se apaga solo cuando el sistema pide reducir
   movimiento, pero el CSS tiene que hacer su parte: sin esto
   el encuadre seguiría respirando y las piezas nacerían
   invisibles, porque su opacidad la pone la animación.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .fondo-foto { animation: none; transform: none; }
  .anima [data-sube], .aparece { opacity: 1; transform: none; animation: none; }
}