/* ============================================================
   PROTOCOLO 21 DIAS — Articulações Blindadas & Mobilidade Renovada
   Tema dark + gold (identidade da LP). Público 42-75+:
   tipografia grande, contraste alto, alvos de toque ≥ 48px.
   ============================================================ */

:root {
	--bg-dark: #080c14;
	--bg-card: #0e1626;
	--bg-card-hover: #142036;
	--accent-gold: #ffc02d;
	--accent-amber: #e6a100;
	--accent-cyan: #00f5d4;
	--accent-blue: #0d99ff;
	--accent-red: #ff4757;
	--accent-green: #2ed573;
	--text-primary: #ffffff;
	--text-secondary: #94a3b8;
	/* Alto contraste WCAG AA para público 50+ */
	--text-muted: #cbd5e1;
	--border-color: rgba(255, 255, 255, 0.08);
	--border-glow: rgba(13, 153, 255, 0.25);
	--font-main: "Plus Jakarta Sans", sans-serif;
	--font-heading: "Poppins", sans-serif;
	--radius-lg: 22px;
	--radius-md: 14px;
	--radius-sm: 10px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html {
	font-size: 16px;
}

body {
	font-family: var(--font-main);
	background-color: var(--bg-dark);
	color: var(--text-primary);
	font-size: 17px;
	line-height: 1.65;
	min-height: 100vh;
	overflow-x: hidden;
	background-image:
		radial-gradient(circle at 12% 8%, rgba(255, 192, 45, 0.06) 0%, transparent 38%),
		radial-gradient(circle at 88% 92%, rgba(13, 153, 255, 0.06) 0%, transparent 40%);
	background-attachment: fixed;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: 17px;
}

.hidden {
	display: none !important;
}

:focus-visible {
	outline: 3px solid var(--accent-gold);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- Utilidades ---------- */
.link-gold {
	color: var(--accent-gold);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.screen {
	min-height: 100vh;
	padding: 24px 20px calc(96px + env(safe-area-inset-bottom));
}

.view {
	animation: viewEntrance 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewEntrance {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-bottom: 18px;
	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4),
	            0 12px 28px -4px rgba(0, 0, 0, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.card-title {
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 6px;
	line-height: 1.35;
}

.card-title-sm {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 6px;
}

.card-sub {
	font-size: 15px;
	color: var(--text-secondary);
	margin-bottom: 14px;
	line-height: 1.6;
}

.section-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	color: var(--accent-blue);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
	background: rgba(13, 153, 255, 0.1);
	padding: 5px 14px;
	border-radius: 30px;
	border: 1px solid rgba(13, 153, 255, 0.2);
}

.section-tag.tag-gold {
	color: var(--accent-gold);
	background: rgba(255, 192, 45, 0.1);
	border-color: rgba(255, 192, 45, 0.25);
}

.section-tag.tag-red {
	color: var(--accent-red);
	background: rgba(255, 71, 87, 0.1);
	border-color: rgba(255, 71, 87, 0.25);
}

.section-tag.tag-green {
	color: var(--accent-green);
	background: rgba(46, 213, 115, 0.1);
	border-color: rgba(46, 213, 115, 0.25);
}

/* ---------- Botões ---------- */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-dev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 16px 32px;
	border-radius: 60px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.3px;
	transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	text-decoration: none;
	line-height: 1.3;
}

.btn-primary {
	background: linear-gradient(135deg, #ff9f00, #ff5500);
	color: #fff;
	box-shadow: 0 8px 28px rgba(255, 85, 0, 0.35);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 44px rgba(255, 85, 0, 0.55);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-dev:active,
.btn-paused-banner:active,
.btn-sm:active {
	transform: scale(0.96);
}

.btn-primary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.btn-secondary {
	background: var(--bg-card-hover);
	border: 1px solid rgba(255, 192, 45, 0.35);
	color: var(--accent-gold);
}

.btn-secondary:hover {
	background: #182742;
}

.btn-danger {
	background: rgba(255, 71, 87, 0.12);
	border: 1px solid rgba(255, 71, 87, 0.4);
	color: var(--accent-red);
}

.btn-danger:hover {
	background: rgba(255, 71, 87, 0.2);
}

.btn-dev {
	background: rgba(13, 153, 255, 0.12);
	border: 1px solid rgba(13, 153, 255, 0.4);
	color: var(--accent-blue);
	font-family: var(--font-main);
	font-weight: 600;
	font-size: 15px;
}

.btn-block {
	width: 100%;
	margin-top: 14px;
}

.btn-sm {
	min-height: 48px;
	padding: 12px 22px;
	font-size: 15px;
}

.btn-paused-banner {
	width: 100%;
	margin-top: 14px;
	min-height: 52px;
	background: rgba(255, 192, 45, 0.08);
	border: 1px dashed rgba(255, 192, 45, 0.4);
	color: var(--accent-gold);
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: 15px;
}

/* ---------- Campos ---------- */
.field {
	display: block;
	margin-bottom: 16px;
}

.field-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-secondary);
	margin-bottom: 8px;
	letter-spacing: 0.2px;
}

.field input,
.field textarea,
.field select,
.field input[type="time"] {
	width: 100%;
	min-height: 56px;
	padding: 14px 18px;
	background: var(--bg-card-hover);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: 17px;
	transition: border-color 0.2s ease;
}

.field textarea {
	resize: vertical;
	min-height: 80px;
}

.field input:focus,
.field textarea:focus {
	border-color: rgba(255, 192, 45, 0.6);
	outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--text-muted);
}

/* ---------- Toasts ---------- */
#toast-container {
	position: fixed;
	top: calc(14px + env(safe-area-inset-top));
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(92vw, 480px);
	pointer-events: none;
}

.toast {
	background: var(--bg-card-hover);
	border: 1px solid rgba(255, 192, 45, 0.35);
	border-left: 5px solid var(--accent-gold);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
	animation: toast-in 0.3s ease;
}

.toast.toast-error {
	border-left-color: var(--accent-red);
	border-color: rgba(255, 71, 87, 0.4);
}

.toast.toast-success {
	border-left-color: var(--accent-green);
	border-color: rgba(46, 213, 115, 0.4);
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================================
   TELA DE LOGIN
   ============================================================ */
#screen-login {
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-wrap {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	padding-top: 4vh;
}

.login-brand {
	text-align: center;
	margin-bottom: 28px;
}

.login-logo {
	font-size: 52px;
	line-height: 1;
	margin-bottom: 10px;
}

.login-title {
	font-family: var(--font-heading);
	font-size: clamp(26px, 6vw, 34px);
	font-weight: 900;
	color: #fff;
	line-height: 1.2;
}

.login-sub {
	font-size: 15px;
	color: var(--accent-gold);
	font-weight: 600;
	margin-top: 6px;
}

.login-card {
	padding: 28px 24px;
}

.login-help {
	margin-top: 18px;
	font-size: 14px;
	color: var(--text-secondary);
	text-align: center;
	line-height: 1.7;
}

.login-disclaimer {
	margin-top: 22px;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.disclaimer-card {
	border-color: rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.02);
}

.disclaimer-text {
	font-size: 14px;
	color: var(--text-muted);
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 8px;
}

.disclaimer-text:last-child {
	margin-bottom: 0;
}

/* ============================================================
   ONBOARDING
   ============================================================ */
.onboarding-wrap {
	max-width: 520px;
	margin: 0 auto;
	padding-top: 3vh;
}

.onboarding-header {
	text-align: center;
	margin-bottom: 24px;
}

.onboarding-logo {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 8px;
}

.onboarding-kicker {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent-gold);
	margin-bottom: 14px;
}

.onboarding-progress {
	height: 8px;
	background: var(--bg-card-hover);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

.ob-progress-bar {
	display: block;
	height: 100%;
	width: 33%;
	background: linear-gradient(90deg, var(--accent-amber), var(--accent-gold));
	border-radius: 10px;
	transition: width 0.35s ease;
}

.ob-step-label {
	font-size: 14px;
	color: var(--text-secondary);
}

.ob-question {
	font-family: var(--font-heading);
	font-size: clamp(22px, 5vw, 28px);
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
	line-height: 1.3;
}

.ob-hint {
	font-size: 15px;
	color: var(--text-secondary);
	margin-bottom: 22px;
}

.ob-error {
	background: rgba(255, 71, 87, 0.12);
	border: 1px solid rgba(255, 71, 87, 0.35);
	color: #ffb3bb;
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 14px;
}

.ob-back {
	margin-top: 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-secondary);
	width: 100%;
	min-height: 48px;
}

.ob-back:hover {
	color: var(--accent-gold);
}

/* Stepper de idade */
.age-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 22px;
}

