/*
Theme Name: TMD Futurista
Theme URI: https://tuagencia.com
Description: Landing page futurista para agencia de marketing digital
Version: 1.0.0
Author: Tu Agencia
Author URI: https://tuagencia.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tmd-futurista
*/

/* Reset mínimo */
html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Space Grotesk', sans-serif;
}

/* Utilidades del landing */
.gradient-bg {
  background: linear-gradient(135deg, #0a0a0f 0%, #0d1117 25%, #0a0f1a 50%, #0d0a14 75%, #0a0a0f 100%);
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-card-highlight {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glow-cyan {
  box-shadow: 0 0 60px rgba(0, 255, 255, 0.3), 0 0 120px rgba(0, 255, 255, 0.1);
}

.glow-text {
  text-shadow: 0 0 40px rgba(0, 255, 255, 0.5), 0 0 80px rgba(139, 92, 246, 0.3);
}

.gradient-text {
  background: linear-gradient(135deg, #00ffff 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-primary {
  background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 212, 170, 0.5);
}

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: rgba(0, 255, 255, 0.6);
}

.circuit-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.floating {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ====== CARRUSEL FIX (MANUAL / SCROLL) ======
   Este se usa para carruseles "normales" (con scroll manual + dots).
   Para Tecnologías (infinito) lo overrideamos más abajo.
*/
.carousel-container{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 8px;
}

/* Ocultar scrollbar (opcional) */
.carousel-container::-webkit-scrollbar{ display:none; }
.carousel-container{ scrollbar-width: none; }

.carousel-track{
  display: flex;
  gap: 16px;
  padding: 8px 0;
}

/* Esto reemplaza w-40/px-2/flex-shrink-0 si no tenés Tailwind cargado */
.carousel-track > div{
  flex: 0 0 160px;
  scroll-snap-align: start;
}

/* Dots */
.carousel-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.12);
  transition: all .2s ease;
  cursor: pointer;
  padding: 0;
}

.carousel-dot:hover{
  background: rgba(255,255,255,.32);
}

.carousel-dot.active{
  width: 22px;
  background: rgba(34, 211, 238, 0.95);
}

/* inputs */
input:focus {
  outline: none;
  border-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

/* Admin bar: baja el nav */
.admin-bar .tmd-landing nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .tmd-landing nav { top: 46px; }
}

/* ============================================
   CARRUSEL AUTOMÁTICO INFINITO - TECNOLOGÍAS
   (solo cuando el contenedor tiene class="tech-carousel")
   Requiere JS que clone items y agregue .is-ready
   ============================================ */

/* 1) Override del modo "scroll manual" SOLO para Tecnologías */
.carousel-container.tech-carousel {
  overflow: hidden;        /* NO scroll manual */
  position: relative;
  padding: 0;              /* opcional: que quede más limpio */
  scroll-snap-type: none;  /* desactiva snap en esta sección */
}

/* 2) Track: no animamos hasta que JS diga que está listo */
.carousel-container.tech-carousel .carousel-track {
  gap: 16px;               /* mantenemos el gap */
  padding: 8px 0;
  width: max-content;
  will-change: transform;
  animation: none;
}

/* Activa la animación cuando el contenedor tiene .is-ready */
.carousel-container.tech-carousel.is-ready .carousel-track {
  animation: scroll-infinite 30s linear infinite;
}

.carousel-container.tech-carousel.is-ready .carousel-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-infinite {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Items: que no se achiquen y sigan midiendo igual */
.carousel-container.tech-carousel .carousel-track > div {
  flex: 0 0 160px;  /* mantiene ancho consistente aunque no esté Tailwind */
  flex-shrink: 0;
}

/* 3) Fade lateral */
.carousel-container.tech-carousel::before,
.carousel-container.tech-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.carousel-container.tech-carousel::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 10, 15, 1) 0%, rgba(10, 10, 15, 0) 100%);
}

.carousel-container.tech-carousel::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 10, 15, 1) 0%, rgba(10, 10, 15, 0) 100%);
}

/* 4) Ocultar controles y dots (están fuera del container, así que lo hacemos por “hermano”)
   Esto funciona si la estructura es:
   <div class="relative">
     <div class="carousel-container tech-carousel">...</div>
     <button id="carousel-prev">...</button>
     <button id="carousel-next">...</button>
     <div id="carousel-dots">...</div>
   </div>
*/
.tech-carousel ~ #carousel-prev,
.tech-carousel ~ #carousel-next,
.tech-carousel ~ #carousel-dots {
  display: none !important;
}

/* Responsive: ajustar velocidad en móviles */
@media (max-width: 768px) {
  .carousel-container.tech-carousel.is-ready .carousel-track {
    animation-duration: 20s;
  }
}