/* ============================================================================
   Grúas y Transportes Ayuso. Hoja de estilo única.

   Decisiones fijadas con el cliente el 31/7/2026:
     - Fondo blanco en toda la web.
     - Azul marino del logo como color dominante, sin retocar el tono.
     - Rojo granate del logo solo como acento (nunca de fondo).
     - El naranja de la flota queda fuera.

   Los dos colores de marca están muestreados del archivo del logo, no elegidos a ojo:
   azul #283078 y granate #900810 son los tonos dominantes reales del JPEG original.
   ============================================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marca */
  --navy:        #283078;
  --navy-deep:   #1b2154;
  --navy-soft:   #3b488c;
  --red:         #900810;
  --red-deep:    #6f060d;

  /* Neutros, todos con una pizca de azul para que no choquen con la marca */
  --ink:         #15183a;
  --muted:       #4e5372;
  --line:        #dfe2ee;
  --tint:        #f4f5fa;
  --white:       #ffffff;

  /* WhatsApp mantiene su verde reconocible. Es un código de canal, no un color de marca.
     Oscurecido respecto al verde de referencia: con texto blanco encima, el tono original
     se quedaba en 4,3:1 y no llegaba al mínimo AA de 4,5:1. Este da 5,1:1. */
  --wa:          #0f7f45;
  --wa-deep:     #0b6537;

  /* Un solo sistema de radios: botones 10, tarjetas 14, píldoras completas. */
  --r-btn:  10px;
  --r-card: 14px;

  --wrap: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Deja hueco a la barra fija de móvil para que no tape el pie. */
  padding-bottom: env(safe-area-inset-bottom);
}

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

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; color: var(--navy); }
/* El tamaño máximo está calculado para que el titular quepa en dos líneas en escritorio.
   Si se cambia el texto del h1, hay que volver a comprobarlo. */
h1 { font-size: clamp(2.05rem, 4.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0; }

a { color: var(--navy); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: var(--r-btn);
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.3rem;
  border-radius: var(--r-btn);
  font-weight: 700; font-size: .98rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color .18s var(--ease), transform .12s var(--ease), border-color .18s var(--ease);
}
.btn--lg { padding: .95rem 1.6rem; font-size: 1.06rem; }

/* Granate para la llamada: es el acento de urgencia de la marca. */
.btn--call { background: var(--red); color: #fff; }
.btn--call:hover { background: var(--red-deep); }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-deep); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }

.btn:active { transform: translateY(1px); }

/* ---------- Cabecera ---------- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header.is-stuck { box-shadow: 0 6px 22px -14px rgb(40 48 120 / .55); }

.header__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
/* El logo original es un JPEG sobre fondo blanco, y ese blanco no es blanco puro, así que
   sobre la página se le veía el recuadro. Con multiply el fondo del archivo desaparece y el
   trazo azul y rojo se conserva intacto, sin tener que retocar el original del cliente. */
.brand__mark, .about__seal, .foot__brand img { mix-blend-mode: multiply; }
.brand__mark { width: auto; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong { font-size: .82rem; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.brand__text em { font-size: 1.12rem; font-weight: 800; font-style: normal; color: var(--navy); letter-spacing: -.01em; }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: .96rem; color: var(--ink);
  padding: .3rem 0; border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--red); }

.burger { display: none; }

/* ---------- Portada ---------- */