.age-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--bg-card-hover);
	border: 1px solid rgba(255, 192, 45, 0.3);
	color: var(--accent-gold);
	font-size: 30px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.age-btn:active {
	background: #182742;
	transform: scale(0.96);
}

.age-stepper input {
	width: 130px;
	min-height: 64px;
	text-align: center;
	background: var(--bg-card);
	border: 2px solid rgba(255, 192, 45, 0.45);
	border-radius: var(--radius-md);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 800;
	-moz-appearance: textfield;
	appearance: textfield;
}

.age-stepper input::-webkit-outer-spin-button,
.age-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.age-quick-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 22px;
}

.age-chip {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	font-size: 13.5px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 20px;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.age-chip:hover,
.age-chip.active {
	background: rgba(255, 192, 45, 0.15);
	border-color: var(--accent-gold);
	color: #fff;
}

.age-chip:active {
	transform: scale(0.96);
}

/* Opções de seleção no onboarding */
.ob-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 22px;
}

.ob-options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.ob-option {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	text-align: left;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.ob-option:hover {
	background: var(--bg-card-hover);
	border-color: rgba(255, 192, 45, 0.4);
}

.ob-option:active {
	transform: scale(0.96);
}

.ob-option.selected {
	background: rgba(255, 192, 45, 0.08);
	border: 2px solid var(--accent-gold);
	box-shadow: 0 0 16px rgba(255, 192, 45, 0.15);
}

.ob-back:active {
	transform: scale(0.96);
}

.ob-option-emoji {
	font-size: 26px;
	line-height: 1;
	flex-shrink: 0;
	padding-top: 2px;
}

.ob-option-title {
	display: block;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 3px;
}

.ob-option-sub {
	display: block;
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.4;
}

/* Escala de Dor no Onboarding */
.pain-scale-container {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 22px;
	text-align: center;
}

.pain-badge-display {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 192, 45, 0.12);
	border: 1px solid rgba(255, 192, 45, 0.3);
	padding: 8px 18px;
	border-radius: 30px;
	margin-bottom: 18px;
}

