/* ══════════════════════════════════════════════════════════════════════
   EL HEADER DEL SITIO · fuente única
   ----------------------------------------------------------------------
   Una sola barra para el home y para todas las landings. El home la pinta
   con el markup del bundle (header > nav, clases .scp*) y las landings con
   el suyo (.site-header > .bar), así que cada regla se escribe para los
   dos: primero el selector de la landing, después el del home.

   Las medidas salen del header vivo del home, medido a 1440px:
     barra translúcida blanca de 68px, saturate(180%) blur(18px)
     caja de 1180px con 32px de padding
     logo de 38px de alto
     links de 15/600 en #5a7077
     pastilla de idioma fantasma: globo + código + chevron, 14/700
     botón de demo indigo #606ff7, radio 10, padding 11/20

   El acento del hover es #606ff7 en todo: el link, el globo y el borde de
   la pastilla. Es el único color que se mueve.

   Los valores van en hexadecimal a propósito: cada página define sus
   propias variables de rol (--accent, --ink) con valores distintos, y esta
   hoja tiene que verse igual en todas. El !important es sólo para el home,
   donde hay que ganarle al estilo inline que trae el template del bundle.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* El globo de la pastilla de idioma: círculo, meridiano y dos paralelos.
     Trazo, no relleno, que a 14px es lo que se lee. */
  --sx-globo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cellipse cx='12' cy='12' rx='4.3' ry='9.2'/%3E%3Cpath d='M2.9 9h18.2M2.9 15h18.2'/%3E%3C/svg%3E");
}

/* ── la barra ───────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid #eef3f4;
}
.site-header .bar{
  max-width:1180px;margin-inline:auto;padding-inline:32px;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* .stuck y .solid son los estados que cada página se pone al scrollear, y
   .nav-open el del panel del menú. La barra no cambia de color —como en el
   home—, sólo se cierra un poco el velo. */
