/* 1. Importación de Tailwind */
@import "tailwindcss";
@config "./tailwind.config.js";

/* --- TIPOGRAFÍA CORPORATIVA ATTO --- */
@font-face {
  font-family: 'Betasan';
  src: url('./betasan_.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-logo {
  font-family: 'Betasan', sans-serif;
}

/* --- ESCALA GLOBAL DE TAMAÑO (Efecto Zoom Out) --- */
@layer base {
  html {
    font-size: 14px; 
  }
  @media (min-width: 1536px) {
    html {
      font-size: 16px; 
    }
  }

  /* El Technical Grid de Fondo */
  .dark body {
    background-image: 
      linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
  }
}

/* =========================================
   ESTILOS PERSONALIZADOS Y EFECTOS PREMIUM
   ========================================= */

/* Efecto de Vidrio Esmerilado */
.frosted-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.carousel-slide.active { 
  opacity: 1; 
}

/* --- ANIMACIONES DE INTERFAZ --- */
@keyframes scrollLine {
  0% { transform: translateY(-20px); opacity: 0; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

@keyframes dividerGrow { 
  0% { width: 0; opacity: 0; } 
  30% { opacity: 1; } 
  100% { width: 70%; opacity: 1; } 
}

@keyframes dividerShimmer { 
  0% { background-position: -200% center; } 
  100% { background-position: 200% center; } 
}

/* Animación Reactiva de los Divisores Dorados */
.atto-divider-line.is-visible {
  animation-play-state: running !important;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.3), rgba(197,160,89,0.08), rgba(197,160,89,0.3), transparent);
  background-size: 200% 100%;
  animation: dividerGrow 1.2s cubic-bezier(0.16,1,0.3,1) forwards, dividerShimmer 4s ease-in-out 1.2s infinite;
}

@layer utilities {
  @keyframes attoSlideIn { 
    0% { opacity: 0; transform: translateX(25px); } 
    100% { opacity: 1; transform: translateX(0); } 
  }
  
  /* Ocultar scrollbar en el Dossier y Blades manteniendo funcionalidad */
  .atto-scrollbar-hide::-webkit-scrollbar { 
    display: none; 
  }
  .atto-scrollbar-hide { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
  }
}