/* ============================================================
   Ingeniera del Cambio - Brand 2026 reskin
   Loaded AFTER cali.css / idc-pages.css. Overrides only.
   Source of truth: brand/PALETA Y TIPOGRAFIA.docx
   Palette: navy #1E2B3A / green #647765 / coral #D46A4F
            bg #FAF9F6 / arena #E9E3D9 / text #303338
   Type: Manrope (headings/UI) / Inter (body) / IBM Plex Serif (quotes)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;1,300;1,400&display=swap');

/* ---------- 1. Palette flip via the existing variables ---------- */
:root {
  --colour-one: #FAF9F6;                       /* was #1d1e23 dark bg */
  --colour-two: #E9E3D9;                       /* was #24262c */
  --colour-three: #ECEAE5;                     /* was #32353d */
  --colour-four: #1E2B3A;                      /* was black */
  --colour-four-transparent: rgba(30, 43, 58, .35);
  --colour-four-transparent-02: rgba(30, 43, 58, .08);
  --colour-one-transparent: rgba(250, 249, 246, .72);
  --dark-khaki: rgba(100, 119, 101, .25);
  --idc-pink: #D46A4F;
  --idc-blue: #1E2B3A;
  --idc-dark: #303338;
}

/* ---------- 2. Base ---------- */
html { background: #FAF9F6; }
body {
  background-color: #FAF9F6 !important;
  color: #303338 !important;
  font-family: 'Inter', sans-serif !important;
}

p, li, .paragraph, .text-size-regular {
  font-family: 'Inter', sans-serif !important;
  color: #303338;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.heading-largest-h1, .heading-medium-h2, .heading-small-h4 {
  font-family: 'Manrope', sans-serif !important;
  color: #1E2B3A !important;
  line-height: 1.1;
}

/* serif italic accents (old Fraunces / Butler flourishes) */
em, i, .text-italic, .serif, .fraunces {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-style: italic;
}

/* light-on-dark text utilities become dark-on-light */
.text-light { color: #303338 !important; }
.text-caps, .link-caps {
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: .12em;
  color: #1E2B3A;
}

/* eyebrow / secondary accent (was light blue #9db4d6) */
.text-accent-second { color: #647765 !important; }

/* generic link colour */
a { color: #1E2B3A; }
a:hover { color: #D46A4F; }

/* ---------- 3. Nav ---------- */
.nav-bar, .nav-colour, .nav-wrapper, .nav-menu {
  background-color: #FAF9F6 !important;
}
.navlink, .nav-menu a, .animated-link-wrapper-nav {
  font-family: 'Manrope', sans-serif !important;
  color: #1E2B3A !important;
  letter-spacing: .04em;
}
.navlink:hover, .nav-menu a:hover { color: #D46A4F !important; }
.navbar-announcement {
  background-color: #E9E3D9 !important;
  color: #1E2B3A !important;
}

/* ---------- 4. Buttons (cali.css uses !important, match it) ---------- */
.button-basic-one, .button-basic-two, .button-basic-three,
.button-basic-one-underlined, .idc-btn, .w-button {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  background: #1E2B3A !important;
  color: #FAF9F6 !important;
  border-radius: 4px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.button-basic-one:hover, .button-basic-two:hover, .button-basic-three:hover,
.button-basic-one-underlined:hover, .idc-btn:hover, .w-button:hover {
  background: #D46A4F !important;
  color: #FAF9F6 !important;
}
.button-basic-one-outlined {
  background: transparent !important;
  border: 1px solid #647765 !important;
  color: #647765 !important;
}
.button-basic-one-outlined:hover {
  background: #647765 !important;
  color: #FAF9F6 !important;
}

/* ---------- 4b. Old-blue accent rules neutralised ---------- */
.idc-kicker, .idc-hero .idc-kicker {
  color: #D46A4F !important;
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: .2em;
}
.text-accent-second, .text-accent-second-2,
.colour-one .text-accent-second, .colour-one .text-accent-second-2,
.colour-two .text-accent-second:not(.text-light),
.colour-three .text-accent-second:not(.text-light),
.content-wrapper-accent-13 .text-accent-second,
.content-wrapper-accent-14 .text-accent-second,
.text-accent-second.facts-01 {
  color: #647765 !important;
}
.footer-01 .text-accent-second, .footer-wrapper .text-accent-second {
  color: #9FB4A0 !important;
}
.text-caps { color: #1E2B3A !important; }
#Discovery-Call .heading-medium-h2 { color: #647765 !important; }
.animated-link-wrapper-nav.w--current .navlink { color: #D46A4F !important; }
.link-caps:hover { color: #D46A4F !important; }
.option ul li::before { background: #647765 !important; }

/* ---------- 5. Sections that used literal dark hexes ---------- */
[style*="#16171b"], [style*="#1d1e23"], [style*="#24262c"] {
  background-color: #FAF9F6 !important;
}
.colour-layer { background-color: rgba(30, 43, 58, .06) !important; }

/* ---------- 5b. Old dark sections become light, text flips dark ----------
   .colour-two had literal #24262c bg; .colour-one/.colour-three go light via
   the variables. Their old white-text rules must flip to dark.
   .colour-four + .content-wrapper-accent-14 + .information-highlight stay
   navy/dark cards, their white text is kept. */
.colour-two { background-color: #E9E3D9 !important; }
.colour-one :is(p, li),
.colour-three :is(p, li, span, blockquote):not([class*="button"]),
.colour-two :is(p, li, span, blockquote):not([class*="button"]) {
  color: #303338 !important;
}
.colour-one [class*="heading"],
.colour-two [class*="heading"], .colour-two .heading-smaller-h3,
.colour-three [class*="heading"] {
  color: #1E2B3A !important;
}
.colour-two .number-bullet { color: #1E2B3A !important; }

/* Discovery-Call: navy CTA band (brand navy, white text, soft green accent) */
#Discovery-Call { background: #1E2B3A !important; }
#Discovery-Call h3, #Discovery-Call p { color: #FAF9F6 !important; }
#Discovery-Call .heading-medium-h2 { color: #9FB4A0 !important; }

/* caps links: dark on light surfaces */
.link-caps { color: #1E2B3A !important; }
.footer-wrapper .link-caps { color: #FAF9F6 !important; }

/* ---------- 5c. High-specificity text flips ----------
   cali.css whites text via section-scoped !important rules that beat the
   earlier overrides. Doubled classes raise specificity above them. */
.colour-two.colour-two :is(h1, h2, h3, h4, h5, h6, p, li, span, blockquote, div):not([class*="button"]):not(.w-button):not(.text-accent-second) {
  color: #303338 !important;
}
.colour-two.colour-two :is(h1, h2, h3, h4, h5, h6, [class*="heading"]):not([class*="button"]) {
  color: #1E2B3A !important;
}
.colour-two.colour-two .text-caps { color: #647765 !important; }

/* old black sections (.colour-four) become navy brand bands, white text kept */
.colour-four.colour-four { background-color: #1E2B3A !important; }
.colour-four.colour-four :is(h1, h2, h3, h4, h5, h6, p, li, span, blockquote, div):not([class*="button"]):not(.w-button) {
  color: #FAF9F6 !important;
}
.colour-four.colour-four .text-caps,
.colour-four.colour-four .text-accent-second { color: #9FB4A0 !important; }
.colour-four.colour-four .button-basic-one, .colour-four.colour-four .w-button {
  background: #D46A4F !important;
  color: #FAF9F6 !important;
}

/* navy promo card (accent-14): keep its text warm white */
.accent-14 .text-light,
.content-wrapper-accent-14 :is(h1, h2, h3, h4, p, span):not([class*="button"]),
.content-02-accent-14 :is(h1, h2, h3, h4, p, span):not([class*="button"]):not(.label-light) {
  color: #FAF9F6 !important;
}
.label-new-course.label-light { color: #647765 !important; }

/* overlay layer: subtle navy tint (text in these sections is dark-on-light now) */
.information-highlight .colour-layer { background-color: rgba(30, 43, 58, .08) !important; }

/* ---------- 5d. Subpage navy bands keep light text ---------- */
.quote-band h2, .quote-band h3, .final-cta h2, .pfoot h3 { color: #FAF9F6 !important; }
.quote-band h2 em { color: #9FB4A0 !important; }

/* ---------- 5e. Ebook opt-in: full navy band (was black), white text ---------- */
.opt-in-01 { background-color: #1E2B3A !important; }
.opt-in-01 .layout-opt-in-01, .opt-in-01 .container-no-padding {
  background-color: transparent !important;
}
.colour-four.colour-four .text-caps { color: #9FB4A0 !important; }
.colour-four.colour-four .heading-medium-h2.text-accent-second { color: #D46A4F !important; }
.opt-in-01 a { color: #FAF9F6 !important; text-decoration: underline; }
.opt-in-01 input[type="text"], .opt-in-01 input[type="email"], .opt-in-01 .w-input {
  background-color: #FAF9F6 !important;
  color: #303338 !important;
  border: 1px solid rgba(30, 43, 58, .2);
}
/* kill the full-bleed backdrop photo (duplicated the ebook card, zoomed weird);
   the navy band carries the section instead */
.opt-in-01 img[sizes="100vw"] { display: none !important; }
.opt-in-01 .parallax-image-wrapper {
  background-image: none !important;
  background-color: transparent !important;
}

/* ---------- 5f. Footer stays light on navy (beats the colour-two hammer) ---------- */
.footer-wrapper :is(h1, h2, h3, h4, h5, h6, [class*="heading"]),
.footer-01 :is(h1, h2, h3, h4, h5, h6, [class*="heading"]) {
  color: #FAF9F6 !important;
}
.colour-two.colour-two .footer-01 .footer-wrapper :is(h1, h2, h3, h4, h5, h6, [class*="heading"], p, li, span, div, blockquote, a):not(.w-button):not([class*="button"]),
.colour-two.colour-two .footer-01 .footer-wrapper .text-copywrite,
.colour-two.colour-two .footer-01 .footer-wrapper .text-light,
.footer-01.footer-01 .footer-wrapper :is(h1, h2, h3, h4, h5, h6, [class*="heading"], p, li, span, div, blockquote, a):not(.w-button):not([class*="button"]) {
  color: #FAF9F6 !important;
}
.colour-two.colour-two .footer-01 .footer-wrapper a:not(.w-button):hover { color: #D46A4F !important; }
.colour-two.colour-two .footer-01 .footer-wrapper .text-accent-second { color: #9FB4A0 !important; }

/* copyright bar (navy) below the footer grid */
.colour-two.colour-two.colour-two .copyright-wrapper.copyright-wrapper :is(p, div, span, a),
.colour-two.colour-two .copyright-wrapper.copyright-wrapper .text-copywrite.text-copywrite {
  color: rgba(250, 249, 246, .78) !important;
}
.colour-two.colour-two.colour-two .copyright-wrapper.copyright-wrapper a:hover { color: #D46A4F !important; }

/* base background, out-specificity webflow body modifiers */
html, body, body.w-mod-js { background-color: #FAF9F6 !important; }

/* footer */
.footer-wrapper {
  background-color: #1E2B3A !important;
  color: #FAF9F6 !important;
}
.footer-wrapper p, .footer-wrapper a, .footer-wrapper .text-light,
.footer-wrapper .link-caps, .footer-wrapper h4 {
  color: #FAF9F6 !important;
}
.footer-wrapper a:hover { color: #D46A4F !important; }

/* ---------- 6. Imagery ---------- */
.image, .image-square, .image-vertical { background-color: #E9E3D9; }
img { filter: none !important; }
/* keep faces in frame when portrait photos get cover-cropped into squares */
img[src*="assets/2026/c-"] { object-position: 50% 24%; }
img[src*="assets/2026/w-"] { object-position: 50% 35%; }
/* same for inline-styled background photos (promo band etc.): bias to top */
[style*="assets/2026/c-"] { background-position: 50% 12% !important; }
[style*="assets/2026/w-"] { background-position: 50% 30% !important; }

/* ---------- 7. Hero: navy brand panel ---------- */
.idc-hero { background: #1E2B3A !important; }
.idc-hero-media {
  background: linear-gradient(165deg, #E9E3D9 0%, #ECEAE5 100%) !important;
}
.idc-hero-panel { color: #FAF9F6 !important; }
.idc-hero-panel h1, .idc-hero-panel .heading-largest-h1,
.idc-hero-panel h2, .idc-hero-panel h3 {
  color: #FAF9F6 !important;
}
.idc-hero-panel .text-accent-second { color: #D46A4F !important; }
.idc-hero-sub {
  color: rgba(250, 249, 246, .88) !important;
  font-family: 'Inter', sans-serif !important;
}
.idc-hero-panel .button-basic-one, .idc-hero-panel .w-button,
.idc-hero.idc-hero .idc-btn, .idc-hero-panel.idc-hero-panel .idc-btn {
  background: #D46A4F !important;
  color: #FAF9F6 !important;
}
.idc-hero-panel .button-basic-one:hover, .idc-hero-panel .w-button:hover,
.idc-hero.idc-hero .idc-btn:hover, .idc-hero-panel.idc-hero-panel .idc-btn:hover {
  background: #FAF9F6 !important;
  color: #1E2B3A !important;
}

/* ---------- 8. Header / footer logo sizing ---------- */
.brand-logo { height: auto !important; display: flex; align-items: center; }
.brand-logo img { height: 40px !important; width: auto !important; }

/* ---------- 9. Language modal, pill + cookie banner ---------- */
.idc-lang-overlay { background: rgba(30, 43, 58, .55) !important; }
.idc-lang-card {
  background: #FAF9F6 !important;
  color: #1E2B3A !important;
  box-shadow: 0 30px 80px rgba(30, 43, 58, .3) !important;
}
.idc-lang-card p { color: #303338 !important; }
.idc-lang-btn { font-family: 'Manrope', sans-serif !important; }
.idc-lang-es { background: #1E2B3A !important; color: #FAF9F6 !important; }
.idc-lang-es:hover { background: #D46A4F !important; }
.idc-lang-en { background: #E9E3D9 !important; color: #1E2B3A !important; }
.idc-lang-en:hover { background: #D46A4F !important; color: #FAF9F6 !important; }
.idc-lang-pill {
  background: #FAF9F6 !important;
  color: #1E2B3A !important;
  border: 1px solid rgba(30, 43, 58, .25) !important;
  font-family: 'Manrope', sans-serif !important;
}
.cookie-policy {
  background-color: #1E2B3A !important;
  color: #FAF9F6 !important;
}
.cookie-policy p, .cookie-policy a { color: #FAF9F6 !important; }