/* ============================================
   ARCHIVO PRINCIPAL DE ESTILOS - CONEXIÓN AMÉRICA
   ============================================
   Este archivo importa todos los módulos CSS
   en el orden correcto para el proyecto.
   ============================================ */

/* ==========================================
   ORDEN DE IMPORTACIÓN
   ==========================================
   1. Variables - Define todas las variables
   2. Base - Reset y estilos fundamentales
   3. Components - Componentes reutilizables
   4. Layout - Estructura y secciones
   5. Animations - Animaciones y efectos
   ========================================== */

/* Importación de módulos */
@import url('./variables.css');
@import url('./base.css');
@import url('./components.css');
@import url('./layout.css');
@import url('./animations.css');

/* ==========================================
   FUENTES EXTERNAS
   ========================================== */
/* 
   Google Fonts - Alternativas web para las fuentes
   especificadas en el manual de marca:
   - Montserrat (alternativa para títulos)
   - Open Sans (cuerpo de texto)
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ==========================================
   ESTILOS ESPECÍFICOS DE PÁGINAS
   ============================================ */

/* --- PÁGINA: NOSOTROS --- */
.pagina-nosotros .hero {
  min-height: 50vh;
}

.pagina-nosotros .historia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-3xl);
  align-items: center;
}

@media (max-width: 768px) {
  .pagina-nosotros .historia {
    grid-template-columns: 1fr;
  }
}

/* Timeline de historia */
.timeline {
  position: relative;
  padding-left: var(--espacio-2xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primario), var(--color-secundario));
}

.timeline__item {
  position: relative;
  padding-bottom: var(--espacio-xl);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--espacio-2xl) - 6px);
  top: 0;
  width: 14px;
  height: 14px;
  background-color: var(--color-acento);
  border-radius: var(--radio-full);
  border: 3px solid var(--color-blanco);
  box-shadow: var(--sombra-sm);
}

.timeline__fecha {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  color: var(--color-secundario);
  margin-bottom: var(--espacio-xs);
}

.timeline__titulo {
  font-size: var(--texto-xl);
  margin-bottom: var(--espacio-sm);
}

.timeline__descripcion {
  color: var(--color-gris-oscuro);
  font-size: var(--texto-base);
}

/* --- PÁGINA: SERVICIOS --- */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 520px));
  gap: var(--espacio-xl);
  justify-content: center;
}

.servicio-card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-lg);
  padding: var(--espacio-2xl);
  box-shadow: var(--sombra-sm);
  transition: all var(--transicion-normal);
  border: 1px solid transparent;
}

.servicio-card:hover {
  box-shadow: var(--sombra-lg);
  border-color: var(--color-secundario);
  transform: translateY(-5px);
}

.servicio-card__icono {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primario), var(--color-primario-claro));
  border-radius: var(--radio-lg);
  color: var(--color-blanco);
  margin-bottom: var(--espacio-lg);
}

.servicio-card__titulo {
  font-size: var(--texto-xl);
  margin-bottom: var(--espacio-sm);
}

.servicio-card__descripcion {
  color: var(--color-gris-oscuro);
  margin-bottom: var(--espacio-lg);
}

.servicio-card__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

.servicio-card__item {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  font-size: var(--texto-sm);
  color: var(--color-gris-oscuro);
}

.servicio-card__item::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--color-secundario);
  border-radius: var(--radio-full);
  flex-shrink: 0;
}

/* --- PÁGINA: CONTACTO --- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-3xl);
}

@media (max-width: 768px) {
  .contacto-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .servicios-grid {
    grid-template-columns: 1fr;
  }
}

.contacto-info {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xl);
}

.contacto-info__item {
  display: flex;
  gap: var(--espacio-lg);
}

.contacto-info__icono {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gris-fondo);
  border-radius: var(--radio-full);
  color: var(--color-primario);
  flex-shrink: 0;
}

.contacto-info__titulo {
  font-size: var(--texto-base);
  font-weight: var(--peso-semibold);
  margin-bottom: var(--espacio-xs);
}

.contacto-info__texto {
  color: var(--color-gris-oscuro);
  font-size: var(--texto-sm);
}

.contacto-info__pais {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secundario);
  margin-bottom: var(--espacio-xxs);
}

/* Presencia Regional - grid de tarjetas */
.presencia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-xl);
  margin-top: var(--espacio-2xl);
}

.presencia-card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-lg);
  padding: var(--espacio-2xl);
  box-shadow: var(--sombra-md);
  border-top: 4px solid var(--color-primario);
}

.presencia-card__codigo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-extrabold);
  color: var(--color-primario);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: var(--espacio-sm);
}

.presencia-card__badge {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--espacio-xxs) var(--espacio-sm);
  border-radius: var(--radio-full);
  margin-bottom: var(--espacio-sm);
}

.presencia-card__badge--principal {
  background-color: rgba(0, 51, 102, 0.1);
  color: var(--color-primario);
}

.presencia-card__badge--regional {
  background-color: rgba(0, 166, 81, 0.1);
  color: var(--color-secundario-oscuro);
}

.presencia-card__pais {
  font-size: var(--texto-xl);
  font-weight: var(--peso-bold);
  color: var(--color-negro);
  margin-bottom: var(--espacio-md);
}

.presencia-card__nota {
  font-size: var(--texto-sm);
  color: var(--color-gris-oscuro);
  line-height: var(--linea-relajada);
  margin-bottom: var(--espacio-md);
}

.presencia-card__datos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-lg);
}

.presencia-card__datos li {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  font-size: var(--texto-sm);
  color: var(--color-gris-oscuro);
}

.presencia-card__datos svg {
  flex-shrink: 0;
  color: var(--color-primario);
}

.presencia-card__datos a {
  color: inherit;
  transition: color var(--transicion-rapida);
}

.presencia-card__datos a:hover {
  color: var(--color-secundario);
}

.presencia-card__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-xs);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  color: #25D366;
  transition: opacity var(--transicion-rapida);
}

.presencia-card__whatsapp:hover {
  opacity: 0.8;
}

@media (max-width: 640px) {
  .presencia-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer - etiqueta de país */
.footer__pais-label {
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-acento);
  margin-bottom: var(--espacio-sm);
}

/* Formulario de contacto */
.contacto-form {
  background-color: var(--color-blanco);
  padding: var(--espacio-2xl);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

.contacto-form__titulo {
  font-size: var(--texto-2xl);
  margin-bottom: var(--espacio-xl);
}

/* ==========================================
   UTILIDADES ADICIONALES
   ========================================== */

/* Ocultar en móvil */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Ocultar en desktop */
@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Texto truncado */
.texto-truncado {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.texto-truncado-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.texto-truncado-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================== */
.whatsapp-flotante {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.whatsapp-flotante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}

.whatsapp-flotante svg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
}