.pain-val {
	font-size: 24px;
	font-weight: 900;
	color: var(--accent-gold);
}

.pain-label {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.pain-buttons-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.pain-btn {
	height: 52px;
	min-height: 52px;
	background: var(--bg-card-hover);
	border: 1px solid var(--border-color);
	color: #fff;
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pain-btn:hover {
	border-color: var(--accent-gold);
	background: #18263f;
}

.pain-btn:active {
	transform: scale(0.96);
}

.pain-btn.active {
	background: var(--accent-gold);
	color: #080c14;
	border-color: var(--accent-gold);
	box-shadow: 0 4px 16px rgba(255, 192, 45, 0.45);
}

/* Resumo do Onboarding (Passo 6) */
.ob-summary-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	color: var(--accent-cyan);
	background: rgba(0, 245, 212, 0.12);
	border: 1px solid rgba(0, 245, 212, 0.3);
	padding: 4px 14px;
	border-radius: 20px;
	letter-spacing: 0.8px;
	margin-bottom: 12px;
}

.ob-summary-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
}

.ob-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-bottom: 10px;
	gap: 12px;
}

.ob-summary-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ob-sum-label {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 600;
}

.ob-sum-val {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	text-align: right;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(8, 12, 20, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border-color);
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.app-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	cursor: pointer;
	text-align: left;
	transition: transform 0.12s ease;
}

.app-brand:active {
	transform: scale(0.96);
}

.app-brand-icon {
	font-size: 26px;
	line-height: 1;
}

.app-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.app-brand-text strong {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-brand-text small {
	font-size: 12px;
	color: var(--accent-gold);
	font-weight: 700;
}

.app-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.day-chip {
	background: rgba(255, 192, 45, 0.12);
	border: 1px solid rgba(255, 192, 45, 0.35);
	border-radius: 30px;
	color: var(--accent-gold);
	font-size: 13px;
	font-weight: 800;
	padding: 6px 14px;
	white-space: nowrap;
}

.streak-chip {
	background: rgba(255, 71, 87, 0.1);
	border: 1px solid rgba(255, 71, 87, 0.3);
	color: #ffb3bb;
	font-size: 13px;
	font-weight: 800;
	padding: 6px 12px;
	border-radius: 30px;
	white-space: nowrap;
}

.main-content {
	max-width: 680px;
	margin: 0 auto;
	padding: 18px 20px calc(40px + env(safe-area-inset-bottom));
}

.view-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.view-title {
	font-family: var(--font-heading);
	font-size: clamp(22px, 5vw, 28px);
	font-weight: 900;
	color: #fff;
	line-height: 1.25;
}

.view-sub {
	font-size: 15px;
	color: var(--text-secondary);
	margin-bottom: 18px;
}

.back-btn {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.back-btn:hover {
	background: var(--bg-card-hover);
	border-color: rgba(255, 192, 45, 0.4);
}

.back-btn:active {
	transform: scale(0.96);
}

/* ---------- Header: botão Menu (mobile) ---------- */
.menu-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 48px;
	padding: 8px 14px;
	border-radius: var(--radius-md);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.menu-btn:hover {
	background: var(--bg-card-hover);
	border-color: rgba(255, 192, 45, 0.4);
}
.menu-btn:active {
	transform: scale(0.96);
}
.menu-btn[aria-expanded="true"] {
	background: rgba(255, 192, 45, 0.12);
	border-color: rgba(255, 192, 45, 0.55);
	color: var(--accent-gold);
}
.menu-btn-icon {
	font-size: 20px;
	line-height: 1;
}
.menu-btn-label {
	white-space: nowrap;
}

/* ---------- Header: botões de acesso rápido (desktop ≥1024px) ---------- */
.header-quick {
	display: none;
	align-items: center;
	gap: 4px;
}
.hq-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 48px;
	min-width: 68px;
	padding: 5px 8px;
	border-radius: var(--radius-md);
	color: var(--text-muted);
	font-size: 11.5px;
	font-weight: 700;
	transition: color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.hq-btn span:first-child {
	font-size: 20px;
	line-height: 1.2;
}
.hq-btn:hover {
	color: #fff;
	background: var(--bg-card-hover);
}
.hq-btn:active {
	transform: scale(0.96);
}
.hq-btn.active {
	color: var(--accent-gold);
	background: rgba(255, 192, 45, 0.1);
}
.hq-btn-danger.active,
.hq-btn-danger:hover {
	color: var(--accent-red);
}
@media (min-width: 1024px) {
	.header-quick {
		display: flex;
	}
	#btn-menu {
		display: none;
	}
}

/* ---------- Menu overlay com Glassmorphism ---------- */
.menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(4, 7, 12, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.menu-overlay {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 72px);
	right: 12px;
	z-index: 150;
	width: min(320px, calc(100vw - 24px));
	background: rgba(14, 22, 38, 0.82);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
	            0 0 0 1px rgba(255, 255, 255, 0.05),
	            inset 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 12px;
	animation: menu-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	text-align: left;
	transition: background 0.2s ease, transform 0.12s ease;
}
.menu-item:hover,
.menu-item:focus-visible {
	background: var(--bg-card-hover);
}
.menu-item:active {
	transform: scale(0.96);
}
.menu-item-icon {
	font-size: 22px;
	line-height: 1;
}
.menu-item-danger {
	color: #ff8a94;
}
.menu-item-danger:hover,
.menu-item-danger:focus-visible {
	background: rgba(255, 71, 87, 0.12);
	color: #ffb3bb;
}
.menu-item-danger:active {
	transform: scale(0.96);
}
.menu-divider {
	height: 1px;
	background: var(--border-color);
	margin: 8px 4px;
}
.menu-group-label {
	padding: 4px 14px 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ============================================================
   HOME
   ============================================================ */
.home-hero {
	padding: 26px 24px;
	background: linear-gradient(175deg, rgba(14, 22, 38, 0.95) 0%, rgba(10, 16, 28, 0.98) 100%);
	border: 1px solid rgba(255, 192, 45, 0.18);
	border-top: 1px solid rgba(255, 192, 45, 0.45);
	box-shadow: 0 10px 32px -4px rgba(0, 0, 0, 0.65),
	            0 0 24px -4px rgba(255, 192, 45, 0.14),
	            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-hero-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
}

.home-hero-title {
	font-family: var(--font-heading);
	font-size: clamp(23px, 5.5vw, 30px);
	font-weight: 900;
	color: #fff;
	line-height: 1.25;
	margin-bottom: 6px;
}

.home-hero-sub {
	font-size: 15.5px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 16px;
}

.home-day-big {
	font-family: var(--font-heading);
	font-size: 58px;
	font-weight: 900;
	line-height: 1;
	color: var(--accent-gold);
	background: rgba(255, 192, 45, 0.08);
	border: 2px solid rgba(255, 192, 45, 0.3);
	border-radius: 20px;
	min-width: 84px;
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.progress-track {
	height: 14px;
	background: var(--bg-card-hover);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 8px;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-amber), var(--accent-gold));
	border-radius: 20px;
	transition: width 0.5s ease;
}

.progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 600;
	margin-bottom: 8px;
}

