/* Barra superior y pie del sitio público. Compartido por index.html y compat.html:
   el verificador tiene que leerse como parte del sitio, no como una página suelta.
   Extraído del <style> inline de index.html — mover, no rediseñar. */

/* ── TOPNAV ── */
.topnav{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(26,42,58,.97);backdrop-filter:blur(10px);
  padding:0 5%;display:flex;align-items:center;height:64px;
  border-bottom:1px solid rgba(76,175,80,.2)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo{width:38px;height:38px}
.nav-name{font-family:'Barlow Condensed',sans-serif;font-size:var(--fs-title);font-weight:800;
  color:#fff;letter-spacing:.5px}
.nav-name span{color:var(--green-light)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:28px}
.nav-link{color:#90a4ae;font-size:var(--fs-body);font-weight:500;text-decoration:none;
  padding:6px 12px;border-radius:var(--r-ctl);transition:all var(--t-fast) var(--ease)}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-cta{background:var(--green);color:#fff!important;border-radius:var(--r-ctl);
  padding:8px 20px!important;font-weight:700!important;transition:background .2s!important}
.nav-cta:hover{background:var(--green-dark)!important}
/* Píldora del verificador: es el gancho gratis, no una pestaña más.
   Tercer nivel visual entre los links de texto y el CTA verde sólido. */
.nav-tool{display:inline-flex;align-items:center;gap:6px;
  background:rgba(95,183,101,.14);border:1px solid var(--green-light);color:#fff;
  font-size:var(--fs-body);font-weight:500;text-decoration:none;
  padding:5px 11px;border-radius:var(--r-pill);margin:0 4px;
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.nav-tool:hover{background:rgba(95,183,101,.24)}
.nav-tool svg{color:var(--green-light);flex-shrink:0}
.nav-tool.active{cursor:default}
.nav-tool-free{background:var(--amber);color:#fff;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-pill)}
@keyframes nav-tool-glow{0%,100%{box-shadow:0 0 0 0 rgba(95,183,101,0)}50%{box-shadow:0 0 0 4px rgba(95,183,101,.22)}}
.nav-tool.glow{animation:nav-tool-glow 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.nav-tool.glow{animation:none}}
/* Versión en el menú móvil */
.mobile-menu .nav-tool{display:inline-flex;margin:6px 0}
@media(max-width:680px){.nav-links{display:none}}
@media(max-width:480px){
  .nav-logo{width:30px!important;height:30px!important}
  #nav-icon-img{width:30px!important;height:30px!important}
  #nav-logo-img{max-height:34px!important;max-width:120px!important}
}
/* ── LANG SWITCHER ── */
.lang-switcher{position:relative;margin-left:6px}
.lang-sw-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:var(--r-ctl);padding:5px 10px;font-size:var(--fs-meta);cursor:pointer;
  white-space:nowrap;transition:background var(--t-fast) var(--ease)}
.lang-sw-btn:hover{background:rgba(255,255,255,.2)}
.lang-sw-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:#1e2d1e;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-ctl);
  min-width:130px;overflow:hidden;box-shadow:var(--sh2);z-index:999}
.lang-sw-menu.open{display:block}
.lang-sw-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;
  background:none;border:none;color:#ccc;cursor:pointer;font-size:var(--fs-body);text-align:left;transition:background var(--t-fast) var(--ease)}
.lang-sw-menu button:hover{background:rgba(255,255,255,.08);color:#fff}
/* ── MOBILE MENU (hamburguesa + acceso a login) ── */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;
  padding:6px;margin-left:auto;flex-direction:column;gap:5px}
.nav-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all var(--t-slow) var(--ease)}
/* Acceso directo a login en móvil (a la izquierda del hamburguesa) */
.nav-login-mobile{display:none;align-items:center;justify-content:center;text-decoration:none;
  color:#fff;line-height:1;padding:4px 6px;cursor:pointer;margin-left:auto}
.nav-login-mobile svg{width:26px;height:26px;display:block}
@media(max-width:680px){
  .nav-hamburger{display:flex;margin-left:8px}
  .nav-login-mobile{display:flex}
  .nav-cta-top{display:none}
}

/* ── FOOTER ── */
footer{background:#0d1a0d;padding:48px 5% 28px;color:#78909c}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{font-family:'Barlow Condensed',sans-serif;font-size:var(--fs-title);font-weight:800;
  color:#fff;margin-bottom:10px}
.footer-brand span{color:var(--green-light)}
.footer-desc{font-size:var(--fs-meta);line-height:1.6;margin-bottom:16px}
.footer-col-title{font-size:var(--fs-meta);font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:#90a4ae;margin-bottom:12px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:6px}
.footer-links a{color:#78909c;text-decoration:none;font-size:var(--fs-body);transition:color var(--t-fast) var(--ease)}
.footer-links a:hover{color:var(--green-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:gap;gap:12px;
  font-size:var(--fs-meta)}
.footer-legal{display:flex;gap:16px}
.footer-legal a{color:#78909c;text-decoration:none;transition:color var(--t-fast) var(--ease)}
.footer-legal a:hover{color:var(--green-light)}

/* ── ESTADOS DE INTERACCIÓN compartidos nav/footer (de F7 2026-07-12) ── */
.nav-link:focus-visible,.nav-hamburger:focus-visible,footer a:focus-visible{outline-color:#5FB765}
.nav-cta:active{transform:translateY(1px)}