/**
 * Estilos de la Calculadora de requerimientos nutricionales.
 * Enfoque Mobile First. Todo scoped bajo .kuaa-app para no
 * interferir con el tema.
 */

.kuaa-app {
	/* Paleta cerrada a 5 colores (misma en kuaa-swr-calculator): blanco,
	   azul, azul claro, verde chillón y negro. Excepción: rojo reservado
	   solo para errores de validación. */
	--kuaa-color-primary: #357b9f;        /* azul de marca (acentos, foco) */
	--kuaa-color-primary-dark: var(--kuaa-color-primary);
	--kuaa-color-button: #357b9f;         /* fondo de botones del sitio */
	--kuaa-color-accent: #ccff00;         /* verde chillón (destacados) */
	--kuaa-color-heading: #000000;        /* titulares */
	--kuaa-color-text: #357b9f;           /* texto global del sitio */
	--kuaa-color-muted: #357b9f;
	--kuaa-color-bg: #ffffff;
	--kuaa-color-surface: #f3fbfe;
	--kuaa-color-border: #f3fbfe;
	--kuaa-color-error: #b91c1c;

	/* Categorías nutricionales: ya no llevan un color propio (paleta
	   cerrada a 5 colores); comparten el azul claro y se diferencian por
	   ícono/etiqueta en vez de color. */
	--kuaa-color-energia: #f3fbfe;
	--kuaa-color-proteina: #f3fbfe;
	--kuaa-color-carbohidratos: #f3fbfe;
	--kuaa-color-grasas: #f3fbfe;
	--kuaa-color-hidratacion: #f3fbfe;

	/* Tipografía del sitio: Poppins en todos los niveles (ajuste de
	   textos). --kuaa-font-decor se mantiene como alias de
	   --kuaa-font-base para no tocar los selectores que ya lo usan. */
	--kuaa-font-base: 'Poppins', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
	--kuaa-font-decor: var(--kuaa-font-base);

	/* Escala de espaciado (10-ui-ux.md): sin márgenes arbitrarios. */
	--kuaa-space-1: 8px;
	--kuaa-space-2: 16px;
	--kuaa-space-3: 24px;
	--kuaa-space-4: 32px;
	--kuaa-space-5: 48px;
	--kuaa-spacing: var(--kuaa-space-2);

	--kuaa-radius: 20px;

	/* Escala tipográfica unificada (ajuste de textos): mismos tokens en
	   kuaa-combustible y kuaa-swr-calculator. Basada en la ficha de
	   diseño (1pt ≈ 0.5px en web): Título 55pt, By de Kuaá 28pt, Frase
	   destacada 90pt, Textos 32pt (interlineado 37pt), Aclaraciones
	   25pt, Preguntas 30pt. Título y Frase destacada crecen en
	   escritorio (ver @media 600px); el resto se mantiene estable para
	   no perder legibilidad en pantallas chicas. */
	--kuaa-text-titulo: 1.4rem;
	--kuaa-text-marca: 0.85rem;
	--kuaa-text-destacado: 1.85rem;
	--kuaa-text-cuerpo: 1rem;
	--kuaa-text-aclaracion: 0.8rem;
	--kuaa-text-pregunta: 0.95rem;
	/* Nombre de la calculadora (.kuaa-overtitle) (ajuste de tamaños): fijo
	   en 2.16rem en las dos calculadoras, sin crecer en escritorio, para
	   que se vea exactamente igual en cualquier tamaño de pantalla. */
	--kuaa-text-hero: 2.16rem;
	/* "Estás a un paso..." (.kuaa-screen__title--acento) (ajuste de
	   textos); crece en el mismo breakpoint. */
	--kuaa-text-acento: 1.44rem;
	/* "Descubre..." en el paso 1/pantalla 1 y "Esto es solo el
	   comienzo." en el cierre (.kuaa-tagline ahí dentro) (ajuste de
	   tamaños): fijo en 1.15rem en las dos calculadoras, mismo criterio
	   que --kuaa-text-hero. */
	--kuaa-text-bienvenida: 1.15rem;

	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	color: var(--kuaa-color-text);
	font-family: var(--kuaa-font-base);
	font-size: var(--kuaa-text-cuerpo);
	line-height: 1.6;
}

.kuaa-app *,
.kuaa-app *::before,
.kuaa-app *::after {
	box-sizing: inherit;
}

/* "Esas cards pueden ser azul claro" (ajuste de colores): todos los
   pasos 1-5 que comparten esta tarjeta ya son azul claro, así que va
   directo en la tarjeta; la pantalla 0 (captación) pinta su propio
   degradado encima y no se ve afectada. */
