/* =========================================================
   VARIABLES DE TEMA (puedes conectarlas a Material Design)
   ========================================================= */
:root {
  --primary: #3b82f6;      /* azul */
  --secondary: #64748b;    /* gris azulado */
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--gray-800);
    --surface-alt: var(--gray-900);
  }
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */
.hero-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px; height: 100%; 
}

.hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================================
   TARJETA PRINCIPAL (Dashboard)
   ========================================================= */
.dashboard-card {
  position: relative;
  z-index: 20;
  width: 60%;
  aspect-ratio: 16 / 9;
  background: var(--gray-800);
  border-radius: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--gray-700);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  animation: floating 6s ease-in-out infinite;
}


@media (min-width: 1024px) {
  .hero-container {     height: 600px;      }
  .dashboard-card {     width: 80%;      }
}
.dashboard-image-wrapper {
  width: 100%;
  height: 100%;
  background: white; background: black;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  display: flex; justify-content: center; align-items: center;
}

.dashboard-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  zzopacity: 0.8;  
}

.dashboard-gradient {
  position: absolute;
  inset: 0;
  zzbackground: linear-gradient(to left, #000 3%, transparent);
}

.dashboard-base {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 105%;
  height: 1rem;
  background: var(--gray-700);
  border-radius: 0 0 0.75rem 0.75rem;
}

/* =========================================================
   TARJETA MÓVIL
   ========================================================= */
.mobile-card {
  position: absolute;
  z-index: 30;
  bottom: 0.5rem;
  left: 1rem;
  width: 25%;
  aspect-ratio: 3 / 4;
  background: var(--gray-800);
  border-radius: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--gray-700);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  animation: floating 6s ease-in-out infinite;
}



/* =========================================================
   ICONOS FLOTANTES
   ========================================================= */
.floating-icon {
  position: absolute;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floating 6s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.icon-square {
  top:0; right:0; 
  width: 3rem;
  height: 3rem;
  background: var(--secondary);
  border-radius: 1rem;
  transform: rotate(12deg);
}

.icon-circle {
  top: 0rem; left:5rem;
  width: 2rem;
  height: 2rem;
  background: var(--primary);
  border-radius: 50%;
}

.icon-glass {
  bottom:5rem; right:-.5rem;
  width: 2.5rem;
  height: 2.5rem;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.1);
  border-radius: 1rem;
}

@media (min-width: 1024px) {
  .hero-container {     height: 600px;  height: 75%;  top:12%;    }
  .dashboard-card {     width: 80%;      }
  .mobile-card {        width: 33%;     left: -2.5rem;  bottom: -2.5rem;    }
  .icon-square {        
    top:1;          right:0;
    width: 5.2rem;    height: 5.2rem;      }
  .icon-circle {        
    top:-1.5rem;    left:5rem;
    width: 4rem;    height: 4rem;       }
  .icon-glass {         
    bottom:5rem;    right:-1.25rem;
    width: 5rem;    height: 5rem;       }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hero-container {     height: 80%;  top:10%;    }
  .dashboard-card {     width: 70%;      }
  .mobile-card {        width: 30%;     left: 2.5rem;  bottom: 1.5rem;    }
  .icon-square {        
    top:0;              right:0;
    width: 4rem;      height: 4rem;      }
  .icon-circle {        
    top:2.5rem;        left:5rem;
    width: 3rem;        height: 3rem;       }
  .icon-glass {         
    bottom:2rem;        right:1.25rem;
    width: 4rem;        height: 4rem;       }
}
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .hero-container {     height: 70%;  top:10%;    }
  .dashboard-card {     width: 50%;     top: -10%; }
  .mobile-card {        width: 25%;     left: 2.5rem;    transform: translateX(-40%);   }
  .icon-square {        
    top:0;              right:0;
    width: 2.5rem;      height: 2.5rem;      }
  .icon-circle {        
    top:.5rem;        left:2rem;
    width: 2rem;        height: 2rem;       }
  .icon-glass {         
    bottom:2rem;        right:1.25rem;
    width: 2rem;        height: 2rem;       }
}
/* =========================================================
   ANILLOS GIRATORIOS
   ========================================================= */
.ring {
  position: absolute;
  inset: 0;
  border: 1px dashed #d1d5db;
  border-radius: 9999px;
  opacity: 0.5;     opacity: 0.7;
  transform: scale(1.25);   transform: scale(1.1);
  animation: spin 20s linear infinite;
}

.ring.reverse {
  opacity: 0.3;     opacity: 0.5;
  transform: scale(1.5);  transform: scale(1.15);
  animation: spin 30s linear infinite reverse;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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