/* ==========================================================================
   BiomecAI · Variables globales (paleta, tipografía, espaciado)
   Se rellenará con los valores exactos del branding Figma.
   PLACEHOLDER: sustituir por la paleta real cuando llegue el branding.
   ========================================================================== */
:root {
  /* --- Paleta de marca Biomecai --- */
  --bmc-orange: #FE6331;   /* naranja de marca */
  --bmc-beige:  #F0EDEC;   /* beige (fondos suaves) */
  --bmc-black:  #000000;
  --bmc-white:  #FFFFFF;   /* usar SOLO donde el diseño lo indique */

  /* Roles semánticos */
  --bmc-text: var(--bmc-black);        /* color de texto por defecto = negro */
  --bmc-text-muted: #4a4a4a;
  --bmc-primary: var(--bmc-orange);
  --bmc-bg: var(--bmc-white);
  --bmc-bg-alt: var(--bmc-beige);

  /* Tipografía */
  --bmc-font-base: 'Oakes Grotesk', system-ui, sans-serif;
  --bmc-font-head: 'Oakes Grotesk', system-ui, sans-serif;

  /* Layout — el margen lateral (72px) coincide con el del hero, para que
     TODO el contenido quede alineado al mismo borde izquierdo/derecho. */
  --bmc-container: 1850px;
  --bmc-gutter: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--bmc-font-base);
  color: var(--bmc-text); /* color de texto por defecto */
  background: var(--bmc-bg);
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.bmc-container {
  /* Sin centrado ni max-width: el contenido va SIEMPRE a 72px de cada borde,
     exactamente igual que el hero. Así todo queda alineado en cualquier
     resolución (Full HD, QuadHD, etc.). */
  width: 100%;
  padding-inline: var(--bmc-gutter);
}