/* Estilos propios de la cartera de inversión. La base común está en assets/kalculia-ui.css. */
:root {
  --danger: #c42531; --danger-soft: #fde4e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --danger: #ff6b72; --danger-soft: #3b1d20; }
}
:root[data-theme="dark"] { --danger: #ff6b72; --danger-soft: #3b1d20; }

/* Red de seguridad: cualquier elemento con [hidden] debe desaparecer siempre,
   aunque su propia clase fije un `display` explícito (ej. flex/grid) que si no
   empataría en especificidad con la regla [hidden] del navegador y podría ganar. */
[hidden] { display: none !important; }
img, svg, video, canvas { display: block; max-width: 100%; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stepper { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--surface); border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--text-muted); }
.stepper button { padding: .35rem .8rem; border-radius: 999px; }
.stepper button.is-active { background: var(--text); color: var(--surface); }
.stepper button:disabled { opacity: .45; cursor: default; }
@media (hover: hover) and (pointer: fine) { .stepper button:not(:disabled):not(.is-active):hover { background: var(--surface-2); color: var(--text); } }

/* Intro de página (H1 estable, siempre visible — ver main.js): mismo tratamiento que .hero */
.page-intro { position: relative; padding-block: var(--s-5) var(--s-4); }
.page-intro h1 { position: relative; font-size: clamp(2rem, 6vw, 3.5rem); max-width: 15ch; font-weight: 800; letter-spacing: -0.035em; }
.page-intro p { position: relative; margin-top: var(--s-3); color: var(--text-muted); font-size: 1.02rem; max-width: 50ch; }
.page-intro .byline-top { font-size: .84rem; max-width: 60ch; }
@media (min-width: 720px) { .page-intro { padding-block: var(--s-7) var(--s-5); } .page-intro p { font-size: 1.12rem; } .page-intro .byline-top { font-size: .84rem; } }

/* =============================================================
   Pantalla A — asistente del cuestionario
   ============================================================= */
.pantalla[hidden] { display: none; }
/* Selector de modo: guiado (por defecto) o explorar libremente */
.modo-switch { display: grid; grid-template-columns: 1fr; gap: var(--s-2); margin-top: var(--s-5); padding: var(--s-1); border-radius: var(--radius-xl); background: var(--surface-2); }
@media (min-width: 640px) { .modo-switch { grid-template-columns: 1fr 1fr; } }
.modo-switch-btn { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg); background: transparent; text-align: left; color: var(--text); transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.modo-switch-btn:active { transform: scale(0.98); }
.modo-switch-btn.is-active { background: var(--surface); box-shadow: var(--shadow-card), inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) { .modo-switch-btn:not(.is-active):hover { background: color-mix(in srgb, var(--surface) 60%, transparent); } }
.modo-switch-ico { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); font-size: 1.25rem; line-height: 1; }
.modo-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modo-switch-text strong { font-size: .98rem; }
.modo-switch-text span { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

/* Progreso del cuestionario: barra + "Pregunta X de 8 · menos de 1 min" */
.wizard-progress { padding-block: var(--s-5) 0; }
.wizard-progress-text { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.wizard-step-label { font-size: .85rem; color: var(--text); font-weight: 700; }
.wizard-eta { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.wizard-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.wizard-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--hero-via), var(--hero-to)); transition: width .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .wizard-bar-fill { transition: none; } }

