:root{
  --olive:#2f4a3a;
  --ink:#0f172a;
  --muted:#475569;
  --paper:#ffffff;
  --soft: rgba(15,23,42,.05);

  --suite:#2f4a3a;
  --core:#2f4a3a;
  --diag:#0b5c7a;
  --gest:#6d28d9;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.container{ width:min(1120px, 92vw); margin:0 auto; }
.muted{ color: var(--muted); line-height:1.6; }

/* =========================
   HEADER (MEJORADO)
   ========================= */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 12px 0;
}

.brand{ display:flex; align-items:center; text-decoration:none; }
.brand__logo{ height: 42px; width:auto; display:block; }

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.035);
  border: 1px solid rgba(15,23,42,.06);
}

.nav__link{
  text-decoration:none;
  color: rgba(71,85,105,.95);
  font-weight: 900;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.nav__link:hover{
  background: rgba(15,23,42,.06);
  color: var(--ink);
  transform: translateY(-1px);
}

.navActions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.btnHeader{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.12);
}

.btnHeader--ghost{
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.86);
}

.btnHeader--ghost:hover{ background:#fff; }

.btnHeader--solid{
  background: var(--olive);
  color:#fff;
  border-color: transparent;
}

.btnHeader--solid:hover{
  filter: brightness(.98);
}

/* BUTTONS (se quedan como estaban) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.14);
  text-decoration:none;
  font-weight:900;
  font-size: 14px;
}
.btn-primary{ background: var(--olive); color:#fff; border-color: transparent; }
.btn-ghost{ background: rgba(255,255,255,.30); color:#fff; border-color: rgba(255,255,255,.48); }
.btn-ghost:hover{ background: rgba(255,255,255,.38); }

/* =========================
   HERO (MENOS SOBREEXPOSICIÓN)
   ========================= */
.hero{ height: 100vh; }
.hero__carousel{
  position:relative;
  height: 100vh;
  width: 100%;
  overflow:hidden;
}

.hero__slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transition: opacity .65s ease;

  /* ANTES: saturate(1.12) contrast(1.08) brightness(1.03) */
  /* AHORA: bajamos brillo y saturación, subimos contraste leve para “crisp” sin lavar */
filter: saturate(1.04) contrast(1.10) brightness(.95);
}
.hero__slide.is-active{ opacity:1; }

/* overlay limpio (lectura) — un poco menos “blanco” para no lavar */
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.56) 42%,
      rgba(255,255,255,.18) 66%,
      rgba(255,255,255,0) 100%);
}

.hero__grid{
  position:relative;
  height: 100%;
  padding-top: 94px; /* header */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 14px;
}

/* LOGO grande + tag */
.hero__brandBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 2px;
}

.hero__packLogo{
  height: 84px;
  width:auto;
  display:block;
  filter: drop-shadow(0 14px 28px rgba(15,23,42,.14));
}

.hero__tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(15,23,42,.86);
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.72);
}

.hero__headline{
  margin:0;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 820px;
  color: rgba(15,23,42,.92);
}

.hero__lead{
  margin:0;
  font-size: clamp(14.5px, 1.55vw, 18px);
  line-height: 1.55;
  color: rgba(15,23,42,.78);
  max-width: 820px;
}

.hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  max-width: 900px;
  margin-top: 4px;
}
.chip{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.82);
}

.hero__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }

.hero__slide[data-accent="suite"] .btn-primary{ background: var(--suite); }
.hero__slide[data-accent="core"]  .btn-primary{ background: var(--core); }
.hero__slide[data-accent="diag"]  .btn-primary{ background: var(--diag); }
.hero__slide[data-accent="gest"]  .btn-primary{ background: var(--gest); }

/* nav arrows */
.hero__nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.72);
  cursor:pointer;
  z-index:10;
  font-size: 26px;
  display:grid;
  place-items:center;
}
.hero__nav--prev{ left: 18px; }
.hero__nav--next{ right: 18px; }

