/* ══ DELCOCAR — tokens ══
   Dirección: base oscura premium (tono Garage Doria),
   jerarquía y aire generoso (Kindred Motorworks, Salazar Israel), animación mínima.
   "Aire" sin fondo blanco: las secciones claras usan el crema de la presentación
   de Delcocar; el azul de marca queda como acento, no como fondo. */

:root {
  /* COLOR — oscuro cálido (no azul-negro) */
  --c-ink:        #100F0D;  /* fondo base oscuro */
  --c-ink-2:      #1B1916;  /* superficie sobre oscuro */
  --c-ink-line:   #2E2B27;  /* hairlines sobre oscuro — solo bordes */
  --c-on-ink:     #F4EFE6;  /* texto principal sobre oscuro */
  --c-on-ink-mid: #B3ADA3;  /* texto secundario sobre oscuro (AA) */

  /* COLOR — crema (aire) */
  --c-cream:      #F4EFE6;  /* fondo claro, crema de la presentación Delcocar */
  --c-cream-2:    #EAE3D6;  /* superficie sobre crema */
  --c-cream-line: #D6CDBD;  /* hairlines sobre crema — solo bordes */
  --c-text:       #17150F;  /* texto principal sobre crema */
  --c-text-mid:   #57524A;  /* texto secundario sobre crema (AA) */

  /* COLOR — marca */
  --c-navy:       #1F3A5F;  /* azul Delcocar: acento sobre crema, botón primario */
  --c-navy-dark:  #162B47;  /* hover */
  --c-sky:        #9DBCE3;  /* acento del azul de marca sobre oscuro (AA) */
  /* Sección en azul de marca (una por página como máximo) */
  --c-on-navy-mid: #C9D6E6; /* texto secundario sobre azul (7,8:1) */
  --c-navy-line:   #3A5579; /* hairlines sobre azul — solo bordes */
  --c-danger:     #A3261B;  /* error de formulario sobre crema (AA) */
  --c-wa:         #25D366;  /* WhatsApp — solo el botón flotante */
  --c-wa-ink:     #0B3D1F;  /* ícono sobre verde WhatsApp */
  --c-scrim:        rgba(16, 15, 13, 0.62); /* velo sobre foto: franja del header */
  --c-scrim-strong: rgba(16, 15, 13, 0.88); /* bajo el texto del hero */
  --c-scrim-soft:   rgba(16, 15, 13, 0.45); /* transición del oscurecido a la foto limpia */

  /* TIPOGRAFÍA — escala, retícula 4px */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Títulos: condensada de la propuesta y la pauta que Delcocar ya vio (4/10) */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Mayúsculas o tipo oración en todos los títulos: se cambia solo aquí (familia en revisión en Figma, 20/10) */
  --display-case: uppercase;
  --text-base: 0.875rem;  /* 14px — mínimo en pantalla */
  --text-md:   1rem;      /* 16px — cuerpo */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px — títulos de sección (condensada) */
  --text-hero: 4.75rem;   /* 76px — dato dominante y títulos de página */
  --text-display: 6rem;   /* 96px — título del hero de la Home (condensada, 2 líneas) */

  --lh-display: 1;        /* condensada en mayúsculas, deja aire a las tildes */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  --fw-base: 400;
  --fw-mid:  500;
  --fw-bold: 600;
  --fw-black: 700;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;

  /* ESPACIADO — 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* LAYOUT */
  --container: 76rem;
  --gutter: var(--sp-5);
  --section-py: var(--sp-20);
  --header-h: 4.5rem;     /* 72px móvil · 96px escritorio */
  --logo-size: 3.5rem;    /* 56px móvil · 72px escritorio: bajo 56px no se lee "DELCOCAR". Deja 8–12px de aire arriba y abajo */
  --tap: 2.75rem;          /* 44px — área táctil mínima */

  /* Radios más suaves; las fotos llevan el mayor */
  --radius-sm: 6px;   /* etiquetas chicas */
  --radius-md: 10px;  /* botones, campos, tarjetas y paneles */
  --radius-lg: 12px;  /* fotos */

  /* ÍCONOS EN CSS — máscaras: toman el color del texto (background: currentColor) */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* MOVIMIENTO — mínimo y corto */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 600ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--sp-10);
    --section-py: var(--sp-32);
  }
}

@media (min-width: 64rem) {
  :root {
    --header-h: 6rem;
    --logo-size: 4.5rem;
  }
}