/* ============================================================
   BASE — variables globales, reset y tipografía
   ============================================================ */

:root{
  /* Colores de marca */
  --color-blue-900: #0b2545;
  --color-blue-700: #123a6b;
  --color-blue-600: #1857a4;
  --color-accent: #1ca7e0;
  --color-accent-600: #0e86bd;
  --color-green: #1fa15c;
  --color-whatsapp: #25D366;

  /* Escala de grises */
  --color-gray-900: #1a1f29;
  --color-gray-600: #5b6472;
  --color-gray-300: #dfe4ea;
  --color-gray-100: #f4f6f9;
  --color-white: #ffffff;

  /* Tipografía */
  --font-sans: 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --content-max-width: 1180px;
  --space-container: 24px;
  --space-section: 72px;

  /* Radios */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* Sombra */
  --shadow-md: 0 10px 30px rgba(11,37,69,0.10);
}

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-gray-900);
  background: var(--color-white);
  line-height: 1.55;
}

img{
  max-width: 100%;
  display: block;
}

a{
  text-decoration: none;
  color: inherit;
}

.container{
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-container);
}

section{
  padding: var(--space-section) 0;
}

h1, h2, h3, h4{
  margin: 0 0 12px;
  line-height: 1.2;
}

.eyebrow{
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 8px;
  display: inline-block;
}