/******************************
*	Tipografía
******************************/
@font-face {
	font-family: 'Invention';
	src: url('../fonts/tipo/Invention-Light.ttf');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Invention';
	src: url('../fonts/tipo/Invention-Regular.ttf');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Invention';
	src: url('../fonts/tipo/Invention-Bold.ttf');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/******************************
*	Variables
******************************/
:root {
	/* Colores base */
	--teal-900: #003e3a;
	--teal-700: #005c55;
	--teal-500: #00857c;
	/* Paleta de la tabla de mantenimiento (se conserva del diseño) */
	--menta: #5cc8a6;
	--menta-osc: #23946f;
	--menta-cl: #8fd8c2;
	--menta-fig: #bfe6dc;
	--azul: #0c2340;
	--fondo: #f2f2f2;
	--fondo-head: #f7f7f7;
	--gris: #cdcdcd;
	--gris-txt: #6b6b6b;
	--gris-unidad: #555555;
	--gris-campo: #dcdcdc;
	--gris-borde: #e1e1e1;
	--gris-barra: #d9d9d9;
	--fondo-modal: #f4f4f4;
	--overlay: rgba(12, 35, 64, .78);
	--error: #a4262c;
	--blanco: #ffffff;
}

/******************************
*	Reset
******************************/
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
html, body {
	background: var(--fondo);
}
body {
	font-family: 'Invention', Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.35;
	color: var(--azul);
	-webkit-font-smoothing: antialiased;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
strong, b {
	font-weight: 700;
}
button, input {
	font: inherit;
	color: inherit;
}

/******************************
*	Layout
******************************/
.wrapper {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 20px 36px 0;
	overflow: hidden;
}

/* Encabezado */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	background: var(--fondo-head);
	padding: 22px 26px;
}
.header__logo img {
	width: 180px;
}
.header__title {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 300;
	color: var(--azul);
	text-align: right;
}
.header__title strong {
	font-weight: 700;
}

/* Calculadora */
.calc {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	padding: 70px 6% 0 5%;
}
.calc__peso {
	width: 36%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.calc__res {
	width: 53%;
	padding-top: 14px;
}

/******************************
*	Figura + slider
******************************/
.figura {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: 720px;
	display: flex;
	align-items: stretch;
}
.figura__svg {
	width: 55%;
	height: 100%;
}
.figura__vacio {
	fill: var(--menta-fig);
}
.figura__lleno {
	fill: var(--teal-500);
	transition: transform .15s ease-out;
}
.figura.is-drag .figura__lleno {
	transition: none;
}

.escala {
	position: absolute;
	top: 6%;
	bottom: 6%;
	left: 58%;
	width: 42%;
	cursor: pointer;
	touch-action: pan-y; /* deja hacer scroll a la página; el arrastre táctil es solo desde el marcador */
	user-select: none;
	-webkit-user-select: none;
}
.escala__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--gris);
}
.escala__lim {
	position: absolute;
	left: 14px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--gris-txt);
}
.escala__lim small {
	font-size: 14px;
	font-weight: 400;
}
.escala__lim--max { top: 0; }
.escala__lim--min { bottom: 0; }

.marcador {
	position: absolute;
	top: 50%;
	left: -8px;
	display: flex;
	align-items: baseline;
	gap: 4px;
	height: 56px;
	padding: 0 12px 0 20px;
	line-height: 56px;
	background: var(--teal-500);
	color: var(--blanco);
	font-size: 42px;
	font-weight: 700;
	white-space: nowrap;
	transform: translateY(-50%);
	cursor: grab;
	transition: top .15s ease-out;
	touch-action: none;
}
.figura.is-drag .marcador {
	transition: none;
	cursor: grabbing;
}
.marcador::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 0;
	border-style: solid;
	border-width: 28px 20px 28px 0;
	border-color: transparent var(--teal-500) transparent transparent;
}
.marcador small {
	font-size: 20px;
	font-weight: 400;
}
.marcador:focus {
	outline: none;
}
.marcador:focus-visible {
	outline: 3px solid var(--azul);
	outline-offset: 2px;
}

