/* Ficha · herramienta (single-herramienta.php). Marco Figma 28:6831 (1440) y 28:7103 (390).
   Calculadora (Figma «Calculator v2», 39:1773): mismas reglas que la de home.css y
   pagina-pricing.css, copiadas aquí para no tocar esas hojas mientras otro agente trabaja en ellas
   (deuda: unificar las tres en una hoja compartida, docs/planes/PLANTILLAS-FICHAS.md). */
.ficha-herramienta { padding-top: 0; }
.ficha-cabecera + .ficha-herramienta { padding-top: var(--sp-48); }

.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.calc__entrada { display: grid; gap: var(--sp-32); min-width: 0; padding: var(--sp-24); border: 1px solid var(--arg-border); border-radius: var(--radius-lg); background: var(--arg-white); }
.calc__entrada h3 { font-size: var(--fs-28); }
.calc__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); }
.calc__fila label { font-weight: 600; font-size: var(--fs-18); line-height: 1.3; }
.calc__valor { font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-41); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc__deslizador { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-12); }
.calc__paso {
	display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
	border: 1.5px solid var(--arg-ink); background: var(--arg-white); color: var(--arg-ink); cursor: pointer;
}
.calc__paso svg { width: 20px; height: 20px; }
.calc__paso:hover { background: var(--arg-neutral-100); }
.calc__paso:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.calc input[type="range"]:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; border: 1px solid var(--arg-border-control); background: linear-gradient(to right, var(--arg-ink) 0 var(--relleno, 0%), var(--arg-neutral-200) var(--relleno, 0%)); }
.calc input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--arg-neutral-200); border: 1px solid var(--arg-border-control); }
.calc input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--arg-ink); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -17px; border-radius: 50%; background: var(--arg-lime); border: 2px solid var(--arg-ink); }
.calc input[type="range"]::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--arg-lime); border: 2px solid var(--arg-ink); }
.calc__porcentaje { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__porcentaje legend { padding: 0; font-weight: 600; font-size: var(--fs-18); line-height: 1.3; }
.segmentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sp-12); border: 1px solid var(--arg-border-control); border-radius: var(--radius-sm); overflow: hidden; }
.segmento { position: relative; }
.segmento input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmento span { display: grid; place-items: center; min-height: 52px; font-size: var(--fs-18); font-weight: 600; border-left: 1px solid var(--arg-border-control); }
.segmento:first-child span { border-left: 0; }
.segmento input:checked + span { background: var(--arg-ink); color: var(--arg-white); }
.segmento input:focus-visible + span { outline: 3px solid var(--arg-focus-ring); outline-offset: -3px; }
.calc__resultado { padding: var(--sp-32) var(--sp-24); border-radius: var(--radius-lg); background: var(--arg-surface-dark); color: var(--arg-white); }
.calc__etiqueta { color: var(--arg-lime); }
.calc__dinero, .calc__perdidas { margin-top: var(--sp-16); font-family: var(--arg-font-display); font-weight: 700; line-height: .95; letter-spacing: -0.036em; color: var(--arg-lime); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc__dinero { font-size: var(--fs-figure); }
.calc__perdidas { font-size: var(--fs-55); }
.calc__pie { margin-top: var(--sp-8); color: var(--arg-on-dark-weak); font-size: var(--fs-16); }
.calc__plan { margin-top: var(--sp-24); padding: var(--sp-16); border-radius: var(--radius-md); background: var(--arg-neutral-800); font-size: var(--fs-16); line-height: 1.4; }
.calc__nota { margin-top: var(--sp-24); color: var(--arg-on-dark-weak); font-size: var(--fs-16); line-height: 1.5; }
/* Desde 960 (no 1024): a 1000 px la calculadora apilada dejaba la mitad derecha vacía (Ola 2). */
@media (min-width: 960px) {
	.calc { grid-template-columns: minmax(0, 756fr) minmax(0, 460fr); gap: var(--sp-32); align-items: stretch; }
	.calc__entrada, .calc__resultado { padding: var(--sp-48); }
	.calc__valor { font-size: var(--fs-55); }
}
@media (prefers-reduced-motion: no-preference) {
	.calc__dinero, .calc__perdidas { transition: color .2s ease; }
}

/* Herramientas de /tools/ (componentes calculadora-perdidas.php y calculadora-coste.php): mismo
   lenguaje que la calculadora (caja blanca de controles, resultado en la tarjeta oscura), con
   campos numéricos y botones −/+ de 52 px. Sin marco en el Figma para la de coste. */
/* La caja de controles no reparte su altura entre filas cuando la tarjeta oscura es más alta. */
.herr__entrada { align-content: start; }
.herr__aviso-ejemplo { margin-top: calc(-1 * var(--sp-16)); color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.herr-campo { display: grid; gap: var(--sp-8); min-width: 0; }
.herr-campo__etiqueta { font-weight: 600; font-size: var(--fs-18); line-height: 1.3; }
.herr-campo__control { display: flex; align-items: center; gap: var(--sp-12); }
.herr-campo__numero {
	display: flex; align-items: center; flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--sp-16);
	border: 1px solid var(--arg-border-control); border-radius: var(--radius-sm); background: var(--arg-white);
}
.herr-campo__numero:focus-within { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.herr-campo__numero input {
	flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--arg-ink);
	font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-28); line-height: 1.2;
	font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.herr-campo__numero input:focus { outline: none; }
.herr-campo__numero input::-webkit-outer-spin-button,
.herr-campo__numero input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.herr-campo__extra { font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-20); color: var(--arg-text-weak); }
.herr-campo__extra:first-child { margin-right: var(--sp-4); }
.herr-campo__extra:last-child { margin-left: var(--sp-4); }
.herr-campo .herr-campo__rango { width: 100%; flex: none; }
.herr-campo__ayuda { color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.herr-campo__selector {
	min-height: 52px; padding: 0 var(--sp-16); border: 1px solid var(--arg-border-control); border-radius: var(--radius-sm);
	background: var(--arg-white); color: var(--arg-ink); font: inherit; font-size: var(--fs-18);
}
.herr-campo__selector:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.herr-casilla { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-8) var(--sp-12); align-items: start; }
.herr-casilla input { width: 28px; height: 28px; margin: 0; accent-color: var(--arg-ink); }
.herr-casilla input:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.herr-casilla label { font-weight: 600; font-size: var(--fs-18); line-height: 1.4; }
.herr-casilla .herr-campo__ayuda { grid-column: 2; }
.herr__ajustes { border-top: 1px solid var(--arg-border); padding-top: var(--sp-24); }
.herr__ajustes summary {
	display: flex; align-items: center; min-height: var(--target); cursor: pointer;
	font-weight: 600; font-size: var(--fs-18); text-decoration: underline; text-underline-offset: 4px;
}
.herr__ajustes summary:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.herr__ajustes[open] summary { margin-bottom: var(--sp-24); }
.herr__grupo { display: grid; gap: var(--sp-24); margin: 0; padding: 0; border: 0; min-width: 0; }
.herr__grupo + .herr__grupo { margin-top: var(--sp-32); padding-top: var(--sp-32); border-top: 1px solid var(--arg-border); }
.herr__grupo legend { padding: 0; margin-bottom: var(--sp-24); font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-20); }
.herr__entrada .herr-campo + .herr-campo { margin-top: 0; }

