/* ========================================
   INFOUNA - CSS CONSOLIDADO
   Variables universales y estilos base
   ======================================== */

/* ── CSS VARIABLES (UNIVERSAL) ── */
:root {
  /* Esquema SKY */
  --sky:        #4A8EC4;
  --sky-light:  #7FB3D9;
  --sky-pale:   #C8DFF0;
  --sky-ultra:  #EAF3FB;
  
  /* Esquema NAVY */
  --navy:       #1E3A5F;
  --navy-deep:  #152B47;
  
  /* Esquema BASE */
  --bg:          #F4F7FB;
  --bg-warm:     #EBF0F8;
  --blue:        #5A8FC2;
  --blue-dark:   #2D5F8A;
  --blue-soft:   #A8C4DF;
  --blue-pale:   #D6E6F4;
  
  /* Neutros */
  --white:       #FFFFFF;
  --ink:         #0D1E30;
  --ink-soft:    #2A4060;
  --muted:       #6A88A8;
  
  /* Sistema */
  --border:       rgba(74,142,196,0.14);
  --shadow:       0 4px 32px rgba(30,58,95,0.10);
  
  /* Fondo universal */
  --page-bg:     #EAF3FB;
}

/* ── BASE STYLES ── */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  font-size: 16px; 
  line-height: 1.6; 
  overflow-x: hidden;
}

/* ── FADE IN ANIMATIONS ── */
.fade-in { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: opacity 0.6s ease, transform 0.6s ease; 
}

.fade-in.visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 768px) {
  body { font-size: 14px; }
}

/* ========================================
   ESTILOS COMPONENTES
   ======================================== */

/* Importar componentes individuales si es necesario */
@import url('./components/header.css');
@import url('./components/footer.css');
@import url('./components/hero.css');