/* Estilos básicos para la nueva landing page */

/* Estilos globales para prevenir scroll horizontal y eliminar márgenes blancos */
.landing-page html, .landing-page body {
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #000;
  box-sizing: border-box;
}

.landing-page * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Prevenir desbordamiento horizontal */
.landing-page .relative.text-white, 
.landing-page section, 
.landing-page .container, 
.landing-page div[class*="flex"] {
  max-width: 100vw;
  overflow-x: clip;
}

/* Efectos de hover en botones */
.btn-hover {
  transition: all 0.3s ease;
}

.btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Efecto de vidrio simple */
.glass-simple {
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animación básica de fade-in */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease forwards;
}

/* Estilo para mejorar tipografía */
.landing-page h1, .landing-page h2, .landing-page h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Estilo para imágenes y contenido multimedia */
.landing-page img, .landing-page video {
  max-width: 100%;
  height: auto;
}

/* Correcciones para móvil */
@media (max-width: 768px) {
  .landing-page body, .landing-page html {
    width: 100vw;
    overflow-x: hidden !important;
  }
  
  /* Forzar el ancho total sin overflow */
  .landing-page body > div, .landing-page #__next {
    width: 100vw;
    overflow-x: hidden;
  }
  
  /* Asegurar que las secciones no desborden */
  .landing-page section {
    width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .landing-page h2 {
    font-size: 2rem !important;
  }
  
  /* Estilos para el teléfono en móviles - asegurar que pueda moverse */
  .phone-3d-container {
    width: 170px !important;
    height: 340px !important;
    top: 55% !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)) !important;
    /* Estos estilos ayudan con el movimiento */
    transform-origin: center center !important; 
    transition: none !important;
    will-change: transform !important;
    opacity: 0.9 !important;
    left: 60% !important;
    right: auto !important;
  }
  
  .phone-3d-inner {
    border-radius: 1.5rem !important;
    /* Reducir efectos 3D para mejor rendimiento */
    transform: rotateX(2deg) rotateY(-2deg) rotateZ(2deg) !important;
    transition: none !important;
  }
  
  /* Optimizaciones para Safari */
  @supports (-webkit-touch-callout: none) {
    .phone-3d-container {
      -webkit-transform-style: flat !important;
      -webkit-transform: translate3d(0,0,0) !important;
    }
    
    .phone-3d-inner {
      transform: none !important;
    }
  }
  
  .phone-reflection {
    display: none; /* Ocultar reflejo en móviles */
  }
  
  .phone-shadow {
    display: none; /* Ocultar sombra en móviles */
  }
}

/* Estilos para la página de inicio rediseñada */

/* Estilos para el teléfono flotante */
.sticky-phone-container {
  position: relative;
  z-index: 20;
}

