/* =====================================================================
   MLDATA · identidad visual única (modo oscuro)
   Se carga DESPUÉS de styles.css (tema Bootstrap) y es la única fuente de color del sitio.
   Colores del logo: amarillo, cian, rosa y azul. Sobre negro y blanco.
   Las demás hojas (insights, landings, webinars, cuenta) usan estas variables --m-*.
   ===================================================================== */
:root {
  /* Fondos (de más hondo a más elevado) */
  --m-bg: #14181c;
  --m-bg-2: #181d22;
  --m-surface: #1a2026;
  --m-surface-2: #222a31;
  --m-borde: rgba(255, 255, 255, .09);
  --m-borde-fuerte: rgba(255, 255, 255, .18);

  /* Texto */
  --m-texto: #e9edf1;
  --m-suave: #a9b4c0;
  --m-tenue: #7d8996;

  /* Marca (logo) */
  --m-amarillo: #ffc800;
  --m-amarillo-hover: #ffd84d;
  --m-cian: #00d3f9;
  --m-rosa: #ff6dc2;
  --m-azul: #6b7eda;
  --m-azul-hondo: #2e4dd0;
  --m-rojo: #ff5a63;
  --m-verde: #3ddc97;

  --m-tinta-sobre-amarillo: #14181c;
  --m-radio: 1rem;
  --m-sombra: 0 .8rem 1.8rem rgba(0, 0, 0, .35);
  --m-degradado-marca: linear-gradient(90deg, var(--m-amarillo), var(--m-rosa), var(--m-cian));

  /* Bootstrap hacia oscuro */
  --bs-body-bg: var(--m-bg);
  --bs-body-color: var(--m-texto);
  --bs-secondary-color: var(--m-suave);
  --bs-border-color: var(--m-borde);
  --bs-heading-color: #fff;
  --bs-link-color: var(--m-amarillo);
  --bs-link-hover-color: var(--m-amarillo-hover);
  --bs-primary: var(--m-amarillo);
  --bs-primary-rgb: 255, 200, 0;
}

html { color-scheme: dark; }
body { background-color: var(--m-bg); color: var(--m-texto); }
::selection { background: var(--m-amarillo); color: var(--m-tinta-sobre-amarillo); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #fff; }
a { color: var(--m-amarillo); }
a:hover { color: var(--m-amarillo-hover); }
.text-muted, .text-body-secondary { color: var(--m-suave) !important; }
.text-primary { color: var(--m-amarillo) !important; }
.text-dark { color: #fff !important; }
.lead { color: var(--m-texto); }
hr { border-color: var(--m-borde); opacity: 1; }

/* ---------- Fondos de sección: alternan sutilmente ---------- */
.bg-light { background-color: var(--m-bg-2) !important; }
.bg-white { background-color: var(--m-surface) !important; }
.bg-dark { background-color: #080b0f !important; }
.page-section { background-color: var(--m-bg); }
.page-section.bg-light { background: linear-gradient(180deg, var(--m-bg-2), var(--m-bg)) !important; }
.page-section h2.section-heading { color: #fff; }
.page-section h2.section-heading::after {
  content: ""; display: block; width: 4rem; height: 4px; margin: 1rem auto 0; border-radius: 2px;
  background: var(--m-degradado-marca);
}
.page-section h3.section-subheading { color: var(--m-suave) !important; }

/* ---------- Tarjetas y contenedores ---------- */
.border { border-color: var(--m-borde) !important; }
.rounded.border.bg-white, .card, .list-group-item, .accordion-item {
  background: linear-gradient(145deg, var(--m-surface-2), var(--m-surface)) !important;
  border-color: var(--m-borde) !important; color: var(--m-texto);
}
.card-header, .card-footer { background: rgba(255, 255, 255, .03); border-color: var(--m-borde); }
.h-100.p-4.border.rounded { transition: transform .2s, border-color .2s, box-shadow .2s; }
.h-100.p-4.border.rounded:hover { transform: translateY(-3px); border-color: rgba(255, 200, 0, .5) !important; box-shadow: var(--m-sombra); }
.shadow, .shadow-sm { box-shadow: var(--m-sombra) !important; }

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-color: var(--m-tinta-sobre-amarillo); --bs-btn-bg: var(--m-amarillo); --bs-btn-border-color: var(--m-amarillo);
  --bs-btn-hover-color: var(--m-tinta-sobre-amarillo); --bs-btn-hover-bg: var(--m-amarillo-hover); --bs-btn-hover-border-color: var(--m-amarillo-hover);
  --bs-btn-active-color: var(--m-tinta-sobre-amarillo); --bs-btn-active-bg: #e6b400; --bs-btn-active-border-color: #e6b400;
  --bs-btn-disabled-color: var(--m-tinta-sobre-amarillo); --bs-btn-disabled-bg: var(--m-amarillo); --bs-btn-disabled-border-color: var(--m-amarillo);
  --bs-btn-focus-shadow-rgb: 255, 200, 0;
  font-weight: 700;
}
.btn-outline-primary {
  --bs-btn-color: var(--m-amarillo); --bs-btn-border-color: var(--m-amarillo);
  --bs-btn-hover-color: var(--m-tinta-sobre-amarillo); --bs-btn-hover-bg: var(--m-amarillo); --bs-btn-hover-border-color: var(--m-amarillo);
  --bs-btn-active-color: var(--m-tinta-sobre-amarillo); --bs-btn-active-bg: var(--m-amarillo); --bs-btn-active-border-color: var(--m-amarillo);
}
.btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .5); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #0d1116; }
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--m-texto); --bs-btn-bg: var(--m-surface-2); --bs-btn-border-color: var(--m-borde-fuerte);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2c3744; --bs-btn-hover-border-color: var(--m-borde-fuerte);
  --bs-btn-active-bg: #2c3744; --bs-btn-active-color: #fff;
}
.btn:focus-visible, a:focus-visible, .form-control:focus-visible { outline: 2px solid var(--m-cian); outline-offset: 2px; }

