@charset "UTF-8";
/* =========================================================================
   Transportes ADA — hoja de estilos única
   Mobile first. Sin frameworks, sin build. Editable a mano.

   Índice
   01. Tokens (color, tipografía, medidas)
   02. Reajuste base y accesibilidad
   03. Tipografía y utilidades de texto
   04. Layout: contenedor y secciones
   05. Botones y enlaces
   06. Cabecera y navegación
   07. Hero y dibujo técnico acotado (elemento firma)
   08. Servicios
   09. Flota
   10. Ventajas
   11. Proceso
   12. Clientes
   13. Contacto y formulario
   14. Pie
   15. WhatsApp flotante
   16. Animación de aparición
   17. Impresión
   ========================================================================= */

/* ---------- 01. TOKENS ------------------------------------------------- */
:root {
  /* Color. Cambiar aquí modifica todo el sitio. */
  --casco:        #0B1A24;  /* acero casi negro: fondos oscuros y titulares */
  --casco-suave:  #12293A;  /* variante para tarjetas sobre fondo oscuro */
  --azul:         #10456B;  /* azul faena: color primario */
  --azul-luz:     #2F7FB0;  /* enlaces y hover sobre fondo oscuro */
  --vial:         #EFB700;  /* amarillo vial: acento y llamadas a la acción */
  --vial-oscuro:  #D4A300;  /* hover del acento */
  --hormigon:     #EAE9E4;  /* fondo de página */
  --hormigon-2:   #DEDDD7;  /* bordes y separadores sobre claro */
  --acero:        #4E5A64;  /* texto secundario */
  --blanco:       #FFFFFF;
  --error:        #B3261E;
  --exito:        #1B6E3C;

  /* Tipografía. Fallbacks del sistema por si Google Fonts no carga. */
  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texto:   "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Medidas */
  --ancho:       1200px;
  --margen:      20px;
  --radio:       3px;   /* esquina mínima: el sector es industrial, no blando */
  --radio-g:     6px;
  --sombra:      0 1px 2px rgba(11, 26, 36, .06), 0 8px 24px -12px rgba(11, 26, 36, .18);
  --sombra-alta: 0 2px 4px rgba(11, 26, 36, .08), 0 18px 40px -18px rgba(11, 26, 36, .30);
  --transicion:  180ms cubic-bezier(.4, 0, .2, 1);
  --cabecera-h:  68px;

  /* Foto de FONDO del hero, detrás del texto. Es distinta de la foto que
     reemplaza al dibujo técnico (esa es img/hero-camion.jpg y entra sola).
     Viene desactivada para que el sitio no pida un archivo inexistente.
     Para activarla: sube tu foto como img/fondo-hero.jpg y cambia esta línea por
     --hero-foto: url("../img/fondo-hero.jpg");
     Tamaño recomendado: 1920 x 1080 px, menos de 300 KB. */
  --hero-foto: none;
}

@media (min-width: 900px) {
  :root { --margen: 40px; --cabecera-h: 80px; }
}

/* ---------- 02. REAJUSTE BASE ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla */
  scroll-padding-top: calc(var(--cabecera-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hormigon);
  color: var(--casco);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Estilo por defecto de los íconos del sprite.
   Se aplica al elemento <svg>; los hijos con atributos propios los conservan. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--casco); }

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 3px solid var(--vial);
  outline-offset: 3px;
  border-radius: 2px;
}
.seccion--oscura :focus-visible,
.hero :focus-visible,
.pie :focus-visible { outline-color: var(--vial); }

/* Enlace de salto para teclado */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--vial);
  color: var(--casco);
  padding: 12px 20px;
  font-weight: 600;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---------- 03. TIPOGRAFÍA --------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 .4em;
  text-wrap: balance;
}

.epigrafe {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.epigrafe::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--vial);
  flex: none;
}

.etiqueta {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acero);
  margin: 0 0 4px;
}

.titulo {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  color: var(--casco);
}

.entradilla {
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  color: var(--acero);
  max-width: 62ch;
  margin: 0;
}

.encabezado { margin-bottom: 48px; max-width: 68ch; }
.encabezado--claro .titulo { color: var(--blanco); }
.encabezado--claro .entradilla { color: rgba(255, 255, 255, .74); }
.encabezado--claro .epigrafe { color: var(--vial); }