.kuaa-calculator {
	background: var(--kuaa-color-surface);
	border: 1px solid var(--kuaa-color-border);
	border-radius: var(--kuaa-radius);
	padding: calc(var(--kuaa-spacing) * 1.25);
	box-shadow: 0 4px 18px rgba(9, 15, 27, 0.07);
}

/* ------------------------------------------------------------------ */
/* Progreso y pantallas                                                */
/* ------------------------------------------------------------------ */

.kuaa-progress {
	margin: 0 0 var(--kuaa-space-3);
}

.kuaa-progress__steps {
	display: flex;
	align-items: center;
	gap: var(--kuaa-space-1);
	margin-bottom: var(--kuaa-space-1);
}

.kuaa-progress__step {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--kuaa-color-border);
	transition: background-color 250ms ease;
}

/* Paso ya completado en verde (Verde Chillón) y el paso actual en azul
   (ajuste de colores) — antes al revés, igual que en
   kuaa-swr-calculator. */
.kuaa-progress__step--done {
	background: var(--kuaa-color-accent);
}

.kuaa-progress__step--current {
	background: var(--kuaa-color-primary);
}

.kuaa-progress__text {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--kuaa-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kuaa-screen[hidden] {
	display: none;
}

.kuaa-screen--active {
	animation: kuaa-fade-in 220ms ease-out;
}

@keyframes kuaa-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kuaa-screen--active {
		animation: none;
	}
}

/* !important en tamaño y peso (ajuste de tamaños): el kit global de
   Elementor del sitio define `.elementor-kit-6 h2 { font-size: 60px;
   font-weight: 700; }`, con más especificidad que una sola clase (suma
   el selector de etiqueta h2), así que sin !important esa regla ganaba
   sobre estos títulos en todas las pantallas (son <h2>). */
.kuaa-screen__title {
	margin: 0 0 calc(var(--kuaa-spacing) * 0.75);
	color: var(--kuaa-color-heading);
	font-size: var(--kuaa-text-titulo) !important;
	font-weight: 800 !important;
	line-height: 1.2;
}

/* Sin contorno visible al recibir el foco (ajuste de accesibilidad):
   el título sigue recibiendo el foco al cambiar de pantalla (accesible
   para lectores de pantalla/teclado), pero ya no se dibuja el
   recuadro azul — decisión explícita del cliente. */
.kuaa-screen__title:focus,
.kuaa-screen__title:focus-visible {
	outline: none;
}

/* "Estás a un paso de conocer tus requerimientos nutricionales"
   (ajuste de textos): frase destacada de la pantalla de acceso, 30px
   con el tramo final en azul. */
.kuaa-screen__title--acento {
	font-size: var(--kuaa-text-acento) !important;
}

.kuaa-title__accent {
	color: var(--kuaa-color-primary);
}

.kuaa-intro__logo {
	display: block;
	max-width: 160px;
	max-height: 64px;
	margin-bottom: var(--kuaa-space-2);
}

/* "Textos" (ajuste de textos): párrafo descriptivo estándar, usado en
   todas las pantallas (antes repartido entre clases sin tamaño
   unificado). Igual en kuaa-combustible y kuaa-swr-calculator. */
.kuaa-text {
	font-size: var(--kuaa-text-cuerpo);
	font-weight: 400;
	line-height: 1.15;
	color: var(--kuaa-color-muted);
}

/* Borde superior azul (ajuste de colores): igual que .kuaa-results__item
   en el paso 3 y .kuaa-result-card en kuaa-swr-calculator, en vez del
   borde izquierdo por categoría (ya no se distinguía, todas azul claro
   tras la paleta de 5 colores). */
.kuaa-portion {
	border: 1px solid var(--kuaa-color-border);
	border-top: 3px solid var(--kuaa-color-primary);
}

.kuaa-intro__list {
	padding-left: 1.25rem;
}

.kuaa-intro__list li {
	margin-bottom: 0.35rem;
}

/* "Aclaraciones" (ajuste de textos): avisos y notas al pie, en cursiva. */
.kuaa-intro__disclaimer {
	font-size: var(--kuaa-text-aclaracion);
	font-weight: 500;
	font-style: italic;
	color: var(--kuaa-color-muted);
	/* Mismo espacio que .kuaa-disclaimer en kuaa-swr-calculator (ajuste
	   de textos): antes dependía del margen por defecto del navegador
	   para <p>, que no coincidía entre las dos calculadoras. */
	margin: 1.25rem 0 0;
}

/* Aclaración de resultados en el paso 1 (bienvenida) (ajuste de
   colores): negro en vez del azul por defecto. */
.kuaa-screen[data-screen='1'] .kuaa-intro__disclaimer {
	color: var(--kuaa-color-heading);
}

/* Nombre de la calculadora (ajuste de textos): título principal de las
   pantallas de apertura (captación y bienvenida), Poppins ExtraBold y
   centrado. */
