/* Header global del sitio. El marcado lo escribe scripts/landing-seo/inject_nav.py
   en todas las páginas (y server/blog-template.mjs en el blog), así que el header
   se ve igual al navegar entre secciones. Todo va bajo nav.top para ganarle a los
   estilos propios de cada página sin depender del orden de carga. */
nav.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:18px 28px;border-bottom:1px solid #eee;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);font-family:"Inter Tight",sans-serif}
nav.top .brand{display:flex;align-items:baseline;gap:10px;color:var(--ink,#111);text-decoration:none}
nav.top .brand .logo{font-family:"Inter Tight",sans-serif;font-weight:650;font-size:26px;letter-spacing:-.03em}
nav.top .brand .logo i{font-style:normal;color:var(--accent,#b83212)}
nav.top .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent,#b83212);align-self:center;box-shadow:0 0 0 4px rgba(184,50,18,.18);animation:navpulse 2s ease-in-out infinite}
@keyframes navpulse{50%{box-shadow:0 0 0 9px rgba(184,50,18,0)}}

nav.top ul{display:flex;gap:16px;justify-content:center;list-style:none;margin:0;padding:0 20px}
nav.top ul li{position:relative}
nav.top ul a{display:inline-block;padding:6px 0;border-bottom:1px dashed transparent;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink,#111);text-decoration:none;transition:border-color .2s}
nav.top ul a:hover{border-color:var(--ink,#111)}
nav.top>ul>li>a[aria-current],nav.top>ul>li.is-current>a{border-bottom:1px solid var(--ink,#111)}
nav.top li.has-menu>a .caret{font-size:9px;opacity:.5;margin-left:3px}
nav.top .navmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:60}
nav.top li.has-menu:hover>.navmenu,nav.top li.has-menu:focus-within>.navmenu{display:block}
nav.top .navmenu .inner{display:flex;flex-direction:column;gap:2px;min-width:250px;padding:12px;background:var(--paper,#fff);border:1px solid #e6e6e6;border-radius:14px;box-shadow:0 18px 40px rgba(20,17,17,.14)}
nav.top .navmenu a{display:block;padding:8px 10px;border:0;border-radius:8px;white-space:nowrap}
nav.top .navmenu a:hover,nav.top .navmenu a[aria-current="page"]{background:var(--paper-2,#f7f7f7);color:var(--accent,#b83212)}

nav.top .navcta{justify-self:end;display:flex;gap:10px;align-items:center}
nav.top .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border:1px solid #e4e4e4;border-radius:999px;font-family:"Inter Tight",sans-serif;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;background:#fff;color:var(--ink,#111);text-decoration:none;transition:background .2s ease}
nav.top .btn:hover{background:#f6f6f6}
nav.top .btn.primary{background:var(--accent,#b83212);border-color:var(--accent,#b83212);color:#fff}
nav.top .btn.primary:hover{background:#9a2a0f;border-color:#9a2a0f}
nav.top .btn .arrow{transition:transform .25s}
nav.top .btn:hover .arrow{transform:translateX(4px)}
nav.top .btn.lang{padding:11px 14px;font-size:11px;font-weight:500;letter-spacing:.04em}
nav.top .btn.lang .mono{font:inherit;letter-spacing:inherit}
nav.top .btn.lang b{opacity:.45}

/* Menú de celular y tablet (<details>, ver inject_nav.py). Oculto en escritorio. */
nav.top .navmobile{display:none}
/* Las páginas estilizan details/summary para sus FAQ (borde, padding, "+" a la
   derecha, 24px); acá se neutraliza todo eso para que no se cuele en el menú. */
nav.top .navmobile,nav.top .navmobile .group{border:0;padding:0;margin:0}
nav.top .navmobile summary{gap:0;font-family:"Inter Tight",sans-serif;letter-spacing:0;line-height:1.2}
nav.top .navmobile>summary::after{content:none}
nav.top .navmobile>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #e4e4e4;border-radius:999px;background:#fff;color:var(--ink,#111);transition:background .2s}
nav.top .navmobile>summary::-webkit-details-marker{display:none}
nav.top .navmobile>summary:hover{background:#f6f6f6}
nav.top .navmobile>summary:focus-visible{outline:2px solid var(--accent,#b83212);outline-offset:2px}
nav.top .navmobile .bars{position:relative;display:block;width:16px;height:12px}
nav.top .navmobile .bars i{position:absolute;left:0;width:16px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s}
nav.top .navmobile .bars i:nth-child(1){top:0}
nav.top .navmobile .bars i:nth-child(2){top:5.25px}
nav.top .navmobile .bars i:nth-child(3){top:10.5px}
nav.top .navmobile[open] .bars i:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
nav.top .navmobile[open] .bars i:nth-child(2){opacity:0}
nav.top .navmobile[open] .bars i:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}
nav.top .navmobile .panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;padding:6px 28px 24px;background:var(--paper,#fff);border-bottom:1px solid #eee;box-shadow:0 24px 40px rgba(20,17,17,.12)}
nav.top .navmobile[open] .panel{animation:navpanel .25s cubic-bezier(.22,1,.36,1)}
@keyframes navpanel{from{opacity:0;transform:translateY(-6px)}}
nav.top .navmobile .group>summary,nav.top .navmobile .row{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0;border-bottom:1px solid #eee;font-size:16px;font-weight:600;color:var(--ink,#111);text-decoration:none;cursor:pointer;list-style:none}
nav.top .navmobile .group>summary::-webkit-details-marker{display:none}
nav.top .navmobile .group>summary::after{content:"";font-size:0;color:inherit;width:7px;height:7px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .25s cubic-bezier(.22,1,.36,1)}
nav.top .navmobile .group[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
nav.top .navmobile .items{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding:6px 0 12px;border-bottom:1px solid #eee}
nav.top .navmobile .items a{padding:10px 0;font-size:15px;color:var(--ink-2,#3a3a3a);text-decoration:none}
nav.top .navmobile .items a:hover,nav.top .navmobile .items a[aria-current],nav.top .navmobile .row[aria-current]{color:var(--accent,#b83212)}
/* El menú repite solo los botones que la barra esconde en ese ancho. */
nav.top .navmobile .panel-cta{display:flex;gap:10px}
nav.top .navmobile .panel-cta .btn{display:none;flex:1 1 0;margin-top:20px;font-size:14px;padding:11px 14px}

@media (max-width:1080px){
  nav.top{grid-template-columns:1fr auto auto;column-gap:10px}
  nav.top ul{display:none}
  nav.top .navmobile{display:block}
}
/* Entre celular y escritorio "Iniciar sesión" vive en el menú, para que quepan los demás. */
@media (max-width:860px) and (min-width:641px){
  nav.top .navcta .signin{display:none}
  nav.top .navmobile .panel-cta .signin{display:inline-flex}
}
@media (max-width:640px){
  nav.top{display:flex;flex-wrap:wrap;gap:12px;padding:14px 18px calc(14px + env(safe-area-inset-top))}
  nav.top .brand{flex:1 1 auto;width:auto;align-items:center;min-width:0}
  nav.top .brand .logo{font-size:25px}
  nav.top .navmobile{order:1}
  nav.top .navcta{order:2;width:100%;justify-content:space-between;gap:8px}
  nav.top .navcta .btn{font-size:13px;padding:9px 12px;min-width:0;flex:0 1 auto}
  nav.top .navcta .btn.signin,nav.top .navcta .btn.primary{flex:1 1 auto}
  nav.top .navmobile .panel{padding:4px 18px 20px}
  nav.top .navmobile .items{grid-template-columns:1fr}
}
/* En pantallas muy angostas se queda "Empezar gratis" y se esconde la demo (sigue en el menú). */
@media (max-width:439px){
  nav.top .navcta .btn.demo{display:none}
  nav.top .navmobile .panel-cta .demo{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  nav.top .brand .dot{animation:none}
  nav.top .navmobile[open] .panel{animation:none}
  nav.top .navmobile .bars i{transition:none}
}