.seccion--oscura .epigrafe { color: var(--vial); }

/* ---------- 04. LAYOUT -------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  padding-block: clamp(56px, 7vw, 104px);
}
.seccion--hormigon {
  background: linear-gradient(180deg, #E3E2DC 0%, var(--hormigon) 100%);
  border-block: 1px solid var(--hormigon-2);
}
.seccion--oscura {
  background: var(--casco);
  color: rgba(255, 255, 255, .78);
}
.seccion--oscura .titulo { color: var(--blanco); }

/* ---------- 05. BOTONES ------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton svg { width: 18px; height: 18px; flex: none; stroke-width: 2; }

.boton--acento {
  background: var(--vial);
  border-color: var(--vial);
  color: var(--casco);
}
.boton--acento:hover,
.boton--acento:focus-visible {
  background: var(--vial-oscuro);
  border-color: var(--vial-oscuro);
  color: var(--casco);
  transform: translateY(-1px);
}

.boton--fantasma {
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: var(--blanco);
}
.boton--fantasma:hover,
.boton--fantasma:focus-visible {
  border-color: var(--blanco);
  background: rgba(255, 255, 255, .08);
  color: var(--blanco);
}

.boton--grande { padding: 15px 28px; font-size: 1.125rem; }
.boton--bloque { width: 100%; padding: 16px 24px; font-size: 1.125rem; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--azul);
  border-bottom: 2px solid var(--vial);
  padding-bottom: 2px;
  transition: gap var(--transicion), color var(--transicion);
}
.enlace-flecha svg { width: 17px; height: 17px; stroke-width: 2; }
.enlace-flecha:hover { gap: 14px; color: var(--casco); }

/* ---------- 06. CABECERA ------------------------------------------------ */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(11, 26, 36, 0);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.cabecera.fijo {
  background: var(--casco);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 8px 24px -14px rgba(0, 0, 0, .6);
}
/* Cuando el menú móvil está abierto también necesita fondo sólido */
.cabecera.abierto { background: var(--casco); }

.cabecera__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--cabecera-h);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--blanco);
  flex: none;
}
.marca:hover { color: var(--blanco); }
.marca__signo {
  width: 42px; height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linejoin: round;
  flex: none;
}
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__texto strong {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.marca__texto em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vial);
}

/* Navegación: panel desplegable en móvil */
.nav {
  position: fixed;
  inset: var(--cabecera-h) 0 auto 0;
  background: var(--casco);
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 8px var(--margen) 28px;
  display: none;
  max-height: calc(100vh - var(--cabecera-h));
  overflow-y: auto;
}
.nav.abierto { display: block; }

.nav__lista { display: flex; flex-direction: column; }
.nav__lista a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.nav__lista a:hover { color: var(--vial); }

.nav__acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: .875rem;
  color: var(--blanco);
}
.nav__tel svg { width: 17px; height: 17px; color: var(--vial); }
.nav__tel:hover { color: var(--vial); }

.hamburguesa {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radio);
  cursor: pointer;
  padding: 0;
}
.hamburguesa span {
  display: block;
  width: 20px; height: 2px;
  background: var(--blanco);
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1060px) {
  .hamburguesa { display: none; }
  .nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 28px;
    background: transparent;
    border: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  .nav__lista { flex-direction: row; gap: 26px; }
  .nav__lista a {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-size: 1.0625rem;
    letter-spacing: .04em;
  }
  .nav__lista a:hover { border-bottom-color: var(--vial); color: var(--blanco); }
  .nav__acciones { flex-direction: row; align-items: center; gap: 18px; margin-top: 0; }
}

/* ---------- 07. HERO ---------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--casco);
  /* Capa 1: velo que garantiza el contraste del texto.
     Capa 2: foto de fondo opcional (--hero-foto, definida arriba). Sin foto
     el degradado se ve igual de bien: no hay imagen rota ni hueco. */
  background-image:
    linear-gradient(105deg, rgba(11, 26, 36, .97) 0%, rgba(11, 26, 36, .90) 46%, rgba(16, 69, 107, .72) 100%),
    var(--hero-foto);
  background-size: cover;
  background-position: center right;
  color: var(--blanco);
  padding-top: calc(var(--cabecera-h) + 40px);
  overflow: hidden;
}
/* Trama técnica muy tenue: retícula de plano, no textura decorativa */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* El relleno inferior va aquí y no en .hero, para que la cinta de peligro
   quede pegada al borde de la sección y no flotando sobre el fondo. */
