/* ═══════════════════════════════════════════════════════════════════════
   LEXSTART · GUÍAS DEL NICHO (v37)
   Páginas: ley-beckham.html, como-constituir-una-sociedad.html y
   como-darse-de-alta-autonomo.html.
   Reutilizan el sistema editorial dx- de despido.css y las piezas pc- de
   paro.css; aquí solo va lo propio: cabecera, tonos, selector y comparativa.
   Usa los tokens de apple.css (--bg, --card, --ink…) → modo claro y oscuro.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cabecera (misma estructura que capitalizar-paro.html) ── */
.pg-guia .page-hero { --aura1: rgba(46, 158, 128, .4); --aura2: rgba(55, 138, 221, .16); min-height: 72vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.pg-guia.pgf-beckham .page-hero { --aura2: rgba(245, 190, 80, .14); }
.pg-guia .page-hero .inner { position: relative; z-index: 1; width: 100%; text-align: center; }
.pg-guia .breadcrumb { font-family: 'Outfit', sans-serif; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pg-guia .page-hero h1 { margin: 0 auto 24px; max-width: 1000px; }
.pg-guia .page-hero h1 em { font-style: normal; display: block; }
.pg-guia .page-hero p { max-width: 660px; margin: 0 auto 40px; }
.pg-guia .hero-ctas-wrap { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.pg-guia .hero-stats-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.pg-guia .hs-item { text-align: center; }
.pg-guia .hs-num { font-family: 'Outfit', sans-serif; line-height: 1; }
.pg-guia .hs-label { font-family: 'Outfit', sans-serif; margin-top: 5px; }
.pg-guia .hp-badge { max-width: 100%; box-sizing: border-box; text-align: left; }
.pg-guia .dx-fig.word { font-size: clamp(44px, 4.6vw, 70px); }

/* ── Selector de pestañas: tonos propios ── */
.pg-guia .dx-verdict[data-tone="0"] { --tone: #2E9E80; --tone-ink: #1c7f65; }
.pg-guia .dx-verdict[data-tone="1"] { --tone: #2f7fd1; --tone-ink: #1f5fa3; }
.pg-guia .dx-verdict[data-tone="2"] { --tone: #8b5cf6; --tone-ink: #6d3fd8; }
html[data-theme="dark"] .pg-guia .dx-verdict[data-tone="0"] { --tone-ink: #5fe0bf; }
html[data-theme="dark"] .pg-guia .dx-verdict[data-tone="1"] { --tone-ink: #8fc6ff; }
html[data-theme="dark"] .pg-guia .dx-verdict[data-tone="2"] { --tone-ink: #c4b5fd; }
.pg-guia .dx-verdict:not(.js) .dx-panel.t1 { --tone: #2f7fd1; --tone-ink: #1f5fa3; }
.pg-guia .dx-verdict:not(.js) .dx-panel.t2 { --tone: #8b5cf6; --tone-ink: #6d3fd8; }
.pg-guia .dx-panel ul { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.pg-guia .dx-panel li { font-size: 16px; line-height: 1.5; color: var(--ink2); }

/* ── Listas dentro de las filas editoriales ── */
.pg-guia .dx-main ul { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 6px; max-width: 560px; }
.pg-guia .dx-main li { font-size: 16px; line-height: 1.55; color: var(--ink2); }
.pg-guia .dx-main a, .pg-guia .dx-new a, .pg-guia .dx-sp p a, .pg-guia .pc-vs a, .pg-guia .dx-step a { color: var(--a-teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.pg-guia .dx.dark .dx-step a { color: #7ECFCF; }

/* ── Desplegable de la calculadora (fondo negro) ── */
.gx-select { position: relative; }
.gx-select select { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .18); border-radius: 0; color: #f5f5f7; font: 500 clamp(20px, 2vw, 26px)/1.2 'Outfit', sans-serif; padding: 6px 34px 12px 0; outline: none; cursor: pointer; transition: border-color .3s; color-scheme: dark; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.gx-select select:focus { border-bottom-color: #3BB89A; }
.gx-select select:focus-visible { outline: 2px solid #3BB89A; outline-offset: 4px; }
.gx-select::after { content: ''; position: absolute; right: 6px; top: 40%; width: 10px; height: 10px; border-right: 2px solid #a1a1a6; border-bottom: 2px solid #a1a1a6; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.gx-select option { color: #000; background: #fff; }

/* ── Comparativa Beckham / régimen general ── */
.gx-bars { margin-top: 22px; display: grid; gap: 14px; }
.gx-bar .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: #a1a1a6; }
.gx-bar .top b { color: #f5f5f7; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-bar .track { margin-top: 8px; height: 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.gx-bar .track i { display: block; height: 100%; width: 0; border-radius: 12px; transition: width .9s var(--a-ease-out); }
.gx-bar.bk .track i { background: linear-gradient(90deg, #2E9E80, #7ECFCF); }
.gx-bar.gen .track i { background: linear-gradient(90deg, #f5d27a, #e8b54c); }
.gx-bar .rate { display: block; margin-top: 6px; font-size: 13px; color: #86868b; }

/* ── Bloque "qué incluye" en dos columnas ── */
.gx-inc { margin-top: clamp(40px, 5vw, 60px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; list-style: none; padding: 0; }
.gx-inc li { position: relative; padding: 0 0 14px 30px; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; color: var(--ink2); }
.gx-inc li b { color: var(--ink); }
.gx-inc li::before { content: ''; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; border-radius: 50%; background: var(--a-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,12.5 10,16.5 18,8.5'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (max-width: 760px) { .gx-inc { grid-template-columns: 1fr; } }

/* ── Firma de revisión ── */
.gx-by { display: block; margin-top: 8px; font-weight: 600; color: var(--ink2); }

/* ── Inglés: restaurar el display de los elementos bilingües propios ── */
body.en .gx-bar .top span[data-en] { display: inline !important; }
body.en.pg-guia .dx-fig[data-en], body.en .gx-by[data-en] { display: block !important; }
body.en .gx-bar .rate[data-en] { display: block !important; }
body.en :is(.pc-hint, .pc-vs .tag)[data-en] { display: block !important; }
body.en .pc-vs .tag[data-en] { display: inline-block !important; }
body.en .pc-legend span[data-en] { display: inline-flex !important; }

@media (max-width: 560px) {
  .pg-guia .hero-stats-row { gap: 22px !important; padding: 22px 18px !important; }
  .pg-guia .hp-badge { font-size: 14px; }
}