/* GRÚAS — tokens. EL ÚNICO archivo con colores, tamaños y espacios escritos a mano (PENTA §0).
   Los componentes (sitio.css) solo usan var(--…). Cambiar un valor aquí es una decisión escrita
   en docs/DISENO-GRUAS.md §1; cambiarlo dentro de un componente está prohibido (verificar.py #4).
   Paleta «obra a pleno sol»: concreto claro, asfalto, y el amarillo de la señal preventiva.
   Sin rojo: el rojo es del fabricante de la grúa, no nuestro. */
:root {
  color-scheme: light;
  /* color — tema claro (concreto) */
  --fondo: #F5F4F0;           /* concreto claro */
  --superficie: #FFFFFF;      /* tarjeta, tabla, panel */
  --superficie-2: #EAE8E2;    /* franja alterna, chip */
  --tinta: #16181A;           /* texto — unificado con --oscuro el 28-sep (nota del Design Lead): un solo asfalto */
  --tinta-2: #45474A;         /* texto secundario */
  --acero: #6B6C68;           /* bordes fuertes */
  --linea-color: #D3D0C8;     /* bordes suaves */
  --amarillo: #F5B800;        /* amarillo de señal preventiva: fondo de botón primario y de la placa */
  --sobre-amarillo: #16181A;  /* texto sobre amarillo (asfalto) */
  --acento: #7A4F00;          /* ámbar oscuro: kickers y enlaces destacados sobre claro */
  --acento-suave: #FBEFC9;    /* fondo de aviso */
  --oscuro: #16181A;          /* asfalto: cabecera, héroe, pie */
  --oscuro-2: #2A2D30;
  --sobre-oscuro: #F5F4F0;
  --sobre-oscuro-2: #BDBFBA;
  --foco: #2F6FE0;            /* anillo de foco: azul que da ≥ 3:1 sobre concreto claro Y sobre la cabecera oscura */
  --si: #1D6B3A;              /* «sí cabe» — siempre acompañado de texto, nunca solo color */
  --no: #8C3A0E;              /* «no cabe» */
  --sombra: 0 1px 2px rgba(18, 19, 20, 0.10), 0 8px 24px rgba(18, 19, 20, 0.08);

  /* tipografía: UNA familia (Archivo, variable en peso y anchura) */
  --f-texto: "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-display: "Archivo", "Arial Narrow", "Segoe UI", sans-serif;
  --estrecho: 72%;            /* font-stretch de titulares y cifras */
  --normal: 100%;
  --peso-texto: 400;
  --peso-medio: 600;
  --peso-titulo: 800;
  --t-1: 0.8125rem;   /* 13 — meta, pie de tabla, migas */
  --t0: 1.0625rem;    /* 17 — cuerpo (a pleno sol, 16 se queda corto) */
  --t1: 1.1875rem;    /* 19 — entrada */
  --t2: 1.375rem;     /* 22 — h3 */
  --t3: 1.875rem;     /* 30 — h2 */
  --t4: 2.5rem;       /* 40 — h1 de página */
  --t5: clamp(2.25rem, 5.2vw, 4.25rem);   /* h1 de portada */
  --t-cifra: clamp(2.75rem, 6.5vw, 5rem); /* las cifras de la placa de capacidad */
  --marca-heroe: 34rem;  /* ancho máximo de la firma dibujada en el héroe (28-sep: sustituye a --t-marca; un SVG se
                           escala al ancho de su caja y no puede recortarse como el texto de 332 px en 318) */
  --logo-alto: 2.25rem;  /* firma horizontal en la cabecera: 36 px (el manual pide ≥ 24 px en pantalla) */
  --logo-alto-pie: 3rem;
  --g-trazo-figura: 1.1; /* grosor del contorno de las figuras del pictograma (unidades del viewBox) */
  /* gráficos de ficha técnica: trazos en px de PANTALLA (vector-effect: non-scaling-stroke), no en metros */
  --g-px-fino: 0.75px;
  --g-px: 1.25px;
  --g-px-grueso: 2px;
  --g-px-eslinga: 2.5px;
  --g-guion-px: 5px 3.5px;
  --grafico-min: 42rem;
  --grafico-plano: 46rem;      /* planos vistos desde arriba: más anchos, la letra crece de más */
  --grafico-plano-min: 34rem;  /* y debajo de esto se desplazan dentro de su caja */ /* ancho mínimo de un gráfico ancho: debajo de esto se desplaza DENTRO de su caja */
  --ancho-pictograma: 40rem;
  --interlinea: 1.6;
  --interlinea-titulo: 1.02;
  --tracking-mayus: 0.12em;
  --prosa: 68ch;      /* ancho máximo de una línea de texto corrido: 55–75 caracteres */
  --titular: 22ch;
  --subrayado: 0.18em;

  /* espacio (escala de 4) */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem;
  --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem;
  --ancho: 76rem;       /* 1216 — contenedor */
  --ancho-ventana: 100vw; /* para alinear el texto del héroe partido con el contenedor */
  --ancho-panel: 21rem; /* columna del panel de cotización */
  --ancho-tarjeta: 17rem;

  /* forma */
  --linea: 1px;
  --linea-2: 3px;
  --linea-3: 6px;       /* la raya amarilla de la placa */
  --r1: 2px;            /* industrial: radios mínimos, nunca píldora */
  --r2: 4px;
  --icono: 1.25rem;
  --alto-tocable: 3rem; /* 48 — un pulgar con guante de obra */
  --foto-alto: 24rem;
  --foto-alto-movil: 15rem;
  --transicion: 150ms ease;
  --z-cabecera: 50;
  --z-flotante: 60;
}

/* tema oscuro por preferencia del sistema (sin elección explícita) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #111315;
    --superficie: #1A1D20;
    --superficie-2: #24282C;
    --tinta: #F2F1ED;
    --tinta-2: #BDBFBA;
    --acero: #8D8F8A;
    --linea-color: #34383C;
    --amarillo: #F5B800;
    --sobre-amarillo: #16181A;
    --acento: #F5B800;
    --acento-suave: #2C2410;
    --oscuro: #0A0B0C;
    --oscuro-2: #26292C;
    --sobre-oscuro: #F2F1ED;
    --sobre-oscuro-2: #BDBFBA;
    --foco: #7FB2FF;
    --si: #6CCB8F;
    --no: #F09A62;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

/* tema oscuro elegido explícitamente: gana en ambos sentidos */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #111315;
  --superficie: #1A1D20;
  --superficie-2: #24282C;
  --tinta: #F2F1ED;
  --tinta-2: #BDBFBA;
  --acero: #8D8F8A;
  --linea-color: #34383C;
  --amarillo: #F5B800;
  --sobre-amarillo: #16181A;
  --acento: #F5B800;
  --acento-suave: #2C2410;
  --oscuro: #0A0B0C;
  --oscuro-2: #26292C;
  --sobre-oscuro: #F2F1ED;
  --sobre-oscuro-2: #BDBFBA;
  --foco: #7FB2FF;
  --si: #6CCB8F;
  --no: #F09A62;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
}