/* dots */
.hero__dots{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  gap: 8px;
  z-index:11;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 8px 10px;
}
.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.25);
  background: rgba(255,255,255,.95);
  cursor:pointer;
}
.dot.is-active{ background: var(--olive); border-color: transparent; }

/* scroll hint */
.scrollHint{
  position:absolute;
  left:50%;
  bottom: 70px;
  transform: translateX(-50%);
  width: 34px; height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.56);
  display:grid;
  place-items:center;
  z-index:12;
  text-decoration:none;
}
.scrollHint span{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  animation: bounce 1.2s infinite;
}
@keyframes bounce{
  0%,100%{ transform: translateY(-7px); opacity:.5;}
  50%{ transform: translateY(7px); opacity:1;}
}

/* SECTIONS */
.section{ padding: 64px 0; }
.section--soft{
  background: var(--soft);
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.card{
  display:block;
  text-decoration:none;
  color: var(--ink);
  background:#fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 14px 38px rgba(15,23,42,.10); }
.card__tag{
  display:inline-block;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  color: var(--olive);
  background: rgba(47,74,58,.10);
  border: 1px solid rgba(47,74,58,.16);
}
.card--core{ border-top: 4px solid rgba(47,74,58,.85); }
.card--diag{ border-top: 4px solid rgba(11,92,122,.70); }
.card--gest{ border-top: 4px solid rgba(109,40,217,.55); }
.card h3{ margin: 0 0 8px; }
.card p{ margin:0; color: var(--muted); }

/* FOOTER */
.footer{ border-top: 1px solid rgba(15,23,42,.10); padding: 18px 0; }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .navActions{ gap: 8px; }
  .cards{ grid-template-columns: 1fr; }

  /* overlay en móvil, igual más suave */
  .hero__overlay{
    background: linear-gradient(180deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.62) 44%,
      rgba(255,255,255,.18) 70%,
      rgba(255,255,255,0) 100%);
  }

  .hero__grid{
    padding-top: 86px;
    justify-content:flex-end;
    padding-bottom: 110px;
  }

  .hero__packLogo{ height: 74px; }
}

/* móvil pequeño: esconder acciones si hace falta */
@media (max-width: 520px){
  .btnHeader--ghost{ display:none; }
}

/* =========================
   HEADER ULTRA MODERNO
   ========================= */
.topbar{
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border: none;
  pointer-events: none; /* permite que solo el contenedor reciba clicks */
}

.topbar__inner{
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;

  padding: 10px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 40px rgba(15,23,42,.10);
}

.brand{ display:flex; align-items:center; text-decoration:none; }
.brand__logo{ height: 40px; width:auto; display:block; }

.nav--center{
  display:flex;
  justify-content: center;
  align-items:center;
  gap: 6px;
}

.nav__link{
  text-decoration:none;
  color: rgba(15,23,42,.78);
  font-weight: 900;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav__link:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.92);
  transform: translateY(-1px);
}

.topbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.btnHeader{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.12);
  white-space: nowrap;
}

.btnHeader--ghost{
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.82);
}
.btnHeader--ghost:hover{ background: #fff; }

.btnHeader--solid{
  background: var(--olive);
  color: #fff;
  border-color: transparent;
}
.btnHeader--solid:hover{ filter: brightness(.98); }

/* Toggle móvil */
.navToggle{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.90);
  cursor: pointer;
  padding: 10px;
}
.navToggle span{
  display:block;
  height: 2px;
  width: 100%;
  background: rgba(15,23,42,.70);
  border-radius: 99px;
}
.navToggle span + span{ margin-top: 6px; }

/* Menú móvil desplegable */
.mobileNav{
  pointer-events: auto;
  max-height: 0;
  overflow: hidden;
  margin-top: 10px;
  transition: max-height .25s ease;
}
.mobileNav.is-open{ max-height: 420px; }