.hero__caja { position: relative; display: grid; gap: 44px; padding-bottom: 60px; }

.hero .epigrafe { color: var(--vial); }

.hero__titulo {
  /* El tope de 3.5rem deja las tres líneas del titular completas en escritorio.
     Los saltos son manuales (<br>), por eso se desactiva el balanceo
     automático que heredaría de la regla general de encabezados. */
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: wrap;
  color: var(--blanco);
  margin-bottom: 22px;
}
.hero__titulo .destacado {
  color: var(--vial);
  /* Subrayado grueso al ras de la línea base, como marca vial */
  box-shadow: inset 0 -.14em 0 rgba(239, 183, 0, .22);
}

.hero__bajada {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: rgba(255, 255, 255, .80);
  max-width: 54ch;
  margin-bottom: 30px;
}

.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.hero__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px 12px;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Rejilla interna: la etiqueta ocupa el alto sobrante y la cifra se apoya
   abajo, de modo que las tres cifras quedan alineadas aunque una etiqueta
   ocupe dos líneas. */
.hero__cifras > div { display: grid; grid-template-rows: 1fr auto; }
.hero__cifras dt {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 2px;
}
.hero__cifras dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blanco);
}

/* --- Dibujo técnico acotado: el elemento firma del sitio --- */
.hero__plano { margin: 0; }
.plano {
  width: 100%;
  height: auto;
  overflow: visible;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.plano__suelo   { stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-dasharray: 6 6; }
.plano__cama    { fill: rgba(255, 255, 255, .10); stroke: var(--blanco); stroke-width: 2; }
.plano__chasis  { stroke: rgba(255, 255, 255, .45); stroke-width: 4; }
.plano__cabina  { fill: rgba(255, 255, 255, .07); stroke: var(--blanco); stroke-width: 2; }
.plano__vidrio  { fill: rgba(47, 127, 176, .55); stroke: var(--blanco); stroke-width: 1.6; }
.plano__carga   { fill: rgba(47, 127, 176, .22); stroke: rgba(255, 255, 255, .70); stroke-width: 1.6; }
.plano__amarra  { stroke: var(--vial); stroke-width: 2; }
.plano__baranda { fill: rgba(11, 26, 36, .72); stroke: var(--blanco); stroke-width: 2; }
.plano__poste   { stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; }
.plano__rueda   { fill: rgba(11, 26, 36, .85); stroke: var(--blanco); stroke-width: 2.2; }
.plano__cubo    { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.plano__etiqueta rect { fill: var(--vial); stroke: none; }
.plano__etiqueta text {
  fill: var(--casco);
  stroke: none;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
}

/* Cotas: líneas de medida con topes, en amarillo vial */
.cota__extension { stroke: rgba(255, 255, 255, .28); stroke-width: 1; stroke-dasharray: 3 4; }
.cota__linea     { stroke: var(--vial); stroke-width: 1.6; }
.cota__tope      { stroke: var(--vial); stroke-width: 1.6; }
.cota__fondo     { fill: var(--casco); stroke: none; }
.cota__texto {
  fill: var(--vial);
  stroke: none;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
}

.plano__pie {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin: 6px 0 0;
  text-align: center;
}

/* Ranura de foto del hero. Mientras no exista img/hero-camion.jpg se ve el
   dibujo técnico; cuando la foto está, el JS la inserta y oculta el dibujo. */
.hero__plano.tiene-foto .plano { display: none; }
.hero__plano picture {
  display: block;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
}
.hero__plano img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }

/* Banda de seguridad al pie del hero. Único uso decorativo de este recurso. */
.cinta {
  height: 7px;
  background: repeating-linear-gradient(
    -45deg,
    var(--vial) 0 14px,
    var(--casco) 14px 28px
  );
}

@media (min-width: 1000px) {
  .hero { padding-top: calc(var(--cabecera-h) + 64px); }
  .hero__caja { padding-bottom: 80px; }
  .hero__caja {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }
}

/* ---------- 08. SERVICIOS ----------------------------------------------- */
.servicios { display: grid; gap: 24px; }

.servicio {
  background: var(--blanco);
  border: 1px solid var(--hormigon-2);
  border-top: 4px solid var(--azul);
  border-radius: var(--radio-g);
  padding: 32px 26px 30px;
  box-shadow: var(--sombra);
  transition: box-shadow var(--transicion), transform var(--transicion),
              border-top-color var(--transicion);
}
.servicio:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
  border-top-color: var(--vial);
}

