/* Vidal Grúas: colores del folleto (azul y azul noche), con fondo oscuro en toda la página.
   Estructura: cabecera oscura con logo, portada a toda pantalla con foto, franja negra con los 4 sellos
   y secciones alternando dos tonos de azul noche. En el móvil, barra fija abajo con Llamar y WhatsApp. */

@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fuentes/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fuentes/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fuentes/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fuentes/barlow-latin-600-normal.woff2") format("woff2"); }

:root {
  --azul: #1557d6;
  --azul-hover: #0f46b3;
  --azul-sobre-oscuro: #8fb3ff;
  --anillo-foco: rgba(143, 179, 255, 0.3);
  --negro: #070c16;
  --fondo: #0b1220;
  --fondo-suave: #0f1829;
  --superficie: #16213a;
  --tinta: #eef3fb;
  --gris: #a9b6cc;
  --linea: #27344f;
  --verde-whatsapp: #0f7a3a;
  --verde-whatsapp-hover: #0b632f;
  --rojo-error: #ff8f85;

  --letra-titulos: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --letra-texto: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Escala de tamaños de letra: cada pantalla usa como mucho tres. */
  --t-pequeno: 15px;
  --t-texto: 18px;
  --t-destacado: 24px;
  --t-titulo: clamp(36px, 5vw, 52px);
  --t-portada: clamp(52px, 8.2vw, 96px);

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --ancho-maximo: 1180px;
  --alto-barra-movil: 64px;
  --radio: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--letra-titulos); line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-titulo); font-weight: 800; text-transform: uppercase; }
h3 { font-size: var(--t-destacado); font-weight: 700; }
p { margin: 0; }
a { color: var(--azul-sobre-oscuro); }
:focus-visible { outline: 3px solid var(--azul-sobre-oscuro); outline-offset: 3px; }
/* Sobre la franja azul el foco va en blanco para que se vea. */
.final :focus-visible, .barra-movil :focus-visible { outline-color: #ffffff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icono { width: 1.2em; height: 1.2em; flex: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-left: max(var(--e-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--e-4), env(safe-area-inset-right, 0px));
}
.etiqueta {
  font-family: var(--letra-titulos);
  font-weight: 700;
  font-size: var(--t-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-sobre-oscuro);
}

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 56px;
  padding: var(--e-3) var(--e-5);
  border: 0;
  border-radius: var(--radio);
  font-family: var(--letra-titulos);
  font-size: var(--t-destacado);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.boton:active { transform: translateY(1px); }
.boton-whatsapp { background: var(--verde-whatsapp); }
.boton-whatsapp:hover { background: var(--verde-whatsapp-hover); }
.boton-llamar { background: var(--azul); }
.boton-llamar:hover { background: var(--azul-hover); }

/* Cabecera */
.cabecera { background: var(--fondo); border-bottom: 1px solid var(--linea); position: relative; z-index: 2; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 72px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--tinta); }
.marca img { height: 60px; width: auto; }
.cabecera-telefono { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--letra-titulos); font-weight: 800; font-size: var(--t-destacado); color: var(--tinta); text-decoration: none; }
.cabecera-telefono .icono { color: var(--azul-sobre-oscuro); }

