/* ============================================================
   Proxi — CABECERA COMPARTIDA (28-sep-2026)
   ============================================================
   Una sola cabecera para TODO el sitio, en los cuatro idiomas: las páginas normales (que cargan
   styles.css) y los artículos del blog (que traen su propio CSS en línea y NO cargan styles.css).

   POR ESO ESTE ARCHIVO ES AUTOSUFICIENTE: clases con prefijo `px-`, sus propias variables y ni un
   selector de elemento suelto. El CSS de los artículos tiene reglas para `nav` (position:fixed) y
   para `.nav-cta` (un botón); aquí no se usa ninguno de los dos nombres —el menú es un
   `<div role="navigation">`—, así que no hay nada que pisar ni que deshacer página a página.

   La marca la genera `C:\Proximo Rol\scripts\cabecera.js`, en la carpeta del proyecto y FUERA de la
   que se publica (Netlify sirve todo lo que hay en esta). Si cambia un enlace o un texto, se cambia
   allí y se vuelve a aplicar: `node scripts/cabecera.js`. No a mano en ochenta archivos.

   Menú: «Your situation · The Proxi method · Career tools ▾ · Blog · Pricing». Las landings de
   herramienta siguen enlazadas desde la cabecera, dentro del desplegable, con su texto de enlace
   de siempre: es el ancla interna que Google lee para cada una.
   ============================================================ */
.px-hdr,.px-drawer,.px-faq{
  --px-green:#1c6b34; --px-green-d:#14532d; --px-green-l:#e9f6ec; --px-grad:linear-gradient(90deg,#2f9e57,#14532d);
  --px-ink:#152018; --px-muted:#566257; --px-line:#e0e7e1; --px-soft:#f5f8f5;
  --px-shadow:0 26px 60px rgba(18,63,33,.14); --px-accent:#f0803c;
  --px-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --px-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-family:var(--px-body);line-height:1.4;box-sizing:border-box;-webkit-font-smoothing:antialiased;
}
.px-hdr *,.px-drawer *{box-sizing:border-box}

/* ── La barra ── */
.px-hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--px-line)}
/* Rejilla de tres columnas: marca | menú centrado | botones. Cada parte con su columna fija: con el
   menú oculto (<1200px) la colocación automática llevaría los botones al hueco del centro. */
/* `minmax(max-content,1fr)` y no `1fr` a secas: con `1fr` la columna de la marca cedía cuando los
   botones eran largos, y el `img{max-width:100%}` de styles.css aplastaba el logo (37px en vez de
   58 en francés, a 360px). Ahora ninguna columna baja de lo que mide su contenido. */
.px-hdr-in{max-width:var(--maxw,1320px);margin:0 auto;padding:0 22px;height:72px;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:16px}
.px-brand{grid-column:1;justify-self:start;display:flex;align-items:center;text-decoration:none}
/* LOGO MÁS GRANDE (28-sep-2026: «más equilibrado con el texto»): 30 → 36px en escritorio. */
.px-brand img{display:block;height:36px;width:auto;max-width:none}
.px-menu{grid-column:2;display:flex;align-items:center;gap:2px}
.px-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}

.px-menu>a,.px-dd-btn{display:inline-flex;align-items:center;gap:6px;margin:0;font:600 .92rem/1 var(--px-body);color:var(--px-muted);padding:10px 13px;border-radius:9px;white-space:nowrap;background:none;border:0;cursor:pointer;text-decoration:none;transition:color .12s,background .12s}
.px-dd.open .px-dd-btn,.px-menu>a[aria-current="page"]{color:var(--px-ink);background:var(--px-soft)}
@media(hover:hover){.px-menu>a:hover,.px-dd-btn:hover{color:var(--px-ink);background:var(--px-soft)}}

/* ── «Career tools» ▾ ── con ratón se abre al pasar por encima; con clic, táctil o teclado, lo
   abre header.js (clase .open y aria-expanded). */
