/* =====================================================================
   COMUNICACIONES INTERNAS · Planisferio Viajes
   Sistema de diseño institucional — versión CLARA / MODERNA
   Manual de marca Planisferio:
     Azul  #007DFF (Pantone 3005 C) · Cian #00CDFF (Pantone 2985 C) · Blanco
     Tipografía: Mundial (Bold en títulos, Regular en texto)
   ===================================================================== */

/* ---------- Tipografía institucional: Mundial (manual de marca) ---------- */
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALTHIN.OTF') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALLIGHT.OTF') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALREGULAR.OTF') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALDEMIBOLD.OTF') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALBOLD.OTF') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALBLACK.OTF') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('../fonts/MUNDIALITALIC.OTF') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Paleta institucional Planisferio */
  --brand-blue:  #007DFF;   /* Pantone 3005 C · primario */
  --brand-cyan:  #00CDFF;   /* Pantone 2985 C · acento   */
  --brand-white: #FFFFFF;
  --grad:      linear-gradient(135deg, #007DFF 0%, #00CDFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(0,125,255,.12), rgba(0,205,255,.12));

  /* Neutros del tema claro */
  --bg:        #EEF4FF;   /* fondo de la app (blanco azulado) */
  --surface:   #FFFFFF;   /* tarjetas / paneles */
  --ink:       #0C1A33;   /* títulos (navy) */
  --ink-soft:  #3F5170;   /* texto de cuerpo */
  --ink-mute:  #8497B5;   /* etiquetas / secundario */
  --line:      #E3ECF9;   /* bordes suaves */
  --line-2:    #D3E1F5;
  --ring:      rgba(0,125,255,.16);
  --shadow:    0 14px 40px rgba(9,50,120,.10);
  --shadow-lg: 0 26px 70px rgba(9,50,120,.16);
  --radius:    26px;

  --mundial: 'Mundial', 'Montserrat', 'Inter', sans-serif;

  /* Alias de compatibilidad con el sistema base */
  --brand-purple: var(--brand-blue);
  --brand-teal:   var(--brand-cyan);
  --brand-gold:   var(--brand-blue);
  --brand-dark:   var(--ink);
  --gilroy: var(--mundial);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--ink-soft);
  font-family: var(--mundial);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Lienzo de la app (claro + auras de marca) ---------- */
.aterrizar-terminal {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(58% 48% at 100% -2%, rgba(0,205,255,.14) 0%, transparent 60%),
    radial-gradient(52% 44% at 0% 102%, rgba(0,125,255,.10) 0%, transparent 58%),
    var(--bg);
}

/* Sin ruido en la versión clara */
.noise-bg::before { content: none; }

/* ---------- Cristal claro ---------- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(9, 50, 120, 0.05);
}

/* Tarjetas del dashboard */
.modern-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: var(--shadow);
}
/* Acento de gradiente que se dibuja al hover (toque moderno) */
.modern-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.modern-card:hover::before { transform: scaleX(1); }
.modern-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 125, 255, 0.35);
  box-shadow: var(--shadow-lg);
}

/* Panel blanco reutilizable (editor / preview / formularios) */
.glass-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Cajas de ícono ---------- */
.icon-box-modern {
  background: var(--grad-soft);
  border: 1px solid rgba(0,125,255,.14);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.icon-box-modern svg { stroke: var(--brand-blue); transition: stroke .3s ease; }
.modern-card:hover .icon-box-modern {
  transform: scale(1.06) rotate(4deg);
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(0, 125, 255, 0.35);
}
.modern-card:hover .icon-box-modern svg { stroke: #fff; }

/* ---------- Texto con gradiente de marca ---------- */
.text-metallic-teal {
  background: linear-gradient(120deg, #007DFF 0%, #00CDFF 50%, #007DFF 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brand-shine 6s linear infinite;
}
@keyframes brand-shine { to { background-position: 220% center; } }

/* ---------- Animaciones de entrada ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
}

/* ---------- Auras decorativas suaves ---------- */
.orb {
  position: fixed;
  border-radius: 9999px;
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
.orb-1 { top: -18%; right: -6%; width: 620px; height: 620px; background: rgba(0,205,255, 0.30); }
.orb-2 { bottom: -14%; left: -8%; width: 520px; height: 520px; background: rgba(0,125,255, 0.20); }

/* ---------- Utilidades de marca ---------- */
.font-gilroy { font-family: var(--mundial); }
.eyebrow {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.34em; color: var(--brand-blue);
}

/* Botón principal (gradiente de marca) */
.btn-terminal {
  font-family: var(--mundial);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 15px 26px;
  border-radius: 16px;
  border: none;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 125, 255, 0.28);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-terminal:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 125, 255, 0.38);
}
.btn-terminal:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: #fff;
  color: var(--brand-blue);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--brand-blue); box-shadow: 0 8px 20px rgba(0,125,255,.12); }

/* Inputs */
.field-label {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 8px;
}
.field-input, .field-textarea, .field-select {
  width: 100%;
  font-family: var(--mundial);
  font-size: 14px;
  color: var(--ink);
  background: #F7FAFF;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 13px 15px;
  transition: all 0.25s ease;
  outline: none;
}
.field-input::placeholder, .field-textarea::placeholder { color: #A9B7CE; }
.field-input:focus, .field-textarea:focus, .field-select:focus {
  border-color: var(--brand-blue);
  background: #fff;
  box-shadow: 0 0 0 4px var(--ring);
}
.field-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field-select option { background: #fff; color: var(--ink); }

/* Footer institucional (UI) */
.footer-inst {
  font-family: var(--mundial);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}