/**
 * 🎨 Tipografía Consistente - Via Motos Honda
 * Mantiene la consistencia de tipografía con retoma.html y repuestos.html
 * 
 * @author Via Motos SAS
 * @version 1.0
 * @date 2025-01-15
 */

/* ===== VARIABLES DE TIPOGRAFÍA CONSISTENTES ===== */
:root {
  /* Fuentes principales - Consistente con retoma.html y repuestos.html */
  --fuente-principal: 'Inter', system-ui, -apple-system, sans-serif;
  --fuente-titulos: 'Poppins', system-ui, -apple-system, sans-serif;
  --fuente-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Tamaños de fuente - Escala consistente */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  
  /* Pesos de fuente */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* Altura de línea */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
}

/* ===== TIPOGRAFÍA BASE ===== */
body {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-negro);
  background-color: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== TÍTULOS Y ENCABEZADOS ===== */
h1, .heading-1 {
  font-family: var(--fuente-titulos);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-negro);
  margin-bottom: var(--space-6);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

h2, .heading-2 {
  font-family: var(--fuente-titulos);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-negro);
  margin-bottom: var(--space-5);
}

h3, .heading-3 {
  font-family: var(--fuente-titulos);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-negro);
  margin-bottom: var(--space-4);
}

h4, .heading-4 {
  font-family: var(--fuente-titulos);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-negro);
  margin-bottom: var(--space-3);
}

h5, .heading-5 {
  font-family: var(--fuente-titulos);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-negro);
  margin-bottom: var(--space-2);
}

h6, .heading-6 {
  font-family: var(--fuente-titulos);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-negro);
  margin-bottom: var(--space-2);
}

/* ===== TEXTO DEL CUERPO ===== */
p, .text-body {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-oscuro);
  margin-bottom: var(--space-4);
}

.text-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ===== TÍTULOS DE SECCIÓN ESPECÍFICOS - Estilo de las imágenes ===== */
.section-title {
  font-family: var(--fuente-titulos);
  font-size: 2.5rem; /* Tamaño específico como en las imágenes */
  font-weight: 800; /* Peso específico para títulos grandes */
  line-height: 1.2; /* Line height específico */
  color: var(--color-negro);
  text-align: center;
  margin-bottom: var(--space-4);
  text-shadow: none; /* Sin sombra para mantener limpieza */
  letter-spacing: -0.02em; /* Espaciado de letras ajustado */
}

.section-description {
  font-family: var(--fuente-principal);
  font-size: 1.125rem; /* Tamaño específico como en las imágenes */
  font-weight: 400; /* Peso normal */
  line-height: 1.6; /* Line height específico para legibilidad */
  color: #6B7280; /* Color gris específico como en las imágenes */
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em; /* Espaciado sutil para mejor legibilidad */
}

/* ===== TÍTULOS DE HERO SECTIONS ===== */
.hero-title {
  font-family: var(--fuente-titulos);
  font-size: var(--text-6xl);
  font-weight: var(--font-black);
  line-height: var(--leading-none);
  color: var(--color-blanco);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-family: var(--fuente-principal);
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  margin-bottom: var(--space-8);
}

/* ===== TÍTULOS DE REPUESTOS ===== */
.header-repuestos h1 {
  font-family: var(--fuente-titulos);
  font-size: 3.5rem;
  font-weight: var(--font-bold);
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.repuesto-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-negro);
  margin-bottom: var(--space-2);
}

.categoria-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-negro);
  margin-bottom: var(--space-3);
}

/* ===== TÍTULOS DE CTA ===== */
.cta-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  margin-bottom: 1rem;
  color: var(--color-blanco);
}

