/* Master Trd Lmt — Theme: Dark Blue + Brand Green */
:root {
  --brand: #00be63;
  --blue-50: #ecf4fa;
  --blue-100: #d7e6f1;
  --blue-200: #b9d3e6;
  --blue-400: #4a83b7;
  --blue-600: #1f5f8a;
  --blue-700: #174b6d;
  --blue-800: #103a55;
  --blue-900: #0b2b3e;
  --text-dark: #0e2433;
  --text-light: #eaf2f7;
  --body-bg: #f3f7fa;
  --section-bg: #ffffff;
  --contrast-bg: #e8f0f6;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  --transition: all 0.45s ease;
  /*--nav-h: 75px;*/
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --base-font-size: 16px; /* base legible */

  /* ===========================
   ICONOS EN VERDE DE MARCA
   =========================== */

  /* Utilidad base: pinta íconos (FA, BI, SVG) con el verde de marca */
  .icon-brand,
  .icon-brand i,
  .icon-brand svg {
    color: var(--brand) !important;
    fill: var(--brand) !important;
    transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease;
  }

  /* Tamaños útiles (aplícalos según necesites) */
  .icon-18 {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
  .icon-20 {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
  .icon-24 {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
  .icon-28 {
    font-size: 28px;
    width: 28px;
    height: 28px;
  }
  .icon-32 {
    font-size: 32px;
    width: 32px;
    height: 32px;
  }

  /* Circulares (para cabeceras de cards, steps, etc.) */
  .icon-circle-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--brand);
    box-shadow: 0 8px 22px rgba(0, 190, 99, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .icon-circle-brand i,
  .icon-circle-brand svg {
    color: var(--brand);
    fill: var(--brand);
  }

  /* En dark mode, un poco más de mezcla para no “apagar” el icono */
  html[data-theme="dark"] .icon-circle-brand {
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    box-shadow: 0 8px 28px rgba(0, 190, 99, 0.26);
  }

  /* Efecto hover sutil en iconos */
  .icon-brand:hover,
  .icon-circle-brand:hover {
    transform: translateY(-1px) scale(1.02);
    filter: drop-shadow(0 6px 16px rgba(0, 190, 99, 0.2));
  }

  /* ===== Overrides para que TODO lo “visual” de iconos quede en verde ===== */

  /* 1) Ícono superior dentro de cards (sustituye el azul que tenías) */
  .mtl-card .card-icon,
  .card-step .icon-step {
    background: color-mix(in srgb, var(--brand) 16%, transparent) !important;
    color: var(--brand) !important;
    box-shadow: 0 6px 18px rgba(0, 190, 99, 0.22) !important;
  }
  html[data-theme="dark"] .mtl-card .card-icon,
  html[data-theme="dark"] .card-step .icon-step {
    background: color-mix(in srgb, var(--brand) 24%, transparent) !important;
    box-shadow: 0 8px 22px rgba(0, 190, 99, 0.28) !important;
  }

  /* 2) Íconos en listas check (ya usabas el brand; reforzamos contraste) */
  .checklist li::before {
    color: var(--brand) !important;
  }

  /* 3) Íconos dentro del navbar: sutil acento al pasar el mouse */
  .mtl-nav .nav-link i,
  .mtl-nav .navbar-brand i {
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .mtl-nav .nav-link:hover i {
    color: var(--brand) !important;
    transform: translateY(-1px);
  }

  /* 4) Alternativas por si usas Bootstrap Icons (bi) o FontAwesome (fa) */
  i[class^="bi-"].icon-brand,
  i[class*=" bi-"].icon-brand,
  i[class^="fa-"].icon-brand,
  i[class*=" fa-"].icon-brand {
    color: var(--brand) !important;
  }

  /* 5) SVG inline con la utilidad */
  svg.icon-brand path,
  svg.icon-brand circle,
  svg.icon-brand rect,
  svg.icon-brand polygon {
    fill: var(--brand) !important;
  }
}

html[data-theme="dark"] {
  --body-bg: #0b1d29;
  --section-bg: #0e2a3d;
  --contrast-bg: #103247;
  --card-bg: #102b3d;
  --card-border: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --text-dark: var(--text-light);
}

* {
  scroll-behavior: smooth;
}

body {
  background: var(--body-bg);
  color: var(--text-dark);
  transition: var(--transition);
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--base-font-size);
  line-height: 1.6;
  /* letter-spacing: 0.01em; */
}

/* spacing for fixed nav */
body {
  padding-top: calc(var(--nav-h) + 14px);
}

section[id] {
  scroll-margin-top: calc(var(--nav-h) + 20px);
  margin-top: calc(var(--nav-h) + 12px);
}

#home {
  margin-top: 0 !important;
}

/* progress bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-600), var(--brand));
  z-index: 1200;
  transition: width 0.1s linear;
}

/* NAVBAR */
.mtl-nav {
  background: transparent;
  transition: var(--transition);
}

.mtl-nav.scrolled {
  background: var(--blue-900);
  box-shadow: 0 8px 28px rgba(11, 43, 62, 0.28);
  padding: 0.4rem 0 !important;
}

.navbar .navbar-toggler {
  border: 0;
}

.navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* contrast both modes */
.navbar .nav-link {
  color: #fff;
  opacity: 0.92;
  transition: color 0.2s, opacity 0.2s;
}

.navbar .nav-link:hover {
  opacity: 1;
  color: var(--brand);
}

.navbar .navbar-brand span {
  color: #fff;
}

/* Buttons in nav */
.nav-cta .btn {
  white-space: nowrap;
}

.mtl-nav .btn-outline-primary {
  border-color: var(--brand);
  color: var(--brand);
}

.mtl-nav .btn-outline-primary:hover {
  background: var(--brand);
  color: #fff;
}

.mtl-nav .btn-success {
  background: var(--brand);
  border-color: var(--brand);
}

.mtl-nav .btn-success:hover {
  filter: brightness(0.95);
}

@media (max-width: 991.98px) {
  #navCollapse .nav-item .btn {
    border-radius: 10px;
  }
}

/* THEME FLOAT */
.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1060;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-900);
  color: #fff;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

html[data-theme="dark"] .theme-toggle {
  background: var(--blue-700);
}

/* ===== HERO con fondos de sección (background-image) ===== */

.hero-section {
  position: relative;
}
.hero-slide {
  min-height: 88vh; /* altura visual */
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate; /* para el overlay */
  color: #fff; /* textos en blanco sobre overlay */
}

/* Overlay para contraste de textos */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 39, 58, 0.55),
    rgba(2, 39, 58, 0.35)
  );
  transition: var(--transition);
}
html[data-theme="dark"] .hero-slide::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
}

