/**
 * Uindou Calculadoras · frontal (Figma «Uindou V2», componente «Calculadora»).
 */

.ucal {
	--ucal-negro: #0e0e0e;
	--ucal-gris: #8a8a8a;
	--ucal-suave: #555555;
	--ucal-borde: #e0e0e0;
	--ucal-fondo: #f4f4f4;
	--ucal-blanco: #ffffff;
	--ucal-acento: #4289e5;
	--ucal-pad: 50px;
	--ucal-gap: 30px;

	font-family: "Inter Tight", var(--e-global-typography-text-font-family, sans-serif), sans-serif;
	color: var(--ucal-negro);
	max-width: 820px;
	width: 100%;
}

.ucal *,
.ucal *::before,
.ucal *::after {
	box-sizing: border-box;
}

.ucal [hidden] {
	display: none !important;
}

/* Reseteos frente al tema y Elementor */
.ucal button,
.ucal input,
.ucal select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	text-shadow: none;
}

.ucal button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: inherit;
	min-height: 0;
}

.ucal button:hover,
.ucal button:focus {
	background: none;
	color: inherit;
}

.ucal fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ucal p,
.ucal h3,
.ucal h4 {
	margin: 0;
	padding: 0;
}

.ucal :focus-visible {
	outline: 2px solid var(--ucal-acento);
	outline-offset: 2px;
}

/* Tarjeta */
.ucal-card {
	background: var(--ucal-fondo);
	padding: var(--ucal-pad);
	display: flex;
	flex-direction: column;
	gap: var(--ucal-gap);
	margin: 0;
}

.ucal-paso {
	display: flex;
	flex-direction: column;
	gap: var(--ucal-gap);
}

/* Progreso */
.ucal-progreso {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ucal-progreso__fila {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 20px;
}

.ucal-kicker,
.ucal .ucal-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ucal-gris);
}

.ucal-barra {
	display: flex;
	gap: 5px;
}

.ucal-barra__seg {
	flex: 1;
	height: 3px;
	background: var(--ucal-borde);
	transition: background-color 0.25s;
}

.ucal-barra__seg.is-on {
	background: var(--ucal-negro);
}

/* Títulos y textos */
.ucal .ucal-titulo {
	font-family: inherit;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ucal-negro);
}

.ucal .ucal-titulo:focus {
	outline: none;
}

.ucal .ucal-nota {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ucal-suave);
}

/* Paso 1 · Marcas */
.ucal-marcas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.ucal .ucal-marca {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 30px;
	background: var(--ucal-blanco);
	border: 1px solid var(--ucal-borde);
	text-align: left;
	transition: border-color 0.2s;
}

.ucal .ucal-marca:hover,
.ucal .ucal-marca:focus-visible {
	background: var(--ucal-blanco);
	border-color: var(--ucal-negro);
}

.ucal-marca__logo {
	display: block;
	height: 50px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.ucal-marca__texto {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ucal-marca__nombre {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ucal-marca__desc {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ucal-gris);
}

.ucal-marca__ir {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--ucal-borde);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

.ucal-flecha {
	display: inline-block;
	transition: transform 0.2s;
}

.ucal .ucal-marca:hover .ucal-flecha,
.ucal .ucal-boton:hover .ucal-flecha {
	transform: translateX(4px);
}

/* Campos */
.ucal-campo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

fieldset.ucal-campo {
	gap: 0;
}

fieldset.ucal-campo > legend {
	margin-bottom: 15px;
	padding: 0;
	float: left;
	width: 100%;
}

fieldset.ucal-campo > legend + * {
	clear: both;
}

.ucal-grupo {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ucal-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.ucal-fila--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ucal-caja {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	background: var(--ucal-blanco);
	border: 1px solid var(--ucal-borde);
	transition: border-color 0.2s;
}

.ucal-caja--gris {
	background: var(--ucal-fondo);
}

.ucal-caja:focus-within {
	border-color: var(--ucal-negro);
}

.ucal .ucal-caja .ucal-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: auto;
	padding: 20px 0;
	background: transparent;
	border: 0;
	outline: none;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ucal-negro);
}

.ucal .ucal-input::placeholder {
	color: var(--ucal-gris);
	opacity: 1;
}

.ucal-unidad {
	flex: none;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ucal-suave);
}