/* Grade dos 21 dias — MÉDIO 11 do audit-frontend: gap menor para as
   células ficarem mais próximas de 44px em telas estreitas */
.days-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin: 16px 0 14px;
}

/* Etapas de preparação na grade (PREP-01..03) */
.day-cell.prep {
	background: rgba(255, 192, 45, 0.05);
	border-color: rgba(255, 192, 45, 0.28);
	color: var(--accent-gold);
	font-size: 12px;
}
.day-cell.prep.completed {
	background: rgba(46, 213, 115, 0.12);
	border-color: rgba(46, 213, 115, 0.4);
	color: var(--accent-green);
}
.day-cell.prep.open {
	background: rgba(255, 192, 45, 0.12);
	border-color: rgba(255, 192, 45, 0.55);
	box-shadow: 0 0 0 2px rgba(255, 192, 45, 0.3);
}

/* Home: etapas da preparação */
.prep-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.prep-step {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 800;
	background: var(--bg-card-hover);
	color: var(--text-muted);
	border: 2px solid var(--border-color);
}
.prep-step.done {
	background: rgba(46, 213, 115, 0.14);
	color: var(--accent-green);
	border-color: rgba(46, 213, 115, 0.5);
}
.prep-step.current {
	background: rgba(255, 192, 45, 0.14);
	color: var(--accent-gold);
	border-color: rgba(255, 192, 45, 0.6);
	box-shadow: 0 0 0 4px rgba(255, 192, 45, 0.12);
}
.prep-step-line {
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: var(--border-color);
}
.prep-step-line.done {
	background: rgba(46, 213, 115, 0.4);
}

.day-cell {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 800;
	border: 1px solid var(--border-color);
	background: var(--bg-card);
	color: var(--text-muted);
	min-height: 44px;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.day-cell:not(.locked):hover {
	border-color: rgba(255, 192, 45, 0.5);
}

.day-cell:not(.locked):active {
	transform: scale(0.96);
}

.day-cell.completed {
	background: rgba(46, 213, 115, 0.12);
	border-color: rgba(46, 213, 115, 0.4);
	color: var(--accent-green);
}

.day-cell.open {
	background: rgba(255, 192, 45, 0.1);
	border-color: rgba(255, 192, 45, 0.45);
	color: var(--accent-gold);
}

.day-cell.today {
	border-color: var(--accent-gold);
	color: #ffffff;
	background: rgba(255, 192, 45, 0.16);
	animation: today-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	position: relative;
	z-index: 2;
}

@keyframes today-pulse {
	0%, 100% {
		box-shadow: 0 0 0 2px rgba(255, 192, 45, 0.85),
		            0 0 12px rgba(255, 192, 45, 0.35);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(255, 192, 45, 0.4),
		            0 0 22px rgba(255, 192, 45, 0.7);
	}
}

.prep-step:active,
.prep-quick-item:active {
	transform: scale(0.96);
}

.day-cell.has-bonus::after {
	content: "🎁";
	position: absolute;
	top: -7px;
	right: -5px;
	font-size: 12px;
}

.days-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: var(--text-secondary);
}

