/* ==========================================================================
   Veloza · Sitio público — hoja ÚNICA e INDEPENDIENTE
   --------------------------------------------------------------------------
   ⚠ ESTA HOJA NO DEPENDE DEL PANEL ADMINISTRATIVO.
   No importa 00-tokens.css ni ninguna otra hoja de /assets/css. Declara sus
   propios tokens con el prefijo --vz-, y el layout resources/views/layouts/
   publico.pd.php carga esta hoja y nada más.

   LOS VALORES DE MARCA ESTÁN DUPLICADOS A PROPÓSITO.
   El dueño prefiere que la página pública pueda evolucionar sin arrastrar al
   panel —y, sobre todo, que un retoque en el panel no le cambie la portada de
   un día para otro—. El precio de esa independencia es esta repetición:
   SI LA MARCA CAMBIA (azul, coral, tipografía) HAY QUE TOCAR DOS SITIOS,
   este archivo Y public/assets/css/00-tokens.css. No hay forma de que uno se
   entere del otro; está escrito aquí para que quien lo cambie lo sepa.

   EL LENGUAJE VISUAL ES EL DEL MOCKUP DEL CLIENTE (PacificDrive_mockup/):
   lienzo blanco, foto a sangre en la portada, tarjetas de 16 px con sombra
   suave y la reserva montada sobre el borde del hero. Lo que NO se copió:
   su azul y su naranja (aquí van los de marca), Inter y Font Awesome (la
   política de seguridad solo admite recursos propios: la fuente es Archivo
   desde /assets/fuentes y los iconos son el sprite de publico/sprite).

   El coral es el acento: los botones de reservar, el remate del titular y el
   medio sol de la franja de tarifas. Nunca de fondo de un bloque, y el texto
   sobre el botón coral es oscuro y no blanco —blanco sobre #FF6B35 da 2.8:1 y
   no pasa AA—.
   ========================================================================== */

/* --------------------------------------------------------------- tipografía */
/* Archivo variable: un @font-face por subconjunto con rango de peso 100–900.
   Los archivos ya están en el servidor, no se descarga nada nuevo. */

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

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fuentes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. Tokens propios
   ========================================================================== */

:root {
  /* marca — copia deliberada de 00-tokens.css, ver cabecera */
  --vz-azul: #011171;
  --vz-azul-claro: #0A209E;
  --vz-azul-oscuro: #020941;
  --vz-azul-noche: #01072B;
  --vz-coral: #FF6B35;
  --vz-coral-hover: #FF7D4D;
  --vz-sobre-coral: #2A0F02;
  --vz-cielo: #98A8CD;
  --vz-cielo-claro: #C3CEF0;

  /* superficies */
  --vz-superficie: #FFFFFF;
  --vz-suave: #F5F7FC;
  --vz-celeste: #E9EEFB;
  --vz-hundido: #E9EAF1;
  --vz-linea: #E6E9F2;
  --vz-campo: #F1F3F9;
  --vz-campo-borde: #E1E5EF;
  --vz-borde: #DDE0EA;
  --vz-borde-fuerte: #C2C6D6;
  --vz-marco: #0B1033;

  /* texto */
  --vz-texto: #121B4E;
  --vz-texto-2: #495783;
  --vz-texto-3: #5D6379;
  --vz-texto-inv: #F3F5FB;
  --vz-texto-inv-2: #C9D2EA;
  --vz-texto-inv-3: #9EAAD0;

  /* semánticos: los mismos tonos apagados del panel */
  --vz-exito: #4F6B36;
  --vz-aviso: #8A5A16;
  --vz-aviso-suave: #F5EEE1;
  --vz-peligro: #9B3B24;
  --vz-peligro-suave: #F3E3DE;

  /* tipografía */
  --vz-ff: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vz-ff-mano: Georgia, 'Times New Roman', serif;

  /* Escalas fluidas: el titular de un hero a sangre no puede ir en pasos
     discretos, salta feo entre 700 y 1100 px de ancho. */
  --vz-fs-display: clamp(2.9rem, 6vw + 0.4rem, 6rem);
  --vz-fs-h2: clamp(1.9rem, 3vw + 0.7rem, 3.1rem);
  --vz-fs-h3: 1.0625rem;
  --vz-fs-lead: clamp(1rem, 0.3vw + 0.93rem, 1.0625rem);
  --vz-fs-body: 1rem;
  --vz-fs-chico: 0.875rem;
  --vz-fs-legal: 0.8125rem;
  --vz-fs-eyebrow: 0.72rem;

  --vz-ls-eyebrow: 0.18em;
  --vz-ls-display: -0.05em;
  --vz-ls-title: -0.04em;
  --vz-lh-body: 1.55;

  /* espacio */
  --vz-sp-1: 4px;
  --vz-sp-2: 8px;
  --vz-sp-3: 12px;
  --vz-sp-4: 16px;
  --vz-sp-5: 24px;
  --vz-sp-6: 32px;
  --vz-sp-7: 48px;
  --vz-sp-8: 72px;
  --vz-sp-9: clamp(4.25rem, 7vw, 5.75rem);

  --vz-ancho: 1228px;
  --vz-canal: clamp(1rem, 3vw, 1.5rem);
  --vz-alto-barra: 76px;

  /* radios — los del mockup: campo, tarjeta, bloque y marco de teléfono */
  --vz-r-xs: 6px;
  --vz-r-sm: 10px;
  --vz-r-md: 12px;
  --vz-r-lg: 16px;
  --vz-r-xl: 24px;
  --vz-r-2xl: 34px;
  --vz-r-pill: 999px;

  /* elevación — siempre teñida de índigo, nunca gris */
  --vz-el-1: 0 10px 30px rgba(1, 17, 113, 0.05);
  --vz-el-2: 0 8px 24px rgba(1, 17, 113, 0.09);
  --vz-el-3: 0 18px 55px rgba(1, 17, 113, 0.12);
  --vz-el-marco: 0 22px 44px rgba(1, 7, 43, 0.24);
  --vz-el-pop: 0 24px 60px rgba(1, 17, 113, 0.18), 0 2px 6px rgba(1, 17, 113, 0.06);
  --vz-el-coral: 0 9px 24px rgba(255, 107, 53, 0.28);
  --vz-el-flotante: 0 -6px 24px rgba(1, 17, 113, 0.14);
  --vz-anillo: 0 0 0 3px rgba(10, 32, 158, 0.14);

  /* alto de la barra fija de móvil: el body reserva justo esto, ver §13 */
  --vz-barra-movil: 68px;

  --vz-transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* El anclaje no debe quedar debajo de la barra superior fija. */
  scroll-padding-block-start: calc(var(--vz-alto-barra) + 12px);
}

