/* ==========================================================
   bigQ — Grupo Datán
   Capa de rebranding. Se carga DESPUÉS de style.css y aplica
   la identidad del Manual de Marca sin reescribir el CSS base,
   de modo que el cambio es reversible quitando este archivo.
   ========================================================== */

:root {
  /* Paleta institucional Grupo Datán (Manual de Marca bigQ) */
  --datan-primary: #011E41;   /* Azul Oscuro  - Pantone 282C - tono dominante */
  --datan-accent:  #FA4616;   /* Naranja Rojizo - Pantone 172C - acento */

  /* Derivados para superficies y estados */
  --datan-primary-soft: #0A2E5C;
  --datan-accent-hover: #E03A0F;
  --datan-ink:          #1F2937;
  --datan-muted:        #5B6675;
  --datan-line:         #E3E7EC;
  --datan-surface:      #F5F7F9;

  /* Colores heredados de bigQ, preservados como variables */
  --bigq-primary: #03468f;
  --bigq-accent:  #3ec1d5;

  /* Sistema visual compartido con el ecosistema del grupo */
  --datan-radius-pill: 999px;
  --datan-radius: 8px;
  --datan-font: 'Roobert', 'Raleway', 'Open Sans', sans-serif;
}

/* ---------- Tipografía corporativa Roobert ----------
   Archivos provistos por el cliente en /assets/fonts/.
   NOTA: son versiones TRIAL; requieren licencia web antes de
   publicar en producción. */
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-Light-BF67243fd502239.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-LightItalic-BF67243fd51b2c9.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-Regular-BF67243fd53fdf2.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-RegularItalic-BF67243fd5414aa.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-Medium-BF67243fd53e059.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-MediumItalic-BF67243fd54022e.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-SemiBold-BF67243fd54213d.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-SemiBoldItalic-BF67243fd5409dc.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-Bold-BF67243fd540abb.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-BoldItalic-BF67243fd540e4b.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-Heavy-BF67243fd53e164.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Roobert'; src:url('/assets/fonts/RoobertTRIAL-HeavyItalic-BF67243fd53f821.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; }

/* Cuerpo en Regular; los CSS de íconos (fa/icofont/ti-) conservan
   su propia font-family por mayor especificidad. */
body {
  font-family: var(--datan-font);
  font-weight: 400;
}

/* Titulares y CTAs en peso alto, según jerarquía del manual */
h1, h2, h3, h4, h5, h6,
.uppercase,
#header .logo h1,
.nav-menu > ul > li > a,
.footer-head h4,
.btn {
  font-family: var(--datan-font);
}

h1, h2, h3, .footer-head h4 { font-weight: 800; }
h4, h5, h6 { font-weight: 600; }

/* ==========================================================
   HEADER — barra institucional del grupo
   ========================================================== */

#header {
  background: var(--datan-primary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#header.header-scrolled {
  background: var(--datan-primary) !important;
}

#header .container.d-flex {
  height: 100%;
  align-items: center;
}

/* Altura de barra alineada al ecosistema (Datán 87px, Datasystems 82px). */
#header {
  height: 92px;
  padding: 0;
}

#header.header-scrolled {
  height: 72px;
  padding: 0;
}

/* style.css constriñe el contenedor del logo a 60px de ancho, 82px de alto
   y lo desplaza con top:-45px (regla `.fixed-top > div > div`, con
   !important al scrollear). Eso deformaba y descolocaba el lockup. */
#header .container > .logo,
#header.header-scrolled .container > .logo {
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  position: relative;
}

#header .logo h1 {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Logo lockup bigQ + Grupo Datán.
   Las hermanas renderizan ~187px de ancho (Datasystems) y 204px (Datán).
   Nuestro lockup es más cuadrado (ratio ~2:1), así que se dimensiona por
   ancho para igualar ese peso visual y mantener legible "Grupo DATÁN". */
.header-logo {
  display: block;
  height: 62px;
  width: auto;
  transition: height .3s;
}

#header.header-scrolled .header-logo {
  height: 50px;
}

/* El header colapsa a 60px en mobile: el lockup se reduce para no
   desbordar, manteniendo el área de protección del manual. */
@media (max-width: 991.98px) {
  .header-logo,
  #header.header-scrolled .header-logo {
    height: 54px;
  }
}

@media (max-width: 768px) {
  #header,
  #header.header-scrolled {
    height: 76px;
    padding: 0;
  }
  .header-logo,
  #header.header-scrolled .header-logo {
    height: 48px;
  }
}

