/* ==========================================================================
   IMW Colombia - NewPage · Rediseño moderno (v2)
   Tipografía póster + alto contraste + hero cinematográfico + acento dorado
   ========================================================================== */

:root {
  --imw-green: #0c8a3d;
  --imw-green-bright: #23c661;
  --imw-green-deep: #064a24;
  --imw-ink: #071a10;          /* verde casi negro (fondos oscuros) */
  --imw-ink-2: #0c2a19;
  --imw-gold: #e7b23c;         /* acento premium */
  --imw-gold-soft: #f4d488;
  --imw-body: #33413b;
  --imw-muted: #6a7b72;
  --paper: #ffffff;
  --mist: #f2f7f3;             /* fondo suave */
  --line: #e3ece6;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 30px 60px -30px rgba(6, 40, 20, .45);
  --shadow-sm: 0 16px 34px -22px rgba(7, 26, 16, .40);
  --container: 1200px;
}

* { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--imw-body);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display {
  font-family: "Montserrat", "Inter", sans-serif;
  color: var(--imw-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

a { text-decoration: none; }
.container { max-width: var(--container); }

/* ---------- Utilidades ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  color: var(--imw-green); font-weight: 800; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--imw-gold); display: inline-block; }
.eyebrow.center::after { content: ""; width: 34px; height: 2px; background: var(--imw-gold); display: inline-block; }
.eyebrow.on-dark { color: var(--imw-gold-soft); }

.display-xl {
  font-family: "Montserrat", sans-serif; font-weight: 900;
  text-transform: uppercase; line-height: .96; letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
}
.section-title {
  font-weight: 800; line-height: 1.05;
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.lead-lg { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--imw-muted); line-height: 1.7; }
.text-gold { color: var(--imw-gold) !important; }
.text-brand { color: var(--imw-green) !important; }

/* ---------- Botones ---------- */
.btn-gold {
  background: linear-gradient(135deg, var(--imw-gold), #d99a24);
  color: #2a1d00; border: none; border-radius: 999px;
  padding: .95rem 1.9rem; font-weight: 800; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 18px 34px -16px rgba(215, 160, 40, .7);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gold:hover { transform: translateY(-3px); color: #2a1d00; filter: brightness(1.05); }
.btn-brand {
  background: var(--imw-green); color: #fff; border: none; border-radius: 999px;
  padding: .95rem 1.9rem; font-weight: 800; display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, filter .25s ease;
}
.btn-brand:hover { transform: translateY(-3px); color: #fff; filter: brightness(1.06); }
.btn-ghost {
  border: 1.5px solid rgba(255,255,255,.6); color: #fff; border-radius: 999px;
  padding: .9rem 1.6rem; font-weight: 700; display: inline-flex; align-items: center; gap: .7rem;
  transition: all .25s ease; background: transparent;
}
.btn-ghost:hover { background: #fff; color: var(--imw-ink); }

/* ---------- Navbar ---------- */
.navbar-imw { transition: all .3s ease; padding: 1.1rem 0; background: transparent; }
.navbar-imw.scrolled {
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -24px rgba(0,0,0,.7); padding: .55rem 0;
}
.navbar-imw .navbar-brand img { height: 44px; transition: filter .3s ease; }
/* Logo blanco arriba, verde al hacer scroll */
.navbar-imw .navbar-brand img { filter: invert(100%) sepia(94%) saturate(119%) hue-rotate(25deg) brightness(105%) contrast(102%); }
.navbar-imw.scrolled .navbar-brand img {
  filter: invert(38%) sepia(58%) saturate(700%) hue-rotate(96deg) brightness(85%) contrast(92%);
}
.navbar-imw .nav-link {
  color: rgba(255,255,255,.92); font-weight: 700; margin: 0 .5rem; font-size: .95rem;
  position: relative; transition: color .2s ease;
}
.navbar-imw .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -2px; height: 2px;
  background: var(--imw-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.navbar-imw .nav-link:hover::after, .navbar-imw .nav-link.active::after { transform: scaleX(1); }
.navbar-imw.scrolled .nav-link { color: var(--imw-ink); }
.navbar-imw .navbar-toggler { border: none; color: #fff; font-size: 1.6rem; }
.navbar-imw.scrolled .navbar-toggler { color: var(--imw-ink); }
.nav-talent {
  background: linear-gradient(135deg, var(--imw-gold), #d99a24); color: #2a1d00 !important;
  border-radius: 999px; padding: .55rem 1.25rem !important; font-weight: 800;
}
.nav-talent::after { display: none !important; }
.nav-talent:hover { filter: brightness(1.06); }
@media (max-width: 991.98px) {
  .navbar-imw .navbar-collapse {
    background: #fff; border-radius: var(--radius); margin-top: .8rem; padding: 1rem; box-shadow: var(--shadow-sm);
  }
  .navbar-imw .nav-link, .navbar-imw.scrolled .nav-link { color: var(--imw-ink); }
}

/* ---------- Hero cinematográfico ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; color: #fff;
  background:
    linear-gradient(103deg, rgba(4,20,11,.94) 0%, rgba(5,26,15,.72) 48%, rgba(5,26,15,.34) 100%),
    linear-gradient(180deg, rgba(4,18,10,.15) 0%, rgba(4,18,10,.92) 100%),
    url("../img/banner.jpg") center/cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 78% 8%, rgba(35,198,97,.28), transparent 62%);
}
.hero .container { position: relative; z-index: 2; padding-top: 6rem; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--imw-gold); display: inline; }
.hero .lead-lg { color: rgba(255,255,255,.86); max-width: 640px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22); padding: .5rem 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.hero-badge i { color: var(--imw-gold); }
.play-btn {
  width: 66px; height: 66px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 2px solid #fff; color: #fff; font-size: 1.5rem; position: relative; transition: all .3s ease;
}
.play-btn::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); animation: ring 2.2s infinite; }
.play-btn:hover { background: #fff; color: var(--imw-green); transform: scale(1.06); }
@keyframes ring { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.55);opacity:0} }
/* franja tricolor sutil al pie del hero */
.flag-strip { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; z-index: 3; display: flex; }
.flag-strip span { flex: 1; }
.flag-strip .y { background: var(--imw-gold); flex: 2; }
.flag-strip .b { background: #0b4ba8; }
.flag-strip .r { background: #c9283e; }

.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,.7); font-size: 1.6rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ---------- Secciones ---------- */
.section { padding: 7rem 0; }
.section.tight { padding: 5rem 0; }
.bg-mist { background: var(--mist); }
.section-lead { color: var(--imw-muted); max-width: 720px; margin: 1rem auto 0; }

/* ---------- Quiénes somos ---------- */
.sede-chip {
  display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--imw-green-deep);
  padding: .55rem 1.05rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.sede-chip i { color: var(--imw-gold); }
.media-img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.media-frame { position: relative; }
.media-frame .badge-float {
  position: absolute; left: -18px; bottom: 24px; background: var(--imw-ink); color: #fff;
  border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); max-width: 220px;
}
.media-frame .badge-float .n { font-family: "Montserrat"; font-weight: 900; font-size: 2rem; color: var(--imw-gold); line-height: 1; }
.media-frame .badge-float .t { font-size: .82rem; color: rgba(255,255,255,.8); }

/* ---------- Accordion ---------- */
.accordion-imw .accordion-item { border: 1px solid var(--line); border-radius: var(--radius) !important; margin-bottom: .85rem; overflow: hidden; box-shadow: var(--shadow-sm); background:#fff; }
.accordion-imw .accordion-button { font-family: "Montserrat"; font-weight: 800; color: var(--imw-ink); background: #fff; padding: 1.15rem 1.35rem; }
.accordion-imw .accordion-button:not(.collapsed) { color: var(--imw-green-deep); background: var(--mist); box-shadow: none; }
.accordion-imw .accordion-button:focus { box-shadow: none; border-color: var(--line); }
.accordion-imw .accordion-button::after { background-image: none; content: "\F282"; font-family: "bootstrap-icons"; transition: transform .25s ease; width: auto; height: auto; color: var(--imw-gold); }
.accordion-imw .accordion-body { color: var(--imw-body); line-height: 1.7; }

/* ---------- Servicios (tarjetas modernas con número) ---------- */
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.6rem 1.8rem 2rem; height: 100%;
  position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.svc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--imw-green), var(--imw-green-bright)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.svc-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }
.svc-num { font-family: "Montserrat"; font-weight: 900; font-size: 3rem; color: var(--mist); line-height: 1; position: absolute; top: 1.2rem; right: 1.4rem; }
.svc-ico { width: 76px; height: 76px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--mist); margin-bottom: 1.3rem; transition: background .3s ease; }
/* Íconos visibles en verde por defecto; al pasar el mouse: fondo verde + ícono blanco */
.svc-ico img { max-width: 46px; max-height: 46px; transition: filter .3s ease;
  filter: brightness(0) saturate(100%) invert(43%) sepia(71%) saturate(430%) hue-rotate(96deg) brightness(92%) contrast(88%); }
.svc-card:hover .svc-ico { background: linear-gradient(135deg, var(--imw-green), var(--imw-green-bright)); }
.svc-card:hover .svc-ico img { filter: brightness(0) invert(1); }
.svc-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.svc-card p { color: var(--imw-muted); margin-bottom: 0; }

/* ---------- Banda CTA / clientes ---------- */
.cta-band { position: relative; color: #fff; background: linear-gradient(120deg, var(--imw-ink) 0%, var(--imw-green-deep) 100%); overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 88% 10%, rgba(231,178,60,.22), transparent 60%); }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }

.client-logo { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); height: 120px; filter: grayscale(1); opacity: .72; transition: all .3s ease; }
.client-logo:hover { filter: grayscale(0); opacity: 1; box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.client-logo img { max-height: 66px; max-width: 100%; object-fit: contain; }

/* ---------- Contacto ---------- */
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; box-shadow: var(--shadow-sm); }
.contact-card .ci { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px; background: var(--mist); color: var(--imw-green); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.form-wrap { background: #fff; border-radius: var(--radius-lg); padding: 2.4rem; box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-ctrl { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; background: var(--mist); width: 100%; transition: all .2s ease; }
.form-ctrl:focus { border-color: var(--imw-green-bright); box-shadow: 0 0 0 .2rem rgba(35,198,97,.15); background: #fff; outline: none; }

/* ---------- Footer ---------- */
.footer { background: var(--imw-ink); color: rgba(255,255,255,.72); padding: 4.5rem 0 1.6rem; }
.footer h5 { color: #fff; font-size: 1rem; }
.footer a { color: rgba(255,255,255,.72); transition: color .2s ease; }
.footer a:hover { color: var(--imw-gold); }
.footer .brand img { height: 52px; filter: invert(100%) sepia(94%) saturate(119%) hue-rotate(25deg) brightness(105%) contrast(102%); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.3rem; font-size: .88rem; }

/* ---------- Scroll top ---------- */
.scroll-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 14px; background: var(--imw-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 999; box-shadow: var(--shadow); }
.scroll-top.show { opacity: 1; visibility: visible; }
.scroll-top:hover { color: #fff; background: var(--imw-green-deep); }

@media (max-width: 991.98px) {
  .section { padding: 4.5rem 0; }
  .cta-band { text-align: center; }
  .media-frame .badge-float { left: 12px; }
}