.days-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	display: inline-block;
}

.dot-done {
	background: rgba(46, 213, 115, 0.5);
}

.dot-open {
	background: rgba(255, 192, 45, 0.5);
}

.dot-locked {
	background: var(--bg-card-hover);
	border: 1px solid var(--border-color);
}

/* ============================================================
   ROTINA DO DIA
   ============================================================ */
.day-block-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 12px;
}

.day-block-emoji {
	font-size: 28px;
}

.day-block-title {
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 800;
	color: #fff;
}

.day-block-sub {
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ex-card {
	padding: 20px;
	margin-bottom: 14px;
	position: relative;
	overflow: hidden;
}

.ex-card.done {
	border-color: rgba(46, 213, 115, 0.45);
	background: rgba(46, 213, 115, 0.04);
}

.ex-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 6px;
}

.ex-title {
	font-family: var(--font-heading);
	font-size: 17.5px;
	font-weight: 800;
	color: #fff;
	line-height: 1.35;
}

.ex-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 10px;
}

.ex-pill {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	background: rgba(13, 153, 255, 0.1);
	border: 1px solid rgba(13, 153, 255, 0.25);
	color: #7cc4ff;
}

.ex-pill.pilar-gold {
	background: rgba(255, 192, 45, 0.1);
	border-color: rgba(255, 192, 45, 0.25);
	color: var(--accent-gold);
}

.ex-pill.pilar-green {
	background: rgba(46, 213, 115, 0.1);
	border-color: rgba(46, 213, 115, 0.25);
	color: var(--accent-green);
}

