/* Calculadora de inversión (EN y ES). Usa los tokens de site.css; aquí sólo lo propio.
   Colores de estado: el positivo en verde (#0F7B4B sobre blanco, 5,4:1; #74E3AC sobre el teal profundo).
   El negativo NO va en magenta: en toda la web el magenta es la acción y el buen resultado (+44 %). Va en
   el color del texto (sobre blanco) o en blanco (sobre el panel): el signo «−» y la frase ya lo dicen. */
.pagina-calculator {
  --calc-pos: #0F7B4B;
  --calc-neg: var(--titulo);
  --calc-pos-claro: #74E3AC;
  --calc-neg-claro: #fff;
  --calc-borde: #D6D0CA;
  --calc-apagado: #76726E; /* lo que aún no tiene dato: más claro que el texto, pero legible (4,77:1 sobre blanco) */
}

/* ---------- zona de la calculadora (cabecera + herramienta + tabla) ---------- */
/* sin overflow:hidden: rompería el panel pegajoso. El halo teal va pintado en el propio fondo */
.calc-zona { position: relative; padding: clamp(40px, 4vw, 72px) 0 clamp(56px, 5vw, 96px); background: radial-gradient(circle 380px at calc(100% + 100px) 20px, rgba(0, 170, 200, .14), rgba(0, 170, 200, 0)) no-repeat, linear-gradient(180deg, var(--crema-2) 0, var(--crema) 560px); }
.calc-portada { max-width: 820px; margin: 0 auto clamp(32px, 3.5vw, 52px); }
.calc-portada .titulo-1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem); margin-bottom: .4em; text-wrap: balance; }
.calc-portada .entradilla { margin-bottom: 22px; }
.calc-portada__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.calc-portada__chips .chip { font-size: .8rem; padding: 6px 14px; box-shadow: 0 1px 2px rgba(16, 40, 46, .06); }
.calc-portada__chips a.chip { text-decoration: none; }
.calc-portada__chips a.chip:hover { background: #F8D4E8; }

.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }

/* ---------- entradas ---------- */
.calc__entradas { display: grid; gap: 16px; margin: 0; }
.calc-grupo { margin: 0; min-width: 0; border: 0; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(6px, 1vw, 12px); }
.calc-grupo > legend { float: left; width: 100%; padding: 0; }
/* el aviso de «cifras rellenadas desde tu folleto»: fuera de los grupos (el legend flota y su hermano siguiente lo despeja) */
.calc-folleto { margin: 0; padding: 12px 16px; border-radius: var(--radio); background: var(--magenta-velo); color: var(--magenta-700); font-weight: 700; font-size: .9rem; line-height: 1.4; }
.calc-grupo > legend + * { clear: left; }
.calc-grupo__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1.12rem; font-weight: 800; color: var(--titulo); line-height: 1.3; }
.calc-grupo__num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-velo); color: var(--teal-700); display: grid; place-content: center; font-size: .85rem; font-weight: 800; }

.calc-campo { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--linea); min-width: 0; }
.calc-grupo > legend + .calc-campo, .calc-grupo > .calc-campo:first-of-type { border-top: 0; padding-top: 0; }
.calc-campo > legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.calc-campo > legend + * { clear: left; }
.calc-campo__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.calc-campo__etiqueta { font-weight: 700; font-size: .95rem; color: var(--titulo); line-height: 1.3; }
.calc-campo__etiqueta small { display: block; font-weight: 500; font-size: .76rem; color: var(--tinta-suave); }
.calc-campo__ayuda { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: var(--tinta-suave); }
.calc-campo__ayuda strong { color: var(--titulo); }
.calc-chip-estimado { padding: 1px 9px; font-size: .68rem; margin-right: 4px; vertical-align: 1px; }