/* Portada a sangre: la foto de la flota ocupa el ancho completo y el texto va encima.
   El velo no es un simple oscurecido, es azul marino de marca: así el fondo tira hacia la
   paleta de la empresa en vez de hacia un gris sucio, y el resto de la página sigue en
   blanco, que era la decisión de partida. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(78vh, 620px);
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* Dos capas: una general que asienta la foto en el azul de marca, y otra en degradado
   lateral que refuerza la zona del texto. Con las dos, el titular en blanco pasa de sobra
   el mínimo AA sobre cualquier punto de la foto, incluido el cielo claro. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgb(20 25 62 / .93) 0%,
      rgb(20 25 62 / .86) 38%,
      rgb(20 25 62 / .60) 70%,
      rgb(20 25 62 / .48) 100%),
    rgb(24 29 68 / .30);
}

.hero__in { display: grid; }
.hero__copy { max-width: 46rem; }

.hero h1 { color: #fff; }

/* Lo primero que se lee. Va con el mismo filete granate que la nota de "quiénes somos", para
   que la página tenga un solo recurso de énfasis y no uno distinto en cada sitio. */
/* Sobre el fondo oscuro, el granate del logo no tendría contraste suficiente, así que el
   filete pasa a un rojo más luminoso. Es el mismo recurso, adaptado al fondo. */
