/* ==========================================================================
   SYNTROPY V3 - SISTEMA DE DISEÑO (ATMÓSFERA)
   ==========================================================================
   
   FILOSOFÍA: 
   1. Tailwind CSS maneja el LAYOUT (Geometría, Espacios, Flexbox/Grid).
   2. Este archivo maneja la ATMÓSFERA (Colores, Gradientes, Efectos Glass, Tipografía base).
   
   NO AGREGAR: Márgenes, Paddings o anchos fijos aquí.
*/

:root {
  /* --- 1. PALETA DE COLORES ORIGINAL  --- */
  
  /* FONDO: Azul Petróleo (Identidad de Marca) */
  --bg-main: #112229;
  
  /* Gradiente para body */
  --bg-gradient-center: #162d38; 
  --bg-gradient-edge: #040a0d;

  /* VARIABLES DE FONDO ESPECÍFICAS */
  --bg-dark-petrol: #0C1A20; /* Footer */
  --bg-header: rgba(12, 26, 32, 0.95); /* Header translúcido */
  
  /* SUPERFICIES: Glassmorphism (Adaptado al tono azulado) */
  --glass-high: rgba(24, 48, 58, 0.6);
  --bg-card: rgba(24, 48, 58, 0.4); /* Color de tarjeta original */
  
  /* BORDES */
  --border-glass: rgba(138, 155, 168, 0.15);
  --border-glass-hover: rgba(6, 182, 212, 0.3);

  /* TEXTO */
  --text-main: #E2E8F0;    /* Slate 200 */
  --text-muted: #8A9BA8;   /* Gris azulado metálico */
  --text-code: #A8BCCB;    
  
  /* ACENTOS */
  --primary: #06B6D4;      /* Cyan Técnico */
  --primary-glow: rgba(6, 182, 212, 0.5);
  --accent: #8A9BA8;       /* Gris Estructural */

  /* --- 2. FUENTES --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* --- 3. RESET & BASE GLOBAL --- */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  /* Profundidad oceánica - múltiples capas de gradiente */
  background: 
    /* Capa 1: Vignette oscuro en bordes */
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(2, 6, 10, 0.7) 100%),
    /* Capa 2: Luz central sutil (donde está el orbital) */
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(22, 55, 70, 0.5) 0%, transparent 60%),
    /* Capa 3: Gradiente base de profundidad */
    radial-gradient(ellipse 150% 100% at 50% 0%, var(--bg-gradient-center) 0%, var(--bg-main) 50%, var(--bg-gradient-edge) 100%);
  background-color: var(--bg-gradient-edge);
  background-attachment: fixed;
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.7; 
}

/* Ruido/Grain sutil para textura de material físico */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Selección de texto */
::selection {
  background-color: rgba(6, 182, 212, 0.2);
  color: var(--primary);
}

/* --- 4. SCROLLBAR PERSONALIZADO (Adaptado al tema azul) --- */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
  background: #1A343E; /* Azul medio */
  border-radius: 4px;
  border: 2px solid var(--bg-main);
}

::-webkit-scrollbar-thumb:hover {
  background: #23424d; /* Azul más claro al hover */
}

/* --- 5. COMPONENTES DE ATMÓSFERA --- */

/* HEADER: Solo atmósfera. El layout lo maneja Tailwind en el HTML. */
#main-header {
  background-color: var(--bg-header); /* Tu color original */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-glass);
}

/* FOOTER */
#main-footer {
  background-color: var(--bg-dark-petrol); /* Color original */
  border-top: 1px solid var(--border-glass);
}

/* GLASS CARD: Estilo unificado para tarjetas */
.glass-card, .card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(8px); /* Opcional, depende de si quiero el blur */
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover, .card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}

/* TIPOGRAFÍA */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.text-glow { text-shadow: 0 0 10px var(--primary-glow); }

/* --- FIN DEL ARCHIVO --- */
/* === Fix scroll menú móvil iOS === */
#mobile-menu {
    -webkit-overflow-scrolling: touch;
}
#mobile-menu nav {
    -webkit-overflow-scrolling: touch;
}