/* MYS Consultores — sitio corporativo. Paleta alineada al portal BI. */
:root {
  --azul: #305496;
  --azul-oscuro: #1f3a6d;
  --tinta: #1c2733;
  --gris: #f4f6f9;
  --borde: #d8dee8;
  --texto-suave: #55677e;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font: 16px/1.65 "Inter", -apple-system, "Segoe UI", Arial, sans-serif; color: var(--tinta); background: #fff; }
.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- barra superior ---------- */
.topbar { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--borde); z-index: 10; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 42px; height: 42px; border-radius: 10px; background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.brand-name { font-weight: 700; font-size: 15px; }
.brand-tag { font-size: 12px; color: var(--texto-suave); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.nav a:hover { color: var(--azul); }
.nav-cta { padding: 8px 18px; border-radius: 8px; background: var(--azul); color: #fff !important; font-weight: 600; }
.nav-cta:hover { background: var(--azul-oscuro); }

/* ---------- hero ---------- */
.hero { background: linear-gradient(160deg, var(--azul) 0%, var(--azul-oscuro) 100%); color: #fff; padding: 88px 0 96px; }
.hero h1 { font-size: 42px; line-height: 1.18; font-weight: 800; letter-spacing: -.01em; }
.hero-sub { margin-top: 18px; max-width: 640px; font-size: 18px; color: #dbe5f5; }
.hero-acciones { margin-top: 30px; display: flex; gap: 12px; }
.btn { display: inline-block; padding: 12px 26px; border-radius: 9px; background: #fff; color: var(--azul);
  font-weight: 700; text-decoration: none; font-size: 15px; }
.btn:hover { background: #e9eef8; }
.btn.sec { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.65); }
.btn.sec:hover { border-color: #fff; }

/* ---------- secciones ---------- */
.seccion { padding: 72px 0; }
.seccion.alterna { background: var(--gris); }
.seccion h2 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.seccion-sub { margin-top: 8px; color: var(--texto-suave); max-width: 640px; }
.grid { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 24px; }
.seccion.alterna .tarjeta { box-shadow: 0 1px 3px rgba(28,39,51,.05); }
.tarjeta .icono { font-size: 26px; }
.tarjeta h3 { margin: 12px 0 8px; font-size: 16.5px; }
.tarjeta p { font-size: 14.5px; color: var(--texto-suave); }

.nosotros p { margin-top: 16px; max-width: 760px; font-size: 16.5px; }

/* ---------- contacto ---------- */
.contacto-grid { margin-top: 26px; display: flex; gap: 16px; flex-wrap: wrap; }
.contacto-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde);
  border-radius: 10px; padding: 14px 20px; text-decoration: none; color: var(--tinta); font-weight: 600; }
.contacto-item:hover { border-color: var(--azul); }

/* ---------- pie ---------- */
.pie { background: var(--tinta); color: #b8c4d4; padding: 22px 0; font-size: 13.5px; }
.pie-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pie a { color: #dbe5f5; text-decoration: none; }
.pie a:hover { text-decoration: underline; }

/* ---------- móvil ---------- */
@media (max-width: 720px) {
  .hero h1 { font-size: 30px; }
  .hero { padding: 60px 0; }
  .nav { gap: 14px; }
  .nav a:not(.nav-cta) { display: none; }
  .pie-inner { flex-direction: column; }
}