/* ============================================
   DESIGN SYSTEM — basado en guia_de_estilos.figma
   Fuente: Montserrat (Google Fonts)
   ============================================ */

/* ============================================
   1. TOKENS: COLORES
   ============================================ */
:root {
  /* --- Dominante (blanco roto) --- */
  --color-dominante:       #F7F9FC;
  --color-dominante-80:    rgba(247, 249, 252, 0.8);
  --color-dominante-60:    rgba(247, 249, 252, 0.6);

  /* --- Secundario (azul) --- */
  --color-secundario:      #006DFF;
  --color-secundario-80:   rgba(0, 109, 255, 0.8);
  --color-secundario-60:   rgba(0, 109, 255, 0.6);

  /* --- Acento (navy) --- */
  --color-acento:          #0A2540;
  --color-acento-80:       rgba(10, 37, 64, 0.8);
  --color-acento-60:       rgba(10, 37, 64, 0.6);

  /* --- Primario (blanco puro) --- */
  --color-primario:        #FFFFFF;

  /* --- Texto --- */
  --color-text-heading:    #0A2540;
  --color-text-body:       #3E3E3E;
  --color-text-caption:    #3E3E3E;
}

/* ============================================
   2. TOKENS: TIPOGRAFÍA
   Fuente: Montserrat — importar en HTML:
   <link href="https://fonts.googleapis.com/css2?
     family=Montserrat:wght@400;500;700&display=swap"
     rel="stylesheet">
   ============================================ */
:root {
  --font: 'Montserrat', sans-serif;

  /* Tamaños */
  --text-h1:          72px;   /* H1 Display */
  --text-h2:          40px;   /* H2 ENCABEZADO */
  --text-h3:          34px;   /* H3 Subtítulo */
  --text-h4:          28px;   /* H4 Subtítulos */
  --text-body-lg:     22px;   /* Cuerpo grande */
  --text-body-md:     19px;   /* Cuerpo mediano */
  --text-caption:     14px;   /* Caption pequeño */
  --text-caption-sm:  12px;   /* Caption más pequeño */
  --text-parrafo-sm:  14px;   /* Párrafos/pequeños */

  /* Pesos */
  --weight-bold:      700;
  --weight-medium:    500;
  --weight-regular:   400;

  /* Interlineados */
  --leading-tight:    1;      /* line-height: 100% */
  --leading-base:     1.42;   /* cuerpo */
  --leading-small:    1.2;    /* párrafos pequeños */

  /* Letter-spacing cuerpo grande */
  --tracking-body-lg: 0.06em; /* 6 en Figma sobre 22px ≈ 0.27px → se expresa como em */
}

/* ============================================
   3. TOKENS: ESPACIADO
   ============================================ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
   --space-7:  64px;
}

/* ============================================
   4. TOKENS: BORDES REDONDEADOS
   ============================================ */
:root {
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
}

/* ============================================
   5. RESET BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: var(--text-caption-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-body);
  background-color: #EEEEEE;
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}

/* 

    6. ESTILOS ESPECÍFICOS
    ============================================ */

    .boton{
     display: flex;
    background-color: var(--color-acento);
    color: var(--color-primario);
    padding: 8px;
    border-radius: var(--radius-md);
    width: 100%;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    font-size: var(--text-caption);
    }