/* ==========================================================================
   Sweat Rate Calculator — by Kuaá
   Styles scoped under .kuaa-calc to avoid interfering with the theme.
   Paleta cerrada a 5 colores (misma en kuaa-combustible):
   blanco #FFFFFF, azul #357B9F, azul claro #F3FBFE, verde chillón #CCFF00,
   negro #000000. Excepción: rojo reservado solo para errores de validación.
   Font Poppins.
   ========================================================================== */

.kuaa-calc {
	--kuaa-primary: #357b9f;
	--kuaa-secondary: #000000;
	--kuaa-accent: #ccff00;
	--kuaa-button: #357b9f;
	--kuaa-button-hover: #000000;
	--kuaa-bg: #ffffff;
	--kuaa-bg-soft: #f3fbfe;
	--kuaa-text: #000000;
	--kuaa-text-muted: #357b9f;
	--kuaa-border: #f3fbfe;
	--kuaa-error: #b91c1c;
	--kuaa-font: "Poppins", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;

	/* Escala tipográfica unificada (mismos tokens y valores que
	   kuaa-combustible). 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 se reducen en los breakpoints angostos
	   (ver más abajo); el resto se mantiene estable. */
	--kuaa-text-titulo: 1.72rem;
	--kuaa-text-marca: 0.875rem;
	--kuaa-text-destacado: 2.8rem;
	--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-title--acento) (ajuste de textos); se
	   reduce en los mismos breakpoints angostos. */
	--kuaa-text-acento: 1.8rem;
	/* "Descubre..." en el paso 1/bienvenida 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;

	max-width: 680px;
	margin: 0 auto;
	color: var(--kuaa-text);
	font-family: var(--kuaa-font);
	font-size: var(--kuaa-text-cuerpo);
	line-height: 1.6;
}

.kuaa-calc *,
.kuaa-calc *::before,
.kuaa-calc *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.kuaa-hidden {
	display: none !important;
}

/* ---------- Progress bar (screens 1–4; hidden on the access gate) ---------- */

.kuaa-progress {
	margin: 0 0 1.25rem;
}

.kuaa-progress__steps {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.4rem;
}

.kuaa-progress__step {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--kuaa-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. */
.kuaa-progress__step--done {
	background: var(--kuaa-accent);
}

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

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

/* ---------- Panels / screens ---------- */

.kuaa-panel {
	background: var(--kuaa-bg);
	border: 1px solid var(--kuaa-border);
	border-radius: 20px;
	padding: 2rem 1.75rem;
	margin-bottom: 1.5rem;
	scroll-margin-top: 90px; /* room for the theme's sticky headers */
	box-shadow: 0 4px 18px rgba(9, 15, 27, 0.07);
}

.kuaa-landing {
	text-align: center;
}

/* The gradient + accent border only belong to the access-gate screen,
   which is still its own standalone card. Screen 1 (welcome) reuses
   .kuaa-landing just for the centered text now that it lives inside the
   shared flow card (#kuaa-flow) instead of its own. */
#kuaa-screen-0.kuaa-landing {
	background: linear-gradient(180deg, var(--kuaa-bg-soft) 0%, var(--kuaa-bg) 100%);
	border-top: 4px solid var(--kuaa-primary);
}

/* Persistent card wrapping the whole step flow (screens 1–4): same look
   as .kuaa-panel, just hidden until the access gate is passed. */
.kuaa-flow {
	position: relative;
}

/* "Esas cards pueden ser azul claro" (ajuste de colores): los 4 pasos
   que comparte esta tarjeta (#kuaa-flow) ya son azul claro, así que va
   directo en la tarjeta en vez de condicionarlo por :has() a cada paso. */
#kuaa-flow {
	background: var(--kuaa-bg-soft);
}

/* Individual step content no longer carries its own card chrome (that's
   now on #kuaa-flow) — only keeps the scroll offset for scrollIntoView(). */
.kuaa-screen-content {
	scroll-margin-top: 90px;
}

/* Inline footer: same footer, but nested inside a card (access-gate
   screen or the shared flow card) instead of floating below it — a thin
   divider separates it from the content above, matching the reference
   design. */