/* ---------- Formularios ---------- */
.form-control, .form-select, .au-card input, textarea, select {
  background-color: var(--m-surface-2); color: var(--m-texto); border: 1px solid var(--m-borde-fuerte);
}
.form-control::placeholder { color: var(--m-tenue); }
.form-control:focus, .form-select:focus {
  background-color: var(--m-surface-2); color: #fff; border-color: var(--m-amarillo); box-shadow: 0 0 0 .2rem rgba(255, 200, 0, .25);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--m-surface); color: var(--m-tenue); }
.form-label, label { color: var(--m-suave); }
.form-check-input { background-color: var(--m-surface-2); border-color: var(--m-borde-fuerte); }
.form-check-input:checked { background-color: var(--m-amarillo); border-color: var(--m-amarillo); }
.form-text, .help-block { color: var(--m-tenue); }
.invalid-feedback, .text-danger { color: var(--m-rojo) !important; }
.input-group-text { background: var(--m-surface); color: var(--m-suave); border-color: var(--m-borde-fuerte); }

/* ---------- Alertas, tablas, modales ---------- */
.alert { border: 1px solid var(--m-borde); color: var(--m-texto); background: var(--m-surface); }
.alert-success { border-left: 4px solid var(--m-verde); }
.alert-danger { border-left: 4px solid var(--m-rojo); }
.alert-warning { border-left: 4px solid var(--m-amarillo); }
.alert-info { border-left: 4px solid var(--m-cian); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--m-texto); --bs-table-border-color: var(--m-borde);
  --bs-table-striped-bg: rgba(255, 255, 255, .035); --bs-table-striped-color: var(--m-texto); --bs-table-hover-bg: rgba(255, 255, 255, .06); }
