/* Estilos responsivos para heroSubtitle */

/* Hero con colores rosados y azules */
.hero::before {
  background: linear-gradient(135deg, rgba(219,39,119,0.95) 0%, rgba(236,72,153,0.92) 25%, rgba(59,130,246,0.90) 50%, rgba(147,51,234,0.88) 75%, rgba(168,85,247,0.90) 100%) !important;
}

.hero::after {
  background: radial-gradient(circle at 20% 80%, rgba(236,72,153,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(59,130,246,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(147,51,234,0.08) 0%, transparent 70%) !important;
}

/* Botón CTA llamativo y hermoso comercial */
.hero-btn {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%) !important;
  box-shadow: 0 25px 70px rgba(255,215,0,0.7), 0 0 50px rgba(255,165,0,0.5), inset 0 2px 0 rgba(255,255,255,0.3) !important;
  border: 3px solid rgba(255,255,255,0.9) !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
  animation: shine 2s infinite !important;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.hero-btn:hover {
  background: linear-gradient(135deg, #FFED4E 0%, #FFB800 50%, #FF6B00 100%) !important;
  box-shadow: 0 35px 90px rgba(255,215,0,0.9), 0 0 70px rgba(255,165,0,0.7), inset 0 2px 0 rgba(255,255,255,0.4) !important;
  transform: translateY(-5px) scale(1.05) !important;
  border-color: rgba(255,255,255,1) !important;
}

/* Modo expandido (desktop) - un poco más chico */
@media (min-width: 769px) {
  #heroSubtitle {
    font-size: 2.1rem !important; /* Reducido de 2.3rem */
    letter-spacing: -0.02em !important;
  }
}

/* Modo responsive móvil - un poquito más grande */
@media (max-width: 768px) {
  #heroSubtitle {
    font-size: 1.4rem !important;
    letter-spacing: 1.2px !important;
  }
}

/* Tablet - tamaño intermedio */
@media (min-width: 481px) and (max-width: 768px) {
  #heroSubtitle {
    font-size: 1.6rem !important;
  }
}

/* Espacio extra en footer para botón WhatsApp en móvil */
@media (max-width: 768px) {
  footer {
    padding-bottom: 100px !important;
  }
  
  /* FORZAR TARJETAS VERTICALES EN MÓVIL */
  section div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Tarjetas compactas y profesionales en móvil */
  section[style*="padding: 60px 40px"][style*="background: linear-gradient(135deg, #fdfbf9 0%, #f9f5f0 100%)"] {
    padding: 40px 15px !important;
  }
  
  /* Título y descripción de la sección */
  section[style*="padding: 60px 40px"] div[style*="text-align: center"][style*="margin-bottom: 50px"] h2 {
    font-size: 1.65rem !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
  }
  
  section[style*="padding: 60px 40px"] div[style*="text-align: center"][style*="margin-bottom: 50px"] p {
    font-size: 0.95rem !important;
    opacity: 0.85 !important;
  }
  
  section[style*="grid-template-columns: 1fr 1fr"] a {
    padding: 25px 20px !important;
    border-radius: 16px !important;
  }
  
  section[style*="grid-template-columns: 1fr 1fr"] a > div:nth-child(2) {
    font-size: 2.2rem !important;
    margin-bottom: 15px !important;
  }
  
  section[style*="grid-template-columns: 1fr 1fr"] a h3 {
    font-size: 1.5rem !important;
    margin-bottom: 12px !important;
  }
  
  section[style*="grid-template-columns: 1fr 1fr"] a p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }
  
  section[style*="grid-template-columns: 1fr 1fr"] a > div:last-child {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }
}