/* Captura de peso */
.captura {
	display: flex;
	gap: 22px;
	margin-top: 20px;
}
.captura__campo {
	display: flex;
	align-items: stretch;
	height: 56px;
	background: var(--gris-campo);
	box-shadow: 0 0 0 1px var(--gris-borde);
	cursor: text;
}
.captura__campo input {
	width: 88px;
	background: var(--blanco);
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	color: var(--azul);
	-moz-appearance: textfield;
	appearance: textfield;
}
.captura__campo input::-webkit-outer-spin-button,
.captura__campo input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.captura__campo input:focus {
	outline: 2px solid var(--teal-500);
	outline-offset: -2px;
}
.captura__campo span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	font-size: 20px;
	color: var(--gris-unidad);
}
.captura__aviso {
	max-width: 360px;
	margin-top: 12px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--error);
}
.captura__aviso:empty {
	display: none;
}
.captura__campo input[aria-invalid="true"] {
	outline: 2px solid var(--error);
	outline-offset: -2px;
}
.captura__txt {
	margin-top: 16px;
	font-size: 22px;
	font-weight: 300;
}

/******************************
*	Bloques de dosis
******************************/
.dosis + .dosis {
	margin-top: 34px;
}
.dosis__titulo {
	background: var(--blanco);
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	padding: 12px 10px 10px;
}
.dosis__head,
.dosis__formula {
	text-align: center;
	font-size: 24px;
	font-weight: 300;
	padding: 12px 16px;
}
.dosis__formula {
	margin-top: 4px;
	padding: 8px 16px;
	font-size: 22px;
}
.dosis__formula b {
	margin: 0 8px;
	font-size: 110%;
}
.dosis__fila {
	display: flex;
	margin-top: 4px;
}
.dosis__fila + .dosis__fila {
	margin-top: 3px;
}
.dosis__valor {
	flex: 0 0 27%;
	min-width: 0;
	white-space: nowrap;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	background: var(--blanco);
	padding: 8px 10px;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--teal-500);
}
.dosis__valor--largo span {
	font-size: 80%;
}
.dosis__valor small {
	min-width: 32px;
	font-size: 22px;
	font-weight: 300;
	color: var(--azul);
}
.dosis__desc {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 8px 20px 8px 7%;
	font-size: 23px;
	font-weight: 300;
}

/* Inicio */
.dosis--inicio .dosis__titulo { color: var(--teal-700); }
.dosis--inicio .dosis__head,
.dosis--inicio .dosis__formula {
	background: var(--teal-700);
	color: var(--blanco);
}
.dosis--inicio .dosis__desc {
	background: var(--teal-500);
	color: var(--blanco);
}

/* Mantenimiento */
.dosis--mant .dosis__titulo { color: var(--menta-osc); }
.dosis--mant .dosis__head,
.dosis--mant .dosis__formula {
	background: var(--menta);
	color: var(--azul);
}
.dosis--mant .dosis__desc {
	background: var(--menta-cl);
	color: var(--azul);
}

.nota {
	margin-top: 26px;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
	text-align: justify;
}

/******************************
*	Botón
******************************/
.cta {
	display: flex;
	justify-content: center;
	padding: 60px 0 50px;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 26px;
	background: var(--teal-900);
	color: var(--blanco);
	font-size: 23px;
	font-weight: 700;
	padding: 18px 44px;
	cursor: pointer;
	transition: background .25s ease;
}
.btn:hover,
.btn:focus-visible {
	background: var(--teal-700);
}
.btn:focus-visible {
	outline: 3px solid var(--teal-500);
	outline-offset: 3px;
}
.btn__icon {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
}

/* Barra inferior */
.barra {
	display: flex;
	height: 12px;
	margin: 0 -36px;
}
.barra span:nth-child(1) { flex: 0 0 57.8%; background: var(--teal-700); }
.barra span:nth-child(2) { flex: 0 0 22.2%; background: var(--azul); }
.barra span:nth-child(3) { flex: 0 0 13.3%; background: var(--menta); }
.barra span:nth-child(4) { flex: 1; background: var(--gris-barra); }

