/* Constante · barra.css — la barra de arriba de la web pública: marca, ES | EN, modo oscuro, «Entrar», «Crear cuenta gratis»
   y, debajo, las pestañas de producto. La usan la portada, las páginas de producto y precios (después de portada.css y
   productos.css) y las páginas generadas de la calculadora pública (/kpis/), cada KPI y el blog (scripts/barra.js copia el
   HTML de la portada). Todo va dentro de .barra para que funcione igual sobre cualquier otra hoja de estilos. */

.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--papel) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--linea);line-height:1.6;font-family:var(--f-texto)}
.barra,.barra *{box-sizing:border-box}
.barra a{color:inherit}
.barra .envoltura{max-width:var(--ancho,1160px);margin:0 auto;padding-inline:clamp(16px,4vw,40px);display:flex;align-items:center;gap:28px;height:68px}
.barra .marca{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--f-titulo);font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--tinta)}
.barra .marca svg{width:26px;height:20px;flex:none}
.barra .marca .punto{color:var(--verde)}
/* La barra entra en una línea: ningún texto se parte y el modo oscuro va solo con el icono (su nombre queda en aria-label) */
.barra .acciones{margin-left:auto;display:flex;align-items:center;gap:8px}
.barra .acciones > *{white-space:nowrap}
.barra .tema .tema-txt{display:none}
.barra .tema{padding:8px}
.barra .entrar{text-decoration:none;font-weight:600;font-size:15px;padding:9px 14px;border-radius:999px;color:var(--tinta);transition:background .2s,transform .15s}
.barra .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--tinta);color:var(--sobre-tinta);text-decoration:none;font-family:var(--f-texto);font-weight:650;line-height:1.2;border-radius:999px;border:1px solid var(--tinta);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease}
.barra .btn.peq{font-size:14.5px;padding:10px 16px}
.barra .btn .corto{display:none}
.barra .btn .flecha{transition:transform .15s}

/* Pestañas de producto: segunda fila. En el móvil se desliza de lado dentro de su fila, sin mover la página. */
.barra .envoltura.pestanas-prod{height:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;margin-top:-6px}
.barra .pestanas-prod::-webkit-scrollbar{display:none}
.barra .pestanas-prod a{flex:none;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--tinta-2);padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .2s,color .2s}
.barra .pestanas-prod a[aria-current="page"]{background:var(--tinta);color:var(--sobre-tinta)}
.barra .pestanas-prod .mini-chip{font-size:11px;font-weight:700;line-height:1.5;padding:0 6px;border-radius:4px;background:var(--verde-suave);color:var(--verde)}
.barra .pestanas-prod a[aria-current="page"] .mini-chip{background:color-mix(in srgb,var(--sobre-tinta) 18%,transparent);color:var(--sobre-tinta)}

/* Estados: al pasar el ratón (solo con ratón: en el móvil se quedaría pegado), al pulsar y con el teclado */
.barra .btn,.barra .entrar,.barra .pestanas-prod a{-webkit-tap-highlight-color:transparent}
.barra :focus-visible{outline:2.5px solid var(--verde);outline-offset:3px;border-radius:4px}
@media (hover:hover){
  .barra .btn:hover{box-shadow:0 8px 22px -10px var(--tinta);transform:translateY(-1px)}
  .barra .btn:hover .flecha{transform:translateX(3px)}
  .barra .entrar:hover{background:var(--papel-2);color:var(--tinta)}
  .barra .pestanas-prod a:not([aria-current="page"]):hover{background:var(--papel-2);color:var(--tinta)}
}
.barra .btn:active{transform:translateY(0) scale(.98)}
.barra .entrar:active{transform:scale(.96)}

/* En las páginas generadas el contenido empieza justo debajo de la barra: un poco de aire */
.barra + .wrap{padding-top:clamp(20px,4vw,36px)}

/* Móvil: la barra cabe entera desde 320 px (marca algo menor, huecos más justos y «Crear cuenta» sin flecha) */
@media (max-width:620px){
  .barra .envoltura{height:60px;gap:8px}
  .barra .envoltura.pestanas-prod{height:auto;margin-top:-4px}
  .barra .acciones{gap:2px}
  .barra .marca{font-size:20px;gap:7px}
  .barra .marca svg{width:22px;height:17px}
  .barra .btn.peq{padding:9px 14px}
  .barra .btn.peq .largo,.barra .btn.peq .flecha{display:none}
  .barra .btn.peq .corto{display:inline}
  .barra .entrar{padding:8px 8px}
}
/* El selector de idioma, en el móvil, solo con el idioma al que cambias («EN» o «ES»): «ES | EN» entero no cabe */
@media (max-width:620px){
  .barra .idioma{padding:8px 6px}
  .barra .idioma span.on,.barra .idioma .sep{display:none}
  .barra .idioma span[data-i]{opacity:1}
}
/* Por debajo de 440 px no caben la marca entera, el idioma, el modo, «Entrar» y «Crear cuenta»: queda el logo */
@media (max-width:439px){
  .barra .marca > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .barra .marca svg{width:26px;height:20px}
}
@media (max-width:374px){
  .barra .envoltura{padding-inline:12px}
  .barra .entrar{padding:8px 6px}
  .barra .btn.peq{padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){ .barra *{transition:none!important} }
@media print{ .barra{display:none!important} }
/* Con la sesión abierta (js/barra-sesion.js): tu nombre en lugar de «Entrar» (si es largo, se acorta) y, en el móvil, un icono */
.barra .entrar.usuario{max-width:220px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){
  .barra .entrar.usuario{width:35px;height:35px;padding:0;border-radius:999px;font-size:0;display:inline-flex;align-items:center;justify-content:center}
  .barra .entrar.usuario::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:var(--icono-cuenta-barra) center / contain no-repeat;mask:var(--icono-cuenta-barra) center / contain no-repeat}
}
.barra{--icono-cuenta-barra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Ccircle cx='10' cy='8.3' r='2.6'/%3E%3Cpath d='M5.6 15.2c1-1.7 2.6-2.6 4.4-2.6s3.4.9 4.4 2.6' stroke-linecap='round'/%3E%3C/svg%3E")}