/**
 * 🎨 Estilo de Imágenes - Via Motos Honda
 * Mantiene el estilo exacto de tipografía mostrado en las imágenes
 * 
 * @author Via Motos SAS
 * @version 1.0
 * @date 2025-01-15
 */

/* ===== ESTILO ESPECÍFICO DE LAS IMÁGENES ===== */

/* Badge/Tag estilo pill - Como "BENEFICIOS HONDA", "FINANCIACIÓN HONDA" */
.badge-imagen-style, .section-badge-imagen-style {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem; /* 14px exacto */
  font-weight: 700; /* 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 para pill */
  background: #e60012; /* Rojo Honda específico */
  color: #ffffff; /* Blanco específico */
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 8px rgba(230, 0, 18, 0.3); /* Sombra sutil */
  margin-bottom: 1.5rem; /* Espaciado específico */
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

.badge-imagen-style:hover, .section-badge-imagen-style:hover {
  background: #cc0010; /* Rojo Honda hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 0, 18, 0.4);
}

/* Título principal - Como "¿Por qué Cambiar a una Honda Nueva?" */
.titulo-imagen-style, .section-title-imagen-style {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.5rem; /* 40px exacto */
  font-weight: 800; /* Extra bold específico */
  line-height: 1.2; /* Line height específico */
  color: #111827; /* Negro específico */
  text-align: center;
  margin-bottom: 1.5rem; /* Espaciado específico */
  text-shadow: none; /* Sin sombra para mantener limpieza */
  letter-spacing: -0.02em; /* Espaciado de letras ajustado */
  margin-top: 0;
}

/* Subtítulo/Descripción - Como "Más seguridad y menos gastos..." */
.subtitulo-imagen-style, .section-description-imagen-style {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; /* 18px exacto */
  font-weight: 400; /* Peso normal */
  line-height: 1.6; /* Line height específico para legibilidad */
  color: #6B7280; /* Color gris específico */
  text-align: center;
  margin-bottom: 3rem; /* Espaciado específico */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em; /* Espaciado sutil para mejor legibilidad */
}

/* Título de financiación - Como "Opciones de Financiación Honda" */
.titulo-financiacion-style {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.5rem; /* 40px exacto */
  font-weight: 800; /* Extra bold específico */
  line-height: 1.2; /* Line height específico */
  color: #111827; /* Negro específico */
  text-align: center;
  margin-bottom: 1.5rem; /* Espaciado específico */
  text-shadow: none; /* Sin sombra para mantener limpieza */
  letter-spacing: -0.02em; /* Espaciado de letras ajustado */
  margin-top: 0;
}

/* Descripción de financiación - Como "En Via Motos SAS ofrecemos..." */
.descripcion-financiacion-style {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; /* 18px exacto */
  font-weight: 400; /* Peso normal */
  line-height: 1.6; /* Line height específico para legibilidad */
  color: #6B7280; /* Color gris específico */
  text-align: center;
  margin-bottom: 3rem; /* Espaciado específico */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em; /* Espaciado sutil para mejor legibilidad */
}

/* Título de entidades - Como "Entidades Financieras Aliadas" */
.titulo-entidades-style {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.5rem; /* 40px exacto */
  font-weight: 800; /* Extra bold específico */
  line-height: 1.2; /* Line height específico */
  color: #111827; /* Negro específico */
  text-align: center;
  margin-bottom: 1.5rem; /* Espaciado específico */
  text-shadow: none; /* Sin sombra para mantener limpieza */
  letter-spacing: -0.02em; /* Espaciado de letras ajustado */
  margin-top: 0;
}

/* Descripción de entidades - Como "En Via Motos SAS, concesionario autorizado..." */
.descripcion-entidades-style {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; /* 18px exacto */
  font-weight: 400; /* Peso normal */
  line-height: 1.6; /* Line height específico para legibilidad */
  color: #6B7280; /* Color gris específico */
  text-align: center;
  margin-bottom: 3rem; /* Espaciado específico */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em; /* Espaciado sutil para mejor legibilidad */
}

/* ===== CLASES DE UTILIDAD PARA APLICAR ESTILO DE IMÁGENES ===== */

/* Aplicar estilo de badge de imagen */
.badge-imagen {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 20px;
  border-radius: 25px;
  background: #e60012;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 8px rgba(230, 0, 18, 0.3);
  margin-bottom: 1.5rem;
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

/* Aplicar estilo de título de imagen */
.titulo-imagen {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
  text-align: center;
  margin-bottom: 1.5rem;
  text-shadow: none;
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* Aplicar estilo de subtítulo de imagen */
.subtitulo-imagen {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: #6B7280;
  text-align: center;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em;
}

/* ===== RESPONSIVE DESIGN PARA ESTILO DE IMÁGENES ===== */

@media (max-width: 768px) {
  .titulo-imagen-style, 
  .section-title-imagen-style,
  .titulo-financiacion-style,
  .titulo-entidades-style {
    font-size: 2rem; /* 32px en móviles */
    line-height: 1.3;
  }
  
  .subtitulo-imagen-style,
  .section-description-imagen-style,
  .descripcion-financiacion-style,
  .descripcion-entidades-style {
    font-size: 1rem; /* 16px en móviles */
    line-height: 1.5;
  }
  
  .badge-imagen-style,
  .section-badge-imagen-style {
    font-size: 0.8rem; /* 12.8px en móviles */
    padding: 6px 16px;
  }
}

@media (max-width: 480px) {
  .titulo-imagen-style, 
  .section-title-imagen-style,
  .titulo-financiacion-style,
  .titulo-entidades-style {
    font-size: 1.75rem; /* 28px en móviles pequeños */
    line-height: 1.3;
  }
  
  .subtitulo-imagen-style,
  .section-description-imagen-style,
  .descripcion-financiacion-style,
  .descripcion-entidades-style {
    font-size: 0.9rem; /* 14.4px en móviles pequeños */
    line-height: 1.5;
  }
  
  .badge-imagen-style,
  .section-badge-imagen-style {
    font-size: 0.75rem; /* 12px en móviles pequeños */
    padding: 5px 14px;
  }
}

/* ===== OVERRIDE DE CLASES EXISTENTES ===== */

/* Override de section-title para usar estilo de imágenes */
.section-title.imagen-style {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
  text-shadow: none;
  letter-spacing: -0.02em;
}

/* Override de section-description para usar estilo de imágenes */
.section-description.imagen-style {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: #6B7280;
  letter-spacing: 0.01em;
}

/* Override de section-badge para usar estilo de imágenes */
.section-badge.imagen-style {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 20px;
  border-radius: 25px;
  background: #e60012;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(230, 0, 18, 0.3);
}