/* Desplegables */
.ucal-caja--select::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.5px solid var(--ucal-negro);
	border-bottom: 1.5px solid var(--ucal-negro);
	transform: rotate(45deg);
	pointer-events: none;
}

.ucal .ucal-caja--select select.ucal-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 30px;
	cursor: pointer;
	font-size: 17px;
	line-height: 1.6;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Chips (calefacción) */
.ucal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ucal-chip,
.ucal-pestana,
.ucal-opcion {
	position: relative;
	cursor: pointer;
	margin: 0;
}

.ucal-chip input,
.ucal-pestana input,
.ucal-opcion input,
.ucal-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ucal-chip span {
	display: block;
	padding: 12px 20px;
	font-size: 14px;
	line-height: 1.4;
	background: var(--ucal-blanco);
	border: 1px solid var(--ucal-borde);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ucal-chip:hover span {
	border-color: var(--ucal-negro);
}

.ucal-chip input:checked + span {
	background: var(--ucal-negro);
	border-color: var(--ucal-negro);
	color: var(--ucal-blanco);
}

.ucal-chip input:focus-visible + span,
.ucal-pestana input:focus-visible + span,
.ucal-opcion input:focus-visible + .ucal-opcion__caja,
.ucal-check input:focus-visible + .ucal-check__caja {
	outline: 2px solid var(--ucal-acento);
	outline-offset: 2px;
}

/* Pestañas (superficie) */
.ucal-pestanas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ucal-blanco);
	border: 1px solid var(--ucal-borde);
}

.ucal-pestana span {
	display: block;
	padding: 15px 20px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: var(--ucal-suave);
	transition: background-color 0.2s, color 0.2s;
}

.ucal-pestana input:checked + span {
	background: var(--ucal-negro);
	color: var(--ucal-blanco);
}

/* Opciones (tarjetas con radio) */
.ucal-opciones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.ucal-opcion__caja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding: 20px;
	background: var(--ucal-blanco);
	border: 1px solid var(--ucal-borde);
	transition: background-color 0.2s, border-color 0.2s;
}

.ucal-opcion:hover .ucal-opcion__caja {
	border-color: var(--ucal-negro);
}

.ucal-opcion__texto {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ucal-opcion__titulo {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color 0.2s;
}

.ucal-opcion__desc {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ucal-gris);
}

.ucal-radio {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--ucal-borde);
	background: var(--ucal-blanco);
}

.ucal-opcion input:checked + .ucal-opcion__caja {
	background: var(--ucal-negro);
	border-color: var(--ucal-negro);
}

.ucal-opcion input:checked + .ucal-opcion__caja .ucal-opcion__titulo {
	color: var(--ucal-blanco);
}

.ucal-opcion input:checked + .ucal-opcion__caja .ucal-radio {
	border: 6px solid var(--ucal-blanco);
	background: var(--ucal-negro);
}

/* Bloques de medidas (Cortizo) */
.ucal-medidas {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ucal-bloque {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 25px;
	background: var(--ucal-blanco);
	border: 1px solid var(--ucal-borde);
}

.ucal-bloque__cab {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.ucal-bloque__titulo {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ucal-bloque__resumen,
.ucal .ucal-quitar {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ucal-suave);
}

.ucal .ucal-quitar:hover {
	color: var(--ucal-negro);
	text-decoration: underline;
}

/* Botones */
.ucal .ucal-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 30px;
	background: var(--ucal-negro);
	border: 1px solid var(--ucal-negro);
	color: var(--ucal-blanco);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.ucal .ucal-boton:hover,
.ucal .ucal-boton:focus {
	background: var(--ucal-negro);
	color: var(--ucal-blanco);
	opacity: 0.85;
}

.ucal .ucal-boton[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ucal .ucal-boton--borde,
.ucal .ucal-boton--borde:hover,
.ucal .ucal-boton--borde:focus {
	background: transparent;
	color: var(--ucal-negro);
}

.ucal .ucal-enlace {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ucal-negro);
}

.ucal .ucal-enlace:hover {
	text-decoration: underline;
}

.ucal-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.ucal .ucal-error {
	margin: 0;
	padding: 14px 20px;
	background: #fdecec;
	border-left: 3px solid #c62828;
	color: #8e1c1c;
	font-size: 14px;
	line-height: 1.4;
}

/* Resultado */
.ucal-ahorro {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ucal .ucal-ahorro__intro {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ucal-suave);
}

.ucal .ucal-ahorro__cifra {
	font-size: 96px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ucal-acento);
}

.ucal .ucal-ahorro__texto {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ucal-datos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--ucal-borde);
	border-bottom: 1px solid var(--ucal-borde);
}

