/* ========================================
   OPTIMIZACIONES MÓVIL - COMPLETAS
   Aplicar SOLO en dispositivos móviles
   ======================================== */

@media (max-width: 768px) {

  /* ==========================================
     1. ELIMINAR EFECTOS PESADOS
     ========================================== */

  /* Aurora background - ELIMINAR */
  .aurora-bg,
  .aurora-bg::before,
  .aurora-bg::after {
    display: none !important;
  }

  /* Code particles flotantes - ELIMINAR */
  .code-particles {
    display: none !important;
  }

  /* Hero particles - ELIMINAR TODAS */
  .hero-particles {
    display: none !important;
  }

  /* Cyber grid - SIMPLIFICAR */
  .cyber-grid {
    background-size: 150px 150px !important;
    opacity: 0.2 !important;
  }

  /* Efectos glow - ELIMINAR animaciones */
  .glow-pulse,
  .hero-glow,
  .hero-animated-bg {
    animation: none !important;
    display: none !important;
  }

  /* Hero section - Simplificar fondos */
  .hero-section::before,
  .hero-section::after {
    display: none !important;
  }

  .hero-section {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
  }

  /* Blurs pesados - REDUCIR */
  .glass-panel {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* ==========================================
     2. NAVBAR MÓVIL MODERNO - STICKY TOP
     ========================================== */

  /* Navbar siempre sticky y compacto */
  .navbar-premium {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    padding: 8px 0 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  /* Ajustar body para compensar navbar fija */
  body {
    padding-top: 70px !important;
  }

  /* Logo más compacto */
  .brand-logo {
    width: 36px !important;
    height: 36px !important;
  }

  .brand-text {
    font-size: 1.1rem !important;
  }

  /* Menú collapse mejorado */
  .navbar-premium .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98) !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-radius: 0 0 16px 16px !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  /* Links del menú más grandes y táctiles */
  .navbar-premium .nav-link {
    padding: 16px 20px !important;
    margin-bottom: 4px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .navbar-premium .nav-link i {
    font-size: 1.2rem !important;
    min-width: 24px !important;
  }

  /* Hover mejorado */
  .navbar-premium .nav-link:hover,
  .navbar-premium .nav-link:active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #fff !important;
  }

  /* Botón CTA destacado */
  .nav-cta {
    margin-top: 12px !important;
    padding: 16px 20px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !important;
  }

  /* Botón toggler más grande */
  .navbar-toggler {
    padding: 10px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ==========================================
     3. OCULTAR/SIMPLIFICAR GENERADOR
     ========================================== */

  /* Ocultar toda la sección del generador */
  #generador,
  .generator-section {
    display: none !important;
  }

  /* Ocultar enlaces al generador en el menú */
  .nav-link[href="#generador"],
  a[href="#generador"] {
    display: none !important;
  }

  /* Ocultar enlace a Herramientas */
  .nav-link[href="#features"],
  .nav-link[data-section="features"],
  a[href="#features"] {
    display: none !important;
  }

  /* Ocultar sección de features que menciona el generador */
  #features {
    display: none !important;
  }

  /* Ocultar item del menú "Herramientas" */
  .nav-item:has(.nav-link[href="#features"]),
  .nav-item:has(.nav-link[data-section="features"]) {
    display: none !important;
  }

  /* Ocultar badges/menciones del generador en hero */
  .badge-new:has-text("Generador"),
  .hero-section .badge:contains("Generador") {
    display: none !important;
  }

  /* Ocultar botones CTA que llevan al generador */
  .btn[href="#generador"],
  button[onclick*="generador"] {
    display: none !important;
  }

  /* Ocultar tabs de IA Creator */
  button[data-bs-target="#tabIA"],
  #tabIA {
    display: none !important;
  }

  /* Chat IA Vision - Permitir en móvil pero optimizado */
  #chatIAVision {
    /* Permitir que se abra/cierre normalmente */
  }

  /* Cuando el chat esté abierto, optimizar para móvil */
  #chatIAVision.open,
  #chatIAVision[style*="display: flex"],
  #chatIAVision[style*="display:flex"] {
    position: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 80vh !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 1050 !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Hacer el chat más táctil en móvil */
  .chat-ia-window {
    height: 100% !important;
  }

  .chat-ia-header {
    padding: 20px 16px !important;
    font-size: 1.1rem !important;
  }

  .chat-ia-body {
    height: calc(100% - 140px) !important;
    overflow-y: auto !important;
  }

  .chat-ia-input-area {
    padding: 16px !important;
  }

  .chat-ia-textarea {
    font-size: 16px !important; /* Evitar zoom en iOS */
    padding: 12px 16px !important;
    min-height: 44px !important;
  }

  /* Ocultar botones de preview innecesarios */
  #btnVerCodigo,
  #btnFullscreen,
  #btnDesktop,
  #btnTablet {
    display: none !important;
  }

  /* Ocultar links del footer que mencionen generador */
  footer a[href="#generador"] {
    display: none !important;
  }

  /* Ocultar item del menú si está en lista */
  .nav-item:has(.nav-link[href="#generador"]) {
    display: none !important;
  }

  /* ==========================================
     4. HERO SECTION OPTIMIZADO
     ========================================== */

  .hero-section {
    padding: 60px 0 40px 0 !important;
  }

  /* Título más compacto */
  .hero-section h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .hero-section .lead {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }

  /* Botones hero en columna */
  .hero-section .d-flex.flex-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
  }

  /* Stats hero más compactos */
  .hero-stats {
    margin-top: 24px !important;
    padding-top: 20px !important;
    justify-content: space-around !important;
  }

  .hero-stat {
    flex-direction: column !important;
    text-align: center !important;
    gap: 4px !important;
  }

  .hero-stat-number {
    font-size: 1.5rem !important;
  }

  .hero-stat-label {
    font-size: 0.75rem !important;
  }

  /* Device/imagen hero más pequeño */
  .hero-visual-wrapper {
    margin-top: 40px !important;
  }

  .device-frame {
    max-width: 100% !important;
    animation: none !important; /* Sin animación para ahorrar batería */
  }

  /* ==========================================
     5. SECCIONES GENERALES OPTIMIZADAS
     ========================================== */

  /* Reducir padding de secciones */
  section.py-5 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Badges y títulos más compactos */
  .badge-new {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }

  h2.h3 {
    font-size: 1.5rem !important;
  }

  h3.h4 {
    font-size: 1.25rem !important;
  }

  /* Cards más compactas */
  .glass-panel,
  .card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .tool-card {
    padding: 20px 16px !important;
  }

  /* ==========================================
     6. PLANTILLAS CAROUSEL OPTIMIZADO
     ========================================== */

  /* Carousel wrapper sin padding lateral para que el swipe funcione */
  .plantillas-carousel-wrapper {
    padding: 0 !important;
    margin: 0 -16px !important;
  }

  /* Carousel táctil nativo */
  .plantillas-carousel {
    display: flex !important;
    gap: 16px !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 20px 16px !important;
    scroll-behavior: smooth !important;
    touch-action: pan-x !important;
  }

  .plantillas-carousel::-webkit-scrollbar {
    display: none !important;
  }

  /* Cards de plantillas en móvil */
  .plantilla-card {
    min-width: 85vw !important;
    max-width: 85vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    margin-right: 0 !important;
  }

  /* Ocultar flechas de navegación en móvil (usar swipe) */
  .carousel-nav,
  .carousel-prev,
  .carousel-next {
    display: none !important;
  }

  /* Dots indicadores más grandes para touch */
  .plantillas-dots {
    padding: 16px 0 !important;
  }

  .plantilla-dot {
    width: 10px !important;
    height: 10px !important;
    margin: 0 6px !important;
  }

  /* Modal de plantilla optimizado */
  .plantilla-modal-header {
    padding: 12px 16px !important;
  }

  .plantilla-modal-header h5 {
    font-size: 1rem !important;
  }

  /* ==========================================
     7. STEPS TIMELINE MEJORADO
     ========================================== */

  .steps-timeline {
    gap: 16px !important;
    padding: 20px 0 !important;
  }

  .step-card {
    padding: 20px 16px !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  .step-icon-circle {
    width: 64px !important;
    height: 64px !important;
  }

  .step-icon-circle i {
    font-size: 1.5rem !important;
  }

  .step-num {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
  }

  .step-title {
    font-size: 0.95rem !important;
  }

  .step-desc {
    font-size: 0.8rem !important;
  }

  /* ==========================================
     8. BENEFITS/FEATURES CARDS
     ========================================== */

  .benefit-card-new {
    padding: 20px 16px !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  .benefit-icon-new {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    font-size: 1.3rem !important;
  }

  .action-card {
    padding: 16px 12px !important;
  }

  .action-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.3rem !important;
  }

  /* ==========================================
     9. TABLA DE PRECIOS RESPONSIVE
     ========================================== */

  /* Ocultar tabla desktop */
  .table-responsive table {
    font-size: 0.8rem !important;
  }

  .table-responsive th,
  .table-responsive td {
    padding: 8px 6px !important;
  }

  /* Calculadora de dominios más compacta */
  .dominio-calculator input {
    font-size: 1rem !important;
    padding: 12px !important;
  }

  .dominio-calculator button {
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
  }

  /* ==========================================
     10. FORMULARIO DE CONTACTO
     ========================================== */

  #contacto .card {
    padding: 20px !important;
  }

  #contacto .form-control {
    padding: 12px 16px !important;
    font-size: 1rem !important;
  }

  #contacto textarea {
    min-height: 120px !important;
  }

  #contacto .btn {
    padding: 14px 24px !important;
    font-size: 1rem !important;
    width: 100% !important;
  }

  /* ==========================================
     11. WAVE/DECORACIONES SIMPLIFICADAS
     ========================================== */

  .hero-wave {
    height: 60px !important;
  }

  /* ==========================================
     12. HERRAMIENTAS (Features section)
     ========================================== */

  .tool-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .tool-icon {
    margin-bottom: 12px !important;
  }

  /* ==========================================
     13. ANIMACIONES REDUCIDAS
     ========================================== */

  /* Eliminar todas las animaciones de hover en móvil */
  .card:hover,
  .glass-panel:hover,
  .holo-card:hover,
  .step-card:hover,
  .benefit-card-new:hover {
    transform: none !important;
  }

  /* Reducir duración de animaciones */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.2s !important;
  }

  /* ==========================================
     14. TIPOGRAFÍA OPTIMIZADA
     ========================================== */

  body {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .display-4 {
    font-size: 2rem !important;
  }

  .display-5 {
    font-size: 1.75rem !important;
  }

  .display-6 {
    font-size: 1.5rem !important;
  }

  .lead {
    font-size: 1rem !important;
  }

  .small,
  small {
    font-size: 0.85rem !important;
  }

  .smaller {
    font-size: 0.8rem !important;
  }

  /* ==========================================
     15. BOTONES OPTIMIZADOS
     ========================================== */

  .btn {
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
  }

  .btn-lg {
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }

  .btn-sm {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }

  /* ==========================================
     16. ESPACIADO Y MÁRGENES
     ========================================== */

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  .row > * {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ==========================================
     17. IMÁGENES Y MEDIA
     ========================================== */

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .ratio {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* ==========================================
     18. STICKY CTA FLOTANTE (Opcional)
     ========================================== */

  /* Botón de contacto flotante al final */
  .mobile-sticky-cta {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    z-index: 1020;
    padding: 16px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.5);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mobile-sticky-cta:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
  }
}

/* ==========================================
   PREFERS REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   LANDSCAPE MÓVIL (Horizontal)
   ========================================== */

@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    padding: 40px 0 30px 0 !important;
  }

  .hero-section h1 {
    font-size: 1.75rem !important;
  }

  .navbar-premium {
    padding: 6px 0 !important;
  }

  body {
    padding-top: 60px !important;
  }
}

/* ==========================================
   PANTALLAS MUY PEQUEÑAS (< 375px)
   ========================================== */

@media (max-width: 375px) {
  .hero-section h1 {
    font-size: 1.75rem !important;
  }

  .step-card {
    max-width: 100% !important;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    font-size: 0.95rem !important;
    padding: 12px 20px !important;
  }
}