/* Enlace al grupo dentro de la navegación (patrón de las
   unidades hermanas: es un ítem más del menú, no un badge). */
.nav-menu > ul > li.nav-grupo > a {
  color: rgba(255, 255, 255, 0.75);
}

.nav-menu > ul > li.nav-grupo > a:hover {
  color: var(--datan-accent);
}

/* Navegación */
.nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a {
  color: var(--datan-accent);
}

.nav-menu .drop-down ul a:hover,
.nav-menu .drop-down ul .active > a,
.nav-menu .drop-down ul li:hover > a {
  color: var(--datan-accent);
}

/* ==========================================================
   BOTONES — sistema pill del ecosistema Datán
   ========================================================== */

.btn,
.btn-primary,
.btn-outline-secondary,
.btn-secondary {
  border-radius: var(--datan-radius-pill);
  font-weight: 600;
  padding: 9px 22px;
  transition: background-color .3s, border-color .3s, color .3s;
}

.btn-primary {
  background-color: var(--datan-primary);
  border-color: var(--datan-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--datan-accent) !important;
  border-color: var(--datan-accent) !important;
  color: #fff;
}

.btn-outline-secondary {
  color: var(--datan-primary);
  border-color: var(--datan-primary);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #fff;
  background-color: var(--datan-accent);
  border-color: var(--datan-accent);
}

.btn-link {
  color: var(--datan-primary);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--datan-accent);
}

/* Botones nativos del template (formularios, búsqueda) */
.php-email-form button[type="submit"],
.form.contact-form button[type="submit"] {
  border-radius: var(--datan-radius-pill);
  background-color: var(--datan-primary);
  font-weight: 600;
}

.php-email-form button[type="submit"]:hover,
.form.contact-form button[type="submit"]:hover {
  background-color: var(--datan-accent);
}

/* ==========================================================
   ACENTOS DE PALETA
   ========================================================== */

a:hover,
a:focus {
  color: var(--datan-accent);
}

/* El logo no debe teñirse con el hover global de enlaces */
#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
}

::selection {
  background: var(--datan-accent);
  color: #fff;
}

/* Titulares de sección: Azul Oscuro como tono dominante del manual */
.titu_int2 {
  color: var(--datan-primary);
}

.section-headline h2 {
  color: var(--datan-primary);
}

.section-headline h2::after {
  border-color: var(--datan-accent);
}

.back-to-top {
  background: var(--datan-primary);
  border-radius: var(--datan-radius-pill);
}

.back-to-top:hover {
  background: var(--datan-accent);
}

/* ==========================================================
   FOOTER — patrón del ecosistema Datán
   ========================================================== */

.footer-datan {
  border-top: 3px solid var(--datan-primary);
  padding-top: 20px;
}

.footer-datan h4 {
  color: var(--datan-primary);
}

.footer-datan-logo img {
  max-height: 44px;
  width: auto;
  margin-bottom: 14px;
}

.footer-datan p {
  color: var(--datan-muted);
}

.footer-datan a {
  color: var(--datan-primary);
  font-weight: 500;
  text-decoration: none;
}

.footer-datan a:hover {
  color: var(--datan-accent);
}

.footer-head h4 {
  color: var(--datan-primary);
}

.footer-brand-logo {
  height: 46px;
  width: auto;
}

/* Enlaces y datos de contacto del footer */
.footer-head ul li a,
.footer-contacts p span {
  color: var(--datan-primary);
}

.footer-head ul li a:hover {
  color: var(--datan-accent);
}

/* Íconos sociales */
.footer-icons ul li a {
  color: var(--datan-primary);
  border-color: var(--datan-line);
  transition: color .3s, border-color .3s;
}

.footer-icons ul li a:hover {
  color: var(--datan-accent);
  border-color: var(--datan-accent);
}

.footer-area-bottom {
  background: var(--datan-primary);
}

.footer-area-bottom .copyright p,
.footer-area-bottom .copyright strong {
  color: #fff;
}

/* ==========================================================
   PÁGINAS SINDICADAS DE PARTNERS (header/footer propio)
   ========================================================== */

.header-logo--light {
  height: 52px;
  width: auto;
}

/* ==========================================================
   PÁGINAS LEGALES "plain" (privacidad / bigq-privacidad)
   Sin header ni nav: solo tipografía y acento en títulos.
   ========================================================== */

html#plain {
  font-family: var(--datan-font);
  color: var(--datan-ink);
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  line-height: 1.6;
}

html#plain h2 {
  font-family: var(--datan-font);
  font-weight: 800;
  color: var(--datan-primary);
}

html#plain strong {
  color: var(--datan-primary);
}