.mobileNav__inner{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 14px 42px rgba(15,23,42,.10);
  padding: 10px;
}

.mobileNav__link{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  color: rgba(15,23,42,.84);
}
.mobileNav__link:hover{ background: rgba(15,23,42,.06); }

.mobileNav__link--cta{
  background: rgba(47,74,58,.10);
  border: 1px solid rgba(47,74,58,.16);
  color: var(--olive);
}

/* Para que el hero no quede tapado por header flotante */
.hero__grid{ padding-top: 108px; }

/* No scroll cuando menú móvil está abierto */
.no-scroll{ overflow: hidden; }

/* Responsive */
@media (max-width: 980px){
  .nav--center{ display:none; }
  .navToggle{ display:inline-grid; place-items:center; }
  .btnHeader--ghost{ display:none; }
  .topbar{ top: 8px; }
  .hero__grid{ padding-top: 104px; }
}

/* ===== HEADER TRANSPARENTE SOBRE HERO + GLASS EN SCROLL ===== */

.topbar{
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border: none;
  pointer-events: none;
}

.topbar__inner{
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;

  padding: 10px 14px;
  border-radius: 18px;

  /* por defecto: TRANSPARENTE */
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;

  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Links sobre imagen */
.nav__link{
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.nav__link:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}

.btnHeader{
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.btnHeader--ghost{
  background: rgba(255,255,255,.12);
  color: #fff;
}
.btnHeader--ghost:hover{ background: rgba(255,255,255,.18); }

.btnHeader--solid{
  background: var(--olive);
  color: #fff;
  border-color: transparent;
}

/* Botón hamburguesa sobre imagen */
.navToggle{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
}
.navToggle span{ background: rgba(255,255,255,.92); }

/* Estado GLASS cuando se hace scroll */
.topbar.is-glass .topbar__inner{
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 12px 40px rgba(15,23,42,.12);
}

.topbar.is-glass .nav__link{
  color: rgba(15,23,42,.78);
  text-shadow: none;
}
.topbar.is-glass .nav__link:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.92);
}

.topbar.is-glass .btnHeader{
  border-color: rgba(15,23,42,.12);
  box-shadow: none;
}
.topbar.is-glass .btnHeader--ghost{
  background: rgba(255,255,255,.90);
  color: rgba(15,23,42,.82);
}
.topbar.is-glass .navToggle{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
}
.topbar.is-glass .navToggle span{ background: rgba(15,23,42,.70); }

/* Menú móvil (se mantiene glass siempre) */
.mobileNav__inner{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 14px 42px rgba(15,23,42,.10);
}

/* Ajuste: deja respirar el hero */
.hero__grid{ padding-top: 110px; }

@media (max-width: 980px){
  .btnHeader--ghost{ display:none; }
  .nav--center{ display:none; }
  .navToggle{ display:inline-grid; place-items:center; }
}

/* ===== HEADER: TEXTO OSCURO AÚN TRANSPARENTE ===== */

/* Links oscuros sobre hero */
.nav__link{
  color: rgba(15,23,42,.86);
  text-shadow: none;
}
.nav__link:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.96);
}

/* Botones del header en estilo claro */
.btnHeader{
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.btnHeader--ghost{
  background: rgba(255,255,255,.78);
  color: rgba(15,23,42,.86);
}
.btnHeader--ghost:hover{ background: rgba(255,255,255,.92); }

/* El botón sólido queda igual (verde militar) */
.btnHeader--solid{
  background: var(--olive);
  color:#fff;
  border-color: transparent;
}

/* Hamburguesa oscura */
.navToggle{
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.78);
}
.navToggle span{ background: rgba(15,23,42,.72); }

/* Cuando está en glass, igual se mantiene coherente (oscuro) */
.topbar.is-glass .nav__link{ color: rgba(15,23,42,.78); }
.topbar.is-glass .nav__link:hover{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.92); }