.kuaa-footer--inline {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kuaa-border);
}

/* ---------- Typography ---------- */

/* Nombre de la calculadora (ajuste de textos): título principal de las
   pantallas de apertura (acceso 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-secondary);
	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-secondary);
}

/* !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. */
.kuaa-brand-credit__logo {
	display: block;
	height: 22px !important;
	width: auto !important;
	max-width: none !important;
}

/* "Título Calculadoras" (ajuste de textos, unificado con
   kuaa-combustible): mismo tamaño para .kuaa-title, .kuaa-subtitle y
   .kuaa-subtitle-2 — antes tenían tres tamaños distintos.
   !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 este título (es un <h2>). */
.kuaa-title {
	font-size: var(--kuaa-text-titulo) !important;
	font-weight: 800 !important;
	margin: 0 0 1rem;
	color: var(--kuaa-secondary);
}

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

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

/* "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-secondary);
	margin: 0 0 0.75rem;
}

/* "Completa este breve formulario para comenzar." (ajuste de textos):
   solo en la pantalla de acceso este texto usa el cuerpo estándar, no
   la Frase destacada. --kuaa-text-cuerpo ya se mantiene estable en
   todos los breakpoints, así que no necesita ajuste responsive aparte. */
#kuaa-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 4 (cierre) la Frase destacada usa un
   tamaño y color propios (mismo token --kuaa-text-bienvenida en los
   dos, ya responsive) en vez del negro grande por defecto. */
#kuaa-screen-1 .kuaa-tagline,
#kuaa-screen-4 .kuaa-tagline {
	font-size: var(--kuaa-text-bienvenida);
	color: var(--kuaa-primary);
}

/* "Textos" (ajuste de textos): párrafo descriptivo estándar. */
.kuaa-text {
	font-size: var(--kuaa-text-cuerpo);
	font-weight: 400;
	line-height: 1.15;
	color: var(--kuaa-text-muted);
	margin: 0 0 1.5rem;
}

/* !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, con
   más especificidad que una sola clase (suma el selector de etiqueta),
   así que sin !important esa regla ganaba sobre "Cuéntanos sobre ti",
   "Resultados" y "¿Te resultó útil?". */
.kuaa-subtitle {
	font-size: var(--kuaa-text-titulo) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kuaa-secondary);
	margin: 0 0 1.25rem;
}

/* "Cuéntanos sobre ti" / "Resultados" / "¿Te resultó útil?" (ajuste de
   textos): mismo tratamiento que sus equivalentes en kuaa-combustible
   (.kuaa-screen__title) — sin mayúsculas forzadas ni letter-spacing. El
   tamaño y el color (negro) ya son iguales en las dos por
   --kuaa-text-titulo/--kuaa-secondary. */
#kuaa-screen-2 .kuaa-subtitle,
#kuaa-screen-3 .kuaa-subtitle,
#kuaa-screen-4 .kuaa-subtitle {
	text-transform: none;
	letter-spacing: normal;
}

.kuaa-subtitle-2 {
	font-size: var(--kuaa-text-titulo);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kuaa-secondary);
	margin: 1.75rem 0 1rem;
}

/* "Aclaraciones" (ajuste de textos): avisos y notas al pie, en cursiva.
   En una sola línea (ajuste de textos) en pantallas ≥541px, donde el
   texto ya cabe en el ancho de la tarjeta; en móvil (≤540px, ver media
   query más abajo) vuelve a su ajuste de línea normal para no
   desbordar. */
.kuaa-disclaimer {
	font-size: var(--kuaa-text-aclaracion);
	font-weight: 500;
	font-style: italic;
	color: var(--kuaa-text-muted);
	margin: 1.25rem 0 0;
	white-space: nowrap;
}

/* Aclaración de resultados en el paso 1 (bienvenida) (ajuste de
   colores): negro en vez del azul por defecto. */
#kuaa-screen-1 .kuaa-disclaimer {
	color: var(--kuaa-secondary);
}

/* ---------- Buttons ---------- */

/* Padding igual que kuaa-combustible (ajuste de tamaños): antes era
   más ancho (2.25rem) y el botón del paso 1 usaba además .kuaa-btn-hero
   (más grande todavía, con degradado y sombra "iluminada") — se quitó
   esa variante para que el botón sea del mismo tamaño en las dos
   calculadoras y sin el brillo. */