.modal-content { background: var(--m-bg-2); color: var(--m-texto); border: 1px solid var(--m-borde); }
.modal-header, .modal-footer { border-color: var(--m-borde); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.portfolio-modal .modal-content { background: var(--m-bg); }
.close-modal { filter: invert(1); }
.dropdown-menu { background: var(--m-surface); border-color: var(--m-borde); }
.dropdown-item { color: var(--m-texto); }
.dropdown-item:hover { background: var(--m-surface-2); color: #fff; }
.badge.bg-light, .badge.text-bg-light { background: var(--m-surface-2) !important; color: var(--m-texto) !important; }
.page-link { background: var(--m-surface); border-color: var(--m-borde); color: var(--m-amarillo); }
.page-item.active .page-link { background: var(--m-amarillo); border-color: var(--m-amarillo); color: var(--m-tinta-sobre-amarillo); }
.page-item.disabled .page-link { background: var(--m-bg-2); color: var(--m-tenue); border-color: var(--m-borde); }

/* ---------- Navegación ---------- */
#mainNav { background-color: rgba(8, 11, 15, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--m-borde); }
#mainNav .navbar-nav .nav-item .nav-link { color: rgba(255, 255, 255, .88); }
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link.active { color: var(--m-amarillo); }
@media (min-width: 992px) {
  #mainNav { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #mainNav.navbar-shrink { background-color: rgba(8, 11, 15, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom-color: var(--m-borde); }
}

/* ---------- Portada ---------- */
header.masthead { position: relative; isolation: isolate; }
header.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48rem 20rem at 85% 0%, rgba(0, 211, 249, .16), transparent 60%),
    radial-gradient(40rem 20rem at 5% 100%, rgba(255, 109, 194, .13), transparent 60%),
    linear-gradient(180deg, rgba(13, 17, 22, .70), rgba(13, 17, 22, .90));
}
header.masthead .masthead-subheading { color: var(--m-amarillo); }

/* ---------- Servicios (iconos) ---------- */
.fa-stack .fa-inverse { color: var(--m-tinta-sobre-amarillo); }