.px-dd{position:relative}
.px-dd-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.px-dd.open .px-dd-btn svg{transform:rotate(180deg)}
.px-dd-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:560px;display:none;grid-template-columns:1fr 1fr;gap:2px;padding:10px;margin:0;background:#fff;border:1px solid var(--px-line);border-radius:16px;box-shadow:var(--px-shadow);z-index:91}
.px-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* puente: el hueco de 12px no cierra el menú al bajar el ratón */
.px-dd.open .px-dd-menu{display:grid}
@media(hover:hover){.px-dd:hover .px-dd-menu{display:grid}}
.px-dd-menu a{display:block;padding:11px 13px;border-radius:11px;text-decoration:none;transition:background .12s}
.px-dd-menu a:focus-visible,.px-dd-menu a[aria-current="page"]{background:var(--px-soft)}
@media(hover:hover){.px-dd-menu a:hover{background:var(--px-soft)}}
.px-dd-menu b{display:block;font:700 .92rem/1.3 var(--px-display);color:var(--px-ink)}
.px-dd-menu span{display:block;margin-top:2px;font-size:.8rem;line-height:1.35;color:var(--px-muted)}

/* ── Derecha: idioma, entrar y el botón ── */
/* ES UN <select> NATIVO, como antes: en el móvil real abre el selector del sistema, accesible y
   táctil sin JS; la única lógica propia es navegar al elegir (onchange en la marca). */
.px-lang{margin:0;font:700 .82rem/1 var(--px-display);color:var(--px-muted);background:#fff;border:1.5px solid var(--px-line);border-radius:10px;padding:8px 26px 8px 11px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235c6459'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;background-size:16px}
@media(hover:hover){.px-lang:hover{background-color:var(--px-soft);color:var(--px-ink)}}
/* «Log in», BOTÓN SECUNDARIO (28-sep-2026: «con contorno, en el color secundario»). En su
   diseño el secundario es el verde claro (#eff5f0, aquí --px-green-l): fondo verde claro, contorno
   y texto verde oscuro. Antes era un enlace suelto a propósito, para no competir con «Start free»;
   un secundario tampoco compite, porque el relleno verde sigue siendo solo del principal. Mide lo
   mismo que «Start free»: 14,4 + 2·10,5 + 2·1,5 = 38,4px. */
.px-login{display:inline-flex;align-items:center;justify-content:center;font:700 .9rem/1 var(--px-display);color:var(--px-green-d);background:var(--px-green-l);border:1.5px solid rgba(28,107,52,.3);padding:10.5px 16px;border-radius:12px;white-space:nowrap;text-decoration:none;transition:border-color .12s,background-color .12s}
@media(hover:hover){.px-login:hover{border-color:var(--px-green)}}
.px-cta{display:inline-flex;align-items:center;justify-content:center;font:700 .9rem/1 var(--px-display);color:#fff;background:var(--px-grad);padding:12px 18px;border-radius:12px;white-space:nowrap;text-decoration:none;box-shadow:0 8px 20px rgba(20,83,45,.28);transition:transform .12s,box-shadow .12s,filter .12s}
@media(hover:hover){.px-cta:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 26px rgba(20,83,45,.34)}}
.px-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin:0;padding:0;font-size:1.05rem;line-height:1;color:var(--px-ink);background:#fff;border:1.5px solid var(--px-line);border-radius:10px;cursor:pointer}

/* ── El cajón (≤1199px) ── */
.px-drawer{display:none;position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.45)}
.px-drawer.open{display:block}
.px-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:78%;max-width:320px;background:#fff;padding:18px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.px-drawer-panel a{font-weight:600;font-size:.95rem;color:var(--px-ink);padding:9px 12px;border-radius:9px;text-decoration:none}
.px-drawer-panel a[aria-current="page"]{background:var(--px-soft)}
@media(hover:hover){.px-drawer-panel a:hover{background:var(--px-soft)}}
.px-drawer-close{align-self:flex-end;width:40px;height:40px;margin:0 0 6px;padding:0;font-size:18px;line-height:1;color:var(--px-ink);background:#fff;border:1.5px solid var(--px-line);border-radius:10px;cursor:pointer}
@media(hover:hover){.px-drawer-close:hover{background:var(--px-soft)}}
.px-drawer-label{padding:14px 12px 4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--px-muted)}
.px-drawer .px-lang{width:100%;margin:10px 0 4px;padding:12px;font-size:.9rem;text-align:left}
/* El botón dentro del cajón: la regla de enlaces del cajón (color tinta, fondo suave al pasar) le
   ganaría y dejaría texto oscuro sobre verde. Mismo fallo que tuvo el cajón viejo. */