.kuaa-btn {
	display: inline-block;
	background: var(--kuaa-button);
	color: #ffffff;
	border: none;
	border-radius: 20px;
	padding: 0.85rem 1.6rem;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	max-width: 100%;
	white-space: normal;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.kuaa-btn:hover,
.kuaa-btn:focus {
	background: var(--kuaa-button-hover);
	color: var(--kuaa-accent);
}

.kuaa-btn:active {
	transform: scale(0.98);
}

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

/* Secondary/back button: outlined, less prominent than the primary CTA so
   it never competes with the main forward action on the same screen.
   Border in --kuaa-primary (not --kuaa-border): --kuaa-border is 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-bg) !important;
	color: var(--kuaa-button) !important;
	border: 2px solid var(--kuaa-primary) !important;
}

.kuaa-btn-secondary:hover,
.kuaa-btn-secondary:focus {
	background: var(--kuaa-bg-soft) !important;
	color: var(--kuaa-secondary) !important;
	border-color: var(--kuaa-primary) !important;
}

/* Row of two buttons ("Volver" + the primary forward action) at the end
   of a step's form. Stacks on narrow screens via the existing .kuaa-btn
   mobile rule (display:block; width:100%). */
.kuaa-step-actions {
	display: flex;
	gap: 0.75rem;
}

.kuaa-step-actions .kuaa-btn {
	flex: 1;
}

/* Centered variant (closing screen: "Volver" + "Volver a empezar"): the
   two buttons sit at their natural width instead of stretching to fill
   the row. */
.kuaa-step-actions--center {
	justify-content: center;
}

.kuaa-step-actions--center .kuaa-btn {
	flex: 0 1 auto;
}

/* ---------- Forms ---------- */

.kuaa-field {
	margin-bottom: 1.1rem;
}

/* "Preguntas" (ajuste de textos): las etiquetas de los campos, muchas
   redactadas como pregunta. :not(.kuaa-checkbox-label) evita pisar el
   texto de autorización (más abajo, sin negrilla): también es un
   <label> dentro de .kuaa-field. */
.kuaa-field label:not(.kuaa-checkbox-label) {
	display: block;
	color: var(--kuaa-secondary);
	margin-bottom: 0.35rem;
	font-size: var(--kuaa-text-pregunta);
	font-weight: 700;
}

/* Etiquetas del formulario de acceso (Nombre, Correo electrónico,
   deporte...) (ajuste de textos): cuerpo estándar en azul, distinto del
   resto de formularios de la app. --kuaa-text-cuerpo se mantiene
   estable en todos los breakpoints, sin ajuste responsive aparte. */
/* :not(.kuaa-checkbox-label) evita pisar el texto de autorización (más
   abajo, sin negrilla): también es un <label> dentro de .kuaa-field. */
#kuaa-screen-0 .kuaa-field label:not(.kuaa-checkbox-label) {
	font-size: var(--kuaa-text-cuerpo);
	font-weight: 700;
	color: var(--kuaa-primary);
}

.kuaa-field input,
.kuaa-field select {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--kuaa-border);
	border-radius: 12px;
	font-size: 1rem;
	color: var(--kuaa-text);
	background: #ffffff;
}

.kuaa-field select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23626262' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 16px;
	padding-right: 2.5rem;
}

/* 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,
.kuaa-field select:focus {
	outline: 2px solid var(--kuaa-primary);
	outline-offset: 1px;
	border-color: var(--kuaa-primary);
}

/* "Regístralo antes de orinar." (ajuste de textos): mismo tratamiento
   que "Entrenamiento" en kuaa-combustible (.kuaa-form__group-title). */
.kuaa-field-hint {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kuaa-primary);
	margin-top: 0.3rem;
}

.kuaa-field-error {
	display: block;
	color: var(--kuaa-error);
	font-size: 0.8rem;
	margin-top: 0.35rem;
}