/* Asegura que el contenido queda por encima del overlay */
.hero-slide > .container {
  position: relative;
  z-index: 1;
}

/* Tipografía del hero (mejor contraste) */
.hero-slide h1,
.hero-slide h2,
.hero-slide p,
.hero-slide .btn {
  color: #fff;
}

/* Responsivo: más compacto en móviles */
@media (max-width: 991.98px) {
  .hero-slide {
    min-height: auto;
    padding: 120px 0 40px;
  }
}

/* ====== BACKGROUNDS por slide (fallback + image-set) ====== */

/* Fallback JPG/PNG primero (por compatibilidad) */
.bg-hero-1 {
  background-image: url("../img/hero-1.jpg");
}
.bg-hero-2 {
  background-image: url("../img/hero-2.jpg");
}
.bg-hero-3 {
  background-image: url("../img/hero-3.jpg");
}

/* Si el navegador soporta image-set, usará AVIF/WebP automáticamente */
.bg-hero-1 {
  background-image: image-set(
    url("../img/optimized/hero-1.avif") type("image/avif") 1x,
    url("../img/optimized/hero-1.webp") type("image/webp") 1x,
    url("../img/hero-1.jpg") type("image/jpeg") 1x
  );
}
.bg-hero-2 {
  background-image: image-set(
    url("../img/optimized/hero-2.avif") type("image/avif") 1x,
    url("../img/optimized/hero-2.webp") type("image/webp") 1x,
    url("../img/hero-2.jpg") type("image/jpeg") 1x
  );
}
.bg-hero-3 {
  background-image: image-set(
    url("../img/optimized/hero-3.avif") type("image/avif") 1x,
    url("../img/optimized/hero-3.webp") type("image/webp") 1x,
    url("../img/hero-3.jpg") type("image/jpeg") 1x
  );
}

/* Compatibilidad -webkit-image-set (opcional) */
.bg-hero-1 {
  background-image: -webkit-image-set(
    url("../img/optimized/hero-1.avif") type("image/avif") 1x,
    url("../img/optimized/hero-1.webp") type("image/webp") 1x,
    url("../img/hero-1.jpg") type("image/jpeg") 1x
  );
}
.bg-hero-2 {
  background-image: -webkit-image-set(
    url("../img/optimized/hero-2.avif") type("image/avif") 1x,
    url("../img/optimized/hero-2.webp") type("image/webp") 1x,
    url("../img/hero-2.jpg") type("image/jpeg") 1x
  );
}
.bg-hero-3 {
  background-image: -webkit-image-set(
    url("../img/optimized/hero-3.avif") type("image/avif") 1x,
    url("../img/optimized/hero-3.webp") type("image/webp") 1x,
    url("../img/hero-3.jpg") type("image/jpeg") 1x
  );
}

/* =========================
   HERO: Botones más pequeños en móvil
   ========================= */

/* XS: <576px  — botones más compactos */
@media (max-width: 575.98px) {
  .hero-section .btn.btn-lg {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.6rem;
    line-height: 1.2;
    min-height: 42px; /* mantiene área táctil razonable */
  }
  .hero-section .btn.btn-lg i {
    font-size: 0.95em;
    margin-right: 0.45rem;
  }

  /* Reduce el gap horizontal en grupos de botones */
  .hero-section .d-flex.gap-2 {
    gap: 0.5rem !important;
  }

  /* OPCIÓN A (recomendada en móviles muy pequeños): apilar botones */
  .hero-section .cta-stack-xs {
    display: grid !important;
    grid-auto-flow: row;
    gap: 0.55rem !important;
  }
  .hero-section .cta-stack-xs .btn {
    width: 100%;
  }
}

/* SM: 576–767px — un poco más grandes que XS, pero más chicos que desktop */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-section .btn.btn-lg {
    font-size: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 0.65rem;
    line-height: 1.25;
    min-height: 44px;
  }
  .hero-section .d-flex.gap-2 {
    gap: 0.6rem !important;
  }
}

/* Ajuste de indicadores para que no “choquen” con CTAs en pantallas chicas */
@media (max-width: 575.98px) {
  #heroCarousel .carousel-indicators {
    bottom: 0.75rem;
  }
}

/* Sections */
.section-padding {
  padding: 80px 0;
  background: var(--section-bg);
  transition: var(--transition);
}

.bg-contrast {
  background: var(--contrast-bg);
}

.section-title {
  position: relative;
  color: var(--text-dark);
}

html[data-theme="dark"] .section-title {
  color: var(--text-light);
}

.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--blue-600), var(--brand));
  border-radius: 10px;
}

.section-subtitle {
  color: var(--text-dark);
  opacity: 0.9;
}

html[data-theme="dark"] .section-subtitle {
  color: var(--text-light);
  opacity: 0.85;
}

/* ========= Tipografía responsiva de títulos ========= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  text-wrap: balance; /* equilibra títulos en varias líneas */
  overflow-wrap: anywhere; /* evita desbordes */
}

/* Escala fluida: optimizada para móviles y desktop */
h1 {
  font-size: clamp(2rem, 1.15rem + 2.8vw, 3.25rem);
}
h2 {
  font-size: clamp(1.75rem, 1.05rem + 2.2vw, 2.6rem);
}
h3 {
  font-size: clamp(1.35rem, 0.95rem + 1.6vw, 2rem);
}
h4 {
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.5rem);
}
h5 {
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.2rem);
}
h6 {
  font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.05rem);
}

/* Subtítulos y lead text */
.lead {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.65;
  opacity: 0.95;
}

.section-title {
  margin-bottom: 0.75rem;
}
.section-subtitle {
  margin-bottom: 1.25rem;
}

/* Cards */
.card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.card:hover {
  transform: translateY(-3px);
}

.card-gradient {
  background: linear-gradient(180deg, rgba(31, 95, 138, 0.1), transparent 65%);
}

.card .card-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: clamp(1.05rem, 0.7vw + 0.95rem, 1.6rem);
  line-height: 1.2;
  margin-bottom: 0.35rem;
  color: var(--text-dark);
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

html[data-theme="dark"] .card .card-title {
  color: var(--text-light);
}

.card p,
.card li {
  font-size: clamp(0.95rem, 0.3vw + 0.84rem, 1.05rem);
  line-height: 1.6;
  margin-bottom: 0.6rem;
  color: var(--text-dark);
  overflow-wrap: anywhere;
  hyphens: auto;
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .card li {
  color: var(--text-light);
}

.card .card-icon,
.card .icon-step {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue-600) 18%, transparent);
  color: var(--blue-600);
  font-size: 28px;
  margin: 0 0 12px 0;
}

.card-service .card-title {
  color: var(--blue-600);
}

