/* =========================================================
   FAE — SISTEMA DE DISEÑO
   Archivo: fae-design-system.css
   Ubicación: /wp-content/themes/astra-child/fae-design-system.css
   ========================================================= */

:root{
  /* Colores institucionales */
  --navy-900:#071B33;   /* fondo más oscuro: topbar, footer */
  --navy-800:#0D2B4E;   /* header */
  --blue-700:#123C6B;   /* bloques principales / botones secundarios */
  --blue-600:#1A4B85;   /* enlaces, iconos activos */
  --blue-500:#2C6BAD;   /* acentos suaves */
  --gold-500:#C9A227;   /* acento principal: CTA, líneas, etiquetas */
  --gold-400:#DAB94A;   /* acento hover / claro */
  --sky-100:#EEF3F8;    /* fondo alterno de secciones */
  --sky-050:#F7FAFC;
  --white:#FFFFFF;
  --ink-900:#0E1C29;    /* texto principal */
  --ink-600:#4C5C6C;    /* texto secundario */
  --ink-400:#8A97A3;    /* texto terciario / fechas */
  --line:#DEE6EE;       /* bordes */
  --radius:4px;
}

/* ===== TIPOGRAFÍA BASE ===== */
body, p, li, span, a {
  font-family:'Source Sans 3', sans-serif;
  color:var(--ink-900);
}
h1,h2,h3,h4,h5,h6{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-900);
}

/* Escala tipográfica — úsala en Elementor con clases CSS adicionales */
.fae-h1{ font-size:52px; line-height:1.06; font-weight:700; }
.fae-h2{ font-size:30px; line-height:1.2;  font-weight:600; }
.fae-h3{ font-size:20px; line-height:1.3;  font-weight:600; }
.fae-body{ font-size:16px; line-height:1.6; }
.fae-caption{ font-size:13px; color:var(--ink-400); font-weight:600; letter-spacing:.03em; }

/* ===== EYEBROW (etiqueta pequeña sobre títulos) ===== */
.fae-eyebrow{
  font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-500);
}

/* ===== BOTONES ===== */
.fae-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; font-weight:700; font-size:14px;
  letter-spacing:.02em; border-radius:2px; transition:.15s;
}
.fae-btn-gold{ background:var(--gold-500); color:var(--navy-900); }
.fae-btn-gold:hover{ background:var(--gold-400); }
.fae-btn-outline{ border:1.5px solid var(--blue-600); color:var(--blue-600); }
.fae-btn-outline:hover{ background:var(--sky-100); }

/* ===== TARJETA DE NOTICIA (usar en el Loop Item de Elementor Pro) ===== */
.fae-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .15s, transform .15s;
}
.fae-card:hover{
  box-shadow:0 12px 28px rgba(10,30,55,.12);
  transform:translateY(-2px);
}
.fae-card .fae-thumb{ aspect-ratio:16/10; background:var(--navy-800); position:relative; }
.fae-card .fae-tag{
  position:absolute; top:14px; left:14px;
  background:var(--gold-500); color:var(--navy-900);
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px;
}
.fae-card .fae-body{ padding:20px 20px 22px; }

/* ===== SECCIÓN ALTERNA (fondo gris claro) ===== */
.fae-section-alt{ background:var(--sky-050); }

/* ===== DIVISOR "RUTA DE VUELO" (elemento de marca) ===== */
.fae-flightline{
  height:1px; width:100%;
  background-image:linear-gradient(90deg, var(--gold-500) 0 6px, transparent 6px 12px);
  background-size:12px 1px; background-repeat:repeat-x;
  opacity:.9;
}