.kuaa-overtitle {
	font-size: var(--kuaa-text-hero);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	color: var(--kuaa-color-heading);
	margin: 0 0 0.75rem;
}

/* "by: [logo]" bajo el nombre de la calculadora (ajuste de textos). */
.kuaa-brand-credit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.kuaa-brand-credit__label {
	font-size: var(--kuaa-text-marca);
	font-weight: 600;
	color: var(--kuaa-color-heading);
}

/* !important (ajuste de tamaños): sin atributos width/height en el
   <img>, WordPress o algún plugin de imágenes puede inyectar un style
   inline (para evitar saltos de layout) que le gana a un CSS externo
   normal, y el logo se ve gigante en vez de pequeño — mismo problema
   que en kuaa-swr-calculator. */
.kuaa-brand-credit__logo {
	display: block;
	height: 22px !important;
	width: auto !important;
	max-width: none !important;
}

/* "Frase destacada" (ajuste de textos): la frase de gancho, el texto
   más grande de la app (más incluso que el título). */
.kuaa-tagline {
	font-size: var(--kuaa-text-destacado);
	font-weight: 700;
	line-height: 1.15;
	color: var(--kuaa-color-heading);
	margin: 0 0 var(--kuaa-spacing);
}

/* "Completa este breve formulario para comenzar." (ajuste de textos):
   solo en la pantalla de captación este texto usa el cuerpo estándar,
   no la Frase destacada. --kuaa-text-cuerpo se mantiene estable en
   todos los breakpoints, así que no necesita ajuste responsive aparte. */
.kuaa-screen[data-screen='0'] .kuaa-tagline {
	font-size: var(--kuaa-text-cuerpo);
}

/* "Descubre..." / "Esto es solo el comienzo." (ajuste de textos): en
   los pasos 1 (bienvenida) y 5 (cierre) la Frase destacada usa un
   tamaño y color propios (mismo token --kuaa-text-bienvenida en las
   dos calculadoras, ya responsive) en vez del negro grande por
   defecto. */
.kuaa-screen[data-screen='1'] .kuaa-tagline,
.kuaa-screen[data-screen='5'] .kuaa-tagline {
	font-size: var(--kuaa-text-bienvenida);
	color: var(--kuaa-color-primary);
}

/* Pantalla 0 (formulario de captación): tratamiento tipo "landing",
   idéntico al formulario de acceso de referencia (kuaa-swr-calculator) —
   ocupa toda la tarjeta (mismo radio que .kuaa-calculator, "sangrado"
   sobre su padding), con fondo en degradado suave y acento de marca
   arriba. Solo se ve esta pantalla a la vez (la barra de progreso está
   oculta en el paso 0), así que el efecto es el de una única tarjeta.
   El "sangrado" (margin negativo) debe coincidir exactamente con el
   padding de .kuaa-calculator en cada tamaño de pantalla; si no,
   queda un borde blanco descuadrado en uno de los dos breakpoints.
   Solo se sangra arriba/izquierda/derecha: abajo se deja el margen
   normal para no chocar con el pie de página (.kuaa-footer), que es
   el siguiente elemento en el flujo. */
.kuaa-screen[data-screen='0'] {
	text-align: center;
	background: linear-gradient(180deg, var(--kuaa-color-surface) 0%, var(--kuaa-color-bg) 100%);
	border-top: 4px solid var(--kuaa-color-primary);
	border-radius: var(--kuaa-radius);
	margin: calc(var(--kuaa-spacing) * -1.25) calc(var(--kuaa-spacing) * -1.25) 0;
	padding: 1.5rem 1.15rem;
}

.kuaa-screen[data-screen='0'] .kuaa-screen__title,
.kuaa-screen[data-screen='0'] .kuaa-text,
.kuaa-screen[data-screen='0'] .kuaa-tagline {
	text-align: center;
}

.kuaa-screen[data-screen='0'] .kuaa-form {
	margin-top: var(--kuaa-spacing);
}

/* Las etiquetas de los campos quedan centradas (igual que la
   referencia); los inputs/select y el texto del checkbox se fuerzan a
   la izquierda para que el contenido siga siendo legible. Además, solo
   en esta pantalla (Nombre, Correo electrónico, deporte...), las
   etiquetas usan el cuerpo estándar en azul (ajuste de textos) en vez
   del tamaño/color de "Preguntas" que usa el resto de la app.
   --kuaa-text-cuerpo se mantiene estable en todos los breakpoints. */
.kuaa-screen[data-screen='0'] .kuaa-field__label {
	text-align: center;
	font-size: var(--kuaa-text-cuerpo);
	font-weight: 700;
	color: var(--kuaa-color-primary);
}

.kuaa-screen[data-screen='0'] .kuaa-field input,
.kuaa-screen[data-screen='0'] .kuaa-field select {
	text-align: left;
}