/* Títulos dentro de card: fuertes pero sin romper layout */
.card .card-title {
  font-weight: 800;
  letter-spacing: px; /*Cambio*/
  font-size: clamp(1.05rem, 0.7vw + 0.95rem, 1.6rem);
  line-height: 1.25;
  margin-bottom: 0.35rem;
  color: var(--text-dark);
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
}
html[data-theme="dark"] .card .card-title {
  color: var(--text-light);
}

/* Párrafos/listas en card: ritmo vertical cómodo */
.card p,
.card li {
  font-size: clamp(0.96rem, 0.3vw + 0.86rem, 1.06rem);
  line-height: 1.62;
  margin-bottom: 0.6rem;
  overflow-wrap: anywhere;
}
.card ul {
  margin-bottom: 0;
}

/* Espaciado del cuerpo de card */
.card .card-body {
  padding: 1.1rem 1.2rem 1.25rem;
}

/* Features */
.mtl-feature {
  border-radius: 14px;
  padding: 1rem;
  background: rgba(31, 95, 138, 0.1);
}

html[data-theme="dark"] .mtl-feature {
  background: rgba(31, 95, 138, 0.18);
}

/* Buttons */
.btn-accent {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #00a758;
  --bs-btn-hover-border-color: #00a758;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

.btn-primary {
  --bs-btn-bg: var(--blue-600);
  --bs-btn-border-color: var(--blue-600);
  --bs-btn-hover-bg: #1a557d;
  --bs-btn-hover-border-color: #1a557d;
}

.btn-outline-light:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
}

/* Forms */
.form-control,
.form-select {
  background: var(--card-bg);
  color: inherit;
  border-color: var(--card-border);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 0.25rem rgba(31, 95, 138, 0.18);
}

.toast {
  background: var(--card-bg);
  color: inherit;
}

/* Images No Shadow */
img,
figure img,
.card img {
  box-shadow: none !important;
  filter: none !important;
}

/* Sponsors marquee */
.sponsors-marquee {
  overflow: hidden;
  position: relative;
  background: var(--section-bg);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.sponsors-marquee .track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: marquee 25s linear infinite;
}

.sponsors-marquee img {
  height: 42px;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: opacity 0.2s;
}

.sponsors-marquee img:hover {
  opacity: 1;
  filter: none;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ===== BANNERS ===== */
.banner-cta {
  min-height: 350px;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
  padding: 80px 0;
}
@media (max-width: 767.98px) {
  .banner-cta {
    min-height: 220px;
    padding: 56px 0;
  }
}
/* Overlay por intensidad (usa <div class="overlay"></div> interno) */
.banner-cta .overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: var(--transition);
}
.banner-cta.ov-strong .overlay {
  background: rgba(11, 43, 62, 0.68);
}
.banner-cta.ov-medium .overlay {
  background: rgba(11, 43, 62, 0.52);
}
.banner-cta.ov-light .overlay {
  background: rgba(11, 43, 62, 0.38);
}
.banner-cta .container {
  position: relative;
  z-index: 1;
}

/* ===== BANNERS: Fallback por defecto (PNG/JPG) ===== */
.bg-banner-1 {
  background-image: url("../img/banner-1.png");
}
.bg-banner-2 {
  background-image: url("../img/banner-2.png");
}
.bg-banner-3 {
  background-image: url("../img/banner-3.png");
}

/* ===== BANNERS: image-set por breakpoint ===== */
/* ≥1200px (desktop) */
@media (min-width: 1200px) {
  .bg-banner-1 {
    background-image: image-set(
      url("../img/optimized/banner-1-1920x350.avif") type("image/avif"),
      url("../img/optimized/banner-1-1920x350.webp") type("image/webp"),
      url("../img/banner-1.png") type("image/png")
    );
  }
  .bg-banner-2 {
    background-image: image-set(
      url("../img/optimized/banner-2-1920x350.avif") type("image/avif"),
      url("../img/optimized/banner-2-1920x350.webp") type("image/webp"),
      url("../img/banner-2.png") type("image/png")
    );
  }
  .bg-banner-3 {
    background-image: image-set(
      url("../img/optimized/banner-3-1920x350.avif") type("image/avif"),
      url("../img/optimized/banner-3-1920x350.webp") type("image/webp"),
      url("../img/banner-3.png") type("image/png")
    );
  }
}
/* 768–1199px (tablet/laptop) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .bg-banner-1 {
    background-image: image-set(
      url("../img/optimized/banner-1-1366x250.avif") type("image/avif"),
      url("../img/optimized/banner-1-1366x250.webp") type("image/webp"),
      url("../img/banner-1.png") type("image/png")
    );
  }
  .bg-banner-2 {
    background-image: image-set(
      url("../img/optimized/banner-2-1366x250.avif") type("image/avif"),
      url("../img/optimized/banner-2-1366x250.webp") type("image/webp"),
      url("../img/banner-2.png") type("image/png")
    );
  }
  .bg-banner-3 {
    background-image: image-set(
      url("../img/optimized/banner-3-1366x250.avif") type("image/avif"),
      url("../img/optimized/banner-3-1366x250.webp") type("image/webp"),
      url("../img/banner-3.png") type("image/png")
    );
  }
}
/* <768px (móvil) */
@media (max-width: 767.98px) {
  .bg-banner-1 {
    background-image: image-set(
      url("../img/optimized/banner-1-768x140.avif") type("image/avif"),
      url("../img/optimized/banner-1-768x140.webp") type("image/webp"),
      url("../img/banner-1.png") type("image/png")
    );
  }
  .bg-banner-2 {
    background-image: image-set(
      url("../img/optimized/banner-2-768x140.avif") type("image/avif"),
      url("../img/optimized/banner-2-768x140.webp") type("image/webp"),
      url("../img/banner-2.png") type("image/png")
    );
  }
  .bg-banner-3 {
    background-image: image-set(
      url("../img/optimized/banner-3-768x140.avif") type("image/avif"),
      url("../img/optimized/banner-3-768x140.webp") type("image/webp"),
      url("../img/banner-3.png") type("image/png")
    );
  }
}

/* ===== Ticker: estilos mínimos para que sea visible ===== */
#stockTicker.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 0.25rem 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] #stockTicker.ticker-wrap {
  border-color: rgba(255, 255, 255, 0.08);
}
.mtl-ticker-line {
  display: inline-block;
  padding: 0.25rem 0;
  animation: mtlTicker 45s linear infinite;
  will-change: transform;
}
.mtl-ticker-line .tk {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-right: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.mtl-ticker-line .sym {
  font-weight: 700;
  letter-spacing: 0.2px;
}
.mtl-ticker-line .price {
  opacity: 0.9;
}
.mtl-ticker-line .chg.up {
  color: #00be63;
}
.mtl-ticker-line .chg.down {
  color: #e53935;
}

@keyframes mtlTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Glassmorphism modals */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(120%) blur(6px);
}

