/* Botpass Labs — shared chrome (sticky nav + footer)
   Tokens / typography match Home (Poppins). */

:root{
  --pm-nav-h: 84px;
  --red:#E62F29; --red2:#C0211C; --ink:#141414; --ink2:#1C1C1C;
  --cream:#EFEAE5; --soft:#F6F2ED; --paper:#FFFFFF; --text:#1A1A1A;
  --muted:#6E6E6E; --line:#E3DCD3; --on-dark:#EFEAE5; --muted-dark:#A39A8F;
}

html{ scroll-padding-top: calc(var(--pm-nav-h) + 12px); }

/* Sticky spacer only when Home/secondary fixed header is present */
body.pm-has-chrome{
  font-family:'Poppins','Poppins Fallback','Liberation Sans',sans-serif;
}
body.pm-has-chrome:not(.pm-auditoria):not(.pm-chatgpt-ads){
  padding-top:var(--pm-nav-h);
}
body.pm-has-chrome.pm-menu-open{ overflow:hidden; }
body.pm-auditoria.pm-has-chrome{ background:var(--ink); }

.pm-site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#141414;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pm-site-header .wrap{
  max-width:1180px; margin:0 auto; padding:0 40px;
}
.pm-site-header .nav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; min-height:var(--pm-nav-h); box-sizing:border-box;
}
.pm-site-header .brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0;
}
.pm-site-header .brand .ic{
  width:32px; height:32px; flex:0 0 32px;
  background:var(--logo-white, none) center/contain no-repeat; display:block;
}
.pm-site-header .brand .wm{ font-size:20px; font-weight:600; color:#fff; }
.pm-site-header .brand .wm span{ color:var(--muted-dark); font-weight:500; }

.pm-site-header .links{ display:flex; gap:16px; align-items:center; }
.pm-site-header .links a{
  color:#D8D3CB; text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap;
}
.pm-site-header .links a:hover{ color:#fff; }
.pm-site-header .links a.nav-new::after{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--red); margin-left:6px; vertical-align:middle;
}

.pm-site-header .nav-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.pm-site-header .lang{
  color:#D8D3CB; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.22); padding:9px 10px; border-radius:9px;
}
.pm-site-header .lang:hover{ color:#fff; border-color:rgba(255,255,255,.45); }
.pm-site-header .navcta{
  background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff;
  padding:11px 20px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
}

.pm-site-header .nav-hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.pm-site-header .nav-hamburger span{
  width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s;
}
.pm-site-header .nav-hamburger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.pm-site-header .nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.pm-site-header .nav-hamburger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.pm-site-header .mobile-menu{
  display:none; flex-direction:column; gap:18px;
  padding:8px 0 22px; border-top:1px solid rgba(255,255,255,.1);
}
.pm-site-header .mobile-menu.open{ display:flex; }
.pm-site-header .mobile-menu.open[hidden]{ display:flex !important; }
.pm-site-header .mobile-menu[hidden]:not(.open){ display:none !important; }
.pm-site-header .mobile-menu a{
  color:#D8D3CB; text-decoration:none; font-size:15px; font-weight:500;
}
.pm-site-header .mobile-menu a:hover{ color:#fff; }
.pm-site-header .mobile-menu .navcta{
  display:inline-flex; align-self:flex-start; margin-top:4px;
}
.pm-site-header .mobile-menu a.lang{
  align-self:flex-start;
  font-size:13px; font-weight:600; letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.22); padding:9px 10px; border-radius:9px;
}
.pm-site-header .mobile-menu a.lang:hover{ border-color:rgba(255,255,255,.45); }

/* Footer */
.pm-site-footer{
  background:#0E0E0E; color:var(--muted-dark); padding:50px 0;
}
.pm-site-footer .wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
.pm-site-footer .foot{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.pm-site-footer .brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}
.pm-site-footer .brand .ic{
  width:26px; height:26px; flex:0 0 26px;
  background:var(--logo-white, none) center/contain no-repeat; display:block;
}
.pm-site-footer .brand .wm{ font-size:19px; font-weight:600; color:#fff; }
.pm-site-footer .brand .wm span{ color:var(--muted-dark); font-weight:500; }
.pm-site-footer .podcast{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:#fff; font-size:15px;
}
.pm-site-footer .podcast .pod-ic{
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red2));
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 28px;
}
.pm-site-footer .podcast b{ font-weight:700; }
.pm-site-footer .foot-links{ margin-top:26px; }
.pm-site-footer .foot-links .fl{ display:flex; gap:26px; flex-wrap:wrap; }
.pm-site-footer .foot-links .fl a{
  color:var(--muted-dark); text-decoration:none; font-size:14px;
}
.pm-site-footer .foot-links .fl a:hover{ color:#fff; }
.pm-site-footer .copy{
  margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px; color:#7A7268;
}

/* Accesibilidad compartida */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link.screen-reader-text:focus{
  position:fixed !important; top:12px; left:12px; z-index:2000; width:auto; height:auto; margin:0;
  padding:12px 18px; clip:auto; clip-path:none; background:#fff; color:var(--ink);
  font-weight:600; border-radius:8px; text-decoration:none; box-shadow:0 6px 24px rgba(0,0,0,.3);
}
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.pm-site-header :focus-visible,
.pm-site-footer :focus-visible{ outline-color:#fff; }

/* Páginas interiores: fondo y suavizado; el resto lo define pages.css */
body.pm-inner{
  background:var(--paper); color:var(--text);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}

/* Landings: auditoria uses in-flow topbar; chatgpt-ads nav lives in hero */
body.pm-home .hero{
  padding-top:8px;
}
body.pm-chatgpt-ads .hero{
  padding-top:0;
}
body.pm-auditoria .stage{
  padding-top:0;
}

@media (max-width:1099px){
  .pm-site-header .links{ display:none; }
  .pm-site-header .nav-hamburger{ display:flex; }
  .pm-site-header .wrap{ padding:0 24px; }
  .pm-site-footer .wrap{ padding:0 24px; }
}
@media (max-width:620px){
  .pm-site-header .navcta{ display:none; }
  .pm-site-header .brand .wm{ font-size:18px; }
  .pm-site-header .wrap,
  .pm-site-footer .wrap{ padding:0 20px; }
  .pm-site-footer .foot{ flex-direction:column; align-items:flex-start; }
  :root{ --pm-nav-h: 72px; }
}

/* ── Barra de administración de WordPress (solo con sesión iniciada) ───────────
   Todo lo que es position:fixed se desplaza lo que ocupa esa barra. */
body.admin-bar{ --pm-adminbar:32px; }
@media (max-width:782px){ body.admin-bar{ --pm-adminbar:46px; } }
@media (max-width:600px){ body.admin-bar{ --pm-adminbar:0px; } }
.pm-site-header{ top:var(--pm-adminbar,0px); }

/* ── Landings con navbar fijo propio (Auditoría y ChatGPT Ads) ─────────────────
   Se reutiliza el navbar que ya tiene cada una; solo cambia su posición.
   Fondo a sangre completa (box-shadow + clip-path), línea inferior con ::after. */
body.pm-auditoria .topbar,
body.pm-chatgpt-ads .nav.pm-ads-nav{
  position:fixed; top:var(--pm-adminbar,0px); left:0; right:0; z-index:1000;
  margin:0 auto; min-height:var(--pm-nav-h);
  background:var(--ink); box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax);
}
body.pm-auditoria .topbar::after,
body.pm-chatgpt-ads .nav.pm-ads-nav::after{
  content:''; position:absolute; left:-100vmax; right:-100vmax; bottom:0; height:1px;
  background:rgba(255,255,255,.08); pointer-events:none;
}
body.pm-auditoria .topbar{ padding:0 40px; }
body.pm-auditoria .stage{ padding-top:var(--pm-nav-h); }
body.pm-chatgpt-ads .nav.pm-ads-nav{ padding:0; width:min(1100px,calc(100% - 80px)); }
body.pm-chatgpt-ads .hero{ padding-top:var(--pm-nav-h); }
body.pm-chatgpt-ads .mobile-menu{
  position:fixed; top:calc(var(--pm-adminbar,0px) + var(--pm-nav-h)); left:0; right:0; z-index:999;
  margin:0 auto; width:min(1100px,calc(100% - 80px)); max-height:calc(100vh - var(--pm-nav-h) - var(--pm-adminbar,0px));
  overflow-y:auto; background:var(--ink); box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); padding:14px 0 22px;
}
@media (max-width:1099px){
  body.pm-auditoria .topbar{ padding:0 24px; }
}
@media (max-width:980px){
  body.pm-chatgpt-ads .nav.pm-ads-nav,
  body.pm-chatgpt-ads .mobile-menu{ width:calc(100% - 48px); }
}
@media (max-width:620px){
  body.pm-auditoria .topbar{ padding:0 20px; }
}

/* overflow:hidden convierte el contenedor en "scroll container": al saltar a un #ancla
   el navegador desplazaba el contenido por dentro y se perdía la parte de arriba.
   overflow:clip recorta igual pero no es desplazable. */
body.pm-auditoria .stage,
body.pm-chatgpt-ads .hero,
body.pm-chatgpt-ads .price-sec,
body.pm-chatgpt-ads .podcast-sec,
body.pm-chatgpt-ads .final{ overflow:clip; }

/* ── Footer v4.2: grupos de enlaces (escritorio igual que antes; móvil en columnas) ── */
.pm-site-footer .fl-group{ display:contents; }
.pm-site-footer .fl-h{ display:none; }
.pm-site-footer .podcast .pod-t{ display:inline; }
.pm-site-footer .podcast .pod-t small{ font-size:inherit; color:inherit; }
.pm-site-footer .podcast .pod-t small::after{ content:" · "; }
.pm-site-footer .podcast .pod-go{ margin-left:2px; }
.pm-site-footer .copy{ color:#8F877C; }
.pm-site-footer .copy .c + .c::before{ content:" · "; }

@media (max-width:620px){
  .pm-site-footer{ padding:40px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
  .pm-site-footer .foot{ align-items:stretch; gap:22px; }
  .pm-site-footer .brand{ align-self:flex-start; }
  .pm-site-footer .podcast{
    display:flex; align-items:center; width:100%; box-sizing:border-box; gap:14px;
    padding:14px 16px; border:1px solid rgba(255,255,255,.14); border-radius:16px;
    background:rgba(255,255,255,.03);
  }
  .pm-site-footer .podcast .pod-t{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .pm-site-footer .podcast .pod-t small{ font-size:12px; color:var(--muted-dark); }
  .pm-site-footer .podcast .pod-t small::after{ content:none; }
  .pm-site-footer .podcast .pod-t b{ font-size:15px; line-height:1.3; }
  .pm-site-footer .podcast .pod-go{ margin-left:auto; font-size:18px; }
  .pm-site-footer .foot-links{ margin-top:30px; }
  .pm-site-footer .foot-links .fl{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
  .pm-site-footer .fl-group{ display:flex; flex-direction:column; min-width:0; }
  .pm-site-footer .fl-h{
    display:block; margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:#8F877C;
  }
  .pm-site-footer .foot-links .fl a{
    display:flex; align-items:center; min-height:44px; font-size:15px; line-height:1.3;
  }
  .pm-site-footer .fl-group:last-child{
    grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; column-gap:22px;
    border-top:1px solid rgba(255,255,255,.08); padding-top:20px;
  }
  .pm-site-footer .fl-group:last-child .fl-h{ flex:0 0 100%; }
  .pm-site-footer .copy{
    display:flex; flex-direction:column; gap:3px; margin-top:20px; padding-top:18px; line-height:1.5;
  }
  .pm-site-footer .copy .c + .c::before{ content:none; }
  .pm-site-footer .copy .c:first-child{ color:#B9B2A8; font-weight:500; }
}

/* ── Navbar: evitar que el logo se solape con los enlaces ─────────────────────
   1. .brand llevaba min-width:0, así que cuando la fila no cabía el navegador
      comprimía el logo (no los enlaces) y el wordmark se salía de su caja.
   2. home-v3.css y chatgpt-ads.css redefinen .nav/.brand/.links sin prefijo y,
      al cargarse después con la misma especificidad, anulaban el display:none
      de la media query de abajo. Por eso la fila de escritorio seguía
      dibujándose hasta 980px, donde no cabe.
   Estas reglas van cualificadas con el elemento (header.pm-site-header) para
   ganar en especificidad a .nav .links, se cargue lo que se cargue después.
   Verificado a 390/768/980/1024/1100/1150/1180/1200/1280/1440/1600px. */

header.pm-site-header .brand{ flex:0 0 auto; min-width:auto; }
header.pm-site-header .brand .wm{ white-space:nowrap; }

/* Una sola medida de fila de enlaces en todo el sitio (home-v3.css imponía
   24px/14,5px solo en la home y en /en/). */
header.pm-site-header .links{ gap:16px; }
header.pm-site-header .links a{ font-size:14px; }

header.pm-site-header .nav-right{ flex:0 0 auto; }

/* La fila completa necesita 1052px de los 1100px útiles: por debajo de 1200px
   el relevo lo toma la hamburguesa. */
@media (max-width:1199px){
  header.pm-site-header .links{ display:none; }
  header.pm-site-header .nav-hamburger{ display:flex; }
}

/* El desplegable no repite lo que ya está visible en la barra: el idioma nunca
   (la píldora EN se ve siempre) y el CTA solo por debajo de 620px, que es donde
   deja de verse en la barra. */
header.pm-site-header .mobile-menu a.lang{ display:none; }
@media (min-width:621px){
  header.pm-site-header .mobile-menu .navcta{ display:none; }
}

/* Landing de ChatGPT Ads: navbar propio, fuera de .pm-site-header. */
body.pm-chatgpt-ads .nav.pm-ads-nav .brand{ flex:0 0 auto; min-width:auto; }
body.pm-chatgpt-ads .nav.pm-ads-nav .brand .wm{ white-space:nowrap; }

@media (max-width:1199px){
  body.pm-chatgpt-ads .nav.pm-ads-nav .links{ display:none; }
  body.pm-chatgpt-ads .nav.pm-ads-nav .nav-hamburger{ display:flex; }
}

/* ── Menú v2 con desplegables (propuesta «Optimizar menú», 26/10/2026) ─────────
   Mismo menú en todas las páginas, ChatGPT Ads incluida. Los enlaces de los
   submenús están en el HTML: aquí solo se muestran u ocultan.
   Selectores cualificados con header.pm-site-header para ganar a las reglas
   genéricas .nav/.links/.mobile-menu de home-v3.css y chatgpt-ads.css. */

header.pm-site-header .links{
  list-style:none; margin:0; padding:0; gap:18px;
}
header.pm-site-header .links > li{
  position:relative; display:flex; align-items:center; margin:0;
}
header.pm-site-header .links > li > a{
  display:inline-flex; align-items:center; min-height:44px;
}

/* Botón ▾: 22px visibles, zona táctil de 44 × 44 con el pseudo-elemento
   (se extiende hacia el hueco de la derecha, nunca sobre el texto del padre). */
header.pm-site-header .sub-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:4px; padding:0;
  background:none; border:0; border-radius:6px; color:#A39A8F; cursor:pointer;
}
header.pm-site-header .sub-toggle::after{
  content:''; position:absolute; top:-11px; bottom:-11px; left:-4px; right:-18px;
}
header.pm-site-header .sub-toggle svg{ transition:transform .15s; }
header.pm-site-header .sub-toggle:hover{ color:#fff; }
header.pm-site-header .has-sub.open > .sub-toggle svg{ transform:rotate(180deg); }

header.pm-site-header .sub{
  display:none; position:absolute; top:100%; left:-14px; z-index:10;
  min-width:220px; margin:6px 0 0; padding:8px; list-style:none;
  background:#1C1C1C; border:1px solid rgba(255,255,255,.1); border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
/* Puente invisible entre el padre y el panel para que el hover no se corte. */
header.pm-site-header .sub::before{
  content:''; position:absolute; left:0; right:0; top:-8px; height:8px;
}
header.pm-site-header .sub li{ margin:0; }
header.pm-site-header .sub a{
  display:flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:8px;
  color:#D8D3CB; font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap;
}
header.pm-site-header .sub a:hover,
header.pm-site-header .sub a:focus-visible{ background:rgba(255,255,255,.06); color:#fff; }
header.pm-site-header .has-sub.open > .sub{ display:block; }
@media (hover:hover){
  header.pm-site-header .links .has-sub:hover > .sub{ display:block; }
  header.pm-site-header .links .has-sub:hover > .sub-toggle{ color:#fff; }
}

/* Página activa (aria-current) y padre de la sección actual. */
header.pm-site-header .links > li > a[aria-current="page"],
header.pm-site-header .links > li.is-active > a{
  color:#fff;
  text-decoration:underline; text-decoration-color:var(--red);
  text-decoration-thickness:2px; text-underline-offset:9px;
}
header.pm-site-header .sub a[aria-current="page"]{ color:#fff; background:rgba(230,47,41,.16); }

/* ── Selector de idioma «ES | EN» ── */
header.pm-site-header .lang-switch{
  display:inline-flex; align-items:center;
  border:1px solid rgba(255,255,255,.22); border-radius:9px;
  font-size:13px; font-weight:600; letter-spacing:.08em; line-height:1;
}
header.pm-site-header .lang-switch > a,
header.pm-site-header .lang-switch > .lang-cur{
  display:inline-flex; align-items:center; min-height:34px; padding:0 9px;
  color:#8F877C; text-decoration:none;
}
header.pm-site-header .lang-switch > .lang-cur{ color:#fff; }
header.pm-site-header .lang-switch > a:hover{ color:#fff; }
header.pm-site-header .lang-switch .lang-sep{ color:rgba(255,255,255,.22); }

/* ── Menú móvil: acordeón ── */
header.pm-site-header .mobile-menu{
  gap:0; margin-top:0; padding:4px 0 0;
}
header.pm-site-header .mobile-menu.open{
  max-height:calc(100vh - var(--pm-nav-h) - var(--pm-adminbar,0px));
  max-height:calc(100dvh - var(--pm-nav-h) - var(--pm-adminbar,0px));
  overflow-y:auto; overscroll-behavior:contain;
}
header.pm-site-header .m-list{ list-style:none; margin:0; padding:0; }
header.pm-site-header .m-item{ border-bottom:1px solid rgba(255,255,255,.08); }
header.pm-site-header .m-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
header.pm-site-header .m-row > a{
  flex:1; display:flex; align-items:center; min-height:52px;
  color:#EFEAE5; font-size:16px; font-weight:500; text-decoration:none;
}
header.pm-site-header .m-row > a[aria-current="page"],
header.pm-site-header .m-item.is-active > .m-row > a{ color:#fff; font-weight:600; }
header.pm-site-header .m-row > a[aria-current="page"]::before,
header.pm-site-header .m-item.is-active > .m-row > a::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--red); margin-right:10px;
}
header.pm-site-header .m-toggle{
  flex:0 0 44px; width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:8px; color:#D8D3CB; cursor:pointer;
}
header.pm-site-header .m-toggle svg{ width:12px; height:12px; transition:transform .15s; }
header.pm-site-header .m-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
header.pm-site-header .m-sub{
  list-style:none; margin:0 0 12px; padding:0 0 0 14px;
  border-left:2px solid rgba(230,47,41,.55);
}
header.pm-site-header .m-sub[hidden]{ display:none; }
header.pm-site-header .m-sub a{
  display:flex; align-items:center; min-height:44px;
  color:#BDB6AC; font-size:15px; font-weight:500; text-decoration:none;
}
header.pm-site-header .m-sub a:hover,
header.pm-site-header .m-sub a[aria-current="page"]{ color:#fff; }

/* Pie del desplegable: idioma y CTA, fijo al final mientras se desplaza. */
header.pm-site-header .m-foot{
  position:sticky; bottom:0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0 20px; background:#141414;
}
header.pm-site-header .mobile-menu .m-foot .navcta{ margin-top:0; }

/* ChatGPT Ads: su CSS posicionaba fijo el desplegable de su navbar propio.
   Con el navbar compartido el desplegable va dentro de la cabecera, como en el resto. */
body.pm-chatgpt-ads header.pm-site-header .mobile-menu{
  position:static; width:auto; margin:0; background:none;
  box-shadow:none; clip-path:none; top:auto;
}

/* Móviles estrechos: la píldora «ES | EN» no cabe junto al logo y la hamburguesa
   (a 360px provocaba scroll horizontal). Por debajo de 420px se ve solo dentro del menú. */
@media (max-width:420px){
  header.pm-site-header .nav-right > .lang-switch{ display:none; }
}