/* Pantalla 1 (Bienvenida): mismo centrado que la pantalla 0 y que la
   pantalla equivalente de la referencia (kuaa-swr-calculator, screen 1
   reutiliza .kuaa-landing solo para el texto centrado). */
.kuaa-screen[data-screen='1'] {
	text-align: center;
}

.kuaa-screen[data-screen='1'] .kuaa-intro__list {
	text-align: left;
	display: inline-block;
}


/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */

.kuaa-actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: calc(var(--kuaa-spacing) * 1.25);
}

/* Filas con dos botones (Volver + Continuar/Calcular) (ajuste de
   tamaños): mismo ancho entre los dos, igual que .kuaa-step-actions en
   kuaa-swr-calculator, en vez de ajustarse cada uno a su propio texto.
   Un solo botón (paso 1) sigue centrado y ajustado a su contenido. */
.kuaa-actions:has(.kuaa-btn + .kuaa-btn) .kuaa-btn {
	flex: 1;
}

/* Botones al estilo del sitio Kuaá: azul acero, radio 20px,
   mayúsculas con espaciado amplio. */
.kuaa-btn {
	display: inline-block;
	width: 100%;
	padding: 0.85rem 1.6rem;
	border-radius: var(--kuaa-radius);
	border: 2px solid transparent;
	font-family: var(--kuaa-font-base);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.kuaa-btn:focus-visible {
	outline: 3px solid var(--kuaa-color-primary);
	outline-offset: 2px;
}

/* Retroalimentación táctil al presionar (diseño de referencia,
   kuaa-swr-calculator). */
.kuaa-btn:active {
	transform: scale(0.98);
}

.kuaa-btn--primary {
	background: var(--kuaa-color-button);
	color: #ffffff;
}

/* Hover del botón primario (diseño de referencia): se oscurece al color
   de titulares y el texto pasa a lima de marca. */
.kuaa-btn--primary:hover {
	background: var(--kuaa-color-heading);
	color: var(--kuaa-color-accent);
}

/* Borde en --kuaa-color-primary (no --kuaa-color-border): ese es azul
   claro, casi invisible sobre fondo blanco o azul claro, y hacía que el
   botón pareciera no estar ahí. Fondo blanco (no azul claro): la
   tarjeta del paso ya es azul claro (ajuste de colores), así que un
   fondo azul claro en el botón se mezclaba con ella y se veía igual
   que antes — con blanco sí se distingue como botón secundario. */
/* !important en fondo/color/borde (ajuste de colores): el tema define
   su propio estilo para <button> combinado con la clase del kit de
   Elementor (más especificidad que una sola clase, suma el selector de
   etiqueta), así que sin !important "Volver" se veía igual de azul
   sólido que el botón primario. */
.kuaa-btn--secondary {
	background: var(--kuaa-color-bg) !important;
	color: var(--kuaa-color-button) !important;
	border-color: var(--kuaa-color-primary) !important;
}

/* Hover del botón secundario (diseño de referencia, kuaa-swr-calculator):
   fondo con tinte suave y texto en el color de titulares. */
.kuaa-btn--secondary:hover,
.kuaa-btn--secondary:focus-visible {
	background: var(--kuaa-color-surface) !important;
	color: var(--kuaa-color-heading) !important;
	border-color: var(--kuaa-color-primary) !important;
}

.kuaa-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Estado de carga: spinner sutil junto al texto (10-ui-ux.md). */
.kuaa-btn--loading::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: kuaa-spin 700ms linear infinite;
}

@keyframes kuaa-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kuaa-btn--loading::before {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Formulario                                                          */
/* ------------------------------------------------------------------ */

.kuaa-form {
	display: flex;
	flex-direction: column;
	gap: var(--kuaa-spacing);
}

/* Campo trampa anti-spam (honeypot, pantalla de captación): oculto de la
   vista pero presente en el DOM/orden de tabulación removido vía
   tabindex, no display:none, para seguir atrapando bots que ignoran la
   visibilidad real del campo. */
.kuaa-visually-hidden {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kuaa-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kuaa-spacing);
}

