/* ==========================================================================
 * NETFURGO · lo que comparten TODAS las páginas
 *
 * Cada página lleva su CSS dentro, en un <style>. Eso está bien para lo que
 * es suyo, pero hay dos cosas que NO lo son —los titulares y el menú del
 * móvil— y tenerlas repetidas treinta y dos veces salió caro: el menú se
 * alineaba a la izquierda en siete páginas y se quedaba centrado en las
 * demás, y los titulares de cabecera acabaron midiendo lo mismo que los de
 * sección. Aquí viven una sola vez.
 *
 * SE CARGA DESPUÉS del <style> de la página, justo antes de </head>: al tener
 * la misma especificidad, gana el que va después, así que esto manda sin
 * necesidad de !important.
 * ========================================================================== */

/* ── 1 · Titulares ────────────────────────────────────────────────────────
 * Dos escalones, y el de cabecera SIEMPRE por encima del de sección: el
 * titular que da nombre a la página no puede medir lo mismo que el de un
 * apartado de dentro. La medida de sección es la de «¿NECESITAS AYUDA?» de
 * Contacto, que es la referencia de la casa.
 *
 * El grosor 700 no es un peso de Anton (solo trae el 400): es la negrita que
 * dibuja el navegador, y es la que lleva Contacto. */
:root{
  --tit:clamp(30px,5vw,52px);          /* titular de SECCIÓN */
  --tit-cab:clamp(42px,7.4vw,76px);    /* titular de CABECERA de página */
  --tit-lh:1.04;
  --tit-ls:-.02em;
  --tit-fw:700;
}

.sec-h2,.sec-h,.faq-title,
.land-head h2,
.cta-band h2,.cta h2,.cta-final h2,
.page-h1,.page-hero-content h1,.sec-h1,
.art-head-in h1{
  font-family:var(--fd);
  font-weight:var(--tit-fw);
  font-size:var(--tit);
  line-height:var(--tit-lh);
  letter-spacing:var(--tit-ls);
  text-wrap:balance;
}

/* La cabecera, por encima. Va después para pisar el tamaño de arriba.
   `.sec-h1` entra aquí porque solo lo usa la calculadora de precio, y ahí es
   el titular de la página (un h1), no el de un apartado de dentro. */
.page-h1,.page-hero-content h1,.sec-h1,.art-head-in h1{
  font-size:var(--tit-cab);
  line-height:1.02;
}

/* La casa escribe las cabeceras en versales. El titular de un artículo no. */
.sec-h2,.sec-h1,.sec-h,.page-h1,.faq-title,
.land-head h2,.page-hero-content h1,
.cta-band h2,.cta h2,.cta-final h2{text-transform:uppercase}
.art-head-in h1{text-transform:none}

/* La rayita amarilla delante de la cejilla estaba en unas páginas sí y en
   otras no. En Contacto, que es la referencia, no está. */
.page-hero-ey::before{display:none}


/* ── 2 · Menú del móvil ───────────────────────────────────────────────────
 * Todo a la izquierda, siempre, estés en la página que estés. Antes cada
 * página decidía por su cuenta y al entrar en el blog el menú se centraba. */
.nav-open .nav-links li{min-width:0;width:100%;text-align:left}
.nav-open .nav-links a{text-align:left}

/* La página en la que estás va en un recuadro. Antes el gris arrancaba
   justo en la primera letra y parecía que cortaba la palabra: ahora el
   recuadro respira por los lados y se sale del ancho del texto. */
.nav-open .nav-links a.active{
  background:rgba(255,255,255,.07);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(240,211,0,.22);
}
.nav-open .nav-links a{
  padding-left:12px;
  padding-right:12px;
  border-radius:10px;
}
/* El panel compensa esos 12px para que el texto siga alineado con el logo. */
.nav-open .nav-links{padding-left:12px;padding-right:12px}
/* El submenú de «Furgonetas» se sangra respecto a sus hermanos, no respecto
   al borde: así se ve que cuelga de él. */
.nav-open .nav-dd-menu{padding-left:14px}
/* El botón amarillo de reservar no es un enlace más: sin recuadro ni sangría. */
.nav-open .nav-links .nav-mobile-cta a{padding-left:24px;padding-right:24px;background:var(--y)}


/* ── 3 · La rayita del hero ───────────────────────────────────────────────
 * Baja del enlace de la calculadora de carga hasta «Descubre más». Medía 60
 * px y llegaba a montarse encima de la frase de arriba. */
.hero-scroll-line{height:26px}


/* ── 4 · La foto en las tarjetas de flota de las landings ─────────────────
 * Las páginas de ciudad enseñaban las nueve furgonetas solo con texto, y la
 * portada con foto. Ahora las dos igual. Los márgenes negativos sacan la
 * imagen hasta el borde de la tarjeta (que tiene 24/20 de aire). */
.lf-card{padding-top:0!important;overflow:hidden}
.lf-card .lf-img{
  margin:0 -20px 14px;
  background:#F2F2EE;
  aspect-ratio:640/426;
  overflow:hidden;
}
.lf-card .lf-img img{width:100%;height:100%;object-fit:cover;display:block}
.lf-card .lf-name{margin-top:0}
/* Que la fila de tarjetas quede a la misma altura aunque el modelo ocupe dos
   líneas: el precio y los enlaces alineados, que es lo que se compara. */
.lf-card{display:flex;flex-direction:column}
.lf-card .lf-m3{min-height:2.8em}
.lf-card .lf-links{margin-top:auto}
@media(max-width:480px){.lf-card .lf-img{aspect-ratio:16/9}}

/* ── 5 · Que la barra de abajo del móvil no tape la última franja ─────────
 * En el móvil hay una barra fija abajo (Reservar · WhatsApp). Al llegar al
 * final de la página se comía la última franja del pie: los enlaces legales
 * quedaban debajo de la barra y no se podían ni leer ni pulsar.
 *
 * La portada sí reservaba su hueco; las otras veintitrés páginas que llevan
 * la barra, no —cada una tiene su copia del CSS y esa línea solo estaba en
 * una—. Se arregla aquí, en la hoja compartida, para que valga en todas y no
 * se vuelva a perder al tocar una página suelta.
 *
 * El hueco es la altura real de la barra (54 del botón + 1 del borde) más el
 * aire que el pie ya tenía, y por debajo `env(safe-area-inset-bottom)`, que
 * es la franja del gesto de inicio en los iPhone sin botón. En un móvil sin
 * esa franja vale cero y no sobra nada.
 *
 * Se reserva SIEMPRE que la barra esté en la página, aunque aún esté
 * escondida: aparece en cuanto se desliza, que es justo cuando se llega al
 * final. Donde no hay barra, `:has` quita el hueco; en un navegador antiguo
 * que no entienda `:has` sobra un poco de aire al final, que es mucho mejor
 * que tapar algo. */
@media (max-width: 768px){
  .footer{ padding-bottom: calc(79px + env(safe-area-inset-bottom)) }
  /* La portada añadía además su propio hueco por dentro: ya no hace falta y
     descuadraba el pie respecto a las demás. */
  .foot-bottom{ padding-bottom: 0 }
  body:not(:has(.mcta)) .footer{ padding-bottom: calc(24px + env(safe-area-inset-bottom)) }
}

/* ── 6 · La identidad fiscal en el pie de las páginas de reserva ──────────
 * La reserva y la confirmación tienen un pie corto, sin la rejilla de
 * enlaces del resto. Aquí es donde se cierra el trato, así que es donde más
 * falta hace decir quién es la empresa con la que se contrata. */
.foot-legal{
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
  opacity:.65;
}
.foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}