.servicio__cabeza { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.servicio__icono {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  background: var(--casco);
  border-radius: var(--radio);
  color: var(--vial);
  flex: none;
}
.servicio__icono svg { width: 28px; height: 28px; stroke-width: 1.6; }
.servicio__titulo { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem); margin: 0; }

.servicio__texto { color: var(--acero); margin-bottom: 20px; }

.lista-check { display: grid; gap: 9px; margin: 0 0 22px; }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  line-height: 1.45;
}
.lista-check svg {
  width: 17px; height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--azul);
  stroke-width: 2.4;
}

.servicio__pie {
  font-size: .875rem;
  color: var(--acero);
  padding-top: 16px;
  border-top: 1px solid var(--hormigon-2);
  margin-bottom: 18px;
}
.servicio__pie strong { color: var(--casco); }

@media (min-width: 900px) {
  .servicios { grid-template-columns: 1fr 1fr; gap: 28px; }
  .servicio { padding: 38px 34px 34px; }
}

/* ---------- 09. FLOTA --------------------------------------------------- */
/* Encabezado de grupo: separa la flota de transporte de la de arriendo */
.flota__grupo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--casco);
  font-size: 1.5rem;
  flex-wrap: wrap;
}
.flota__grupo em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--acero);
  text-transform: uppercase;
  margin-left: auto;
}
/* Separación entre el final de un grupo y el título del siguiente */
.flota + .flota__grupo { margin-top: 52px; }

.flota { display: grid; gap: 24px; }

.vehiculo {
  background: var(--blanco);
  border: 1px solid var(--hormigon-2);
  border-radius: var(--radio-g);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.vehiculo:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }

.vehiculo__lienzo {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(11, 26, 36, .05) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(11, 26, 36, .05) 1px, transparent 1px) 0 0 / 22px 100%,
    #F3F2EE;
  border-bottom: 1px solid var(--hormigon-2);
  padding: 14px 10px 6px;
}

/* Con foto: el marco toma proporción 16:10 y el dibujo técnico se retira.
   Sin foto, el dibujo manda y no se reserva espacio de más. */
.vehiculo__lienzo.tiene-foto { aspect-ratio: 16 / 10; padding: 0; background: var(--blanco); }
.vehiculo__lienzo.tiene-foto .dibujo { display: none; }
.vehiculo__lienzo picture { position: absolute; inset: 0; display: block; }
/* "contain" y no "cover": son recortes de catálogo sobre blanco, recortarlos
   cortaría las cotas impresas del fabricante. El fondo blanco del panel
   disimula las bandas cuando la proporción no calza exacta. */
.vehiculo__lienzo img { width: 100%; height: 100%; object-fit: contain; }

.dibujo {
  width: 100%;
  height: auto;
  display: block;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.dibujo__suelo   { stroke: rgba(11, 26, 36, .22); stroke-width: 1.4; stroke-dasharray: 6 6; }
.dibujo__cuerpo  { fill: var(--blanco); stroke: var(--casco); stroke-width: 2; }
.dibujo__linea   { fill: none; stroke: rgba(11, 26, 36, .38); stroke-width: 1.4; }
.dibujo__chasis  { stroke: var(--casco); stroke-width: 3.4; }
.dibujo__vidrio  { fill: rgba(47, 127, 176, .30); stroke: var(--casco); stroke-width: 1.6; }
.dibujo__carga   { fill: rgba(16, 69, 107, .12); stroke: var(--azul); stroke-width: 1.5; }
.dibujo__amarra  { stroke: var(--vial); stroke-width: 2; }
.dibujo__manilla { stroke: rgba(11, 26, 36, .45); stroke-width: 2; stroke-linecap: round; }
.dibujo__rueda   { fill: var(--casco); stroke: var(--casco); stroke-width: 2; }
.dibujo__cubo    { fill: #F3F2EE; stroke: none; }

/* Cotas dentro de las fichas: sobre fondo claro cambian de color */
.cota--mini .cota__extension { stroke: rgba(11, 26, 36, .25); stroke-width: 1; stroke-dasharray: 3 4; }
.cota--mini .cota__linea,
.cota--mini .cota__tope      { stroke: var(--azul); stroke-width: 1.4; }
.cota--mini .cota__fondo     { fill: #F3F2EE; }
.cota--mini .cota__texto     { fill: var(--azul); font-size: 13px; }

.vehiculo__cuerpo { padding: 22px 24px 26px; }
.vehiculo__titulo { font-size: 1.5rem; margin-bottom: 16px; }

.especificaciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 0 0 18px;
  padding: 16px 0;
  border-block: 1px solid var(--hormigon-2);
}
/* La etiqueta ocupa el alto sobrante y el valor se apoya abajo: así los
   valores quedan alineados aunque una etiqueta ocupe dos líneas. */
.especificaciones > div { display: grid; grid-template-rows: 1fr auto; }
.especificaciones dt {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acero);
}
.especificaciones dd {
  margin: 2px 0 0;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--casco);
}