.kuaa-field {
	margin: 0;
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* Bug: .kuaa-field fija su propio "display", así que sin esta regla el
   atributo [hidden] (usado para el campo "¿Cuál?" del deporte, visible
   solo cuando se elige "Otro") queda sin efecto y el campo se ve
   siempre, sin importar la opción seleccionada. */
.kuaa-field[hidden] {
	display: none;
}

/* "Preguntas" (ajuste de textos): las etiquetas de los campos, muchas
   redactadas como pregunta (p. ej. "¿Qué deporte practicas...?"). */
.kuaa-field__label {
	font-weight: 700;
	font-size: var(--kuaa-text-pregunta);
	color: var(--kuaa-color-heading);
}

.kuaa-form__group {
	border: 1px solid var(--kuaa-color-border);
	border-radius: calc(var(--kuaa-radius) * 0.75);
	padding: var(--kuaa-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--kuaa-space-2);
}

/* !important en tamaño y peso (ajuste de tamaños): son <h3> y el kit
   global de Elementor del sitio define su propio tamaño para h3 (24px),
   con más especificidad que una sola clase (suma el selector de
   etiqueta), así que sin !important esa regla ganaba sobre
   "Información personal", "Entrenamiento" y "Objetivo". */
.kuaa-form__group-title {
	margin: 0;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kuaa-color-primary-dark);
}

.kuaa-field__control {
	display: flex;
	align-items: center;
	gap: var(--kuaa-space-1);
}

.kuaa-field__unit {
	color: var(--kuaa-color-muted);
	font-size: 0.9rem;
	white-space: nowrap;
}

.kuaa-field input,
.kuaa-field select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: var(--kuaa-font-base);
	font-size: 1rem;
	color: var(--kuaa-color-heading);
	background: var(--kuaa-color-bg);
	border: 1.5px solid var(--kuaa-color-border);
	border-radius: calc(var(--kuaa-radius) * 0.6);
}

/* Select estilizado: sin apariencia nativa, con flecha propia,
   conservando la navegación por teclado del control estándar. */
.kuaa-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352606d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
}

/* Opción "Selecciona una opción" en gris, igual que los placeholders de
   los inputs (ajuste de colores): el <select> no tiene ::placeholder
   nativo, pero al ser required con la opción vacía deshabilitada, el
   select coincide con :invalid solo mientras no se ha elegido nada. */
.kuaa-field select:invalid {
	color: #767676;
}

.kuaa-field input:focus-visible,
.kuaa-field select:focus-visible {
	outline: 3px solid var(--kuaa-color-primary);
	outline-offset: 1px;
	border-color: var(--kuaa-color-primary);
}

.kuaa-field--invalid input,
.kuaa-field--invalid select {
	border-color: var(--kuaa-color-error);
}

.kuaa-field__error {
	margin: 0;
	font-size: 0.85rem;
	color: var(--kuaa-color-error);
}

.kuaa-field__error::before {
	content: '⚠ ';
}

.kuaa-field--radios .kuaa-radio {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0;
}

.kuaa-field--radios input[type='radio'] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--kuaa-color-primary);
}

/* Icono de información con texto desplegable (ajuste de textos), p.ej.
   junto al campo Sexo. */
.kuaa-help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0.2rem 0 0.5rem;
}

/* Fondo blanco (no azul claro) en el ícono y su nota: el paso 2 ya es
   azul claro (ajuste de colores), así que necesitan contrastar contra
   ese fondo en vez de mezclarse con él. */
.kuaa-help__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 1.5px solid var(--kuaa-color-border);
	border-radius: 50%;
	background: var(--kuaa-color-bg);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
}

.kuaa-help__icon:focus-visible {
	outline: 3px solid var(--kuaa-color-primary);
	outline-offset: 1px;
}

/* "Aclaraciones" (ajuste de textos): nota complementaria del icono de
   información. */
.kuaa-help__texto {
	margin: 0;
	max-width: 32rem;
	background: var(--kuaa-color-bg);
	border: 1px solid var(--kuaa-color-border);
	border-radius: calc(var(--kuaa-radius) * 0.5);
	padding: 0.6rem 0.75rem;
	font-size: var(--kuaa-text-aclaracion);
	font-weight: 500;
	font-style: italic;
	color: var(--kuaa-color-text);
}

/* Checkbox de autorización de datos (pantalla de captación de leads). */
.kuaa-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.kuaa-field--checkbox input[type='checkbox'] {
	width: 1.15rem;
	height: 1.15rem;
	min-width: 1.15rem;
	margin-top: 0.2rem;
	accent-color: var(--kuaa-color-primary);
}

/* Texto de autorización de datos: mismo estilo en kuaa-combustible y
   kuaa-swr-calculator (ajuste de textos) — sin negrilla, alineado a la
   izquierda incluso dentro de pantallas con texto centrado. */
.kuaa-field--checkbox label {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1;
	text-align: left;
	color: var(--kuaa-color-heading);
}

/* ------------------------------------------------------------------ */
/* Resultados                                                          */
/* ------------------------------------------------------------------ */

.kuaa-results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: var(--kuaa-spacing) 0 0;
}

/* Fondo blanco (no azul claro): el paso 3 completo ya es azul claro
   (.kuaa-calculator, ajuste de colores), así que esta tarjeta necesita
   contrastar contra ese fondo en vez de mezclarse con él. Borde
   superior azul (ajuste de colores): igual que .kuaa-result-card en
   kuaa-swr-calculator, en vez del borde izquierdo por categoría (ya
   no se distinguía, todas azul claro tras la paleta de 5 colores). */