body {
  margin: 0;
  background: var(--vz-superficie);
  color: var(--vz-texto);
  font-family: var(--vz-ff);
  font-size: var(--vz-fs-body);
  line-height: var(--vz-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  /* Los marcadores se quitan en toda la página: donde hace falta numerar —los
     pasos de «cómo funciona»— el número lo pone un counter, que sí se puede
     tipografiar. */
  list-style: none;
}

button,
input,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--vz-coral);
  outline-offset: 3px;
}

.vz-salto {
  position: absolute;
  inset-block-start: var(--vz-sp-2);
  inset-inline-start: var(--vz-sp-2);
  z-index: 60;
  padding: var(--vz-sp-2) var(--vz-sp-4);
  border-radius: var(--vz-r-sm);
  background: var(--vz-superficie);
  color: var(--vz-texto);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.vz-salto:focus-visible {
  transform: translateY(0);
}

.vz-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* Centinela de 1px en lo alto del documento: cuando deja de verse, la barra
   superior se vuelve sólida. Lo observa publico.js solo si el navegador no
   entiende animation-timeline: scroll(). */
.vz-centinela {
  position: absolute;
  inset-block-start: 0;
  width: 1px;
  height: 1px;
}

/* Varias piezas de la página son flex o grid, y `display` de una clase gana
   al del atributo [hidden] por orden de aparición. Sin esto, un aviso oculto
   se seguiría viendo. */
[hidden] {
  display: none !important;
}

.vz-contenedor {
  width: 100%;
  max-width: var(--vz-ancho);
  margin-inline: auto;
  padding-inline: var(--vz-canal);
}

.vz-seccion {
  padding-block: var(--vz-sp-9);
}

/* La franja de tarifas va pegada a la flota: son la misma conversación. */
.vz-seccion--pegada {
  padding-block-start: var(--vz-sp-4);
}

.vz-seccion--suave {
  background: var(--vz-suave);
}

/* ------------------------------------------------------------ titulares */

.vz-eyebrow {
  margin-block-end: var(--vz-sp-2);
  color: var(--vz-azul-claro);
  font-size: var(--vz-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--vz-ls-eyebrow);
  text-transform: uppercase;
}

.vz-h2 {
  max-width: 20ch;
  font-size: var(--vz-fs-h2);
  font-weight: 800;
  letter-spacing: var(--vz-ls-title);
  line-height: 1.04;
  text-wrap: balance;
}

.vz-h3 {
  font-size: var(--vz-fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.vz-lead {
  max-width: 62ch;
  margin-block-start: var(--vz-sp-3);
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-lead);
}

.vz-cab {
  margin-block-end: var(--vz-sp-6);
}

.vz-cab--fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vz-sp-4) var(--vz-sp-6);
}

.vz-cab--fila > div {
  max-width: 720px;
}

.vz-enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--vz-sp-2);
  color: var(--vz-azul-claro);
  font-weight: 800;
  text-decoration: none;
}

.vz-enlace svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform var(--vz-transicion);
}

.vz-enlace:hover svg {
  transform: translateX(3px);
}

.vz-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vz-sp-3);
}

/* ==========================================================================
   3. Botones
   ========================================================================== */

.vz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vz-sp-2);
  /* 44×44 mínimo en cualquier sitio donde se toque con el dedo. */
  min-height: 48px;
  padding: 0.85rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--vz-r-pill);
  font-family: inherit;
  font-size: var(--vz-fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--vz-transicion), background-color var(--vz-transicion),
    box-shadow var(--vz-transicion), border-color var(--vz-transicion);
}

.vz-btn:hover {
  transform: translateY(-2px);
}

.vz-btn:active {
  transform: translateY(0);
}

.vz-btn--chico {
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  font-size: var(--vz-fs-chico);
}

.vz-btn--reservar {
  background: var(--vz-coral);
  color: var(--vz-sobre-coral);
  box-shadow: var(--vz-el-coral);
}

.vz-btn--reservar:hover {
  background-color: var(--vz-coral-hover);
}

.vz-btn--tinta {
  background: var(--vz-azul);
  color: var(--vz-texto-inv);
  box-shadow: var(--vz-el-2);
}

.vz-btn--tinta:hover {
  background: var(--vz-azul-claro);
}

.vz-btn--clara {
  background: var(--vz-superficie);
  border-color: var(--vz-borde-fuerte);
  color: var(--vz-texto);
}

.vz-btn--clara:hover {
  border-color: var(--vz-azul);
}

.vz-btn--contorno {
  background: var(--vz-superficie);
  border-color: var(--vz-cielo);
  color: var(--vz-azul);
}

.vz-btn--contorno:hover {
  border-color: var(--vz-azul);
}

/* Sobre la foto o sobre el índigo: borde claro y fondo casi transparente. */
.vz-btn--fantasma {
  background: rgba(243, 245, 251, 0.06);
  border-color: rgba(243, 245, 251, 0.5);
  color: var(--vz-texto-inv);
}

.vz-btn--fantasma:hover {
  background: rgba(243, 245, 251, 0.16);
}

.vz-btn__icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}

/* ==========================================================================
   4. Barra superior
   --------------------------------------------------------------------------
   Transparente sobre la foto y sólida al bajar. El cambio lo conduce el
   scroll, NUNCA un listener de scroll en JavaScript: un handler que corre en
   cada píxel de desplazamiento es la forma más barata de que una portada se
   sienta lenta en un teléfono de gama media.
   ========================================================================== */

.vz-barra {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: transparent;
  border-block-end: 1px solid transparent;
  color: var(--vz-texto-inv);
}

.vz-barra__fila {
  display: flex;
  align-items: center;
  gap: var(--vz-sp-6);
  min-height: var(--vz-alto-barra);
}

.vz-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--vz-sp-2);
  color: var(--vz-texto-inv);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.vz-marca__icono {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.vz-barra__nav {
  display: flex;
  justify-content: center;
  gap: var(--vz-sp-6);
  flex: 1;
}

.vz-barra__enlace {
  position: relative;
  padding-block: var(--vz-sp-2);
  color: var(--vz-texto-inv-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--vz-transicion);
}

/* El subrayado coral del mockup, pero al pasar y no fijo: la página no sabe
   en qué sección está el visitante sin un script que lo vigile. */
.vz-barra__enlace::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--vz-transicion);
}