.herr__resultado { display: flex; flex-direction: column; gap: var(--sp-16); }
.herr__resultado > * { margin-top: 0; }
.herr__resultado .calc__dinero { margin-top: var(--sp-8); }
.herr__pre { font-size: .5em; letter-spacing: 0; vertical-align: .35em; }
.herr__linea { font-size: var(--fs-18); line-height: 1.4; }
.herr__linea strong { color: var(--arg-lime); }
.herr__cadena { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); font-size: var(--fs-16); color: var(--arg-on-dark-weak); }
.herr__cadena li { display: flex; align-items: baseline; gap: var(--sp-8); }
.herr__cadena li + li::before { content: "→"; color: var(--arg-lime); }
.herr__cadena strong { color: var(--arg-white); font-size: var(--fs-20); font-variant-numeric: tabular-nums; }
.herr__coste { display: grid; gap: var(--sp-8); margin-top: 0; }
.herr__coste strong { color: var(--arg-lime); }
.herr__pequeno { font-size: var(--fs-16); color: var(--arg-on-dark-weak); line-height: 1.45; }
.herr__equilibrio { font-weight: 600; }
.herr__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-24); }
.herr__enlace { display: inline-flex; align-items: center; min-height: var(--target); color: var(--arg-white); font-weight: 600; text-underline-offset: 4px; }
.herr__enlace:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.herr__tarjetas { display: grid; gap: var(--sp-12); }
.herr-tarjeta { padding: var(--sp-16) var(--sp-24); border-radius: var(--radius-md); background: var(--arg-neutral-800); }
.herr-tarjeta--nuestro { background: var(--arg-lime); color: var(--arg-ink); }
.herr-tarjeta__titulo { color: var(--arg-on-dark-weak); }
.herr-tarjeta--nuestro .herr-tarjeta__titulo { color: var(--arg-ink); }
.herr-tarjeta__mes { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); }
.herr-tarjeta__mes strong {
	font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-41); line-height: 1;
	letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.herr-tarjeta__otros { margin-top: var(--sp-8); font-size: var(--fs-16); line-height: 1.45; color: var(--arg-on-dark-weak); }
.herr-tarjeta--nuestro .herr-tarjeta__otros { color: var(--arg-ink); }
.herr__diferencia { font-size: var(--fs-16); font-weight: 600; line-height: 1.45; }
.herr__diferencia:empty, .herr__pequeno:empty { display: none; }