/* Comparison table */
.table-compare {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(11, 43, 62, 0.12);
}

.table-compare thead th {
  position: sticky;
  top: 0;
  background: var(--blue-900);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 1;
}

.table-compare th,
.table-compare td {
  white-space: nowrap;
}

.table-compare tbody tr:nth-child(odd) {
  background: rgba(11, 43, 62, 0.04);
}

html[data-theme="dark"] .table-compare tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}

.badge-level-low {
  background: var(--brand);
  color: #fff;
}

.badge-level-med {
  background: #ffd700;
  color: #1a1a1a;
}

.badge-level-high {
  background: #c62828;
  color: #fff;
}

.badge-yes {
  background: var(--brand);
  color: #fff;
}

.badge-no {
  background: #1a1a1a;
  color: #fff;
}

/* ===== Envoltorio con scroll suave ===== */
.table-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(2, 39, 58, 0.12);
}

/* ===== Tabla base (ya la tenías, afinamos) ===== */
.table-compare {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 880px; /* asegura columnas en móviles */
}
.table-compare thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #02273a;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
html[data-theme="dark"] .table-compare thead th {
  background: #0f2c3d;
}

/* Primera columna pegajosa (cabecera + cuerpo) */
.table-compare thead th.sticky-col,
.table-compare tbody th.sticky-col,
.table-compare tbody td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--section-bg);
}
html[data-theme="dark"] .table-compare thead th.sticky-col,
html[data-theme="dark"] .table-compare tbody th.sticky-col,
html[data-theme="dark"] .table-compare tbody td.sticky-col {
  background: var(--card-bg);
}

/* Sombreado sutil en el borde derecho de la columna sticky */
.table-compare .sticky-col {
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .table-compare .sticky-col {
  box-shadow: 2px 0 0 rgba(255, 255, 255, 0.06);
}

/* Filas zebra suaves */
.table-compare tbody tr:nth-child(odd) {
  background: rgba(2, 39, 58, 0.03);
}
html[data-theme="dark"] .table-compare tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

/* Indicadores de orden en TH */
.table-compare thead th .sort-caret {
  margin-left: 0.35rem;
  font-size: 0.85em;
  opacity: 0.9;
}
.table-compare thead th[aria-sort="ascending"] .sort-caret::after {
  content: "▲";
}
.table-compare thead th[aria-sort="descending"] .sort-caret::after {
  content: "▼";
}
.table-compare thead th[aria-sort="none"] .sort-caret::after {
  content: "◇";
}

/* Toolbar de comparativa */
.compare-toolbar .btn {
  border-radius: 10px;
}

/* Animación flotante */
.floating-animation {
  animation: floatY 6s ease-in-out infinite;
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-22px);
  }
}

/* Responsive */
@media (max-width: 991.98px) {
  .hero-slide {
    min-height: auto;
    padding: 120px 0 40px;
  }
}

/* ===== Navbar: shrink + contraste + active ===== */

/* Tamaños y transición del logo y marca */
#brandLogo {
  width: 55;
  height: 50px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mtl-nav.scrolled #brandLogo {
  transform: scale(0.92);
  opacity: 0.95;
}

/* Texto de marca */
.mtl-nav .navbar-brand span {
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.mtl-nav.scrolled .navbar-brand span {
  opacity: 0.95;
}

/* Links y estado activo (ScrollSpy) */
.mtl-nav .nav-link {
  color: #fff;
  opacity: 0.92;
  transition: color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.mtl-nav .nav-link:hover {
  opacity: 1;
  color: var(--brand);
}
.mtl-nav .nav-link.active {
  color: var(--brand);
  box-shadow: inset 0 -2px 0 0 var(--brand);
}

/* ===== Toggler 100% legible en ambos temas ===== */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.5rem;
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Reemplazamos el ícono por un SVG blanco (contrasta con hero y con nav scrolled) */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='white' stroke-width='2'%3E%3Cline x1='4' y1='7' x2='26' y2='7'/%3E%3Cline x1='4' y1='15' x2='26' y2='15'/%3E%3Cline x1='4' y1='23' x2='26' y2='23'/%3E%3C/g%3E%3C/svg%3E");
  filter: none; /* anulamos el invert que traíamos antes */
}

/* Si prefieres diferenciar por tema, puedes forzar otras variantes:
html[data-theme="light"] .navbar-toggler-icon{ ...stroke='black'... }
*/

/* ===== Menú colapsado (móvil): fondo y separación ===== */
@media (max-width: 991.98px) {
  #navCollapse {
    background: var(--blue-900);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
    padding: 0.6rem 1rem 1rem;
  }
  #navCollapse .nav-link {
    padding: 0.5rem 0.25rem;
  }
  #navCollapse .dropdown-menu {
    background: var(--blue-800);
  }
  #navCollapse .dropdown-item {
    color: #fff;
  }
  #navCollapse .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ===== Focus visible accesible ===== */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 80%, white);
  outline-offset: 2px;
}

/* ===== Skip link (accesibilidad) ===== */
.visually-hidden-focusable.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.visually-hidden-focusable.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  background: var(--blue-900);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* =============== SPONSORS / MARQUEE =============== */
.mtl-sponsors-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--section-bg);
  padding: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  box-shadow: 0 12px 32px rgba(2, 39, 58, 0.08);
}
html[data-theme="dark"] .mtl-sponsors-wrap {
  background: var(--card-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* La pista es ultra-ancha: corre de derecha a izquierda infinitamente */
.mtl-sponsors-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  will-change: transform;
  animation: marquee 28s linear infinite;
}
.mtl-sponsors-wrap:hover .mtl-sponsors-track {
  animation-play-state: paused; /* pausa al hover */
}

/* Elemento logo */
.mtl-sponsor {
  flex: 0 0 auto;
  opacity: 0.9;
  filter: grayscale(100%); /* gris por defecto */
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
.mtl-sponsor:hover {
  opacity: 1;
  transform: translateY(-2px);
  filter: grayscale(0%); /* color al hover */
}
.mtl-sponsor img {
  display: block;
  height: clamp(28px, 3.2vw, 42px);
  width: auto; /* respeta proporción */
}

/* Animación */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  } /* como duplicamos logos, -50% “engancha” perfecto */
}

/* Prefiere menos movimiento: respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .mtl-sponsors-track {
    animation-duration: 0.001s;
    animation-iteration-count: 1;
  }
}

/* Ajuste de contraste de logos en dark si hay PNGs oscuros (opcional) */
/* Puedes descomentar si notas logos muy oscuros en dark:
html[data-theme="dark"] .mtl-sponsor img{
  filter: brightness(1.08) contrast(1.05);
}
*/