.vehiculo__uso { font-size: .9375rem; color: var(--acero); margin: 0; }
.vehiculo__uso--intro { margin-bottom: 4px; font-size: 1rem; }

/* Unidad destacada: ocupa el ancho completo de la rejilla y, desde tablet,
   pone el vehículo a un lado y la ficha al otro. */
.vehiculo--destacado { grid-column: 1 / -1; }
.vehiculo--destacado .vehiculo__titulo { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }

@media (min-width: 900px) {
  .vehiculo--destacado { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  /* Sin esto, min-width:auto deja que la foto empuje su propia columna */
  .vehiculo--destacado > * { min-width: 0; }
  .vehiculo--destacado .vehiculo__lienzo {
    border-bottom: 0;
    border-right: 1px solid var(--hormigon-2);
  }
  /* Con foto manda el alto de la ficha. Mantener aquí aspect-ratio genera un
     bucle: el alto fija el ancho, el ancho vuelve a fijar el alto, y el panel
     termina desbordando la tarjeta. */
  .vehiculo--destacado .vehiculo__lienzo.tiene-foto { aspect-ratio: auto; }
  .vehiculo--destacado .vehiculo__cuerpo {
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.flota__nota {
  margin: 34px 0 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--acero);
}
.flota__nota a { border-bottom: 2px solid var(--vial); font-weight: 600; }

/* Insignia de los vehículos que sirven para los dos servicios */
.vehiculo__doble {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--hormigon-2);
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
}
.vehiculo__doble svg { width: 17px; height: 17px; flex: none; color: var(--vial); stroke-width: 1.8; }

@media (min-width: 760px) {
  .flota { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* El grupo de arriendo son tres unidades: caben en una fila */
@media (min-width: 1000px) {
  .flota--tres { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 10. VENTAJAS ------------------------------------------------ */
.ventajas { display: grid; gap: 4px; }

.ventaja {
  background: var(--casco-suave);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radio);
  padding: 28px 24px;
  transition: border-color var(--transicion), background var(--transicion);
}
.ventaja:hover { border-color: rgba(239, 183, 0, .5); background: #16334A; }

.ventaja__icono {
  width: 30px; height: 30px;
  color: var(--vial);
  stroke-width: 1.6;
  margin-bottom: 16px;
}
.ventaja h3 {
  font-size: 1.375rem;
  color: var(--blanco);
  margin-bottom: 8px;
}
.ventaja p { font-size: .9375rem; color: rgba(255, 255, 255, .68); margin: 0; }

@media (min-width: 640px) {
  .ventajas { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1000px) {
  .ventajas { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ---------- 11. PROCESO ------------------------------------------------- */
/* Los pasos sí son una secuencia real, por eso van numerados.
   La regla superior repite el recurso de cota del hero: es el mismo lenguaje. */
.proceso { display: grid; gap: 28px; }

.paso {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--hormigon-2);
}
.paso::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2px; height: 13px;
  background: var(--vial);
}
.paso__num {
  display: block;
  font-family: var(--f-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--vial);
  margin-bottom: 10px;
}
.paso__titulo { font-size: 1.4rem; margin-bottom: 8px; }
.paso p { font-size: .9375rem; color: var(--acero); margin: 0 0 10px; }
.paso__plazo {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0;
}

@media (min-width: 640px) {
  .proceso { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
}
@media (min-width: 1080px) {
  .proceso { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* ---------- 12. CLIENTES ------------------------------------------------ */
.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* Celda de la grilla de clientes */
.logos li {
  display: grid;
  place-items: center;
  min-height: 78px;
  padding: 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hormigon-2);
  border-radius: var(--radio);
}

/* Los archivos vienen a 320 x 120 px (@2x) con fondo transparente y ya
   normalizados ópticamente entre sí, así que aquí solo se limita el alto. */
.logos img {
  width: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  /* Escala de grises en reposo: unifica cinco paletas de marca distintas.
     Para mostrarlos siempre a todo color, borra filter y opacity. */
  filter: grayscale(1) contrast(1.12);
  opacity: .84;
  transition: filter var(--transicion), opacity var(--transicion);
}
.logos li:hover img,
.logos li:focus-within img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .logos img { transition: none; }
}

/* Marcador de logo. Se conserva para agregar clientes sin imagen definitiva. */
.logo-ph {
  display: grid;
  place-items: center;
  min-height: 78px;
  padding: 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px dashed var(--hormigon-2);
  border-radius: var(--radio);
}
.logo-ph span {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6B7278;
  text-align: center;
}

@media (min-width: 620px) { .logos { grid-template-columns: repeat(3, 1fr); } }
/* 5 columnas = 5 clientes. Ajustar si cambia la cantidad. */
@media (min-width: 980px) { .logos { grid-template-columns: repeat(5, 1fr); } }

/* ---------- 13. CONTACTO Y FORMULARIO ----------------------------------- */
.contacto { display: grid; gap: 48px; }

.contacto__info .entradilla { color: rgba(255, 255, 255, .74); margin-bottom: 32px; }

.datos { display: grid; gap: 20px; margin-bottom: 32px; }
.datos li { display: flex; align-items: flex-start; gap: 14px; }
.datos svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--vial); }
.datos__rotulo {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 1px;
}
.datos a, .datos p {
  color: var(--blanco);
  font-size: 1.0625rem;
  margin: 0;
  line-height: 1.4;
}
.datos a:hover { color: var(--vial); }

/* Sucursales: se nombran las dos bases, sin dirección ni mapa */
.sucursales {
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--vial);
  border-radius: var(--radio-g);
  padding: 24px 24px 20px;
  background: rgba(255, 255, 255, .03);
}
.sucursales__titulo {
  font-size: 1.25rem;
  color: var(--blanco);
  margin-bottom: 16px;
}
.sucursales ul {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.sucursales li {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  border-left: 2px solid rgba(239, 183, 0, .45);
}
.sucursales__ciudad {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--blanco);
}
.sucursales__nota {
  margin: 0;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .68);
}

@media (min-width: 480px) {
  .sucursales ul { grid-template-columns: 1fr 1fr; gap: 12px 20px; }
}

.formulario {
  background: var(--blanco);
  border-radius: var(--radio-g);
  padding: 28px 22px 26px;
  box-shadow: var(--sombra-alta);
  /* Franja de acento superior, coherente con las tarjetas de servicio */
  border-top: 4px solid var(--vial);
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--casco);
  margin-bottom: 7px;
}
.campo label span { color: var(--error); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--f-texto);
  font-size: 1rem;
  color: var(--casco);
  background: #F7F6F3;
  border: 1px solid #CFCEC8;
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.campo textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.campo select {
  appearance: none;
  /* Flecha del select dibujada en el propio fondo: sin imagen externa */
  background-image: linear-gradient(45deg, transparent 50%, var(--casco) 50%),
                    linear-gradient(135deg, var(--casco) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.campo input::placeholder,
.campo textarea::placeholder { color: #767C81; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  background: var(--blanco);
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(16, 69, 107, .14);
  outline: none;
}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: none; }

/* Estado de error, marcado por el JS */
.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea {
  border-color: var(--error);
  background: #FDF6F5;
}
.campo__error {
  margin: 6px 0 0;
  font-size: .8125rem;
  color: var(--error);
  min-height: 0;
}
.campo__error:empty { display: none; }
.campo__ayuda { margin: 6px 0 0; font-size: .8125rem; color: var(--acero); }

.campo-doble { display: grid; gap: 0; }

/* Honeypot: fuera de la vista pero presente en el DOM */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulario__estado {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-radius: var(--radio);
  font-size: .9375rem;
  line-height: 1.45;
  display: none;
}
.formulario__estado.visible { display: block; }
.formulario__estado.exito {
  background: #E8F3EC;
  border-left: 4px solid var(--exito);
  color: #14512C;
}
.formulario__estado.fallo {
  background: #FBEDEC;
  border-left: 4px solid var(--error);
  color: #8A1D17;
}

.formulario__legal { margin: 16px 0 0; font-size: .78125rem; color: var(--acero); }

#enviar[aria-busy="true"] { opacity: .72; pointer-events: none; }

@media (min-width: 560px) {
  .campo-doble { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .formulario { padding: 34px 32px 30px; }
}
@media (min-width: 980px) {
  .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; align-items: start; }
}

/* ---------- 14. PIE ----------------------------------------------------- */
.pie {
  background: #071219;
  color: rgba(255, 255, 255, .66);
  border-top: 3px solid var(--vial);
  padding-top: 56px;
}
.pie__caja { display: grid; gap: 36px; padding-bottom: 44px; }

.marca--pie { margin-bottom: 16px; }
.pie__descripcion { font-size: .9375rem; max-width: 42ch; margin-bottom: 20px; }

.redes { display: flex; gap: 10px; }
.redes a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
  color: rgba(255, 255, 255, .75);
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.redes a:hover { border-color: var(--vial); color: var(--vial); background: rgba(239, 183, 0, .08); }
.redes svg { width: 19px; height: 19px; }

.pie__titulo {
  font-size: 1.0625rem;
  letter-spacing: .08em;
  color: var(--blanco);
  margin-bottom: 16px;
}
.pie__columna ul { display: grid; gap: 9px; }
.pie__columna a { color: rgba(255, 255, 255, .66); font-size: .9375rem; }
.pie__columna a:hover { color: var(--vial); }
.pie__datos li { font-size: .9375rem; line-height: 1.5; }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
.pie__base p { margin: 0; }
.pie__base a { color: rgba(255, 255, 255, .66); }
.pie__base a:hover { color: var(--vial); }

@media (min-width: 700px) {
  .pie__caja { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 1000px) {
  .pie__caja { grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px; }
}

/* ---------- 15. WHATSAPP FLOTANTE --------------------------------------- */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px;
  background: #128C7E;
  color: var(--blanco);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 6px 22px -6px rgba(0, 0, 0, .45);
  transition: background var(--transicion), transform var(--transicion);
}
.wa-flotante:hover { background: #0F7A6D; color: var(--blanco); transform: translateY(-2px); }
.wa-flotante svg { width: 22px; height: 22px; flex: none; }
/* En pantallas chicas queda solo el ícono para no tapar contenido */
.wa-flotante span { display: none; }
@media (min-width: 560px) {
  .wa-flotante { right: 22px; bottom: 22px; }
  .wa-flotante span { display: inline; }
}

/* ---------- 16. ANIMACIÓN DE APARICIÓN ---------------------------------- */
/* El estado oculto solo se aplica si el JS arrancó (clase .js en <html>).
   Sin JS, todo se ve normalmente. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.22, .8, .3, 1);
}
.js [data-reveal].visible { opacity: 1; transform: none; }

/* Dibujo de las cotas del hero al cargar: un solo momento, no efectos sueltos */
.js .hero .cota__linea,
.js .hero .cota__extension {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: trazar 900ms ease-out 420ms forwards;
}
.js .hero .cota__tope,
.js .hero .cota__fondo,
.js .hero .cota__texto,
.js .hero .plano__etiqueta {
  opacity: 0;
  animation: aparecer 500ms ease-out 1120ms forwards;
}
@keyframes trazar  { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero .cota__linea,
  .js .hero .cota__extension { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .hero .cota__tope,
  .js .hero .cota__fondo,
  .js .hero .cota__texto,
  .js .hero .plano__etiqueta { opacity: 1; }
  .servicio:hover, .vehiculo:hover, .boton:hover, .wa-flotante:hover { transform: none; }
}

/* ---------- 17. IMPRESIÓN ----------------------------------------------- */
@media print {
  .cabecera, .wa-flotante, .hero__botones, .formulario, .cinta { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion--oscura, .hero, .pie { background: #fff !important; color: #000 !important; }
  .seccion--oscura .titulo, .hero__titulo, .encabezado--claro .titulo { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}