/* ===== MOBILE VIEWPORT FIXES ===== */
/* Corrige problemas específicos del viewport en dispositivos móviles */

/* ===== VIEWPORT HEIGHT FIX ===== */
/* Soluciona el problema del 100vh en navegadores móviles */
:root {
  --vh: 1vh;
}

.quantum-hero {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}

/* ===== TOUCH TARGETS ===== */
/* Asegura que todos los elementos táctiles tengan el tamaño mínimo recomendado */
button,
a,
input,
select,
textarea,
[role="button"],
[tabindex] {
  min-height: 44px;
  min-width: 44px;
}

/* ===== SCROLL BEHAVIOR ===== */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== MOBILE SPECIFIC FIXES ===== */

/* Fix para iOS Safari */
@supports (-webkit-touch-callout: none) {
  .quantum-hero {
    min-height: -webkit-fill-available;
  }
  
  body {
    min-height: -webkit-fill-available;
  }
}

/* Fix para Android Chrome */
@supports (height: 100dvh) {
  .quantum-hero {
    min-height: 100dvh;
  }
}

/* ===== ORIENTATION FIXES ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .quantum-hero {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  .hero-content {
    gap: 1rem;
  }
  
  .hero-visual {
    height: 200px;
  }
  
  .quantum-title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  
  .quantum-description {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }
}

/* ===== SAFE AREA INSETS ===== */
/* Soporte para dispositivos con notch */
@supports (padding: max(0px)) {
  .navbar,
  .mobile-navbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  .quantum-hero {
    padding-top: max(2rem, env(safe-area-inset-top));
  }
  
  .footer-bottom-section {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ===== ZOOM PREVENTION ===== */
/* Previene el zoom accidental en inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px;
  transform: scale(1);
}

/* ===== TAP HIGHLIGHT ===== */
/* Mejora la experiencia táctil */
* {
  -webkit-tap-highlight-color: rgba(0, 212, 255, 0.2);
  -webkit-touch-callout: none;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: rgba(0, 212, 255, 0.3);
}

/* ===== SCROLLBAR STYLING ===== */
/* Estiliza las barras de desplazamiento en móvil */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.7);
}

/* ===== FOCUS STYLES ===== */
/* Mejora la visibilidad del foco en móvil */
*:focus {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* ===== REDUCED MOTION ===== */
/* Respeta las preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .quantum-particles,
  .quantum-grid,
  .quantum-waves,
  .quantum-rings,
  .quantum-nexus,
  .quantum-data-stream {
    animation: none !important;
  }
}

/* ===== HIGH CONTRAST ===== */
/* Mejora el contraste para mejor legibilidad */
@media (prefers-contrast: high) {
  .quantum-hero {
    background: #000000;
    color: #ffffff;
  }
  
  .quantum-tech-card,
  .ecosystem-card,
  .performance-card,
  .stat-card {
    background: #1a1a1a;
    border: 2px solid #00d4ff;
    color: #ffffff;
  }
  
  .btn {
    border: 2px solid #00d4ff;
  }
  
  .feature-item {
    border: 1px solid #00d4ff;
  }
}

/* ===== DARK MODE ===== */
/* Optimizaciones para modo oscuro */
@media (prefers-color-scheme: dark) {
  .quantum-hero {
    background: #000000;
  }
  
  .quantum-tech-card,
  .ecosystem-card,
  .performance-card,
  .stat-card {
    background: rgba(26, 26, 26, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* ===== PRINT STYLES ===== */
/* Optimizaciones para impresión */
@media print {
  .navbar,
  .mobile-navbar,
  .mobile-menu,
  .mobile-menu-overlay,
  .ad-banner-section,
  .scroll-indicator {
    display: none !important;
  }
  
  .quantum-hero {
    min-height: auto;
    page-break-inside: avoid;
  }
  
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  
  .quantum-tech-grid,
  .ecosystem-grid,
  .performance-grid {
    grid-template-columns: 1fr;
    break-inside: avoid;
  }
  
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .quantum-title,
  .quantum-section-title {
    color: black !important;
  }
}

/* ===== SPECIFIC MOBILE FIXES ===== */

/* Fix para iPhone X y superiores */
@supports (padding: max(0px)) {
  .navbar {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
}

/* Fix para Android con navegación por gestos */
@media screen and (max-width: 768px) {
  .quantum-hero {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* Fix para tablets en modo retrato */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  
  .hero-visual {
    order: 2;
    height: 300px;
  }
  
  .hero-text {
    order: 1;
  }
}

/* Fix para tablets en modo paisaje */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .quantum-hero {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  .hero-content {
    flex-direction: row;
    text-align: left;
  }
  
  .hero-visual {
    height: 400px;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Optimización para dispositivos de bajo rendimiento */
@media (max-width: 360px) {
  .quantum-particles,
  .quantum-grid,
  .quantum-waves,
  .quantum-rings,
  .quantum-nexus,
  .quantum-data-stream {
    display: none;
  }
  
  .blockchain-core {
    display: none;
  }
  
  .floating-elements {
    display: none;
  }
}

/* Optimización para conexiones lentas */
@media (max-width: 480px) {
  .quantum-particles {
    background-size: 100px 100px;
  }
  
  .quantum-grid {
    background-size: 25px 25px;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Mejora la legibilidad en pantallas pequeñas */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
  }
  
  p {
    line-height: 1.6;
  }
}

/* ===== TOUCH FRIENDLY INTERACTIONS ===== */

/* Mejora las interacciones táctiles */
button,
a,
[role="button"] {
  position: relative;
  overflow: hidden;
}

button:active,
a:active,
[role="button"]:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Efecto ripple para botones */
button::before,
a::before,
[role="button"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}

button:active::before,
a:active::before,
[role="button"]:active::before {
  width: 200px;
  height: 200px;
}

/* ===== LOADING STATES ===== */

/* Estados de carga optimizados para móvil */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #00d4ff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== ERROR STATES ===== */

/* Estados de error visibles en móvil */
.error {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.success {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* ===== UTILITY CLASSES ===== */

/* Clases de utilidad para móvil */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.touch-action-none {
  touch-action: none;
}

.touch-action-pan-x {
  touch-action: pan-x;
}

.touch-action-pan-y {
  touch-action: pan-y;
}