.ucal-datos[data-n="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.ucal-datos[data-n="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.ucal-dato {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 20px;
	border-right: 1px solid var(--ucal-borde);
}

.ucal-dato:first-child {
	padding-left: 0;
}

.ucal-dato:last-child {
	border-right: 0;
}

.ucal-dato__valor {
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.ucal-dato__texto {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ucal-suave);
}

/* Formulario de presupuesto */
.ucal-form,
.ucal-gracias {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 40px;
	background: var(--ucal-blanco);
}

.ucal-gracias {
	gap: 10px;
}

.ucal-form__cab {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ucal .ucal-form__titulo {
	font-family: inherit;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ucal-negro);
}

.ucal .ucal-form__texto {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ucal-suave);
}

.ucal-form__campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.ucal-linea {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--ucal-borde);
	transition: border-color 0.2s;
}

.ucal-linea:focus-within {
	border-color: var(--ucal-negro);
}

.ucal-linea--ancha {
	grid-column: 1 / -1;
}

.ucal .ucal-linea .ucal-input {
	width: 100%;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	outline: none;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ucal-negro);
}

.ucal-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ucal-form__envio {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.ucal-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	cursor: pointer;
	margin: 0;
}

.ucal-check__caja {
	flex: none;
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid var(--ucal-gris);
	background: var(--ucal-blanco);
}

.ucal-check input:checked + .ucal-check__caja {
	background: var(--ucal-negro);
	border-color: var(--ucal-negro);
}

.ucal-check input:checked + .ucal-check__caja::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--ucal-blanco);
	border-bottom: 2px solid var(--ucal-blanco);
	transform: rotate(45deg);
}

.ucal-check__texto {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ucal-suave);
}

.ucal-check__texto a {
	color: inherit;
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
	.ucal {
		--ucal-pad: 24px;
		--ucal-gap: 24px;
	}

	.ucal .ucal-titulo {
		font-size: 26px;
	}

	.ucal-marcas,
	.ucal-opciones,
	.ucal-fila,
	.ucal-form__campos {
		grid-template-columns: 1fr;
	}

	/* Medidas: ancho y alto juntos, unidades debajo */
	.ucal-fila--3 {
		grid-template-columns: 1fr 1fr;
	}

	.ucal-fila--3 > :last-child {
		grid-column: 1 / -1;
	}

	.ucal-marca {
		padding: 24px;
		gap: 20px;
	}

	.ucal .ucal-ahorro__cifra {
		font-size: 64px;
	}

	.ucal-datos,
	.ucal-datos[data-n="3"],
	.ucal-datos[data-n="2"] {
		grid-template-columns: 1fr 1fr;
	}

	.ucal-dato,
	.ucal-dato:first-child {
		padding: 20px 15px 20px 0;
		border-right: 0;
		border-bottom: 1px solid var(--ucal-borde);
	}

	.ucal-dato:nth-child(even) {
		padding-left: 15px;
		border-left: 1px solid var(--ucal-borde);
	}

	.ucal-dato:nth-last-child(-n+2):nth-child(odd),
	.ucal-dato:last-child {
		border-bottom: 0;
	}

	.ucal-dato__valor {
		font-size: 24px;
	}

	.ucal-form,
	.ucal-gracias {
		padding: 24px;
	}

	.ucal .ucal-form__titulo {
		font-size: 24px;
	}

	.ucal-form__envio .ucal-boton {
		width: 100%;
	}

	.ucal-bloque {
		padding: 20px;
	}

	.ucal-caja {
		padding: 0 16px;
	}

	.ucal .ucal-caja .ucal-input {
		padding: 16px 0;
		font-size: 18px;
	}
}