/* =========================================================================
   INGELOGSS — main.css
   Sistema visual base: variables globales, reset y estilos de elementos.
   Dirección visual: industrial / editorial / cinematográfica.
   Basado en la paleta y tipografía de la V1 aprobada (Claude Design).

   Este archivo NO diseña componentes (header, hero, tarjetas, formularios).
   Esos estilos se construyen en components.css sobre esta base.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES GLOBALES
   ------------------------------------------------------------------------- */
:root {

  /* --- Color de marca --- */
  --color-black: #15181C;        /* negro principal (fondos oscuros, texto sobre claro) */
  --color-white-warm: #F3EFE6;   /* blanco cálido (fondos claros, texto sobre oscuro) */
  --color-blue: #4A7FB5;         /* azul de marca (acento alternativo) */
  /* --color-amber se unificó con --color-brand-yellow (mismo valor,
     #ECBC1C): antes eran dos amarillos distintos (E6A539 y ECBC1C), ahora
     es uno solo. Los dos tokens siguen existiendo y usándose donde ya se
     usaban (amber = botones/acentos/foco/eyebrows sobre negro; brand-yellow
     = fondo del tema "yellow") — es intencional que hoy valgan lo mismo.
     amber-dark y amber-darker son el mismo H/S que el amber nuevo, con la
     misma proporción de oscurecimiento en L (HSL) que tenían respecto al
     amber anterior: L×0.742 (dark) y L×0.571 (darker) — contraste real
     medido sobre blanco: amber-dark 3.04:1 (borde/UI, no texto),
     amber-darker 4.85:1 (texto pequeño, eyebrows y enlaces). */
  --color-amber: #ECBC1C;        /* amarillo/ámbar (acento principal) — igual a --color-brand-yellow */
  --color-amber-dark: #B58F0F;   /* ámbar oscuro (enlaces, detalle sobre fondo claro) */
  --color-amber-darker: #8B6E0C; /* ámbar oscuro, estado hover */
  --color-brand-yellow: #ECBC1C; /* amarillo de marca muestreado del logo (fondo del tema "yellow") */
  --color-surface: #1E2227;      /* superficie ligeramente más clara que el negro (tarjetas sobre fondo oscuro) */
  --color-whatsapp: #128C7E;     /* verde de marca de WhatsApp (botón flotante). Fijo: no forma parte de los temas de sección, no cambia con ellos */
  /* Botones de Nivel 3: el mismo verde (mismo H y S, 174° / 77%) con menos luminosidad, porque
     el verde del botón flotante con texto blanco da 4.14:1 (< 4.5:1). Reposo L 25% = 5.87:1;
     hover L 20% = más oscuro aún. No son mezclas con negro. El flotante conserva --color-whatsapp. */
  --color-whatsapp-btn: #0F7167;
  --color-whatsapp-btn-hover: #0C5A53;

  /* --- Color de texto --- */
  --color-text-primary: var(--color-black);      /* texto principal sobre fondo claro */
  --color-text-secondary: #5C6167;                /* texto secundario sobre fondo claro */
  --color-text-inverse: var(--color-white-warm);  /* texto principal sobre fondo oscuro */
  --color-text-inverse-secondary: #9AA0A6;        /* texto secundario sobre fondo oscuro */
  --color-text-inverse-muted: #7B8087;            /* texto terciario/nota sobre fondo oscuro */

  /* --- Fondos --- */
  --bg-light: #FFFFFF;   /* fondo de secciones claras — antes: var(--color-white-warm); ahora es su propio token, no un alias (ver --color-white-warm, que sigue en #F3EFE6 para texto sobre fondo oscuro) */
  --bg-dark: var(--color-black);         /* fondo de secciones oscuras */
  --bg-dark-elevated: #1E2227;           /* fondo de elementos sobre fondo oscuro (inputs, tarjetas) */

  /* --- Bordes --- */
  --border-on-light: rgba(21, 24, 28, 0.12);
  --border-on-light-strong: var(--color-black);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --border-on-dark-strong: rgba(255, 255, 255, 0.3);

  /* --- Tipografía ---
     Fuentes definitivas, cargadas desde Google Fonts en <head> de
     index.html: Oswald (--font-display, encabezados), Archivo
     (--font-sans, cuerpo de texto) y Space Mono (--font-mono,
     eyebrows/numeración). Cada variable conserva una pila de fallback
     del sistema por si la fuente tarda en cargar o falla. */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Oswald", var(--font-sans);
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
  --font-logo: "Arvo", serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 700; /* Oswald (Google Fonts) no incluye 900; usa el peso máximo real de la fuente cargada */

  /* --- Tamaños de texto (escala fluida) --- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.1875rem;  /* 19px */
  --text-xl: clamp(1.375rem, 3.2vw, 2rem);      /* 22px → 32px */
  --text-2xl: clamp(1.625rem, 4vw, 2.625rem);   /* 26px → 42px */
  --text-3xl: clamp(1.875rem, 5.4vw, 3.625rem); /* 30px → 58px */

  --leading-tight: 1.1;
  --leading-snug: 1.5;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --letter-spacing-eyebrow: 0.08em;

  /* --- Espaciado --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* Espaciado editorial de sección (coherente con la V1) */
  --space-section-y: clamp(3rem, 8vw, 6rem);   /* 48px → 96px */
  --space-section-x: clamp(1.25rem, 6vw, 4rem); /* 20px → 64px */

  /* --- Radios --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 50%;

  /* --- Esquina cortada de los botones por niveles (ver components.css,
     "SISTEMA DE BOTONES POR NIVELES"): largo del corte en cada esquina. --- */
  --btn-notch: 12px;

  /* --- Ancho máximo del contenido --- */
  --max-width-content: 1280px;

  /* --- Transiciones básicas --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* -------------------------------------------------------------------------
   1b. TEMAS DE SECCIÓN
   Cada sección temable lleva data-theme="dark" | "light" | "yellow". Cada
   tema define AQUÍ, una sola vez, el mismo juego de variables locales; el
   CSS de la sección (components.css) consume solo esas variables — nunca
   colores fijos ni tokens sueltos para fondo, texto, eyebrow, línea o
   botón. Cambiar el fondo de una sección es cambiar su data-theme en el
   HTML (o editar un valor de este bloque para cambiarlo en todas las que
   lo usen). Las variables se heredan, así que llegan a todo lo que la
   sección contiene; lo que NO debe seguir al tema (p. ej. las tarjetas de
   Maquinaria, con overlays oscuros sobre fotos) simplemente no las usa.

   Variables:
     --bg              fondo de la sección (y de su pseudo-elemento de borde a borde)
     --fg              texto principal (títulos)
     --fg-muted        texto secundario
     --eyebrow         color del eyebrow
     --line            líneas y bordes divisorios
     --btn-bg / --btn-fg                 botón principal, reposo
     --btn-bg-hover / --btn-fg-hover     botón principal, hover
     --btn-sweep-bg / --btn-sweep-fg     botones de Nivel 1: color del barrido de hover y de su
                                         texto, y del anillo de foco de los tres niveles con esquina
                                         cortada. Contrasta con el fondo del tema (claro sobre
                                         oscuro, negro sobre claro), así el botón no se funde con él
     --btn-tint        botones de Nivel 2: % de currentColor del tinte de hover. En claro es 5%:
                       con más, el texto (ámbar oscuro, 4.85:1 sobre blanco) baja de 4.5:1
     --focus           indicador de foco de teclado (outline) de la sección
     --link            color de los enlaces de texto de la sección (regla global
                       `a`, más abajo). dark = ámbar, light = ámbar oscuro,
                       yellow = negro; fuera de toda sección con tema, el
                       respaldo es --color-amber-darker (4.5:1+ sobre blanco)
     --logo-filter     filter del logo (contorno claro solo sobre fondo oscuro)

   Variables de "Cómo trabajamos" (círculos numerados unidos por una curva):
     --dot-bg          relleno del círculo (y de las ruedas del ícono del camión)
     --dot-ink         trazo del ícono dentro del círculo
     --ring            aro fino alrededor del círculo (la separación del color
                       de fondo va con el fondo real de la sección, no con esta)
     --num-stroke      contorno de los números grandes 01–04
     --num-fill        relleno de esos números (el color del contorno, muy tenue)
     --wave            línea curva y su pista punteada (y la línea vertical en móvil)

   Variables de "Cotización" (columna de texto + tarjeta con el formulario).
   La tarjeta es SIEMPRE oscura y su texto va siempre en --color-white-warm,
   sea cual sea el tema; el tema decide solo el color de la tarjeta, de los
   campos y del acento:
     --card-bg         fondo de la tarjeta
     --input-bg        fondo de los campos de texto, textarea, fecha y filas de archivo
     --card-line       borde de la tarjeta (transparent = sin borde)
     --card-accent     progreso, selección, foco y botón "Siguiente" dentro de la tarjeta
     --wa-bg / --wa-fg botón de WhatsApp de la columna izquierda (fondo / texto)

   CÓMO AGREGAR UNA VARIABLE NUEVA:
     1) Declárala con el MISMO nombre en los tres bloques de abajo, cada
        uno con el valor que le corresponde a ese tema (un tema sin ella
        dejaría un hueco: var() sin definir = propiedad inválida).
     2) Úsala en la sección con var(--nombre). No escribas el color o
        token directamente en la regla de la sección.
     3) Agrega su línea a la lista de arriba.
   CÓMO AGREGAR UN TEMA NUEVO: copia un bloque completo, cambia el valor
   del atributo y ajusta cada variable.
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: var(--bg-dark);
  --fg: var(--color-white-warm);
  --fg-muted: color-mix(in srgb, var(--color-white-warm) 80%, transparent);
  --eyebrow: var(--color-amber);
  --line: color-mix(in srgb, var(--color-white-warm) 30%, transparent);
  --btn-bg: var(--color-amber);
  --btn-fg: var(--color-black);
  --btn-bg-hover: var(--color-amber-dark);
  --btn-fg-hover: var(--color-black);
  --btn-sweep-bg: var(--color-white-warm);
  --btn-sweep-fg: var(--color-black);
  --btn-tint: 12%;
  --focus: var(--color-amber);
  --link: var(--color-amber);
  --dot-bg: var(--color-amber);
  --dot-ink: var(--color-black);
  --ring: var(--color-amber);
  --num-stroke: var(--color-amber);
  --num-fill: color-mix(in srgb, var(--color-amber) 12%, transparent);
  --wave: var(--color-amber);
  --card-bg: var(--color-surface);
  --input-bg: var(--color-black);
  --card-line: color-mix(in srgb, var(--color-white-warm) 14%, transparent);
  --card-accent: var(--color-amber);
  --wa-bg: var(--color-amber);
  --wa-fg: var(--color-black);
  /* Contorno claro de 1px en 4 direcciones + sombra oscura de respaldo:
     sin esto la silueta negra del logo se pierde contra un fondo oscuro. */
  --logo-filter:
    drop-shadow(1px 0 0.5px var(--color-white-warm))
    drop-shadow(-1px 0 0.5px var(--color-white-warm))
    drop-shadow(0 1px 0.5px var(--color-white-warm))
    drop-shadow(0 -1px 0.5px var(--color-white-warm))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

[data-theme="light"] {
  --bg: var(--bg-light);
  --fg: var(--color-black);
  --fg-muted: var(--color-text-secondary);
  --eyebrow: var(--color-amber-darker);
  --line: var(--color-black);
  --btn-bg: var(--color-amber);
  --btn-fg: var(--color-black);
  --btn-bg-hover: var(--color-amber-dark);
  --btn-fg-hover: var(--color-black);
  --btn-sweep-bg: var(--color-black);
  --btn-sweep-fg: var(--color-white-warm);
  --btn-tint: 5%;
  --focus: var(--color-black);
  --link: var(--color-amber-darker);
  --dot-bg: var(--color-amber);
  --dot-ink: var(--color-black);
  --ring: var(--color-amber-dark);
  --num-stroke: var(--color-amber-dark);
  --num-fill: color-mix(in srgb, var(--color-amber-dark) 10%, transparent);
  --wave: var(--color-amber-dark);
  --card-bg: var(--color-black);
  --input-bg: var(--color-surface);
  --card-line: transparent;
  --card-accent: var(--color-amber);
  --wa-bg: var(--color-black);
  --wa-fg: var(--color-white-warm);
  --logo-filter: none;
}

[data-theme="yellow"] {
  --bg: var(--color-brand-yellow);
  --fg: var(--color-black);
  --fg-muted: var(--color-black);
  --eyebrow: var(--color-black);
  --line: var(--color-black);
  --btn-bg: var(--color-black);
  --btn-fg: var(--color-white-warm);
  /* Hover: el fondo negro se mantiene y el texto pasa al amarillo de
     marca — cambio visible sin perder el contraste del botón sobre el
     fondo amarillo de la sección. */
  --btn-bg-hover: var(--color-black);
  --btn-fg-hover: var(--color-brand-yellow);
  --btn-sweep-bg: var(--color-white-warm);
  --btn-sweep-fg: var(--color-black);
  --btn-tint: 12%;
  --focus: var(--color-black);
  --link: var(--color-black);
  --dot-bg: var(--color-black);
  --dot-ink: var(--color-brand-yellow);
  --ring: var(--color-black);
  --num-stroke: var(--color-black);
  --num-fill: color-mix(in srgb, var(--color-black) 8%, transparent);
  --wave: var(--color-black);
  --card-bg: var(--color-black);
  --input-bg: var(--color-surface);
  --card-line: transparent;
  --card-accent: var(--color-brand-yellow);
  --wa-bg: var(--color-black);
  --wa-fg: var(--color-white-warm);
  --logo-filter: none;
}

/* -------------------------------------------------------------------------
   2. RESET BÁSICO
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
}

/* -------------------------------------------------------------------------
   3. ESTILOS GLOBALES DE ELEMENTOS
   ------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  /* Reserva libre al pie de la ventana para el botón flotante de WhatsApp
     (56px + su distancia al borde + 1rem ≈ 5.5rem): cualquier control que
     reciba foco por teclado, o que el navegador desplace a la vista, queda
     por encima del botón. Convive con el scroll-margin-top de los
     elementos (p. ej. .quote-form), que compensa el header
     sticky por arriba: son ejes distintos y no se pisan. */
  scroll-padding-bottom: 5.5rem;
}

