:root {
    /* Colores */
    --color-primary: #C84343;
    --color-secondary: #295094;
    --color-background: #ffffff;
    --color-background-element: #F6F6F6;
    --color-text: #000000;
    --color-text-alt: #ffffff;
  
    /* Tipografía */
    --font-primary: 'Poppins', sans-serif;
  
    /* Pesos */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  
    /* Tamaños base (mobile-first) */
    --font-size-h1: 26px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-body: 16px;
    --font-size-button: 14px;
  
    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
  
    /* Bordes */
    --border-radius: 8px;
  }

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

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
  }
  
  /* ENCABEZADOS */
  h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
  }
  
  h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
  }
  
  h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
  }
  
  h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
  }
  
  p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
  }
  
  /* BOTONES */
  .button {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-primary);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s;
    height: 45px;
  }
  
  .button:hover {
    background-color: #a73636;
  }

  /* ESCRITORIO - MEDIA QUERY */
@media (min-width: 768px) {
    :root {
      --font-size-h1: 36px;
      --font-size-h2: 32px;
      --font-size-h3: 24px;
      --font-size-h4: 20px;
      --font-size-body: 20px;
      --font-size-button: 16px;
    }
  }