/* la caja del número, con $ delante o % detrás */
.calc-entrada { flex: none; display: inline-flex; align-items: center; gap: 4px; width: 9.6rem; min-height: 46px; padding: 0 14px; background: #fff; border: 1.5px solid var(--calc-borde); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.calc-entrada:focus-within { border-color: var(--teal-600); }
/* el foco de teclado, el mismo anillo magenta que el resto del sitio (el halo teal no se veía: 1,2:1) */
.calc-entrada:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 2px; }
.calc-entrada--corta { width: 6.4rem; }
.calc-entrada__pre, .calc-entrada__post { color: var(--tinta-suave); font-weight: 700; }
.calc-entrada input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; font: inherit; font-size: 1.05rem; font-weight: 800; color: var(--titulo); text-align: right; font-variant-numeric: tabular-nums; }
.calc-entrada input:focus { outline: none; }

/* deslizador */
.calc-desliza { --llenado: 50%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 12px 0 0; background: transparent; cursor: pointer; }
.calc-desliza:focus { outline: none; }
.calc-desliza::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--teal) var(--llenado), #E7E1DB var(--llenado)); }
.calc-desliza::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--teal-600); box-shadow: 0 2px 8px rgba(16, 40, 46, .22); transition: transform .15s var(--ease); }
.calc-desliza:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc-desliza:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--magenta); }
.calc-desliza::-moz-range-track { height: 6px; border-radius: 6px; background: #E7E1DB; }
.calc-desliza::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--teal); }
.calc-desliza::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--teal-600); box-shadow: 0 2px 8px rgba(16, 40, 46, .22); }
.calc-desliza:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--magenta); }

/* − 2 + */
.calc-paso { flex: none; display: inline-flex; align-items: center; border: 1.5px solid var(--calc-borde); border-radius: 12px; overflow: hidden; min-height: 46px; background: #fff; }
.calc-paso:focus-within { border-color: var(--teal-600); }
.calc-paso:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 2px; }
.calc-paso input { width: 3.2rem; border: 0; text-align: center; font: inherit; font-size: 1.05rem; font-weight: 800; color: var(--titulo); background: transparent; padding: 0; }
.calc-paso input:focus { outline: none; }
.calc-paso__boton { width: 44px; height: 44px; border: 0; background: var(--crema-2); color: var(--teal-700); font-size: 1.3rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.calc-paso__boton:hover { background: var(--teal-velo); }
.calc-paso__boton:focus-visible { outline-offset: -3px; }

/* dos opciones (depósito, tipo de préstamo) */
.calc-segmentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; background: var(--crema); border-radius: 14px; }
/* grid: si una opción ocupa dos líneas («Principal & interest» en el móvil), la elegida llena igual el alto */
.calc-segmento { position: relative; display: grid; cursor: pointer; }
.calc-segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-segmento > span { display: grid; place-content: center; gap: 2px; min-height: 58px; padding: 8px 10px; border-radius: 10px; text-align: center; font-weight: 800; font-size: 1rem; line-height: 1.2; color: var(--tinta-suave); transition: background .15s, color .15s, box-shadow .15s; }
.calc-segmento small { font-weight: 600; font-size: .74rem; color: var(--tinta-suave); }
.calc-segmento:hover > span { color: var(--titulo); }
.calc-segmento input:checked + span { background: #fff; color: var(--teal-700); box-shadow: 0 1px 2px rgba(16, 40, 46, .08), 0 4px 12px rgba(16, 40, 46, .08); }
.calc-segmento input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 2px; }