/* ---------- Trabajo (portfolio) ---------- */
#portfolio .portfolio-item { border-radius: var(--m-radio); overflow: hidden; border: 1px solid var(--m-borde); background: var(--m-surface); }
#portfolio .portfolio-item .portfolio-caption { background: linear-gradient(145deg, var(--m-surface-2), var(--m-surface)); }
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading { color: #fff; }
#portfolio .portfolio-item .portfolio-link .portfolio-hover { background: rgba(13, 17, 22, .78); }
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { color: var(--m-amarillo); }

/* ---------- Nosotros (línea de tiempo) y equipo ---------- */
.timeline:before { background-color: var(--m-borde-fuerte); }
.timeline > li .timeline-image { border-color: var(--m-bg); background-color: var(--m-amarillo); color: var(--m-tinta-sobre-amarillo); }
.timeline > li .timeline-panel:before, .timeline > li .timeline-panel:after { border-color: transparent; }
.timeline .timeline-heading h4 { color: #fff; }
.timeline .timeline-heading h4.subheading { color: var(--m-amarillo); }
.team-member img { border: 3px solid var(--m-borde-fuerte) !important; }
.team-member h4 { color: #fff; }

/* ---------- Pie ---------- */
.footer { border-top: 1px solid var(--m-borde); color: var(--m-suave); }
.footer a { color: var(--m-suave); }
.footer a:hover { color: var(--m-amarillo); }
.btn-social { background: var(--m-surface-2); border: 1px solid var(--m-borde); color: var(--m-texto); }
.btn-social:hover { background: var(--m-amarillo); color: var(--m-tinta-sobre-amarillo); border-color: var(--m-amarillo); }

/* ---------- Contenido largo (Bitácora, política, recursos) ---------- */
.post-contenido, .blog-contenido, article { color: var(--m-texto); }
article img { max-width: 100%; height: auto; border-radius: .5rem; }
blockquote { border-left: 4px solid var(--m-amarillo); color: var(--m-suave); padding-left: 1rem; }
code, pre { background: var(--m-surface); color: var(--m-cian); border-radius: .35rem; }
pre { padding: 1rem; border: 1px solid var(--m-borde); }

/* Barra de desplazamiento y selección acordes */
* { scrollbar-color: var(--m-surface-2) var(--m-bg); }

/* Insignias y fondos de color de Bootstrap: texto legible sobre el amarillo/cian de marca */
.bg-primary, .badge.bg-primary { background-color: var(--m-amarillo) !important; color: var(--m-tinta-sobre-amarillo) !important; }
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary .h4, .bg-primary p, .bg-primary a { color: var(--m-tinta-sobre-amarillo); }
.bg-info, .badge.bg-info { background-color: var(--m-cian) !important; color: var(--m-tinta-sobre-amarillo) !important; }
.bg-secondary, .badge.bg-secondary { background-color: var(--m-surface-2) !important; color: var(--m-texto) !important; border: 1px solid var(--m-borde); }
.card .text-dark, .bg-white .text-dark, a.text-dark { color: #fff !important; }
.text-dark a:hover { color: var(--m-amarillo) !important; }

/* ---------- Tipografía: Plus Jakarta Sans (títulos, interfaz) + Inter (texto) ---------- */
:root { --m-fuente-titulo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --m-fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: var(--m-fuente-texto); }
body { font-family: var(--m-fuente-texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar, .btn, .badge { font-family: var(--m-fuente-titulo); }
h1, h2, .section-heading { letter-spacing: -.02em; }
.page-section h3.section-subheading { font-style: normal; font-family: var(--m-fuente-texto); font-size: 1.1rem; }
.portfolio-caption-subheading, .timeline .timeline-heading h4.subheading, header.masthead .masthead-subheading { font-style: normal; font-family: var(--m-fuente-texto); }
header.masthead .masthead-subheading { font-weight: 600; letter-spacing: .02em; font-size: 1.15rem; }

/* ---------- Portada: se ve la parte colorida de la imagen (la mitad baja de la foto) ---------- */
header.masthead { background-position: center 85%; }
header.masthead::before {
  background:
    radial-gradient(48rem 20rem at 85% 0%, rgba(0, 211, 249, .10), transparent 60%),
    radial-gradient(40rem 20rem at 5% 100%, rgba(255, 109, 194, .08), transparent 60%),
    linear-gradient(180deg, rgba(20, 24, 28, .55) 0%, rgba(20, 24, 28, .22) 55%, rgba(20, 24, 28, .12) 100%);
}
header.masthead h1, header.masthead .lead { text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }

/* =====================================================================
   CAPA TECNOLÓGICA
   Reparto de colores (cada uno tiene una función):
     amarillo = acción y marca (botones, enlaces, cifras clave)
     cian     = datos y tecnología (gráficos, foco, líneas de luz)
     rosa     = énfasis puntual (alertas, bajas, un detalle por pantalla)
     azul     = profundidad (resplandores de fondo), nunca texto pequeño
   ===================================================================== */
:root { --m-fuente-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --m-brillo-amarillo: 0 0 0 1px rgba(255, 200, 0, .5), 0 .6rem 1.8rem rgba(255, 200, 0, .22);
  --m-brillo-cian: 0 0 0 1px rgba(0, 211, 249, .45), 0 .6rem 1.8rem rgba(0, 211, 249, .18); }

/* Retícula de puntos muy tenue sobre todo el sitio (sensación de panel de datos) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.page-section, .page-section.bg-light { position: relative; }
.page-section { background-color: transparent; }
.page-section.bg-light { background: linear-gradient(180deg, rgba(24, 29, 34, .85), rgba(20, 24, 28, .4)) !important; }
/* línea de luz entre secciones */
.page-section + .page-section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(70%, 60rem); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0, 211, 249, .45), rgba(255, 200, 0, .45), transparent);
}

/* Portada: retícula técnica que se desvanece + brillo bajo el botón */
header.masthead::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(0, 211, 249, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 211, 249, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
}
header.masthead .masthead-subheading {
  display: inline-block; font-family: var(--m-fuente-mono); font-style: normal; font-size: .85rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--m-cian); padding: .45rem 1rem; border: 1px solid rgba(0, 211, 249, .35); border-radius: 999px;
  background: rgba(0, 211, 249, .07); line-height: 1.2; margin-bottom: 1.25rem;
}
header.masthead h1 { font-weight: 800; letter-spacing: -.025em; }
header.masthead .btn-primary { box-shadow: var(--m-brillo-amarillo); }
header.masthead .btn-primary:hover { box-shadow: 0 0 0 1px var(--m-amarillo), 0 .8rem 2.2rem rgba(255, 200, 0, .38); transform: translateY(-2px); }
.btn { transition: transform .18s, box-shadow .18s, background-color .18s, border-color .18s; }

/* Títulos de sección: etiqueta mono con numeración de módulo + degradado en la línea */
.page-section h2.section-heading { font-weight: 800; }
.page-section h2.section-heading::after { width: 5rem; height: 3px; box-shadow: 0 0 14px rgba(0, 211, 249, .55); }

/* Tarjetas de vidrio con borde luminoso al pasar el cursor */
.h-100.p-4.border.rounded, .card, #portfolio .portfolio-item, .ins-card, .sq-tarjeta {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.h-100.p-4.border.rounded { background: linear-gradient(145deg, rgba(34, 42, 49, .8), rgba(26, 32, 38, .6)) !important; position: relative; }
.h-100.p-4.border.rounded:hover { border-color: rgba(0, 211, 249, .55) !important; box-shadow: var(--m-brillo-cian); }
.h-100.p-4.border.rounded h4 { font-weight: 700; }
.h-100.p-4.border.rounded h4::before {
  content: ""; display: block; width: 1.6rem; height: 3px; margin-bottom: .75rem; border-radius: 2px; background: var(--m-amarillo);
  transition: width .25s;
}
.h-100.p-4.border.rounded:hover h4::before { width: 3.2rem; background: var(--m-cian); }
#portfolio .portfolio-item:hover { border-color: rgba(255, 200, 0, .5); box-shadow: var(--m-brillo-amarillo); }

/* Iconos de servicios: círculo con degradado y halo */
.fa-stack.fa-4x { filter: drop-shadow(0 0 14px rgba(255, 200, 0, .35)); }
.col-lg-3:nth-child(even) .fa-stack.fa-4x { filter: drop-shadow(0 0 14px rgba(0, 211, 249, .4)); }
.col-lg-3:nth-child(even) .fa-stack .fa-circle { color: var(--m-cian) !important; }

/* Cifras y etiquetas técnicas en monoespaciada */
.ins-kpi, .ins-kpi-grande, .sq-kpi, .cta-kpi-valor, .inf-kpi-valor, .wg-precio { font-family: var(--m-fuente-mono) !important; letter-spacing: -.02em; }
.ins-suave, .sq-etiqueta, .adqp-eyebrow, .au-lado-etq, .cta-servicio-etq, .inf-meta, .cta-insight-meta, .ld-rol { font-family: var(--m-fuente-mono); letter-spacing: .08em; }

/* Navegación: subrayado de luz en el enlace activo/hover */
#mainNav .navbar-nav .nav-item .nav-link { position: relative; }
@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link::after {
    content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -.35rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--m-amarillo), var(--m-cian)); transform: scaleX(0); transform-origin: left; transition: transform .25s;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover::after, #mainNav .navbar-nav .nav-item .nav-link.active::after { transform: scaleX(1); }
}

