/* =====================================================================
   MejorCDT Brand Layer for luable.app
   Aligns the site to the MejorCDT Brand Manual 2025 (tokens + foundations)
   Loaded AFTER style.css so it wins the cascade.
   ===================================================================== */

:root {
  /* --- Color / Branding: Primario --- */
  --mcdt-blue: #111BFF;        /* Azul Seguridad  (Reflex Blue) */
  --mcdt-cyan: #00B5E2;        /* Cyan Conveniencia */
  --mcdt-green: #44D62C;       /* Verde Rentabilidad */

  /* --- Seguridad (blue) scale --- */
  --mcdt-blue-50: #E7E8FF;
  --mcdt-blue-100: #B5B8FF;
  --mcdt-blue-200: #9296FF;    /* lavanda / accent */
  --mcdt-blue-700: #0C13B5;
  --mcdt-blue-800: #090F8C;
  --mcdt-blue-900: #070B6B;

  /* --- Rentabilidad (green) scale --- */
  --mcdt-green-50: #EFF9EA;
  --mcdt-green-100: #CCEDBE;
  --mcdt-green-700: #408D20;

  /* --- Conveniencia (cyan) scale --- */
  --mcdt-cyan-50: #E6F8FC;
  --mcdt-cyan-100: #B0EAF5;
  --mcdt-cyan-700: #0081A0;

  /* --- Colores: Apoyo (neutrals) --- */
  --mcdt-white: #FFFFFF;
  --mcdt-off-white: #F9F9F9;
  --mcdt-gray: #9CA3AF;
  --mcdt-ink: #101010;

  /* --- Bootstrap bridge --- */
  --bs-primary: var(--mcdt-blue);
  --bs-primary-rgb: 17, 27, 255;

  /* --- Radii (pill buttons, rounded cards per manual) --- */
  --mcdt-radius-pill: 999px;
  --mcdt-radius-card: 20px;
  --mcdt-radius-sm: 12px;

  /* --- Font --- */
  --mcdt-font: "Plus Jakarta Sans", "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =====================================================================
   Typography — Plus Jakarta Sans (Tipografía Primaria)
   Titles: Bold. Body: Regular. Emphasis: SemiBold. Left-aligned.
   ===================================================================== */
body,
.form-control,
.btn,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, li, span, label, input, textarea, button {
  font-family: var(--mcdt-font);
}

body {
  font-weight: 400;
  color: #2b2f38;
  letter-spacing: 0;            /* Kerning 0% per manual */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading, .title {
  font-weight: 700;             /* Titles: Bold */
  color: var(--mcdt-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.heading {
  font-weight: 800;
  line-height: 1.15;
}

/* running text a touch more airy (Line height 150–160% per manual) */
.para-desc, p {
  line-height: 1.6;
}

.text-muted {
  color: #5a6270 !important;
}

/* =====================================================================
   Buttons — pill shaped (Contraste Externo / "Abre tu CDT")
   ===================================================================== */
.btn {
  border-radius: var(--mcdt-radius-pill);
  font-weight: 600;
  letter-spacing: 0;
  padding: 11px 26px;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn.btn-lg { padding: 14px 34px; }
.btn.btn-sm { padding: 7px 18px; }

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background-color: var(--mcdt-blue) !important;
  border-color: var(--mcdt-blue) !important;
  box-shadow: 0 6px 18px -4px rgba(17, 27, 255, .45);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--mcdt-blue-700) !important;
  border-color: var(--mcdt-blue-700) !important;
}

/* Secondary CTA = white pill with blue label (per Contraste Externo) */
.btn-light {
  background-color: var(--mcdt-white) !important;
  border-color: var(--mcdt-white) !important;
  color: var(--mcdt-blue) !important;
  font-weight: 700;
}

/* Success maps to Verde Rentabilidad */
.btn-success {
  background-color: var(--mcdt-green) !important;
  border-color: var(--mcdt-green) !important;
  color: var(--mcdt-ink) !important;
  font-weight: 700;
  box-shadow: 0 6px 18px -4px rgba(68, 214, 44, .45);
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--mcdt-green-700) !important;
  border-color: var(--mcdt-green-700) !important;
  color: #fff !important;
}

.btn-soft-primary {
  background-color: var(--mcdt-blue-50) !important;
  border-color: var(--mcdt-blue-50) !important;
  color: var(--mcdt-blue) !important;
}
.btn-soft-primary:hover {
  background-color: var(--mcdt-blue) !important;
  color: #fff !important;
}

/* =====================================================================
   Cards, shadows, surfaces (Colores: Apoyo)
   ===================================================================== */
.shadow,
.rounded-md,
.card,
.features,
.form-icon,
.subcribe-form {
  border-radius: var(--mcdt-radius-card) !important;
}

.shadow {
  box-shadow: 0 10px 30px -12px rgba(16, 16, 16, .12),
              0 4px 10px -6px rgba(17, 27, 255, .06) !important;
}

/* Feature icon chips → soft blue tile */
.rounded-md.shadow {
  background: var(--mcdt-blue-50);
  color: var(--mcdt-blue) !important;
}

section { background-color: var(--mcdt-white); }

/* =====================================================================
   Navbar
   ===================================================================== */
#topnav {
  background-color: transparent;
}
#topnav.nav-sticky {
  background: var(--mcdt-white);
  box-shadow: 0 6px 24px -14px rgba(16,16,16,.22);
}
#topnav .logo img { height: 26px; }

