/* =====================================================================
   Barra de ecosistema Databrain — estilos
   =====================================================================
   Todo va prefijado con dbb- porque este CSS convive con Divi en un lado
   y con el CSS de las landings en el otro. Las variables se declaran
   dentro de .dbb para no ensuciar :root de las paginas anfitrionas.
   Paleta tomada del manual: crimson #770f35, crimson profundo #42061f,
   rosa marca #ffe3e9, rosa suave #eda5b2.
   ===================================================================== */

.dbb {
  --dbb-crimson: #770f35;
  --dbb-profundo: #42061f;
  --dbb-rosa: #ffe3e9;
  --dbb-suave: #eda5b2;
  --dbb-tinta: #1a1013;
  --dbb-borde: rgba(26, 16, 19, .1);
  --dbb-fondo: rgba(255, 255, 255, .92);
  --dbb-sans: "Aeonik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dbb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  position: sticky;
  top: 0;
  /* Divi le pone z-index:99999 a la primera fila de CADA pagina (lo genera el
     propio constructor), asi que con 9000 la barra quedaba pegada arriba pero
     DIBUJADA POR DEBAJO del contenido al hacer scroll. 100000 la deja encima
     de todo lo que Divi genera para el contenido, y por debajo de los modales
     del sitio (1000000 y mas), que si tienen que taparla. */
  z-index: 100000;
  font-family: var(--dbb-sans);
  background: var(--dbb-fondo);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--dbb-borde);
  box-sizing: border-box;
}
.dbb *, .dbb *::before, .dbb *::after { box-sizing: border-box; }

/* El salto al contenido solo aparece al tabular. */
.dbb-saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--dbb-crimson); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0;
  font-size: 14px; text-decoration: none; z-index: 1;
}
.dbb-saltar:focus { left: 0; }

.dbb-caja {
  max-width: 1280px; margin: 0 auto; padding: 0 28px;
  height: 92px; display: flex; align-items: center; gap: 32px;
}

.dbb-logo { display: flex; align-items: center; flex: 0 0 auto; }
.dbb-logo img { display: block; height: 67px; width: auto; }

.dbb-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }

.dbb-boton, .dbb-enlace {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--dbb-tinta);
  text-decoration: none; border-radius: 8px;
  transition: background .16s ease, color .16s ease;
}
.dbb-boton:hover, .dbb-enlace:hover { background: rgba(119, 15, 53, .07); color: var(--dbb-crimson); }
.dbb-boton:focus-visible, .dbb-enlace:focus-visible,
.dbb-cta:focus-visible, .dbb-ingresar:focus-visible {
  outline: 2px solid var(--dbb-crimson); outline-offset: 2px;
}

.dbb-flecha {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .5; transition: transform .18s ease;
}
.dbb-boton[aria-expanded="true"] .dbb-flecha { transform: rotate(-135deg); margin-top: 2px; }
.dbb-boton[aria-expanded="true"] { background: rgba(119, 15, 53, .07); color: var(--dbb-crimson); }

.dbb-item { position: relative; }

.dbb-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 310px; padding: 10px;
  background: #fff; border: 1px solid var(--dbb-borde); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(26, 16, 19, .14);
  display: grid; gap: 2px;
}
.dbb-menu[hidden] { display: none; }
/* Entre el boton y el menu hay 10px de aire. Sin esto, al bajar el puntero se
   sale del elemento y el menu se cierra antes de llegar. El puente es
   invisible y solo existe para que el recorrido no se interrumpa. */
.dbb-menu::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -14px; height: 14px;
}
.dbb-menu--dos { grid-template-columns: 1fr 1fr; min-width: 430px; }
.dbb-menu--corto { min-width: 150px; }

.dbb-menu a {
  display: block; padding: 10px 12px; border-radius: 9px;
  text-decoration: none; color: var(--dbb-tinta);
  transition: background .14s ease;
}
.dbb-menu a:hover { background: var(--dbb-rosa); }
/* Icono del producto, el mismo que usa el selector de la aplicacion. */
.dbb-menu a:has(> i) { display: grid; grid-template-columns: 34px 1fr; align-items: start; column-gap: 4px; }
.dbb-menu a > i { grid-row: 1 / 3; font-size: 19px; line-height: 1.2; color: var(--dbb-crimson); }
.dbb-menu strong { display: block; font-size: 14.5px; font-weight: 600; }
.dbb-menu span {
  display: block; margin-top: 3px; font-size: 12.5px;
  line-height: 1.45; color: rgba(26, 16, 19, .58);
}
.dbb-menu-pie {
  grid-column: 1 / -1; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--dbb-borde);
  font-family: var(--dbb-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dbb-crimson);
}