.kuaa-results__item {
	background: var(--kuaa-color-bg);
	border: 1px solid var(--kuaa-color-border);
	border-top: 3px solid var(--kuaa-color-primary);
	border-radius: calc(var(--kuaa-radius) * 0.75);
	padding: 0.9rem 1rem;
}

/* Categorías del acordeón de interpretación (10-ui-ux.md): con la
   paleta cerrada a 5 colores todas comparten azul claro (igual que
   --kuaa-color-surface, por lo que el borde ya no se distingue
   visualmente por color) y la diferenciación pasa a ícono/etiqueta. */
.kuaa-block--energia {
	border-left-color: var(--kuaa-color-energia);
}

.kuaa-block--proteina {
	border-left-color: var(--kuaa-color-proteina);
}

.kuaa-block--carbohidratos {
	border-left-color: var(--kuaa-color-carbohidratos);
}

.kuaa-block--grasas {
	border-left-color: var(--kuaa-color-grasas);
}

.kuaa-block--hidratacion {
	border-left-color: var(--kuaa-color-hidratacion);
}

/* Tarjeta fija "Principal Oportunidad" (ajuste de textos): se distingue
   de las categorías nutricionales con el mismo acento que las tarjetas
   de prioridad. */
.kuaa-block--oportunidad-principal {
	border-left-color: var(--kuaa-color-primary);
}

.kuaa-results__item dt {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--kuaa-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kuaa-results__item dd {
	margin: 0.15rem 0 0;
}

.kuaa-results__value {
	font-family: var(--kuaa-font-decor);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--kuaa-color-primary);
}

.kuaa-results__unit {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--kuaa-color-muted);
}

.kuaa-results__description {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: var(--kuaa-color-muted);
}

/* Fondo blanco (no azul claro): el paso 3 ya es azul claro (ajuste de
   colores), así que esta tarjeta necesita contrastar contra ese fondo
   en vez de mezclarse con él. */
.kuaa-results__warning {
	margin: var(--kuaa-spacing) 0 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--kuaa-color-accent);
	background: var(--kuaa-color-bg);
	font-size: 0.9rem;
}

/* Acordión de interpretación de resultados (ajuste de textos): la
   pantalla 3 muestra los resultados directamente, sin exigir un clic
   adicional para verlos; el acordión es contenido complementario. */
/* Fondo blanco (no azul claro): el paso 3 ya es azul claro (ajuste de
   colores), así que este acordeón necesita contrastar contra ese
   fondo en vez de mezclarse con él — igual que .kuaa-faq en
   kuaa-swr-calculator. */
.kuaa-accordion {
	background: var(--kuaa-color-bg);
	margin-top: var(--kuaa-spacing);
	border: 1px solid var(--kuaa-color-border);
	border-radius: calc(var(--kuaa-radius) * 0.6);
	padding: 0 1rem;
}

.kuaa-accordion__summary {
	cursor: pointer;
	padding: 0.85rem 0;
	font-weight: 700;
	color: var(--kuaa-color-primary-dark);
	list-style: none;
}

.kuaa-accordion__summary::-webkit-details-marker {
	display: none;
}

.kuaa-accordion__summary::before {
	content: '+ ';
}

.kuaa-accordion[open] .kuaa-accordion__summary::before {
	content: '– ';
}

.kuaa-accordion__summary:focus-visible {
	outline: 3px solid var(--kuaa-color-primary);
	outline-offset: 2px;
}

.kuaa-accordion .kuaa-interpretation {
	padding-bottom: 0.9rem;
}

/* "Textos" (ajuste de textos): explicación de metodología dentro del
   acordión. */
.kuaa-accordion__texto {
	margin: 0;
	padding-bottom: 0.9rem;
	font-size: var(--kuaa-text-cuerpo);
	line-height: 1.15;
	color: var(--kuaa-color-text);
}

/* ------------------------------------------------------------------ */
/* Bloques de interpretación y recomendaciones                         */
/* ------------------------------------------------------------------ */

.kuaa-interpretation,
.kuaa-recommendations {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: var(--kuaa-spacing);
}

/* Fondo blanco (no azul claro): estas tarjetas viven dentro del
   acordeón de interpretación en el paso 3, que ya es azul claro
   (ajuste de colores), así que necesitan contrastar en vez de
   mezclarse con ese fondo. */
.kuaa-block {
	background: var(--kuaa-color-bg);
	border-radius: calc(var(--kuaa-radius) * 0.75);
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--kuaa-color-border);
}

.kuaa-block--priority {
	border-left-color: var(--kuaa-color-primary);
}