/* ===== BADGES Y ETIQUETAS - Estilo de las imágenes ===== */
.badge, .section-badge {
  font-family: var(--fuente-principal);
  font-size: 0.875rem; /* Tamaño específico como en las imágenes */
  font-weight: 700; /* Peso bold específico */
  text-transform: uppercase;
  letter-spacing: 0.8px; /* Espaciado específico para mayúsculas */
  padding: 8px 20px; /* Padding específico para el pill shape */
  border-radius: 25px; /* Border radius específico */
  background: var(--honda-red-primary); /* Fondo rojo Honda */
  color: var(--color-blanco); /* Texto blanco */
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 8px rgba(230, 0, 18, 0.3); /* Sombra sutil */
}

.hero-badge {
  font-family: var(--fuente-principal);
  font-size: 0.95rem;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== BOTONES ===== */
.btn {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
}

.btn-sm {
  font-size: var(--text-sm);
}

.btn-lg {
  font-size: var(--text-lg);
}

.btn-xl {
  font-size: var(--text-xl);
}

/* ===== ENLACES ===== */
a {
  font-family: var(--fuente-principal);
  font-weight: var(--font-medium);
  text-decoration: none;
  color: var(--honda-red-primary);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--honda-red-hover);
}

/* ===== LISTAS ===== */
ul, ol {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-oscuro);
}

li {
  margin-bottom: var(--space-2);
}

/* ===== CÓDIGO Y MONOSPACE ===== */
code, pre {
  font-family: var(--fuente-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ===== FORMULARIOS ===== */
input, textarea, select {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
}

label {
  font-family: var(--fuente-principal);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gris-oscuro);
}

/* ===== TIPOGRAFÍA RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--text-5xl);
  }
  
  .section-title {
    font-size: var(--text-3xl);
  }
  
  .header-repuestos h1 {
    font-size: 2.5rem;
  }
  
  .cta-titulo {
    font-size: var(--text-3xl);
  }
  
  h1, .heading-1 {
    font-size: var(--text-4xl);
  }
  
  h2, .heading-2 {
    font-size: var(--text-3xl);
  }
  
  h3, .heading-3 {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--text-4xl);
  }
  
  .section-title {
    font-size: var(--text-2xl);
  }
  
  .header-repuestos h1 {
    font-size: 2rem;
  }
  
  .cta-titulo {
    font-size: var(--text-2xl);
  }
  
  h1, .heading-1 {
    font-size: var(--text-3xl);
  }
  
  h2, .heading-2 {
    font-size: var(--text-2xl);
  }
  
  h3, .heading-3 {
    font-size: var(--text-xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-lg);
  }
  
  .section-description {
    font-size: var(--text-base);
  }
}

/* ===== UTILIDADES DE TIPOGRAFÍA ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.font-thin { font-weight: var(--font-thin); }
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black { font-weight: var(--font-black); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* ===== TIPOGRAFÍA ESPECÍFICA PARA COMPONENTES ===== */
/* Títulos de tarjetas de productos */
.product-title, .moto-title {
  font-family: var(--fuente-titulos);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-negro);
  margin-bottom: var(--space-2);
}

/* Precios */
.price, .moto-price {
  font-family: var(--fuente-principal);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--honda-red-primary);
  margin-bottom: var(--space-4);
}

/* Descripciones de productos */
.product-description, .moto-description {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-medio);
  margin-bottom: var(--space-4);
}

/* Especificaciones técnicas */
.specs, .moto-specs {
  font-family: var(--fuente-principal);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gris-oscuro);
}

/* Títulos de secciones de beneficios */
.beneficio-title {
  font-family: var(--fuente-titulos);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-negro);
  margin-bottom: var(--space-3);
}

.beneficio-description {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-medio);
  margin-bottom: var(--space-4);
}

/* Títulos de testimonios */
.testimonio-title {
  font-family: var(--fuente-titulos);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-negro);
  margin-bottom: var(--space-2);
}

.testimonio-text {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-oscuro);
  font-style: italic;
  margin-bottom: var(--space-4);
}

/* Títulos de preguntas frecuentes */
.faq-question {
  font-family: var(--fuente-principal);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-negro);
  margin-bottom: var(--space-2);
}

.faq-answer {
  font-family: var(--fuente-principal);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-oscuro);
}