body {
  background: var(--bg-light);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Color de enlace por defecto: sale del tema de la sección (--link, ver
   1b) y, fuera de un tema, cae a --color-amber-darker. Antes era
   --color-amber-dark, que da 3.04:1 sobre blanco (< 4.5:1, tras unificar
   los amarillos — antes de unificarlos daba 3.61:1, mismo motivo);
   --color-amber-darker sí llega, 4.85:1 sobre blanco (antes 5.66:1). El
   hover/foco conserva el mismo color a propósito: un ámbar oscuro fijo
   aquí no leería igual de bien en las tres secciones sobre las que puede
   caer (dark, light, yellow), así que la señal de hover/foco de un enlace
   de texto es el subrayado (ver más abajo), no un cambio de color. Sigue
   siendo una regla de tipo `a:hover` para que los enlaces con estilo
   propio se comporten como siempre. */
a {
  color: var(--link, var(--color-amber-darker));
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--link, var(--color-amber-darker));
}

/* Enlaces de texto dentro de <main> y del pie de página: los que no llevan
   clase (los botones, .link-cta y demás enlaces con estilo propio sí llevan
   clase) van subrayados para no depender solo del color (WCAG 1.4.1).
   :where() deja la especificidad en (0,1,1), así que cualquier regla de
   sección posterior puede ajustarlos sin pelear. */
:where(#main-content, .site-footer) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(#main-content, .site-footer) a:not([class]):hover,
:where(#main-content, .site-footer) a:not([class]):focus-visible {
  text-decoration-thickness: 2px;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  color: inherit;
}

p {
  line-height: var(--leading-normal);
  color: inherit;
}

/* -------------------------------------------------------------------------
   4. UTILIDAD DE CONTENEDOR
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-section-x);
}