/* Cardinal — sistema visual: FUENTE ÚNICA de estilos (docs/CORRECCIONES-DISENO.md §2).
   Se carga antes que cualquier otra hoja. Regla de oro: ningún componente declara
   font-size, font-weight, color, border-radius o espaciado "a mano"; todo sale de
   estas variables. Si falta un valor, se agrega aquí, no en el componente.

   §2.6 copiado tal cual. Única diferencia: los @font-face de Archivo están en
   fuentes.css (se carga antes), porque también los usa el panel. */


:root {
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(28px, 2.2vw + 19px, 36px);
  --fs-h2: clamp(22px, 1.2vw + 17px, 28px);
  --fs-h3: clamp(17px, .4vw + 15.5px, 19px);
  --fs-price: clamp(26px, 1.2vw + 21px, 32px);
  --fs-stat: clamp(20px, .4vw + 18.5px, 22px);
  --fs-lead: clamp(17px, .2vw + 16.3px, 18px);
  --fs-body: 16px;
  --fs-ui: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;

  --c-accent: #FF8A00;
  --c-accent-strong: #E06C00;
  --c-accent-strong-hover: #C85F00;
  --c-accent-soft: #FFF3E6;
  --c-ink: #1B1B1B;
  --c-text: #3D3D3D;
  --c-muted: #595959;
  --c-bg: #F5F5F5;
  --c-surface: #FFFFFF;
  --c-border: #E3E3E3;
  --c-border-strong: #949494;
  --c-wa: #128C7E;
  --c-wa-hover: #0E7468;
  --c-focus: rgba(255, 138, 0, .45);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px;
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, .08);
  --container: 1240px;

  /* Agregados al sistema (§ regla de oro: lo que falta se agrega aquí). */
  --fw-text: 400;              /* texto */
  --fw-ui: 500;                /* etiquetas y navegación */
  --fw-title: 600;             /* títulos y botones */
  --fw-strong: 700;            /* solo precio y botones naranjas */
  --fs-price-card: 22px;       /* precio dentro de una tarjeta de la grilla (§3.2) */
  --fs-menu-movil: 20px;       /* enlaces del menú móvil a pantalla completa (§3.7) */
  --c-dark-2: #2A2A2A;         /* tarjetas sobre la sección oscura (§3.10) */
  --c-on-dark: #D4D4D4;        /* texto secundario sobre negro (§3.10) */
  --c-white: #FFFFFF;
  --c-overlay: rgba(27, 27, 27, .78);   /* contador de fotos sobre la imagen */
  --c-scrim: rgba(0, 0, 0, .45);        /* velo detrás de paneles móviles */
  --c-viewer: rgba(12, 12, 12, .95);    /* fondo del visor de fotos */
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, .12);  /* menús desplegables y banner */
  --c-ok-bg: #F0FAF3; --c-ok-border: #A6D9B5; --c-ok-text: #14502A;
  --c-error: #B42318; --c-error-bg: #FDF0EF; --c-error-border: #F2B8B5;
  --c-warn-bg: #FFF8EC; --c-warn-border: #F5D9A8; --c-warn-text: #6B4100;
  --c-photo-placeholder: #D4D4D4;
  --header-h: 72px;
  --header-h-movil: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
/* CLAVE: los controles NO heredan la fuente por defecto — esto causaba el "otro tipo de letra" del formulario */
input, select, textarea, button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { color: var(--c-ink); margin: 0; font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
p { margin: 0; max-width: 68ch; }

a { color: var(--c-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-strong-hover); }

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

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 767px) { .container { padding: 0 16px; } }

.section { padding: var(--s-8) 0; }
@media (max-width: 767px) { .section { padding: var(--s-7) 0; } }
.section__title { margin-bottom: var(--s-5); }

.eyebrow {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-muted);
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-text); }
.muted { color: var(--c-muted); }
.caption { font-size: var(--fs-caption); color: var(--c-muted); line-height: 1.5; }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5);
}

[hidden] { display: none !important; }