/* ===== Modales legales & Cookies ===== */
.mtl-modal {
  background: var(--card-bg);
  color: var(--body-color);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.mtl-modal .modal-header {
  border-bottom-color: var(--card-border);
}
.mtl-modal .modal-footer {
  border-top-color: var(--card-border);
}

.mtl-cookie-row .form-check-input {
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
}
.mtl-cookie-row .form-check-input:checked {
  background-color: var(--mtl-blue-600, #2563eb);
  border-color: var(--mtl-blue-600, #2563eb);
}
.mtl-cookie-row .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem
    color-mix(in srgb, var(--brand, #00be63) 25%, transparent);
}

/* Botones del modal de cookies */
#cookieModal .btn-success {
  background-color: var(--mtl-blue-600, #2563eb);
  border-color: var(--mtl-blue-600, #2563eb);
}
#cookieModal .btn-success:hover {
  filter: brightness(0.95);
}

/* ===== HERO Overlay (tema-consciente) ===== */
.hero-slide {
  position: relative;
  isolation: isolate;
}
.hero-slide .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 39, 58, 0.65) 0%,
    rgba(2, 39, 58, 0.25) 55%,
    rgba(2, 39, 58, 0.1) 100%
  );
  pointer-events: none;
  transition: var(--transition);
}
html[data-theme="dark"] .hero-slide .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* Texto del hero siempre legible */
.hero-section h1,
.hero-section h2 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-section .lead {
  color: #f7fbff;
  opacity: 0.95;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ===== BANNERS Overlay más marcado ===== */
.banner-cta .overlay {
  background: linear-gradient(
    90deg,
    rgba(2, 39, 58, 0.78),
    rgba(2, 39, 58, 0.35) 45%,
    rgba(2, 39, 58, 0.1) 100%
  );
}
html[data-theme="dark"] .banner-cta .overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.12) 100%
  );
}
/* Texto en banners con mejor legibilidad */
.banner-cta h3,
.banner-cta p {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ===== Cards: control de longitudes ===== */
.mtl-card .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.mtl-card .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 6; /* ajusta si necesitas más líneas */
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alturas coherentes en grids */
.row.mtl-eq > [class*="col"] .mtl-card {
  height: 100%;
}

/* Glassmorphism opcional para algunos bloques (aplícalo por clase) */
.mtl-glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
}
html[data-theme="dark"] .mtl-glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  border-color: rgba(255, 255, 255, 0.12);
}

/* =========================
   BOTONES - Micro animaciones
   ========================= */
.btn-cta,
.btn-success,
.btn-outline-primary,
.btn-primary {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.25s ease,
    color 0.25s ease;
  will-change: transform;
}
.btn-cta:hover,
.btn-success:hover,
.btn-outline-primary:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 39, 58, 0.18);
}
.btn-cta:active,
.btn-success:active,
.btn-outline-primary:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(2, 39, 58, 0.16);
}