.vz-barra__enlace:hover {
  color: var(--vz-texto-inv);
}

.vz-barra__enlace:hover::after {
  transform: scaleX(1);
}

.vz-barra__enlace--movil {
  display: none;
}

.vz-barra__acciones {
  display: flex;
  gap: var(--vz-sp-2);
}

.vz-barra__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid rgba(243, 245, 251, 0.3);
  border-radius: var(--vz-r-sm);
  background: transparent;
  color: var(--vz-texto-inv);
  cursor: pointer;
}

.vz-barra__menu svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Estado sólido. Lo enciende la animación de scroll donde hay soporte, y la
   clase que pone publico.js donde no lo hay. Los dos escriben lo mismo.
   `is-menu` es el menú de móvil abierto, que también la necesita sólida. */
.vz-barra.is-solida,
.vz-barra.is-menu {
  background: rgba(1, 17, 113, 0.94);
  border-block-end-color: rgba(243, 245, 251, 0.14);
  box-shadow: var(--vz-el-2);
  backdrop-filter: blur(10px);
}

@keyframes vz-barra-solida {
  to {
    background: rgba(1, 17, 113, 0.94);
    border-block-end-color: rgba(243, 245, 251, 0.14);
    box-shadow: var(--vz-el-2);
    backdrop-filter: blur(10px);
  }
}

@supports (animation-timeline: scroll()) {
  .vz-barra {
    animation: vz-barra-solida linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
}

@media (width < 1000px) {
  .vz-barra__menu {
    display: inline-flex;
  }

  .vz-barra__nav {
    display: none;
  }

  .vz-barra__acciones .vz-btn--fantasma {
    display: none;
  }

  /* Abierto, el menú cuelga de la barra como una tarjeta índigo. */
  .vz-barra__nav.is-abierta {
    position: absolute;
    inset-block-start: calc(var(--vz-alto-barra) - 6px);
    inset-inline: var(--vz-canal);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--vz-sp-3) var(--vz-sp-5);
    border: 1px solid rgba(243, 245, 251, 0.14);
    border-radius: var(--vz-r-lg);
    background: var(--vz-azul);
    box-shadow: var(--vz-el-marco);
  }

  .vz-barra__nav.is-abierta .vz-barra__enlace {
    padding-block: var(--vz-sp-3);
    border-block-end: 1px solid rgba(243, 245, 251, 0.1);
    font-size: var(--vz-fs-body);
  }

  .vz-barra__nav.is-abierta .vz-barra__enlace:last-child {
    border-block-end: 0;
  }

  .vz-barra__nav.is-abierta .vz-barra__enlace::after {
    display: none;
  }

  .vz-barra__enlace--movil {
    display: block;
  }
}

/* Por debajo de aquí la barra fija de abajo ya lleva el botón de reservar. */
@media (width < 820px) {
  .vz-barra__acciones {
    display: none;
  }
}

/* ==========================================================================
   5. Hero
   --------------------------------------------------------------------------
   La foto a sangre del mockup, con un degradado índigo que la apaga donde va
   el texto y la deja respirar donde está la camioneta. El alto tiene tope
   por arriba: en pantallas muy altas un 90vh sin límite dejaba el titular
   flotando en medio de un cielo enorme.
   ========================================================================== */

.vz-hero {
  position: relative;
  display: flex;
  min-height: clamp(620px, 88vh, 740px);
  padding-block: calc(var(--vz-alto-barra) + var(--vz-sp-8)) 140px;
  background: var(--vz-azul-oscuro);
  color: var(--vz-texto-inv);
  overflow: hidden;
  isolation: isolate;
}

.vz-hero__fondo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.vz-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 9, 65, 0.94) 0%, rgba(1, 17, 113, 0.74) 42%,
      rgba(1, 17, 113, 0.14) 72%, rgba(1, 17, 113, 0.36) 100%),
    linear-gradient(180deg, rgba(1, 7, 43, 0.12) 0%, rgba(1, 7, 43, 0.48) 100%);
}

.vz-hero__contenido {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--vz-sp-6);
}

.vz-hero__texto {
  max-width: 640px;
}

.vz-hero__marca {
  color: var(--vz-cielo-claro);
  font-size: var(--vz-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--vz-ls-eyebrow);
  text-transform: uppercase;
}

.vz-hero__titulo {
  max-width: 13ch;
  margin-block: var(--vz-sp-4) var(--vz-sp-5);
  font-size: var(--vz-fs-display);
  font-weight: 800;
  letter-spacing: var(--vz-ls-display);
  line-height: 0.94;
  text-wrap: balance;
}

.vz-hero__titulo em {
  font-style: normal;
  color: var(--vz-coral);
}

.vz-hero__bajada {
  max-width: 34rem;
  color: var(--vz-texto-inv-2);
  font-size: 1.0625rem;
}

.vz-hero__beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vz-sp-4) var(--vz-sp-7);
  margin-block-start: var(--vz-sp-6);
}

.vz-hero__beneficios li {
  display: flex;
  align-items: center;
  gap: var(--vz-sp-3);
  color: var(--vz-texto-inv-2);
  font-size: var(--vz-fs-chico);
  line-height: 1.3;
}

.vz-hero__beneficios svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: var(--vz-texto-inv);
}

.vz-hero__beneficios strong {
  display: block;
  color: var(--vz-texto-inv);
}

/* El lema de la marca, escrito «a mano» sobre el cielo de la foto. Es
   decorativo y va con aria-hidden: el pie ya lo dice en texto normal. */
.vz-hero__lema {
  flex: 0 0 auto;
  margin-block-start: var(--vz-sp-8);
  margin-inline-end: var(--vz-sp-6);
  font-family: var(--vz-ff-mano);
  font-size: 2.1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  transform: rotate(-5deg);
  text-shadow: 0 2px 20px rgba(1, 7, 43, 0.35);
}

/* Variante del comprobante: sin el alto de portada. */
.vz-hero--corto {
  min-height: 0;
  padding-block-end: 150px;
}

@media (width < 1000px) {
  .vz-hero__lema {
    display: none;
  }
}