.wizard-card { margin-top: var(--s-4); padding: var(--s-5) var(--s-4); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); scroll-margin-top: 5.5rem; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
@media (min-width: 720px) { .wizard-card { padding: var(--s-6); } }
.wizard-card.is-wizard-out-fwd { opacity: 0; transform: translateX(-10px); }
.wizard-card.is-wizard-out-back { opacity: 0; transform: translateX(10px); }
.wizard-card.is-wizard-in-fwd { animation: wizard-enter-fwd .18s var(--ease-out); }
.wizard-card.is-wizard-in-back { animation: wizard-enter-back .18s var(--ease-out); }
@keyframes wizard-enter-fwd { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wizard-enter-back { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .wizard-card, .wizard-card.is-wizard-in-fwd, .wizard-card.is-wizard-in-back { animation: none; transition: none; }
}
.wizard-question { font-size: clamp(1.35rem, 3.8vw, 1.75rem); max-width: 30ch; margin-inline: auto; text-align: center; font-weight: 800; letter-spacing: -0.03em; }
.wizard-help { margin-top: var(--s-3); line-height: 1.55; font-size: .88rem; color: var(--text-muted); text-align: center; max-width: 54ch; margin-inline: auto; }

/* min-height: reserva el espacio de las 4 opciones antes de que el JS las pinte, para que
   no haya salto de maquetación (CLS) al cargar — ver auditoría de rendimiento.
   Filas de igual altura: las opciones quedan simétricas aunque su texto tenga distinta longitud. */
.wizard-options { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--s-3); margin-top: var(--s-5); min-height: 150px; }
@media (max-width: 640px) { .wizard-options { grid-template-columns: 1fr; grid-auto-rows: auto; min-height: 260px; } }
.wizard-option {
  border: 0; border-radius: var(--radius-lg); background: var(--surface-2);
  padding: var(--s-4) var(--s-5); text-align: left; font-size: .95rem; font-weight: 600; line-height: 1.35;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s var(--ease-out);
}
.wizard-option:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .wizard-option:hover { box-shadow: inset 0 0 0 1px var(--text); } }
.wizard-option.is-selected { background: var(--text); color: var(--surface); box-shadow: none; }

.wizard-gate-warning {
  margin-top: var(--s-4); background: var(--warning-soft); color: var(--warning);
  border-radius: var(--radius); padding: var(--s-3) var(--s-4); font-size: .86rem; font-weight: 600;
  display: flex; gap: var(--s-2); align-items: flex-start;
}
.wizard-nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-bottom: var(--s-6); }

/* =============================================================
   Pantalla B — cada bloque es una tarjeta blanca, con el mismo ritmo
   ============================================================= */
.b-block { margin-block: var(--s-4); padding: var(--s-5) var(--s-4); background: var(--surface); border-radius: var(--radius-xl); }
@media (min-width: 720px) { .b-block { padding: var(--s-6); } }
.b-block h2 { font-size: 1.3rem; margin-bottom: var(--s-3); font-weight: 800; letter-spacing: -0.025em; }
.b-block .b-note { font-size: .92rem; line-height: 1.6; color: var(--text-muted); max-width: 62ch; }
.b-block .b-note a { color: var(--accent); font-weight: 700; }
.dev-note { background: var(--warning-soft); color: var(--warning); border-radius: var(--radius); padding: var(--s-3) var(--s-4); font-size: .85rem; margin-bottom: var(--s-4); }