.kuaa-block__priority {
	margin: 0 0 0.3rem;
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--kuaa-color-accent);
	color: var(--kuaa-color-heading);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* !important en tamaño y peso (ajuste de tamaños): es un <h3> y el kit
   global de Elementor del sitio define su propio tamaño para h3, con
   más especificidad que una sola clase, así que sin !important esa
   regla le ganaba a este título. */
.kuaa-block__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--kuaa-color-heading);
}

.kuaa-block__icon {
	font-size: 1.1em;
}

.kuaa-block__text {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Porciones y recomendaciones                                         */
/* ------------------------------------------------------------------ */

.kuaa-portions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-top: var(--kuaa-spacing);
}

/* Fondo blanco (no azul claro): el paso 4 completo ya es azul claro
   (.kuaa-calculator, ajuste de colores), así que esta tarjeta necesita
   contrastar contra ese fondo en vez de mezclarse con él.
   align-self: stretch + text-align: center (ajuste de layout): antes
   el recuadro se encogía a su propio contenido (era hijo de
   .kuaa-portion-card, que centra con align-items) y quedaba angosto y
   con el texto pegado a la izquierda; ahora ocupa todo el ancho de la
   columna y el texto queda centrado. */
.kuaa-portion {
	background: var(--kuaa-color-bg);
	border-radius: calc(var(--kuaa-radius) * 0.75);
	padding: 0.9rem 1rem;
	align-self: stretch;
	text-align: center;
}

/* !important en tamaño y peso (ajuste de tamaños): es un <h3> y el kit
   global de Elementor del sitio define su propio tamaño para h3, con
   más especificidad que una sola clase, así que sin !important esa
   regla le ganaba a este título. */
.kuaa-portion__name {
	margin: 0;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--kuaa-color-heading);
}

.kuaa-portion__grams {
	margin: 0.2rem 0 0;
	font-size: 1.2rem;
	font-weight: 600;
}

.kuaa-portion__approx {
	margin: 0;
	color: var(--kuaa-color-muted);
}

.kuaa-portion__amount {
	margin: 0 0 0.2rem;
	font-family: var(--kuaa-font-decor);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--kuaa-color-primary-dark);
}

/* "Aclaraciones" (ajuste de textos): notas al pie de la pantalla de
   porciones, marcadas con * y ** en el propio texto. */
.kuaa-portions__note {
	margin-top: 0.5rem;
	font-size: var(--kuaa-text-aclaracion);
	font-weight: 500;
	font-style: italic;
	color: var(--kuaa-color-muted);
}

/* Más espacio antes de los disclaimers, separándolos de las tarjetas
   de porciones (ajuste de textos). */
.kuaa-portions__note:first-of-type {
	margin-top: calc(var(--kuaa-spacing) * 1.5);
}

/* Envoltorio de cada tarjeta de porciones (ajuste de textos): el
   recuadro con borde de color (.kuaa-portion) solo tiene el texto
   dinámico; el botón "Ver ejemplos" queda fuera, debajo y centrado. */
.kuaa-portion-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

/* Botón real (ajuste de textos: antes era un enlace de texto subrayado).
   !important en el color/borde de todos los estados (ajuste de
   colores): el tema de WordPress define su propio estilo de :active/
   :focus para <button> con más especificidad que una sola clase (por
   ejemplo `.entry-content button:active`, que suma el selector de
   etiqueta), así que sin !important seguía ganando el tema y el botón
   se veía rojo al hacer clic. */
.kuaa-portion__ver-imagen {
	display: inline-block;
	background: var(--kuaa-color-bg) !important;
	border: 1.5px solid var(--kuaa-color-border) !important;
	/* Mismo radio que los demás botones (ajuste de bordes): antes era
	   más chico (0.6 del token) y no calzaba con .kuaa-btn. */
	border-radius: var(--kuaa-radius);
	padding: 0.5rem 1.1rem;
	color: var(--kuaa-color-button) !important;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	/* Mismo ancho que el recuadro de arriba (ajuste de layout): sin esto
	   se encogía a su propio texto, por ser hijo de .kuaa-portion-card
	   (que centra con align-items). */
	align-self: stretch;
	text-align: center;
}

.kuaa-portion__ver-imagen:hover,
.kuaa-portion__ver-imagen:active,
.kuaa-portion__ver-imagen:focus,
.kuaa-portion__ver-imagen:focus-visible {
	background: var(--kuaa-color-surface) !important;
	border-color: var(--kuaa-color-primary) !important;
	color: var(--kuaa-color-primary-dark) !important;
}

.kuaa-portion__ver-imagen:focus,
.kuaa-portion__ver-imagen:focus-visible {
	outline: 3px solid var(--kuaa-color-primary) !important;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Visor de imagen ampliada ("Ver imagen" en porciones)                */
/* ------------------------------------------------------------------ */

.kuaa-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: var(--kuaa-spacing);
}

