/* =========================================================
   Tema Star IT Solutions Vanguard LLC sobre Bootstrap 5.3
   Basado en el Corporate Brand Book v2.0 (agosto 2026).
   - Lienzo dominante: blanco y neutros claros
   - Vanguard Navy: identidad y títulos (autoridad)
   - Technology Blue: acciones, enlaces y acentos (con moderación)
   - Cloud Blue: paneles y fondos suaves
   - Slate Gray: texto de apoyo
   - Tipografía: Inter (fallback Arial / Liberation Sans)
   ========================================================= */
:root {
  color-scheme: only light; /* el sitio es siempre claro, aunque el sistema esté en modo oscuro */
  /* Paleta oficial */
  --brand-navy:  #06225A;   /* Vanguard Navy */
  --brand-blue:  #0755C9;   /* Technology Blue */
  --brand-cloud: #EEF4FF;   /* Cloud Blue */
  --brand-slate: #666A73;   /* Slate Gray */
  --brand-white: #FFFFFF;

  /* Tonos de apoyo derivados por transparencia de la paleta oficial */
  --navy-rgb: 6, 34, 90;
  --blue-rgb: 7, 85, 201;
  --line: rgba(var(--navy-rgb), .10);
  --line-strong: rgba(var(--navy-rgb), .18);

  --grad-navy: radial-gradient(900px 520px at 85% -10%, rgba(var(--blue-rgb), .45) 0%, transparent 60%),
               radial-gradient(700px 460px at -10% 110%, rgba(var(--blue-rgb), .25) 0%, transparent 60%),
               var(--brand-navy);
  --grad-light: linear-gradient(180deg, #FFFFFF 0%, var(--brand-cloud) 100%);

  --shadow-sm: 0 8px 24px -16px rgba(var(--navy-rgb), .35);
  --shadow-md: 0 24px 48px -28px rgba(var(--navy-rgb), .40);
  --shadow-lg: 0 40px 80px -40px rgba(var(--navy-rgb), .45);
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Variables de Bootstrap */
  --bs-body-font-family: "Inter", "Aptos", Arial, "Liberation Sans", sans-serif;
  --bs-body-color: var(--brand-navy);
  --bs-body-bg: #FFFFFF;
  --bs-primary: #0755C9;
  --bs-primary-rgb: 7, 85, 201;
  --bs-link-color: #0755C9;
  --bs-link-color-rgb: 7, 85, 201;
  --bs-link-hover-color: #06225A;
  --bs-link-hover-color-rgb: 6, 34, 90;
  --bs-secondary-color: #666A73;
  --bs-border-color: rgba(6, 34, 90, .12);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-focus-ring-color: rgba(7, 85, 201, .3);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-body-font-family); color: var(--brand-navy); letter-spacing: -.02em;
}
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.section-dark :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: #fff; }
.text-secondary { color: var(--brand-slate) !important; }

/* Utilidades de color */
.text-accent { color: var(--brand-blue) !important; }
.text-navy { color: var(--brand-navy) !important; }
.text-cloud { color: var(--brand-cloud) !important; }
.text-on-dark { color: rgba(238, 244, 255, .82) !important; }
.bg-cloud { background-color: var(--brand-cloud) !important; }
.bg-navy { background-color: var(--brand-navy) !important; }

/* Botones */
.btn { font-weight: 600; letter-spacing: .005em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn-brand {
  --bs-btn-color: #fff; --bs-btn-bg: var(--brand-blue); --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-navy); --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-navy); --bs-btn-active-border-color: var(--brand-navy);
  --bs-btn-disabled-bg: var(--brand-blue); --bs-btn-disabled-border-color: var(--brand-blue);
  box-shadow: 0 12px 24px -12px rgba(var(--blue-rgb), .7);
}
.btn-outline-navy {
  --bs-btn-color: var(--brand-navy); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--brand-navy); --bs-btn-hover-bg: var(--brand-cloud); --bs-btn-hover-border-color: var(--brand-blue);
  --bs-btn-active-color: var(--brand-navy); --bs-btn-active-bg: var(--brand-cloud);
  background: #fff;
}
.btn-light-brand {
  --bs-btn-color: var(--brand-navy); --bs-btn-bg: #fff; --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--brand-navy); --bs-btn-hover-bg: var(--brand-cloud); --bs-btn-hover-border-color: var(--brand-cloud);
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.5);
}
.link-brand { color: var(--brand-blue); text-decoration: none; }
.link-brand:hover { color: var(--brand-navy); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(var(--blue-rgb), .55); outline-offset: 3px; }
.section-dark .btn:focus-visible, .section-dark a:focus-visible, .section-dark button:focus-visible { outline-color: var(--brand-cloud); }

/* Secciones */
.section { padding: clamp(72px, 9vw, 116px) 0; }
.section-dark { background: var(--grad-navy); position: relative; overflow: hidden; }
.section-soft { background: var(--brand-cloud); }
.section-head { max-width: 680px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-blue);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.section-dark .eyebrow, .eyebrow-light { color: var(--brand-cloud); }

/* Paneles */
.panel-dark {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(238,244,255,.16);
  border-radius: 1.25rem;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(238,244,255,.35); }

/* Aparición al hacer scroll (activada por reveal.js) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}