.ove-calc{
	--ove-accent: var(--e-global-color-primary, #C42F01);
	--ove-marino: var(--e-global-color-secondary, #343F5A);
	--ove-texto:  var(--e-global-color-text, #5B6478);
	--ove-tinta:  var(--e-global-color-accent, #1E2433);
	--ove-borde:  var(--e-global-color-371b8c4d, #E2E0DA);
	--ove-tinte:  var(--e-global-color-7a0e142d, #FFF3E8);
	--ove-dato:   var(--e-global-color-f243a905, #3B63D0);
	font-family: inherit;
	color: var(--ove-texto);
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
}
.ove-calc__titulo{
	color: var(--ove-tinta);
	font-size: clamp(1.625rem, 1.44rem + 0.762vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 600;
	margin: 0 0 32px;
	text-align: center;
}
.ove-calc__caja{
	background: var(--ove-tinte);
	border: 1px solid var(--ove-borde);
	border-radius: 20px;
	padding: 32px;
	display: grid;
	gap: 32px;
}
@media (min-width: 720px){ .ove-calc__caja{ grid-template-columns: 1fr 1fr; align-items: center; } }
/* Los hijos de la rejilla heredan min-width:auto y no dejan encoger la pista.
   En contenedores estrechos (la home deja 228 px por los paddings anidados)
   eso desbordaba la calculadora. Comprobado en navegador a 390 px el 24/08/2026. */
.ove-calc__caja > *{ min-width: 0; }
.ove-calc, .ove-calc *{ max-width: 100%; box-sizing: border-box; }
/* hidden tiene que ganar a display:inline-flex del selector de pago (QA M12, 09/11/2026). */
.ove-calc [hidden]{ display: none !important; }
.ove-calc__detalle, .ove-calc__plan, .ove-calc__ahorro{ overflow-wrap: anywhere; }
.ove-calc__label{
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ove-marino);
	margin-bottom: 12px;
}
.ove-calc__controles{ display: flex; align-items: center; gap: 16px; }
.ove-calc__num{
	width: 96px;
	min-height: 44px;
	padding: 12px;
	font: inherit;
	font-size: 20px;
	font-weight: 600;
	color: var(--ove-tinta);
	background: var(--e-global-color-3ba10e7c, #fff);
	border: 1px solid var(--ove-texto);
	border-radius: 10px;
	text-align: center;
}
.ove-calc__rango{ flex: 1; accent-color: var(--ove-accent); min-width: 0; min-height: 44px; }
.ove-calc__num:focus-visible,
.ove-calc__rango:focus-visible,
.ove-calc__cta:focus-visible{
	outline: 3px solid var(--ove-dato);
	outline-offset: 2px;
}
.ove-calc__nota,
.ove-calc__incluye,
.ove-calc__iva{ font-size: 15px; line-height: 1.55; margin: 12px 0 0; }
.ove-calc__plan{
	font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--ove-marino); margin: 0 0 8px;
}
.ove-calc__precio{ margin: 0; color: var(--ove-tinta); }
.ove-calc__cifra{
	font-size: clamp(2.125rem, 1.8rem + 1.333vw, 3rem);
	line-height: 1; letter-spacing: -0.03em; font-weight: 700;
}
.ove-calc__periodo{ font-size: 17px; font-weight: 400; color: var(--ove-texto); }
.ove-calc__detalle{ margin: 12px 0 0; font-size: 17px; line-height: 1.65; }
.ove-calc__ahorro{ margin: 8px 0 0; font-size: 15px; color: var(--ove-marino); font-weight: 600; }
.ove-calc__pie{ text-align: center; margin: 32px 0 0; }
.ove-calc__cta{
	display: inline-block;
	background: var(--ove-accent);
	color: var(--e-global-color-3ba10e7c, #fff);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	padding: 16px 32px;
	border-radius: 999px;
}
.ove-calc__cta:hover{ background: var(--ove-marino); color: var(--e-global-color-3ba10e7c, #fff); }
.ove-calc__grande{ text-align: center; margin: 16px 0 0; font-size: 15px; }

/* Movil: el campo y el deslizador dejan de pelear por la misma fila,
   y se recortan los paddings que en 390px dejaban 164px utiles. */
@media (max-width: 719px){
	.ove-calc{ padding: 0; }
	.ove-calc__caja{ padding: 20px; gap: 24px; border-radius: 16px; }
	.ove-calc__controles{ flex-wrap: wrap; gap: 12px; }
	.ove-calc__num{ width: 100%; flex: 0 0 auto; }
	.ove-calc__rango{ flex: 1 0 100%; width: 100%; }
	.ove-calc__titulo{ margin-bottom: 24px; }
	.ove-calc__pie{ margin-top: 24px; }
}

/* Selector de forma de pago. Se sirve oculto y lo enciende el JS:
   sin JavaScript no aparece un boton que no haria nada. */
.ove-calc__modo{ display:inline-flex; background:var(--e-global-color-3ba10e7c, #fff); border:1px solid var(--ove-borde); border-radius:999px; padding:3px; gap:3px; margin:0 0 10px; }
.ove-calc__modo-btn{ font:inherit; font-size:13px; font-weight:600; border:0; background:none; color:var(--ove-texto); padding:8px 14px; border-radius:999px; cursor:pointer; min-height:36px; }
.ove-calc__modo-btn.is-activo{ background:var(--ove-marino); color:var(--e-global-color-3ba10e7c, #fff); }
.ove-calc__modo-btn:disabled{ opacity:.4; cursor:not-allowed; }
.ove-calc__modo-btn:focus-visible{ outline:3px solid var(--ove-dato); outline-offset:2px; }
.ove-calc__modo-nota{ font-size:13px; line-height:1.45; color:var(--ove-marino); margin:0 0 10px; }

/* Desglose escalon a escalon. Con tarifa marginal esto no es un adorno:
   es el argumento. Ensena que cada trabajador paga la tarifa de SU escalon. */
.ove-calc__desglose{ margin: 24px 0 0; }
.ove-calc__desglose-titulo{
	font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--ove-marino); margin: 0 0 10px;
}
.ove-calc__lineas{ list-style: none; margin: 0; padding: 0; }
.ove-calc__lineas li{
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 9px 0; border-bottom: 1px solid var(--ove-borde);
	font-size: 15px; line-height: 1.45;
}
.ove-calc__lin-txt{ color: var(--ove-texto); }
.ove-calc__lin-txt strong{ color: var(--ove-tinta); font-weight: 600; }
.ove-calc__lin-imp{ color: var(--ove-tinta); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ove-calc__suma{
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	margin: 12px 0 0; padding-top: 10px; border-top: 2px solid var(--ove-tinta);
	font-size: 17px; font-weight: 700; color: var(--ove-tinta);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 719px){
	.ove-calc__lineas li{ font-size: 14px; gap: 10px; }
}
/* ===== Disposicion «banda» (heroes de precios, 09/11/2026) ===== */
.ove-calc--banda{ max-width: none; margin: 0; padding: 0; }
.ove-calc--banda .ove-calc__titulo{ text-align: left; margin: 0 0 16px; }
.ove-calc--banda .ove-calc__banda{
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center;
	background: var(--ove-tinte); border: 1px solid var(--ove-borde); border-radius: 20px; padding: 20px;
}
.ove-calc--banda .ove-calc__banda > *{ min-width: 0; }
.ove-calc--banda .ove-calc__label{ margin-bottom: 8px; }
.ove-calc--banda .ove-calc__controles{ display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
.ove-calc--banda input.ove-calc__num{
	display: inline-block; flex: 0 0 96px; width: 96px; margin: 0; min-height: 44px; padding: 8px 10px;
	font-size: 20px; border: 1px solid var(--ove-texto); border-radius: 10px; background: var(--e-global-color-3ba10e7c, #fff);
	font-variant-numeric: tabular-nums;
}
.ove-calc--banda .ove-calc__rango{ flex: 1 1 auto; width: auto; min-width: 0; }
.ove-calc--banda .ove-calc__modo{ margin: 12px 0 0; }
.ove-calc--banda .ove-calc__modo-nota{ margin: 8px 0 0; }
.ove-calc--banda .ove-calc__salida .ove-calc__plan{ margin: 0 0 6px; }
.ove-calc--banda .ove-calc__precio{ white-space: nowrap; }
.ove-calc--banda .ove-calc__cifra{ font-size: var(--e-global-typography-faa18d76-font-size, clamp(2.125rem, 1.8rem + 1.333vw, 3rem)); font-variant-numeric: tabular-nums; }
.ove-calc--banda .ove-calc__periodo{ font-size: 15px; }
.ove-calc--banda .ove-calc__detalle{ margin: 8px 0 0; font-size: 15px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.ove-calc--banda .ove-calc__ahorro:empty{ display: none; }
.ove-calc--banda .ove-calc__grande{ text-align: left; margin: 0; }
.ove-calc--banda .ove-calc__pie{ margin: 0; text-align: left; }
.ove-calc--banda .ove-calc__cta{ display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; white-space: nowrap; }
.ove-calc--banda .ove-calc__nota{ margin: 16px 0 0; }
.ove-calc--banda .ove-calc__desglose{ max-width: 720px; }
@media (min-width: 1025px){
	.ove-calc--banda .ove-calc__banda{ grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) auto; gap: 24px; padding: 24px 32px; }
	.ove-calc--banda .ove-calc__cta{ display: inline-flex; }
}