/**
 * Plantilla «Calculadora v1»: sólo el marco de la página.
 *
 * El bloque de la calculadora se viste solo en `calculadora-rango.css`, que es
 * la hoja que comparte con la ficha. Aquí está lo que es de la página y no del
 * bloque: el fondo, el ancho y el título.
 *
 * El reinicio va con `:where()` a propósito. La hoja del bloque llega antes que
 * ésta, así que un `.iat-tpl--calculadora-v1 * { padding: 0 }` con la misma
 * fuerza le ganaría por orden y le dejaría las celdas sin aire; con `:where()`
 * el reinicio pesa cero y sólo alcanza a lo que nadie ha vestido.
 *
 * @package InfoAsphaltTemplates
 */

.iat-tpl--calculadora-v1 {
	--bg-top: #4a005e;
	--bg-bottom: #2b0038;
	--text: #fff;

	box-sizing: border-box;
	margin: 0;
	padding: 2rem 0 3rem;
	background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
	color: var(--text);
	line-height: normal;
	text-align: left;
}

@media (max-width: 600px) {
	.iat-tpl--calculadora-v1 {
		padding-top: 2.75rem;
	}
}

.iat-tpl--calculadora-v1 :where(h1, h2, p, ul, ol, li) {
	margin: 0;
	padding: 0;
}

.iat-tpl--calculadora-v1 :where(ul, ol) {
	list-style: none;
}

/* La tipografía la pone el tema. Los controles de formulario no la heredan por
   sí solos, así que se les pide de forma explícita. */
.iat-tpl--calculadora-v1 :where(button, input) {
	font-family: inherit;
}

.iat-tpl--calculadora-v1 .iat-container {
	width: 100%;
	max-width: 1140px;
	min-width: 0;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* En blanco y dicho aquí: el título es un `h1` dentro del contenido, y el tema
   le pone su propio color con más fuerza que la que hereda del contenedor. */
.iat-tpl--calculadora-v1 .iat-tpl__titulo {
	color: var(--text);
	margin-bottom: 1.75rem;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
}