/* ==========================================================================
   VARIABLES.CSS — Sistema de diseño de Vértice Rent a Car
   Base clara y editorial: tipografía con jerarquía marcada, filetes finos,
   esquinas discretas y el azul reservado para lo interactivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Neutros */
  --tinta: #0b0c0e;        /* negro principal */
  --carbon: #16181c;       /* superficie oscura elevada */
  --grafito: #2c3037;      /* bordes sobre oscuro */
  --humo: #6b7079;         /* texto secundario */
  --plata: #aeb4bd;        /* texto sobre oscuro */
  --niebla: #f4f5f7;       /* fondo alterno claro */
  --linea: #e2e5ea;        /* filete sobre claro */
  --papel: #ffffff;

  /* Acento: azul corporativo, solo para lo accionable */
  --azul: #0b4fd8;
  --azul-alto: #3b7bff;
  --azul-suave: #eaf0fe;

  /* Estados */
  --verde: #0e9f5b;
  --ambar: #c2410c;
  --whatsapp: #12a15a;

  /* Tipografía */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Escala fluida */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: clamp(1.02rem, 0.97rem + 0.3vw, 1.15rem);
  --t-lg: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --t-xl: clamp(1.85rem, 1.45rem + 1.7vw, 2.9rem);
  --t-2xl: clamp(2.4rem, 1.7rem + 3.2vw, 4.6rem);

  /* Espaciado */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: 6.5rem;

  /* Layout */
  --ancho: 1280px;
  --margen: 1.25rem;
  --nav-h: 66px;

  /* Formas: esquinas discretas, nada de burbujas */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(11, 12, 14, 0.06);
  --sombra-md: 0 8px 24px rgba(11, 12, 14, 0.08);
  --sombra-lg: 0 24px 60px rgba(11, 12, 14, 0.14);

  /* Movimiento */
  --rapido: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --medio: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --lento: 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  :root { --margen: 2rem; --nav-h: 76px; }
}

@media (min-width: 1200px) {
  :root { --margen: 3rem; }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-stretch: 100%;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); font-weight: 800; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { text-wrap: pretty; }

/* Etiqueta monoespaciada de sección */
.eyebrow {
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
  display: block;
}

.eyebrow--claro { color: var(--azul-alto); }

.dato {
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.seccion { padding-block: var(--e-8); }

@media (min-width: 900px) {
  .seccion { padding-block: var(--e-9); }
}

.seccion--oscura { background: var(--tinta); color: var(--papel); }
.seccion--mist { background: var(--niebla); }

.seccion__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
  max-width: 60ch;
}

.seccion__texto { color: var(--humo); font-size: var(--t-md); }
.seccion--oscura .seccion__texto { color: var(--plata); }

/* Filete superior que encabeza las secciones */
.seccion__cabecera::before {
  content: "";
  width: 100%;
  max-width: 64px;
  height: 2px;
  background: var(--azul);
  margin-bottom: var(--e-2);
}

[data-icono] {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

[data-icono] > svg { width: 100%; height: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sin-scroll { overflow: hidden; }