/* “Ink” highlight sutil al hover */
.btn-cta::after,
.btn-success::after,
.btn-outline-primary::after,
.btn-primary::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 140%;
  height: 140%;
  background: radial-gradient(
    120px 80px at var(--x, 0%) var(--y, 100%),
    rgba(255, 255, 255, 0.22),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.btn-cta:hover::after,
.btn-success:hover::after,
.btn-outline-primary:hover::after,
.btn-primary:hover::after {
  opacity: 0.9;
}

/* Variante CTA principal en azul + verde marca para borde */
.btn-cta {
  --bs-btn-bg: var(--mtl-blue-600, #2563eb);
  --bs-btn-border-color: var(--mtl-blue-600, #2563eb);
  --bs-btn-color: #fff;
}
.btn-cta.is-alt {
  /* borde verde marca */
  background: transparent;
  color: var(--mtl-blue-600, #2563eb);
  border: 2px solid color-mix(in srgb, var(--brand) 70%, #fff);
}
html[data-theme="dark"] .btn-cta.is-alt {
  color: #fff;
  border-color: color-mix(in srgb, var(--brand) 70%, #97f5c7);
}

/* =========================
   EFECTO “MAGNETIC HOVER” (aplícalo con .magnetic)
   ========================= */
.magnetic {
  transition: transform 0.08s ease-out;
  will-change: transform;
}

/* =========================
   TABLA COMPARATIVA – contraste mejorado
   ========================= */
.table-compare {
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(2, 39, 58, 0.12);
}
.table-compare thead th {
  background: linear-gradient(180deg, #02273a, #08344a);
  color: #fff;
  font-weight: 700;
  border-bottom: 0;
}
html[data-theme="dark"] .table-compare thead th {
  background: linear-gradient(180deg, #0b1f33, #061725);
}
.table-compare tbody tr:hover {
  background: rgba(37, 99, 235, 0.06);
}
html[data-theme="dark"] .table-compare tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Badges (accesibles) */
.badge-level-low {
  background: #dbeafe;
  color: #0b1f33;
} /* azul claro / texto oscuro */
.badge-level-med {
  background: #ffd66b;
  color: #1a1a1a;
} /* dorado legible */
.badge-level-high {
  background: #ef4444;
  color: #fff;
} /* rojo accesible */
.badge-yes {
  background: #2563eb;
  color: #fff;
}
.badge-no {
  background: #6b7280;
  color: #fff;
} /* gris 500 */

/* =========================
   Preferencias de movimiento
   ========================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================
   Perf visual de secciones largas
   ========================= */
/* Si tus secciones son muy pesadas, puedes activar on-demand paint: */
.mtl-lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}

/* ===============================
   CTAs — variantes pulidas
   =============================== */

/* Base */
.btn-cta,
.btn-cta-primary,
.btn-cta-brand,
.btn-cta-ghost,
.btn-cta-outline-brand {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 0.75rem 1.15rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease,
    color 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

/* Elevación + glow */
.btn-cta:hover,
.btn-cta-primary:hover,
.btn-cta-brand:hover,
.btn-cta-ghost:hover,
.btn-cta-outline-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2, 39, 58, 0.18);
}

/* Focus ring accesible */
.btn-cta:focus-visible,
.btn-cta-primary:focus-visible,
.btn-cta-brand:focus-visible,
.btn-cta-ghost:focus-visible,
.btn-cta-outline-brand:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 80%, transparent);
  outline-offset: 2px;
}

/* “Ink glow” siguiendo el cursor (usa el JS que ya tienes) */
.btn-cta::after,
.btn-cta-primary::after,
.btn-cta-brand::after,
.btn-cta-ghost::after,
.btn-cta-outline-brand::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 140%;
  height: 140%;
  background: radial-gradient(
    120px 80px at var(--x, 0%) var(--y, 100%),
    rgba(255, 255, 255, 0.22),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.btn-cta:hover::after,
.btn-cta-primary:hover::after,
.btn-cta-brand:hover::after,
.btn-cta-ghost:hover::after,
.btn-cta-outline-brand:hover::after {
  opacity: 0.9;
}

/* Primary (azul) */
.btn-cta-primary {
  background: linear-gradient(
    180deg,
    var(--mtl-blue-600, #2563eb),
    color-mix(in srgb, var(--mtl-blue-600, #2563eb) 80%, #0b1f33)
  );
  color: #fff;
  border: 1px solid
    color-mix(in srgb, var(--mtl-blue-600, #2563eb) 60%, #0b1f33);
}

/* Brand (verde de tu logo) */
.btn-cta-brand {
  background: linear-gradient(
    180deg,
    var(--brand),
    color-mix(in srgb, var(--brand) 78%, #045c33)
  );
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--brand) 70%, #03311b);
}

/* Ghost (texto azul, fondo tenue que invierte en dark) */
.btn-cta-ghost {
  background: rgba(37, 99, 235, 0.08);
  color: var(--mtl-blue-600, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.18);
}
html[data-theme="dark"] .btn-cta-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
}

/* Outline brand con borde degradado */
.btn-cta-outline-brand {
  background: transparent;
  color: var(--mtl-blue-600, #2563eb);
  border: 2px solid transparent;
  background-image: linear-gradient(var(--card-bg), var(--card-bg)),
    linear-gradient(90deg, var(--brand), var(--mtl-blue-600, #2563eb));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
html[data-theme="dark"] .btn-cta-outline-brand {
  color: #fff;
}

/* ===============================
   Tipografía cards y subtítulos
   =============================== */
.section-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: clamp(1.35rem, 1.2vw + 1rem, 2.1rem);
  line-height: 1.15;
}

.section-subtitle {
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.15rem);
  opacity: 0.9;
}

.mtl-card .card-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: clamp(1.05rem, 0.85vw + 0.95rem, 1.5rem);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mtl-card .card-text {
  font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.06rem);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mtl-kicker {
  /* eyebrow/kicker encima del título */
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.25rem;
}

/* ===============================
   Banners: contraste tema-consciente
   =============================== */
.banner-cta[data-contrast="auto"] .overlay {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mtl-blue-900, #0b1f33) 78%, transparent),
    color-mix(in srgb, var(--mtl-blue-900, #0b1f33) 32%, transparent) 45%,
    transparent 100%
  );
}
html[data-theme="dark"] .banner-cta[data-contrast="auto"] .overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.12) 100%
  );
}
.banner-cta[data-contrast="auto"] h3,
.banner-cta[data-contrast="auto"] p {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ===============================
   Carousel — indicadores y zoom
   =============================== */
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 0;
}
.carousel-indicators .active {
  background: linear-gradient(
    180deg,
    var(--brand),
    var(--mtl-blue-600, #2563eb)
  );
}

.hero-slide .container {
  /* snap-feel: la caja de contenido aterriza a coordenadas limpias */
  scroll-snap-align: start;
}

.hero-slide[data-zoom] {
  overflow: hidden;
}
.hero-slide[data-zoom]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(1.02);
  transition: transform 6s ease;
}
.hero-slide[data-zoom].active::before {
  transform: scale(1.08);
}

/* Reduce movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .hero-slide[data-zoom]::before {
    transition: none;
    transform: none;
  }
}

/* =========================
   SPONSORS: tamaño de logos
   ========================= */

.mtl-sponsors-wrap {
  padding: 20px 0;
}

.mtl-sponsors-track img {
  max-height: 56px; /* antes suele estar 36–42; subimos */
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 28px; /* separación entre logos */
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  filter: none; /* no sombras (según tu requerimiento) */
}

/* Responsivo: un poco más pequeño en móviles */
@media (max-width: 767.98px) {
  .mtl-sponsors-track img {
    max-height: 44px;
    margin: 0 20px;
  }
}

/* Hover sutil (sin sombras) */
.mtl-sponsors-track img:hover {
  transform: translateY(-1px) scale(1.02);
  opacity: 0.95;
}

/* Contraste en dark: opcionalmente puedes aclarar un poco los logos muy oscuros */
html[data-theme="dark"] .mtl-sponsors-track img.is-dark {
  filter: brightness(1.08);
}

/* =========================
   CONTACTO: visual sin video
   ========================= */

.contact-visual {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--section-bg);
  isolation: isolate;
}

/* Imagen responsive y consistente */
.contact-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9; /* controla altura (cámbialo si prefieres 4/3) */
  object-fit: cover;
  transform: scale(1.02); /* leve zoom base para evitar bordes vacíos */
  transition: transform 0.6s ease;
  box-shadow: none !important; /* sin sombras, como pediste */
  filter: none !important;
}

/* Hover sutil (sin sombras; sólo un pequeño zoom) */
.contact-visual:hover .contact-img {
  transform: scale(1.05);
}

/* Overlay sutil para asegurar legibilidad con ambas apariencias */
.contact-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 39, 58, 0.08),
    rgba(2, 39, 58, 0.06)
  );
  transition: var(--transition);
}
html[data-theme="dark"] .contact-visual::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.14));
}

/* Asegura que el formulario (si va a la izquierda) no se solape con el visual */
@media (max-width: 991.98px) {
  #contacto .row > [class*="col"] {
    margin-bottom: 18px;
  }
}

/* Si usabas una clase .floating-animation en el video, puedes aplicarla a la imagen:
   .contact-img.floating-animation { animation-duration: 8s; }  */

/* ===============================
   Bloques extendidos 2 columnas
   =============================== */
.mtl-2col {
  padding: clamp(1.25rem, 1.2vw + 1rem, 2rem);
  border-radius: 16px;
  background: var(--section-bg);
  transition: var(--transition);
}

html[data-theme="dark"] .mtl-2col {
  background: #0f2c3d; /* coherente con tu dark */
}

/* Columna de texto: ancho de línea cómodo */
.mtl-2col .copy-max {
  max-width: 68ch;
}

/* Figura: sin sombras, recorte elegante y responsive */
.mtl-figure {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--mtl-blue-900) 6%, transparent);
}
.mtl-figure img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s ease;
  box-shadow: none !important;
  filter: none !important;
}
.mtl-figure:hover img {
  transform: scale(1.05);
}

/* Separación entre bloques extendidos */
.mtl-2col + .mtl-2col {
  margin-top: 1.25rem;
}

/* Ajuste en móvil */
@media (max-width: 991.98px) {
  .mtl-2col .row > [class*="col"] {
    margin-bottom: 1rem;
  }
}