/* Contacto: formulario como panel */
#contact { background: radial-gradient(50rem 24rem at 50% 0%, rgba(46, 77, 208, .22), transparent 65%); }
#contact .form-control { background: rgba(34, 42, 49, .85); }

/* Pie con línea de luz */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-amarillo), var(--m-rosa), var(--m-cian), transparent); opacity: .7; }

/* Entrada suave al hacer scroll (solo si marca.js la activó) */
.m-anima .m-entra { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--m-delay, 0ms); }
.m-anima .m-entra.m-visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .m-anima .m-entra { opacity: 1; transform: none; transition: none; } .btn, .h-100.p-4.border.rounded { transition: none; } }
@media (max-width: 575.98px) { body::before { background-size: 22px 22px; } header.masthead::after { background-size: 40px 40px; } }

/* Fondo animado de la portada (static/js/fondo-datos.js): detrás del texto, sin capturar clics */
.m-fondo-datos { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }

/* Logos de organizaciones (PNG/WebP con letras azules): placa clara para que se lean sobre el fondo oscuro */
.bg-light .row.align-items-center .col-sm-4 > a { display: block; padding: 1rem 1.25rem; border-radius: var(--m-radio); background: #f3f5f8; box-shadow: var(--m-sombra); max-width: 22rem; margin: 0 auto; transition: transform .2s; }
.bg-light .row.align-items-center .col-sm-4 > a:hover { transform: translateY(-3px); }
.bg-light .row.align-items-center .col-sm-4 > a img { max-height: 8rem; width: auto; object-fit: contain; }