/* chips de crecimiento */
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.calc-chip { min-width: 64px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--calc-borde); background: #fff; color: var(--titulo); font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.calc-chip:hover { border-color: var(--teal-600); }
.calc-chip[aria-pressed="true"] { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

.calc-enlace { border: 0; background: none; padding: 0; color: var(--teal-700); font-weight: 700; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* gastos plegables. El flex va en un span dentro del <summary>, no en el propio summary: Safari no
   siempre deja que un summary sea contenedor flex. El nombre lleva base propia para no saltar solo
   a la línea de abajo cuando no cabe junto al número (pasaba en el móvil en español) */
.calc-grupo--plegable { padding: 0; }
.calc-grupo--plegable > summary { display: block; list-style: none; cursor: pointer; margin: 0; padding: clamp(20px, 2vw, 28px); padding-right: 64px; position: relative; }
.calc-grupo--plegable > summary::-webkit-details-marker { display: none; }
.calc-grupo__resumen .calc-grupo__titulo { margin: 0; flex-wrap: wrap; row-gap: 4px; }
.calc-grupo__nombre { flex: 1 1 9rem; min-width: 0; }
.calc-grupo--plegable > summary::after { content: ''; position: absolute; right: clamp(20px, 2vw, 28px); top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--teal-velo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007F96' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s; }
.calc-grupo--plegable[open] > summary::after { transform: rotate(45deg); }
.calc-grupo--plegable > summary:focus-visible { outline-offset: -3px; border-radius: var(--radio); }
.calc-grupo__total { margin-left: auto; font-size: .92rem; font-weight: 600; color: var(--tinta-suave); }
.calc-grupo__total span { font-weight: 800; color: var(--titulo); }
.calc-gastos { padding: 4px clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px); border-top: 1px solid var(--linea); }
.calc-campo--compacto { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.calc-gastos > .calc-campo--compacto:first-child { border-top: 0; }
.calc-campo--compacto .calc-entrada { min-height: 42px; }
.calc-gastos > .calc-campo__ayuda { margin-top: 6px; }

/* ---------- resultados ---------- */
.calc__resultados { position: sticky; top: calc(var(--cab-alto) + 16px); }
/* en pantallas bajas (1280×720, 1366×768, 1024×768) el panel pasa de la altura de la ventana y, pegado,
   escondía el final (la comparación y el aviso) hasta llegar al último campo: ahí se desplaza por dentro */
.calc-panel { background: #fff; border-radius: var(--radio-l); box-shadow: var(--sombra-l); overflow: hidden; }
@media (min-width: 961px) {
  .calc-panel { max-height: calc(100vh - var(--cab-alto) - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #CFC8C1 transparent; }
  /* el aviso de información general no se va nunca de la vista: se queda al pie del panel */
  .calc-panel__aviso { position: sticky; bottom: 0; z-index: 1; }
}
/* sin precio: los últimos números se quedan, atenuados, y el texto pide el precio */
.calc :is(.calc-flujo, .calc-datos, .calc-grafico) { transition: opacity .2s; }
.calc.es-espera :is(.calc-flujo, .calc-datos, .calc-grafico), .calc.es-espera ~ .calc-abajo .calc-tabla-caja { opacity: .3; }
.calc-panel__cab { background: var(--teal-900); color: rgba(255, 255, 255, .86); padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2.4vw, 32px) clamp(16px, 1.6vw, 20px); position: relative; overflow: hidden; }
.calc-panel__cab::after { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -140px; border-radius: 50%; background: rgba(63, 208, 232, .1); pointer-events: none; }
.calc-panel__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; }
.calc-panel__titulo { margin: 0; color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.calc-panel__etiqueta { font-size: .78rem; font-weight: 600; color: var(--teal-claro); }
.calc-flujo { margin: 6px 0 4px; display: flex; align-items: baseline; gap: 10px; position: relative; }
.calc-flujo__valor { font-size: clamp(2.6rem, 2rem + 2.2vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; transition: color .2s; }
.calc-flujo__unidad { font-weight: 600; color: rgba(255, 255, 255, .78); }
.calc-flujo__texto { margin: 0; font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .82); position: relative; text-wrap: pretty; }
.calc-panel.es-positivo .calc-flujo__valor { color: var(--calc-pos-claro); }
.calc-panel.es-negativo .calc-flujo__valor { color: var(--calc-neg-claro); }

.calc-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--linea); }
/* subgrid: si una etiqueta ocupa dos líneas («RENTABILIDAD BRUTA»), las cuatro cifras siguen en la misma altura */
.calc-datos > div { padding: 14px 14px 14px clamp(16px, 1.6vw, 22px); border-left: 1px solid var(--linea); min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.calc-datos > div:first-child { border-left: 0; padding-left: clamp(20px, 2.4vw, 32px); }
.calc-datos dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); line-height: 1.3; }
.calc-datos dd { margin: 4px 0 0; }
.calc-datos dd > span { display: block; font-size: 1.22rem; font-weight: 800; color: var(--titulo); line-height: 1.2; font-variant-numeric: tabular-nums; }
.calc-datos dd small { display: block; margin-top: 3px; font-size: .72rem; line-height: 1.35; color: var(--tinta-suave); }

.calc-grafico { padding: 14px clamp(20px, 2.4vw, 32px) 2px; }
.calc-grafico__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 4px; }
.calc-grafico__titulo { margin: 0; font-size: 1rem; font-weight: 800; color: var(--titulo); }
.calc-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; font-weight: 600; color: var(--tinta-suave); }
.calc-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
/* ES: con 10 px entre marcas la leyenda cabe junto al título en 1440 y en una línea en el móvil (con 14 bajaba
   a otra fila y el panel pegajoso dejaba de caber en 1440×900) */