/* =========================================================
   COMPONENTES NUEVOS (complementos por sección)
   ========================================================= */

/* Subtítulo fino */
.mtl-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

/* Píldoras/tags */
.mtl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mtl-pill {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mtl-blue-600) 12%, transparent);
  color: var(--mtl-blue-600);
  font-weight: 600;
  font-size: 0.9rem;
}

/* KPIs */
.mtl-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 767.98px) {
  .mtl-kpis {
    grid-template-columns: 1fr 1fr;
  }
}
.mtl-kpi {
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.1),
    rgba(59, 130, 246, 0.04)
  );
}
.mtl-kpi h4 {
  margin: 0;
  font-weight: 800;
  font-size: 1.35rem;
}
.mtl-kpi small {
  opacity: 0.8;
}

/* Paso a paso horizontal */
.mtl-steps {
  counter-reset: st;
  display: grid;
  gap: 1rem;
}
.mtl-step {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--section-bg);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--card-border);
}
.mtl-step::before {
  counter-increment: st;
  content: counter(st);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: color-mix(in srgb, var(--mtl-blue-600) 16%, transparent);
  color: var(--mtl-blue-600);
}

/* Bloques “Do/Don't” */
.mtl-do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 991.98px) {
  .mtl-do-dont {
    grid-template-columns: 1fr;
  }
}
.mtl-do,
.mtl-dont {
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.mtl-do {
  background: linear-gradient(180deg, rgba(0, 190, 99, 0.12), transparent);
  border: 1px solid rgba(0, 190, 99, 0.25);
}
.mtl-dont {
  background: linear-gradient(180deg, rgba(198, 40, 40, 0.12), transparent);
  border: 1px solid rgba(198, 40, 40, 0.25);
}
.mtl-do li::marker,
.mtl-dont li::marker {
  color: transparent;
}
.mtl-do li::before,
.mtl-dont li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.5rem;
}
.mtl-do li::before {
  content: "\f00c";
  color: #00be63;
}
.mtl-dont li::before {
  content: "\f00d";
  color: #c62828;
}

/* Personas / Perfiles */
.mtl-persona {
  border-radius: 16px;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.mtl-persona h4 {
  margin: 0 0 0.25rem;
  font-weight: 800;
}
.mtl-persona .meta {
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

/* Sesiones globales (timeline horizontal) */
.mtl-sessions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.mtl-session {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  font-weight: 600;
  background: color-mix(in srgb, var(--mtl-blue-600) 12%, transparent);
  color: var(--mtl-blue-600);
}
.mtl-session .bar {
  width: 120px;
  height: 8px;
  border-radius: 6px;
  background: rgba(2, 39, 58, 0.12);
  position: relative;
  overflow: hidden;
}
.mtl-session .bar span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--mtl-blue-600), #00be63);
  width: 60%;
}

/* Casos de uso */
.mtl-case {
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1rem 1.1rem;
}
.mtl-case h4 {
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.mtl-case .result {
  font-weight: 700;
  color: #00be63;
}

/* Stack/Arquitectura */
.mtl-stack {
  display: grid;
  gap: 10px;
}
.mtl-layer {
  border-radius: 14px;
  padding: 0.8rem 1rem;
  background: linear-gradient(180deg, rgba(2, 39, 58, 0.06), transparent);
  border: 1px solid var(--card-border);
}
.mtl-layer h4 {
  margin: 0 0 0.25rem;
  font-weight: 800;
}

/* Media con icono */
.mtl-media {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.mtl-media .ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mtl-blue-600) 16%, transparent);
  color: var(--mtl-blue-600);
  font-size: 18px;
}

/* Imágenes con leve tilt en hover (sólo estilo, sin JS por ahora) */
.mtl-figure img {
  transform-origin: center center;
}
.mtl-figure:hover img {
  transform: scale(1.05) rotate(0.4deg);
  -webkit-transform: scale(1.05) rotate(0.4deg);
  -moz-transform: scale(1.05) rotate(0.4deg);
  -ms-transform: scale(1.05) rotate(0.4deg);
  -o-transform: scale(1.05) rotate(0.4deg);
}

/* ===== Espaciado superior para módulos complementarios ===== */
:root {
  --compl-gap-sm: 28px; /* móviles */
  --compl-gap-md: 44px; /* tablets */
  --compl-gap-lg: 72px; /* desktop */
}

/* Todos los contenedores de módulos nuevos ya tienen la clase .mtl-2col */
.mtl-2col {
  margin-top: var(--compl-gap-sm) !important;
  padding-top: 35px; /* un respiro adicional */
}

/* Escala el margen según breakpoint */
@media (min-width: 576px) {
  .mtl-2col {
    margin-top: var(--compl-gap-md) !important;
  }
}
@media (min-width: 992px) {
  .mtl-2col {
    margin-top: var(--compl-gap-lg) !important;
  }
}

/* Si algún módulo queda como primer hijo dentro de su sección, no le añadas margen extra */
section .mtl-2col:first-of-type {
  margin-top: 0 !important;
}

/* (Opcional) Si metes más de un módulo extra en la misma sección, separa aún más entre ellos */
section .mtl-2col + .mtl-2col {
  margin-top: calc(var(--compl-gap-sm) + 10px) !important;
}
@media (min-width: 576px) {
  section .mtl-2col + .mtl-2col {
    margin-top: calc(var(--compl-gap-md) + 12px) !important;
  }
}
@media (min-width: 992px) {
  section .mtl-2col + .mtl-2col {
    margin-top: calc(var(--compl-gap-lg) + 14px) !important;
  }
}

/* =========================
   FX base (reveal, hover, float, ken-burns, parallax)
   ========================= */

/* Reveal genérico */
.fx-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.fx-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.fx-reveal[data-reveal="right"] {
  transform: translateX(18px);
}
.fx-reveal[data-reveal="right"].is-visible {
  transform: none;
}
.fx-reveal[data-reveal="up"] {
  transform: translateY(18px);
}
.fx-reveal[data-reveal="up"].is-visible {
  transform: none;
}
.fx-reveal[data-reveal="zoom"] {
  transform: scale(0.96);
}
.fx-reveal[data-reveal="zoom"].is-visible {
  transform: scale(1);
}

/* Delay configurable */
.fx-reveal {
  transition-delay: var(--reveal-delay, 0s);
}

/* Hover zoom (muy sutil) */
.fx-hover-zoom img {
  transition: transform 0.5s ease;
  transform-origin: center center;
}
.fx-hover-zoom:hover img {
  transform: scale(1.06);
}

/* Flotación suave (alternativa a .floating-animation) */
@keyframes fxFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}
.fx-float-slow img {
  animation: fxFloat 8s ease-in-out infinite;
}
.fx-float-fast img {
  animation: fxFloat 5s ease-in-out infinite;
}

