/*
 * GUÍA DE TIPOGRAFÍA ACSER
 * Manual de Marcas - Estándar para todos los HTML del sitio
 * 
 * USAR ESTAS CLASES PARA CUALQUIER NUEVO CONTENIDO HTML
 */

/* =============================================
   FUENTES IMPORTADAS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Lato:wght@300;400;600&display=swap');

/* =============================================
   FUENTES LOCALES
   ============================================= */
@font-face {
  font-family: 'Neo Sans';
  src: url('../fonts/neo-sans-w1g-medium_freefontdownload_org/neo-sans-w1g-medium.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neo Sans';
  src: url('../fonts/neo-sans-w1g-bold-italic_freefontdownload_org/neo-sans-w1g-bold-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Neo Sans';
  src: url('../fonts/neo-sans-w1g-light-italic_freefontdownload_org/neo-sans-w1g-light-italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

/* =============================================
   1. TITULARES Y ENCABEZADOS
   Neo Sans W1 G (Bold o Semibold)
   24-48px en digitales
   ============================================= */

.titular-principal {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  color: #1a1a1a;
}

.titular-grande {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.2;
  color: #1a1a1a;
}

.titular-mediano {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #1a1a1a;
}

.titular-chico {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: #1a1a1a;
}

.titular-base {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: #1a1a1a;
}

/* Aplicación automática a etiquetas HTML estándar */
h1, .h1 {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.2;
  color: #1a1a1a;
}

h2, .h2 {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #1a1a1a;
}

h3, .h3 {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: #1a1a1a;
}

h4, .h4 {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: #1a1a1a;
}

h5, .h5 {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #1a1a1a;
}

h6, .h6 {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: #1a1a1a;
}

/* =============================================
   2. SUBTÍTULOS Y ELEMENTOS DESTACADOS
   Neo Sans W1 G (Medium o Regular)
   18-24px en digitales
   ============================================= */

.subtitulo-grande {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: #1a1a1a;
}

.subtitulo-mediano {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #1a1a1a;
}

.subtitulo-base {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #1a1a1a;
}

/* Clases para elementos destacados */
.subtitle, .highlight, .news-subtitle, .llamada {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #1a1a1a;
}

/* =============================================
   3. TEXTO DE PÁRRAFO O CUERPO
   Open Sans o Lato (Regular o Semibold)
   14-16px en digitales
   ============================================= */

.parrafo-grande {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.parrafo-base {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.parrafo-chico {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

/* Clases para textos de párrafo */
p, .paragraph-text, .news-text, .values-intro, 
.descripcion-texto, .cuerpo-texto {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

/* =============================================
   4. INFORMACIÓN ADICIONAL / NOTAS
   Open Sans Light o Book
   12px o menor en digitales
   ============================================= */

.nota-grande {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.nota-base {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}

.nota-chica {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 1.3;
  color: #666;
}

/* Clases para información adicional */
.small-text, .footer-link-small, .stat-label, 
.contact-mini-info, .disclaimer, .pie-nota {
  font-family: 'Work Sans', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}

/* =============================================
   5. NAVEGACIÓN Y BOTONES
   Neo Sans Medium/Semibold
   ============================================= */

.nav-texto {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}

.boton-principal {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

.boton-secundario {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}

.enlace-nav {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}

/* =============================================
   6. ESTADÍSTICAS Y NÚMEROS DESTACADOS
   Neo Sans Bold para números
   ============================================= */

.numero-estadistica {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: #f9751c;
}

.numero-grande {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: #f9751c;
}

.numero-mediano {
  font-family: 'Neo Sans', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #f9751c;
}

/* =============================================
   7. CLASES UTILITARIAS
   Para uso rápido y consistente
   ============================================= */

/* Alineación de texto */
.texto-centro { text-align: center; }
.texto-izquierda { text-align: left; }
.texto-derecha { text-align: right; }

/* Pesos de fuente */
.fuente-light { font-weight: 300; }
.fuente-regular { font-weight: 400; }
.fuente-medium { font-weight: 500; }
.fuente-semibold { font-weight: 600; }
.fuente-bold { font-weight: 700; }

/* Colores de texto */
.texto-primario { color: #1a1a1a; }
.texto-secundario { color: #555; }
.texto-claro { color: #666; }
.texto-blanco { color: #fff; }
.texto-naranja { color: #f9751c; }

/* =============================================
   8. EJEMPLOS DE USO
   Copiar y pegar para nuevos elementos HTML
   ============================================= */

/*
  TITULAR PRINCIPAL:
  <h1 class="titular-principal">Título Principal</h1>
  
  SUBTÍTULO:
  <h2 class="subtitulo-mediano">Subtítulo</h2>
  
  PÁRRAFO:
  <p class="parrafo-base">Texto de párrafo estándar</p>
  
  NOTA:
  <span class="nota-base">Información adicional</span>
  
  BOTÓN:
  <button class="boton-principal">Botón Principal</button>
  
  NÚMERO ESTADÍSTICO:
  <span class="numero-estadistica">24</span>
*/

/* =============================================
   9. RESPONSIVE
   Ajustes para dispositivos móviles
   ============================================= */
@media (max-width: 768px) {
  .titular-principal { font-size: 36px; }
  .titular-grande { font-size: 32px; }
  .titular-mediano { font-size: 28px; }
  .titular-chico { font-size: 24px; }
  .titular-base { font-size: 20px; }
  
  .subtitulo-grande { font-size: 20px; }
  .subtitulo-mediano { font-size: 18px; }
  .subtitulo-base { font-size: 16px; }
  
  .parrafo-grande { font-size: 15px; }
  .parrafo-base { font-size: 14px; }
  .parrafo-chico { font-size: 13px; }
  
  .nota-grande { font-size: 13px; }
  .nota-base { font-size: 12px; }
  .nota-chica { font-size: 11px; }
}