/* =====================================================================
   Hero — on-brand blue gradient (manual leans on solid vivid blue)
   ===================================================================== */
.bg-home {
  background: radial-gradient(120% 120% at 15% 10%, #2A34FF 0%, var(--mcdt-blue) 42%, var(--mcdt-blue-700) 100%) !important;
  position: relative;
  overflow: hidden;
  min-height: 78vh;
}
/* subtle brand orbs */
.bg-home:before,
.bg-home:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .5;
  pointer-events: none;
}
.bg-home:before {
  width: 420px; height: 420px;
  right: -80px; top: -120px;
  background: radial-gradient(circle, rgba(0,181,226,.55), transparent 65%);
}
.bg-home:after {
  width: 380px; height: 380px;
  left: -90px; bottom: -140px;
  background: radial-gradient(circle, rgba(68,214,44,.40), transparent 65%);
}
.bg-home { min-height: 64vh; }
.bg-home .heading {
  font-size: calc(2.2rem + 1.8vw);
  color: #fff !important;
}
.bg-home .para-desc { color: rgba(255,255,255,.86) !important; }

/* Hero CTA → white pill with blue label (Contraste Externo) */
.bg-home .btn-primary {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--mcdt-blue) !important;
  font-weight: 700;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.30);
}
.bg-home .btn-primary:hover {
  background-color: var(--mcdt-blue-50) !important;
  color: var(--mcdt-blue-700) !important;
}

/* Hamburger contrast over the blue hero vs. white sticky bar */
#topnav .navbar-toggle .lines span { background-color: #fff; }
#topnav.nav-sticky .navbar-toggle .lines span { background-color: var(--mcdt-ink); }

/* =====================================================================
   CTA band overlay → brand blue
   ===================================================================== */
.bg-overlay.bg-primary {
  background: var(--mcdt-blue) !important;
}

/* =====================================================================
   Forms
   ===================================================================== */
.form-control {
  border-radius: var(--mcdt-radius-sm);
  border-color: #e3e5ef;
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.form-control:focus {
  border-color: var(--mcdt-blue) !important;
  box-shadow: 0 0 0 3px rgba(17,27,255,.14);
}

/* =====================================================================
   Footer + misc accents
   ===================================================================== */
.footer { background: var(--mcdt-ink); }
.footer .foot-social-icon a:hover { background: var(--mcdt-blue) !important; }
.back-to-top { border-radius: var(--mcdt-radius-sm); }

::selection { background: rgba(17,27,255,.9); color: #fff; }

/* Partner logos: keep tidy */
.avatar.avatar-ex-sm { object-fit: contain; }

/* =====================================================================
   luable logo — bird symbol + wordmark, recolored to brand
   (keeps the luable identity; uses Azul Seguridad + Plus Jakarta Sans)
   ===================================================================== */
.logo-mcdt {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.logo-mcdt .logo-bird-wrap { display: inline-flex; }
.logo-mcdt .logo-bird {
  width: 30px;
  height: 30px;
  display: block;
}
.logo-mcdt .logo-word {
  font-family: var(--mcdt-font);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Over the blue hero (navbar transparent): white lockup */
#topnav .logo-mcdt .logo-bird { color: #FFFFFF; }
#topnav .logo-mcdt .logo-word { color: #FFFFFF; }

/* Sticky navbar (white bg): brand-blue bird, ink wordmark */
#topnav.nav-sticky .logo-mcdt .logo-bird { color: var(--mcdt-blue); }
#topnav.nav-sticky .logo-mcdt .logo-word { color: var(--mcdt-ink); }

/* Footer (dark bg): brand-blue bird, white wordmark */
.logo-mcdt.logo-on-dark .logo-bird { color: var(--mcdt-blue-200); }
.logo-mcdt.logo-on-dark .logo-word { color: #FFFFFF; }