@media (width < 720px) {
  .vz-hero {
    min-height: 0;
    padding-block: calc(var(--vz-alto-barra) + var(--vz-sp-6)) 110px;
  }

  .vz-hero__fondo img {
    object-position: 72% 50%;
  }

  /* En angosto el texto ocupa todo el ancho: el degradado pasa a ir de
     arriba abajo para que ninguna línea caiga sobre la parte clara. */
  .vz-hero::before {
    background: linear-gradient(180deg, rgba(2, 9, 65, 0.9) 0%, rgba(1, 17, 113, 0.74) 55%,
      rgba(1, 17, 113, 0.55) 100%);
  }

  .vz-hero__beneficios {
    flex-direction: column;
    gap: var(--vz-sp-3);
  }
}

/* ==========================================================================
   6. Reservador
   --------------------------------------------------------------------------
   Tarjeta BLANCA SÓLIDA, montada sobre el borde inferior del hero. Nada de
   cristal esmerilado: el precio es justo el dato que no puede costar leer.
   ========================================================================== */

.vz-reservador {
  position: relative;
  z-index: 5;
  margin-block-start: -88px;
}

@media (width < 720px) {
  .vz-reservador {
    margin-block-start: -66px;
  }
}

.vz-widget {
  padding: 36px 40px 30px;
  border-radius: var(--vz-r-xl);
  background: var(--vz-superficie);
  box-shadow: var(--vz-el-3);
}

@media (width < 720px) {
  .vz-widget {
    padding: 26px 18px 22px;
  }
}

.vz-widget__cab {
  margin-block-end: 30px;
}

.vz-widget__titulo {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: var(--vz-ls-title);
  line-height: 1.1;
}

.vz-widget__nota {
  margin-block-start: var(--vz-sp-1);
  color: var(--vz-texto-3);
  font-size: 0.9rem;
}

/* La rejilla de la tarjeta. En escritorio el total ocupa la cuarta columna
   de las dos primeras filas, a la altura de las fechas que lo mueven. */
.vz-widget__rejilla {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  grid-template-areas:
    'unidad desde    hasta  total'
    '.      ajuste   ajuste total'
    'nombre telefono correo boton';
  gap: 22px 18px;
  align-items: end;
}

.vz-campo--unidad { grid-area: unidad; }
.vz-campo--desde { grid-area: desde; }
.vz-campo--hasta { grid-area: hasta; }
.vz-cotizacion { grid-area: total; }
.vz-ajuste { grid-area: ajuste; }
.vz-campo--nombre { grid-area: nombre; }
.vz-campo--telefono { grid-area: telefono; }
.vz-campo--correo { grid-area: correo; }
.vz-widget__enviar { grid-area: boton; }

@media (width < 1000px) {
  .vz-widget__rejilla {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'unidad   unidad'
      'desde    hasta'
      'ajuste   ajuste'
      'total    total'
      'nombre   telefono'
      'correo   boton';
  }
}

@media (width < 640px) {
  .vz-widget__rejilla {
    grid-template-columns: 1fr;
    grid-template-areas:
      'unidad'
      'desde'
      'hasta'
      'ajuste'
      'total'
      'nombre'
      'telefono'
      'correo'
      'boton';
  }
}

/* `position: relative` porque la lista de unidades y los calendarios cuelgan
   del campo, justo debajo del recuadro. */
.vz-campo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Etiquetas en versalita espaciada, como las del ejemplo que pasó el
   cliente: se leen como rótulo y dejan que el valor sea lo que resalta. */
.vz-campo__etiqueta {
  color: var(--vz-texto-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* El campo relleno con icono. El borde, el fondo y el anillo de foco los
   lleva la envoltura y no el control, para que el icono quede dentro del
   recuadro. Relleno gris en reposo y blanco al enfocar: el campo activo es
   el que «se enciende». */
.vz-entrada {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding-inline: 16px 14px;
  border: 1px solid var(--vz-campo-borde);
  border-radius: var(--vz-r-md);
  background: var(--vz-campo);
  transition: border-color var(--vz-transicion), box-shadow var(--vz-transicion),
    background-color var(--vz-transicion);
}

.vz-entrada:hover {
  border-color: var(--vz-borde-fuerte);
}

.vz-entrada:focus-within,
.is-abierto > .vz-entrada {
  border-color: var(--vz-azul-claro);
  background: var(--vz-superficie);
  box-shadow: var(--vz-anillo);
}

.vz-entrada--boton {
  cursor: pointer;
}

.vz-entrada__icono {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: var(--vz-azul-claro);
}

.vz-entrada input,
.vz-entrada select {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vz-texto);
  font-size: 0.9375rem;
  font-weight: 500;
}

.vz-entrada input::placeholder {
  color: var(--vz-texto-3);
}

/* El anillo de la envoltura ya marca el foco; un segundo contorno dentro de
   ella solo ensucia. El de teclado sigue siendo visible y es coral, como en
   el resto de la página. */
.vz-entrada input:focus-visible,
.vz-entrada select:focus-visible,
.vz-entrada .vz-fecha:focus-visible,
.vz-entrada .vz-combo:focus-visible {
  outline: 0;
}

.vz-entrada:has(:focus-visible) {
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.55);
}

/* ------------------------------------------- botones que abren algo
   Lo que publico.js monta encima del <select> y de los dos <input
   type="date">. Ocupan todo el recuadro para que no haya zona muerta. */

.vz-combo,
.vz-fecha {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--vz-sp-2);
  min-width: 0;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vz-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.vz-combo__valor {
  display: flex;
  align-items: baseline;
  gap: var(--vz-sp-2);
  min-width: 0;
}

.vz-combo__nombre,
.vz-fecha__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vz-combo__precio {
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
  font-weight: 500;
  white-space: nowrap;
}

/* En escritorio el campo de unidad mide unos 320 px y el precio al lado
   cortaba el nombre en «Hyundai Accent 2…». Cuando no cabe, se va el precio:
   ya está en la lista y en el total, el nombre no está en ningún otro sitio. */
.vz-campo--unidad .vz-entrada {
  container-type: inline-size;
}

@container (width < 400px) {
  .vz-combo__precio {
    display: none;
  }
}

.vz-combo__flecha,
.vz-fecha__flecha {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: var(--vz-texto-3);
  transition: transform var(--vz-transicion), fill var(--vz-transicion);
}

.is-abierto .vz-combo__flecha,
.is-abierto .vz-fecha__flecha {
  fill: var(--vz-azul-claro);
  transform: rotate(180deg);
}

/* ----------------------------------------------- ventana desplegable */