/* Estilos base del teléfono con hardware acceleration */
.sticky-phone {
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

/* Limpiar efectos complicados que podrían causar problemas */
.phone-laid-down {
  transform-style: preserve-3d;
}

/* Remover cualquier efecto que pueda ser problemático */
.phone-laid-down::after,
.sticky-phone::after {
  display: none;
}

/* Asegurar que el footer tenga un z-index adecuado */
footer {
  position: relative;
  z-index: 40 !important;
  padding-bottom: 5rem;
  padding-top: 2rem;
  overflow: visible !important;
}

/* Eliminar el pseudo-elemento que causa la segunda línea */
footer::before {
  display: none;
}

/* Asegurar que el teléfono sea visible */
.sticky-phone img,
.sticky-phone div {
  max-width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Eliminar transformaciones excesivas */
.sticky-phone * {
  transform: none;
  transition: none;
}

/* Asegurar que el contenido del teléfono sea visible */
.phone-screen {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Estilo para que el teléfono sea visible a través de secciones oscuras */
.phone-visible-through {
  backdrop-filter: blur(4px);
  background-color: rgba(17, 24, 39, 0.85);
}

/* Altura mínima para secciones */
.min-section-height {
  min-height: 90vh;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
  
  .responsive-container {
    padding: 1rem;
  }
}

/* Correcciones para secciones de tamaño */
.full-section-height {
  min-height: 60vh;
}

/* Para pantallas medianas */
@media (min-width: 641px) and (max-width: 1024px) {
  .section-spacing {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Para pantallas grandes */
@media (min-width: 1025px) {
  .section-spacing {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .sticky-phone {
    width: 320px;
  }
}

/* Clases utilitarias adicionales */
.z-high {
  z-index: 20;
}

.z-highest {
  z-index: 30;
}

/* Efectos especiales */
.gradient-bg {
  background: linear-gradient(to bottom, rgba(17, 24, 39, 1), rgba(17, 24, 39, 0.8));
}

.gradient-text {
  background: linear-gradient(90deg, #3b82f6, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* Corregir problemas de espaciado en móviles */
.no-overflow {
  overflow: hidden;
}

/* Mejorar la experiencia en dispositivos táctiles */
@media (hover: none) {
  .touch-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

/* Para prevenir el solapamiento de elementos */
.section-clear {
  clear: both;
  position: relative;
}

/* Reducir espaciado vertical entre componentes */
.mb-reduced {
  margin-bottom: 0.5rem !important;
}

.mt-reduced {
  margin-top: 0.5rem !important;
}

.py-reduced {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Compactar los grid y flexbox */
.grid-compact {
  gap: 0.5rem !important;
}

.flex-compact {
  gap: 0.5rem !important;
}

/* Ajustes específicos para componentes internos */
#pricing .rounded-2xl {
  padding: 0.75rem !important;
}

#analysis-section .grid {
  gap: 0.5rem !important;
}

/* Mejora de legibilidad sobre fondos con dispositivos */
.text-content-overlay {
  position: relative;
  z-index: 5;
}

.text-backdrop {
  background-color: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(4px);
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Para animaciones - corrección de la definición duplicada */
@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(10px, -15px, 10px) rotate(3deg); }
  50% { transform: translate3d(-5px, 10px, -15px) rotate(-2deg); }
  75% { transform: translate3d(-15px, -5px, 5px) rotate(1deg); }
}

.animate-float-slow {
  animation: float-slow 5s ease-in-out infinite;
}

/* Eliminar espacio innecesario */
.compact-section {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.compact-container > * {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Para asegurar contraste de texto */
.text-contrast-improved {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Manejo de secciones para el scroll */
.section-for-scroll {
  position: relative;
  z-index: 30;
  min-height: 70vh;
}

/* Para hacer que el teléfono sea visible en secciones específicas */
#pricing, #digital-twin-section, footer {
  position: relative;
  z-index: 30;
}

/* Ajustes para el DigitalTwinSection */
#digital-twin-section {
  position: relative;
  z-index: 10;
  background-color: rgba(17, 24, 39, 0.6) !important;
  backdrop-filter: blur(3px) !important;
}

/* Dar al footer más solidez visual */
footer p, footer a, footer span {
  position: relative;
  z-index: 110; /* Elementos del footer por encima de todo */
}

/* Corrección para las capas de los elementos */
.z-front {
  z-index: 20;
}

.z-back {
  z-index: 5;
}

/* Mejorar visibilidad en elementos con backdrop-blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Asegurar que el header tenga un z-index superior al teléfono */
header, 
nav, 
.navbar,
.header,
.nav-container,
nav[role="navigation"],
.navbar-container,
[data-header],
.logo-container {
  position: relative;
  z-index: 100 !important;
}

/* Asegurarse de que los elementos de navegación estén por encima */
.nav-items, 
.logo, 
.nav-links,
.main-navigation {
  position: relative;
  z-index: 110 !important;
}

/* Efectos especiales para el teléfono 3D */
.phone-3d-container {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform;
}

.phone-3d-inner {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
}

/* Reflejos en el teléfono para efecto 3D */
.phone-reflection {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0) 60%
  );
  opacity: 0.5;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}

/* Sombras dinámicas para el teléfono */
.phone-shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}

/* Elementos que aparecen por delante del teléfono (capas de profundidad) */
.depth-layer-front {
  position: relative;
  z-index: 60;
  transform: translateZ(30px);
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
}

/* Elementos que aparecen al mismo nivel que el teléfono */
.depth-layer-middle {
  position: relative;
  z-index: 45;
  transform: translateZ(0);
}

/* Elementos que aparecen por detrás del teléfono */
.depth-layer-back {
  position: relative;
  z-index: 30;
  transform: translateZ(-30px);
}

/* Elementos decorativos para efecto de profundidad */
.floating-element {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Elemento decorativo circular que flota para efecto de profundidad */
.floating-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.6), rgba(16, 185, 129, 0.2));
  filter: blur(3px);
  opacity: 0.6;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
  animation: float-slow 10s ease-in-out infinite alternate;
}

/* Elemento decorativo cuadrado que flota para efecto de profundidad */
.floating-square {
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.4), rgba(59, 130, 246, 0.1));
  filter: blur(2px);
  opacity: 0.5;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
  animation: float-slow 8s ease-in-out infinite alternate-reverse;
}

/* Diferentes velocidades para los elementos flotantes */
.float-slow-1 { animation-duration: 10s; }
.float-slow-2 { animation-duration: 15s; }
.float-slow-3 { animation-duration: 12s; animation-delay: 2s; }

/* Asegurar que las secciones tengan profundidad adecuada */
section {
  position: relative;
  z-index: auto;
  overflow: visible;
}

/* Capa especial para la hero section con transiciones para el teléfono */
.hero-content-wrapper {
  position: relative;
  z-index: 45; /* Esto hace que a veces esté por encima y a veces por debajo del teléfono */
}

/* Capas especiales para que el teléfono tenga comportamiento de profundidad */
.hero-left-content {
  position: relative;
  z-index: 55; /* Siempre por encima del teléfono */
  transform: translateZ(20px);
}

.hero-right-content {
  position: relative;
  z-index: 45; /* A veces por encima, a veces por debajo */
}

.hero-bottom-content {
  position: relative;
  z-index: 35; /* Generalmente por debajo del teléfono */
  transform: translateZ(-10px);
}

/* Asegurar que el header esté por encima de todo */
header, 
nav, 
.navbar,
.header,
.nav-container,
nav[role="navigation"],
.navbar-container,
[data-header],
.logo-container,
[class*="header"],
[class*="navbar"],
[class*="nav-"],
a.logo {
  position: relative !important;
  z-index: 1000 !important; /* Valor muy alto para garantizar que siempre esté encima */
  transform: translateZ(50px);
}