/* B1 cabecera de arquetipo: la tarjeta verde de Kalculia */
.arquetipo-head {
  position: relative; text-align: left; color: #fff;
  background:
    radial-gradient(60% 70% at 100% 0%, color-mix(in srgb, var(--hero-to) 90%, transparent) 0%, transparent 70%),
    linear-gradient(150deg, var(--hero-from) 0%, var(--hero-via) 70%, var(--hero-to) 140%);
  box-shadow: var(--hero-shadow);
}
.arquetipo-head { isolation: isolate; padding-block: var(--s-6); }
@media (min-width: 720px) { .arquetipo-head { padding: var(--s-7) var(--s-6) var(--s-6); } }
.arquetipo-head > * { position: relative; z-index: 1; }
.arquetipo-head > .cc-hero-bill, .arquetipo-head > .cc-hero-coin { position: absolute; z-index: 0; }
.arquetipo-eyebrow { display: block; font-size: .95rem; font-weight: 600; color: #fff; }
.b-block.arquetipo-head .arquetipo-nombre { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: .98; margin: var(--s-2) 0 0; color: #fff; font-weight: 800; letter-spacing: -0.045em; max-width: 14ch; }
.arquetipo-relato { color: #fff; margin-top: var(--s-3); font-size: 1.1rem; max-width: 46ch; line-height: 1.5; }
.arquetipo-score { display: inline-block; margin-top: var(--s-4); padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.arquetipo-score:empty { display: none; }
.arquetipo-head .cc-note--hero { display: block; width: fit-content; margin-top: var(--s-4); }
@media (max-width: 719px) { .b-block.arquetipo-head .arquetipo-nombre, .arquetipo-eyebrow { padding-right: 5.5rem; } }
.arquetipo-head .vista-toggle { background: rgba(255,255,255,.14); }
.arquetipo-head .vista-toggle-btn { background: transparent; color: #fff; box-shadow: none; }
.arquetipo-head .vista-toggle-btn.is-active { background: #fff; color: var(--hero-from); }
/* Modo explorador: aviso suave y carteras de partida dentro de la cabecera verde */
.explorer-notice { margin-top: var(--s-4); max-width: 60ch; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: rgba(255,255,255,.14); color: #fff; font-size: .88rem; line-height: 1.55; }
.explorer-notice a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.preset-row { margin-top: var(--s-5); }
.preset-row[hidden] { display: none; }
.preset-row-label { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: var(--s-2); }
.preset-chips { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
@media (min-width: 640px) { .preset-chips { grid-template-columns: repeat(3, 1fr); } }
.preset-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: rgba(255,255,255,.12); color: #fff; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background-color .15s var(--ease-out); }
.preset-chip strong { font-size: .95rem; }
.preset-chip span { font-size: .78rem; opacity: .85; line-height: 1.4; }
.preset-chip:active { transform: scale(0.98); }
.preset-chip.is-active { background: #fff; color: var(--hero-from); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .preset-chip:not(.is-active):hover { background: rgba(255,255,255,.2); } }

/* Revelacion del resultado: los bloques suben en cascada la primera vez */
#pantalla-b.is-revealing > .b-block { animation: kc-rise 360ms var(--ease-out) both; }
#pantalla-b.is-revealing > .b-block:nth-child(2) { animation-delay: 60ms; }
#pantalla-b.is-revealing > .b-block:nth-child(3) { animation-delay: 120ms; }
#pantalla-b.is-revealing > .b-block:nth-child(n+4) { animation-delay: 180ms; }

.gate-warning { margin-top: var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); background: var(--warning-soft); color: var(--warning); border-radius: var(--radius); padding: var(--s-2) var(--s-4); font-size: .85rem; font-weight: 600; }

/* B2 explorador: donut + sliders */
.explorador-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; justify-items: center; margin-top: var(--s-4); }
@media (min-width: 720px) {
  .explorador-grid { grid-template-columns: 220px 1fr; justify-items: stretch; align-items: start; }
  /* Con los sliders agrupados la columna es alta: el donut se queda a la vista mientras mueves cualquier slider */
  .explorador-grid .donut-wrap { position: sticky; top: 6rem; height: auto; padding-top: var(--s-4); }
}

.donut-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.donut-canvas-wrap { position: relative; width: 200px; height: 200px; }
#donut-chart { width: 200px; height: 200px; cursor: pointer; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.dc-pct { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--text); line-height: 1; }
.dc-pct.is-off { color: var(--danger); }
.dc-sub { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.donut-total { font-family: var(--mono); font-size: .82rem; color: var(--text-muted); }
.donut-total.is-off { color: var(--danger); font-weight: 700; }

.slider-list { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; }
.slider-group { padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--s-3); }
.slider-group--crecimiento { background: color-mix(in srgb, #2f6fed 7%, var(--surface-2)); }
.slider-group--proteccion { background: color-mix(in srgb, #0f9d74 8%, var(--surface-2)); }
.slider-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.slider-group-title { font-size: 1rem; margin: 0; }
.slider-group-total { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.slider-group-desc { margin-top: calc(var(--s-2) * -1); margin-bottom: var(--s-1); font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.class-slider-row { position: relative; padding: var(--s-3) var(--s-3) var(--s-2); border-radius: var(--radius); background: var(--surface); }
.class-slider-row .row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.row-title { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.class-slider-row .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: var(--s-2); flex-shrink: 0; transition: opacity .15s var(--ease-out); }
.class-slider-row label { font-size: .92rem; font-weight: 700; display: flex; align-items: center; line-height: 1.3; transition: color .15s var(--ease-out); }
.row-sub { margin: 2px 0 var(--s-2) calc(10px + var(--s-2)); font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.class-slider-row .pct-value { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--text); min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; transition: color .15s var(--ease-out); }

/* Ayuda (i) de cada activo */
.class-info-btn, .info-inline { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font: italic 700 .72rem/1 Georgia, "Times New Roman", serif; box-shadow: inset 0 0 0 1px var(--border); }
.class-info-btn { position: relative; cursor: pointer; transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.class-info-btn::before { content: ""; position: absolute; inset: -12px; }
.class-info-btn[aria-expanded="true"] { background: var(--text); color: var(--surface); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .class-info-btn:hover { color: var(--text); } }
.info-inline { vertical-align: -4px; margin-inline: 2px; }
.class-info { margin: var(--s-1) 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--text); color: var(--surface); font-size: .82rem; line-height: 1.55; animation: kc-fade .18s ease both; }
.class-info[hidden] { display: none; }
.class-info p + p { margin-top: var(--s-1); }
.class-info strong { color: inherit; }

.row-head-right { display: flex; align-items: center; gap: var(--s-2); }

/* Interruptor para incluir/excluir un activo por completo del reparto */
.asset-toggle { width: 36px; height: 22px; border-radius: 999px; background: var(--border); padding: 0; position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s var(--ease-out); }
.asset-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s var(--ease-out); }
.asset-toggle[aria-checked="true"] { background: var(--accent); }
.asset-toggle[aria-checked="true"] .asset-toggle-knob { transform: translateX(14px); }
.asset-toggle:disabled { opacity: .35; cursor: not-allowed; }
.class-slider-row.is-excluded .swatch { opacity: .35; }
.class-slider-row.is-excluded label, .class-slider-row.is-excluded .pct-value { color: var(--text-muted); }

.chart-canvas { display: block; width: 100%; cursor: crosshair; }

/* Cifras bajo el gráfico histórico: tres tarjetas iguales */
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat-row > span { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.stat-row .stat-label { color: var(--text-muted); font-size: .85rem; font-weight: 600; line-height: 1.4; }
.stat-row .stat-value { font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }

.horizonte-selector { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.mc-summary { margin-top: var(--s-3); font-size: .88rem; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); }
.mc-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* B6 prueba de estrés: pestañas-tarjeta del mismo tamaño */
.stress-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: var(--s-2); margin-top: var(--s-3); }
.stress-tab { border-radius: var(--radius-lg); padding: var(--s-3) var(--s-4); text-align: left; }
.stress-tab .st-nombre { font-size: .84rem; font-weight: 700; }
.stress-tab .st-cifra { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--danger); margin-top: var(--s-1); font-variant-numeric: tabular-nums; }
.stress-tab.is-active .st-cifra { color: var(--loss-inverse); }
.stress-detail { margin-top: var(--s-4); background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); }
.stress-detail .sd-titulo { font-weight: 700; }
.stress-detail .sd-fechas { font-family: var(--mono); font-size: .8rem; color: var(--text-muted); }
.stress-toggle-cmp { margin-top: var(--s-3); font-size: .86rem; font-weight: 700; color: var(--accent); }

.data-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); }
.data-table thead th { font-weight: 700; color: var(--text-muted); font-size: .8rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.negativo { color: var(--danger); font-weight: 700; }

/* B7 panel institucional */
.panel-institucional summary { cursor: pointer; font-weight: 700; color: var(--text); font-size: 1.05rem; list-style: none; display: flex; align-items: center; gap: var(--s-2); }
.panel-institucional summary::-webkit-details-marker { display: none; }
.panel-institucional summary::after { content: "Ver"; font-size: .8rem; margin-left: auto; padding: .2rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.panel-institucional[open] summary::after { content: "Ocultar"; }

/* Vista simple/avanzada (segmentación dinámica): control segmentado */
.vista-toggle { display: inline-flex; gap: var(--s-1); margin-top: var(--s-4); padding: var(--s-1); border-radius: 999px; background: var(--surface-2); }
.vista-toggle .vista-toggle-btn { background: transparent; box-shadow: none; }

/* B5/B6 en modo "simple" arrancan colapsados — su <summary> lleva el H2 para que
   siga siendo un titular real (y accesible) en vez de un enlace "Ver más" genérico. */
.b-block-details summary { cursor: pointer; list-style: none; }
.b-block-details summary::-webkit-details-marker { display: none; }
.b-block-details summary h2 { display: flex; align-items: center; gap: var(--s-2); }
.b-block-details summary h2::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); font-size: 1.1rem; font-weight: 400; margin-left: auto; transition: transform .2s var(--ease-out); }
.b-block-details[open] summary h2::after { transform: rotate(45deg); }
.metric-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 640px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
.metric-card { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); }

.corr-title { margin-top: var(--s-5); font-size: 1.05rem; }
.corr-table th, .corr-table td { text-align: center; font-family: var(--mono); font-size: .78rem; padding: var(--s-2) var(--s-2); }
.corr-table thead th:first-child, .corr-table tbody th { text-align: left; font-family: var(--sans); font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.corr-cell { color: #1b2420; font-weight: 600; }
.metric-card .m-label { font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--text-muted); display: flex; align-items: center; gap: var(--s-2); }
.metric-card .m-value { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.info-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--border); color: var(--text-muted); font-size: .68rem; font-weight: 800; cursor: help; }
.info-dot[title] { position: relative; }

/* B8 proxies */
.proxies-table td:first-child { font-weight: 700; }

/* Diálogo intermedio (tras descargar el PDF — mismo patrón que tax-free) */
.interstitial { border: 0; border-radius: var(--radius-lg); padding: var(--s-5); max-width: 380px; width: calc(100% - 2rem); box-shadow: var(--shadow-card); background: var(--surface); color: var(--text); position: relative; }
.interstitial::backdrop { background: rgba(6, 20, 14, .55); backdrop-filter: blur(2px); }
.interstitial-close { position: absolute; top: var(--s-3); right: var(--s-3); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 1.2rem; }
.interstitial-check { font-weight: 700; margin-bottom: var(--s-3); padding-right: var(--s-6); }

/* B9: por qué esta cartera encaja contigo */
.fit-block { background: var(--accent-soft); border-radius: var(--radius-lg); padding: var(--s-5); }
.fit-block h3 { font-size: 1.1rem; color: var(--text); margin-bottom: var(--s-3); }
.fit-block p { font-size: .95rem; line-height: 1.55; color: var(--text); max-width: 62ch; }

/* B9: legal ampliado */
.legal-block { margin-top: var(--s-5); }
.fit-block[hidden] + .legal-block { margin-top: 0; }
.legal-block h3 { font-size: 1rem; margin-bottom: var(--s-3); }
.legal-block ul { list-style: disc; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.legal-block li { color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.legal-block li strong { color: var(--text); }
.legal-block a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.b9-actions { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Las secciones con su propio .container dentro del <main class="container"> no suman otro margen:
   así FAQ y «Más herramientas» quedan alineadas con el resto de la página */
main.container .container { padding-inline: 0; max-width: none; }

/* Móvil: las cajas de sliders ganan ancho útil para que los títulos quepan en una línea */
@media (max-width: 479px) {
  .slider-group { padding: var(--s-3) var(--s-2); }
  .slider-group-head, .slider-group-desc { padding-inline: var(--s-2); }
  .class-slider-row { padding: var(--s-3) var(--s-3) var(--s-2); }
  .class-slider-row label { font-size: .88rem; }
  .row-sub { margin-left: 0; }
}

/* =============================================================
   Qué significa para tu bolsillo (Fase 2)
   ============================================================= */
.diag-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 720px) { .diag-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } }
.diag-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); }
.diag-title { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.diag-value { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.diag-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.diag-meter span { height: 6px; border-radius: 999px; background: var(--border); }
.diag-card--crecimiento .diag-meter .is-on { background: #2f6fed; }
.diag-card--defensivo .diag-meter .is-on { background: #0f9d74; }
.diag-card--rebalanceo .diag-meter .is-on { background: var(--text-muted); }
.diag-text { font-size: .84rem; color: var(--text-muted); line-height: 1.55; }

.bolsillo-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 900px) { .bolsillo-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }
.bolsillo-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-xl); background: var(--surface-2); }
.bolsillo-card[hidden] { display: none; }
.bc-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
.bolsillo-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0; }
.bc-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.bc-figure-pct { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 3.2rem); letter-spacing: -0.04em; line-height: 1; color: var(--loss); }
.bc-figure-eur { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--loss); }
.bc-caption { font-size: .9rem; color: var(--text-muted); line-height: 1.55; }
.bc-caption strong { color: var(--text); }
.bc-list { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.bc-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: .88rem; }
.bc-list dt { color: var(--text-muted); }
.bc-list dt span { font-size: .78rem; }
.bc-list dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-list dd small { display: block; font-family: var(--body, inherit); font-weight: 600; font-size: .76rem; color: var(--text-muted); }
.bc-figure-pct, .bc-figure-eur, .real-eq-num { font-variant-numeric: tabular-nums; }
.bc-calma { margin-top: auto; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--surface); font-size: .86rem; line-height: 1.55; color: var(--text); }

.real-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: var(--s-2); text-align: center; padding: var(--s-4) var(--s-2); border-radius: var(--radius-lg); background: var(--surface); }
.real-eq > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.real-eq-num { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 4.4vw, 1.7rem); letter-spacing: -0.03em; color: var(--text); line-height: 1.1; }
.real-eq-lbl { font-size: .74rem; color: var(--text-muted); line-height: 1.35; }
.real-eq-op { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--text-muted); line-height: 1.2; }
.real-eq-result .real-eq-num { color: var(--opt-a-ink); }
.bolsillo-card--real.is-negative .real-eq-result .real-eq-num { color: var(--loss); }
.bc-source { margin-top: auto; font-size: .76rem; color: var(--text-muted); }
@media (max-width: 479px) {
  .real-eq { grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-3) var(--s-4); text-align: left; }
  .real-eq > div { flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
  .real-eq-op { display: none; }
  .real-eq-result { padding-top: var(--s-2); border-top: 1px solid var(--rule); }
}