.dbb-acciones { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dbb-idioma .dbb-boton { font-family: var(--dbb-mono); font-size: 12px; letter-spacing: .08em; }
.dbb-idioma .dbb-menu { left: auto; right: 0; }

.dbb-ingresar { font-size: 14.5px; color: var(--dbb-tinta); text-decoration: none; padding: 9px 12px; border-radius: 8px; }
.dbb-ingresar:hover { color: var(--dbb-crimson); background: rgba(119, 15, 53, .07); }

.dbb-cta {
  padding: 10px 20px; border-radius: 999px;
  background: var(--dbb-crimson); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, transform .16s ease;
}
.dbb-cta:hover { background: var(--dbb-profundo); transform: translateY(-1px); }

/* Seccion activa */
.dbb[data-db-activo="ia"] [data-db-seccion="ia"],
.dbb[data-db-activo="remote"] [data-db-seccion="remote"],
.dbb[data-db-activo="lab"] [data-db-seccion="lab"],
.dbb[data-db-activo="recursos"] [data-db-seccion="recursos"],
.dbb[data-db-activo="planes"] [data-db-seccion="planes"] { color: var(--dbb-crimson); }
.dbb[data-db-activo="planes"] .dbb-enlace[data-db-seccion="planes"] { background: rgba(119, 15, 53, .07); }

/* --- Hamburguesa y movil --- */
.dbb-hamburguesa {
  display: none; width: 40px; height: 40px; padding: 9px;
  border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.dbb-hamburguesa span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--dbb-tinta); transition: transform .2s ease, opacity .2s ease;
}
.dbb-hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.dbb-hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dbb-hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 1023px) {
  .dbb-caja { height: 78px; padding: 0 18px; gap: 14px; }
  .dbb-hamburguesa { display: flex; }
  .dbb-ingresar, .dbb-cta { display: none; }
  .dbb-nav {
    position: fixed; inset: 58px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 18px 24px;
    background: #fff; border-bottom: 1px solid var(--dbb-borde);
    box-shadow: 0 18px 48px rgba(26, 16, 19, .14);
    max-height: calc(100dvh - 78px); overflow-y: auto;
  }
  .dbb-nav[data-abierto="no"] { display: none; }
  .dbb-boton, .dbb-enlace { width: 100%; justify-content: space-between; padding: 14px 6px; font-size: 16px; }
  .dbb-menu {
    position: static; min-width: 0; box-shadow: none; border: 0;
    border-radius: 0; padding: 0 0 8px 6px; background: none;
  }
  .dbb-menu--dos { grid-template-columns: 1fr; min-width: 0; }
  .dbb-nav .dbb-cta, .dbb-nav .dbb-ingresar { display: block; text-align: center; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dbb *, .dbb *::before, .dbb *::after { transition: none !important; }
}

/* =====================================================================
   Pie de ecosistema
   ===================================================================== */

.dbf {
  --dbf-crimson: #770f35;
  --dbf-profundo: #42061f;
  --dbf-rosa: #ffe3e9;
  --dbf-suave: #eda5b2;
  --dbf-sans: "Aeonik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dbf-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--dbf-profundo);
  color: var(--dbf-rosa);
  font-family: var(--dbf-sans);
  box-sizing: border-box;
}
.dbf *, .dbf *::before, .dbf *::after { box-sizing: border-box; }

.dbf-caja { max-width: 1280px; margin: 0 auto; padding: 68px 28px 34px; }

.dbf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 32px; }
@media (min-width: 720px)  { .dbf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .dbf-grid { grid-template-columns: 1.7fr repeat(4, 1fr); gap: 48px; } }

.dbf-marca { grid-column: 1 / -1; }
@media (min-width: 1080px) { .dbf-marca { grid-column: auto; } }
.dbf-logo { display: block; height: 34px; width: auto; margin-bottom: 18px; }
.dbf-lema { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 227, 233, .72); max-width: 34ch; }

.dbf-redes { display: flex; gap: 10px; }
.dbf-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 227, 233, .22);
  color: var(--dbf-rosa); font-size: 16px; text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.dbf-redes a:hover { background: rgba(255, 227, 233, .12); border-color: rgba(255, 227, 233, .5); }

.dbf-titulo {
  margin: 0 0 14px; font-family: var(--dbf-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dbf-suave);
}
.dbf-col ul { margin: 0; padding: 0; list-style: none; }
.dbf-col li { margin-bottom: 9px; }
.dbf-col a {
  font-size: 14px; line-height: 1.45; text-decoration: none;
  color: rgba(255, 227, 233, .85); transition: color .14s ease;
}
.dbf-col a:hover { color: #fff; }

.dbf-abajo {
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid rgba(255, 227, 233, .15);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; align-items: center;
  font-family: var(--dbf-mono); font-size: 11.5px;
  color: rgba(255, 227, 233, .55);
}
.dbf-abajo a { color: inherit; text-decoration: none; }
.dbf-abajo a:hover { color: var(--dbf-rosa); }
.dbf-idiomas { display: flex; gap: 18px; }

@media (max-width: 719px) {
  .dbf-caja { padding: 48px 20px 28px; }
  .dbf-abajo { margin-top: 38px; }
}

/* Las entradas con icono son una rejilla de icono + titulo + descripcion. */
.dbb-menu a:has(> i) > i { grid-row: 1 / span 2; }