/* Portada */
.portada { position: relative; background: var(--negro); color: #ffffff; overflow: hidden; }
.portada-foto { position: absolute; inset: 0; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 10, 20, 0.88) 0%, rgba(5, 10, 20, 0.66) 42%, rgba(5, 10, 20, 0.08) 75%),
              linear-gradient(0deg, rgba(5, 10, 20, 0.55) 0%, rgba(5, 10, 20, 0) 40%);
}
.portada .contenedor { position: relative; z-index: 1; display: flex; align-items: flex-end; min-height: min(78vh, 720px); padding-block: var(--e-8); }
.portada-texto { display: grid; gap: var(--e-4); max-width: 720px; }
.portada .etiqueta { color: var(--azul-sobre-oscuro); }
.portada h1 { font-size: var(--t-portada); font-weight: 800; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.portada h1 em { font-style: normal; color: #6f9bff; }
.portada-texto > p { color: #e3eaf7; max-width: 52ch; }
.portada .botones { margin-top: var(--e-2); }

/* Sellos (los 4 del folleto) */
.sellos { background: var(--negro); color: #ffffff; border-top: 4px solid var(--azul); }
.sellos ul { list-style: none; margin-block: 0; padding-block: var(--e-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.sellos li { display: flex; align-items: center; gap: var(--e-3); font-family: var(--letra-titulos); font-weight: 700; font-size: var(--t-destacado); text-transform: uppercase; line-height: 1.05; }
.sellos .icono-circulo { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--azul); display: grid; place-items: center; flex: none; color: #ffffff; background: rgba(21, 87, 214, 0.25); }
.sellos .icono-circulo .icono { width: 24px; height: 24px; }

/* Secciones */
.seccion { padding-block: var(--e-8); }
.seccion-suave { background: var(--fondo-suave); }
.seccion-cabeza { display: grid; gap: var(--e-3); max-width: 720px; margin-bottom: var(--e-7); }
.seccion-cabeza p { color: var(--gris); }

/* Qué transportamos */
.vehiculos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); list-style: none; margin: 0; padding: 0; }
.vehiculo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.vehiculo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vehiculo div { padding: var(--e-5); display: grid; gap: var(--e-2); align-content: start; }
.vehiculo p { color: var(--gris); }

/* Cómo funciona */
.como { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.pasos li::before {
  content: counter(paso);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: #ffffff;
  font-family: var(--letra-titulos);
  font-weight: 800;
  font-size: var(--t-destacado);
}
.pasos h3 { margin-bottom: var(--e-1); }
.pasos p { color: var(--gris); }
.como-foto img { border-radius: var(--radio); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Pide precio */
.precio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e-7); align-items: stretch; }
.formulario { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-6); display: grid; gap: var(--e-4); }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-weight: 600; }
.campo input, .campo select {
  width: 100%;
  min-height: 52px;
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
}
.campo input::placeholder { color: #7f8ca3; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--azul-sobre-oscuro); box-shadow: 0 0 0 3px var(--anillo-foco); }
.campo [aria-invalid="true"], .campo [aria-invalid="true"]:focus { border-color: var(--rojo-error); }
.campos-dobles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.formulario .boton { width: 100%; margin-top: var(--e-2); }
.form-errores { color: var(--rojo-error); font-weight: 600; font-size: var(--t-pequeno); }
.form-enlace { font-weight: 600; font-size: var(--t-pequeno); }
.form-nota { color: var(--gris); font-size: var(--t-pequeno); }
.precio-foto { position: relative; border-radius: var(--radio); overflow: hidden; min-height: 320px; background: var(--negro); }
.precio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.precio-foto p {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-7) var(--e-5) var(--e-5);
  background: linear-gradient(0deg, rgba(5, 10, 20, 0.9), rgba(5, 10, 20, 0));
  color: #ffffff;
  font-family: var(--letra-titulos);
  font-weight: 800;
  font-size: var(--t-destacado);
  line-height: 1.1;
  text-transform: uppercase;
}

/* Zonas */
.zonas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.zonas li { padding: var(--e-2) var(--e-4); border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); font-weight: 600; font-size: var(--t-pequeno); }
.zonas li.zona-principal { background: var(--azul); border-color: var(--azul); color: #ffffff; }

/* Preguntas frecuentes */
.preguntas { display: grid; gap: var(--e-3); max-width: 820px; }
.preguntas details { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.preguntas summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  font-weight: 600;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .icono { color: var(--azul-sobre-oscuro); transition: transform 0.2s ease; }
.preguntas details[open] summary .icono { transform: rotate(180deg); }
.preguntas details p { padding: 0 var(--e-5) var(--e-5); color: var(--gris); }

/* Llamada final */
.final { background: var(--azul); color: #ffffff; }
.final .contenedor { padding-block: var(--e-8); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-5); }
.final p { color: #e3eaf7; margin-top: var(--e-2); }
.final .boton-llamar { background: var(--negro); }
.final .boton-llamar:hover { background: #000000; }

/* Pie */
.pie { background: var(--negro); color: #c3cde0; font-size: var(--t-pequeno); }
.pie .contenedor { padding-block: var(--e-7); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: end; }
.pie-logo { height: 64px; width: auto; margin-bottom: var(--e-3); }
.pie p + p { margin-top: var(--e-2); }
.pie a { color: #ffffff; }
.pie nav { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* Barra fija con Llamar y WhatsApp: solo en móvil (vertical u horizontal) */
.barra-movil { display: none; }

/* Páginas legales */
.legal { padding-block: var(--e-7); }
.legal .contenedor { max-width: 820px; display: grid; gap: var(--e-4); }
.legal h1 { font-size: var(--t-titulo); font-weight: 800; text-transform: uppercase; }
.legal h2 { font-size: var(--t-destacado); margin-top: var(--e-4); }
.legal p, .legal li { color: var(--gris); }
.legal dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-5); margin: 0; }
.legal dt { font-weight: 600; color: var(--tinta); }
.legal dd { margin: 0; color: var(--gris); }

@media (max-width: 960px) {
  .sellos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehiculos { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .como, .precio { grid-template-columns: minmax(0, 1fr); }
  .pie .contenedor { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .cabecera .contenedor { min-height: 64px; }
  .marca img { height: 48px; }
  .portada .contenedor { min-height: 0; padding-block: var(--e-5) var(--e-6); }
  .portada-foto { position: relative; }
  .portada-foto img { height: auto; aspect-ratio: 16 / 9; }
  .portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--negro) 0%, rgba(11, 18, 32, 0) 40%); }
  .portada::after { display: none; }
  .portada .botones { display: grid; grid-template-columns: minmax(0, 1fr); }
  .seccion { padding-block: var(--e-7); }
  .seccion-cabeza { margin-bottom: var(--e-6); }
  .formulario { padding: var(--e-5); }
  .campos-dobles { grid-template-columns: minmax(0, 1fr); }
  .final .botones { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .legal dl { grid-template-columns: minmax(0, 1fr); }
}

/* Móvil en vertical, o en horizontal (pantalla baja y táctil) */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  body { padding-bottom: calc(var(--alto-barra-movil) + env(safe-area-inset-bottom, 0px)); }
  .barra-movil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--negro);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  }
  .barra-movil .boton { border-radius: 0; min-height: var(--alto-barra-movil); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .preguntas summary .icono { transition: none; }
}