/* =============================================================
   Fase 3: tu plan (DCA), comparación con el MSCI World y comisiones
   ============================================================= */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 720px) { .plan-grid { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.input-eur { position: relative; }
.input-eur input { padding-right: 4.2rem; font-family: var(--display); font-size: 1.2rem; font-weight: 800; }
.input-eur span { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--text-muted); pointer-events: none; }
.plan-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.plan-chip { padding: .45rem .9rem; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: .85rem; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); transition: background-color .15s var(--ease-out); }
.plan-chip:active { transform: scale(0.96); }
.plan-chip.is-active { background: var(--text); color: var(--surface); box-shadow: none; }

.bench-toggle { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); padding: .5rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--opt-b) 10%, var(--surface-2)); font-size: .88rem; cursor: pointer; }
.bench-toggle input { width: 18px; height: 18px; accent-color: var(--opt-b); cursor: pointer; }
#backtest-legend[hidden] { display: none; }
.b4-resumen { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); font-size: .92rem; line-height: 1.6; color: var(--text-muted); }
.b4-resumen strong { color: var(--text); }
.b4-resumen:empty { display: none; }
.stress-bench-note { margin-top: var(--s-3); }

.ter-duo { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 640px) { .ter-duo { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }
.ter-opt { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.ter-opt--banca { background: color-mix(in srgb, var(--loss) 7%, var(--surface-2)); }
.ter-opt-name { font-weight: 700; font-size: .92rem; color: var(--text); }
.ter-opt-name span { display: block; font-weight: 600; font-size: .8rem; color: var(--text-muted); }
.ter-opt-lost { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.ter-opt--banca .ter-opt-lost { color: var(--loss); }
.ter-opt-lost small { display: block; margin-top: var(--s-1); font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.ter-compara { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--accent-soft); font-size: .95rem; line-height: 1.6; }
.ter-cta { margin-top: var(--s-4); }
.ter-supuesto { margin-top: var(--s-3); font-size: .78rem; }
.input-eur input::-webkit-outer-spin-button, .input-eur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-eur input { -moz-appearance: textfield; appearance: textfield; }

/* =============================================================
   Móvil: revisión a 375 px (pantalla inicial, barra en vivo, toques, orden)
   ============================================================= */
.st-short { display: none; }
.intro-short { display: none; }
@media (max-width: 559px) {
  .st-long { display: none; }
  .st-short { display: inline; }
  .stepper { font-size: .8rem; }
  .stepper button { padding: .4rem .75rem; white-space: nowrap; }
  /* 1) Que la primera pregunta y sus respuestas entren en el primer pantallazo */
  .page-intro { padding-block: var(--s-3) var(--s-2); }
  .page-intro h1 { font-size: 1.75rem; max-width: 13ch; }
  .page-intro .intro-long { display: none; }
  .page-intro .intro-short { display: block; margin-top: var(--s-2); font-size: .95rem; line-height: 1.5; }
  .page-intro .byline-top { margin-top: var(--s-2); font-size: .76rem; }
  .page-intro .hero-art { transform: scale(.62); transform-origin: top right; }
  .modo-switch { grid-template-columns: 1fr 1fr; margin-top: var(--s-3); }
  .modo-switch-btn { justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); min-height: 48px; }
  .modo-switch-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 1rem; }
  .modo-switch-text span { display: none; }
  .modo-switch-text strong { font-size: .88rem; line-height: 1.2; }
  .wizard-progress { padding-top: var(--s-3); }
  .wizard-card { margin-top: var(--s-3); padding: var(--s-4) var(--s-3); }
  .wizard-question { font-size: 1.25rem; }

  /* 5) Cabecera del explorador compacta: carteras de partida en fila deslizable */
  .arquetipo-head .cc-note--hero { display: none; }
  .preset-row { margin-top: var(--s-4); }
  .preset-chips { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-1); scrollbar-width: none; }
  .preset-chips::-webkit-scrollbar { display: none; }
  .preset-chip { flex: 0 0 auto; scroll-snap-align: start; padding: .6rem 1rem; border-radius: 999px; min-height: 44px; justify-content: center; }
  .preset-chip span { display: none; }
  .explorer-notice { padding: var(--s-2) var(--s-3); font-size: .82rem; }

  /* 7) Cifras del histórico: lista compacta de 3 filas */
  .stat-row { grid-auto-rows: auto; gap: 0; padding: var(--s-1) var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); }
  .stat-row > span { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-radius: 0; background: none; border-bottom: 1px solid var(--rule); }
  .stat-row > span:last-child { border-bottom: 0; }
  .stat-row .stat-value { font-size: 1.15rem; white-space: nowrap; }
}