.vz-pop {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 30;
  min-width: 100%;
  margin: 0;
  border: 1px solid var(--vz-linea);
  border-radius: var(--vz-r-lg);
  background: var(--vz-superficie);
  box-shadow: var(--vz-el-pop);
}

.vz-pop:focus {
  outline: 0;
}

@keyframes vz-pop-entrada {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .vz-pop {
    animation: vz-pop-entrada 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ------------------------------------------------ lista de unidades */

.vz-opciones {
  max-height: 340px;
  padding: 6px;
  overflow-y: auto;
}

.vz-opcion {
  display: flex;
  align-items: center;
  gap: var(--vz-sp-3);
  padding: var(--vz-sp-2) 10px;
  border-radius: var(--vz-r-sm);
  cursor: pointer;
}

.vz-opcion + .vz-opcion {
  margin-block-start: 2px;
}

.vz-opcion__foto {
  width: 64px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--vz-r-xs);
  background: var(--vz-hundido);
  object-fit: cover;
}

.vz-opcion__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.vz-opcion__nombre {
  font-size: 0.9375rem;
  font-weight: 700;
}

.vz-opcion__precio {
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
}

.vz-opcion__marca {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: var(--vz-azul-claro);
  opacity: 0;
}

.vz-opcion.is-activo {
  background: var(--vz-suave);
}

.vz-opcion[aria-selected='true'] {
  background: var(--vz-celeste);
}

.vz-opcion[aria-selected='true'] .vz-opcion__marca {
  opacity: 1;
}

/* -------------------------------------------------------- calendario
   Una sola rejilla de siete columnas. Cada día es un botón de alto fijo
   con el número dentro de un círculo: la franja del rango pinta el botón
   entero y el círculo va encima, así entrega y devolución quedan como dos
   píldoras unidas por la banda celeste. */

.vz-cal {
  width: 336px;
  padding: 18px 18px 14px;
}

.vz-cal__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--vz-sp-3);
}

.vz-cal__mes {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vz-cal__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--vz-linea);
  border-radius: 50%;
  background: var(--vz-superficie);
  color: var(--vz-texto-2);
  cursor: pointer;
  transition: background-color var(--vz-transicion), color var(--vz-transicion);
}

.vz-cal__nav svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.vz-cal__nav:hover:not(:disabled) {
  border-color: var(--vz-celeste);
  background: var(--vz-celeste);
  color: var(--vz-azul-claro);
}

.vz-cal__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.vz-cal__semana,
.vz-cal__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.vz-cal__semana span {
  padding-block: 6px;
  color: var(--vz-texto-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.vz-cal__dias {
  row-gap: 2px;
}

.vz-cal__dia {
  display: grid;
  place-items: center;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vz-texto);
  font-size: var(--vz-fs-chico);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.vz-cal__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background-color var(--vz-transicion), color var(--vz-transicion);
}

.vz-cal__dia:hover:not(:disabled) .vz-cal__num {
  background: var(--vz-celeste);
  color: var(--vz-azul-claro);
}

.vz-cal__dia.is-hoy .vz-cal__num {
  box-shadow: inset 0 0 0 1.5px var(--vz-cielo);
}

.vz-cal__dia.is-rango {
  background: var(--vz-celeste);
}

.vz-cal__dia.is-inicio {
  background: linear-gradient(90deg, transparent 50%, var(--vz-celeste) 50%);
}

.vz-cal__dia.is-fin {
  background: linear-gradient(90deg, var(--vz-celeste) 50%, transparent 50%);
}

.vz-cal__dia.is-inicio.is-fin {
  background: none;
}

.vz-cal__dia.is-inicio .vz-cal__num,
.vz-cal__dia.is-fin .vz-cal__num,
.vz-cal__dia.is-inicio:hover .vz-cal__num,
.vz-cal__dia.is-fin:hover .vz-cal__num {
  background: var(--vz-azul);
  color: var(--vz-texto-inv);
}

.vz-cal__dia:disabled {
  color: var(--vz-borde-fuerte);
  cursor: default;
}

.vz-cal__dia:focus-visible {
  outline: 0;
}

.vz-cal__dia:focus-visible .vz-cal__num {
  outline: 2px solid var(--vz-coral);
  outline-offset: 2px;
}

.vz-cal__pie {
  min-height: 1.5em;
  margin-block-start: var(--vz-sp-3);
  padding-block-start: var(--vz-sp-3);
  border-block-start: 1px solid var(--vz-linea);
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
}

.vz-cal__pie strong {
  color: var(--vz-texto);
}

/* El calendario de la devolución cae en la tercera columna: alineado a la
   derecha de su campo no se sale de la tarjeta. */
.vz-campo--hasta .vz-cal {
  inset-inline: auto 0;
}

@media (width < 640px) {
  .vz-cal,
  .vz-campo--hasta .vz-cal {
    inset-inline: 0;
    width: 100%;
  }
}

.vz-campo__error {
  color: var(--vz-peligro);
  font-size: var(--vz-fs-legal);
  font-weight: 600;
}

/* ------------------------------------------------------------------ total */

.vz-cotizacion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: 100%;
  padding: var(--vz-sp-4) 20px;
  border: 1px solid var(--vz-linea);
  border-radius: var(--vz-r-lg);
  background: var(--vz-suave);
}

.vz-cotizacion__cifra {
  margin-block-start: var(--vz-sp-1);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.2rem);
  font-weight: 800;
  letter-spacing: var(--vz-ls-title);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.vz-cotizacion__desglose {
  margin-block-start: var(--vz-sp-1);
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
}

/* ----------------------------------------------------- ajuste del plazo */

.vz-ajuste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vz-sp-2) var(--vz-sp-4);
}

.vz-ajuste__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vz-sp-2);
}

.vz-ajuste__etiqueta {
  margin-inline-end: var(--vz-sp-1);
  color: var(--vz-texto-3);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vz-ajuste__btn {
  min-height: 34px;
  padding: var(--vz-sp-1) 14px;
  border: 1px solid var(--vz-campo-borde);
  border-radius: var(--vz-r-pill);
  background: var(--vz-campo);
  color: var(--vz-texto-2);
  font-size: var(--vz-fs-legal);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--vz-transicion), color var(--vz-transicion),
    background-color var(--vz-transicion);
}

.vz-ajuste__btn:hover {
  border-color: var(--vz-celeste);
  background: var(--vz-celeste);
  color: var(--vz-azul-claro);
}

