/* Performance Media — 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:24px; align-items:center; }
.pm-site-header .links a{
  color:#D8D3CB; text-decoration:none; font-size:14.5px; 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;
}

/* 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; }
}