.hero__flag {
  border-left: 3px solid #e2504f;
  padding-left: .8rem;
  margin-bottom: 1.15rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.hero__sub {
  margin-top: 1.15rem;
  font-size: clamp(1.05rem, 2.2vw, 1.24rem);
  line-height: 1.55;
  color: #e5e8f6;
  max-width: 42ch;
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.actions--center { justify-content: center; }

/* En móvil los dos botones se apilan. A ancho completo quedan alineados entre sí y dan un
   objetivo grande para el pulgar, que es justo el gesto que buscamos aquí. */
@media (max-width: 560px) {
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
}

.hero__media { margin: 0; }
.hero__media img {
  width: 100%; border-radius: var(--r-card);
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* ---------- Franja de datos ---------- */

/* Franja de datos, justo debajo de la portada. Vuelve a fondo claro ahora que la portada es
   oscura: encadenar dos bloques azules seguidos los fundía en una sola masa y se perdía el
   corte. Así la secuencia respira: cabecera blanca, portada oscura, datos en claro. */
.facts { background: var(--tint); border-bottom: 1px solid var(--line); }
.facts__in {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
}
.fact {
  background: var(--tint);
  padding: 1.2rem clamp(.9rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; gap: .2rem;
}
.fact b { font-size: 1.32rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.fact span { font-size: .88rem; color: var(--muted); line-height: 1.4; }

/* ---------- Secciones ---------- */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint { background: var(--tint); border-block: 1px solid var(--line); }

.shead { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); max-width: 60ch; }
.shead p { margin-top: .7rem; color: var(--muted); font-size: 1.05rem; }

/* ---------- Rejilla de servicios ---------- */

.bento { display: grid; gap: 1.1rem; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover {
  border-color: var(--navy-soft);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -22px rgb(40 48 120 / .6);
}
/* ---------- Galería de fotos dentro de cada tarjeta ----------

   Es un carrusel con scroll horizontal nativo y puntos de anclaje de CSS. Se eligió así, y no
   un carrusel de JavaScript, por tres motivos:

     1. RENDIMIENTO, que era la condición innegociable. Las fotos que no están a la vista dentro
        del carrusel quedan fuera del área visible de su contenedor de scroll, así que el
        navegador NO las descarga hasta que se deslizan. Pasar de 8 a 27 fotos no cambia el peso
        de la carga inicial.
     2. Funciona sin JavaScript: se desliza con el dedo en móvil y con el trackpad en escritorio.
        Las flechas y los puntos los añade el script como mejora, pero no son imprescindibles.
     3. Accesible: es una región enfocable y recorrible con teclado.

   El contenedor conserva la proporción y el flex-grow del diseño anterior, para que las tarjetas
   de una misma fila sigan cuadrando de altura. */

/* El envoltorio ocupa el hueco que antes ocupaba la foto suelta, y sirve de referencia para
   colocar las flechas y los puntos sobre la imagen. */
.card__galeria {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
}

.card__media {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Que el gesto no arrastre también la página al llegar al final del carrusel. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.card__media::-webkit-scrollbar { display: none; }

.card__media picture {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
  position: relative;
}

/* Sin JavaScript solo se ve la primera foto de cada tarjeta, que es la que lleva las URLs en
   el HTML. Las demás guardan su origen en data-srcset y las activa el script, así que
   mostrarlas sin él dejaría huecos vacíos. Se pierde la galería, no el contenido: cada
   servicio sigue teniendo su foto, su título y su descripción. */
html:not(.js) .card__media picture + picture { display: none; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.card__media:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

/* ---------- Controles de la galería (los inyecta el JavaScript) ---------- */

.card__nav {
  position: absolute; z-index: 2;
  top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgb(255 255 255 / .92);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(21 24 58 / .3);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), background-color .18s var(--ease);
}
.card__nav--prev { left: .5rem; }
.card__nav--next { right: .5rem; }
.card__nav svg { width: 18px; height: 18px; fill: currentColor; }
.card__nav:hover { background: #fff; }
.card__nav[hidden] { display: none; }

/* Solo aparecen al pasar el ratón o al enfocar con teclado. En móvil se deslizan con el dedo,
   así que taparían foto sin aportar nada. */
.card:hover .card__nav,
.card__nav:focus-visible { opacity: 1; pointer-events: auto; }

.card__puntos {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: .55rem;
  display: flex; justify-content: center; gap: .3rem;
  pointer-events: none;
}
.card__punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(255 255 255 / .55);
  box-shadow: 0 0 3px rgb(21 24 58 / .5);
  transition: background-color .2s var(--ease), width .2s var(--ease);
}
.card__punto[data-activo] { background: #fff; width: 16px; border-radius: 3px; }

@media (hover: none) {
  .card__nav { display: none; }
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.card__body p { color: var(--muted); font-size: .96rem; }

/* ---------- Cómo trabajamos ---------- */

.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem;
  counter-reset: paso;
}
.flow__step {
  counter-increment: paso;
  padding-top: 1.2rem;
  border-top: 3px solid var(--navy);
}
.flow__step::before {
  content: counter(paso);
  display: block;
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--red);
  margin-bottom: .5rem;
  letter-spacing: -.04em;
}
.flow__step p { margin-top: .5rem; color: var(--muted); }

/* ---------- Quiénes somos ---------- */

.about { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
.about__copy { display: flex; flex-direction: column; gap: 1rem; }
.about__seal { width: 84px; height: auto; }
.about__copy p { color: var(--muted); font-size: 1.04rem; max-width: 56ch; }
.about__note {
  border-left: 3px solid var(--red);
  padding-left: 1rem;
  color: var(--ink) !important;
  font-weight: 600;
}
.about__media img { width: 100%; border-radius: var(--r-card); aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Zona ---------- */

/* La medida se limita en los hijos, no en el contenedor: `.zona` comparte elemento con
   `.wrap`, y ponerle max-width ahí lo centraba con los márgenes automáticos heredados. */
.zona > * { max-width: 62ch; }
.zona p { margin: 1rem 0 1.7rem; color: var(--muted); font-size: 1.06rem; }

/* ---------- Contacto ---------- */

.cta { background: var(--navy); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; }
.cta__in { text-align: center; }
.cta h2 { color: #fff; }
.cta > .wrap > p { margin-top: .8rem; color: #ccd2f0; font-size: 1.08rem; }

.cta__meta {
  margin: 2.6rem auto 0; padding-top: 1.8rem;
  border-top: 1px solid rgb(255 255 255 / .22);
  display: grid; gap: 1.2rem;
  max-width: 760px;
}
.cta__meta dt { font-size: .82rem; color: #b8c0e6; margin-bottom: .15rem; }
.cta__meta dd { margin: 0; font-size: 1.08rem; font-weight: 700; }
.cta__meta a { color: #fff; text-decoration: none; }
.cta__meta a:hover { text-decoration: underline; }

/* ---------- Pie ---------- */

.foot { background: var(--tint); border-top: 1px solid var(--line); padding-top: clamp(2.4rem, 5vw, 3.4rem); }
.foot__in { display: grid; gap: 2.4rem; }
/* El logo es un banner muy apaisado con cuatro bloques de texto pequeño, así que por debajo
   de este ancho los lemas dejan de leerse. Conviene pedir al cliente el original vectorial:
   el archivo disponible es un JPEG de 1600 px y no da para más. */
.foot__brand img { width: min(100%, 560px); height: auto; }
.foot__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.foot__cols h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
.foot__cols ul { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.foot__cols li { font-size: .95rem; color: var(--muted); }
.foot__cols a { color: var(--ink); text-decoration: none; }
.foot__cols a:hover { color: var(--navy); text-decoration: underline; }

.foot__legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.2rem 0 1.4rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between;
  font-size: .87rem; color: var(--muted);
}
.foot__legal nav { display: flex; gap: 1.2rem; }
.foot__legal a { color: var(--muted); }

/* ---------- Aviso de cookies ----------

   Va como franja inferior, no como ventana modal que bloquee la página: esta web solo usa
   almacenamiento técnico, y cortarle el paso a alguien que llega con una avería para pedirle
   un permiso que la ley no exige sería contraproducente.

   Se coloca POR ENCIMA de la barra fija de llamada en móvil, nunca tapándola: el botón de
   llamar es lo más importante de la página y no puede quedar oculto tras un aviso. */

.cookies {
  position: fixed;
  z-index: 70;
  left: 0; right: 0;
  bottom: calc(3.6rem + env(safe-area-inset-bottom));
  background: var(--navy);
  color: #fff;
  border-top: 3px solid var(--red);
  box-shadow: 0 -10px 30px -18px rgb(21 24 58 / .9);
}
.cookies[hidden] { display: none; }

.cookies__in {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.1rem 0 1.2rem;
}
.cookies__texto { font-size: .95rem; line-height: 1.5; color: #dfe3f7; }
.cookies__texto a { color: #fff; text-decoration: underline; }
.cookies__texto a:hover { text-decoration: none; }

.cookies__acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookies__acciones .btn { flex: 1 1 auto; min-width: 8rem; }

/* Blanco sobre el azul: máximo contraste para la única acción del aviso. */
.btn--claro { background: #fff; color: var(--navy); }
.btn--claro:hover { background: #e8ebf8; }

.cookies__cerrar {
  position: absolute; top: .5rem; right: .5rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #b9c1e8; font-size: 1.4rem; line-height: 1;
  border-radius: var(--r-btn);
}
.cookies__cerrar:hover { color: #fff; background: rgb(255 255 255 / .12); }

@media (min-width: 700px) {
  .cookies__in {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 1.6rem; padding: 1rem 0 1.1rem;
  }
  .cookies__texto { max-width: 62ch; }
  .cookies__acciones { flex: 0 0 auto; }
  .cookies__acciones .btn { flex: 0 0 auto; }
}

/* En escritorio no hay barra fija de llamada, así que el aviso se pega abajo del todo. */
@media (min-width: 860px) {
  .cookies { bottom: 0; }
}

/* ---------- Páginas de texto legal ---------- */

.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.legal__in { max-width: 68ch; }
.legal h1 { color: var(--navy); margin-bottom: .4rem; }
.legal__fecha { color: var(--muted); font-size: .92rem; margin-bottom: 2rem; }
.legal h2 {
  font-size: 1.3rem; margin-top: 2.4rem; margin-bottom: .6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.legal p, .legal li { color: var(--ink); font-size: 1.02rem; }
.legal p + p { margin-top: .9rem; }
.legal ul { margin: .9rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.legal a { color: var(--navy); }

.legal__volver { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.5rem; }

/* Tabla de cookies.html. Envuelta en un contenedor con scroll horizontal propio: en móvil, con
   cuatro columnas, es más ancha que la pantalla, y así no desborda la página entera (regla
   general del proyecto: el contenido ancho scrollea en su propio contenedor, nunca el body). */
.legal__tabla-scroll { overflow-x: auto; margin-top: 1rem; }
.legal__tabla { width: 100%; min-width: 640px; border-collapse: collapse; }
.legal__tabla th {
  text-align: left; font-size: .85rem; color: var(--muted);
  padding: .6rem .9rem .6rem 0; border-bottom: 2px solid var(--line);
}
.legal__tabla td {
  padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--line);
  font-size: .95rem; vertical-align: top;
}
.legal__tabla code {
  background: var(--tint); padding: .15rem .4rem; border-radius: 4px; font-size: .9em;
}

/* ---------- Barra fija de móvil ---------- */

.dock {
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgb(255 255 255 / .35);
  border-top: 1px solid rgb(255 255 255 / .25);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px -16px rgb(21 24 58 / .7);
}
.dock__btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem;
}
.dock__btn--call { background: var(--red); }
.dock__btn--wa   { background: var(--wa); }
.dock__btn:active { filter: brightness(.92); }

/* ============================================================================
   Adaptación a pantallas grandes. Móvil primero: todo lo de arriba es una columna.
   ============================================================================ */

/* Objetivos táctiles: en móvil los enlaces de listas se quedaban en 16 px de alto. Se les da
   aire vertical hasta acercarse a los 44 px recomendados sin cambiar el aspecto del bloque. */
@media (max-width: 699px) {
  .foot__cols ul { gap: 0; }
  .foot__cols li { padding-block: .45rem; }
  .foot__cols a { display: inline-block; padding-block: .2rem; }
  .cta__meta dd { padding-block: .2rem; }
}

@media (min-width: 700px) {
  .facts__in { grid-template-columns: repeat(4, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .foot__in { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 900px) {
  /* Gasóleos: foto y texto en paralelo dentro de la celda de ancho completo. */
  .card--split { flex-direction: row; align-items: stretch; }

  /* Apunta al contenedor de la galería, no a cada foto: si se aplicara a las diapositivas
     rompería el ancho del 100% que hace funcionar el deslizamiento.

     La proporción se fija aquí en vez de dejarla en `auto`. Con `auto` la altura la marcaba el
     texto, y como esta tarjeta se quedó con solo dos líneas al retirarle el teléfono, la foto
     colapsaba a una tira fina. Ahora manda la foto y el texto se centra dentro. */
  .card--split .card__galeria { flex: 0 0 42%; aspect-ratio: 5 / 3; }
  .card--split .card__body {
    justify-content: center;
    padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.8rem, 3.5vw, 3.2rem);
    gap: .7rem;
  }
  /* Es una línea de negocio aparte, no un servicio más de la rejilla: se le da algo más de
     cuerpo tipográfico para que el bloque no se lea vacío. */
  .card--split .card__body h3 { font-size: 1.5rem; }
  .card--split .card__body p { font-size: 1.05rem; max-width: 46ch; }

  .about { grid-template-columns: 1fr .88fr; }
  /* Dos columnas, no tres: al retirar el teléfono sin identificar quedaban dos datos y una
     celda vacía descolgada a la derecha. */
  .cta__meta { grid-template-columns: repeat(2, 1fr); max-width: 580px; }
}

/* La portada se parte en dos bastante antes del escritorio. Con el corte en 1024 px, las
   tablets y los portátiles pequeños recibían el texto apilado sobre la foto: mucho blanco
   vacío y ningún punto de apoyo visual. */
@media (min-width: 1024px) {
  .hero { min-height: min(80vh, 660px); }
  .hero__flag { font-size: 1.05rem; }

  /* Rejilla de 6 columnas. Las filas no se repiten: 4+2, luego 2+4, luego 2+2+2,
     y gasóleos ocupando el ancho completo. */
  .bento { grid-template-columns: repeat(6, 1fr); gap: 1.3rem; }
  .card--w2   { grid-column: span 2; }
  .card--w4   { grid-column: span 4; }
  .card--full { grid-column: 1 / -1; }

  /* En las celdas anchas la foto se recorta más apaisada para no comerse la fila. */
  .card--w4 .card__galeria { aspect-ratio: 21 / 9; }

  .foot__cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

/* La barra fija solo tiene sentido en móvil: en escritorio el teléfono ya está en la cabecera. */
@media (min-width: 860px) {
  .dock { display: none; }
}
@media (max-width: 859px) {
  body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- Menú de móvil ---------- */

@media (max-width: 1023px) {
  .header__call { display: none; }

  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    background: none; border: 1px solid var(--line); border-radius: var(--r-btn);
    cursor: pointer;
  }
  .burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
  .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); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -24px rgb(40 48 120 / .8);
    padding: .4rem 0 .8rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: .85rem clamp(1.25rem, 5vw, 2rem);
    border-bottom: none;
    border-left: 3px solid transparent;
  }
  .nav a:hover { border-bottom-color: transparent; border-left-color: var(--red); background: var(--tint); }
}

/* ---------- Aparición de los servicios al bajar ----------

   Hecho con animaciones por scroll nativas de CSS, no con JavaScript. Esto importa: la primera
   versión usaba IntersectionObserver y dejaba las tarjetas invisibles hasta que se ejecutaba el
   script, lo que en una web de averías, con mala cobertura, es un riesgo real. Aquí no hay nada
   que ejecutar, y en los navegadores que todavía no soportan `animation-timeline` la regla
   entera se ignora y las tarjetas salen fijas y visibles. El efecto nunca puede esconder nada.

   El recorrido termina antes de que la tarjeta acabe de entrar en pantalla, para que ninguna
   se quede a medias si no queda scroll por debajo. */

/* Las tarjetas entran desde los lados, alternando: las impares desde la izquierda y las pares
   desde la derecha. En la rejilla de escritorio eso coincide casi siempre con el lado en el
   que acaba cada tarjeta, así que el movimiento parece que las coloca en su sitio.

   El recorte horizontal es imprescindible, no decorativo: mientras dura la animación las
   tarjetas se salen del ancho de la página, y sin él aparecería barra de scroll lateral. Se
   usa `clip` y no `hidden` porque `hidden` crearía un contenedor de scroll. */
#servicios { overflow-x: clip; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento .card {
      animation: entrar-izquierda linear both;
      animation-timeline: view();
      /* El recorrido termina dentro de la fase de entrada. Pasar del 100% dejaría tarjetas ya
         visibles a medio aparecer, que es el fallo que este efecto no se puede permitir. */
      animation-range: entry 0% entry 78%;
    }
    .bento .card:nth-child(even) { animation-name: entrar-derecha; }
  }
}

/* Desplaza con `translate`, no con `transform`. Al terminar, la animación deja fijado el valor
   final de las propiedades que toca, y si tocara `transform` anularía la elevación de la
   tarjeta al pasar el ratón. `translate` es una propiedad aparte y las dos se combinan. */
/* Se desplaza con `translate`, no con `transform`. Al terminar, la animación deja fijado el
   valor final de las propiedades que toca, y si tocara `transform` anularía la elevación de la
   tarjeta al pasar el ratón. `translate` es una propiedad aparte y las dos se combinan.
   El recorrido se mide en % del ancho de la propia tarjeta, así que se adapta solo: mucho en
   escritorio, contenido en móvil, sin necesidad de otra media query. */
@keyframes entrar-izquierda {
  from { opacity: 0; translate: -22% 0; }
  to   { opacity: 1; translate: none; }
}

@keyframes entrar-derecha {
  from { opacity: 0; translate: 22% 0; }
  to   { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}