.vz-ajuste__actualizar {
  margin-inline-start: auto;
  padding: var(--vz-sp-1) 0;
  border: 0;
  background: none;
  color: var(--vz-azul-claro);
  font-size: var(--vz-fs-legal);
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.vz-widget__enviar {
  width: 100%;
  min-height: 54px;
}

/* ------------------------------------------------------ avisos y letra */

.vz-aviso {
  display: flex;
  gap: var(--vz-sp-3);
  margin-block-start: var(--vz-sp-4);
  padding: var(--vz-sp-3) var(--vz-sp-4);
  border-inline-start: 4px solid var(--vz-aviso);
  border-radius: var(--vz-r-sm);
  background: var(--vz-aviso-suave);
  color: var(--vz-texto);
  font-size: var(--vz-fs-legal);
}

.vz-aviso--error {
  margin-block: 0 var(--vz-sp-4);
  border-inline-start-color: var(--vz-peligro);
  background: var(--vz-peligro-suave);
}

.vz-aviso__icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: var(--vz-aviso);
}

.vz-aviso--error .vz-aviso__icono {
  fill: var(--vz-peligro);
}

.vz-legal {
  margin-block-start: var(--vz-sp-4);
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
}

/* Bloque de contacto que sustituye al widget cuando no hay nada libre. */
.vz-sin-flota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vz-sp-5);
}

.vz-sin-flota__texto {
  flex: 1 1 320px;
}

/* Piezas que usa el comprobante dentro de la misma tarjeta. */
.vz-widget__bloque {
  margin-block-start: var(--vz-sp-5);
  padding-block-start: var(--vz-sp-5);
  border-block-start: 1px solid var(--vz-linea);
}

.vz-widget__paso {
  display: block;
  margin-block-end: var(--vz-sp-2);
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--vz-ls-eyebrow);
  text-transform: uppercase;
}

.vz-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vz-sp-4) var(--vz-sp-6);
  margin-block-start: var(--vz-sp-5);
  padding: var(--vz-sp-5);
  border-radius: var(--vz-r-lg);
  background: var(--vz-suave);
}

.vz-total__resumen {
  flex: 1 1 260px;
}

.vz-total__desglose {
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-chico);
}

.vz-lista {
  display: flex;
  flex-direction: column;
  gap: var(--vz-sp-3);
}

.vz-lista li {
  display: flex;
  gap: var(--vz-sp-3);
  align-items: flex-start;
}

.vz-lista__icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-block-start: 2px;
  fill: var(--vz-exito);
}

.vz-lista--neutra .vz-lista__icono {
  fill: var(--vz-azul-claro);
}

/* ==========================================================================
   7. Ventajas
   ========================================================================== */

.vz-ventajas {
  padding-block: 64px 36px;
}

.vz-ventajas__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vz-sp-3);
}

.vz-ventaja {
  padding: var(--vz-sp-3) var(--vz-sp-4);
  border-inline-end: 1px solid var(--vz-linea);
  text-align: center;
}

.vz-ventaja:last-child {
  border-inline-end: 0;
}

.vz-ventaja__icono {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--vz-sp-3);
  fill: var(--vz-azul-claro);
}

.vz-ventaja__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vz-ventaja__texto {
  margin-block-start: var(--vz-sp-1);
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
}

@media (width < 720px) {
  .vz-ventajas__rejilla {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vz-sp-5) var(--vz-sp-2);
  }

  .vz-ventaja:nth-child(2n) {
    border-inline-end: 0;
  }
}

/* ==========================================================================
   8. Flota
   --------------------------------------------------------------------------
   auto-fit y no cuatro columnas fijas: la flota real son tres unidades hoy,
   y una cuarta columna vacía se lee como «falta algo».
   ========================================================================== */

.vz-flota {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.vz-carro {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 18px;
  border: 1px solid var(--vz-linea);
  border-radius: var(--vz-r-lg);
  background: var(--vz-superficie);
  box-shadow: var(--vz-el-1);
  transition: transform var(--vz-transicion), box-shadow var(--vz-transicion);
}

.vz-carro:hover {
  transform: translateY(-5px);
  box-shadow: var(--vz-el-3);
}

/* `height: auto` no es de adorno: el atributo height="500" del <img> (que
   está para reservar el hueco antes de que cargue) cuenta como alto en CSS,
   y con ancho y alto puestos el aspect-ratio se ignora. Sin esta línea la
   foto medía 500 px de alto en cualquier ancho. */
.vz-carro__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin-block-end: 14px;
  border-radius: var(--vz-r-md);
  background: var(--vz-hundido);
  object-fit: cover;
}

.vz-carro__nombre {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.vz-carro__texto {
  display: -webkit-box;
  margin-block-start: var(--vz-sp-1);
  overflow: hidden;
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.vz-carro__precio {
  display: flex;
  align-items: baseline;
  gap: var(--vz-sp-1);
  margin-block: var(--vz-sp-3);
}

.vz-carro__monto {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: var(--vz-ls-title);
  font-variant-numeric: tabular-nums;
}

.vz-carro__unidad {
  color: var(--vz-texto-3);
  font-size: 0.75rem;
  font-weight: 600;
}

/* El hueco de la derecha es para la flecha, que va anclada a la esquina. */
.vz-carro__rasgos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: auto;
  padding-inline-end: 48px;
}

.vz-carro__rasgos li {
  display: flex;
  align-items: center;
  gap: var(--vz-sp-2);
  color: var(--vz-texto-3);
  font-size: 0.8rem;
}

.vz-carro__rasgos svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: var(--vz-azul-claro);
}

.vz-carro__ir {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-end: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vz-celeste);
  color: var(--vz-azul-claro);
  transition: background-color var(--vz-transicion), color var(--vz-transicion);
}

.vz-carro__ir svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.vz-carro__ir:hover {
  background: var(--vz-azul);
  color: var(--vz-texto-inv);
}

/* ==========================================================================
   9. Tarifas: la franja índigo con foto
   ========================================================================== */

.vz-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 330px;
  overflow: hidden;
  border-radius: var(--vz-r-xl);
  background: linear-gradient(135deg, var(--vz-azul-oscuro) 0%, var(--vz-azul) 100%);
  color: var(--vz-texto-inv);
}

.vz-promo__texto {
  padding: 52px;
}

.vz-promo .vz-eyebrow {
  color: var(--vz-cielo-claro);
}

.vz-promo .vz-h2 {
  margin-block: var(--vz-sp-2) var(--vz-sp-4);
}

.vz-promo__bajada {
  max-width: 440px;
  color: var(--vz-texto-inv-2);
}