.px-drawer-panel a.px-cta{margin-top:12px;padding:14px 18px;color:#fff;justify-content:center}
/* Y «Log in» en el cajón, el mismo botón secundario, a todo el ancho, encima del principal. */
.px-drawer-panel a.px-login{margin-top:10px;padding:13px 18px;font-size:.95rem;color:var(--px-green-d);background:var(--px-green-l);border-radius:12px}
.px-drawer-panel a.px-login+a.px-cta{margin-top:10px}
@media(hover:hover){.px-drawer-panel a.px-cta:hover{background:var(--px-grad);color:#fff}}

.px-hdr a:focus-visible,.px-hdr button:focus-visible,.px-hdr select:focus-visible,
.px-drawer a:focus-visible,.px-drawer button:focus-visible,.px-drawer select:focus-visible{outline:3px solid var(--px-accent);outline-offset:2px;border-radius:8px}

/* Menú a la vista desde 1200px; por debajo manda el cajón, que lleva dentro idioma y «entrar». */
/* Con «FAQ» en el menú (29-sep-2026), entre 1200 y 1319px el español y el francés quedaban a ~7px del
   logo: menos aire dentro de cada enlace en ese tramo. */
@media(max-width:1319px){.px-menu>a,.px-dd-btn{padding:10px 9px}}
@media(max-width:1199px){
  .px-menu,.px-hdr .px-lang,.px-hdr .px-login{display:none}
  .px-burger{display:inline-flex}
  /* Con el menú oculto, la columna del centro queda vacía y sus dos huecos solo quitan sitio:
     fuera los huecos, y la separación la pone el propio logo. */
  .px-hdr-in{column-gap:0}
  .px-brand{margin-right:12px}
}
@media(max-width:760px){
  .px-hdr-in{height:64px;padding:0 20px}
  .px-brand img{height:32px}
  .px-hdr .px-cta{padding:10px 14px;font-size:.85rem}
}
/* TELÉFONOS ESTRECHOS (≤400px). El logo (logomain.svg) mide 4,8:1, y a 320px la cabecera se salía
   con «Empieza gratis» o «Comece grátis». Se aprieta solo aquí: botón, ☰ y los huecos; y el logo
   CRECE CON LA PANTALLA en vez de ir a saltos: su alto es lo que deja libre el caso más ancho
   (es/br: botón + ☰ = 167px, más 40 de márgenes y 12 de hueco = 219px), menos ~7px de aire.
   Da 20px a 320, 28 a 360 y 31 a 375, y los cuatro idiomas llevan el mismo logo. */
@media(max-width:400px){
  .px-brand img{height:clamp(20px,calc((100vw - 225px) / 4.8),32px)}
  .px-hdr .px-cta{padding:9px 12px;font-size:.8rem}
  .px-burger{width:38px;height:38px}
  .px-right{gap:8px}
}

/* ── Todo el sitio ── */
/* Con la cabecera pegada arriba, un salto a un ancla dejaría el título debajo de ella. `:where`
   no suma especificidad: cualquier página que ya fije su propio scroll-margin gana. */
:where([id]){scroll-margin-top:84px}
/* Artículos del blog: su cabecera vieja era `position:fixed`, y el héroe del artículo se apartaba
   7rem para no quedar debajo. La nueva ocupa su sitio en el flujo, así que ese hueco sobra: se deja
   el mismo aire que había entre la barra vieja y el titular (~112px - 72px). */
.px-hdr~.article-hero{padding-top:2.75rem}

/* ── AL PULSAR, NO AL PASAR (28-sep-2026: «en el móvil, en vez de efectos al pasar, efectos
   al pulsar»). Los :hover de arriba solo existen con ratón (@media(hover:hover)): en una pantalla
   táctil se quedaban «pegados» después del toque. En su lugar, :active —el momento en que el dedo,
   o el clic, está abajo—: los botones se hunden un poco y los enlaces del menú se sombrean. Con
   ratón sirve también, como respuesta al clic. En iPhone, :active solo funciona si la página
   escucha `touchstart`: lo hace header.js. El resaltado gris del navegador se quita solo donde
   hay efecto propio, para que ningún toque se quede sin respuesta. ── */
.px-cta,.px-login,.px-burger,.px-drawer-close,.px-dd-btn,.px-menu>a,.px-dd-menu a,.px-drawer-panel a{-webkit-tap-highlight-color:transparent}
.px-login,.px-burger,.px-drawer-close{transition:transform .1s,border-color .12s,background-color .12s}
.px-cta:active,.px-login:active{transform:scale(.97)}
.px-cta:active{filter:brightness(.94);box-shadow:0 4px 12px rgba(20,83,45,.28)}
.px-login:active{background-color:#d8eedd;border-color:var(--px-green)}
.px-burger:active,.px-drawer-close:active{transform:scale(.94);background:var(--px-soft)}
.px-menu>a:active,.px-dd-btn:active,.px-dd-menu a:active,.px-drawer-panel a:not(.px-cta):not(.px-login):active{background:#e9f0ea}

/* ── EL ICONO «>» DE LOS BOTONES (29-sep-2026: «que todos los CTA lleven un > a la derecha, un icono
   SVG de verdad»). Un chevron SVG como máscara: toma el color del texto del botón (blanco en los verdes,
   verde en los de contorno) y no hay que tocar el HTML de ninguna página. Por eso se quitaron las «→»
   que iban escritas en los textos de los botones: el de la cabecera y los de los artículos del blog. ── */
.px-cta::after,.cta-btn::after{content:"";flex:none;width:1.05em;height:1.05em;margin-right:-.2em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
.px-cta{gap:6px}
@media(hover:hover){.px-cta:hover::after,.cta-btn:hover::after{transform:translateX(3px)}}

/* ============================================================
   PREGUNTAS FRECUENTES — componente de todas las páginas (29-sep-2026)
   El HTML lo pone scripts/faq.js antes del pie; los textos están en scripts/faq-textos.js.
   Va aquí y no en styles.css porque el blog no carga styles.css. Título y enlace a la
   izquierda, preguntas a la derecha (como .faq-split); en móvil, uno debajo del otro.
   ============================================================ */
.px-faq{background:var(--px-soft);border-top:1px solid var(--px-line);padding:72px 0;font-family:var(--px-body);color:var(--px-ink);line-height:1.6}
.px-faq *{box-sizing:border-box}
.px-faq-in{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px 64px;align-items:start}
.px-faq h2{margin:0;font:700 clamp(1.7rem,3vw,2.3rem)/1.12 var(--px-display);letter-spacing:-.02em;color:var(--px-green-d);text-wrap:balance}
.px-faq-more{display:inline-block;margin-top:14px;font-weight:600;color:var(--px-green-d);text-decoration:underline;text-underline-offset:3px}
.px-faq-side .px-faq-cta{display:flex;width:max-content;margin-top:22px}
.px-faq-list{display:grid;gap:10px}
.px-faq details{background:#fff;border:1px solid var(--px-line);border-radius:12px;padding:16px 18px}
.px-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:700 1rem/1.35 var(--px-display);color:var(--px-green-d)}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"+";flex:none;color:var(--px-green);font-weight:800}
.px-faq details[open] summary::after{content:"–"}
.px-faq details p{margin:10px 0 0;color:var(--px-muted);font-size:.97rem}
.px-faq details a{color:var(--px-green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.px-faq summary{-webkit-tap-highlight-color:transparent}
.px-faq details:active{background:var(--px-soft)}
@media(max-width:760px){
  .px-faq{padding:40px 0}
  .px-faq-in{grid-template-columns:1fr;gap:10px}
  .px-faq-side{display:contents;text-align:center}   /* en móvil: título, enlace, preguntas y el botón al final */
  .px-faq h2,.px-faq-more{justify-self:center;text-align:center}
  .px-faq-more{margin-top:0}
  .px-faq-list{order:1}
  .px-faq-side .px-faq-cta{order:2;justify-self:center;margin-top:16px}
}

/* ============================================================
   UN SOLO TAMAÑO DE BOTÓN (29-sep-2026: «one size for desktop and one size for mobile»)
   Había siete alturas (44–73px), tres radios y tres tamaños de letra. Ahora todos los botones de
   la página (no los de la cabecera, que viven en una barra de 72px) miden lo mismo: se cambia aquí.
   Va en header.css porque es la hoja que cargan todas las páginas, blog incluido, y la última.
   ============================================================ */
:root{--cta-h:56px;--cta-px:28px;--cta-fs:1.05rem}
@media(max-width:760px){:root{--cta-h:52px;--cta-px:22px;--cta-fs:1rem}}
body :is(a.btn,button.btn,a.cta-btn,a.px-faq-cta,.cta-fijo a):not(.px-hdr *):not(.px-drawer *){
  min-height:var(--cta-h);padding-top:10px;padding-bottom:10px;padding-left:var(--cta-px);padding-right:var(--cta-px);
  font-size:var(--cta-fs);line-height:1.25;border-radius:12px;box-sizing:border-box;white-space:nowrap;
}
@media(max-width:760px){body :is(a.btn,button.btn,a.cta-btn,a.px-faq-cta,.cta-fijo a):not(.px-hdr *):not(.px-drawer *){white-space:normal;text-wrap:balance;max-width:100%;text-align:center}}   /* en el móvil, un texto muy largo baja de línea antes que salirse de la pantalla */
@media(max-width:400px){:root{--cta-px:12px}body :is(a.btn,a.cta-btn,a.px-faq-cta):not(.px-hdr *):not(.px-drawer *){gap:6px}}   /* teléfonos estrechos: menos aire a los lados, misma altura y letra */
@media(max-width:760px){body .article-cta a.cta-btn,body a.cta-btn{width:100%;justify-content:center}}
/* Cajas con botón dentro: en el móvil, menos relleno lateral para que el botón quepa en una línea. */
@media(max-width:760px){body .article-cta{padding:2rem 1.25rem}}
@media(max-width:400px){body .cta-banner{padding-left:16px;padding-right:16px}body .plan{padding-left:14px;padding-right:14px}}

/* ============================================================
   JERARQUÍA Y BOTONES SECUNDARIOS (30-sep-2026)
   · «Secondary buttons should not have icons»: la flecha queda solo en el principal, que así
     manda; el secundario (contorno) va sin ella.
   · «Titles a bit bigger and subtitles a bit smaller on mobile»: en el móvil los títulos suben
     (h1 ~37px, h2 ~31px) y las entradillas bajan a ~16,5px, más cerca del texto normal.
     El titular de la portada ya iba grande (39px) y se queda como está.
   ============================================================ */
body .btn.ghost::after{display:none}
@media(max-width:600px){
  body main .hero:not(.hero-home) h1,body main .sec-head h1,body main .center>h1{font-size:clamp(2.1rem,10vw,2.5rem);line-height:1.08;letter-spacing:-.025em}
  body main h2:not(.bcard *),body .px-faq h2{font-size:clamp(1.7rem,8.3vw,2rem);line-height:1.12;letter-spacing:-.02em}
  body main .lead,body .hero .lead{font-size:1.03rem;line-height:1.55}
}
/* La misma jerarquía en tableta (30-sep-2026: «the hierarchy please apply to tablet too»):
   entre 601 y 1100px los títulos crecen con el ancho y las entradillas se quedan en ~17px. */
@media(min-width:601px) and (max-width:1100px){
  body main .hero:not(.hero-home) h1,body main .sec-head h1,body main .center>h1{font-size:clamp(2.6rem,5.6vw,3.2rem);line-height:1.06;letter-spacing:-.025em}
  body main h2:not(.bcard *),body .px-faq h2{font-size:clamp(2rem,4.2vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
  body main .lead,body .hero .lead{font-size:1.06rem;line-height:1.55}
}
/* ALINEADA CON LAS SECCIONES (30-sep-2026: «the header first and last elements seem not aligned
   with the sections below»). Por encima de 1379px las secciones (.wrap.block) pierden el margen lateral y
   su contenido mide 1320px; la cabecera guardaba 22px de relleno dentro de esos 1320 y se metía 22px
   por cada lado. Con 44px más de caja, su contenido también mide 1320 y empieza donde las secciones. */
@media(min-width:1380px){.px-hdr-in{max-width:calc(var(--maxw,1320px) + 44px)}}

/* ============================================================
   MÁS AIRE A LOS LADOS EN TODO EL SITIO (1-oct-2026: «can the left and right padding be increased too by 80px» →
   «the whole site not just the hero»). Desde 1101px el margen lateral es de 102px (+80) y el contenido
   se queda en 1160px como mucho (antes 1320), así que en pantallas grandes también gana 80px por lado.
   Cabecera, secciones, preguntas y pie usan el mismo margen: los bordes siguen alineados. Tableta 40px; el móvil, igual.
   Especificidad doble/triple para ganar a las reglas de styles.css (.wrap.wrap, .wrap.block con padding:72px 0).
   ============================================================ */
/* Tableta, 761–1199px (hasta donde la cabecera pasa al ☰): 40px (1-oct-2026: «make it 40px on tablet»). El móvil, ≤760px, sigue con 20px */
@media(min-width:761px) and (max-width:1199px){
  .wrap.wrap.wrap,.px-hdr-in.px-hdr-in,.px-faq-in.px-faq-in{padding-left:40px;padding-right:40px}
}
@media(min-width:1200px){   /* escritorio */
  /* 102px fijos, 80 más que antes, en todos los anchos de escritorio («I want it to be atleast 80px»).
     En es/br/fr la cabecera cabe porque «Sobre nosotros», «Blog» y «FAQ» van en el desplegable «Más». */
  .wrap.wrap.wrap,.px-hdr-in.px-hdr-in,.px-faq-in.px-faq-in{max-width:calc(1160px + 204px);padding-left:102px;padding-right:102px}
}

/* El desplegable «Más» (es/br/fr): tres enlaces en una columna, más estrecho que el de herramientas */
.px-dd-menu.px-dd-sm{width:250px;grid-template-columns:1fr}

/* Guías y comparativas: franja al pie del desplegable de herramientas (1-oct-2026, «add all hidden pages to the header») */
.px-dd-extra{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px;padding:12px 13px 4px;border-top:1px solid var(--px-line,#e3e8e4)}
.px-dd-extra span{flex-basis:100%;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--px-muted)}
.px-dd-extra a{padding:4px 0;font-size:.86rem;font-weight:600;color:var(--px-ink);text-decoration:none}
.px-dd-extra a[aria-current="page"]{color:var(--green,#2f7d4a)}
@media(hover:hover){.px-dd-extra a:hover{text-decoration:underline}}
@media(min-width:1200px) and (max-width:1279px){.px-menu>a,.px-dd-btn{padding:10px 6px}}   /* 1-oct-2026: con «Guías ▾» el español justo no cabía entre 1200 y 1279px */
@media(min-width:1200px) and (max-width:1249px){.px-hdr-in.px-hdr-in{column-gap:8px}.px-right{gap:6px}}
#px-guides.px-dd-menu{width:310px}   /* «Guías ▾»: los nombres de página en una línea */

/* PORTAL DE EMPLEOS (4-oct-2026). Un enlace más del menú, con un punto naranja (el acento de la
   marca) que dice «hay algo aquí» sin gritar: ni etiqueta «nuevo» ni color de botón, para no competir
   con «Empieza ahora». El punto va pegado arriba a la derecha de la palabra y no suma ancho al menú. */
.px-jobs{position:relative}
.px-jobs::after{content:"";position:absolute;top:6px;right:1px;width:6px;height:6px;border-radius:50%;background:var(--px-accent)}
.px-drawer-panel a.px-jobs{display:inline-flex;align-self:flex-start;padding-right:22px}
.px-drawer-panel a.px-jobs::after{top:50%;right:10px;margin-top:-3px}

/* 4-oct-2026, segunda vuelta: la bolsa de trabajo vive DENTRO de «Más». El punto va junto al título
   (no en la esquina de la fila), igual de discreto que en el cajón. */
.px-dd-menu a.px-jobs::after{display:none}
.px-dd-menu a.px-jobs b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-radius:50%;background:var(--px-accent);vertical-align:middle;position:relative;top:-1px}