/* 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;white-space:nowrap;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); aquí 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}

/* El menú completo en una fila necesita ~1.230px en español (en inglés, ~1.130).
   Más angosto, las opciones se partían en dos o tres renglones y los botones de
   la derecha quedaban cortados fuera de la pantalla: por eso el botón (≡) aparece
   desde 1.250px (con margen para la barra de desplazamiento de Windows), y entre
   1.251 y 1.360px la fila se compacta un poco. Al sumar una opción al menú, vuelve
   a medir estos dos cortes. */
@media (min-width:1251px) and (max-width:1360px){
  nav.top{padding:18px 20px}
  nav.top ul{gap:12px;padding:0 14px}
  nav.top .navcta{gap:8px}
  nav.top .btn{padding:11px 14px}
  nav.top .btn.lang{padding:11px 12px}
}
@media (max-width:1250px){
  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){
  /* En el celular el header va en una sola fila: logo, «Empezar gratis» y ≡. El
     idioma, «Iniciar sesión» y «Pedir demo» pasan al menú. En dos filas ocupaba
     ~129px fijos (el 17 % de una pantalla de 740). El margen de los saltos a un
     ancla (#demos-escenas, #contacto) sigue al alto del header. */
  html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
  /* Cada propiedad va explícita: varias páginas traen su propio header de dos
     filas (flex-wrap, .navcta al 100 %) y esta hoja tiene que ganarle. */
  nav.top{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
  nav.top .brand{flex:1 1 auto;width:auto;align-items:center;min-width:0}
  nav.top .brand .logo{font-size:24px}
  nav.top .navcta{width:auto;flex:0 0 auto;justify-content:flex-end;gap:8px;order:0}
  nav.top .navmobile{order:0;flex:0 0 auto}
  nav.top .navcta .btn.lang,nav.top .navcta .btn.signin,nav.top .navcta .btn.demo{display:none}
  nav.top .navcta .btn.primary{flex:0 0 auto;font-size:13px;padding:10px 14px;white-space:nowrap}
  nav.top .navmobile .panel{padding:4px 16px 20px}
  nav.top .navmobile .items{grid-template-columns:1fr}
  nav.top .navmobile .panel-cta{flex-wrap:wrap}
  nav.top .navmobile .panel-cta .btn{display:inline-flex;flex:1 1 auto;justify-content:center}
}
@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}
}

/* Producto: menú ancho con tres grupos y, a la derecha, el diagrama de la función
   bajo el mouse (lo cambia el script de inject_nav.py; sin él queda la primera).
   Se ancla al header y no al <li>, que está a la izquierda y lo sacaría de la
   pantalla. El tope negativo con su padding transparente es el puente para que el
   mouse no pierda el hover al bajar del enlace al menú. Los selectores llevan
   li.mega para ganarle a los estilos de menú que algunas páginas traen inline. */
nav.top ul li.mega{position:static}
nav.top li.mega>.navmenu{left:50%;top:calc(100% - 28px);padding-top:30px;width:min(1120px,calc(100vw - 48px))}
nav.top li.mega .navmenu .mega-inner{flex-direction:row;gap:0;min-width:0;padding:0;overflow:hidden;border-radius:16px}
nav.top li.mega .mega-main{flex:1 1 auto;min-width:0;padding:20px 20px 14px;display:flex;flex-direction:column;gap:12px}
nav.top li.mega .mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
nav.top li.mega .mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
nav.top li.mega .mega-h{margin:0;padding:0 8px 8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6b6b6b)}
nav.top li.mega .navmenu a.mega-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;white-space:normal;color:var(--ink,#111)}
nav.top li.mega .mega-ic{flex:none;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:#f3eeea;color:var(--accent,#b83212);transition:background .15s,color .15s}
nav.top li.mega a.mega-item.on,nav.top li.mega a.mega-item:hover{background:#f7f4f1}
nav.top li.mega a.mega-item.on .mega-ic,nav.top li.mega a.mega-item:hover .mega-ic{background:var(--accent,#b83212);color:#fff}
nav.top li.mega a.mega-item.on .mega-name{color:var(--accent,#b83212)}
nav.top li.mega .mega-txt{display:flex;flex-direction:column;min-width:0}
nav.top li.mega .mega-name{font-size:14px;font-weight:600;line-height:1.3}
nav.top li.mega .mega-sub{font-size:12px;font-weight:400;color:var(--muted,#6b6b6b);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.top li.mega .mega-foot{margin:0;padding-top:12px;border-top:1px solid #eee;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted,#6b6b6b)}
nav.top li.mega .navmenu .mega-foot a{display:inline;padding:0;border-radius:0;font-weight:600;color:var(--ink,#111)}
nav.top li.mega .navmenu .mega-foot span a{color:var(--accent,#b83212)}
nav.top li.mega .navmenu .mega-foot a:hover{background:none;text-decoration:underline}
nav.top li.mega .mega-pv{flex:none;width:320px;box-sizing:border-box;padding:22px;background:#f7f4f1;border-left:1px solid #eee}
nav.top li.mega .pv{display:none;flex-direction:column;gap:12px;height:100%}
nav.top li.mega .pv.on{display:flex}
nav.top li.mega .pv-head{margin:0;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
nav.top li.mega .pv-head small{display:block;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6b6b6b)}
nav.top li.mega .pv-ic{flex:none;width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent,#b83212);color:#fff}
nav.top li.mega .pv-desc{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2,#3a3a3a);white-space:normal}
nav.top li.mega .pv-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
nav.top li.mega .pv-flow li{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#fff;border:1px solid #e6e0da;border-radius:12px;font-size:13px;line-height:1.4;white-space:normal}
nav.top li.mega .pv-flow b{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#b83212)}
/* La flecha entre dos pasos: un trazo y una punta, en el hueco de 22px. */
nav.top li.mega .pv-flow li+li::before{content:"";position:absolute;left:50%;top:-19px;width:1.5px;height:14px;background:var(--accent,#b83212)}
nav.top li.mega .pv-flow li+li::after{content:"";position:absolute;left:calc(50% - 3.5px);top:-9px;width:7px;height:7px;border-right:1.5px solid var(--accent,#b83212);border-bottom:1.5px solid var(--accent,#b83212);transform:rotate(45deg)}
nav.top li.mega .navmenu a.pv-more{display:inline;margin-top:auto;padding:0;font-size:13px;font-weight:600;color:var(--accent,#b83212)}
nav.top li.mega .navmenu a.pv-more:hover{background:none}
/* Celular: Producto lleva subtítulos de grupo y el ícono junto a cada función. */
nav.top .navmobile .items .items-h{grid-column:1/-1;margin:10px 0 0;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6b6b6b)}
nav.top .navmobile .items a .ic{flex:none;margin-right:8px;color:var(--accent,#b83212);vertical-align:-3px}
@media (prefers-reduced-motion:reduce){
  nav.top li.mega .mega-ic{transition:none}
}