/* Consent checkbox: label wraps the checkbox so the whole sentence is
   clickable, matching how touch users expect long-text checkboxes to work.
   Texto de autorización: mismo estilo que kuaa-combustible (ajuste de
   textos) — sin negrilla, alineado a la izquierda aunque el resto de la
   pantalla (.kuaa-landing) esté centrado. */
.kuaa-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-weight: 400;
	text-align: left;
	color: var(--kuaa-secondary);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
}

.kuaa-checkbox-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	margin-top: 0.15rem;
	accent-color: var(--kuaa-primary);
	cursor: pointer;
}

/* Honeypot anti-spam field: hidden from sighted users, but still present
   in the DOM/tab order removed via tabindex, not display:none, so it keeps
   catching bots that skip only display:none fields. */
.kuaa-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Messages ---------- */

.kuaa-error {
	color: var(--kuaa-error);
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 12px;
	padding: 0.65rem 0.9rem;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

/* ---------- Results ---------- */

.kuaa-result-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* Fondo blanco (no azul claro): el paso 3 completo ya es azul claro
   (#kuaa-flow, ajuste de colores), así que estas tarjetas necesitan
   contrastar contra ese fondo en vez de mezclarse con él. */
.kuaa-result-card {
	background: var(--kuaa-bg);
	border: 1px solid var(--kuaa-border);
	border-top: 3px solid var(--kuaa-primary);
	border-radius: 16px;
	padding: 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

/* Fila ícono + etiqueta (ajuste de textos, "iconitos" como en
   kuaa-combustible): el ícono va en un span separado, no dentro de
   .kuaa-result-label, porque calculator.js reemplaza el textContent de
   #kuaa-label-weight y borraría el ícono si estuviera en el mismo nodo. */
.kuaa-result-label-row {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
}

.kuaa-result-icon {
	font-size: 0.95rem;
	line-height: 1.3;
}

/* !important en color (ajuste de colores): por si el tema define su
   propio color de texto que le gane a esta etiqueta. */
.kuaa-result-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--kuaa-text-muted) !important;
}

.kuaa-result-value {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--kuaa-button);
}

.kuaa-result-note {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kuaa-secondary);
}

/* Text-based result values (classification, target, risk) read better
   smaller than the numeric ones. */
.kuaa-result-value-text {
	font-size: 1.05rem;
	line-height: 1.45;
}

/* Per-card expandable explanation */
.kuaa-result-details {
	margin-top: auto;
	padding-top: 0.7rem;
	border-top: 1px solid var(--kuaa-border);
}

.kuaa-result-details summary {
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kuaa-button);
	list-style-position: inside;
}

.kuaa-result-details summary:hover,
.kuaa-result-details summary:focus {
	color: var(--kuaa-secondary);
}

.kuaa-result-details[open] summary {
	margin-bottom: 0.5rem;
}

.kuaa-result-explanation {
	font-size: 0.9rem;
	color: var(--kuaa-text-muted);
}

.kuaa-result-explanation p {
	margin: 0 0 0.6rem;
}

.kuaa-result-explanation p:first-child {
	font-weight: 600;
	color: var(--kuaa-secondary);
}

.kuaa-result-explanation p:only-child {
	font-weight: 400;
	color: var(--kuaa-text-muted);
}

/* Projection card: three mini values side by side. justify-content +
   min-width:0 let the values/captions shrink and wrap instead of
   overflowing the card on narrow phones. */
.kuaa-projection-grid {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.35rem 0 0.6rem;
}

.kuaa-projection-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kuaa-projection-value {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--kuaa-button);
}

.kuaa-projection-caption {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kuaa-text-muted);
}

/* ---------- FAQ / methodology accordion (Screen 3 results) ---------- */

/* Native <details> for the collapse behavior; a custom +/- marker
   replaces the browser's default triangle to match the reference design. */
.kuaa-faq {
	background: var(--kuaa-bg);
	border: 1px solid var(--kuaa-border);
	border-radius: 16px;
	padding: 1.1rem 1.25rem;
	margin: 1.25rem 0;
}

.kuaa-faq__summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--kuaa-button);
	list-style: none;
}

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

.kuaa-faq__summary::before {
	content: "+ ";
	display: inline-block;
	width: 1em;
}

