/* ============================================================
   CONTRATÁ YA — Sistema de diseño
   Blanco de base, azul principal, amarillo de acento.
   Fondo blanco: texto negro. Fondo azul: texto blanco.
   ============================================================ */

:root {
  /* Superficies claras */
  --tinta:      #FFFFFF;
  --tinta-2:    #F4F7FB;
  --tinta-3:    #E7EEF6;
  --linea:      #D3DEEA;
  --linea-soft: rgba(14, 60, 110, 0.10);

  /* Texto sobre blanco. --cal-3 tiene que leerse a 11 px en mayúsculas. */
  --cal:        #101820;
  --cal-2:      #3C4C5E;
  --cal-3:      #3D5166;

  /* Azul principal, amarillo de acento */
  --azul:       #0E4C8A;
  --azul-2:     #163E6B;
  --plomo:      #E2A400;
  --plomo-dim:  #C48F0A;
  --plomo-texto:#8B5E00;
  --marea:      #0E8A7A;
  --coral:      #C8453C;
  --sobre-plomo:#101820;
  --sobre-azul: #FFFFFF;
  --sobre-foto: #FFFFFF;

  /* Tipografía */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --texto:   'Inter Tight', system-ui, -apple-system, sans-serif;
  --dato:    'IBM Plex Mono', ui-monospace, monospace;

  /* Escala */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;

  --sombra: 0 16px 40px -18px rgba(14, 60, 110, 0.28);
  --sombra-carta: 0 22px 48px -20px rgba(14, 60, 110, 0.32);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--tinta);
  color: var(--cal);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.015em;
  font-variation-settings: 'wdth' 112;
  text-wrap: balance;
}

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

/* El atributo hidden debe ganar sobre cualquier display declarado en clases */
[hidden] { display: none !important; }

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

/* Etiqueta técnica — el registro "ficha de obra" del producto */
.eyebrow {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cal-3);
}

.dato { font-family: var(--dato); font-variant-numeric: tabular-nums; }

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