.ex-video {
	width: 100%;
	border-radius: var(--radius-md);
	background: #000;
	border: 1px solid var(--border-color);
	margin-bottom: 12px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ex-label {
	font-size: 13px;
	font-weight: 800;
	color: var(--accent-gold);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin: 10px 0 4px;
}

.ex-text {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}

.ex-text strong {
	color: #fff;
}

.ex-steps {
	list-style: none;
	counter-reset: step;
	margin: 6px 0 4px;
}

.ex-steps li {
	position: relative;
	padding: 8px 0 8px 40px;
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.55;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.ex-steps li:last-child {
	border-bottom: none;
}

.ex-steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 9px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 192, 45, 0.12);
	border: 1px solid rgba(255, 192, 45, 0.35);
	color: var(--accent-gold);
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ex-cuidados {
	background: rgba(255, 71, 87, 0.06);
	border: 1px solid rgba(255, 71, 87, 0.2);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	color: #ffb3bb;
	margin: 8px 0;
	line-height: 1.5;
}

.ex-adaptacao {
	background: rgba(13, 153, 255, 0.06);
	border: 1px solid rgba(13, 153, 255, 0.2);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	color: #a8d8ff;
	margin: 8px 0;
	line-height: 1.5;
}

.ex-porque {
	font-size: 14px;
	color: var(--text-secondary);
	font-style: italic;
	line-height: 1.55;
	margin-top: 8px;
}

.ex-porque strong {
	color: var(--accent-gold);
	font-style: normal;
}

.ex-toggle {
	width: 100%;
	min-height: 52px;
	margin-top: 12px;
	border-radius: var(--radius-md);
	border: 2px solid rgba(255, 192, 45, 0.35);
	color: var(--accent-gold);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 800;
	background: rgba(255, 192, 45, 0.06);
	transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ex-toggle:hover {
	background: rgba(255, 192, 45, 0.14);
}

.ex-toggle:active {
	transform: scale(0.96);
}

.ex-toggle.done {
	background: rgba(46, 213, 115, 0.14);
	border-color: rgba(46, 213, 115, 0.5);
	color: var(--accent-green);
}

/* Checklist */
.checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 4px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.checklist-item:last-child {
	border-bottom: none;
}

.checklist-box {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	flex-shrink: 0;
	border-radius: 14px;
	border: 2px solid rgba(255, 255, 255, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	color: transparent;
	background: rgba(255, 255, 255, 0.03);
	margin-top: 2px;
	cursor: pointer;
	transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.2s ease,
	            border-color 0.2s ease,
	            color 0.2s ease,
	            box-shadow 0.2s ease;
}

.checklist-box:hover {
	border-color: var(--accent-green);
}

.checklist-box:active {
	transform: scale(0.92);
}

.checklist-item.done .checklist-box {
	background: var(--accent-green);
	border-color: var(--accent-green);
	color: #06130b;
	box-shadow: 0 4px 14px rgba(46, 213, 115, 0.35);
	animation: checkPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkPop {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.18);
	}
	100% {
		transform: scale(1);
	}
}

.checklist-item.done .checklist-text {
	color: var(--text-muted);
	text-decoration: line-through;
}

.checklist-text {
	font-size: 15.5px;
	color: var(--text-primary);
	line-height: 1.5;
	flex: 1;
}

/* Suplemento */
.supp-card {
	border: 2px solid rgba(255, 192, 45, 0.35);
	background: linear-gradient(160deg, rgba(255, 192, 45, 0.06), var(--bg-card) 55%);
}

.supp-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
}

.supp-emoji {
	font-size: 34px;
}

.supp-title {
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 800;
	color: #fff;
}

.supp-info {
	display: grid;
	gap: 4px;
	font-size: 15px;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.supp-info strong {
	color: var(--accent-gold);
}

/* Nutrição */
.nutri-list {
	margin: 8px 0;
}

.nutri-item {
	display: flex;
	gap: 10px;
	padding: 7px 0;
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.nutri-item .nutri-icon {
	flex-shrink: 0;
}

.nutri-evitar .nutri-item {
	color: #ffb3bb;
}

/* Dica de ouro */
.dica-card {
	border: 1px solid rgba(255, 192, 45, 0.4);
	background: rgba(255, 192, 45, 0.05);
}

.dica-text {
	font-size: 16px;
	color: #ffe9b3;
	line-height: 1.65;
}

/* Bloqueio de dia */
.lock-card {
	text-align: center;
	padding: 34px 24px;
}

.lock-emoji {
	font-size: 44px;
	margin-bottom: 10px;
}

.lock-title {
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 800;
	margin-bottom: 8px;
}

.lock-text {
	font-size: 15.5px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 6px;
}

/* ============================================================
   RASTREADOR
   ============================================================ */
.dor-buttons {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 10px 0 6px;
}

.dor-btn {
	min-height: 52px;
	border-radius: var(--radius-md);
	background: var(--bg-card-hover);
	border: 1px solid var(--border-color);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 800;
	color: var(--text-secondary);
	transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dor-btn:hover {
	border-color: rgba(255, 192, 45, 0.4);
}

.dor-btn:active {
	transform: scale(0.96);
}

.dor-btn.selected {
	background: rgba(255, 192, 45, 0.15);
	border-color: var(--accent-gold);
	color: var(--accent-gold);
	box-shadow: 0 0 0 1px rgba(255, 192, 45, 0.3);
}

.dor-btn.dor-alta.selected {
	background: rgba(255, 71, 87, 0.15);
	border-color: var(--accent-red);
	color: #ff8b96;
}

.dor-value {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 600;
	margin-bottom: 16px;
	text-align: center;
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	min-height: 48px;
	padding: 10px 18px;
	border-radius: 40px;
	background: var(--bg-card-hover);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	font-size: 15px;
	font-weight: 700;
	transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
	border-color: rgba(255, 192, 45, 0.4);
}

.chip:active {
	transform: scale(0.96);
}

.chip.selected {
	background: rgba(255, 192, 45, 0.14);
	border-color: var(--accent-gold);
	color: var(--accent-gold);
}

.metrics-note {
	font-size: 13.5px;
	color: var(--text-muted);
	margin-top: 10px;
	text-align: center;
	line-height: 1.5;
}

.chart-wrap {
	position: relative;
	width: 100%;
	margin: 12px 0 6px;
}

#chart-canvas {
	width: 100%;
	height: 220px;
	display: block;
}

.chart-empty {
	text-align: center;
	padding: 26px 10px;
	font-size: 15px;
	color: var(--text-secondary);
	background: var(--bg-card-hover);
	border: 1px dashed var(--border-color);
	border-radius: var(--radius-md);
}

.tracker-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 14px;
}

.tstat {
	background: var(--bg-card-hover);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 12px 8px;
	text-align: center;
}

.tstat-value {
	display: block;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 800;
	color: var(--accent-gold);
	line-height: 1.2;
}

.tstat-value.trend-melhorando {
	color: var(--accent-green);
}

.tstat-value.trend-piorando {
	color: var(--accent-red);
}

.tstat-label {
	display: block;
	font-size: 11.5px;
	color: var(--text-secondary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 3px;
}

/* ============================================================
   SOS
   ============================================================ */
.sos-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sos-card {
	text-align: left;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 20px 16px;
	min-height: 132px;
	display: flex;
	flex-direction: column;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.sos-card:hover {
	background: var(--bg-card-hover);
	border-color: rgba(255, 71, 87, 0.35);
}

.sos-card:active {
	transform: scale(0.96);
}

.sos-card-emoji {
	font-size: 32px;
	margin-bottom: 8px;
}

.sos-card-title {
	font-family: var(--font-heading);
	font-size: 16.5px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 3px;
}

.sos-card-sub {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.sos-step {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.sos-step:last-child {
	border-bottom: none;
}

.sos-step-num {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 71, 87, 0.12);
	border: 1px solid rgba(255, 71, 87, 0.35);
	color: #ff8b96;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sos-step-text strong {
	display: block;
	color: #fff;
	font-size: 15.5px;
	margin-bottom: 2px;
}

.sos-step-text p {
	font-size: 14.5px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.aviso-medico {
	background: rgba(255, 71, 87, 0.08);
	border: 1px solid rgba(255, 71, 87, 0.35);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	margin-top: 14px;
}

.aviso-medico-title {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 800;
	color: #ff8b96;
	margin-bottom: 6px;
}

.aviso-medico p {
	font-size: 14.5px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ============================================================
   PEPTÍDEOS
   ============================================================ */
.pep-locked {
	text-align: center;
	padding: 34px 22px;
}

.pep-locked-emoji {
	font-size: 46px;
	margin-bottom: 10px;
}

.pep-locked-title {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	margin-bottom: 10px;
	line-height: 1.3;
}

.pep-locked-text {
	font-size: 15.5px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 6px;
}

.pep-disclaimer {
	font-size: 13px;
	color: var(--text-muted);
	font-style: italic;
	line-height: 1.6;
	margin-top: 12px;
}

.pep-block {
	margin-bottom: 16px;
}

.pep-block-title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 800;
	color: var(--accent-gold);
	margin-bottom: 8px;
}

.pep-block p {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 8px;
}

.pep-bullets {
	list-style: none;
	margin: 6px 0;
}

.pep-bullets li {
	position: relative;
	padding: 7px 0 7px 30px;
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.pep-bullets li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--accent-gold);
	font-weight: 800;
}

.pep-tb500 {
	background: rgba(13, 153, 255, 0.06);
	border: 1px solid rgba(13, 153, 255, 0.25);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	font-size: 14px;
	color: #a8d8ff;
	line-height: 1.55;
}

/* ============================================================
   BÔNUS
   ============================================================ */
.bonus-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bonus-card {
	padding: 22px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--bg-card);
}

.bonus-card.locked {
	opacity: 0.75;
	background: var(--bg-card-hover);
}

.bonus-day {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--accent-gold);
	background: rgba(255, 192, 45, 0.1);
	border: 1px solid rgba(255, 192, 45, 0.25);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 8px;
}

.bonus-title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 6px;
}

.bonus-text {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}

.bonus-url {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 22px;
	border-radius: 40px;
	background: rgba(255, 192, 45, 0.1);
	border: 1px solid rgba(255, 192, 45, 0.4);
	color: var(--accent-gold);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	margin-top: 6px;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.bonus-url:active {
	transform: scale(0.96);
}

.bonus-locked-text {
	font-size: 14px;
	color: var(--text-muted);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
.time-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 12px;
}

@media (max-width: 420px) {
	.sos-list {
		grid-template-columns: 1fr;
	}

	.dor-buttons {
		grid-template-columns: repeat(4, 1fr);
	}

	.tracker-stats {
		grid-template-columns: 1fr 1fr;
	}

	.time-row {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	body {
		font-size: 17.5px;
	}

	.screen {
		padding-left: 28px;
		padding-right: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ============================================================
   FASE DE PREPARAÇÃO — DESIGN EDITORIAL E REVISTA DIGITAL
   ============================================================ */

/* Banner da Preparação na Home */
.prep-card-featured {
	background: linear-gradient(135deg, #111e38, #0e1628);
	border: 1px solid rgba(255, 192, 45, 0.3);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.prep-featured-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--accent-gold);
	background: rgba(255, 192, 45, 0.12);
	border: 1px solid rgba(255, 192, 45, 0.3);
	padding: 3px 10px;
	border-radius: 12px;
	margin-bottom: 6px;
}

.prep-quick-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 14px;
}

@media (min-width: 520px) {
	.prep-quick-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.prep-quick-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(8, 12, 20, 0.6);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: left;
	transition: all 0.2s ease;
	width: 100%;
}

.prep-quick-item:hover {
	background: rgba(255, 192, 45, 0.08);
	border-color: var(--accent-gold);
	transform: translateY(-2px);
}

.prep-item-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--accent-gold);
	color: #080c14;
	font-weight: 900;
	font-size: 13px;
	flex-shrink: 0;
}

.prep-quick-item strong {
	display: block;
	font-size: 13.5px;
	color: #fff;
	line-height: 1.2;
}

.prep-quick-item small {
	display: block;
	font-size: 11.5px;
	color: var(--text-secondary);
	margin-top: 2px;
}

/* Estrutura do Artigo Editorial */
.prep-editorial-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 8px;
}

.prep-hero-editorial {
	background: linear-gradient(145deg, #13223f 0%, #0a1324 100%);
	border: 1px solid rgba(255, 192, 45, 0.35);
	border-radius: var(--radius-lg);
	padding: 24px 22px;
	position: relative;
	overflow: hidden;
}

.prep-hero-editorial::after {
	content: "";
	position: absolute;
	top: -50px;
	right: -50px;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle, rgba(255, 192, 45, 0.15), transparent 70%);
	pointer-events: none;
}

.prep-badge-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--accent-gold);
	background: rgba(255, 192, 45, 0.14);
	border: 1px solid rgba(255, 192, 45, 0.35);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.prep-main-headline {
	font-family: var(--font-heading);
	font-size: clamp(22px, 5.5vw, 30px);
	font-weight: 900;
	color: #ffffff;
	line-height: 1.25;
	margin-bottom: 10px;
}

.prep-main-subheadline {
	font-size: 16px;
	color: #cbd5e1;
	line-height: 1.6;
	margin-bottom: 16px;
}

.prep-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	color: var(--text-secondary);
}