body[data-lang="es"] .calc-leyenda { column-gap: 10px; }
.calc-leyenda__marca { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.calc-leyenda__marca--valor { background: var(--teal-600); }
.calc-leyenda__marca--deuda { height: 0; border-top: 2px dashed #8A8580; }
.calc-leyenda__marca--equity { height: 12px; width: 14px; border-radius: 3px; background: rgba(0, 170, 200, .22); box-shadow: inset 0 0 0 1.5px rgba(0, 127, 150, .35); }
.calc-grafico__lienzo { min-height: 196px; margin: 0 -6px; }

/* sin crecimiento elegido (empieza así: regla 6) no hay proyección. Se ve el préstamo, se esconde el valor
   y el equity, y el panel pide un crecimiento con los mismos tres chips del paso 4 */
.calc-falta { display: none; }
/* una sola fila (texto y chips) para que el panel pegajoso siga cabiendo en 1440×900 */
.sin-crec .calc-falta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 2px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--teal-velo); }
.calc-falta__texto { margin: 0; flex: 1 1 14rem; font-size: .86rem; font-weight: 700; color: var(--teal-700); line-height: 1.35; }
.calc-falta .calc-chips { margin-top: 0; gap: 6px; }
.calc-falta .calc-chip { min-height: 36px; min-width: 56px; padding: 4px 12px; }
.sin-crec .calc-svg :is(.calc-svg__valor, .calc-svg__area, .calc-svg__punto, .calc-svg__equity, .calc-svg__etiqueta) { display: none; }
/* atenuado con color y no con opacidad: a .45 el texto quedaba en 2,1-2,4:1 y es lo primero que se ve */
.sin-crec .calc-leyenda li:not(:nth-child(2)), .sin-crec .calc-comparar__fila + .calc-comparar__fila :is(.calc-comparar__etiqueta, .calc-comparar__valor) { color: var(--calc-apagado); }
.sin-crec .calc-leyenda li:not(:nth-child(2)) .calc-leyenda__marca { opacity: .4; }
.sin-crec .calc-comparar__fila + .calc-comparar__fila .calc-comparar__valor { font-weight: 600; }
.sin-crec .calc-comparar__texto { display: none; } /* repetiría el aviso de arriba */
.calc-campo__ayuda--aviso { color: var(--titulo); font-weight: 600; }