.kuaa-lightbox--open {
	display: flex;
}

.kuaa-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 15, 27, 0.7);
}

.kuaa-lightbox__content {
	position: relative;
	max-width: min(92vw, 480px);
	max-height: 90vh;
	overflow: auto;
	background: var(--kuaa-color-bg);
	border-radius: calc(var(--kuaa-radius) * 0.6);
	padding: var(--kuaa-space-2);
}

.kuaa-lightbox__imagen {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--kuaa-radius) * 0.4);
}

.kuaa-lightbox__cerrar {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--kuaa-color-surface);
	color: var(--kuaa-color-heading);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.kuaa-lightbox__cerrar:hover {
	background: var(--kuaa-color-border);
}

.kuaa-lightbox__cerrar:focus-visible {
	outline: 3px solid var(--kuaa-color-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Pantalla final: síguenos en redes                                   */
/* ------------------------------------------------------------------ */

/* Igual al diseño de referencia (kuaa-swr-calculator, ajuste de
   textos): círculos centrados, solo ícono (el nombre de la red queda
   como aria-label, no como texto visible). */
.kuaa-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: var(--kuaa-spacing);
}

/* Fondo blanco (no azul claro): la tarjeta del paso 5 ya es azul claro
   (ajuste de colores), así que estos círculos necesitan contrastar
   contra ese fondo en vez de mezclarse con él. */
/* !important en color (ajuste de colores): es un <a>, y el tema de
   WordPress define su propio color para enlaces, con la misma
   especificidad (una clase), así que sin !important podía ganarle a
   este azul. */
.kuaa-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kuaa-color-bg);
	border: 1px solid var(--kuaa-color-border);
	color: var(--kuaa-color-primary-dark) !important;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, transform 150ms ease;
}

.kuaa-social__link:hover,
.kuaa-social__link:focus-visible {
	background: var(--kuaa-color-heading);
	color: var(--kuaa-color-accent) !important;
	transform: translateY(-3px);
}

.kuaa-social__link:focus-visible {
	outline: 3px solid var(--kuaa-color-primary);
	outline-offset: 2px;
}

.kuaa-social__link svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	fill: currentColor;
}

/* Círculos más chicos en celulares muy angostos, igual que la
   referencia. */
@media (max-width: 380px) {
	.kuaa-social__link {
		width: 42px;
		height: 42px;
	}

	.kuaa-social__link svg {
		width: 19px;
		height: 19px;
	}
}

/* ------------------------------------------------------------------ */
/* Pie de página                                                       */
/* ------------------------------------------------------------------ */

/* "By, de Kuaá" (ajuste de textos): crédito de marca, visible en todas
   las pantallas, igual que en kuaa-swr-calculator. */
.kuaa-footer {
	text-align: center;
	margin-top: calc(var(--kuaa-spacing) * 1.5);
	padding-top: var(--kuaa-spacing);
	border-top: 1px solid var(--kuaa-color-border);
}

.kuaa-footer p {
	margin: 0.2rem 0;
	font-size: var(--kuaa-text-marca);
	font-weight: 500;
	color: var(--kuaa-color-muted);
}

.kuaa-footer strong {
	color: var(--kuaa-color-heading);
}

/* ------------------------------------------------------------------ */
/* Tablet y escritorio                                                 */
/* ------------------------------------------------------------------ */

@media (min-width: 600px) {
	.kuaa-calculator {
		padding: calc(var(--kuaa-spacing) * 2);
	}

	/* El sangrado de la pantalla 0 debe seguir al padding de
	   .kuaa-calculator en este breakpoint (arriba pasa de *1.25 a *2). */
	.kuaa-screen[data-screen='0'] {
		margin: calc(var(--kuaa-spacing) * -2) calc(var(--kuaa-spacing) * -2) 0;
		padding: 2rem 1.75rem;
	}

	/* Escala tipográfica: en escritorio crecen el título y la frase
	   destacada (ajuste de textos); el resto se mantiene estable. */
	.kuaa-app {
		--kuaa-text-titulo: 1.72rem;
		--kuaa-text-destacado: 2.8rem;
		--kuaa-text-marca: 0.875rem;
		--kuaa-text-acento: 1.8rem;
	}

	.kuaa-actions {
		flex-direction: row;
		justify-content: center;
	}

	.kuaa-btn {
		width: auto;
	}

	.kuaa-form__row {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.kuaa-results {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Las 3 tarjetas de porciones (proteínas, carbohidratos, grasas)
	   quedan seguidas en una sola fila (ajuste de textos). */
	.kuaa-portions {
		grid-template-columns: repeat(3, 1fr);
	}
}