.prep-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.06);
	padding: 4px 10px;
	border-radius: 12px;
	color: #e2e8f0;
	font-weight: 600;
}

/* Card Editorial de Seção */
.prep-section-card {
	background: linear-gradient(180deg, #0e172a 0%, #0a1120 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.prep-section-header {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prep-section-title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.35;
	display: flex;
	align-items: center;
	gap: 10px;
}

.prep-paragraph {
	font-size: 16px;
	color: #e2e8f0;
	line-height: 1.7;
	margin-bottom: 14px;
}

.prep-paragraph:last-child {
	margin-bottom: 0;
}

.prep-paragraph strong {
	color: #ffffff;
	font-weight: 700;
}

/* Card de Analogia / Destaque Biomecânico */
.prep-analogy-box {
	background: linear-gradient(135deg, rgba(13, 153, 255, 0.1), rgba(0, 245, 212, 0.05));
	border: 1px solid rgba(13, 153, 255, 0.35);
	border-left: 5px solid var(--accent-cyan);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	margin: 16px 0;
}

.prep-analogy-box h4 {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 800;
	color: var(--accent-cyan);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.prep-analogy-box p {
	font-size: 15px;
	color: #e2e8f0;
	line-height: 1.6;
	margin: 0;
}

/* Grid de 4 Pilares */
.prep-pillars-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 14px;
}

@media (min-width: 520px) {
	.prep-pillars-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.prep-pillar-card {
	background: rgba(14, 22, 38, 0.9);
	border: 1px solid rgba(255, 192, 45, 0.2);
	border-radius: var(--radius-md);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prep-pillar-tag {
	font-size: 11px;
	font-weight: 800;
	color: var(--accent-gold);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.prep-pillar-title {
	font-family: var(--font-heading);
	font-size: 15.5px;
	font-weight: 800;
	color: #fff;
}

.prep-pillar-desc {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.45;
}

/* Imagens Editoriais */
.prep-img-wrapper {
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #080c14;
	margin: 14px 0;
}

.prep-img {
	width: 100%;
	max-height: 380px;
	object-fit: cover;
	display: block;
}

.prep-img-legenda {
	font-size: 13px;
	color: var(--text-secondary);
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.4);
	text-align: center;
	line-height: 1.4;
}

/* Listas com Ícones Estilizados */
.prep-list-rich {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 12px 0;
}

.prep-list-rich li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
	font-size: 15px;
	color: #e2e8f0;
	line-height: 1.5;
}

.prep-list-icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	padding-top: 2px;
}

/* Tabela Moderna Editorial */
.prep-table-wrap {
	overflow-x: auto;
	margin: 14px 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
}

.prep-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.prep-table th {
	background: #142036;
	color: var(--accent-gold);
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.prep-table td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: #e2e8f0;
	vertical-align: top;
	line-height: 1.5;
}

.prep-table tr:last-child td {
	border-bottom: none;
}

.prep-table tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.02);
}