.vz-promo__lista {
  display: flex;
  flex-direction: column;
  gap: var(--vz-sp-2);
  margin-block: var(--vz-sp-5) 28px;
  color: var(--vz-texto-inv-2);
  font-size: var(--vz-fs-chico);
}

.vz-promo__lista li {
  display: flex;
  gap: var(--vz-sp-2);
  align-items: flex-start;
}

.vz-promo__lista svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-block-start: 2px;
  fill: var(--vz-cielo-claro);
}

/* La misma foto de la portada, ampliada sobre el atardecer: una sola
   descarga para los dos sitios. Detrás, el medio sol coral del logotipo. */
.vz-promo__imagen {
  position: relative;
  background: var(--vz-azul-oscuro) url('../img/publico/portada.jpg') 60% 36% / 250% auto no-repeat;
  background-image: image-set(
    url('../img/publico/portada.webp') type('image/webp'),
    url('../img/publico/portada.jpg') type('image/jpeg')
  );
}

.vz-promo__imagen::before {
  content: '';
  position: absolute;
  inset-block-start: -32px;
  inset-inline-start: -38px;
  z-index: 1;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: var(--vz-coral);
}

.vz-promo__imagen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--vz-azul) 0%, rgba(1, 17, 113, 0) 34%);
}

@media (width < 720px) {
  .vz-promo {
    grid-template-columns: 1fr;
  }

  .vz-promo__texto {
    padding: 38px 24px;
  }

  .vz-promo__imagen {
    min-height: 230px;
    background-size: 180% auto;
  }

  .vz-promo__imagen::after {
    background: linear-gradient(180deg, var(--vz-azul) 0%, rgba(1, 17, 113, 0) 40%);
  }
}

/* ==========================================================================
   10. Cómo funciona
   ========================================================================== */

.vz-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vz-sp-6) 40px;
  margin-block-start: var(--vz-sp-7);
  text-align: center;
  counter-reset: vz-paso;
}

.vz-paso {
  counter-increment: vz-paso;
}

.vz-paso__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vz-sp-4);
  height: 74px;
}

.vz-paso__marca::before {
  content: counter(vz-paso);
  color: var(--vz-cielo);
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vz-paso__marca svg {
  width: 52px;
  height: 52px;
  padding: 14px;
  border-radius: 50%;
  background: var(--vz-celeste);
  fill: var(--vz-azul-claro);
}

.vz-paso .vz-h3 {
  margin-block-start: var(--vz-sp-2);
}

.vz-paso__texto {
  max-width: 26ch;
  margin: var(--vz-sp-2) auto 0;
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-chico);
}

.vz-paso__tiempo {
  display: inline-block;
  margin-block-start: var(--vz-sp-3);
  padding: 2px var(--vz-sp-3);
  border-radius: var(--vz-r-pill);
  background: var(--vz-celeste);
  color: var(--vz-azul-claro);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (width < 1000px) {
  .vz-pasos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 560px) {
  .vz-pasos {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   11. Portal del conductor
   ========================================================================== */

.vz-portal {
  padding-block: 80px;
  background: var(--vz-suave);
}

.vz-portal__rejilla {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 1fr;
  align-items: center;
  gap: 56px;
}

/* El teléfono es un dibujo en CSS. El marco va en índigo casi negro y no en
   negro: el manual no admite sombras ni bordes grises sobre la marca. */
.vz-telefono {
  justify-self: center;
  width: 215px;
  padding: 8px;
  border: 8px solid var(--vz-marco);
  border-radius: var(--vz-r-2xl);
  background: var(--vz-marco);
  box-shadow: var(--vz-el-marco);
}

.vz-telefono__pantalla {
  padding: 26px 14px 16px;
  border-radius: var(--vz-r-xl);
  background: linear-gradient(180deg, var(--vz-celeste) 0%, var(--vz-superficie) 100%);
  text-align: center;
}

.vz-telefono__logo {
  width: 34px;
  height: 34px;
  margin-inline: auto;
}

.vz-telefono__marca {
  margin-block-start: var(--vz-sp-1);
  color: var(--vz-azul);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.vz-telefono__foto {
  height: 130px;
  margin-block: var(--vz-sp-3);
  border-radius: var(--vz-r-lg);
  background: var(--vz-azul-oscuro) url('../img/publico/portada.jpg') 80% 68% / 330% auto no-repeat;
  background-image: image-set(
    url('../img/publico/portada.webp') type('image/webp'),
    url('../img/publico/portada.jpg') type('image/jpeg')
  );
}

.vz-telefono__dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--vz-sp-2) var(--vz-sp-3);
  border: 1px solid var(--vz-linea);
  border-radius: var(--vz-r-sm);
  background: var(--vz-superficie);
  color: var(--vz-texto-3);
  font-size: 0.7rem;
}

.vz-telefono__dato strong {
  color: var(--vz-texto);
  font-size: 0.9rem;
}

.vz-telefono__boton {
  display: inline-block;
  margin-block-start: var(--vz-sp-3);
  padding: 9px 16px;
  border-radius: var(--vz-r-pill);
  background: var(--vz-azul);
  color: var(--vz-texto-inv);
  font-size: 0.7rem;
  font-weight: 700;
}

.vz-portal__texto .vz-h2 {
  margin-block: var(--vz-sp-2) var(--vz-sp-4);
}

.vz-portal__texto .vz-btn {
  margin-block-start: var(--vz-sp-5);
}

.vz-portal__rasgos {
  display: grid;
  gap: 18px;
}

.vz-portal__rasgos li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.vz-portal__icono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vz-superficie);
  box-shadow: var(--vz-el-2);
}

.vz-portal__icono svg {
  width: 24px;
  height: 24px;
  fill: var(--vz-azul-claro);
}