.kuaa-faq[open] .kuaa-faq__summary::before {
	content: "\2212 "; /* − */
}

.kuaa-faq__body {
	margin-top: 0.9rem;
	color: var(--kuaa-text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.kuaa-faq__body p {
	margin: 0 0 0.75rem;
}

.kuaa-faq__refs-title {
	font-weight: 700;
	color: var(--kuaa-secondary);
	margin: 0 0 0.4rem;
}

.kuaa-faq__refs {
	margin: 0 0 0.9rem;
	padding-left: 1.25rem;
}

.kuaa-faq__refs li {
	margin-bottom: 0.4rem;
}

/* ---------- Social links (Screen 4 closing) ---------- */

.kuaa-social-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
	/* Mismo espacio antes de los botones que en kuaa-combustible
	   (.kuaa-actions, ajuste de espaciado): ahí no tenía margen propio. */
	margin-bottom: 1.25rem;
}

/* Fondo blanco (no azul claro): la tarjeta del paso 4 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-bg);
	border: 1px solid var(--kuaa-border);
	color: var(--kuaa-button) !important;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.kuaa-social-link svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.kuaa-social-link:hover,
.kuaa-social-link:focus {
	background: var(--kuaa-secondary);
	color: var(--kuaa-accent) !important;
	transform: translateY(-3px);
}

/* ---------- Footer ---------- */

/* "By, de Kuaá" (ajuste de textos): crédito de marca. */
.kuaa-footer {
	text-align: center;
	font-size: var(--kuaa-text-marca);
	font-weight: 500;
	color: var(--kuaa-text-muted);
}

.kuaa-footer p {
	margin: 0.2rem 0;
}

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

.kuaa-footer a {
	color: var(--kuaa-button);
	font-weight: 600;
	text-decoration: underline;
}

.kuaa-footer a:hover {
	color: var(--kuaa-secondary);
}

/* ---------- Responsive ---------- */

@media (max-width: 540px) {
	.kuaa-panel {
		padding: 1.5rem 1.15rem;
	}

	/* Vuelve al ajuste de línea normal (ajuste de textos): en móvil no
	   cabe en una sola línea sin desbordar la tarjeta. */
	.kuaa-disclaimer {
		white-space: normal;
	}

	/* Escala tipográfica: el título y la frase destacada se reducen en
	   pantallas angostas (ajuste de textos); el resto se mantiene
	   estable. */
	.kuaa-calc {
		--kuaa-text-titulo: 1.4rem;
		--kuaa-text-destacado: 2.25rem;
		--kuaa-text-acento: 1.44rem;
	}

	.kuaa-result-grid {
		grid-template-columns: 1fr;
	}

	.kuaa-result-card {
		padding: 1rem;
	}

	/* Solo ancho completo en móvil (igual que kuaa-combustible); el
	   padding y el tamaño de letra ya son iguales en las dos a
	   cualquier tamaño de pantalla, así que no se reducen aparte aquí. */
	.kuaa-btn {
		display: block;
		width: 100%;
	}

	.kuaa-social-links {
		gap: 0.75rem;
	}

	.kuaa-progress__text {
		font-size: 0.75rem;
	}
}

/* Small phones (iPhone SE, older/compact Android): the 540px breakpoint
   above is shared with much wider phones, so it isn't tight enough here —
   trims spacing further and shrinks the projection numbers so 3-in-a-row
   never forces horizontal scrolling. */
@media (max-width: 380px) {
	.kuaa-panel {
		padding: 1.25rem 1rem;
	}

	.kuaa-calc {
		--kuaa-text-titulo: 1.2rem;
		--kuaa-text-destacado: 1.9rem;
		--kuaa-text-acento: 1.2rem;
	}

	.kuaa-result-card {
		padding: 0.9rem;
	}

	.kuaa-result-value {
		font-size: 1.5rem;
	}

	.kuaa-projection-grid {
		gap: 0.4rem;
	}

	.kuaa-projection-value {
		font-size: 1.1rem;
	}

	.kuaa-projection-caption {
		font-size: 0.68rem;
		letter-spacing: 0.04em;
	}

	.kuaa-social-link {
		width: 42px;
		height: 42px;
	}

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