/**
 * CSS No Crítico para Hero y Componentes
 * FASE 2: Movido desde CSS inline en index.php para reducir tamaño del HTML inicial
 * 
 * Este archivo contiene estilos que NO son críticos para el render inicial (above the fold).
 * Los estilos críticos (botones CTA básicos) se mantienen inline en index.php.
 */

/* Botón de vuelos estilo Instagram (no está en hero inicial) */
.btn-vuelos-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: white !important;
  border: none !important;
  font-weight: bold !important;
  box-shadow: 0 4px 15px rgba(240, 148, 51, 0.4) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-vuelos-instagram:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(240, 148, 51, 0.6) !important;
  color: white !important;
}

.btn-vuelos-instagram::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn-vuelos-instagram:hover::before {
  left: 100%;
}

/* Fondo bone (hueso) para las cards (sección de servicios, below the fold) */
.service-card {
  background: #F5F5F0 !important; /* Color bone/hueso */
}

/* Ajustar tamaño del logo (redundante con global-components.css, pero mantenido por compatibilidad) */
.logo {
  width: 40px !important;
  height: 40px !important;
  padding: 3px !important;
}

.logo img {
  height: 34px !important;
  max-width: 34px !important;
}

/* Responsive: Ajustar tamaño de cards en móvil (below the fold) */
@media (max-width: 768px) {
  .service-card {
    padding: 1.5rem !important;
    margin-bottom: 1rem;
  }

  .service-card h2 {
    font-size: 1.35rem !important;
    margin-bottom: 0.85rem !important;
  }

  .service-card p {
    font-size: 0.95rem !important;
    margin-bottom: 1.1rem !important;
    line-height: 1.5 !important;
  }

  .service-icon {
    font-size: 2.75rem !important;
    margin-bottom: 1.1rem !important;
  }

  .service-card .btn {
    padding: 0.85rem 1.2rem !important;
    font-size: 0.95rem !important;
  }

  /* Reducir gap del grid en móvil */
  div[style*="grid-template-columns"] {
    gap: 1.25rem !important;
  }

  /* Reducir padding de la sección en móvil */
  section[style*="padding: 4rem"] {
    padding: 2.5rem 0 !important;
  }

  /* Reducir margen inferior del título */
  .text-gradient {
    margin-bottom: 1.5rem !important;
    font-size: 1.75rem !important;
  }
}

@media (max-width: 480px) {
  .text-gradient {
    font-size: 1.5rem !important;
  }

  .service-card {
    padding: 1.25rem !important;
  }

  .service-card h2 {
    font-size: 1.2rem !important;
  }

  .service-card p {
    font-size: 0.9rem !important;
    margin-bottom: 0.9rem !important;
  }

  .service-icon {
    font-size: 2.25rem !important;
    margin-bottom: 0.9rem !important;
  }
}