/* 4 + 11) Tarjeta común de compartir con imagen y PDF */
.share-card--cartera { margin-top: var(--s-5); }
.share-card-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.share-card-actions .share-card-btn { grid-column: auto; width: 100%; padding-inline: var(--s-3); }
/* En móvil, la imagen para X ocupa la fila entera; debajo, vertical y PDF */
.share-card-actions .share-card-btn:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .share-card--cartera { grid-template-columns: auto 1fr auto; } .share-card-actions { grid-column: auto; display: flex; } .share-card-actions .share-card-btn { width: auto; } }

/* 9) Zonas de toque de al menos 44 px */
.asset-toggle::before { content: ""; position: absolute; inset: -11px -4px; }
.stress-toggle-cmp { min-height: 44px; display: inline-flex; align-items: center; }
.class-slider-row input[type="range"] { min-height: 32px; }

/* 11) Tipografía mínima de 13 px en la ecuación y las tablas */
.real-eq-lbl { font-size: .8125rem; }
.corr-table th, .corr-table td, .corr-table thead th:first-child, .corr-table tbody th { font-size: .8125rem; }
.data-table thead th { font-size: .8125rem; }

/* Móvil: compactar sliders y diagnóstico para acortar la página */
@media (max-width: 559px) {
  .slider-group-desc { display: none; }
  .slider-group { gap: var(--s-2); }
  .class-slider-row { padding: var(--s-2) var(--s-3); }
  .row-sub { margin-bottom: var(--s-1); }
  .diag-grid { gap: 0; padding: var(--s-1) var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); }
  .diag-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-radius: 0; background: none; border-bottom: 1px solid var(--rule); }
  .diag-card:last-child { border-bottom: 0; }
  .diag-title { font-size: .86rem; color: var(--text); }
  .diag-value { font-size: 1rem; text-align: right; }
  .diag-meter { grid-column: 1 / -1; }
  .diag-text { grid-column: 1 / -1; font-size: .8125rem; }
  .bolsillo-card { padding: var(--s-4); }
}
.share-card-actions .share-card-btn { white-space: nowrap; }