.site-header.stuck,.site-header.solid{background:rgba(255,255,255,.88)}
.site-header.nav-open{background:#fff}

/* ── el logo ────────────────────────────────────────────────────────── */
.site-header .logo{display:flex;align-items:center}
.site-header .logo img{height:38px;width:auto;display:block}
/* Las páginas que traen el par de logos (claro para fondo oscuro, oscuro
   para fondo claro) muestran el oscuro: la barra es blanca siempre. */
.site-header .logo .on-dark{display:none}

/* ── los links ──────────────────────────────────────────────────────── */
.hnav{display:flex;align-items:center;gap:26px}
.hnav a{
  font-size:15px;font-weight:600;line-height:22px;color:#5a7077;text-decoration:none;
  white-space:nowrap;transition:color .18s ease;
}
.hnav a:hover{color:#606ff7}

/* ── el bloque derecho ──────────────────────────────────────────────── */
.site-header .right{display:flex;align-items:center;gap:14px}
.site-header .demo{
  display:inline-flex;align-items:center;gap:8px;
  background:#606ff7;color:#fff;padding:11px 20px;border-radius:10px;
  font-size:15px;font-weight:700;line-height:22px;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 16px rgba(96,111,247,.24);
  transition:background-color .18s ease;
}
.site-header .demo:hover{background:#8891fa}
.site-header .demo .arw{opacity:.62;transition:transform .18s ease,opacity .18s ease}
.site-header .demo:hover .arw{opacity:1;transform:translateX(2px)}
/* En español y portugués el rótulo es largo y el botón va sin flecha, que
   es lo que hace el home con html[lang] .scp3 .fa-arrow-right. */
html[lang="es"] .site-header .demo .arw,
html[lang="pt"] .site-header .demo .arw,
html[lang="pt-BR"] .site-header .demo .arw{display:none}

/* ── la pastilla del idioma ─────────────────────────────────────────── */
/* Fantasma: sin fondo ni borde, gris hasta el hover. En el home el globo es
   un glifo de Font Awesome (\f0ac); en las landings es un SVG, porque no
   cargan FA. Se ven igual. */
.syt-lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid transparent;border-radius:9999px;padding:8px 12px;
  font-size:14px;font-weight:700;color:#5a7077;background:transparent;
  cursor:pointer;font-family:inherit;
  transition:color .18s ease,background-color .18s ease;
}
.lang-chev{color:#8ea4aa;transition:transform .2s ease}
.lang-btn:hover{color:#1c2829;background:#f1f2fe}

/* El globo, el mismo dibujo en los dos markups: una máscara con el SVG, no
   un glifo ni un <svg> en el markup. Va como máscara y no como imagen para
   que el color salga de background-color y el hover sea un solo cambio. */
.lang-btn::before,
#syt-lang>button.scp1::before{
  content:"";flex:none;display:inline-block;width:14px;height:14px;
  background-color:#8ea4aa;transition:background-color .18s ease;
  -webkit-mask:var(--sx-globo) center/contain no-repeat;
  mask:var(--sx-globo) center/contain no-repeat;
}
.lang-btn:hover::before,
#syt-lang>button.scp1:hover::before{background-color:#606ff7}
.syt-lang.open .lang-chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:#fff;
  border:1px solid #d6e2e4;border-radius:10px;box-shadow:0 8px 24px rgba(28,40,41,.12);
  padding:6px;min-width:92px;display:grid;gap:2px;z-index:60;
}
.lang-menu[hidden]{display:none}
.lang-menu button{
  text-align:left;background:none;border:0;font-family:inherit;
  font-size:14px;font-weight:600;color:#2d3c3e;padding:8px 12px;
  border-radius:7px;cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.lang-menu button:hover{background:rgba(96,111,247,.16);color:#4a52c4}

/* ── el burger y el panel de mobile ─────────────────────────────────── */
.burger{
  display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:11px;
}
.burger span{display:block;width:22px;height:2px;background:#2d3c3e;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.site-header.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .burger span:nth-child(2){opacity:0}
.site-header.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hnav-lang{display:none}

@media (max-width:900px){
  .site-header .bar{padding-inline:20px;gap:12px}
  .burger{display:flex}
  .syt-lang{display:none}
  .hnav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid #d6e2e4;flex-direction:column;align-items:stretch;
    gap:0;padding:.25rem 20px 1.25rem;
  }
  .site-header.nav-open .hnav{display:flex}
  /* si el menu no entra, scrollea el; no se sale de la pantalla */
  .hnav{max-height:calc(100dvh - 8rem);overflow-y:auto;overscroll-behavior:contain}
  .hnav a{padding:1rem 0;border-bottom:1px solid #f3f6f7;font-size:1.05rem}
  .hnav-lang{display:flex;gap:.5rem;padding-top:1.1rem}
  .hnav-lang button{
    font-family:inherit;font-weight:800;font-size:.78rem;color:#5a7077;
    background:#f8fafa;border:1px solid #d6e2e4;border-radius:8px;
    padding:.5rem .95rem;cursor:pointer;transition:border-color .15s ease,color .15s ease;
  }
  .hnav-lang button:hover{border-color:#606ff7;color:#606ff7}
}

/* ══════════════════════════════════════════════════════════════════════
   EL MISMO HEADER EN EL HOME
   El home no tiene este markup: la barra sale del bundle del design tool,
   con estilo inline en cada nodo y clases generadas (.scp0 los links,
   .scp1 la pastilla, .scp3 el botón). De ahí el !important, que es lo
   único que le gana a un estilo inline. El script del home inyecta el
   <link> a esta hoja en cada pasada de run(), porque el runtime recrea los
   nodos y se lleva puesto lo que no esté en el <head>.
   ══════════════════════════════════════════════════════════════════════ */

/* los links del home: mismo gris, mismo hover indigo */
header .sx-navlinks>a:hover{color:#606ff7!important}

/* la pastilla del home: fantasma; el globo lo pone la regla de arriba */
#syt-lang>button.scp1{
  background:transparent!important;border-color:transparent!important;
  color:#5a7077!important;font-weight:700!important;padding:8px 12px!important;
  transition:color .18s ease,background-color .18s ease!important;
}
#syt-lang>button.scp1:hover{color:#1c2829!important;background:#f1f2fe!important}
#syt-lang>button.scp1 .fa-chevron-down{color:#8ea4aa!important}

/* el desplegable del home */
#syt-lang .scp2{transition:background-color .15s ease,color .15s ease!important}
#syt-lang .scp2:hover{background:rgba(96,111,247,.16)!important}
#syt-lang .scp2:hover>span{color:#4a52c4!important}

/* el botón de demo del home */
header a.scp3:hover{background:#8891fa!important}

/* ── "Use cases" despliega las cinco landings ────────────────────────
   Mismo menú que el header del home, para que el header se comporte
   igual en todo el sitio. Abre por :hover / :focus-within con :has(),
   sin JavaScript. El markup vive en cada landing (estático: lo leen los
   crawlers y enlaza las landings entre sí). */
@media (min-width:901px){ .hnav{position:relative} }
.uc-trigger::after{
  content:"";display:inline-block;width:5.5px;height:5.5px;margin-left:7px;vertical-align:1px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;opacity:.75;
}
.hnav:has(> .uc-trigger:hover) .uc-trigger::after,
.hnav:has(> .ucm:hover) .uc-trigger::after{transform:translateY(1px) rotate(-135deg);opacity:1}
.ucm{
  position:absolute;top:100%;left:-14px;margin-top:13px;width:336px;padding:8px;
  border-radius:14px;background:#fff;border:1px solid #eef1f3;
  box-shadow:0 26px 54px -18px rgba(20,30,45,.28),0 4px 10px rgba(20,30,45,.05);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60;
}
/* el puente: sin esto el mouse pierde el hover al cruzar el margen */
.ucm::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.hnav:has(> .uc-trigger:hover) .ucm,
.hnav:has(> .uc-trigger:focus-visible) .ucm,
.ucm:hover,.ucm:focus-within{opacity:1;visibility:visible;transform:none}
.ucm a{display:block;padding:9px 11px;border-radius:10px;text-decoration:none;transition:background .14s ease}
.ucm a:hover{background:#f1f2fe}
.ucm b{display:block;font-size:14px;font-weight:700;color:#253031;line-height:1.25}
.ucm span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:#5a7077}
.ucm a:hover b{color:#4a52c4}
/* la página en la que estás, marcada y sin link muerto al hover */
.ucm a[aria-current]{background:#f7f8ff}
.ucm a[aria-current] b{color:#4a52c4}

@media (max-width:900px){
  /* dentro del burger no es desplegable: cae como sub-lista */
  .ucm{
    position:static;width:auto;margin:0;padding:.1rem 0 .5rem .75rem;
    border:0;border-radius:0;background:transparent;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
  }
  .ucm::before{display:none}
  .hnav .ucm a{padding:.7rem 0;border-bottom:0;font-size:1rem}
  .uc-trigger::after{transform:translateY(1px) rotate(-135deg);opacity:1}
}