.calc-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--fuente); }
.calc-svg__rejilla { stroke: #EEE9E4; stroke-width: 1; }
.calc-svg__base { stroke: #CFC8C1; stroke-width: 1.2; }
.calc-svg__eje { font-size: 12px; fill: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.calc-svg__eje--activo { fill: var(--magenta-700); font-weight: 800; }
.calc-svg__guia { stroke: #E4DFDA; stroke-width: 1; stroke-dasharray: 2 4; }
.calc-svg__guia--activa { stroke: rgba(216, 11, 140, .35); stroke-dasharray: none; }
.calc-svg__area { fill: rgba(0, 170, 200, .18); }
.calc-svg__valor { fill: none; stroke: var(--teal-600); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.calc-svg__deuda { fill: none; stroke: #8A8580; stroke-width: 2; stroke-dasharray: 6 5; }
.calc-svg__punto { fill: #fff; stroke: var(--teal-600); stroke-width: 2.5; }
.calc-svg__punto-deuda { fill: #fff; stroke: #8A8580; stroke-width: 2; }
.calc-svg__punto.es-activo, .calc-svg__punto-deuda.es-activo { stroke: var(--magenta); fill: var(--magenta); }
.calc-svg__equity { stroke: var(--magenta); stroke-width: 3; stroke-linecap: round; }
.calc-svg__etiqueta rect { fill: #fff; stroke: rgba(216, 11, 140, .35); stroke-width: 1; filter: drop-shadow(0 2px 4px rgba(16, 40, 46, .1)); }
.calc-svg__etiqueta text { font-size: 13px; fill: var(--titulo); }
.calc-svg__etiqueta-nombre { font-weight: 600; }
.calc-svg__etiqueta-valor { font-weight: 800; fill: var(--magenta-700); }
.calc-svg__zona { fill: transparent; cursor: pointer; }

.calc-hitos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; margin: 8px 0 0; background: var(--crema); border-radius: 14px; }
.calc-hito { min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-suave); font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.calc-hito:hover { color: var(--titulo); }
.calc-hito[aria-pressed="true"] { background: #fff; color: var(--magenta-700); box-shadow: 0 1px 2px rgba(16, 40, 46, .08), 0 4px 12px rgba(16, 40, 46, .08); }

.calc-comparar { padding: 12px 0 2px; }
.calc-comparar__titulo { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.calc-comparar__fila { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 4.8rem; gap: 12px; align-items: center; margin-bottom: 8px; }
/* «$539 mil» mide 80 px: en 4,6rem se salía de su columna */
body[data-lang="es"] .calc-comparar__fila { grid-template-columns: 11.5rem minmax(0, 1fr) 6rem; }
.calc-comparar__etiqueta { font-size: .86rem; font-weight: 600; color: var(--tinta); line-height: 1.25; }
.calc-comparar__barra { height: 12px; border-radius: 6px; background: #F1ECE7; overflow: hidden; }
.calc-comparar__llenado { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .35s var(--ease); }
.calc-comparar__llenado--efectivo { background: #9A948E; }
.calc-comparar__llenado--equity { background: var(--teal); }
.calc-comparar__valor { text-align: right; font-weight: 800; color: var(--titulo); font-variant-numeric: tabular-nums; }
.calc-comparar__texto { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; color: var(--tinta-suave); text-wrap: pretty; }

.calc-panel__aviso { margin: 0; padding: 12px clamp(20px, 2.4vw, 32px) 14px; font-size: .76rem; line-height: 1.5; color: var(--tinta-suave); background: var(--crema-2); border-top: 1px solid var(--linea); }
.calc-panel__aviso a { font-weight: 700; color: var(--teal-700); white-space: nowrap; }

/* ---------- debajo: la tabla y el aviso ---------- */
.calc-abajo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(28px, 3vw, 44px); align-items: start; }
/* por debajo de 1180 la tabla, al lado del aviso, partía los nombres de fila en tres y cuatro líneas
   («Flujo de / caja / acumulado» a 1024): ahí va a todo el ancho y el aviso debajo */
@media (max-width: 1180px) { .calc-abajo { grid-template-columns: minmax(0, 1fr); } }
.calc-tabla-tarjeta .titulo-3 { margin-bottom: .3em; }
.calc-tabla-tarjeta > .letra-pequena { margin-bottom: 18px; }
.calc-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calc-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc-tabla th, .calc-tabla td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.calc-tabla thead td { border-bottom-width: 2px; }
.calc-tabla thead th { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); border-bottom: 2px solid var(--linea); }
.calc-tabla tbody th { text-align: left; font-weight: 700; color: var(--titulo); font-size: .92rem; white-space: normal; padding-left: 0; }
.calc-tabla tbody th small { display: block; font-weight: 500; font-size: .74rem; color: var(--tinta-suave); }
.calc-tabla td { font-weight: 700; color: var(--titulo); }
.calc-tabla tbody tr:last-child > * { border-bottom: 0; }
.calc-tabla__destacada > * { background: var(--teal-velo); }
.calc-tabla__destacada th { padding-left: 12px; border-radius: 10px 0 0 10px; }
.calc-tabla__destacada td:last-child { border-radius: 0 10px 10px 0; }
.calc-tabla__destacada td { color: var(--teal-700); font-weight: 800; }
.calc-tabla td.es-negativo { color: var(--calc-neg); }
.calc-tabla td.es-positivo { color: var(--calc-pos); }

.calc-aviso { position: relative; background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); border-top: 4px solid var(--magenta); padding: clamp(22px, 2.2vw, 30px); font-size: .9rem; line-height: 1.6; color: var(--tinta); }
.calc-aviso__icono { position: absolute; top: clamp(20px, 2.2vw, 28px); right: clamp(20px, 2.2vw, 28px); width: 30px; height: 30px; border-radius: 50%; background: var(--magenta-velo); color: var(--magenta-700); display: grid; place-content: center; font-weight: 800; font-style: italic; font-family: Georgia, serif; font-size: 1.05rem; }
.calc-aviso .titulo-3 { padding-right: 40px; margin-bottom: .5em; }
.calc-aviso ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--tinta-suave); }
.calc-aviso p { margin-bottom: 12px; }

/* ---------- cómo leerlo ---------- */
/* subgrid: icono, título y texto en la misma fila en las tres tarjetas aunque un título ocupe dos líneas */
.leer { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.leer .titulo-3 { text-wrap: balance; } /* «El crecimiento lo pones / tú» */
.leer__icono { width: 54px; height: 54px; border-radius: 16px; background: var(--teal-velo); display: grid; place-content: center; margin-bottom: 18px; }
.leer__icono svg { width: 28px; height: 28px; fill: none; stroke: var(--teal-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leer__icono--magenta { background: var(--magenta-velo); }
.leer__icono--magenta svg { stroke: var(--magenta); }
.leer p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
.calc-final { padding-top: 0; }
.calc-final .llamada p { text-wrap: pretty; }
.calc-final .llamada h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: .4em; }
/* ES: «Agenda una llamada gratis» casi dobla a «Book a free call». Los dos botones van uno sobre otro
   para que el titular no se parta en tres líneas, y en el móvil caben enteros en una sola */
body[data-lang="es"] .calc-final .llamada .botones { flex-direction: column; align-items: stretch; }

/* ---------- resumen fijo del móvil ---------- */
.calc-barra { display: none; }

@media (max-width: 1100px) {
  .calc-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-datos > div:nth-child(3) { border-left: 0; padding-left: clamp(20px, 2.4vw, 32px); }
  .calc-datos > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .calc-comparar__fila { grid-template-columns: 10.5rem minmax(0, 1fr) 4.8rem; }
  body[data-lang="es"] .calc-comparar__fila { grid-template-columns: 10.5rem minmax(0, 1fr) 6rem; }
}

@media (max-width: 960px) {
  /* la barra fija de abajo tapaba el campo que recibe el foco con el tabulador (el deslizador de la
     renta, el desplegable de gastos): el navegador desplaza contando con este margen */
  html { scroll-padding-bottom: 96px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__resultados { position: static; }
  .calc-abajo { grid-template-columns: minmax(0, 1fr); }
  .calc-barra {
    display: flex; align-items: center; gap: 14px;
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--teal-900); color: #fff; box-shadow: 0 -10px 30px rgba(4, 47, 55, .25);
    transform: translateY(110%); transition: transform .25s var(--ease);
  }
  .calc-barra.es-visible { transform: none; }
  .calc-barra__dato { display: grid; line-height: 1.15; }
  .calc-barra__dato span { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
  .calc-barra__dato strong { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .calc-barra.es-positivo .calc-barra__dato:first-child strong { color: var(--calc-pos-claro); }
  .calc-barra.es-negativo .calc-barra__dato:first-child strong { color: var(--calc-neg-claro); }
  .calc-barra__ir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--magenta); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
  .calc-barra__ir:hover { color: #fff; background: var(--magenta-700); }
}

@media (max-width: 640px) {
  .calc-portada .titulo-1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 2.6rem); }
  .calc-grupo { padding: 18px 16px 4px; }
  .calc-grupo--plegable { padding: 0; }
  .calc-grupo--plegable > summary { padding: 18px 56px 18px 16px; }
  .calc-grupo--plegable > summary::after { right: 16px; }
  .calc-grupo__total { flex-basis: calc(100% - 42px); margin-left: 42px; font-size: .86rem; }
  .calc-gastos { padding: 0 16px 18px; }
  .calc-entrada { width: 8.6rem; padding: 0 12px; }
  .calc-entrada--corta { width: 5.8rem; }
  .calc-campo__etiqueta { font-size: .92rem; }
  .calc-segmento > span { font-size: .92rem; min-height: 56px; }
  .calc-panel { border-radius: var(--radio); }
  .calc-panel__cab, .calc-grafico, .calc-panel__aviso { padding-left: 16px; padding-right: 16px; }
  .calc-datos > div, .calc-datos > div:first-child, .calc-datos > div:nth-child(3) { padding: 14px 12px 14px 16px; }
  .calc-datos dd > span { font-size: 1.12rem; }
  .calc-hito { font-size: .8rem; min-height: 44px; }
  /* la barra va en su propia fila: la cifra puede medir lo que necesite sin descuadrar nada */
  .calc-comparar__fila, body[data-lang="es"] .calc-comparar__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .calc-comparar__barra { grid-column: 1 / -1; grid-row: 2; }
  /* la tabla en el móvil: el nombre de cada fila arriba y las cuatro cifras debajo, sin scroll lateral */
  .calc-tabla, .calc-tabla thead, .calc-tabla tbody { display: block; }
  .calc-tabla tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); }
  .calc-tabla thead tr { border-bottom-width: 2px; }
  .calc-tabla tbody tr:last-child { border-bottom: 0; }
  .calc-tabla thead td { display: none; }
  .calc-tabla th, .calc-tabla td { border-bottom: 0; padding: 4px 2px 12px; text-align: center; font-size: .92rem; }
  .calc-tabla thead th { padding: 0 2px 10px; font-size: .66rem; letter-spacing: .05em; }
  .calc-tabla tbody th { grid-column: 1 / -1; padding: 12px 0 2px; text-align: left; font-size: .86rem; }
  .calc-tabla tbody th small { display: inline; margin-left: 6px; }
  .calc-tabla__destacada { background: var(--teal-velo); border-radius: 12px; border-bottom-color: transparent !important; }
  .calc-tabla__destacada > * { background: none; }
  .calc-tabla__destacada th { padding-left: 12px; border-radius: 0; }
  .calc-tabla__destacada td:last-child { border-radius: 0; }
  .calc-tabla-tarjeta { padding: 20px 16px; }
  /* «$520 mil» cuatro veces en 326 px (y en 296 a 360 de ancho) se tocaban: en español, cifra más pequeña */
  body[data-lang="es"] .calc-tabla td { font-size: .8rem; letter-spacing: -0.01em; }
}

/* 320-359 px (iPhone SE de primera generación, Android pequeños): «$1.725 mil» ×4 no cabía en su celda
   (73 px en 64) y los años se partían en «10 / años» */
@media (max-width: 359px) {
  .calc-tabla-tarjeta { padding-left: 10px; padding-right: 10px; }
  .calc-tabla td, .calc-tabla thead th { padding-left: 0; padding-right: 0; }
  body[data-lang="es"] .calc-tabla td { font-size: .7rem; letter-spacing: -0.02em; }
  .calc-hito { font-size: .74rem; padding: 0 2px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-comparar__llenado, .calc-barra, .calc-flujo__valor { transition: none; }
}