@media (width < 1000px) {
  .vz-portal__rejilla {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .vz-portal__rasgos {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width < 720px) {
  .vz-portal__rejilla {
    grid-template-columns: 1fr;
    gap: var(--vz-sp-6);
  }

  .vz-portal__texto {
    text-align: center;
  }

  .vz-portal__texto .vz-h2,
  .vz-portal__texto .vz-lead {
    margin-inline: auto;
  }

  .vz-portal__rasgos {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12. Preguntas frecuentes
   --------------------------------------------------------------------------
   <details> nativos con la forma de tarjeta del mockup. El «+» está dibujado
   con dos degradados y gira hasta ser una «×» al abrir.
   ========================================================================== */

.vz-faq {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.vz-faq__intro .vz-h2 {
  max-width: 16ch;
}

.vz-faq__intro .vz-lead {
  max-width: 500px;
  margin-block: var(--vz-sp-4) 26px;
}

.vz-faq__lista {
  display: grid;
  gap: 10px;
}

.vz-pregunta {
  overflow: hidden;
  border: 1px solid var(--vz-linea);
  border-radius: var(--vz-r-md);
  background: var(--vz-superficie);
}

.vz-pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vz-sp-4);
  padding: 18px 20px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.vz-pregunta summary::-webkit-details-marker {
  display: none;
}

.vz-pregunta summary::after {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--vz-azul), var(--vz-azul)) center / 100% 2px no-repeat,
    linear-gradient(var(--vz-azul), var(--vz-azul)) center / 2px 100% no-repeat;
  transition: transform var(--vz-transicion);
}

.vz-pregunta[open] summary::after {
  transform: rotate(45deg);
}

.vz-pregunta__respuesta {
  padding: 0 20px 18px;
  color: var(--vz-texto-3);
}

@media (width < 860px) {
  .vz-faq {
    grid-template-columns: 1fr;
    gap: var(--vz-sp-6);
  }
}

/* ==========================================================================
   13. Pie
   ========================================================================== */

.vz-pie {
  padding-block: 55px 22px;
  background: linear-gradient(135deg, var(--vz-azul-noche) 0%, var(--vz-azul) 100%);
  color: var(--vz-texto-inv-2);
  font-size: var(--vz-fs-chico);
}

.vz-pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1fr 0.8fr;
  gap: var(--vz-sp-7) 55px;
}

.vz-pie__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--vz-sp-2);
  color: var(--vz-texto-inv);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.vz-pie__marca svg {
  width: 36px;
  height: 36px;
}

.vz-pie__lema {
  margin-block: var(--vz-sp-4) var(--vz-sp-1);
  color: var(--vz-texto-inv);
  font-weight: 600;
}

.vz-pie__titulo {
  margin-block-end: var(--vz-sp-3);
  color: var(--vz-texto-inv);
  font-size: var(--vz-fs-body);
  font-weight: 700;
}

.vz-pie__columna a,
.vz-pie__columna p {
  display: block;
  margin-block: var(--vz-sp-2);
}

.vz-pie a {
  text-decoration: none;
}

.vz-pie a:hover {
  color: var(--vz-texto-inv);
  text-decoration: underline;
}

.vz-pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vz-sp-2) var(--vz-sp-5);
  margin-block-start: 38px;
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(243, 245, 251, 0.14);
  color: var(--vz-texto-inv-3);
  font-size: 0.8rem;
}

@media (width < 1000px) {
  .vz-pie__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 560px) {
  .vz-pie__rejilla {
    grid-template-columns: 1fr;
    gap: var(--vz-sp-6);
  }
}

/* ==========================================================================
   14. Móvil: barra fija inferior y diálogo
   --------------------------------------------------------------------------
   WCAG 2.2 (2.4.11 Focus Not Obscured) prohíbe que un elemento pegajoso tape
   lo que acaba de recibir el foco. Por eso el body reserva exactamente el
   alto de la barra, arriba Y en el scroll-padding: sin la segunda, el
   navegador lleva el campo enfocado justo debajo de la barra.
   ========================================================================== */

.vz-barra-movil {
  display: none;
}

@media (width < 820px) {
  body.tiene-barra-movil {
    padding-block-end: var(--vz-barra-movil);
    scroll-padding-block-end: var(--vz-barra-movil);
  }

  .vz-barra-movil {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: var(--vz-sp-4);
    min-height: var(--vz-barra-movil);
    padding: var(--vz-sp-2) var(--vz-canal);
    padding-block-end: max(var(--vz-sp-2), env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--vz-linea);
    background: var(--vz-superficie);
    box-shadow: var(--vz-el-flotante);
  }
}

.vz-barra-movil__precio {
  flex: 1;
  line-height: 1.25;
}

.vz-barra-movil__monto {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.vz-barra-movil__nota {
  color: var(--vz-texto-3);
  font-size: var(--vz-fs-legal);
}

.vz-dialogo {
  width: min(560px, 100%);
  max-height: 88dvh;
  padding: 0;
  border: 0;
  border-radius: var(--vz-r-xl);
  background: var(--vz-superficie);
  box-shadow: var(--vz-el-3);
}

.vz-dialogo::backdrop {
  background: rgba(1, 7, 43, 0.62);
  backdrop-filter: blur(3px);
}

.vz-dialogo__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vz-sp-4);
  padding: var(--vz-sp-4) var(--vz-sp-5);
  border-block-end: 1px solid var(--vz-linea);
}

.vz-dialogo__cuerpo {
  padding: var(--vz-sp-5);
  overflow-y: auto;
}

/* Dentro del diálogo el widget ya no necesita su caja ni su título: el
   diálogo tiene los suyos. */
.vz-dialogo .vz-widget {
  padding: 0;
  border-radius: var(--vz-r-xs);
  box-shadow: none;
}

.vz-dialogo .vz-widget__cab .vz-eyebrow,
.vz-dialogo .vz-widget__titulo {
  display: none;
}

/* Dentro del diálogo el cuerpo hace scroll y una ventana flotante quedaría
   recortada por él: la lista y el calendario se abren en línea, empujando
   el resto hacia abajo. */
.vz-dialogo .vz-pop,
.vz-dialogo .vz-campo--hasta .vz-cal {
  position: static;
  width: 100%;
  margin-block-start: var(--vz-sp-2);
  box-shadow: none;
}

.vz-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vz-borde);
  border-radius: var(--vz-r-pill);
  background: var(--vz-superficie);
  cursor: pointer;
}

.vz-cerrar svg {
  width: 18px;
  height: 18px;
  fill: var(--vz-texto-2);
}

/* ==========================================================================
   15. Movimiento
   --------------------------------------------------------------------------
   Las entradas se conducen con animation-timeline: view(). El contenido sale
   VISIBLE por defecto y la animación solo se activa donde hay soporte: al
   revés —opacidad 0 de salida y un script que la sube— un navegador sin
   soporte deja la página en blanco, que es el peor fallo posible aquí.
   ========================================================================== */

@keyframes vz-entrada {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .vz-reveal {
      animation: vz-entrada linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .vz-btn:hover,
  .vz-carro:hover {
    transform: none;
  }
}