/* === Design tokens === */
:root {
--bg: #ffffff;
--surface: #fafafb;
--surface-2: #fafafa;
--surface-3: #f4f4f7;
--border: #e5e5ea;
--border-strong: #d1d1d6;
--text: #1a1a1a;
--text-2: #555;
--text-3: #888;
--accent: #1a1a1a;
--accent-fg: #ffffff;
--shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
--shadow-lg: 0 4px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
--radius: 10px;
--radius-sm: 6px;
--radius-lg: 14px;
--c-good: #16a34a;
--c-ok: #65a30d;
--c-mid: #d97706;
--c-low: #ea580c;
--c-bad: #dc2626;
--c-info: #2563eb;
--transition: 180ms cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] {
--bg: #0c0d10;
--surface: #15171c;
--surface-2: #1a1c22;
--surface-3: #22252d;
--border: #2a2d35;
--border-strong: #3a3d46;
--text: #f0f0f3;
--text-2: #b0b3bb;
--text-3: #888c95;
--accent: #ffffff;
--accent-fg: #0c0d10;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
--shadow-lg: 0 4px 16px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
}
/* === Reset === */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
/* scroll-behavior: instantáneo. Animar el scroll programático (scrollIntoView,
anchors) generaba transiciones extrañas al abrir fichas de político. */
html { scroll-behavior: auto; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
input, select, button { font: inherit; color: inherit; }
/* === Layout === */
.container { max-width: 1240px; margin: 0 auto; padding: 0 16px; width: 100%; box-sizing: border-box; min-width: 0; }
body { overflow-x: hidden; }
/* =========================================================
GOBIERNOS · diseño editorial (scoped en .gov-apple)
Eliminar este bloque o quitar la clase wrapper en JS revierte
========================================================= */
.gov-apple {
max-width: 1100px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Header */
.gov-apple-header {
text-align: center;
margin-bottom: 40px;
}
.gov-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.gov-apple-title {
font-size: clamp(44px, 7vw, 76px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.04;
color: var(--text);
margin: 0 0 18px;
}
.gov-apple-tagline {
font-size: clamp(16px, 1.9vw, 21px);
color: var(--text-2);
line-height: 1.45;
max-width: 680px;
margin: 0 auto;
font-weight: 400;
letter-spacing: -0.005em;
}
/* Segmented control (pill switch) */
.gov-apple-segments-wrap { text-align: center; margin-bottom: 32px; }
.gov-apple-segments {
display: inline-flex;
background: var(--surface-3);
border-radius: 12px;
padding: 4px;
gap: 2px;
}
.gov-apple-segment {
border: 0;
background: transparent;
padding: 9px 22px;
font-size: 14px;
font-weight: 600;
color: var(--text-2);
border-radius: 9px;
cursor: pointer;
font-family: inherit;
letter-spacing: -0.005em;
transition: background 0.25s cubic-bezier(.4,0,.2,1), color 0.2s ease, box-shadow 0.2s ease;
}
.gov-apple-segment:hover:not(.active) { color: var(--text); }
.gov-apple-segment.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
}
[data-theme="dark"] .gov-apple-segment.active {
box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.08);
}
/* Pill bar for KPI variables (Global, Economía, Empleo...) */
.gov-apple-pillbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 24px;
justify-content: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.gov-apple-pill {
border: 0;
background: var(--surface-3);
padding: 7px 15px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: var(--text-2);
cursor: pointer;
font-family: inherit;
letter-spacing: -0.005em;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.gov-apple-pill:hover:not(.active) { color: var(--text); }
.gov-apple-pill.active {
background: var(--text);
color: var(--bg);
}
.gov-apple-pill:active { transform: scale(0.96); }
/* Toggle "Indicador" — visible solo en mobile via media query */
.gov-filters-toggle {
display: none;
align-items: center;
gap: 10px;
background: var(--surface);
border: 0;
box-shadow: inset 0 0 0 1px var(--border);
border-radius: 100px;
padding: 10px 18px;
font-size: 13px;
font-family: inherit;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
cursor: pointer;
margin: 0 auto 16px;
width: 100%;
max-width: 360px;
justify-content: space-between;
transition: transform .2s;
}
.gov-filters-toggle:active { transform: scale(0.97); }
.gov-filters-toggle[aria-expanded="true"] .gov-filters-toggle-chevron { transform: rotate(180deg); }
.gov-filters-toggle-chevron { transition: transform .2s; flex-shrink: 0; }
.gov-filters-toggle-label {
font-size: 12px;
font-weight: 500;
color: var(--text-3);
letter-spacing: -0.002em;
flex-shrink: 0;
}
.gov-filters-toggle-value {
flex: 1;
text-align: left;
font-weight: 700;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Chart card */
.gov-apple-chart {
background: var(--surface);
border-radius: 22px;
padding: 28px 28px 22px;
margin-bottom: 24px;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.gov-apple-chart .chart-card {
background: transparent;
border: 0;
padding: 0;
margin: 0;
}
.gov-apple-chart .chart-title {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-2);
margin-bottom: 14px;
}
/* Variable description card */
.gov-apple-info {
background: var(--surface-3);
border-radius: 18px;
padding: 20px 24px;
margin: 0 auto 40px;
max-width: 760px;
}
.gov-apple-info-title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text);
margin-bottom: 6px;
}
.gov-apple-info-text {
font-size: 13.5px;
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
/* Government cards grid */
.gov-apple-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Override de las pol-card existentes dentro del wrapper editorial */
.gov-apple .gov-apple-grid .pol-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 24px;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.gov-apple .gov-apple-grid .pol-card:hover {
transform: translateY(-1px);
border-color: var(--border-strong);
box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.gov-apple .pol-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.gov-apple .pol-rank {
min-width: 26px; height: 26px;
background: var(--surface-3);
color: var(--text-2);
border-radius: 50%;
padding: 0;
font-size: 12px;
font-weight: 700;
font-family: -apple-system, system-ui, sans-serif;
letter-spacing: -0.01em;
}
.gov-apple .pol-avatar { flex-shrink: 0; }
.gov-apple .pol-avatar > div {
border-radius: 50% !important;
}
.gov-apple .pol-avatar img {
border-radius: 50% !important;
object-fit: cover;
}
.gov-apple .pol-name {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text);
line-height: 1.2;
}
.gov-apple .pol-role {
font-size: 13px;
font-weight: 500;
color: var(--text-2);
margin-top: 2px;
}
.gov-apple .pol-score {
font-size: 30px !important;
font-weight: 700 !important;
letter-spacing: -0.025em;
font-family: -apple-system, system-ui, sans-serif;
font-feature-settings: "tnum";
padding: 6px 12px !important;
border-radius: 12px;
background: transparent !important;
}
/* Score chips bar — refined */
.gov-apple .pol-chips {
gap: 4px;
margin-bottom: 0;
}
.gov-apple .pol-chips .chip {
background: var(--surface-3);
border-bottom: 0;
border-radius: 8px;
padding: 6px 4px;
}
.gov-apple .chip-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.gov-apple .chip-value {
font-family: -apple-system, system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
/* Detail panel inside cards (expanded view) */
.gov-apple .pol-card .detail {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.gov-apple .dim-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.gov-apple .dim-value {
font-family: -apple-system, system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
.gov-apple .dim-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
/* Mobile responsive */
@media (max-width: 720px) {
.gov-apple { padding: 16px 0 48px; }
.gov-apple-header { margin-bottom: 28px; }
.gov-apple-tagline { font-size: 15px; }
.gov-apple-segment { padding: 8px 16px; font-size: 13px; }
.gov-apple-pill { padding: 6px 12px; font-size: 12px; }
.gov-apple-chart { padding: 18px 12px 14px; border-radius: 18px; }
.gov-apple-info { padding: 16px 18px; border-radius: 14px; }
.gov-apple .gov-apple-grid .pol-card { padding: 16px 16px; border-radius: 14px; }
.gov-apple .pol-name { font-size: 16px; }
.gov-apple .pol-score { font-size: 26px !important; }
/* Pillbar colapsado por defecto en mobile, expandible via toggle */
.gov-filters-toggle { display: flex; }
.gov-apple-pillbar {
display: none;
flex-direction: column;
align-items: stretch;
gap: 6px;
margin-bottom: 20px;
padding: 12px;
background: var(--surface);
border-radius: 16px;
box-shadow: inset 0 0 0 1px var(--border);
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.gov-apple-pillbar.filters-open { display: flex; }
.gov-apple-pillbar .gov-apple-pill {
width: 100%;
text-align: left;
padding: 10px 14px;
font-size: 13px;
}
}
/* =========================================================
INICIO · diseño editorial (scoped en .home-apple)
Eliminar este bloque o quitar la clase wrapper en JS revierte
========================================================= */
.home-apple {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* HERO — se conserva diseño original del mosaico, h1 y lead serif italic
(sin overrides editoriales aquí para preservar estructura responsive del mosaico) */
/* HOOKS — tarjetas editorial sobrias */
.home-apple .hero-hooks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 40px;
}
.home-apple .hook {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 20px 22px;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
position: relative;
overflow: hidden;
}
.home-apple .hook::before,
.home-apple .hook::after { display: none; }
.home-apple .hook:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.08);
}
.home-apple .hook-icon {
width: 44px;
height: 44px;
margin: 0 auto 14px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-3);
color: var(--text);
}
.home-apple .hook-icon svg { width: 22px; height: 22px; }
.home-apple .hook-num {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
line-height: 1;
margin-bottom: 10px;
}
/* Mismo tama~o en los 3 hooks para unificar jerarquia visual */
.home-apple .hook-timeline .hook-num,
.home-apple .hook-balance .hook-num { font-size: 30px; letter-spacing: -0.03em; }
.home-apple .hook-zero { color: var(--text-3); }
.home-apple .hook-cien { color: var(--text); }
.home-apple .hook-label {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
margin-bottom: 6px;
text-transform: none;
}
.home-apple .hook-sub {
font-size: 12px;
font-weight: 400;
color: var(--text-2);
letter-spacing: -0.002em;
}
.home-apple .balance-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 10px;
}
.home-apple .balance-sep { color: var(--text-3); }
/* STATS — radiografía editorial */
.home-apple .stats-block { margin: 56px 0 0; }
.home-apple .stats-head { margin-bottom: 40px; text-align: center; }
.home-apple .stats-eyebrow {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.035em;
color: var(--text);
text-transform: none;
line-height: 1.1;
margin-bottom: 0;
}
/* Featured percentage callout */
.home-apple .stats-featured {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 22px;
padding: 32px 32px;
margin-bottom: 32px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 24px rgba(0,0,0,.04);
display: flex;
align-items: center;
gap: 32px;
}
.home-apple .stats-featured-num {
flex-shrink: 0;
}
.home-apple .stats-featured-num .big {
display: inline-block;
font-size: clamp(72px, 12vw, 128px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 0.95;
padding-right: 0.08em;
background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-apple .stats-featured-line1 {
font-size: clamp(18px, 2.4vw, 26px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 8px;
}
.home-apple .stats-featured-line1 .line1-acc { color: #dc2626; }
.home-apple .stats-featured-line2 {
font-size: 15px;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--text-2);
line-height: 1.45;
}
.home-apple .stats-subhead {
text-align: center;
font-size: clamp(22px, 3vw, 34px);
font-weight: 700;
letter-spacing: -0.03em;
margin: 0 0 28px;
}
.home-apple .stats-headcount {
font-weight: 800;
}
/* Stat cards */
.home-apple .stats-block .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.home-apple .stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 22px 20px 18px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.home-apple .stat-card::before { display: none; }
.home-apple .stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.07);
}
.home-apple .stat-icon { font-size: 22px; margin-bottom: 8px; }
.home-apple .stat-value {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 10px;
}
.home-apple .stat-value .num {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
}
.home-apple .stat-value .unit {
font-size: 14px;
font-weight: 500;
color: var(--text-3);
letter-spacing: -0.005em;
}
.home-apple .stat-gauge {
height: 4px;
background: var(--surface-3);
border-radius: 100px;
overflow: hidden;
margin-bottom: 14px;
}
.home-apple .stat-gauge-fill { border-radius: 100px; }
.home-apple .stat-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
margin-bottom: 4px;
color: var(--text);
}
.home-apple .stat-hint {
font-size: 12px;
font-weight: 400;
color: var(--text-2);
letter-spacing: -0.002em;
line-height: 1.4;
}
/* QUICK LINKS y otras secciones internas del Inicio */
.home-apple .home-block { padding-top: 56px; margin-top: 0; }
.home-apple .section-head h2 {
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 700;
letter-spacing: -0.035em;
text-align: center;
}
.home-apple .section-head-center { text-align: center; margin-bottom: 28px; }
.home-apple .quick-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.home-apple .quick-link {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.home-apple .quick-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.07);
}
.home-apple .quick-link h3 {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 8px;
}
.home-apple .quick-link p {
font-size: 13px;
font-weight: 400;
color: var(--text-2);
letter-spacing: -0.002em;
line-height: 1.5;
}
/* TOPS section */
.home-apple .home-tops-4col {
margin-top: 12px;
/* Solo quitamos el marco exterior gris; las columnas siguen pegadas
con alternancia blanco/gris y separadores verticales (legacy CSS) */
border: 0;
background: transparent;
}
.home-apple .home-tops-col {
padding: 20px 18px;
}
.home-apple .tops-col-title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 14px;
}
.home-apple .tops-mobile-select {
border-radius: 100px;
border: 1px solid var(--border);
/* Chevron SVG inline (si solo se pone background: color, desaparece la
flecha porque shorthand resetea background-image; siempre incluir el
icono explicitamente al sobreescribir el select) */
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 16px center;
background-size: 12px;
padding: 10px 38px 10px 18px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
[data-theme="dark"] .home-apple .tops-mobile-select {
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 16px center;
background-size: 12px;
}
/* pol-card overrides en home tops */
.home-apple .pol-grid-compact .pol-card {
border-radius: 14px;
padding: 12px 12px;
border: 1px solid var(--border);
background: var(--bg);
box-shadow: none;
}
.home-apple .pol-grid-compact .pol-card:hover {
background: var(--surface-2);
}
/* Mobile responsive */
@media (max-width: 980px) {
.home-apple .hero-hooks { grid-template-columns: 1fr; }
.home-apple .stats-block .stats-grid { grid-template-columns: repeat(2, 1fr); }
.home-apple .quick-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.home-apple .stats-block { margin: 40px 0 0; }
.home-apple .stats-featured {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 28px 22px;
border-radius: 18px;
}
.home-apple .stats-featured-num {
display: flex;
justify-content: center;
width: 100%;
}
.home-apple .stats-featured-num .big { font-size: 72px; line-height: 1; padding-right: 0; }
.home-apple .stats-featured-body { width: 100%; text-align: center; }
.home-apple .stats-featured-line1 { font-size: 17px; line-height: 1.3; }
.home-apple .stats-featured-line1 .line1-acc { white-space: normal; }
.home-apple .stats-featured-line2 { font-size: 14px; }
.home-apple .stats-block .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.home-apple .stat-card { padding: 16px 14px 14px; border-radius: 16px; }
.home-apple .stat-value .num { font-size: 30px; }
.home-apple .quick-links { grid-template-columns: 1fr; }
.home-apple .home-block { padding-top: 40px; margin-top: 0; }
/* Hooks: forzar layout vertical centrado (anula grid legacy) */
.home-apple .hook {
padding: 18px 18px;
border-radius: 18px;
display: block;
text-align: center;
grid-template-columns: none;
}
.home-apple .hook-icon {
width: 42px;
height: 42px;
margin: 0 auto 12px;
grid-column: auto;
grid-row: auto;
align-self: auto;
background: var(--surface-3);
border-radius: 14px;
}
.home-apple .hook-icon svg { width: 22px; height: 22px; }
.home-apple .hook-num,
.home-apple .hook-timeline .hook-num,
.home-apple .hook-balance .hook-num {
grid-column: auto;
grid-row: auto;
font-size: 28px;
margin-bottom: 8px;
line-height: 1;
align-self: auto;
text-align: center;
}
.home-apple .hook-label {
grid-column: auto;
grid-row: auto;
font-size: 13px;
letter-spacing: -0.005em;
line-height: 1.3;
text-align: center;
text-transform: none;
margin-top: 0;
margin-bottom: 6px;
font-weight: 600;
color: var(--text);
}
.home-apple .hook-sub {
grid-column: auto;
grid-row: auto;
margin-top: 0;
padding-top: 0;
font-size: 12px;
line-height: 1.4;
text-align: center;
}
/* Balance hook: una linea 0% Ideologia · 100% Datos centrada */
.home-apple .hook-balance .balance-row {
grid-column: auto;
grid-row: auto;
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
flex-wrap: nowrap;
width: 100%;
gap: 12px;
margin-bottom: 8px;
}
.home-apple .hook-balance .balance-col {
display: flex;
align-items: baseline;
gap: 6px;
flex-shrink: 0;
text-align: center;
width: auto;
}
.home-apple .hook-balance .balance-col .hook-num {
font-size: 24px !important;
margin-bottom: 0;
line-height: 1;
}
.home-apple .hook-balance .balance-col .hook-label {
font-size: 11px;
letter-spacing: -0.005em;
margin: 0;
text-align: left;
text-transform: none;
font-weight: 500;
color: var(--text-2);
}
.home-apple .hook-balance .balance-sep {
font-size: 16px;
color: var(--text-3);
padding: 0;
line-height: 1;
}
}
/* =========================================================
POLÍTICOS · diseño editorial (scoped en .pol-apple)
Eliminar este bloque o quitar la clase wrapper en JS revierte
========================================================= */
.pol-apple {
max-width: 1240px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Header */
.pol-apple-header {
text-align: center;
margin-bottom: 40px;
padding: 0 16px;
}
.pol-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.pol-apple-title {
font-size: clamp(44px, 7vw, 76px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.02;
margin-bottom: 14px;
color: var(--text);
}
.pol-apple-tagline {
font-size: clamp(15px, 1.7vw, 18px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.45;
color: var(--text-2);
max-width: 680px;
margin: 0 auto;
}
/* Toolbar editorial — contenedor surface sin bordes internos chocando */
.pol-apple .toolbar.pol-toolbar {
display: block;
background: var(--surface);
border: 0;
border-radius: 18px;
padding: 12px 14px;
margin-bottom: 24px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.pol-apple .pol-toolbar-row {
display: flex;
gap: 10px;
align-items: center;
}
.pol-apple .pol-toolbar input[type="search"] {
flex: 1 1 auto;
border-radius: 100px;
border: 0;
background: var(--bg);
padding: 10px 18px;
font-size: 14px;
letter-spacing: -0.005em;
transition: box-shadow .2s;
box-shadow: inset 0 0 0 1px var(--border);
min-width: 0;
}
.pol-apple .pol-toolbar input[type="search"]:focus {
outline: none;
box-shadow: inset 0 0 0 1.5px var(--text), 0 0 0 3px rgba(0,0,0,.05);
}
.pol-apple .pol-filters-collapse {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 10px;
}
.pol-apple .filter-select {
border-radius: 100px;
border: 0;
background: var(--bg) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
box-shadow: inset 0 0 0 1px var(--border);
padding: 8px 30px 8px 14px;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
appearance: none;
-webkit-appearance: none;
}
.pol-apple .btn-group {
background: var(--bg);
border-radius: 100px;
padding: 3px;
border: 0;
box-shadow: inset 0 0 0 1px var(--border);
gap: 0;
display: inline-flex;
flex-wrap: nowrap;
}
.pol-apple .btn-group .btn {
border-radius: 100px;
border: 0;
background: transparent;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--text-2);
transition: all .25s cubic-bezier(.2,.8,.2,1);
white-space: nowrap;
}
.pol-apple .btn-group .btn:hover:not(.active) { color: var(--text); }
.pol-apple .btn-group .btn.active {
background: var(--text);
color: var(--bg);
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
[data-theme="dark"] .pol-apple .btn-group .btn.active {
background: var(--text);
color: var(--bg);
}
/* Botón toggle "Filtros" (solo mobile) */
.pol-apple .pol-filters-toggle {
display: none;
align-items: center;
gap: 6px;
background: var(--bg);
border: 0;
box-shadow: inset 0 0 0 1px var(--border);
border-radius: 100px;
padding: 9px 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
cursor: pointer;
flex-shrink: 0;
transition: transform .2s;
}
.pol-apple .pol-filters-toggle:active { transform: scale(0.96); }
.pol-apple .pol-filters-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 100px;
background: var(--text);
color: var(--bg);
font-size: 11px;
font-weight: 700;
margin-left: 2px;
}
/* Pol cards refinados */
.pol-apple .pol-grid {
gap: 14px;
}
.pol-apple .pol-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.pol-apple .pol-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.07);
}
.pol-apple .pol-rank {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-3);
background: transparent;
padding: 0;
min-width: 28px;
}
.pol-apple .pol-avatar { flex-shrink: 0; }
.pol-apple .pol-avatar > div {
border-radius: 50% !important;
}
.pol-apple .pol-avatar img {
border-radius: 50% !important;
object-fit: cover;
}
.pol-apple .pol-name {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.pol-apple .pol-role {
font-size: 13px;
font-weight: 400;
color: var(--text-2);
letter-spacing: -0.005em;
}
.pol-apple .pol-score {
font-size: 30px !important;
font-weight: 700 !important;
letter-spacing: -0.035em !important;
border-radius: 14px !important;
padding: 6px 12px !important;
}
.pol-apple .pol-chips .chip {
border-radius: 10px;
padding: 8px 6px;
}
.pol-apple .chip-label {
font-size: 11px;
font-weight: 500;
letter-spacing: -0.002em;
color: var(--text-2);
}
.pol-apple .chip-value {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
/* Show more button */
.pol-apple .show-more { margin: 24px 0; text-align: center; }
.pol-apple .show-more .btn {
border-radius: 100px;
padding: 10px 24px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
background: var(--text);
color: var(--bg);
border: 0;
transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.pol-apple .show-more .btn:hover { transform: scale(1.04); }
/* Pol-dims footer (categorías analizadas) */
.pol-apple .pol-dims-footer { margin-top: 56px; }
.pol-apple .pol-dims-footer .section-head h2 {
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 700;
letter-spacing: -0.035em;
margin-bottom: 10px;
}
.pol-apple .pol-dims-footer .section-head p {
font-size: 15px;
color: var(--text-2);
letter-spacing: -0.005em;
max-width: 580px;
margin: 0 auto 28px;
}
.pol-apple .pol-intro-dims {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.pol-apple .pol-dim-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.pol-apple .pol-dim-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.07);
}
.pol-apple .pol-dim-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.pol-apple .pol-dim-num {
width: 30px;
height: 30px;
border-radius: 10px;
background: var(--dim-color, var(--text));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.pol-apple .pol-dim-name {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text);
flex: 1;
}
.pol-apple .pol-dim-w {
font-size: 11px;
font-weight: 600;
letter-spacing: -0.002em;
color: var(--text-3);
padding: 3px 8px;
border-radius: 100px;
background: var(--surface-3);
}
.pol-apple .pol-dim-card p {
font-size: 13px;
font-weight: 400;
letter-spacing: -0.002em;
line-height: 1.5;
color: var(--text-2);
}
/* Detail card "Currículum y trayectoria" — estilo lista de ajustes minimal
Filas con label izquierda + value derecha, separadores sutiles */
.pol-apple .cv-extended {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 8px 22px 18px;
margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.pol-apple .cv-head {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
margin: 0;
padding: 14px 0 12px;
border-bottom: 1px solid var(--border);
}
.pol-apple .cv-list {
display: block;
grid-template-columns: none;
gap: 0;
margin: 0;
}
.pol-apple .cv-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.pol-apple .cv-row:last-child { border-bottom: 0; }
.pol-apple .cv-label {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-2);
text-transform: none;
margin: 0;
white-space: nowrap;
}
.pol-apple .cv-value {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.002em;
color: var(--text);
line-height: 1.5;
margin: 0;
}
.pol-apple .cv-source {
margin: 0;
padding-top: 14px;
border-top: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
.pol-apple .cv-source a {
color: var(--c-info);
font-weight: 600;
}
@media (max-width: 720px) {
.pol-apple .cv-extended { padding: 6px 18px 16px; border-radius: 14px; }
.pol-apple .cv-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 0;
}
.pol-apple .cv-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.pol-apple .cv-value { font-size: 13.5px; }
}
/* Mobile responsive — filtros colapsables */
@media (max-width: 720px) {
.pol-apple { padding: 16px 0 48px; }
.pol-apple-header { margin-bottom: 28px; }
.pol-apple-tagline { font-size: 15px; }
.pol-apple .toolbar.pol-toolbar { padding: 10px 12px; border-radius: 16px; }
.pol-apple .pol-toolbar-row { gap: 8px; }
.pol-apple .pol-filters-toggle { display: inline-flex; }
/* Por defecto colapsado en mobile */
.pol-apple .pol-filters-collapse {
display: none;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.pol-apple .pol-toolbar.filters-open .pol-filters-collapse { display: flex; }
/* Filtros desplegados en mobile: altura proporcionada al ancho completo
(de pill estrecha a rounded rectangle de altura comoda para tap) */
.pol-apple .pol-filters-collapse .filter-select,
.pol-apple .pol-filters-collapse #party-filter,
.pol-apple .pol-filters-collapse #era-filter,
.pol-apple .pol-filters-collapse #sort-filter {
width: 100%;
display: block;
box-sizing: border-box;
/* CRITICO: anular flex: 1 1 100px que aplica a .mobile-only-select y a
.toolbar #party-filter (que tiene mas especificidad por usar ID).
En flex-direction column, flex-basis 100px = altura minima 100px */
flex: 0 0 auto;
min-width: 0;
height: 36px;
padding: 0 32px 0 14px;
font-size: 13px;
line-height: 36px;
border-radius: 10px;
background-position: right 12px center;
background-size: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.pol-apple .pol-filters-collapse .btn-group {
width: 100%;
justify-content: space-between;
border-radius: 10px;
padding: 2px;
}
.pol-apple .pol-filters-collapse .btn-group .btn {
border-radius: 8px;
padding: 3px 10px;
font-size: 12px;
line-height: 1.3;
flex: 1;
text-align: center;
}
.pol-apple .pol-filters-collapse .btn-group.pol-dir-group {
width: auto;
align-self: flex-end;
border-radius: 100px;
}
.pol-apple .pol-filters-collapse .btn-group.pol-dir-group .btn {
border-radius: 100px;
flex: 0 0 auto;
padding: 3px 12px;
}
.pol-apple .pol-card { padding: 16px 16px; border-radius: 14px; }
.pol-apple .pol-name { font-size: 16px; }
.pol-apple .pol-score { font-size: 26px !important; }
.pol-apple .pol-dim-card { padding: 16px 18px; border-radius: 14px; }
}
/* =========================================================
PARTIDOS · diseño editorial (scoped en .parties-apple)
Eliminar este bloque o quitar la clase wrapper en JS revierte
========================================================= */
.parties-apple {
max-width: 980px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.parties-apple-header {
text-align: center;
margin-bottom: 40px;
padding: 0 16px;
}
.parties-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.parties-apple-title {
font-size: clamp(44px, 7vw, 76px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.02;
margin-bottom: 14px;
color: var(--text);
}
.parties-apple-tagline {
font-size: clamp(15px, 1.7vw, 18px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.45;
color: var(--text-2);
max-width: 680px;
margin: 0 auto;
}
.parties-apple-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
/* Party cards */
.parties-apple .pol-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 22px 24px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.parties-apple .pol-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.07);
}
.parties-apple .pol-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.parties-apple .pol-rank {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-3);
background: transparent;
min-width: 32px;
padding: 0;
}
.parties-apple .pol-avatar { flex-shrink: 0; }
.parties-apple .pol-avatar > div {
border-radius: 50% !important;
}
.parties-apple .pol-avatar img {
border-radius: 50% !important;
object-fit: cover;
}
.parties-apple .pol-name {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: 2px;
}
.parties-apple .pol-role {
font-size: 13px;
font-weight: 400;
color: var(--text-2);
letter-spacing: -0.005em;
}
.parties-apple .pol-score {
font-size: 34px !important;
font-weight: 700 !important;
letter-spacing: -0.035em !important;
border-radius: 16px !important;
padding: 8px 16px !important;
}
.parties-apple .pol-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px;
}
.parties-apple .pol-chips .chip {
background: var(--bg);
border: 1px solid var(--border);
border-bottom-width: 3px;
border-radius: 12px;
padding: 10px 8px;
text-align: center;
}
.parties-apple .chip-label {
font-size: 11px;
font-weight: 500;
letter-spacing: -0.002em;
color: var(--text-2);
margin-bottom: 4px;
}
.parties-apple .chip-value {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.015em;
}
/* Mobile responsive */
@media (max-width: 720px) {
.parties-apple { padding: 16px 0 48px; }
.parties-apple-header { margin-bottom: 28px; }
.parties-apple-tagline { font-size: 15px; }
.parties-apple .pol-card { padding: 16px 16px; border-radius: 16px; }
.parties-apple .pol-name { font-size: 18px; }
.parties-apple .pol-score { font-size: 26px !important; padding: 6px 12px !important; }
}
/* =========================================================
COMPARAR · diseño editorial (scoped en .cmp-apple)
========================================================= */
.cmp-apple {
max-width: 1240px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cmp-apple-header {
text-align: center;
margin-bottom: 40px;
padding: 0 16px;
}
.cmp-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.cmp-apple-title {
font-size: clamp(44px, 7vw, 76px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.02;
margin-bottom: 14px;
color: var(--text);
}
.cmp-apple-tagline {
font-size: clamp(15px, 1.7vw, 18px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.45;
color: var(--text-2);
max-width: 680px;
margin: 0 auto;
}
.cmp-apple .toolbar.cmp-toolbar {
background: var(--surface);
border: 0;
border-radius: 18px;
padding: 12px 14px;
margin-bottom: 24px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
gap: 10px;
}
.cmp-apple .cmp-toolbar input[type="search"] {
border-radius: 100px;
border: 0;
background: var(--bg);
box-shadow: inset 0 0 0 1px var(--border);
padding: 10px 18px;
font-size: 14px;
letter-spacing: -0.005em;
transition: box-shadow .2s;
}
.cmp-apple .cmp-toolbar input[type="search"]:focus {
outline: none;
box-shadow: inset 0 0 0 1.5px var(--text), 0 0 0 3px rgba(0,0,0,.05);
}
.cmp-apple .cmp-counter {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-2);
padding: 0 10px;
}
.cmp-apple .cmp-toolbar .btn {
border-radius: 100px;
border: 0;
background: var(--text);
color: var(--bg);
padding: 9px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
.cmp-apple .compare-slot {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 24px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
display: flex;
flex-direction: column;
gap: 14px;
}
.cmp-apple .compare-slot:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.07);
}
.cmp-apple .compare-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 200px;
text-align: center;
padding: 32px 16px;
letter-spacing: -0.005em;
line-height: 1.45;
}
.cmp-apple .compare-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--text-2);
}
.cmp-apple .compare-empty-hint {
font-size: 12px;
font-weight: 400;
color: var(--text-3);
}
.cmp-apple .pol-avatar { flex-shrink: 0; }
.cmp-apple .pol-avatar > div { border-radius: 50% !important; }
.cmp-apple .pol-avatar img { border-radius: 50% !important; object-fit: cover; }
/* Header del slot: avatar arriba a la izquierda + info al lado + score a la derecha
En columnas estrechas el nombre puede ocupar 2 líneas sin truncarse */
.cmp-apple .compare-slot .pol-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 0;
}
.cmp-apple .compare-slot .pol-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cmp-apple .compare-slot .pol-name {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
white-space: normal;
overflow: visible;
text-overflow: clip;
color: var(--text);
}
.cmp-apple .compare-slot .pol-role {
font-size: 12.5px;
font-weight: 400;
color: var(--text-2);
letter-spacing: -0.005em;
line-height: 1.35;
white-space: normal;
overflow: visible;
}
.cmp-apple .compare-slot .pol-tags-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.cmp-apple .compare-slot .pol-party {
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 100px;
}
.cmp-apple .compare-slot .pol-status {
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 100px;
}
.cmp-apple .compare-slot .pol-score {
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
border-radius: 12px !important;
padding: 6px 12px !important;
flex-shrink: 0;
align-self: flex-start;
line-height: 1;
}
.cmp-apple .compare-radar { margin: 4px 0; }
.cmp-apple .compare-slot .pol-chips {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.cmp-apple .compare-slot .chip {
background: var(--bg);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 10px;
padding: 8px 4px;
text-align: center;
}
.cmp-apple .compare-slot .chip-label {
font-size: 10px;
font-weight: 500;
letter-spacing: -0.002em;
color: var(--text-2);
margin-bottom: 2px;
text-transform: none;
}
.cmp-apple .compare-slot .chip-value {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
.cmp-apple .compare-clear {
border-radius: 100px;
border: 0;
background: var(--surface-3);
color: var(--text);
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
margin-top: auto;
align-self: stretch;
transition: background .2s;
}
.cmp-apple .compare-clear:hover { background: var(--border-strong); }
.cmp-apple .method-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 22px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.cmp-apple .method-block h3 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--text);
}
.cmp-apple .bar-row { margin-bottom: 10px; }
.cmp-apple .bar-track {
background: var(--surface-3);
border-radius: 100px;
overflow: hidden;
height: 6px;
}
.cmp-apple .bar-track > div {
height: 100%;
border-radius: 100px;
transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.cmp-apple .bar-row-head .name {
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
}
.cmp-apple .bar-row-head .val {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.005em;
}
.cmp-apple .section-head h2 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
letter-spacing: -0.03em;
text-align: center;
}
@media (max-width: 720px) {
.cmp-apple { padding: 16px 0 48px; }
.cmp-apple-header { margin-bottom: 28px; }
.cmp-apple-tagline { font-size: 15px; }
.cmp-apple .toolbar.cmp-toolbar { padding: 10px 12px; border-radius: 16px; }
.cmp-apple .compare-slot { padding: 18px 18px; border-radius: 16px; }
}
/* =========================================================
METODOLOGÍA · diseño editorial (scoped en .method-apple)
========================================================= */
.method-apple {
max-width: 1080px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.method-apple-header {
text-align: center;
margin-bottom: 40px;
padding: 0 16px;
}
.method-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.method-apple-title {
font-size: clamp(44px, 7vw, 76px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.02;
margin-bottom: 14px;
color: var(--text);
}
.method-apple-tagline {
font-size: clamp(15px, 1.7vw, 18px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.45;
color: var(--text-2);
max-width: 720px;
margin: 0 auto;
}
/* TOC nav */
.method-apple .method-toc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 26px;
margin-bottom: 36px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.method-apple .method-toc-title {
font-size: 12px;
font-weight: 700;
letter-spacing: -0.002em;
color: var(--text-3);
text-transform: uppercase;
margin-bottom: 14px;
}
.method-apple .method-toc ol {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 4px 18px;
counter-reset: toc;
}
.method-apple .method-toc li {
counter-increment: toc;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.method-apple .method-toc li:last-child { border-bottom: 0; }
.method-apple .method-toc a {
color: var(--text);
display: flex;
align-items: baseline;
gap: 10px;
transition: opacity .2s;
}
.method-apple .method-toc a::before {
content: counter(toc, decimal-leading-zero);
font-size: 11px;
font-weight: 700;
color: var(--text-3);
letter-spacing: 0;
}
.method-apple .method-toc a:hover { opacity: 0.7; }
/* Method groups */
.method-apple .method-group {
margin-bottom: 56px;
scroll-margin-top: 80px;
}
.method-apple .method-group-head {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.method-apple .method-group-num {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--text);
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
letter-spacing: -0.02em;
}
.method-apple .method-group-head h2 {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 4px;
}
.method-apple .method-group-head p {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--text-2);
line-height: 1.5;
}
.method-apple .method-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 24px 26px;
margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.method-apple .method-block h3 {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--text);
}
.method-apple .method-block p {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--text-2);
line-height: 1.55;
margin-bottom: 12px;
}
.method-apple .method-block p:last-child { margin-bottom: 0; }
.method-apple .method-block p.muted {
font-size: 12.5px;
color: var(--text-3);
}
/* Dim blocks */
.method-apple .method-dim {
padding: 0;
overflow: hidden;
}
.method-apple .method-dim-head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.method-apple .method-dim .dim-num {
width: 36px;
height: 36px;
border-radius: 12px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
}
.method-apple .method-dim .dim-title-wrap {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.method-apple .method-dim .dim-title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
.method-apple .method-dim .dim-weight-badge {
font-size: 11px;
font-weight: 700;
letter-spacing: -0.002em;
padding: 3px 10px;
border-radius: 100px;
border: 1px solid;
}
.method-apple .method-dim > p,
.method-apple .method-dim > table,
.method-apple .method-dim > ul {
padding: 0 24px;
}
.method-apple .method-dim > p:first-of-type { padding-top: 18px; }
.method-apple .method-dim > p:last-of-type { padding-bottom: 18px; }
.method-apple .method-dim table {
width: calc(100% - 48px);
margin: 14px 24px;
padding: 0;
border-collapse: collapse;
font-size: 13px;
letter-spacing: -0.002em;
}
.method-apple .method-dim th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-3);
padding: 10px 8px;
border-bottom: 1px solid var(--border);
}
.method-apple .method-dim td {
padding: 10px 8px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.method-apple .method-dim tr:last-child td { border-bottom: 0; }
/* Weight grid */
.method-apple .weight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.method-apple .weight-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 16px;
text-align: center;
}
.method-apple .weight-label {
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-2);
margin-bottom: 6px;
}
.method-apple .weight-value {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
}
@media (max-width: 720px) {
.method-apple { padding: 16px 0 48px; }
.method-apple-header { margin-bottom: 28px; }
.method-apple-tagline { font-size: 15px; }
.method-apple .method-toc { padding: 18px 20px; border-radius: 16px; }
.method-apple .method-toc ol { grid-template-columns: 1fr; }
.method-apple .method-block { padding: 18px 18px; border-radius: 14px; }
.method-apple .method-dim-head { padding: 14px 18px; }
.method-apple .method-dim > p,
.method-apple .method-dim > table,
.method-apple .method-dim > ul { padding: 0 18px; }
.method-apple .method-dim table { width: calc(100% - 36px); margin: 12px 18px; }
.method-apple .method-group-num { width: 36px; height: 36px; font-size: 16px; }
}
/* =========================================================
REFERENCIAS · diseño editorial (scoped en .refs-apple)
========================================================= */
.refs-apple {
max-width: 1080px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.refs-apple-header {
text-align: center;
margin-bottom: 40px;
padding: 0 16px;
}
.refs-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.refs-apple-title {
font-size: clamp(44px, 7vw, 76px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.02;
margin-bottom: 14px;
color: var(--text);
}
.refs-apple-tagline {
font-size: clamp(15px, 1.7vw, 18px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.45;
color: var(--text-2);
max-width: 720px;
margin: 0 auto;
}
.refs-apple .refs-section {
margin-top: 56px;
}
.refs-apple .refs-section-head {
text-align: center;
margin-bottom: 28px;
}
.refs-apple .refs-section-head h3 {
font-size: clamp(24px, 3vw, 34px);
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 8px;
color: var(--text);
}
.refs-apple .refs-section-head p {
font-size: 15px;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--text-2);
line-height: 1.5;
max-width: 580px;
margin: 0 auto;
}
@media (max-width: 720px) {
.refs-apple { padding: 16px 0 48px; }
.refs-apple-header { margin-bottom: 28px; }
.refs-apple-tagline { font-size: 15px; }
}
/* =========================================================
LEGAL · Aviso legal, privacidad y cookies (.legal-apple)
========================================================= */
.legal-apple {
max-width: 880px;
margin: 0 auto;
padding: 24px 0 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.legal-apple-header {
text-align: center;
margin-bottom: 40px;
padding: 0 16px;
}
.legal-apple-eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-3);
margin-bottom: 10px;
}
.legal-apple-title {
font-size: clamp(36px, 5.6vw, 60px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.05;
margin-bottom: 14px;
color: var(--text);
}
.legal-apple-tagline {
font-size: clamp(14px, 1.6vw, 16px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.5;
color: var(--text-2);
max-width: 640px;
margin: 0 auto;
}
.legal-apple .legal-toc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 24px;
margin-bottom: 32px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.legal-apple .legal-toc-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 12px;
}
.legal-apple .legal-toc ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 4px 18px;
counter-reset: legal-toc;
}
.legal-apple .legal-toc li {
counter-increment: legal-toc;
padding: 6px 0;
font-size: 14px;
border-bottom: 1px solid var(--border);
}
.legal-apple .legal-toc li:last-child { border-bottom: 0; }
.legal-apple .legal-toc a {
display: flex;
align-items: baseline;
gap: 10px;
color: var(--text);
font-weight: 500;
letter-spacing: -0.005em;
}
.legal-apple .legal-toc a::before {
content: counter(legal-toc, decimal-leading-zero);
font-size: 11px;
font-weight: 700;
color: var(--text-3);
}
.legal-apple .legal-toc a:hover { opacity: 0.7; }
.legal-apple .legal-section {
margin-bottom: 32px;
scroll-margin-top: 80px;
}
.legal-apple .legal-section > h2 {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 14px;
color: var(--text);
}
.legal-apple .legal-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 26px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}
.legal-apple .legal-block h3 {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.015em;
margin: 18px 0 8px;
color: var(--text);
}
.legal-apple .legal-block h3:first-child { margin-top: 0; }
.legal-apple .legal-block p,
.legal-apple .legal-block ul {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.6;
color: var(--text-2);
margin-bottom: 10px;
}
.legal-apple .legal-block ul { padding-left: 22px; }
.legal-apple .legal-block li { margin-bottom: 6px; }
.legal-apple .legal-block a {
color: var(--c-info);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-apple .legal-block b { color: var(--text); font-weight: 700; }
.legal-apple .legal-table {
width: 100%;
border-collapse: collapse;
margin: 12px 0 16px;
font-size: 13px;
}
.legal-apple .legal-table th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-3);
padding: 8px 10px;
border-bottom: 1px solid var(--border);
}
.legal-apple .legal-table td {
padding: 10px;
border-bottom: 1px solid var(--border);
vertical-align: top;
color: var(--text);
}
.legal-apple .legal-table tr:last-child td { border-bottom: 0; }
.legal-apple .legal-table code {
background: var(--surface-3);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
}
.legal-apple .legal-updated {
text-align: center;
font-size: 12px;
color: var(--text-3);
margin-top: 28px;
letter-spacing: -0.002em;
}
@media (max-width: 720px) {
.legal-apple { padding: 16px 0 48px; }
.legal-apple-header { margin-bottom: 28px; }
.legal-apple .legal-toc { padding: 16px 18px; border-radius: 14px; }
.legal-apple .legal-toc ol { grid-template-columns: 1fr; }
.legal-apple .legal-block { padding: 18px 18px; border-radius: 14px; }
.legal-apple .legal-table { font-size: 12px; }
.legal-apple .legal-table th, .legal-apple .legal-table td { padding: 6px 6px; }
}
/* =========================================================
COOKIE NOTICE (informativo, sin opt-in porque solo hay
cookies tecnicas esenciales)
========================================================= */
.cookie-notice {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 90;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
padding: 14px 18px;
max-width: 720px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
animation: cookieNoticeSlideUp 0.4s cubic-bezier(.2,.8,.2,1);
}
@keyframes cookieNoticeSlideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cookie-notice-inner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.cookie-notice-text {
flex: 1 1 280px;
font-size: 13px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.45;
color: var(--text-2);
min-width: 0;
}
.cookie-notice-text b { color: var(--text); font-weight: 700; }
.cookie-notice-text a {
color: var(--c-info);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-notice-btn {
flex-shrink: 0;
background: var(--text);
color: var(--bg);
border: 0;
border-radius: 100px;
padding: 8px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: transform .2s;
}
.cookie-notice-btn:hover { transform: scale(1.04); }
.cookie-notice-btn:active { transform: scale(0.97); }
@media (max-width: 520px) {
.cookie-notice { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; }
.cookie-notice-text { font-size: 12px; flex-basis: 100%; }
.cookie-notice-btn { width: 100%; padding: 10px; }
}
/* Aviso legal dentro del modal de feedback */
.feedback-legal-note {
font-size: 11px;
font-weight: 400;
color: var(--text-3);
letter-spacing: -0.002em;
line-height: 1.45;
margin-top: 10px;
text-align: center;
}
.feedback-legal-note a {
color: var(--c-info);
text-decoration: underline;
text-underline-offset: 2px;
}
/* === Feedback FAB + Modal === */
.feedback-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
border: 0;
background: linear-gradient(135deg, #2563eb 0%, #1a4a8a 100%);
color: #fff;
cursor: pointer;
box-shadow: 0 8px 24px rgba(37,99,235,0.35), 0 2px 6px rgba(0,0,0,0.15);
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s ease, box-shadow .2s ease;
animation: feedbackPulse 2.6s ease-in-out infinite;
}
.feedback-fab:hover {
transform: translateY(-2px) scale(1.06);
box-shadow: 0 12px 32px rgba(37,99,235,0.45), 0 3px 8px rgba(0,0,0,0.2);
}
.feedback-fab:active { transform: translateY(0) scale(0.98); }
.feedback-fab svg { width: 26px; height: 26px; }
@keyframes feedbackPulse {
0%, 100% { box-shadow: 0 8px 24px rgba(37,99,235,0.35), 0 0 0 0 rgba(37,99,235,0.4); }
50% { box-shadow: 0 8px 24px rgba(37,99,235,0.45), 0 0 0 10px rgba(37,99,235,0); }
}
@media (prefers-reduced-motion: reduce) {
.feedback-fab { animation: none; }
}
.feedback-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.feedback-modal[hidden] { display: none; }
.feedback-overlay {
position: absolute;
inset: 0;
background: rgba(8, 10, 14, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: feedbackFadeIn .2s ease;
}
.feedback-panel {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 26px 24px;
max-width: 480px;
width: 100%;
box-shadow: 0 30px 80px rgba(0,0,0,0.25);
animation: feedbackSlideUp .25s ease;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
@keyframes feedbackFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes feedbackSlideUp {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.feedback-close {
position: absolute;
top: 12px;
right: 14px;
width: 32px; height: 32px;
border: 0;
background: transparent;
color: var(--text-2);
font-size: 24px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background .15s ease, color .15s ease;
}
.feedback-close:hover { background: var(--surface-3); color: var(--text); }
.feedback-eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #2563eb;
margin-bottom: 8px;
}
.feedback-panel h3 {
font-size: 22px;
font-weight: 800;
letter-spacing: -.015em;
margin: 0 0 8px;
color: var(--text);
}
.feedback-desc {
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
margin: 0 0 20px;
}
.feedback-field {
display: block;
margin-bottom: 14px;
}
.feedback-field span {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-2);
margin-bottom: 6px;
}
.feedback-field select,
.feedback-field input,
.feedback-field textarea {
width: 100%;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 13.5px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.feedback-field select:focus,
.feedback-field input:focus,
.feedback-field textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.feedback-field textarea { min-height: 100px; line-height: 1.5; }
.feedback-submit {
width: 100%;
padding: 12px 16px;
background: var(--text);
color: var(--bg);
border: 0;
border-radius: 8px;
font-size: 14px;
font-weight: 800;
font-family: inherit;
cursor: pointer;
letter-spacing: -.005em;
transition: opacity .15s ease, transform .15s ease;
margin-top: 6px;
}
.feedback-submit:hover { opacity: 0.9; }
.feedback-submit:active { transform: scale(0.98); }
.feedback-success { text-align: center; padding: 12px 0; }
.feedback-success-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #16a34a18;
color: #16a34a;
font-size: 30px;
font-weight: 900;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-success h4 {
font-size: 18px;
font-weight: 800;
margin: 0 0 6px;
color: var(--text);
}
.feedback-success p {
font-size: 13px;
color: var(--text-2);
margin: 0 0 18px;
line-height: 1.5;
}
.feedback-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: 12.5px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 12px;
line-height: 1.45;
}
[data-theme="dark"] .feedback-error {
background: rgba(220,38,38,0.1);
border-color: rgba(220,38,38,0.35);
color: #fca5a5;
}
.feedback-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@media (max-width: 540px) {
.feedback-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
.feedback-fab svg { width: 22px; height: 22px; }
.feedback-panel { padding: 22px 18px 18px; }
.feedback-panel h3 { font-size: 19px; }
}
@media (min-width: 768px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 40px; } }
main { flex: 1; padding: 24px 16px 60px; }
@media (min-width: 768px) { main { padding: 32px 24px 80px; } }
/* === Header === */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--bg);
border-bottom: 1px solid var(--border);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
}
.header-inner {
display: flex; align-items: center; gap: 12px;
height: 60px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.logo-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent); color: var(--accent-fg);
font-size: 13px; font-weight: 900;
}
.logo-text { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .logo-text { font-size: 13.5px; max-width: 200px; } }
@media (max-width: 380px) { .logo-text { font-size: 12.5px; max-width: 160px; } }
.main-nav {
display: flex; align-items: center; gap: 4px;
margin-left: auto;
flex: 1; justify-content: flex-end;
overflow-x: auto;
scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
padding: 8px 12px; border-radius: 8px;
font-size: 13px; font-weight: 600; color: var(--text-2);
white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.main-nav a:hover { background: var(--surface-3); color: var(--text); }
.main-nav a.active { background: var(--accent); color: var(--accent-fg); }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text);
flex-shrink: 0;
transition: background var(--transition);
}
.icon-btn:hover { background: var(--surface-3); }
.menu-toggle { display: none; }
@media (max-width: 768px) {
/* Hamburger oculto: la nav se ve siempre como tira horizontal scrollable */
.menu-toggle { display: none; }
/* Header en 2 filas: arriba logo + tema, abajo nav scrollable */
.header-inner {
flex-wrap: wrap;
height: auto;
padding-top: 10px;
padding-bottom: 0;
gap: 8px;
align-items: center;
}
.logo { flex: 1; min-width: 0; }
#theme-toggle { margin-left: auto; }
/* La nav ocupa toda la anchura abajo, scroll horizontal si hace falta */
.main-nav {
order: 2;
flex: 0 0 100%;
position: static;
transform: none;
background: transparent;
border: 0; box-shadow: none; padding: 0 0 6px;
flex-direction: row;
align-items: center;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
margin-left: 0;
justify-content: flex-start;
/* Solo fade derecho como hint de scroll horizontal; izquierda sin difuminar */
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.main-nav a {
padding: 8px 12px;
font-size: 12.5px;
font-weight: 700;
flex-shrink: 0;
scroll-snap-align: start;
border-radius: 6px;
}
}
/* === Footer === */
.site-footer {
border-top: 1px solid var(--border);
background: var(--surface);
padding: 48px 0 24px;
margin-top: 60px;
font-size: 13px;
color: var(--text-2);
line-height: 1.6;
}
.site-footer a { color: var(--text-2); text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: var(--text); }
.site-footer .muted { color: var(--text-3); }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 36px;
margin-bottom: 32px;
}
@media (max-width: 720px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
.footer-grid { grid-template-columns: 1fr; gap: 20px; }
}
.footer-col h4 {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text);
margin: 0 0 14px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-col li { font-size: 12.5px; }
.footer-brand-title {
font-size: 17px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--text);
margin-bottom: 10px;
}
.footer-tagline {
font-size: 12.5px;
color: var(--text-2);
line-height: 1.55;
max-width: 380px;
margin: 0;
}
.footer-src {
font-size: 11.5px;
color: var(--text-3);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
letter-spacing: -.01em;
}
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: var(--text-3);
font-weight: 600;
}
.footer-meta .footer-sep { color: var(--text-3); opacity: 0.5; }
.footer-disclaimer {
font-size: 11px;
color: var(--text-3);
line-height: 1.55;
max-width: 760px;
}
/* === Loading === */
.loading {
text-align: center; padding: 80px 20px; color: var(--text-3);
font-size: 13px;
}
/* === Hero (home) === */
.hero { text-align: center; padding: 0 0 28px; }
/* === Hero stage con mosaico de caras + overlay === */
.hero-stage {
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 72px 16px 56px;
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--border);
}
.hero-mosaic-bg {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-mosaic-cell {
position: relative;
overflow: hidden;
background: var(--surface-2);
min-width: 0;
min-height: 0;
}
/* Desktop: 12x5 = 60 visibles */
.hero-mosaic-cell:nth-child(n+61) { display: none; }
.hero-mosaic-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.7);
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: -.5px;
}
.hero-mosaic-cell img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%; /* foco aún más arriba para preservar caras */
opacity: 0;
transition: opacity .6s ease;
display: block;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.88);
z-index: 1;
pointer-events: none;
}
[data-theme="dark"] .hero-overlay {
background: rgba(8,10,14,0.72);
}
.hero-stage-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 1100px) {
/* 9 cols × 5 rows = 45 */
.hero-mosaic-bg { grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); }
.hero-mosaic-cell { display: block; }
.hero-mosaic-cell:nth-child(n+46) { display: none; }
}
@media (max-width: 720px) {
/* 7 cols × 7 rows = 49 */
.hero-mosaic-bg { grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); }
.hero-mosaic-cell { display: block; }
.hero-mosaic-cell:nth-child(n+50) { display: none; }
.hero-stage { padding: 56px 16px 44px; min-height: 540px; }
}
@media (max-width: 480px) {
/* 6 cols × 6 rows = 36 */
.hero-mosaic-bg { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.hero-mosaic-cell { display: block; }
.hero-mosaic-cell:nth-child(n+37) { display: none; }
.hero-stage { padding: 48px 12px 36px; min-height: 480px; }
}
@media (max-width: 360px) {
/* 5 cols × 6 rows = 30 */
.hero-mosaic-bg { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); }
.hero-mosaic-cell { display: block; }
.hero-mosaic-cell:nth-child(n+31) { display: none; }
.hero-stage { min-height: 420px; }
}
.hero .eyebrow {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 3px; color: var(--text-2); margin-bottom: 12px;
}
.hero h1 {
font-size: clamp(32px, 6vw, 52px); font-weight: 900;
letter-spacing: -.02em; line-height: 1.05;
margin-bottom: 16px;
}
.hero p.lead {
font-size: clamp(15px, 2.4vw, 19px); color: var(--text-2);
max-width: 680px; margin: 0 auto 20px; line-height: 1.55;
}
/* === Preguntas editoriales estáticas (Inicio) === */
.lead-questions {
margin: 42px auto 48px;
max-width: 960px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
}
.lead-q-row {
padding: 8px 6px;
}
.lead-q {
font-family: 'Playfair Display', 'Source Serif Pro', Georgia, 'Times New Roman', Garamond, serif;
font-size: clamp(40px, 6.4vw, 72px);
font-weight: 500;
font-style: italic;
color: var(--text);
letter-spacing: -.02em;
line-height: 1.15;
display: block;
}
@media (max-width: 720px) {
.lead-questions { margin: 30px auto 36px; gap: 2px; }
.lead-q-row { padding: 7px 4px; }
.lead-q { font-size: clamp(34px, 10vw, 48px); line-height: 1.2; }
}
.hero .meta {
font-size: 12px; color: var(--text-2); margin-bottom: 6px;
}
.hero .tagline {
font-size: 13px; font-weight: 900; color: var(--text);
margin-bottom: 24px;
}
.hero-meta {
display: inline-flex;
flex-wrap: wrap;
gap: 10px 18px;
align-items: center;
justify-content: center;
margin-top: 12px;
padding: 12px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
}
.hero-meta-item {
font-size: 12px; color: var(--text-2);
white-space: nowrap;
}
.hero-meta-item b { color: var(--text); font-weight: 800; }
.hero-meta-item + .hero-meta-item {
border-left: 1px solid var(--border);
padding-left: 18px;
}
@media (max-width: 540px) {
.hero-meta { border-radius: 14px; padding: 10px 14px; }
.hero-meta-item + .hero-meta-item { border-left: 0; padding-left: 0; }
}
.hero-hooks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 36px auto 0;
max-width: 960px;
}
.hook {
--accent-1: #111;
--accent-2: #555;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 18px 22px;
text-align: center;
position: relative;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hook::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.hook::after {
content: '';
position: absolute;
inset: auto -40% -40% auto;
width: 180px; height: 180px;
background: radial-gradient(circle, var(--accent-1) 0%, transparent 65%);
opacity: 0.06;
pointer-events: none;
}
.hook:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.08);
border-color: var(--accent-1);
}
.hook-pols { --accent-1: #2563eb; --accent-2: #0ea5e9; }
.hook-timeline { --accent-1: #15803d; --accent-2: #84cc16; }
.hook-balance { --accent-1: #111; --accent-2: #6b7280; }
[data-theme="dark"] .hook-balance { --accent-1: #fff; --accent-2: #9ca3af; }
.hook-icon {
width: 44px; height: 44px;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
color: var(--accent-1);
background: color-mix(in srgb, var(--accent-1) 10%, transparent);
border-radius: 12px;
}
.hook-icon svg { width: 24px; height: 24px; display: block; }
.hook-num {
font-size: 42px;
font-weight: 900;
letter-spacing: -1px;
color: var(--text);
line-height: 1;
margin-bottom: 10px;
white-space: nowrap;
font-feature-settings: "tnum";
}
.hook-timeline .hook-num { font-size: 30px; letter-spacing: -0.5px; }
.hook-balance .hook-num { font-size: 32px; }
.hook-label {
font-size: 11px;
font-weight: 700;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 1.4px;
line-height: 1.4;
}
.hook-sub {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
font-size: 11.5px;
color: var(--text-2);
line-height: 1.5;
}
.hook-sub b { color: var(--text); font-weight: 800; }
/* Label alterno desktop/móvil para el bloque timeline */
.lbl-short { display: none; }
@media (max-width: 720px) {
.lbl-long { display: none; }
.lbl-short { display: inline; white-space: nowrap; }
}
.hook-zero { color: #6b7280; }
.hook-sep { color: var(--text-3); margin: 0 6px; }
.hook-cien { color: #111; }
.balance-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 14px;
}
.balance-col { text-align: center; }
.balance-col .hook-num { margin-bottom: 6px; }
.balance-col .hook-label { font-size: 11px; letter-spacing: 1.4px; }
.balance-sep {
font-size: 28px;
font-weight: 800;
color: var(--text-3);
align-self: start;
padding-top: 2px;
}
[data-theme="dark"] .hook-cien { color: #fff; }
[data-theme="dark"] .hook::before { background: linear-gradient(90deg, #fff, #888); }
@media (max-width: 720px) {
.hero-hooks {
grid-template-columns: 1fr;
gap: 8px;
max-width: 480px;
margin-top: 16px;
}
/* Layout: icono | (núm + label en línea, eje centrado) / sub debajo */
.hook {
padding: 11px 14px;
text-align: left;
display: grid;
grid-template-columns: 40px auto 1fr;
column-gap: 12px;
row-gap: 4px;
align-items: center;
}
.hook::after { display: none; }
.hook-icon {
width: 40px; height: 40px;
margin: 0;
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
.hook-icon svg { width: 20px; height: 20px; }
.hook-num {
grid-column: 2; grid-row: 1;
font-size: 24px;
margin-bottom: 0;
line-height: 1;
align-self: center;
}
.hook-timeline .hook-num { font-size: 18px; letter-spacing: -.2px; }
.hook-balance .hook-num { font-size: 22px; }
.hook-label {
grid-column: 3; grid-row: 1;
font-size: 10.5px;
letter-spacing: 0.7px;
line-height: 1.3;
align-self: center;
text-align: left;
margin-top: 0;
}
.hook-sub {
grid-column: 2 / span 2; grid-row: 2;
margin-top: 4px;
padding-top: 5px;
font-size: 11px;
line-height: 1.45;
}
/* Balance hook: UNA sola fila «0% IDEOLOGÍA · 100% DATOS» alineada a la izquierda */
.hook-balance .balance-row {
grid-column: 2 / span 2; grid-row: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
width: 100%;
gap: 10px;
}
.hook-balance .balance-sep {
display: inline-block;
font-size: 16px;
font-weight: 800;
color: var(--text-3);
flex-shrink: 0;
padding: 0;
line-height: 1;
}
.hook-balance .balance-col {
display: flex;
align-items: baseline;
gap: 6px;
flex-shrink: 0;
text-align: left;
width: auto;
}
.hook-balance .balance-col .hook-num {
font-size: 20px !important;
margin-bottom: 0;
line-height: 1;
}
.hook-balance .balance-col .hook-label {
font-size: 9.5px;
letter-spacing: 0.6px;
margin-top: 0;
text-align: left;
}
.hook-balance .hook-sub {
grid-column: 2 / span 2; grid-row: 2;
}
}
.kpi-eyebrow {
text-align: center;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 2px; color: var(--text-2);
margin-bottom: 12px;
}
/* Home blocks — separación clara entre secciones */
.home-block {
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid var(--border);
}
.home-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }
@media (max-width: 720px) {
.hero { padding-bottom: 14px; }
.home-block { margin-top: 12px; padding-top: 12px; }
.home-block:first-of-type { margin-top: 14px; padding-top: 12px; }
}
/* Tops side-by-side */
.home-tops-4col {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 720px) {
.home-tops-4col {
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: #ffffff;
}
}
.home-tops-4col > .home-tops-col {
padding: 16px;
}
@media (min-width: 720px) {
.home-tops-4col > .home-tops-col + .home-tops-col {
border-left: 1px solid var(--border);
}
.home-tops-4col > .home-tops-col:nth-child(even) {
background: #f1f3f6;
}
}
[data-theme="dark"] .home-tops-4col {
background: #15171c;
}
/* Selector móvil para elegir uno de los 4 rankings */
.tops-mobile-select { display: none; }
@media (max-width: 719px) {
.tops-mobile-select {
display: block;
width: 100%;
padding: 14px 44px 14px 16px;
border-radius: 10px;
border: 2px solid var(--text);
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-3) 100%);
color: var(--text);
font-size: 15px;
font-weight: 800;
letter-spacing: -.01em;
font-family: inherit;
cursor: pointer;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Caret arriba (primero en la lista) + gradiente como fondo (segundo) */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),
linear-gradient(135deg, var(--surface) 0%, var(--surface-3) 100%);
background-repeat: no-repeat, no-repeat;
background-position: right 16px center, 0 0;
background-size: 14px 14px, 100% 100%;
transition: transform .15s ease, box-shadow .15s ease;
}
.tops-mobile-select:active {
transform: translateY(1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
[data-theme="dark"] .tops-mobile-select {
border-color: var(--text);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),
linear-gradient(135deg, #1a1c22 0%, #22252d 100%);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* En móvil ocultar todas las columnas y mostrar solo la del data-show */
.home-tops-4col > .home-tops-col { display: none; }
.home-tops-4col[data-show="peores-act"] > .home-tops-col[data-tops-id="peores-act"],
.home-tops-4col[data-show="mejores-act"] > .home-tops-col[data-tops-id="mejores-act"],
.home-tops-4col[data-show="peores-hist"] > .home-tops-col[data-tops-id="peores-hist"],
.home-tops-4col[data-show="mejores-hist"] > .home-tops-col[data-tops-id="mejores-hist"] {
display: block;
}
}
[data-theme="dark"] .home-tops-4col > .home-tops-col:nth-child(even) {
background: #20232b;
}
.tops-col-head {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 2px solid var(--border);
}
.tops-col-title {
display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
font-size: 15px; font-weight: 800;
letter-spacing: -.01em;
color: var(--text);
}
.tops-col-title .tops-status-tag {
font-size: 10px;
padding: 3px 9px;
letter-spacing: 0.6px;
border-radius: 5px;
}
.pol-grid-compact {
display: flex !important;
flex-direction: column;
gap: 8px;
}
/* Ficha reducida: misma estructura completa, dimensiones tipográficas comprimidas */
.pol-card-compact {
padding: 10px 10px !important;
border-radius: 8px;
}
.pol-card-static { cursor: default !important; }
.pol-card-static:hover {
transform: none !important;
box-shadow: none !important;
border-color: var(--border) !important;
}
.pol-card-compact .pol-head {
gap: 8px;
margin-bottom: 6px;
}
.pol-card-compact .pol-rank {
font-size: 11px;
min-width: 16px;
}
.pol-card-compact .pol-avatar svg,
.pol-card-compact .pol-avatar img {
width: 40px !important; height: 40px !important;
border-radius: 6px;
}
.pol-card-compact .pol-info { min-width: 0; }
.pol-card-compact .pol-name {
font-size: 12.5px; font-weight: 800;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.2;
}
.pol-card-compact .pol-role {
font-size: 10.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.2;
}
.pol-card-compact .pol-tags-row {
gap: 4px;
margin-top: 3px;
}
.pol-card-compact .pol-party,
.pol-card-compact .pol-status {
font-size: 8.5px;
padding: 1px 5px;
}
.pol-card-compact .pol-party svg {
width: 11px !important; height: 11px !important;
}
.pol-card-compact .pol-score {
font-size: 15px !important;
padding: 4px 8px !important;
min-width: 38px;
border-radius: 6px;
}
.pol-card-compact .pol-chips {
gap: 3px;
margin-bottom: 6px;
}
.pol-card-compact .pol-chips .chip {
padding: 3px 4px;
border-bottom-width: 2px;
}
.pol-card-compact .chip-label { font-size: 8px; letter-spacing: 0.3px; }
.pol-card-compact .chip-value { font-size: 11px; }
.pol-card-compact .pol-meta {
font-size: 10px;
line-height: 1.35;
word-spacing: -1px;
}
.pol-card-compact .pol-actions {
margin-top: 6px;
}
.pol-card-compact .add-btn {
font-size: 10px;
padding: 4px 8px;
}
.home-tops {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (min-width: 900px) {
.home-tops { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.home-tops-col { min-width: 0; }
.home-tops .section-head h2 { font-size: 18px; }
/* Force single column inside each tops column to stack 3 cards vertically */
.home-tops .pol-grid-stacked,
.pol-grid-stacked {
display: flex !important;
flex-direction: column;
gap: 8px;
}
/* === KPI cards === */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
max-width: 980px;
margin: 0 auto 28px;
}
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-left-width: 4px;
border-radius: var(--radius);
padding: 16px 18px;
text-align: left;
box-shadow: var(--shadow);
}
.kpi-value {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 28px; font-weight: 900; line-height: 1;
margin-bottom: 6px;
}
.kpi-value .unit { font-size: 13px; color: var(--text-2); margin-left: 4px; }
.kpi-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--text-2); line-height: 1.4;
}
.kpi-sub { font-size: 11px; color: var(--text-2); margin-top: 4px; }
/* === Stats block (rediseñado) === */
.stats-block { margin-top: 28px; margin-bottom: 28px; }
.stats-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.stats-eyebrow {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 3px; color: var(--text-2);
margin-bottom: 8px;
}
.stats-head h2 {
font-size: clamp(22px, 3vw, 30px); font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 8px;
}
.stats-headcount {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: #dc2626;
}
.stats-lead {
font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.stats-subhead {
text-align: center;
font-size: clamp(16px, 2.2vw, 20px);
font-weight: 800;
letter-spacing: -.01em;
margin: 22px auto 14px;
max-width: 1200px;
}
.stats-featured {
display: flex; align-items: center; gap: 22px;
background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
border: 1px solid #fecaca;
border-left: 5px solid #dc2626;
border-radius: 14px;
padding: 22px 26px;
margin: 0 auto 22px;
max-width: 1200px;
}
.stats-featured-num .big {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: clamp(48px, 8vw, 72px);
font-weight: 900;
color: #dc2626;
line-height: 1;
letter-spacing: -.04em;
}
.stats-featured-body { flex: 1; min-width: 0; }
.stats-featured-line1 {
font-size: clamp(15px, 2vw, 18px);
font-weight: 700;
color: var(--text);
line-height: 1.35;
margin-bottom: 4px;
}
.stats-featured-line1 b { color: inherit; font-weight: 800; }
.stats-featured-line1 .line1-pre { color: var(--text); }
.stats-featured-line1 .line1-acc { color: #dc2626; white-space: nowrap; }
.stats-featured-line2 {
font-size: 12.5px;
color: var(--text-2);
line-height: 1.5;
}
.stats-featured-line2 b { color: var(--text); font-weight: 800; }
[data-theme="dark"] .stats-featured {
background: linear-gradient(135deg, rgba(220,38,38,.08) 0%, var(--surface) 100%);
border-color: rgba(220,38,38,.35);
}
.stats-block .stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 720px) {
.stats-block .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 18px 16px;
position: relative;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card::before {
content: '';
position: absolute; inset: 0 0 auto 0;
height: 3px;
background: var(--c);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}
.stat-icon {
font-size: 22px;
margin-bottom: 10px;
line-height: 1;
}
.stat-value {
display: flex; align-items: baseline; gap: 4px;
margin-bottom: 10px;
}
.stat-value .num {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 38px; font-weight: 900;
letter-spacing: -.025em;
line-height: 1;
}
.stat-value .unit {
font-size: 14px; font-weight: 700;
color: var(--text-2);
}
.stat-gauge {
width: 100%; height: 6px;
background: var(--surface-2);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.stat-gauge-fill {
height: 100%;
border-radius: 3px;
transition: width .4s ease;
}
.stat-name {
font-size: 12px; font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text);
margin-bottom: 4px;
}
.stat-hint {
font-size: 11px;
color: var(--text-2);
line-height: 1.45;
}
@media (max-width: 720px) {
/* En móvil: icono a la izquierda, valor + gauge + nombre + hint a la derecha */
.stats-block .stats-grid { grid-template-columns: 1fr !important; gap: 8px; }
.stat-card {
padding: 12px 14px;
display: grid;
grid-template-columns: 48px 1fr;
column-gap: 14px;
align-items: center;
}
.stat-card::before {
inset: 0 auto 0 0;
width: 3px;
height: auto;
}
.stat-icon {
grid-column: 1;
grid-row: 1 / span 4;
margin: 0;
align-self: center;
font-size: 26px;
text-align: center;
}
.stat-value { grid-column: 2; grid-row: 1; margin-bottom: 5px; }
.stat-value .num { font-size: 28px; }
.stat-value .unit { font-size: 12px; }
.stat-gauge { grid-column: 2; grid-row: 2; margin-bottom: 6px; }
.stat-name { grid-column: 2; grid-row: 3; font-size: 11px; margin-bottom: 2px; }
.stat-hint { grid-column: 2; grid-row: 4; font-size: 10.5px; }
}
@media (max-width: 540px) {
.stats-featured { flex-direction: column; text-align: center; padding: 18px; }
}
/* === Quick links (home) === */
.quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-top: 24px;
}
@media (min-width: 1100px) {
.quick-links {
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.quick-link { padding: 14px 14px; }
.quick-link h3 { font-size: 14px; }
.quick-link p { font-size: 11px; }
}
.quick-link {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.quick-link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--border-strong);
}
.quick-link h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.quick-link p { font-size: 12px; color: var(--text-2); line-height: 1.5; }
/* === Section heads === */
.section-head { margin-bottom: 16px; }
.section-head h2 {
font-size: clamp(20px, 3vw, 26px); font-weight: 800;
letter-spacing: -.01em; margin-bottom: 4px;
}
.section-head p { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 800px; }
.section-head-center { text-align: center; }
.section-head-center p { margin-left: auto; margin-right: auto; }
/* Descripción de la variable de rendimiento seleccionada (Gobiernos) */
.perf-info {
background: var(--surface-3);
border-left: 3px solid var(--text-3);
border-radius: 8px;
padding: 12px 16px;
margin: 8px 0 14px;
}
.perf-info-title {
font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--text);
margin-bottom: 4px;
}
.perf-info p {
font-size: 12.5px; line-height: 1.55;
color: var(--text-2);
margin: 0;
}
/* === Políticos: intro + tira de dimensiones === */
.pol-intro {
margin-bottom: 22px;
}
.pol-intro-head { margin-bottom: 18px; }
.pol-intro-head h2 {
font-size: clamp(22px, 3vw, 28px); font-weight: 800;
letter-spacing: -.015em; margin-bottom: 6px;
}
.pol-intro-lead {
font-size: 14px; color: var(--text-2); line-height: 1.6;
max-width: 860px;
}
.pol-intro-dims {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 14px;
}
@media (min-width: 980px) {
.pol-intro-dims {
grid-template-columns: repeat(4, 1fr);
}
}
.pol-dim-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 14px 12px 14px;
border-left: 3px solid var(--dim-color);
transition: transform .15s ease, box-shadow .15s ease;
}
.pol-dim-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.pol-dim-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.pol-dim-num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: var(--dim-color);
color: #fff;
border-radius: 50%;
font-size: 11px; font-weight: 800;
flex-shrink: 0;
}
.pol-dim-num-info {
background: transparent;
color: var(--dim-color);
border: 1.5px solid var(--dim-color);
font-style: italic;
}
.pol-dim-num-money {
font-size: 13px;
font-weight: 900;
font-style: normal;
}
.pol-dim-name {
font-size: 13px; font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
flex: 1; min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pol-dim-w {
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px;
color: var(--text-2);
background: var(--surface-2);
padding: 2px 6px; border-radius: 3px;
flex-shrink: 0;
}
.pol-dim-card p {
font-size: 11.5px; line-height: 1.5;
color: var(--text-2);
margin: 0;
}
.pol-dim-card-info { opacity: 0.85; }
.pol-dim-card-info::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-2) 6px, var(--surface-2) 7px);
opacity: 0.18; border-radius: 10px;
pointer-events: none;
}
.pol-intro-count {
font-size: 13px; color: var(--text-2);
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.pol-dims-footer {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border);
}
.pol-dims-footer .section-head { text-align: center; }
.pol-intro-count b { color: var(--text); font-weight: 800; }
@media (max-width: 720px) {
.pol-intro-dims { grid-template-columns: 1fr; gap: 10px; }
.pol-dim-card { padding: 12px 14px; }
.pol-dim-card p { font-size: 12px; }
}
/* === Toolbar === */
.toolbar {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
margin-bottom: 16px;
}
.toolbar input[type=search],
.toolbar input[type=text] {
flex: 1 1 220px; min-width: 0;
padding: 9px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
outline: none;
transition: border-color var(--transition);
}
.toolbar input:focus { border-color: var(--accent); }
.toolbar select {
padding: 9px 28px 9px 12px;
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 10px center;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.btn {
padding: 8px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px; font-weight: 600;
color: var(--text-2);
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--surface-3); color: var(--text); }
.btn.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.btn-primary:hover { opacity: .9; }
.btn-sm { padding: 6px 10px; font-size: 11px; }
.btn-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
/* Filtros móvil vs desktop */
.mobile-only-select { display: none; }
@media (max-width: 720px) {
.mobile-only-select { display: block; flex: 1 1 100px; min-width: 100px; }
.desktop-only-group { display: none !important; }
.toolbar #party-filter { flex: 1 1 100px; }
}
.filter-select {
padding: 8px 28px 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
[data-theme="dark"] .filter-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b0b3bb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* === Politico card === */
.pol-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
@media (min-width: 700px) { .pol-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (min-width: 1100px) { .pol-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } }
.pol-grid > .pol-expanded { grid-column: 1 / -1; }
.pol-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
@media (max-width: 540px) {
.pol-card { padding: 10px 12px; }
.pol-card .pol-head { gap: 8px; }
.pol-card .pol-name { font-size: 13px; }
.pol-card .pol-role { font-size: 11px; }
.pol-card .pol-chips { gap: 2px; }
.pol-card .pol-chips .chip { padding: 3px 1px; }
.pol-card .chip-label { font-size: 8.5px; letter-spacing: 0.1px; }
.pol-card .chip-value { font-size: 11px; }
.pol-card .pol-meta { font-size: 10.5px; }
.pol-card .pol-tags-row { gap: 4px; }
.pol-card .pol-party, .pol-card .pol-status { font-size: 8.5px; padding: 1px 5px; }
}
.pol-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.pol-card.is-selected { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.pol-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pol-rank {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 30px;
height: 30px;
padding: 0 8px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-fg);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1;
}
.pol-card.is-selected .pol-rank,
.pol-card:hover .pol-rank { background: #475569; color: #fff; }
/* Smaller variant for stats lists */
.stat-row .pol-rank {
min-width: 22px; height: 22px; font-size: 11px; padding: 0 6px;
}
.pol-avatar { flex-shrink: 0; }
.pol-info { flex: 1; min-width: 0; }
.pol-name { font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pol-role { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.3; }
.pol-party {
display: inline-flex; align-items: center; gap: 4px;
font-size: 9px; font-weight: 700;
padding: 2px 7px; border-radius: 4px;
}
.pol-tags-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-top: 4px;
}
.pol-status {
display: inline-flex; align-items: center;
font-size: 9px; font-weight: 800;
padding: 2px 7px; border-radius: 4px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.pol-status-act { color: #166534; background: #16a34a18; border: 1px solid #16a34a40; }
.pol-status-hist { color: #6b21a8; background: #9333ea14; border: 1px solid #9333ea3a; }
.pol-tag-status-act { color: #166534; }
.pol-tag-status-hist { color: #6b21a8; }
[data-theme="dark"] .pol-status-act { color: #4ade80; background: #16a34a24; border-color: #16a34a55; }
[data-theme="dark"] .pol-status-hist { color: #c084fc; background: #9333ea24; border-color: #9333ea55; }
[data-theme="dark"] .pol-tag-status-act { color: #4ade80; }
[data-theme="dark"] .pol-tag-status-hist { color: #c084fc; }
.pol-score {
flex-shrink: 0;
text-align: center;
padding: 5px 10px;
border-radius: 8px;
font-family: ui-monospace, monospace;
font-size: 18px; font-weight: 900;
line-height: 1;
}
.pol-chips { display: flex; gap: 3px; margin-bottom: 6px; }
.chip {
flex: 1; min-width: 0;
background: var(--surface-3);
padding: 4px 2px;
border-radius: 4px;
text-align: center;
border-bottom: 2px solid;
}
.chip-label { font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--text-2); line-height: 1; margin-bottom: 2px; }
.chip-value { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800; line-height: 1; }
.pol-meta {
font-size: 11px; color: var(--text-2); line-height: 1.4;
}
.pol-actions {
margin-top: auto;
padding-top: 10px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 6px;
}
.diff-up { color: var(--c-bad); font-weight: 700; }
.diff-down { color: var(--c-good); font-weight: 700; }
/* === Politician detail (expanded) === */
.detail {
background: var(--surface);
border: 1.5px solid var(--accent);
border-radius: var(--radius-lg);
padding: 18px;
margin-top: 4px;
}
.detail-head {
display: flex; align-items: center; gap: 14px;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.detail-name { font-size: 18px; font-weight: 800; }
.detail-role { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.detail-score { margin-left: auto; text-align: center; }
.detail-score .num { font-family: ui-monospace, monospace; font-size: 32px; font-weight: 900; line-height: 1; }
.detail-score .pct { font-size: 10px; color: var(--text-2); margin-top: 4px; }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tag {
padding: 4px 10px;
background: var(--surface-3);
border-radius: 6px;
font-size: 10px;
color: var(--text-2);
}
.tag b { color: var(--text); margin-right: 4px; }
/* Currículum enriquecido (politicos_extended.json) */
.cv-extended {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 12px;
}
.cv-head {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-2);
margin: 0 0 10px;
}
.cv-list {
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px 16px;
}
@media (min-width: 700px) {
.cv-list { grid-template-columns: 130px 1fr; }
.cv-row { display: contents; }
}
.cv-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.cv-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-3);
margin: 0;
}
.cv-value {
font-size: 12px;
color: var(--text);
line-height: 1.55;
margin: 0;
}
.cv-source {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--border);
font-size: 11px;
}
.cv-source a { color: var(--c-info); font-weight: 600; }
.dim {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-bottom: 8px;
}
.dim-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dim-title { font-size: 12px; font-weight: 700; }
.dim-value { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 800; }
.dim-bar { height: 6px; background: var(--surface-3); border-radius: 3px; margin-bottom: 8px; overflow: hidden; }
.dim-bar > div { height: 100%; border-radius: 3px; transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.dim-desc { font-size: 11px; color: var(--text-2); line-height: 1.55; }
.dim-info { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface-3) 8px 16px); }
.dim-info-tag { font-size: 9px; font-weight: 700; color: var(--text-3); margin-left: 6px; padding: 2px 6px; border: 1px dashed var(--border-strong); border-radius: 4px; }
.dim-weight { font-size: 9px; font-weight: 600; color: var(--text-3); margin-left: 6px; padding: 2px 6px; background: var(--surface-3); border-radius: 4px; }
/* Formula block — auditable score breakdown */
.formula-block {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--c-info);
}
.formula-eq {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
background: var(--bg);
padding: 10px 12px;
border-radius: 6px;
border: 1px solid var(--border);
white-space: pre-wrap;
word-break: break-word;
margin: 8px 0;
}
.formula-eq b { color: var(--c-info); font-weight: 800; }
.formula-block code { font-family: ui-monospace, monospace; background: var(--surface-3); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
/* Inline party logo wrapper */
.logo-wrap { line-height: 0; }
/* === Sticky toolbar === */
.toolbar.sticky {
position: sticky; top: 60px; z-index: 30;
background: var(--bg);
padding: 12px 0;
margin: -12px 0 12px;
}
/* === Show more === */
.show-more { text-align: center; margin: 16px 0; }
/* === Charts === */
.chart-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
margin-bottom: 16px;
}
.chart-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.chart-card svg { width: 100%; display: block; }
.chart-svg { font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
/* Wrapper para scroll horizontal del chart de gobiernos en móvil */
.chart-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.chart-scroll::-webkit-scrollbar { height: 6px; }
.chart-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.chart-scroll-hint {
display: none;
font-size: 10.5px;
color: var(--text-3);
text-align: center;
margin-top: 6px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
}
@keyframes scrollHintBlink {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (max-width: 900px) {
.chart-scroll .chart-svg-gov { min-width: 880px; }
.chart-scroll-hint {
display: block;
animation: scrollHintBlink 1.5s ease-in-out infinite;
color: var(--text-2);
}
}
@media (prefers-reduced-motion: reduce) {
.chart-scroll-hint { animation: none !important; opacity: 1; }
}
/* Leyenda HTML encima del SVG */
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
font-size: 12px;
margin-bottom: 8px;
color: var(--text-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.legend-item-secondary { color: var(--text-3); font-weight: 500; }
.legend-swatch {
display: inline-block;
width: 22px; height: 3px;
border-radius: 1px;
flex-shrink: 0;
}
.legend-swatch-dashed {
background: transparent !important;
border-top: 2.5px dashed #64748b;
height: 0;
}
/* Fuentes y notas debajo del SVG */
.chart-source {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-size: 11px;
color: var(--text-3);
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
.chart-source b { color: var(--text-2); font-weight: 700; }
.chart-notes {
font-size: 12px;
color: var(--text-2);
margin-top: 6px;
line-height: 1.5;
font-style: italic;
}
/* Grid de Referencias — 1 columna en móvil, 2 en escritorio (charts más grandes) */
.refs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 1100px) {
.refs-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
/* Secciones temáticas dentro de Referencias */
.refs-section {
margin-bottom: 36px;
padding-top: 8px;
}
.refs-section + .refs-section {
border-top: 1px solid var(--border);
padding-top: 28px;
}
.refs-section-head {
margin-bottom: 16px;
}
.refs-section-head h3 {
font-size: 20px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--text);
margin-bottom: 4px;
}
.refs-section-head p {
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
max-width: 720px;
}
/* Subtítulo de gráfica (escala, dirección de mejora, etc.) */
.chart-subtitle {
font-size: 11px;
color: var(--text-2);
font-weight: 600;
margin: -4px 0 8px;
letter-spacing: .01em;
}
/* Nota debajo del nombre de un cargo en la tabla de retribuciones */
.cargo-nota {
font-size: 10px;
color: var(--text-3);
font-weight: 400;
font-style: italic;
margin-top: 2px;
line-height: 1.4;
max-width: 320px;
}
/* === Compare view === */
.cmp-toolbar {
align-items: center;
position: relative;
z-index: 10;
}
.cmp-search-wrap {
flex: 1 1 280px;
min-width: 0;
position: relative;
}
.cmp-search-wrap input[type="search"] {
width: 100%;
padding: 9px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
outline: none;
transition: border-color var(--transition);
}
.cmp-search-wrap input[type="search"]:focus { border-color: var(--accent); }
.cmp-dropdown {
position: absolute;
top: calc(100% + 4px); left: 0; right: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
max-height: 360px;
overflow: auto;
z-index: 20;
}
.cmp-dropdown[hidden] { display: none; }
.cmp-result {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background var(--transition);
}
.cmp-result:hover { background: var(--surface-3); }
.cmp-result:last-child { border-bottom: 0; }
.cmp-result-info { flex: 1; min-width: 0; }
.cmp-result-name { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-result-role { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-result-score {
font-family: ui-monospace, monospace;
font-size: 14px; font-weight: 800;
flex-shrink: 0;
}
.cmp-empty {
padding: 14px 16px;
font-size: 12px; color: var(--text-3);
text-align: center;
}
.cmp-counter {
font-size: 12px; font-weight: 600;
color: var(--text-2);
white-space: nowrap;
}
.compare-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 768px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .compare-grid { grid-template-columns: 1fr 1fr 1fr; } }
.compare-slot {
background: var(--surface);
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
padding: 18px;
min-height: 220px;
display: flex; flex-direction: column;
}
.compare-slot.is-filled { border-style: solid; border-color: var(--border); }
.compare-empty {
flex: 1; display: flex; align-items: center; justify-content: center;
color: var(--text-3); font-size: 13px; text-align: center;
}
.compare-empty button { margin-top: 8px; }
.compare-clear { margin-top: 10px; }
.compare-radar { margin: 8px 0; }
/* === Dashboard / Stats === */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.stat-tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
}
.stat-tile h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.stat-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.stat-row + .stat-row { border-top: 1px solid var(--border); }
.stat-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row .val { font-family: ui-monospace, monospace; font-weight: 800; }
.bar-list { display: flex; flex-direction: column; gap: 8px; }
.bar-row { font-size: 12px; }
.bar-row-head { display: flex; justify-content: space-between; margin-bottom: 3px; }
.bar-row-head .name { font-weight: 600; }
.bar-row-head .val { font-family: ui-monospace, monospace; font-weight: 800; }
.bar-track { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.bar-track > div { height: 100%; border-radius: 4px; transition: width 600ms cubic-bezier(.2,.8,.2,1); }
/* === Method tables === */
.method-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
margin-bottom: 12px;
overflow: hidden;
min-width: 0;
box-sizing: border-box;
}
.method-block h3 { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.method-block p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 8px; word-wrap: break-word; overflow-wrap: break-word; }
.method-block table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin: 8px 0;
table-layout: auto;
}
.method-block .method-table-wrap {
margin: 8px -18px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.method-block .method-table-wrap > table { margin: 0; min-width: 560px; }
.method-block .method-table-wrap::-webkit-scrollbar { height: 6px; }
.method-block .method-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.method-block th, .method-block td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); word-wrap: break-word; overflow-wrap: break-word; }
.method-block th { font-weight: 700; color: var(--text-2); background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.method-block tr:nth-child(even) td { background: var(--surface-2); }
.method-block code { word-break: break-word; }
.method-block pre { overflow-x: auto; }
/* Mobile: padding reducido + tabla con scroll horizontal */
@media (max-width: 720px) {
.method-block { padding: 14px 14px; }
.method-block h3 { font-size: 13px; }
.method-block p { font-size: 12.5px; line-height: 1.55; }
.method-block table { font-size: 11.5px; }
.method-block th, .method-block td { padding: 6px 8px; }
/* Tablas grandes (IBEX 5 cols, salario 2 cols) → scroll horizontal */
.method-block table:not(.method-table-narrow) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.method-block table:not(.method-table-narrow) td,
.method-block table:not(.method-table-narrow) th {
white-space: normal;
min-width: 120px;
}
.method-block .method-table thead th:first-child,
.method-block .method-table tbody td:first-child { min-width: 90px; }
.method-toc { padding: 12px 14px; }
.method-toc ol { font-size: 12.5px; }
.refs-section { padding: 0; }
.refs-section-head h3 { font-size: 15px; }
.refs-section-head p { font-size: 12.5px; }
.stat-tile, .stat-card { min-width: 0; box-sizing: border-box; }
}
/* TOC superior de la metodología */
.method-toc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 24px;
}
.method-toc-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.2px; color: var(--text-3);
margin-bottom: 8px;
}
.method-toc ol {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 6px 18px;
counter-reset: toc;
}
@media (min-width: 700px) {
.method-toc ol { grid-template-columns: 1fr 1fr; }
}
.method-toc li {
counter-increment: toc;
font-size: 13px;
display: flex; align-items: baseline;
}
.method-toc li::before {
content: counter(toc) ".";
color: var(--text-3);
font-family: ui-monospace, monospace;
font-weight: 700;
margin-right: 8px;
min-width: 20px;
}
.method-toc a {
color: var(--text);
font-weight: 600;
border-bottom: 1px solid transparent;
transition: border-color var(--transition);
}
.method-toc a:hover { border-bottom-color: var(--accent); }
/* Grupo temático con encabezado */
.method-group {
margin-bottom: 36px;
scroll-margin-top: 80px;
}
.method-group-head {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border);
}
.method-group-num {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-fg);
display: inline-flex;
align-items: center; justify-content: center;
font-family: ui-monospace, monospace;
font-size: 16px; font-weight: 800;
}
.method-group-num-info {
background: var(--surface-3);
color: var(--text-2);
font-style: italic;
font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
.method-group-head h2 {
font-size: 22px;
font-weight: 800;
letter-spacing: -.01em;
margin: 0 0 4px;
line-height: 1.2;
}
.method-group-head p {
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
margin: 0;
max-width: 760px;
}
/* Bloques de dimensión con número y peso */
.method-dim { padding: 18px 20px; }
.method-dim-head {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.dim-num {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 8px;
color: #fff;
display: inline-flex;
align-items: center; justify-content: center;
font-family: ui-monospace, monospace;
font-size: 15px; font-weight: 800;
}
.dim-title-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.dim-title {
font-size: 16px !important;
font-weight: 800 !important;
margin: 0 !important;
letter-spacing: -.01em;
}
.dim-weight-badge {
font-size: 11px;
font-weight: 800;
padding: 3px 9px;
border: 1.5px solid;
border-radius: 999px;
font-family: ui-monospace, monospace;
letter-spacing: .02em;
}
/* Subtítulos H4 dentro del bloque de método */
.method-subhead {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--text-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
margin: 16px 0 8px !important;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
/* Recuadro destacado dentro de un dim (callout azul para "Importante") */
.method-callout {
background: var(--surface-2);
border-left: 3px solid var(--c-info);
border-radius: 6px;
padding: 10px 14px;
font-size: 12px;
line-height: 1.55;
color: var(--text-2);
margin: 10px 0;
}
.method-callout b { color: var(--text); }
.method-callout-accent {
background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(101,163,13,0.05));
border-left-color: var(--c-good);
border-left-width: 4px;
color: var(--text);
}
/* Listado limpio de notas */
.method-list {
margin: 0;
padding-left: 22px;
list-style: disc;
}
.method-list li {
font-size: 13px;
line-height: 1.7;
color: var(--text-2);
margin-bottom: 4px;
}
/* Bloque informativo (no computa): borde discontinuo */
.method-block-info {
border-style: dashed;
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%);
}
/* Grid de pesos en el score global */
.weight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin: 12px 0 10px;
}
.weight-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 10px;
text-align: center;
}
.weight-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-2);
margin-bottom: 4px;
}
.weight-value {
font-family: ui-monospace, monospace;
font-size: 22px;
font-weight: 800;
line-height: 1;
}
/* === Helpers === */
.muted { color: var(--text-3); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.hidden { display: none !important; }
.add-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 4px;
/* Gris de relleno con contraste suficiente sobre el surface del card.
Light: #d1d1d6 sobre #fafafb (visible pero terciario).
Dark: #3a3d46 sobre #15171c (idem).
El texto usa --text para mantener legibilidad AAA. */
background: var(--border-strong); color: var(--text);
border: none;
font-size: 11px; font-weight: 600;
flex-shrink: 0;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.add-btn:hover {
background: var(--text-3);
color: var(--bg);
}
/* Score color classes */
.s-good { color: var(--c-good); }
.s-ok { color: var(--c-ok); }
.s-mid { color: var(--c-mid); }
.s-low { color: var(--c-low); }
.s-bad { color: var(--c-bad); }
/* ===== Compartir ===== */
/* Bloque integrado en el flujo de la página: sin fondo de tarjeta, sin
borde-redondeado, sin "eyebrow" mayúsculo. Solo un divider sutil
encima que separa visualmente del contenido y un row centrado de
botones-ghost. En móvil con Web Share API: un único botón a anchura
completa. En escritorio (o sin API): 4 botones-canal alineados. */
.share-widget {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 640px;
margin: 56px auto 12px;
padding-top: 28px;
border-top: 1px solid var(--border);
}
.share-widget-sm {
/* Variante para dentro de la ficha de político (.detail) */
max-width: none;
margin: 24px 0 0;
padding-top: 18px;
justify-content: flex-start;
}
.share-widget-label {
font-size: 13px;
font-weight: 500;
color: var(--text-2);
letter-spacing: 0;
text-transform: none;
margin-right: 4px;
}
.share-fallbacks {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 999px;
background: transparent;
color: var(--text);
border: 1px solid var(--border);
font-size: 13px;
font-weight: 500;
font-family: inherit;
line-height: 1;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.share-btn:hover {
background: var(--surface-2);
border-color: var(--border-strong);
}
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.share-btn-primary {
/* Botón nativo de compartir al final de la página: relleno accent para
destacar como CTA principal. Light: negro #1a1a1a + texto blanco.
Dark: blanco + texto negro. Las dos combinaciones AAA. */
background: var(--accent);
color: var(--accent-fg);
border-color: var(--accent);
}
.share-btn-primary:hover {
background: var(--accent);
color: var(--accent-fg);
border-color: var(--accent);
filter: brightness(1.12);
}
.share-btn-ok {
background: var(--c-good) !important;
color: #fff !important;
border-color: var(--c-good) !important;
}
/* Default: nativo oculto, fallbacks visibles. JS añade has-share-api
al body si navigator.share existe y CSS conmuta visibilidad. */
.share-native { display: none; }
body.has-share-api .share-native { display: inline-flex; }
body.has-share-api .share-fallbacks { display: none; }
/* Con Web Share API el botón nativo ya dice "Compartir" — la etiqueta
antecedente es redundante. Solo se muestra en escritorio sin API,
donde sirve de contexto para el row de 4 canales. */
body.has-share-api .share-widget-label { display: none; }
@media (max-width: 640px) {
.share-widget {
max-width: 100%;
margin: 40px 0 8px;
padding-top: 24px;
gap: 8px;
}
.share-widget-label { display: none; }
.share-fallbacks { width: 100%; justify-content: center; }
.share-btn { padding: 10px 14px; font-size: 14px; }
/* Móvil con Web Share: botón único centrado, no full-width
para no parecer un CTA exagerado */
body.has-share-api .share-native { width: auto; }
body.has-share-api .share-native .share-btn {
padding: 11px 22px;
font-size: 15px;
}
}
/* Print */
@media print {
.site-header, .site-footer, .toolbar, .share-widget { display: none !important; }
.pol-card { break-inside: avoid; border: 1px solid #ccc; }
body { background: #fff; }
}