/* =============================================================
   Móvil: crisis simétricas y sin huecos
   ============================================================= */
@media (max-width: 719px) {
  /* Las 4 crisis en una cuadrícula 2 x 2 de tarjetas iguales */
  .stress-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stress-tab { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-3); }
  .stress-tab .st-nombre { font-size: .8125rem; line-height: 1.3; }
  .stress-tab .st-cifra { font-size: 1.1rem; }
  /* Ficha de la crisis: mismo margen a los dos lados y cifras dentro de la caja */
  .stress-detail { padding: var(--s-4); }
  .stress-detail .sd-titulo { line-height: 1.3; }
  .stress-detail .stat-row { margin-top: var(--s-3); background: var(--surface); }
  .stress-detail .stat-row > span { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stress-detail .stat-row .stat-value { white-space: normal; font-size: 1.1rem; line-height: 1.3; }
  .stress-detail .chart-legend { justify-content: flex-start; }
  .stress-bench-note { margin-bottom: 0; }
}

/* CTA hacia la página del informe técnico: tarjeta verde, misma familia que .cc-hero-card */
.cta-informe {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--s-5); align-items: center;
  padding: var(--s-6) var(--s-5); color: #fff;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--hero-to) 75%, transparent) 0%, transparent 70%),
    linear-gradient(150deg, var(--hero-from) 0%, var(--hero-via) 80%, var(--hero-to) 150%);
  box-shadow: var(--hero-shadow);
}
.cta-informe h2 { color: #fff; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; max-width: 24ch; }
.cta-informe-text p { margin-top: var(--s-3); max-width: 52ch; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.cta-informe-btn { justify-self: start; text-align: center; background: #fff; color: #06291f; }
.cta-informe-btn span { display: inline-block; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta-informe-btn:hover span { transform: translateX(3px); } }
@media (min-width: 720px) {
  .cta-informe { grid-template-columns: 1fr auto; gap: var(--s-6); padding: var(--s-6); }
  .cta-informe-btn { justify-self: end; }
}
@media (max-width: 479px) { .cta-informe-btn { justify-self: stretch; } }