@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
:root {
  --font-body: "Roboto", sans-serif;
  --body: 1.063rem;

  --font-size-120: 7.5rem;
  --font-size-100: 6.25rem;
  --font-size-70: 4.375rem;
  --font-size-44: 2.75rem;
  --font-size-20: 1.25rem;

  --l-spacing-1: 1px;
  --l-spacing-2: 2px;
  --l-spacing-0-34: 0.34px;
  --l-spacing-0-32: 0.32px; 
  --l-spacing-0-88: 0.88px;
  --l-spacing-1-4: 1.4px;
  --l-spacing-2-4: 2.4px;

  --line-spacing-20: 20px;
  --line-spacing-23: 23px;
  --line-spacing-24: 24px;
  --line-spacing-45: 45px;
  --line-spacing-70: 70px;
  --line-spacing-105: 105px;

  --font-weight-500: 500;
  --font-weight-300: 300;
  --font-weight-100: 100;

  --c-negro: #000000;
  --c-negro-trans: #00000029;
  --c-gris: #2D2D2D;
  --c-azul: #0090DF;
  --c-blanco: #ffffff;
  --c-azul-1: #2680EB;

  /* Transitions */
  --all-transition: all 0.4s ease;
}

@media screen and (max-width: 1440px) {
  :root {
    --body: 1rem; /* 16px */

    --font-size-120: 6.75rem; /* 108px */
    --font-size-100: 5.5rem;  /* 88px */
    --font-size-70:  3.75rem; /* 60px */
    --font-size-44:  2.375rem;/* 38px */
    --font-size-20:  1.125rem;/* 18px */

    --line-spacing-105: 95px;
    --line-spacing-70:  62px;
    --line-spacing-45:  40px;
    --line-spacing-24:  23px;
    --line-spacing-23:  22px;
    --line-spacing-20:  20px;

    /* Ligerísimo ajuste para títulos grandes */
    --l-spacing-1-4: 1.2px;
    --l-spacing-2-4: 2.2px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --body: 1rem; /* mantener 16px por legibilidad en tablet */

    --font-size-120: 5.5rem;  /* 88px */
    --font-size-100: 4.5rem;  /* 72px */
    --font-size-70:  3rem;    /* 48px */
    --font-size-44:  2rem;    /* 32px */
    --font-size-20:  1rem;    /* 16px */

    --line-spacing-105: 80px;
    --line-spacing-70:  56px;
    --line-spacing-45:  36px;
    --line-spacing-24:  24px; /* mantener */
    --line-spacing-23:  22px;
    --line-spacing-20:  20px;

    /* Compactar un pelín el tracking en pantallas medianas */
    --l-spacing-1: 0.8px;
    --l-spacing-2: 1.6px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --body: 1rem; /* 16px: cómodo en móvil */

    --font-size-120: 3.75rem; /* 60px */
    --font-size-100: 3rem;    /* 48px */
    --font-size-70:  2.25rem; /* 36px */
    --font-size-44:  1.5rem;  /* 24px */
    --font-size-20:  1rem;    /* 16px */

    --line-spacing-105: 64px;
    --line-spacing-70:  44px;
    --line-spacing-45:  32px;
    --line-spacing-24:  24px;
    --line-spacing-23:  22px;
    --line-spacing-20:  20px;

    /* Reducir tracking para evitar “dientes de sierra” en móvil */
    --l-spacing-1: 0.6px;
    --l-spacing-2: 1.2px;
    --l-spacing-1-4: 1px;
    --l-spacing-2-4: 1.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --all-transition: none; }
}