/* Tipografía base.

   Aquí había tres @font-face —Gilroy Heavy, D-DIN y D-DIN Bold— que
   apuntaban a media/. Ninguno de esos nueve archivos existe en el
   proyecto, así que las declaraciones solo servían para generar 404 en
   consola: el navegador no puede usar una familia cuyo src falla y ya
   estaba cayendo en la siguiente de la lista.

   Se quitan. Las variables de tokens.css se quedan como están, porque su
   cadena de respaldo es la que venía funcionando de facto:

     --font-display        Gilroy          -> Inter      (Google Fonts)
     --font-din            D-DIN           -> Work Sans  (Google Fonts)
     --font-din-condensed  D-DIN Condensed -> Work Sans  (Google Fonts)

   Si algún día se compran las licencias y se suben los archivos, basta
   con volver a declarar aquí las @font-face: ni las variables ni las
   reglas que las usan necesitan cambiar. */

.eyebrow{
  font-family:var(--font-ui);font-weight:700;font-size:20px;
  letter-spacing:4px;color:var(--secondary-grey);text-align:center;
}

.section-title{
  font-family:var(--font-display);
  font-size:42px;font-weight:900;letter-spacing:4.2px;
  color:var(--primary-blue);text-align:center;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
  margin-top:12px;line-height:1.2;
}

@media (max-width:768px){
  .eyebrow{font-size:16px;letter-spacing:2.5px;}
  .section-title{font-size:28px;letter-spacing:2px;}
}

@media (max-width:480px){
  .eyebrow{font-size:14px;letter-spacing:2px;}
  .section-title{font-size:23px;letter-spacing:1px;}
}