/* Auditoría: la solicitud (texto y, cuando exista, el formulario de WPForms a la par). Sin
   formulario, el texto va a una columna de lectura: no queda media fila vacía. */
.ficha-solicitud__caja { display: grid; gap: var(--sp-32); }
.ficha-solicitud__texto { max-width: var(--measure); }
.ficha-solicitud__texto > * + * { margin-top: var(--sp-16); }
.ficha-solicitud__texto h2 { scroll-margin-top: 96px; }
.ficha-solicitud__caja--sin-form { padding: var(--sp-32) var(--sp-24); border: 1px solid var(--arg-border); border-radius: var(--radius-lg); background: var(--arg-white); max-width: calc(var(--measure) + 2 * var(--sp-48)); }
@media (min-width: 1024px) {
	.ficha-solicitud__caja:not(.ficha-solicitud__caja--sin-form) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
	.ficha-solicitud__caja--sin-form { padding: var(--sp-48); margin-inline: auto; }
	.herr-tarjeta__mes strong { font-size: var(--fs-55); }
}

/* ---------- Ola 3 · una cifra que cambia da un pequeño salto (herramientas.js, .herr-cambia) ---------- */
:is(span, strong)[data-salida] { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	.herr-cambia { animation: herr-cambia .35s ease-out; }
}
@keyframes herr-cambia { 0% { transform: translateY(-3px) scale(1.06); opacity: .55; } 100% { transform: none; opacity: 1; } }

/* ---------- Ola 3 · auditoría de diseño de las calculadoras (docs/AUDITORIA-DISENO-CALCULADORAS.md) ---------- */
/* n.º 1-3: cada caja mide lo que su contenido (sin huecos) y el resultado acompaña al scroll en escritorio,
   bajo la cabecera fija (72 px + 24). Si la tarjeta es más alta que la ventana (la de coste, ~990 px), se
   pega más arriba para que su final quede a la vista: top = mín(96 px, alto de ventana − alto de la tarjeta
   − 24). El alto lo pone herramientas.js en --alto-resultado; sin JS la variable no existe, la declaración
   no vale y la tarjeta se queda en su sitio. */
@media (min-width: 960px) {
	.calc.herr { align-items: start; }
	.calc.herr .herr__resultado { position: sticky; top: min(var(--sp-96), calc(100vh - var(--alto-resultado) - var(--sp-24))); }
}
/* n.º 1 en una columna: la cifra en una barra pegada abajo mientras se mueven los controles. */
.herr__barra {
	position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: var(--sp-4) var(--sp-12); margin: 0; padding: var(--sp-12) var(--sp-16);
	border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--arg-surface-dark); color: var(--arg-white);
	box-shadow: 0 -6px 18px rgba(21, 26, 23, .18);
}
.herr__barra-etiqueta { font-family: var(--arg-font-mono); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--arg-on-dark-weak); }
.herr__barra-cifra { font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-20); color: var(--arg-lime); font-variant-numeric: tabular-nums; }
.herr__barra[hidden] { display: none; }
@media (min-width: 960px) { .herr__barra { display: none; } }
/* n.º 4: la tarjeta del servicio con el que se compara dice que son valores de ejemplo hasta que se tocan. */
.herr-tarjeta__ejemplo {
	display: inline-block; margin-left: var(--sp-8); padding: 2px var(--sp-8); border: 1px solid var(--arg-on-dark-weak);
	border-radius: var(--radius-pill); color: var(--arg-on-dark-weak); font-size: var(--fs-12);
}
.herr-tarjeta__ejemplo[hidden] { display: none; }
/* n.º 5: lo que convence, al tamaño del cuerpo de la ficha (lo auxiliar se queda en 16). */
.herr__diferencia, .calc.herr .calc__plan { font-size: var(--fs-18); }
.calc.herr .calc__plan .herr__pequeno { font-size: var(--fs-16); }
/* n.º 6: las tres tarjetas con la misma forma: la cifra y «a month» debajo. */
.herr-tarjeta__mes { display: grid; gap: var(--sp-4); }
/* n.º 7: el plan en su propia línea bajo la marca. */
.herr-tarjeta__titulo .herr-tarjeta__plan { display: block; }
/* n.º 9: anillo de foco visible sobre la tarjeta oscura. */
.herr__enlace:focus-visible { outline-color: var(--arg-lime); }
/* n.º 10: la casilla y su etiqueta, objetivo táctil de 44 px. */
.herr-casilla input { align-self: center; }
.herr-casilla label { display: flex; align-items: center; min-height: var(--target); }
/* n.º 11: «About» en su propia línea (no se queda suelto a 1000 px), como el rótulo de las tarjetas. */
.herr__pre { display: block; margin-bottom: var(--sp-4); font-size: var(--fs-20); line-height: 1.2; letter-spacing: 0; vertical-align: baseline; }