/******************************
*	Modal
******************************/
.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-start; /* arriba: dentro del iframe de pym el "viewport" es todo el contenido */
	justify-content: center;
	padding: 20px;
	background: var(--overlay);
	opacity: 0;
	transition: opacity .25s ease;
}
.modal[hidden] {
	display: none;
}
.modal.is-open {
	opacity: 1;
}
.modal__caja {
	position: relative;
	width: 100%;
	max-width: 1200px;
	max-height: 100%;
	overflow-y: auto;
	background: var(--fondo-modal);
	padding: 40px 50px 44px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	transform: translateY(16px);
	transition: transform .25s ease;
}
.modal.is-open .modal__caja {
	transform: none;
}
.modal__cerrar {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 38px;
	background: var(--teal-900);
	color: var(--blanco);
	font-size: 36px;
	line-height: 36px;
	cursor: pointer;
	transition: background .25s ease;
}
.modal__cerrar:hover,
.modal__cerrar:focus-visible {
	background: var(--teal-700);
}
.modal__cerrar:focus-visible {
	outline: 3px solid var(--teal-500);
	outline-offset: -3px;
}
.modal__titulo {
	text-align: center;
	font-size: 29px;
	font-weight: 700;
	margin-bottom: 22px;
}
.modal__lista {
	list-style: none;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
}
.modal__lista > li {
	position: relative;
	padding-left: 24px;
}
.modal__lista > li + li {
	margin-top: 16px;
}
.modal__lista > li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teal-500);
}
.modal__sub {
	list-style: none;
	margin: 8px 0 8px 12px;
}
.modal__sub li::before {
	content: 'o ';
}

/* Solo para lectores de pantalla */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Movimiento reducido (WCAG 2.2.2) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/******************************
*	Responsivo
******************************/
@media (max-width: 1280px) {
	.calc { padding: 50px 2% 0; }
	.dosis__titulo { font-size: 26px; }
	.dosis__head { font-size: 20px; }
	.dosis__formula { font-size: 19px; }
	.dosis__desc { font-size: 19px; padding-left: 5%; }
	.dosis__valor { flex-basis: 30%; font-size: 38px; gap: 10px; }
	.dosis__valor small { font-size: 19px; min-width: 26px; }
	.nota { font-size: 17px; }
	.figura { height: 600px; }
}

@media (max-width: 991px) {
	.wrapper { padding: 16px 16px 0; }
	.barra { margin: 0 -16px; }
	.header { padding: 16px 18px; }
	.header__logo img { width: 130px; }
	.header__title { font-size: 22px; }
	.calc {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		padding: 40px 0 0;
	}
	.calc__peso,
	.calc__res {
		width: 100%;
		max-width: 640px;
	}
	.calc__res { padding-top: 0; }
	.figura { height: 520px; max-width: 360px; }
	.cta { padding: 40px 0; }
	.btn { font-size: 19px; padding: 16px 28px; gap: 18px; }
	.modal__caja { padding: 36px 26px 30px; }
	.modal__titulo { font-size: 23px; padding: 0 30px; }
	.modal__lista { font-size: 17px; }
}

@media (max-width: 560px) {
	.header__logo img { width: 100px; }
	.header__title { font-size: 17px; }
	.figura { height: 420px; }
	.escala__lim { font-size: 20px; left: 10px; }
	.marcador { height: 44px; line-height: 44px; font-size: 30px; padding: 0 10px 0 14px; }
	.marcador::before { border-width: 22px 16px 22px 0; }
	.marcador small { font-size: 16px; }
	.captura { gap: 12px; }
	.captura__campo { height: 48px; }
	.captura__campo input { width: 70px; font-size: 24px; }
	.captura__campo span { width: 40px; font-size: 17px; }
	.captura__txt { font-size: 18px; }
	.dosis__titulo { font-size: 21px; }
	.dosis__head { font-size: 16px; padding: 10px 12px; }
	.dosis__formula { font-size: 16px; }
	.dosis__valor { flex-basis: 34%; font-size: 30px; gap: 8px; padding: 8px 6px; }
	.dosis__valor small { font-size: 15px; min-width: 0; }
	.dosis__desc { font-size: 15px; padding: 8px 12px; }
	.nota { font-size: 15px; text-align: left; }
	.btn { font-size: 15px; padding: 14px 18px; gap: 12px; }
	.btn__icon { width: 26px; height: 26px; }
	.modal { padding: 10px; }
	.modal__titulo { font-size: 19px; }
	.modal__lista { font-size: 15px; }
}