/* Ken Burns (pan/zoom leve) */
@keyframes fxKenBurns {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.08) translateY(-2%);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.fx-ken {
  overflow: hidden;
}
.fx-ken img {
  animation: fxKenBurns 18s ease-in-out infinite;
  transform-origin: center center;
}

/* Parallax: transform lo aplica JS vía translate3d */
.fx-parallax {
  will-change: transform;
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal,
  .fx-hover-zoom img,
  .fx-float-slow img,
  .fx-float-fast img,
  .fx-ken img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Pequeño ajuste para figures nuevas (ya sin sombras) */
.mtl-figure {
  border-radius: 14px;
  overflow: hidden;
}
.mtl-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Evita saltos de maquetación y mejora decodificación */
img[width][height] {
  height: auto;
  display: block;
}

/* Ajustes por defecto en imágenes no críticas */
.lazy-img {
  content-visibility: auto; /* no pinta fuera de viewport */
  contain-intrinsic-size: 600px; /* altura estimada, ajusta si ves “saltos” */
}
@media (max-width: 991.98px) {
  .lazy-img {
    contain-intrinsic-size: 900px;
  }
}

/* Animaciones suaves al entrar (si ya usas fx-reveal, esto suma) */
.lazy-img {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lazy-img.is-loaded {
  opacity: 1;
}

/* =========================================================
   FX: Reveal on scroll, Pop, Float, Lift, Hover Tilt, Glow
   ========================================================= */

/* Estado inicial para animaciones con IO */
.fx-watch {
  opacity: 0;
  transform: translateY(16px);
}
.fx-watch.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Variantes */
.fx-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.fx-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fx-pop {
  opacity: 0;
  transform: scale(0.96);
}
.fx-pop.is-in {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Flotación suave continua */
@keyframes mtlFloat {
  0%,
  100% {
    transform: translateY(10);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  0% {
    transform: translateY(-16px);
    -webkit-transform: translateY(-16px);
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    -o-transform: translateY(-16px);
}
}
.fx-float {
  animation: mtlFloat 6s ease-in-out infinite;
  will-change: transform;
}

/* Elevación suave en hover (para imágenes y cards) */
.lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.lift:hover {
  transform: translateY(-6px);
}

/* Tilt 3D leve en hover (no usa JS) */
.fx-hover-tilt {
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
}
.fx-hover-tilt:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(-4deg) translateZ(0);
}

/* Halo sutil de marca (útil en CTAs o iconos clave) */
.glow-brand {
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--brand) 25%, transparent),
    0 8px 28px color-mix(in srgb, var(--brand) 24%, transparent);
}

/* =========================================
   Glassmorphism: tarjetas o bloques “glass”
   ========================================= */
.mtl-glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.2)
  );
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2, 39, 58, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="dark"] .mtl-glass {
  background: linear-gradient(
    180deg,
    rgba(8, 26, 38, 0.45),
    rgba(8, 26, 38, 0.28)
  );
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

/* Borde de acento sutil (opcional) */
.mtl-glass.accent {
  border-image: linear-gradient(
      45deg,
      var(--brand),
      color-mix(in srgb, var(--mtl-blue-600) 60%, white)
    )
    1;
  border-style: solid;
}

/* ======================================
   Parallax ligero (horizontal/vertical)
   ====================================== */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.05s linear;
}
.fx-parallax-h {
} /* marcador semántico */
.fx-parallax-v {
} /* marcador semántico */

/* =========================================================
   Accesibilidad: reducir animaciones si el usuario lo pide
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .fx-float,
  .fx-hover-tilt,
  .lift,
  [data-parallax] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .fx-watch,
  .fx-reveal,
  .fx-pop {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ======================================
   Iconos con el verde de la marca
   ====================================== */
.mtl-icon,
.mtl-icon i,
.mtl-icon svg {
  color: var(--brand) !important;
}

/* Botones del slider en móvil (más compactos; refuerzo) */
@media (max-width: 575.98px) {
  .carousel .btn,
  .carousel .btn-lg {
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
  }
}

/* Separación superior extra para módulos nuevos (refuerzo) */
.mtl-block-gap {
  margin-top: clamp(32px, 4vw, 64px);
}


/* === 1) Neutraliza cualquier parallax/scroll-translate previo === */
.parallax,
.scroll-zoom,
.scroll-parallax,
[data-parallax] {
  transform: none !important;
  will-change: auto !important;
}

/* === 2) Contenedor seguro de imagen (clip y radio) === */
.mtl-figure {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* Si no puedes envolver la imagen, puedes aplicar .img-clip al padre */
.img-clip {
  overflow: hidden;
  border-radius: 16px;
}

/* === 3) Imágenes con zoom constante (sin moverse por scroll) === */
.mtl-float-target {
  display: block;
  width: 100%;
  height: auto;              /* si es img normal */
  object-fit: cover;         /* si la usas como fondo, ignora esto */
  transform: scale(var(--img-scale, 1.04));
  transition: transform .6s ease;
  will-change: transform;
}

/* === 4) Animaciones de flotación (solo traslación/rotación, conservando zoom) === */
@keyframes mtlFloatY {
  0%, 100% { transform: translateY(0)      scale(var(--img-scale, 1.04)); }
  50%      { transform: translateY(-12px)  scale(var(--img-scale, 1.04)); }
}
@keyframes mtlFloatX {
  0%, 100% { transform: translateX(0)      scale(var(--img-scale, 1.04)); }
  50%      { transform: translateX(10px)   scale(var(--img-scale, 1.04)); }
}
@keyframes mtlFloatDiag {
  0%   { transform: translate(0,0)         rotate(0deg)   scale(var(--img-scale, 1.04)); }
  50%  { transform: translate(10px,-10px)  rotate(.6deg)  scale(var(--img-scale, 1.04)); }
  100% { transform: translate(0,0)         rotate(0deg)   scale(var(--img-scale, 1.04)); }
}

/* Clases de dirección */
.mtl-float-up    { animation: mtlFloatY   var(--float-speed, 8s)  ease-in-out infinite; }
.mtl-float-right { animation: mtlFloatX   var(--float-speed, 9s)  ease-in-out infinite; }
.mtl-float-diag  { animation: mtlFloatDiag var(--float-speed, 10s) ease-in-out infinite; }

/* Menor “actividad” en móviles para no distraer */
@media (max-width: 575.98px){
  .mtl-float-up    { animation-duration: 7s; }
  .mtl-float-right { animation-duration: 8s; }
  .mtl-float-diag  { animation-duration: 9s; }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .mtl-float-up,
  .mtl-float-right,
  .mtl-float-diag { animation: none !important; }
}