/* Destaques e Callouts */
.prep-destaque {
	padding: 18px 20px;
	border-radius: var(--radius-md);
	margin: 14px 0;
	border-left: 4px solid var(--accent-gold);
	background: rgba(255, 192, 45, 0.08);
	font-size: 15.5px;
	color: #fff;
	line-height: 1.6;
}

.prep-destaque-regra {
	border-left-color: var(--accent-cyan);
	background: rgba(0, 245, 212, 0.08);
}

.prep-destaque-custo {
	border-left-color: var(--accent-green);
	background: rgba(46, 213, 115, 0.08);
}

.prep-destaque-aviso {
	border-left-color: var(--accent-red);
	background: rgba(255, 71, 87, 0.08);
}

.prep-destaque-disclaimer {
	border-left-color: var(--accent-blue);
	background: rgba(13, 153, 255, 0.08);
}

/* Card de Objeção / Dúvida */
.prep-objecao-card {
	background: rgba(14, 22, 38, 0.8);
	border: 1px solid rgba(13, 153, 255, 0.25);
	border-left: 4px solid var(--accent-blue);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	margin: 14px 0;
}

.prep-objecao-title {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 6px;
}

.prep-objecao-body {
	font-size: 15px;
	color: #cbd5e1;
	line-height: 1.6;
}

/* Card do Suplemento na Preparação */
.prep-supp-editorial {
	background: linear-gradient(135deg, #13243f, #0d1627);
	border: 2px solid var(--accent-gold);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.prep-supp-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.prep-supp-emoji {
	font-size: 38px;
	line-height: 1;
}

.prep-supp-title {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 900;
	color: #fff;
}

.prep-supp-dose-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	background: rgba(0, 0, 0, 0.3);
	padding: 12px 14px;
	border-radius: var(--radius-md);
	margin-bottom: 14px;
	font-size: 14px;
}

.prep-supp-dose-row strong {
	color: var(--accent-gold);
}

/* Navegação e Rodapé do Artigo */
.prep-footer-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

@media (min-width: 480px) {
	.prep-footer-nav {
		flex-direction: row;
	}
	.prep-footer-nav .btn-primary,
	.prep-footer-nav .btn-secondary {
		flex: 1;
	}
}