/* =========================================================================
   REFORMA 2.0 — F5 · IDENTIDADE VISUAL DA LOJA (Direção B do protótipo)
   -------------------------------------------------------------------------
   Arquivo ÚNICO (tokens + apresentação) para não gastar uma requisição a
   mais no caminho crítico — o orçamento do spec 15 é contrato.

   O tema Porto (theme.css, theme-shop.css, skins/default.css) NÃO é editado:
   ele já consome variáveis CSS, então redefini-las na seção 0 reveste o site
   inteiro. Se este arquivo sumir, o site volta ao visual antigo sem quebrar.

   Carregado por último em includes/head-assets.php — nunca no admin.
   Nada aqui muda comportamento, nomes de classe usados pelo JS ou seletores
   dos testes E2E: só aparência.
   ========================================================================= */

/* ============================ 0. TOKENS ============================== */

:root {
	/* ---- Paleta do protótipo (mundo .mk) ---- */
	--pr-pri:        #1A4FA0;   /* azul institucional (era #0088CC) */
	--pr-pri-ink:    #FFFFFF;
	--pr-ink:        #152438;   /* texto forte */
	--pr-mut:        #5B6B7E;   /* texto secundário */
	--pr-line:       #DFE7F0;   /* bordas */
	--pr-soft:       #F2F6FB;   /* fundo suave */
	--pr-money:      #0E8E56;   /* dinheiro / PIX / confirmação */
	--pr-money-soft: #E7F6EE;
	--pr-warn:       #8A5A0C;   /* era #B97A12: 3,3:1 na etiqueta sobre o creme (5º critique) */
	--pr-warn-soft:  #FCF3E1;
	--pr-crit:       #B3362B;
	--pr-crit-soft:  #FBEBE9;

	/* ---- Cores por TIPO de lista (aux_lista_tipo real) ---- */
	--pr-artes:        #7B4FB3;  --pr-artes-soft:   #F1EAFA;
	--pr-mochila:      #1A4FA0;  --pr-mochila-soft: #E8F0FB;
	--pr-livros:       #0B6B55;  --pr-livros-soft:  #E3F4EF;
	--pr-extras:       #8A5A0C;  --pr-extras-soft:  #FCF3E1;

	/* ---- Forma ---- */
	--pr-r:      12px;   /* cartões */
	--pr-r-btn:  10px;   /* botões */
	--pr-r-inp:   9px;   /* campos */
	--pr-shadow:      0 1px 2px rgba(21, 36, 56, .04);
	--pr-shadow-lift: 0 8px 24px rgba(21, 36, 56, .10);

	/* =====================================================================
	   Ponte para o tema Porto: as variáveis abaixo são as MESMAS que
	   css/skins/default.css define. Ao sobrescrevê-las, links, botões,
	   ícones e destaques do tema inteiro passam a usar a paleta nova.
	   ===================================================================== */
	--primary:       #1A4FA0;
	--primary-100:   #174792;
	--primary-200:   #154084;
	--primary-300:   #123876;
	--primary--100:  #1F5CB8;
	--primary--200:  #2367C9;
	--primary--300:  #2872DA;
	--primary-rgba-0:  rgba(26, 79, 160, 0);
	--primary-rgba-10: rgba(26, 79, 160, 0.1);
	--primary-rgba-20: rgba(26, 79, 160, 0.2);
	--primary-rgba-30: rgba(26, 79, 160, 0.3);
	--primary-rgba-40: rgba(26, 79, 160, 0.4);
	--primary-rgba-50: rgba(26, 79, 160, 0.5);
	--primary-rgba-60: rgba(26, 79, 160, 0.6);
	--primary-rgba-70: rgba(26, 79, 160, 0.7);
	--primary-rgba-80: rgba(26, 79, 160, 0.8);
	--primary-rgba-90: rgba(26, 79, 160, 0.9);

	/* verde do dinheiro entra como "tertiary" do tema (era teal #2BAAB1) */
	--tertiary:      #0E8E56;
	--tertiary-100:  #0C7C4B;
	--tertiary-200:  #0B7044;
	--tertiary-300:  #09643C;
	--tertiary--100: #12A263;
	--tertiary--200: #14B06B;
	--tertiary--300: #17BE74;
	--tertiary-rgba-0:  rgba(14, 142, 86, 0);
	--tertiary-rgba-10: rgba(14, 142, 86, 0.1);
	--tertiary-rgba-20: rgba(14, 142, 86, 0.2);
	--tertiary-rgba-30: rgba(14, 142, 86, 0.3);
	--tertiary-rgba-40: rgba(14, 142, 86, 0.4);
	--tertiary-rgba-50: rgba(14, 142, 86, 0.5);
	--tertiary-rgba-60: rgba(14, 142, 86, 0.6);
	--tertiary-rgba-70: rgba(14, 142, 86, 0.7);
	--tertiary-rgba-80: rgba(14, 142, 86, 0.8);
	--tertiary-rgba-90: rgba(14, 142, 86, 0.9);

	/* cinza escuro do tema alinhado ao --pr-ink */
	--quaternary:      #152438;
	--quaternary-100:  #101C2C;
	--quaternary-200:  #0D1725;
	--quaternary-300:  #0A121D;
	--quaternary--100: #1D3149;
	--quaternary--200: #223A56;
	--quaternary--300: #274263;

	--default: var(--pr-mut);
	--border-radius:   var(--pr-r-btn);
	--border-radius2x: var(--pr-r);
}


/* ---------- 1. Base tipográfica ---------- */
body {
	color: var(--pr-ink);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
p { color: var(--pr-ink); }
.text-muted, small.text-muted { color: var(--pr-mut) !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--pr-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(24px, 3.4vw, 32px); }
h2 { font-size: clamp(21px, 2.8vw, 26px); }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

a { color: var(--pr-pri); }
a:hover { color: var(--primary-100); }

/* foco visível e consistente (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--pr-pri);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- 2. Botões ---------- */
.btn {
	border-radius: var(--pr-r-btn);
	font-weight: 700;
	letter-spacing: 0;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-lg  { border-radius: var(--pr-r-btn); font-size: 16px; padding: 13px 24px; }
.btn-sm  { border-radius: 8px; }
.btn-modern { text-transform: none; font-weight: 800; }

.btn-primary {
	background-color: var(--pr-pri);
	border-color: var(--pr-pri);
	color: var(--pr-pri-ink);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
}
.btn-success {
	background-color: var(--pr-money);
	border-color: var(--pr-money);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
	background-color: var(--tertiary-100) !important;
	border-color: var(--tertiary-100) !important;
}
.btn-outline-primary {
	color: var(--pr-pri);
	border-color: var(--pr-line);
	border-width: 1.5px;
	background: #fff;
}
.btn-outline-primary:hover { background: var(--pr-mochila-soft); color: var(--primary-200); border-color: var(--pr-pri); }

/* ---------- 3. Cartões e superfícies ---------- */
.card {
	border-radius: var(--pr-r);
	border: 1.5px solid var(--pr-line);
	box-shadow: var(--pr-shadow);
	background: #fff;
}
.card.border-0 { border: 1.5px solid var(--pr-line) !important; }
.card-body { padding: 16px 18px; }
.bg-color-grey { background-color: #fff !important; }

hr.solid { border-color: var(--pr-line); opacity: 1; }

.alert { border-radius: var(--pr-r-btn); border-width: 0; border-left-width: 4px; font-weight: 600; }
.alert-danger  { background: var(--pr-crit-soft);  color: #8C2A21; border-left-color: var(--pr-crit); }
.alert-success { background: var(--pr-money-soft); color: #0A6B41; border-left-color: var(--pr-money); }
.alert-warning { background: var(--pr-warn-soft);  color: #7A5307; border-left-color: var(--pr-warn); }
.alert-info    { background: var(--pr-mochila-soft); color: #133A75; border-left-color: var(--pr-pri); }

/* ---------- 4. Formulários ---------- */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"], select, textarea {
	border-radius: var(--pr-r-inp);
	border: 1.5px solid var(--pr-line);
	color: var(--pr-ink);
	font-size: 15px;
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus {
	border-color: var(--pr-pri);
	box-shadow: 0 0 0 3px var(--primary-rgba-10);
}
label, .form-label { color: var(--pr-mut); font-weight: 700; font-size: 12.5px; }

/* ---------- 5. Selos / badges ---------- */
.badge { border-radius: 999px; font-weight: 800; font-size: 10.5px; padding: 4px 9px; letter-spacing: .02em; }

/* ---------- 6. Cabeçalho e rodapé ---------- */
#header .header-top { border-bottom: 1px solid var(--pr-line); }
#header .header-body { border-top: 0; box-shadow: none; }
#footer { border-top: 1px solid var(--pr-line); }

/* ---------- 7. Tabelas do funil ---------- */
.table > thead th {
	background: var(--pr-soft);
	color: var(--pr-mut);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1.5px solid var(--pr-line);
}
.table > tbody td { border-color: var(--pr-line); vertical-align: middle; }

/* =========================================================================
   8. HOME — escolha da escola (layout do protótipo aprovado)
   ========================================================================= */
.hero-escolas { padding: 4px 0 2px; }
.hero-escolas .crumb {
	font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pr-mut); font-weight: 800; margin-bottom: 2px;
}
.hero-escolas h1 { margin: 0 0 4px; }
.hero-escolas .lede { color: var(--pr-mut); max-width: 62ch; margin: 0; font-size: 14.5px; }

/* serve para <a> e para <button> (escola com senha abre o modal) */
.escola-card {
	display: flex; align-items: center; gap: 14px;
	width: 100%; height: 100%; text-align: left;
	border: 1.5px solid var(--pr-line);
	border-radius: var(--pr-r);
	background: #fff;
	padding: 14px;
	font: inherit;
	color: var(--pr-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* o tema sublinha links no mobile — o cartão não é um link de texto */
.escola-card, .escola-card:hover, .escola-card:focus,
.escola-card * { text-decoration: none !important; }
.escola-card:hover, .escola-card:focus { color: var(--pr-ink); }
.escola-card .esc-info { flex: 1; min-width: 0; }
.escola-card .esc-nome { display: block; }
.escola-card:hover { border-color: var(--pr-pri); box-shadow: var(--pr-shadow-lift); transform: translateY(-1px); }
.escola-card .esc-logo {
	width: 58px; height: 58px; flex: none;
	border-radius: 12px; background: var(--pr-soft);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.escola-card .esc-logo img { max-width: 46px; max-height: 46px; object-fit: contain; }
.escola-card .esc-nome {
	margin: 0 0 5px; font-size: 15px; font-weight: 700;
	color: var(--pr-ink); line-height: 1.25;
}
.escola-card .selos { display: flex; flex-wrap: wrap; gap: 5px; }
.escola-card .esc-seta { margin-left: auto; color: var(--pr-pri); font-size: 18px; flex: none; }

.selo {
	font-size: 10.5px; font-weight: 800; border-radius: 999px;
	padding: 3px 9px; letter-spacing: .02em; white-space: nowrap;
}
.selo-senha { background: #FCE9C8; color: #7A5307; }
.selo-pix   { background: var(--pr-money-soft);  color: var(--pr-money); }
.selo-artes { background: var(--pr-artes-soft);  color: var(--pr-artes); }
.selo-prazo { background: var(--pr-soft);        color: var(--pr-mut); }

@media (max-width: 575.98px) {
	.escola-card { padding: 12px; gap: 11px; }
	.escola-card .esc-logo { width: 48px; height: 48px; }
	.escola-card .esc-logo img { max-width: 38px; max-height: 38px; }
	.escola-card .esc-nome { font-size: 14px; }
}

/* =========================================================================
   9. MONTAGEM — harmoniza a sanfona (que já nasceu com a paleta) com o tema
   ========================================================================= */
.acc2-hd .card.bg-dark {
	background: var(--pr-ink) !important;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
}
.acc2-hd .card.bg-dark .text-warning { color: #F0D9A0 !important; }

/* =========================================================================
   10. AVISO DA ESCOLA — recado importante, sem tomar a tela do celular
   ========================================================================= */
.school-aviso {
	background: var(--pr-warn-soft);
	border-left: 4px solid var(--pr-warn);
	border-radius: var(--pr-r-btn);
	padding: 12px 15px;
	color: #7A5307;
	font-weight: 500;
}
.school-aviso > summary {
	display: none; /* no computador o recado cabe inteiro: sem "ver mais" */
}
.school-aviso-corpo p:last-child { margin-bottom: 0; }
.school-aviso-corpo { font-size: 14px; }

@media (max-width: 575.98px) {
	.school-aviso > summary {
		display: block;
		cursor: pointer;
		font-weight: 700;
		font-size: 13.5px;
		list-style: none;
	}
	.school-aviso > summary::-webkit-details-marker { display: none; }
	.school-aviso-mais {
		display: block;
		font-size: 12px;
		font-weight: 800;
		text-decoration: underline;
		margin-top: 4px;
	}
	.school-aviso[open] > summary .school-aviso-resumo,
	.school-aviso[open] > summary .school-aviso-mais { display: none; }
	.school-aviso[open] > summary::after {
		content: 'recado da escola';
		font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	}
	.school-aviso-corpo { margin-top: 6px; }
}

/* ---------- cupom discreto (era um campo em destaque antes do endereço) ---- */
.cupom-caixa { border: 0; }
.cupom-link {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pr-mut);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 6px 0;
}
.cupom-link::-webkit-details-marker { display: none; }
.cupom-link:hover { color: var(--pr-pri); }
.cupom-caixa[open] .cupom-link { color: var(--pr-ink); }

/* =========================================================================
   9b. PAGAMENTO — a confiança tem que estar visível na hora de digitar o cartão
   ========================================================================= */
.selos-confianca {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
	border: 1.5px solid var(--pr-line);
	border-radius: var(--pr-r-btn);
	background: var(--pr-soft);
	padding: 10px 14px;
	margin: 0 0 16px;
}
.selos-confianca .sc-item {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700; color: var(--pr-mut);
}
.selos-confianca .sc-lock { color: var(--pr-money); }
.selos-confianca .sc-item strong { color: var(--pr-ink); }
.selos-confianca .sc-bandeiras {
	display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
	font-size: 26px; line-height: 1; color: var(--pr-mut);
}
.selos-confianca .sc-pix {
	font-size: 12px; font-weight: 800; letter-spacing: .04em;
	background: var(--pr-money-soft); color: var(--pr-money);
	border-radius: 6px; padding: 4px 8px;
}
@media (max-width: 575.98px) {
	.selos-confianca { gap: 8px 12px; padding: 10px 12px; }
	.selos-confianca .sc-bandeiras { margin-left: 0; font-size: 22px; }
	.selos-confianca .sc-item { font-size: 12.5px; }
}

/* =========================================================================
   10c. PÁGINA DA ESCOLA (site/nome-da-escola) — porta de entrada por escola
   ========================================================================= */
.pagina-escola .main { padding-bottom: 16px; } /* 13/10: era 90px — a barra é grudada (não fixa), não precisa de folga */
.esc-hero {
	display: grid; grid-template-columns: 104px 1fr; gap: 22px; align-items: start;
	padding: 26px 0 18px;
}
.esc-hero-brasao {
	width: 104px; height: 104px; border-radius: 18px; background: var(--pr-soft);
	border: 1px solid var(--pr-line); display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.esc-hero-brasao img { max-width: 76px; max-height: 76px; object-fit: contain; }
.esc-hero h1 { font-size: clamp(25px, 4vw, 38px); line-height: 1.07; margin: 0 0 10px; }
.esc-hero .lede { color: var(--pr-mut); font-size: 16px; margin: 0 0 14px; max-width: 58ch; }
.esc-selos { margin-bottom: 18px; gap: 7px; }
.esc-selos .selo { font-size: 12px; padding: 5px 11px; }
.selo-parcela { background: var(--pr-mochila-soft); color: var(--pr-pri); }
.esc-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

.esc-secao { padding: 22px 0; border-top: 1px solid var(--pr-line); }
.esc-secao h2 { font-size: 21px; margin: 0 0 4px; }
.esc-sub { color: var(--pr-mut); font-size: 14.5px; margin: 0 0 16px; }

.esc-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.esc-lista {
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); background: #fff;
	padding: 16px; display: flex; flex-direction: column; gap: 9px;
}
.esc-lista:hover { border-color: var(--pr-pri); box-shadow: var(--pr-shadow-lift); }
.esc-tipo {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.esc-tipo i { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; }
.t-pap .esc-tipo { color: var(--pr-pri); } .t-pap .esc-tipo i { background: var(--pr-mochila-soft); }
.t-liv .esc-tipo { color: var(--pr-livros); } .t-liv .esc-tipo i { background: var(--pr-livros-soft); }
.t-art .esc-tipo { color: var(--pr-artes); } .t-art .esc-tipo i { background: var(--pr-artes-soft); }
.t-ing .esc-tipo { color: var(--pr-extras); } .t-ing .esc-tipo i { background: var(--pr-extras-soft); }
.esc-lista h3 { font-size: 16.5px; font-weight: 750; margin: 0; }
.esc-meta { color: var(--pr-mut); font-size: 13.5px; margin: 0; }
.esc-preco { margin: auto 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.esc-preco b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.esc-preco span { font-size: 12.5px; color: var(--pr-mut); font-weight: 700; }
.esc-escolhe {
	background: var(--pr-money-soft); color: var(--pr-money);
	font-size: 12.5px; font-weight: 800; border-radius: 9px; padding: 7px 10px; margin: 0;
}
.esc-lista .btn { width: 100%; }
/* a relação saiu do caminho obrigatório: quem quiser conferir a lista inteira
   antes de entrar continua tendo por onde, discretamente */
.esc-ver-lista {
	display: block; text-align: center; margin-top: 8px; padding: 6px;
	font-size: 13px; font-weight: 600; color: var(--pr-mut); text-decoration: underline;
}
.esc-ver-lista:hover { color: var(--pr-pri); }

.esc-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.esc-passo { background: var(--pr-soft); border-radius: var(--pr-r); padding: 16px; }
.esc-passo .n { font-size: 11.5px; font-weight: 800; color: var(--pr-pri); letter-spacing: .1em; }
.esc-passo h4 { margin: 6px 0 4px; font-size: 15.5px; }
.esc-passo p { margin: 0; color: var(--pr-mut); font-size: 14px; }

.esc-confianca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.esc-confianca .tijolo { border: 1.5px solid var(--pr-line); border-radius: 12px; padding: 13px 14px; }
.esc-confianca b { display: block; font-size: 14px; margin-bottom: 2px; }
.esc-confianca span { font-size: 13px; color: var(--pr-mut); }

/* porta de senha da página da escola (fatia 14) */
.esc-senha-card {
	max-width: 460px; margin: 8px auto; text-align: center;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r);
	background: #fff; padding: 26px 22px; box-shadow: var(--pr-shadow);
}
.esc-senha-cadeado { font-size: 34px; margin-bottom: 6px; }
.esc-senha-card h2 { font-size: 19px; }
.esc-senha-rotulo {
	display: block; text-align: left; font-size: 12px; font-weight: 800;
	letter-spacing: .05em; text-transform: uppercase; color: var(--pr-mut);
	margin: 14px 0 4px;
}
.esc-senha-linha { display: flex; gap: 8px; }
.esc-senha-linha input { flex: 1; min-height: 48px; }
.esc-senha-linha .btn { min-width: 110px; }
.esc-senha-erro { color: var(--pr-crit); font-weight: 700; font-size: 14px; margin: 10px 0 0; }
.esc-senha-ajuda { font-size: 13px; color: var(--pr-mut); margin: 14px 0 0; }

.esc-fixa {
	position: sticky; bottom: 0; z-index: 60; background: #fff;
	border-top: 1.5px solid var(--pr-line); box-shadow: 0 -8px 24px rgba(15,25,40,.10);
	padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.esc-fixa-txt { font-size: 13.5px; color: var(--pr-mut); font-weight: 700; }
.esc-fixa-txt b { display: block; font-size: 18px; color: var(--pr-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
	.esc-hero { grid-template-columns: 72px 1fr; gap: 14px; padding: 18px 0 12px; }
	.esc-hero-brasao { width: 72px; height: 72px; border-radius: 14px; }
	.esc-hero-brasao img { max-width: 52px; max-height: 52px; }
	.esc-listas, .esc-passos { grid-template-columns: 1fr; }
	.esc-confianca { grid-template-columns: 1fr 1fr; }
	.esc-acoes .btn { flex: 1 1 100%; }
	.esc-fixa { padding: 10px 14px; }
}

/* =========================================================================
   10b. VITRINE DA ESCOLA — filtro por série (eram até 17 listas empilhadas)
   ========================================================================= */
.filtro-series { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtro-series-rotulo {
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--pr-mut); margin-right: 4px;
}
.filtro-serie {
	border: 1.5px solid var(--pr-line);
	background: #fff;
	color: var(--pr-ink);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	min-height: 40px;
}
.filtro-serie:hover { border-color: var(--pr-pri); }
.filtro-serie.ativo { background: var(--pr-pri); border-color: var(--pr-pri); color: #fff; }
.filtro-series-vazio { color: var(--pr-mut); font-size: 14px; }
.filtro-serie-limpar {
	border: 0; background: transparent; color: var(--pr-pri);
	font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0;
}

/* =========================================================================
   11. CELULAR — o que a auditoria mediu: barra ocupando 1/3 da tela,
   alvos de 18 px e informação de venda em letra de 10 px
   ========================================================================= */
@media (max-width: 575.98px) {
	/* Barra fixa da montagem: media 212 px de uma tela de 664 (32%) porque
	   empilhava total + 2 botões. Vira total em cima e botões lado a lado.
	   O "comprar também para o outro filho" continua ali — com 2 filhos ele
	   é essencial —, só que compacto. */
	.barra-final {
		padding: 8px 10px !important;
		gap: 6px !important;
		justify-content: space-between !important;
	}
	.barra-final-total {
		flex: 1 0 100% !important;
		font-size: 13px !important;
		padding-left: 2px !important;
		line-height: 1.25;
	}
	.barra-final .btn {
		flex: 1 1 0;
		margin-bottom: 0 !important;
		padding: 10px 8px !important;
		font-size: 12.5px !important;
		white-space: normal;
		line-height: 1.2;
	}

	/* escolher frete e forma de pagamento: o rótulo inteiro vira alvo */
	.form-check:has(input[name="pedido_tipo_frete"]) {
		border: 1.5px solid var(--pr-line);
		border-radius: var(--pr-r-btn);
		padding: 12px 12px 12px 40px;
		margin-bottom: 8px;
		min-height: 52px;
		display: flex;
		align-items: center;
	}
	.form-check:has(input[name="pedido_tipo_frete"]:checked) {
		border-color: var(--pr-pri);
		background: var(--pr-mochila-soft);
	}
	input[name="pedido_tipo_frete"], .payment-option input[type="radio"] {
		width: 22px !important; height: 22px !important; margin-top: 0 !important;
	}
	.form-check:has(input[name="pedido_tipo_frete"]) .form-check-label {
		font-size: 15px; font-weight: 600; width: 100%; cursor: pointer;
	}

	/* letra mínima legível onde a loja vende e onde ela tranquiliza */
	.payment-option, .payment-option * { font-size: 13px !important; }
	.payment-option .h4, .payment-option strong { font-size: 17px !important; }
	.table th, .table td { font-size: 12.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.escola-card, .btn { transition: none; }
	.escola-card:hover { transform: none; }
}

/* =========================================================================
   15. ESCOLHA DA SÉRIE E DAS LISTAS (_passo3.php · /escolha_serie)
   -------------------------------------------------------------------------
   Última tela do funil que ainda estava com o tema antigo — e a que decide o
   tamanho da compra. A auditoria de 21/08 achou aqui dois defeitos de dinheiro
   (campo de série em branco e botão prometendo mais do que o carrinho recebia)
   e dez pontos de usabilidade. Classes com prefixo p3- para não vazar para o
   plantão, que tem a sua própria cópia da tela.
   ========================================================================= */

/* ---- topo: caminho de volta + trilha do pedido ---- */
.p3-topo {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; padding: 14px 0 6px;
	border-bottom: 1px solid var(--pr-line); margin-bottom: 18px;
}
.p3-voltar {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; font-weight: 700; color: var(--pr-pri); text-decoration: none;
}
.p3-voltar:hover, .p3-voltar:focus { text-decoration: underline; color: var(--pr-pri); }

.p3-trilha {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600;
}
.p3-trilha li { color: var(--pr-mut); display: flex; align-items: center; gap: 8px; }
.p3-trilha li::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--pr-line); }
.p3-trilha li:last-child::after { display: none; }
.p3-trilha li.feito { color: var(--pr-money); }
.p3-trilha li.feito::after { background: var(--pr-money); }
.p3-trilha li.aqui { color: var(--pr-pri); font-weight: 700; }

/* ---- cabeçalho da etapa ---- */
.p3-secao { padding: 0 0 28px; }
.p3-cabeca { margin: 6px 0 18px; }
.p3-titulo {
	font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.22;
	margin: 0; color: var(--pr-ink); text-wrap: balance;
}
.p3-titulo b { color: var(--pr-pri); font-weight: 700; }
.p3-apoio { margin: 6px 0 0; font-size: 14.5px; color: var(--pr-mut); max-width: 68ch; }

/* ---- cartões dos filhos: "de quem é a lista" e "de que ano" na mesma tela
        (eram duas, e a primeira era dominada por dois EXCLUIR vermelhos) ---- */
.p3-filhos { display: grid; gap: 10px; margin: 4px 0 12px; }
.p3-filho {
	display: grid; grid-template-columns: 1fr auto; align-items: center;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); background: #fff;
	box-shadow: var(--pr-shadow); overflow: hidden;
}
.p3-filho.sel { border-color: var(--pr-pri); box-shadow: inset 0 0 0 1px var(--pr-pri), var(--pr-shadow); }
/* custom.css força display/align/justify em todo <button> abaixo de 576px
   com !important; sem reafirmar aqui, o cartão perde a grade no celular */
.p3-filho__botao {
	display: grid !important;
	align-items: center !important;
	justify-content: stretch !important;
	grid-template-columns: 26px 1fr; gap: 13px;
	background: none; border: 0; padding: 14px 6px 14px 16px; margin: 0;
	font: inherit; color: var(--pr-ink); text-align: left; cursor: pointer; width: 100%;
}
/* FATIA 49 — era um QUADRADO (checkbox): o pai tentava marcar os dois
   filhos e não conseguia. É uma escolha por vez — então é redondo. */
.p3-filho__marca {
	width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pr-line);
	display: grid; place-items: center; font-size: 13px; color: transparent; line-height: 1;
}
.p3-filho.sel .p3-filho__marca { background: var(--pr-pri); border-color: var(--pr-pri); color: #fff; }
.p3-filho__corpo { display: grid; gap: 2px; min-width: 0; }
.p3-filho__nome { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.p3-filho__meta { font-size: 12.5px; color: var(--pr-mut); line-height: 1.45; }
/* AUDITORIA UX: era um botão EXCLUIR vermelho, a coisa mais visível da tela. */
.p3-filho__editar {
	font-size: 13px; font-weight: 600; color: var(--pr-mut); text-decoration: underline;
	padding: 14px 16px; white-space: nowrap;
}
.p3-filho__editar:hover { color: var(--pr-pri); }
.p3-filho__botao:focus-visible,
.p3-filho__editar:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: -3px; }
.p3-add-filho {
	display: inline-block; font-size: 14px; font-weight: 600; color: var(--pr-pri);
	text-decoration: none; padding: 8px 0; min-height: 44px; line-height: 28px;
}
.p3-add-filho:hover { text-decoration: underline; }

/* ---- cadastro e edição do estudante (/alunos) ---- */
.p2-form { display: grid; gap: 16px; max-width: 46rem; }
.p2-bloco { border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); padding: 14px 16px; display: grid; gap: 14px; margin: 0; }
.p2-bloco__titulo { font-size: 13px; font-weight: 700; color: var(--pr-mut); text-transform: uppercase; letter-spacing: .06em; float: none; width: auto; padding: 0 6px; }
.p2-campo { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.p2-campo__rot { font-size: 13.5px; font-weight: 600; color: var(--pr-ink); }
.p2-campo__entrada {
	font: inherit; font-size: 15px; color: var(--pr-ink); background: #fff;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r-btn);
	padding: 12px 14px; min-height: 48px; width: 100%;
}
.p2-campo__entrada:focus { outline: 3px solid var(--pr-pri); outline-offset: 1px; border-color: var(--pr-pri); }
.p2-opcoes { display: flex; gap: 10px; flex-wrap: wrap; }
.p2-opcao {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	border: 1.5px solid var(--pr-line); border-radius: 999px; padding: 11px 16px;
	min-height: 44px; font-size: 14px; font-weight: 600; margin: 0;
}
.p2-opcao:has(input:checked) { border-color: var(--pr-pri); background: var(--pr-mochila-soft); color: var(--pr-pri); }
/* remover fica ao alcance, mas sem gritar: era um EXCLUIR vermelho no topo */
.p2-remover { margin-top: 18px; }
.p2-remover .p3-btn { color: var(--pr-crit); }

/* ---- a tela de acesso diz de que escola é a lista ---- */
.acesso-escola {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	border-left: 3px solid var(--pr-pri); background: var(--pr-mochila-soft);
	border-radius: 0 var(--pr-r) var(--pr-r) 0; padding: 12px 16px; margin-bottom: 18px;
}
.acesso-escola__linha { margin: 0; font-size: 14.5px; color: var(--pr-ink); }
.acesso-escola__linha b { color: var(--pr-pri); }

/* ---- fichas de série (mesma classe que o totem já usa: .serie-botoes) ---- */
.p3-escolher { margin-top: 18px; display: grid; gap: 12px; }
.p3-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.p3-ficha {
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--pr-ink);
	padding: 11px 16px; border-radius: 999px; background: #fff;
	border: 1.5px solid var(--pr-line); min-height: 44px;
}
.p3-ficha:hover { border-color: var(--pr-pri); }
.p3-ficha[aria-pressed="true"], .p3-ficha.sel {
	background: var(--pr-pri); border-color: var(--pr-pri); color: var(--pr-pri-ink);
}
.p3-ficha:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }

/* ---- botões da tela ---- */
.p3-btn {
	font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; line-height: 1.25;
	border-radius: var(--pr-r-btn); padding: 14px 22px; border: 1.5px solid transparent;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; text-align: center; min-height: 52px;
}
.p3-btn small { font-weight: 500; font-size: 12.5px; opacity: .92; }
.p3-btn--pri { background: var(--pr-pri); color: var(--pr-pri-ink); }
.p3-btn--pri:hover { background: var(--primary-100); color: var(--pr-pri-ink); }
.p3-btn--linha { background: #fff; border-color: var(--pr-line); color: var(--pr-ink); }
.p3-btn--linha:hover { border-color: var(--pr-pri); color: var(--pr-pri); }
.p3-btn--fantasma {
	background: none; border-color: transparent; color: var(--pr-mut);
	font-weight: 600; font-size: 13.5px; text-decoration: underline; min-height: 0; padding: 8px;
}
.p3-btn--largo { width: 100%; }
.p3-btn:disabled { opacity: .5; cursor: not-allowed; }
.p3-btn:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }

/* ---- cartões de lista ---- */
.p3-listas { display: grid; gap: 10px; margin: 4px 0 16px; }
.p3-cartao {
	display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: start;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); background: #fff;
	padding: 14px 16px; cursor: pointer; text-align: left; width: 100%;
	font: inherit; color: var(--pr-ink); box-shadow: var(--pr-shadow);
	transition: border-color .15s, box-shadow .15s;
}
.p3-cartao:hover { border-color: var(--pr-pri); }
.p3-cartao[aria-pressed="true"] { border-color: var(--pr-pri); box-shadow: inset 0 0 0 1px var(--pr-pri); }
.p3-cartao:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }
.p3-cartao__marca {
	width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--pr-line);
	display: grid; place-items: center; margin-top: 2px; flex: none;
}
.p3-cartao__marca::after { content: "\2713"; font-size: 13px; line-height: 1; color: transparent; }
.p3-cartao[aria-pressed="true"] .p3-cartao__marca {
	background: var(--pr-pri); border-color: var(--pr-pri);
}
.p3-cartao[aria-pressed="true"] .p3-cartao__marca::after { color: #fff; }
.p3-cartao__corpo { display: block; min-width: 0; }
.p3-cartao__nome { display: block; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.p3-cartao__meta { display: block; font-size: 12.5px; color: var(--pr-mut); margin-top: 3px; line-height: 1.5; }
.p3-cartao__valor {
	font-weight: 700; font-size: 17px; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.p3-tipo {
	display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px;
	margin-bottom: 5px;
}
.p3-tipo--artes   { background: var(--pr-artes-soft);   color: var(--pr-artes); }
.p3-tipo--mochila { background: var(--pr-mochila-soft); color: var(--pr-mochila); }
.p3-tipo--livros  { background: var(--pr-livros-soft);  color: var(--pr-livros); }
.p3-tipo--extras  { background: var(--pr-extras-soft);  color: var(--pr-extras); }

/* o selo existe porque a compra direta não consegue escolher por você */
.selo-escolha-unica {
	display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
	background: var(--pr-mochila-soft); color: var(--pr-pri); border: 1px solid var(--pr-pri);
	font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
}

/* ---- barra do total: o valor deixa de morar dentro do botão ---- */
/* No computador a barra fica no fluxo: grudada no rodapé ela subia para o fim
   da janela e passava por cima das próprias listas. No celular ela gruda —
   lá o total precisa mesmo acompanhar a rolagem. */
.p3-barra {
	background: #fff; border: 1.5px solid var(--pr-line); border-radius: var(--pr-r);
	box-shadow: var(--pr-shadow); padding: 14px 16px; display: grid; gap: 12px;
}
.p3-fora-da-barra { text-align: center; margin-top: 6px; }
.p3-barra__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p3-barra__rot { font-size: 13px; color: var(--pr-mut); font-weight: 600; }
.p3-barra__nums { text-align: right; }
.p3-barra__val {
	display: block; font-size: 23px; font-weight: 700; letter-spacing: -.025em;
	color: var(--pr-ink); font-variant-numeric: tabular-nums;
}
.p3-barra__cond { display: block; font-size: 12.5px; color: var(--pr-mut); font-weight: 600; }
.p3-barra__cond .pix { color: var(--pr-money); }
.p3-barra__acoes { display: grid; gap: 8px; }
.p3-barra__nota { font-size: 12.5px; color: var(--pr-warn); font-weight: 600; margin: 0; }
@media (min-width: 768px) {
	.p3-barra__acoes { grid-template-columns: 1.25fr 1fr; }
	.p3-barra__acoes--uma { grid-template-columns: 1fr; }
}

/* =========================================================================
   17. A RELAÇÃO DA LISTA (_lista-escolar-relacao)
   Era uma tabela com cabeçalho azul, TOTAL GERAL em faixa verde e nome de
   produto gritando em caixa alta. Virou cartão, e o total foi para a mesma
   barra da escolha do ano — com o parcelamento real da escola.
   ========================================================================= */
.rel-serie { color: var(--pr-mut); font-weight: 600; }
.rel-itens { display: grid; gap: 8px; margin: 4px 0 16px; }
.rel-item {
	display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: start;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); background: #fff;
	padding: 12px 14px;
}
.rel-item__foto { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: var(--pr-soft); }
.rel-item__foto--vazia { display: grid; place-items: center; font-size: 22px; }
.rel-item__corpo { display: grid; gap: 3px; min-width: 0; }
.rel-item__nome { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.rel-item__meta { font-size: 12px; color: var(--pr-mut); line-height: 1.45; word-break: break-word; }
.rel-item__aviso { font-size: 12px; color: var(--pr-warn); font-weight: 600; line-height: 1.45; }
.rel-item__valor {
	text-align: right; font-size: 16px; font-weight: 700; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rel-item__valor small { display: block; font-size: 11.5px; font-weight: 600; color: var(--pr-mut); letter-spacing: 0; }
.rel-genero {
	display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px;
	padding: 1px 8px; vertical-align: 2px; white-space: nowrap;
}
.rel-genero--m { background: var(--pr-mochila-soft); color: var(--pr-mochila); }
.rel-genero--f { background: var(--pr-artes-soft); color: var(--pr-artes); }
@media (max-width: 575px) {
	.rel-item { grid-template-columns: 44px 1fr; gap: 11px; padding: 11px 12px; }
	.rel-item__foto { width: 44px; height: 44px; }
	.rel-item__valor { grid-column: 2; text-align: left; font-size: 15px; }
	.rel-item__valor small { display: inline; margin-left: 6px; }
}

/* =========================================================================
   18. O RESUMO ANTES DE PAGAR (_passo4)
   Tinha faixa preta com valor em amarelo e faixa verde no total — duas cores
   que não existem na paleta da loja. Vira cartão por estudante, com a cor do
   tipo de lista que a reforma já usa nas outras telas.
   ========================================================================= */
.res-cartao {
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); background: #fff;
	overflow: hidden; margin-bottom: 12px; box-shadow: var(--pr-shadow);
}
.res-cartao__topo {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; padding: 12px 16px; background: var(--pr-soft);
	border-bottom: 1px solid var(--pr-line);
}
.res-cartao__quem { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.res-cartao__serie { color: var(--pr-mut); font-weight: 600; font-size: 13.5px; }
.res-cartao__valor { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.res-cartao__corpo { padding: 12px 16px; display: grid; gap: 10px; }
.res-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-linha .p3-tipo { margin: 0; flex: 0 0 auto; }
.res-linha__nome { flex: 1 1 12rem; font-size: 13.5px; line-height: 1.4; min-width: 0; }
.res-linha__qtd { color: var(--pr-mut); }
.res-linha__fora { color: var(--pr-crit); font-weight: 700; font-size: 12px; margin-left: 6px; }
.res-linha__valor { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.res-linha--fora .res-linha__nome, .res-linha--fora .res-linha__valor { opacity: .55; text-decoration: line-through; }
.res-mudar { font-size: 12.5px; font-weight: 700; color: var(--pr-pri); text-decoration: underline; }
.res-mudar:hover { color: var(--pr-ink); }


/* recado que a escola escreveu na lista: é instrução, não "sucesso" —
   antes vinha em verde com ícone de check, como se fosse confirmação */
.p3-recado {
	border: 1px solid var(--pr-line); border-left: 4px solid var(--pr-pri);
	border-radius: 0 var(--pr-r) var(--pr-r) 0; background: var(--pr-soft);
	padding: 12px 16px; color: var(--pr-ink);
}
.p3-recado p { margin: 4px 0; font-size: 13.5px; line-height: 1.55; }
.p3-recado i { color: var(--pr-pri); margin-right: 6px; }
/* ---- celular: cartões compactos, sem uma tela inteira por lista ---- */
@media (max-width: 767.98px) {
	.p3-topo { padding: 10px 0 6px; }
	.p3-trilha { font-size: 11.5px; gap: 6px; }
	.p3-trilha li { gap: 6px; }
	.p3-trilha li::after { width: 12px; }
	.p3-titulo { font-size: 20px; }
	.p3-confirma { padding: 14px; }
	.p3-confirma__serie { font-size: 19px; }
	/* custom.css força display/align/justify em todo <button> abaixo de 576px
	   com !important; sem reafirmar aqui, o cartão perde a grade no celular */
	.p3-cartao {
		display: grid !important;
		align-items: start !important;
		justify-content: stretch !important;
		grid-template-columns: 24px 1fr;
		padding: 12px 14px; gap: 10px;
	}
	.p3-cartao__valor { grid-column: 2; justify-self: start; margin-top: 6px; font-size: 16px; }
	.p3-barra {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 10px 14px; gap: 8px;
		border-width: 1.5px 0 0; border-radius: 0;
		box-shadow: 0 -8px 24px rgba(15, 25, 40, .14);
	}
	/* 13/10: a folga para a barra fixa ficava ANTES do rodapé (buraco de ~270px
	   no fim da escolha das listas). Agora fica depois do rodapé, embaixo da barra. */
	.p3-corpo { padding-bottom: 16px; }
	body:has(.p3-corpo .p3-barra) { padding-bottom: 210px; }
	/* Onde a barra é o FIM da página (relação e resumo) ela não pode ser fixa:
	   fixa, roubava 200px do celular para sempre e cobria a última linha do
	   cartão — o valor do item e o "mudar os itens" ficavam atrás dela.
	   Grudada, flutua enquanto rola e para no lugar dela no fim. */
	.p3-com-barra .p3-barra {
		position: sticky; left: auto; right: auto; bottom: 0;
		margin-top: 14px; border-width: 1.5px; border-radius: var(--pr-r);
	}
	.p3-com-barra { padding-bottom: 24px; }
	.p3-barra { gap: 6px; }
	.p3-barra__val { font-size: 21px; }
	.p3-barra__nota { font-size: 12px; line-height: 1.35; }
	.p3-barra .p3-btn { min-height: 44px; padding: 10px 12px; font-size: 14px !important; }
	.p3-barra .p3-btn small { display: none; }
}

/* ---- fatia 14 parte 3: prova social e pedido em andamento ---- */
.esc-prova {
	margin: 10px 0 0; font-size: 14.5px; color: var(--pr-mut);
	display: flex; align-items: center; gap: 8px;
}
.esc-prova::before {
	content: "\2713"; color: var(--pr-money); font-weight: 700; font-size: 15px;
}
.esc-prova strong { color: var(--pr-ink); }

.esc-retomar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	flex-wrap: wrap; padding: 14px 18px; border-radius: var(--pr-r);
	background: var(--pr-money-soft); border: 1.5px solid var(--pr-money);
}
.esc-retomar-txt { font-size: 14px; color: var(--pr-ink); font-weight: 600; }
.esc-retomar-txt b {
	display: block; font-size: 17px; color: var(--pr-money);
	font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
@media (max-width: 575.98px) {
	.esc-retomar { padding: 12px 14px; }
	.esc-retomar .btn { width: 100%; }
}

/* =========================================================================
   16. PRODUTOS EXTRAS — o botão de adicionar precisa existir sem mouse
   -------------------------------------------------------------------------
   theme-shop.css deixa .addtocart-btn com opacity 0 e visibility hidden, e só
   revela no hover do cartão. Em celular não existe hover: medido em 21/08, o
   botão ficava inalcançável e tocar no cartão não fazia nada — a tela de venda
   casada simplesmente não comprava no telefone. Aqui ele fica sempre visível.
   ========================================================================= */
.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn {
	opacity: 1;
	visibility: visible;
	background: var(--pr-pri);
	color: var(--pr-pri-ink);
	border-radius: 999px;
	box-shadow: var(--pr-shadow-lift);
}
.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:hover,
.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:focus-visible {
	background: var(--primary-100);
	color: var(--pr-pri-ink);
}
.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn:focus-visible {
	outline: 3px solid var(--pr-pri);
	outline-offset: 2px;
}
/* a marca era um selo VERDE FORTE brigando com o preço; vira etiqueta calma */
.badge.ex-selo {
	background: var(--pr-soft); color: var(--pr-mut); font-weight: 700;
	font-size: 11px; letter-spacing: .02em; border: 1px solid var(--pr-line);
	border-radius: 999px; padding: 3px 9px; text-transform: none;
}
.ex-nome {
	font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
	color: var(--pr-ink); margin: 0 0 4px; text-transform: none;
}
.ex-preco {
	margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em;
	color: var(--pr-ink); font-variant-numeric: tabular-nums;
}
/* o total e a saída ficam à mão, não no fim de duas páginas de produto */
.ex-barra { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--pr-shadow-lift); }
/* a barra flutua por cima: sem esta folga ela come a última fileira de produtos */
.ex-tela { padding-bottom: 150px; }
@media (max-width: 575px) { .ex-barra { bottom: 0; border-radius: var(--pr-r) var(--pr-r) 0 0; } }

/* =========================================================================
   19. BOTÃO QUE É LINK (medido no celular, 24/08)
   custom.css pinta TODO <a> abaixo de 576px com color:#0056b3 !important e
   sublinhado. Onde a reforma usa <a> com cara de botão — resumo, extras,
   relação — isso dava texto azul sobre fundo azul: o botão principal do
   resumo ficava LEGÍVEL só no computador. E os links da reforma trocavam o
   azul da marca pelo azul do Bootstrap. Aqui a reforma reafirma o que é dela.
   ========================================================================= */
a.p3-btn,
a.p3-btn:visited,
a.p3-btn:active { text-decoration: none !important; font-weight: 700 !important; }
a.p3-btn--pri,
a.p3-btn--pri:visited,
a.p3-btn--pri:active { color: var(--pr-pri-ink) !important; }
a.p3-btn--linha,
a.p3-btn--linha:visited,
a.p3-btn--linha:active { color: var(--pr-ink) !important; }
a.p3-btn--fantasma,
a.p3-btn--fantasma:visited,
a.p3-btn--fantasma:active { color: var(--pr-mut) !important; }
a.p3-voltar, a.p3-voltar:visited,
a.res-mudar, a.res-mudar:visited,
a.p3-add-filho, a.p3-add-filho:visited { color: var(--pr-pri) !important; } /* FATIA 28b — o fechamento tinha ido embora junto com o seletor removido */
a.p3-filho__editar, a.p3-filho__editar:visited,
a.esc-ver-lista, a.esc-ver-lista:visited { color: var(--pr-mut) !important; }

/* =========================================================================
   20. QUANTAS UNIDADES A ESCOLA PEDE (montagem)
   O contador nascia preenchido com a quantidade da lista, mas nada DIZIA que
   aquele número era o pedido da escola — e mexeu no contador, perdeu a
   referência. O marcador fica quieto quando não há o que avisar: aparece em
   cinza quando a escola pede mais de 1, e vira alerta quando o número
   escolhido é DIFERENTE do que a escola pediu.
   ========================================================================= */
.qtd-escola {
	display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35;
	font-weight: 600; color: var(--pr-mut); white-space: nowrap;
}
.qtd-escola.difere { color: var(--pr-warn); font-weight: 700; }
/* na tabela do computador a célula é estreita; no cartão do celular também */
td .qtd-escola, .mobile-product-card-controls .qtd-escola { text-align: center; }

/* =========================================================================
   21. ITEM SEM ESTOQUE NA MONTAGEM
   O contador aparecia morto (e no celular sem explicação nenhuma): parecia
   que dava para adicionar. Sem estoque o controle SOME e entra o rótulo.
   O input continua no DOM invisível: os coletores do finalizar leem os
   .qty-stepper-input visíveis por display/visibility para mandar o zero que
   tira o item de pedido em revisão — display:none o esconderia deles.
   ========================================================================= */
.item-em-falta {
	display: inline-block; font-size: 12px; font-weight: 700; color: var(--pr-mut);
	background: var(--pr-soft); border: 1px solid var(--pr-line); border-radius: 999px;
	padding: 4px 12px; white-space: nowrap;
}
.qty-stepper--bloqueado {
	opacity: 0 !important; position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; pointer-events: none;
}

/* =========================================================================
   22. A MONTAGEM (fatia 19 — fluxo escolhido pelo dono em 24/08)
   Listas abertas com itens à vista; sem os botões repetidos; item começa com
   um ADICIONAR que leva a quantidade sugerida da escola num toque, e o
   contador aparece depois, para ajustar.
   ========================================================================= */
/* cabeçalho da lista: sai a faixa preta com amarelo, entra o tipo com cor */
.m2-hd {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	flex-wrap: wrap; padding: 11px 4px;
}
.m2-hd__nome { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: var(--pr-ink); }
.m2-hd__nome .p3-tipo { margin: 0 8px 0 0; vertical-align: 1px; }
.m2-hd__nome .acc2-meta { display: block; font-weight: 600; color: var(--pr-mut); font-size: 11.5px; margin-top: 2px; }
.m2-hd__tot { display: flex; align-items: center; gap: 10px; }
.m2-hd__sub { text-align: right; }
.m2-hd__sub small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-mut); line-height: 1; }
.m2-hd__sub .subtotal-tipo { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--pr-ink); }
.m2-hd .acc2-caret { color: var(--pr-mut); font-size: 13px; }

/* o botão que o dono pediu: um toque leva a quantidade sugerida */
.btn-adicionar-item {
	font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
	color: var(--pr-pri-ink); background: var(--pr-pri); border: 0; border-radius: 999px;
	padding: 8px 18px; min-height: 38px; white-space: nowrap;
}
.btn-adicionar-item:hover { background: var(--primary-100); }
.btn-adicionar-item:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }

/* contador guardado (quantidade zero): invisível mas presente no DOM — os
   coletores do finalizar leem os inputs por display/visibility, e o zero de
   um item removido na revisão precisa viajar no salvar */
.qty-stepper--guardado {
	opacity: 0 !important; position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; pointer-events: none;
}

/* divisor dos itens em falta, agrupados no fim de cada lista */
tr.m2-falta-divisor td, div.m2-falta-divisor {
	font-size: 12px; font-weight: 600; color: var(--pr-mut);
	border-top: 2px dashed var(--pr-line); padding: 10px 12px;
	background: var(--pr-pg, transparent);
}

/* =========================================================================
   23. O PAGAMENTO (_passo7 / finalizarpagamento)
   Sai o rodapé da tabela em preto/verde/azul-piscina, os títulos gritados do
   tema e o botão desabilitado sem explicação. Contratos de JS/Cielo (ids,
   data-method) intocados — aqui é só pele.
   ========================================================================= */
/* títulos de seção falam baixo (o tema punha caixa alta via transform) */
.toggle.toggle-minimal .toggle-title,
section:not(.toggle) .toggle-title,
.toggle .toggle-title {
	text-transform: none !important; letter-spacing: -.01em;
	font-weight: 700 !important; color: var(--pr-ink) !important; font-size: 16px !important;
}
.p7-pergunta { font-weight: 700; color: var(--pr-ink); margin-bottom: 10px; }

/* rodapé do resumo: linhas quietas, total com o azul da marca */
tr.p7-linha td { font-weight: 600; color: var(--pr-mut); background: transparent; }
tr.p7-linha--money td { color: var(--pr-money); font-weight: 700; }
tr.p7-linha--riscada td { color: var(--pr-mut); text-decoration: line-through; font-weight: 500; }
tr.p7-brinde td {
	background: var(--pr-warn-soft); color: var(--pr-ink); font-weight: 600;
	border-radius: 8px;
}
tr.p7-total td {
	font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--pr-ink);
	border-top: 2px solid var(--pr-ink); background: transparent;
	font-variant-numeric: tabular-nums;
}
tr.p7-total td #total_final { color: var(--pr-pri); }

/* cartões de forma de pagamento: seleção com o azul da marca (era Bootstrap) */
.payment-option { border-radius: var(--pr-r) !important; cursor: pointer; }
.payment-option.border-primary {
	border: 2px solid var(--pr-pri) !important;
	box-shadow: inset 0 0 0 1px var(--pr-pri), var(--pr-shadow) !important;
}

/* motivo do botão travado: uma linha calma, não um alerta gritando */
.p7-motivo {
	display: flex; align-items: center; gap: 8px; justify-content: center;
	font-size: 13px; font-weight: 600; margin-top: 8px;
}
.p7-motivo.text-danger { color: var(--pr-crit) !important; }
.p7-motivo.text-warning { color: var(--pr-warn) !important; }
#checkout_disabled_icon { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* os h5 dos formulários (faturamento, dados do cartão) gritavam em caixa alta
   por transform do tema — falam baixo como o resto da reforma */
#billing_form h5, .card-form h5, #pix_form h5 {
	text-transform: none !important; letter-spacing: -.01em;
	font-weight: 700; color: var(--pr-ink); font-size: 15.5px;
}
/* a dica do resumo fechado no celular respira */
.toggle-title .p7-dica { font-weight: 600; font-size: 11.5px; color: var(--pr-mut); margin-left: 8px; }

/* o botão de pagar no padrão das outras telas */
#start_checkout {
	background: var(--pr-pri) !important; border-color: var(--pr-pri) !important;
	color: var(--pr-pri-ink) !important; font-weight: 700 !important;
	border-radius: var(--pr-r-btn) !important; min-height: 52px;
}
#start_checkout:hover:not(:disabled) { background: var(--primary-100) !important; }
#start_checkout:disabled { opacity: .45; }

/* =========================================================================
   24. RESUMO DO PEDIDO EM CARTÃO (_passo6 e _passo7) + ADICIONAR A LISTA INTEIRA
   A tabela listrada de caixa alta vira cartão da reforma. O "Comprar tudo"
   saiu da escolha do ano e mora na montagem, junto dos itens (dono, 24/08).
   ========================================================================= */
.p7-resumo {
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r);
	background: #FFF; box-shadow: var(--pr-shadow); overflow: hidden;
}
.p7-resumo summary { list-style: none; cursor: pointer; }
.p7-resumo summary::-webkit-details-marker { display: none; }
.p7-resumo summary, .p7-resumo__cab {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 14px 16px;
}
.p7-resumo__t { font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--pr-ink); }
.p7-resumo__meta { font-weight: 600; font-size: 13px; color: var(--pr-mut); white-space: nowrap; }
.p7-resumo__caret { display: inline-block; transition: transform .15s ease; }
.p7-resumo[open] .p7-resumo__caret { transform: rotate(180deg); }
.p7-resumo__dica { font-weight: 600; font-size: 12.5px; }
.p7-resumo[open] .p7-resumo__dica { display: none; } /* aberta, a dica já cumpriu */
.p7-resumo--mini .p7-resumo__cab { padding-bottom: 6px; }
.p7r-grupo {
	padding: 10px 16px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
	text-transform: uppercase; color: var(--pr-mut);
}
.p7r-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 16px; }
.p7r-item + .p7r-item { border-top: 1px dashed var(--pr-line); }
.p7r-item__qtd { min-width: 30px; font-weight: 700; font-size: 13px; color: var(--pr-mut); font-variant-numeric: tabular-nums; }
.p7r-item__nome { flex: 1; font-weight: 600; font-size: 14px; color: var(--pr-ink); }
.p7r-item__nome small { font-weight: 600; color: var(--pr-mut); }
.p7r-item__unit { display: block; font-size: 12px; }
.p7r-item__val { font-weight: 700; font-size: 14px; color: var(--pr-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p7r-vazio { padding: 12px 16px; color: var(--pr-mut); font-weight: 600; }
.p7r-rodape { border-top: 1.5px solid var(--pr-line); background: var(--pr-soft); padding: 8px 0 0; margin-top: 8px; }
.p7r-rodape--mini { border-top: 0; margin-top: 0; }
.p7r-linha {
	display: flex; justify-content: space-between; gap: 10px; padding: 4px 16px;
	font-weight: 600; font-size: 13.5px; color: var(--pr-mut); font-variant-numeric: tabular-nums;
}
.p7r-linha--money { color: var(--pr-money); font-weight: 700; }
.p7r-linha--riscada { text-decoration: line-through; font-weight: 500; }
.p7r-brinde {
	margin: 4px 12px; padding: 8px 10px; border-radius: 8px;
	background: var(--pr-warn-soft); color: var(--pr-ink); font-weight: 600; font-size: 13.5px;
}
.p7r-total {
	display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
	padding: 12px 16px; border-top: 2px solid var(--pr-ink);
	font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--pr-ink);
	font-variant-numeric: tabular-nums;
}
.p7r-total #total_final, .p7r-total #summary_total { color: var(--pr-pri); }

/* o aviso do CEP fala no lugar, não em toast */
.p6-cep-aviso { display: block; margin-top: 6px; font-weight: 600; font-size: 13px; color: var(--pr-warn); }

/* Adicionar a lista inteira — o atalho de comprar tudo, junto dos itens */
.m2-tudo {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
	padding: 12px 14px; margin: 10px 0 4px;
	border: 1.5px dashed var(--pr-line); border-radius: var(--pr-r); background: var(--pr-soft);
}
.btn-adicionar-tudo {
	font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
	color: var(--pr-pri-ink); background: var(--pr-pri); border: 0; border-radius: 999px;
	padding: 10px 20px; min-height: 42px; white-space: nowrap;
}
.btn-adicionar-tudo:hover { background: var(--primary-100); }
.btn-adicionar-tudo:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }
.m2-tudo__meta { font-weight: 600; font-size: 12.5px; color: var(--pr-mut); }

/* =========================================================================
   25. O RESUMO É UM CARRINHO (_passo4) — quantidade e remoção sem sair da tela
   ========================================================================= */
.res-qtd { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--pr-line); border-radius: 999px; padding: 2px; background: #FFF; }
.res-qtd__btn {
	font: inherit; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
	color: var(--pr-pri); background: var(--pr-soft); border: 0; border-radius: 999px;
	width: 30px; height: 30px;
}
.res-qtd__btn:hover { background: var(--pr-pri); color: var(--pr-pri-ink); }
.res-qtd__btn:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 1px; }
.res-qtd__num { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-linha--enviando { opacity: .55; pointer-events: none; }
.res-linha--fora .res-qtd { opacity: .9; }

/* =========================================================================
   26. VARREDURA DE DESIGN SYSTEM (26/08) — diretriz permanente do dono:
   navegar o funil e alinhar o que destoa. Aqui: a entrega falava outra língua
   (CTA verde Bootstrap, títulos em caixa alta do tema).
   ========================================================================= */
.p6-titulo {
	text-transform: none !important; letter-spacing: -.01em;
	font-weight: 700 !important; color: var(--pr-ink) !important; font-size: 16px !important;
}
/* o CTA de fechar o pedido veste a pele da reforma; a classe .btn-success
   fica no DOM porque specs e flows selecionam por ela */
#fechar_pedido_form .btn-success {
	display: block; width: 100%;
	background: var(--pr-pri) !important; border-color: var(--pr-pri) !important;
	color: var(--pr-pri-ink) !important;
	border-radius: var(--pr-r-btn) !important;
	font-weight: 700; font-size: 16px; text-transform: none !important;
	padding: 14px 20px;
}
#fechar_pedido_form .btn-success:hover:not(:disabled) { filter: brightness(1.08); }
#fechar_pedido_form .btn-success:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }

/* =========================================================================
   27. CADASTRO DIRETO AO FORMULÁRIO (proposta A aprovada em 26/08)
   Sem a tela "quantos filhos?": um bloco por estudante, crescendo na tela.
   ========================================================================= */
/* com um filho só, a legenda "Estudante 1" é ruído */
.p2-form fieldset.p2-bloco:only-of-type .p2-bloco__titulo { display: none; }
.p2-add-outro {
	font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
	color: var(--pr-pri); background: none; border: 0; padding: 4px 0;
	text-align: left;
}
.p2-add-outro:hover { text-decoration: underline; }
.p2-add-outro:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }

/* =========================================================================
   28. VITRINE POR CATEGORIA (proposta B aprovada em 26/08)
   Fichas no topo dos extras; a primeira dobra vende o que rende.
   ========================================================================= */
.ex-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.ex-chip {
	border: 1.5px solid var(--pr-line); border-radius: 999px; padding: 6px 14px;
	font-weight: 700; font-size: 13px; color: var(--pr-ink); white-space: nowrap;
	text-decoration: none;
}
.ex-chip:hover { border-color: var(--pr-pri); color: var(--pr-pri); }
.ex-chip.on { background: var(--pr-pri); border-color: var(--pr-pri); color: var(--pr-pri-ink); }
.ex-chip:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }
/* o custom.css pinta <a> de azul sublinhado no celular; a ficha se defende */
a.ex-chip, a.ex-chip:visited { text-decoration: none !important; }
a.ex-chip.on, a.ex-chip.on:visited { color: var(--pr-pri-ink) !important; }

/* =========================================================================
   29. PROVA SOCIAL (proposta C aprovada em 26/08) — número real, nunca inflado
   ========================================================================= */
.prova-selo {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--pr-money-soft); color: var(--pr-money);
	border-radius: 999px; padding: 7px 14px;
	font-weight: 700; font-size: 13px; margin: 0 0 12px;
}


/* =========================================================================
   30. O CPF DO PLANTÃO (mockup "A Mesa do Plantão", tela 02) — a tela que
   mais se repete no dia: 11 dígitos com um pai em pé na frente do vendedor.
   ========================================================================= */
/* o seletor traz o `input` de propósito: o custom.css tem uma regra de celular
   `input[type="text"] { font-size: 16px !important; min-height: 44px }` que
   ganha da classe sozinha — o campo mais usado do dia encolhia justo no
   telefone do vendedor, que é onde ele mais precisa acertar sem olhar */
input.pl-cpf {
	font: inherit; font-size: 30px !important; font-weight: 700; letter-spacing: .04em;
	font-variant-numeric: tabular-nums; text-align: center; color: var(--pr-ink);
	background: #fff; border: 1.5px solid var(--pr-line);
	border-radius: var(--pr-r-btn); padding: 14px; min-height: 66px; width: 100%;
}
.pl-cpf::placeholder { color: var(--pr-mut); font-weight: 600; }
.pl-cpf:focus { outline: 3px solid var(--pr-pri); outline-offset: 1px; border-color: var(--pr-pri); }
/* alvo grande: o vendedor toca sem olhar, falando com o pai */
.pl-btn-g { min-height: 56px; font-size: 16px; }

/* o cartão do resultado: o que ele confere em voz alta, sem abrir outra tela */
.pl-achado {
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r);
	padding: 16px 18px; display: grid; gap: 10px; margin: 0 0 16px;
}
.pl-achado__nome { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--pr-ink); }
.pl-achado__meta { margin: 0; font-size: 13.5px; color: var(--pr-mut); }
.pl-selo {
	justify-self: start; border-radius: 999px; padding: 5px 12px;
	font-weight: 700; font-size: 12.5px;
	background: var(--pr-money-soft); color: var(--pr-money);
}
.pl-selo--novo { background: var(--pr-mochila-soft); color: var(--pr-pri); }
.pl-dados { margin: 4px 0 0; display: grid; gap: 7px; border-top: 1px solid var(--pr-line); padding-top: 12px; }
.pl-dados > div { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.pl-dados dt { color: var(--pr-mut); min-width: 76px; }
.pl-dados dd { margin: 0; color: var(--pr-ink); font-weight: 600; word-break: break-word; }
.pl-acoes { display: grid; gap: 10px; }
.pl-origem { margin-top: 6px; }
.pl-origem .p2-campo__rot { font-size: 12.5px; color: var(--pr-mut); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 575.98px) {
	input.pl-cpf { font-size: 26px !important; min-height: 60px; }
	.pl-achado__nome { font-size: 19px; }
}

/* =========================================================================
   31. A BARRA DO ATENDIMENTO (mockup "A Mesa do Plantão", tela 01) — o topo
   do plantão deixa de repetir o que o vendedor já sabe e passa a dizer quem
   está na cadeira e onde o atendimento parou.
   ========================================================================= */
.mp-barra { background: var(--pr-ink); color: #FFF; }
.mp-barra__linha {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	/* padding-top/bottom, não o atalho: `padding: 9px 0` na própria .container
	   zerava o respiro lateral e a barra encostava na borda do telefone */
	padding-top: 9px; padding-bottom: 9px;
}
a.mp-barra__casa, a.mp-barra__casa:visited {
	display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
	font-size: 12.5px; font-weight: 700 !important; letter-spacing: .04em;
	text-transform: uppercase; color: #B7C6DA !important;
	text-decoration: none !important; padding: 6px 0; margin-right: 4px;
}
a.mp-barra__casa:hover { color: #FFF !important; }
a.mp-barra__casa:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }
.mp-barra__quem { font-weight: 700; font-size: 15px; color: #FFF; letter-spacing: -.01em; }
.mp-barra__ctx { font-size: 13px; color: #B7C6DA; }
.mp-barra__ctx::before { content: "· "; }
.mp-barra__canal {
	border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase;
	background: rgba(255, 255, 255, .16); color: #FFF; white-space: nowrap;
}
.mp-barra__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* o custom.css pinta TODO <a> de azul sublinhado no celular — numa barra
   escura isso apagava as ações; por isso o !important aqui */
a.mp-acao, a.mp-acao:visited, a.mp-acao:active {
	display: inline-flex; align-items: center; gap: 6px;
	border-radius: 999px; padding: 7px 13px; min-height: 38px;
	font-size: 12.5px; font-weight: 700 !important; white-space: nowrap;
	background: rgba(255, 255, 255, .12); color: #FFF !important;
	text-decoration: none !important; border: 0;
}
a.mp-acao:hover { background: rgba(255, 255, 255, .24); color: #FFF !important; }
/* FATIA 81 — o selo da modalidade virou LINK (trocar sem deslogar) e caiu na
   MESMA armadilha: azul sublinhado do custom.css sobre a barra escura */
a.mp-barra__canal, a.mp-barra__canal:visited, a.mp-barra__canal:active {
	color: #FFF !important; text-decoration: none !important; display: inline-block;
}
a.mp-barra__canal:hover { background: rgba(255, 255, 255, .30); color: #FFF !important; }
a.mp-barra__canal:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }
a.mp-acao:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }
/* encerrar é a ação que limpa a mesa para o próximo pai: fica à vista */
a.mp-acao--fim, a.mp-acao--fim:visited { background: var(--pr-pri); }
a.mp-acao--fim:hover { background: #2A63BC; }
a.mp-acao--sair, a.mp-acao--sair:visited { background: transparent; color: #B7C6DA !important; }
a.mp-acao--sair:hover { background: rgba(255, 255, 255, .12); color: #FFF !important; }

.mp-trilha { background: #FFF; border-bottom: 1px solid var(--pr-line); }
.mp-trilha .p3-trilha { padding: 9px 0; }

@media (max-width: 575.98px) {
	.mp-barra__linha { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
	.mp-barra__quem { font-size: 14px; }
	.mp-barra__ctx { font-size: 12px; width: 100%; }
	/* na linha própria do telefone, o ponto de separação vira sujeira */
	.mp-barra__ctx::before { content: none; }
	.mp-barra__acoes { margin-left: 0; width: 100%; }
	a.mp-acao { flex: 1 1 auto; justify-content: center; }
	/* oito estações não cabem num telefone: fica só onde ele está, com a conta */
	.mp-trilha .p3-trilha li:not(.aqui) { display: none; }
	.mp-trilha .p3-trilha li.aqui::after { display: none; }
	.mp-trilha .p3-trilha li.aqui::before {
		content: attr(data-passo) " · "; color: var(--pr-mut); font-weight: 600;
	}
}

/* =========================================================================
   32. O PAGAMENTO PRESENCIAL (mockup "A Mesa do Plantão", tela 06) — só a
   pele: os métodos, o fluxo e a régua de status são os mesmos. O que muda é
   o tamanho do alvo e o valor a receber virar o título.
   ========================================================================= */
.pg-metodos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 16px; }
.pg-m {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px; text-align: center; cursor: pointer; margin: 0;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r);
	padding: 16px 10px; min-height: 96px; background: #fff;
	font-weight: 700; font-size: 14.5px; color: var(--pr-ink);
}
.pg-m:hover { border-color: var(--pr-pri); }
.pg-m__ic { font-size: 22px; color: var(--pr-pri); }
.pg-m small { display: block; font-weight: 600; font-size: 12px; color: var(--pr-mut); }
.pg-m--on { border-color: var(--pr-pri); box-shadow: inset 0 0 0 1px var(--pr-pri); background: var(--pr-mochila-soft); }
.pg-m--on small { color: var(--pr-pri); }
.pg-m:focus-within { outline: 3px solid var(--pr-pri); outline-offset: 2px; }

/* o que o vendedor lê em voz alta: o valor a receber */
.pg-receber { font-variant-numeric: tabular-nums; }
.pg-escolhido { font-weight: 600; font-size: 13.5px; color: var(--pr-mut); margin: 0 0 14px; }
.pg-escolhido b { color: var(--pr-ink); }

/* ajustes que existem mas não competem com o caminho principal */
.pg-ajustes { border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); margin: 0 0 16px; }
.pg-ajustes > summary {
	list-style: none; cursor: pointer; padding: 12px 16px;
	font-weight: 700; font-size: 14px; color: var(--pr-ink);
}
.pg-ajustes > summary::-webkit-details-marker { display: none; }
.pg-ajustes > summary small { font-weight: 600; color: var(--pr-mut); }
.pg-ajustes__corpo { padding: 0 16px 14px; display: grid; gap: 14px; }

/* a tabela do resumo herdou preto/amarelo/verde do tema; aqui ela fala a
   paleta da reforma sem precisar ser reescrita linha a linha */
.p7-resumo .bg-dark { background: var(--pr-soft) !important; color: var(--pr-ink) !important; }
.p7-resumo .bg-primary { background: var(--pr-pri) !important; color: var(--pr-pri-ink) !important; }
.p7-resumo .bg-success { background: var(--pr-money-soft) !important; color: var(--pr-money) !important; }
.p7-resumo .bg-warning { background: var(--pr-warn-soft) !important; color: var(--pr-warn) !important; }
.p7-resumo .table-secondary td { background: var(--pr-mochila-soft) !important; color: var(--pr-pri) !important; }

@media (max-width: 767.98px) {
	.pg-metodos { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   33. O QUADRO DO VENDEDOR (mockup "A Mesa do Plantão", tela 07) — entre um
   pai e outro, o que ficou pendente aparece primeiro.
   ========================================================================= */
.qv-lista { display: grid; gap: 10px; margin: 0 0 20px; }
.qv-cartao {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); padding: 12px 15px;
	background: #fff;
}
.qv-cartao--acao { border-color: var(--pr-warn); }
.qv-cartao--recusado { border-color: var(--pr-crit); }
.qv-selo {
	border-radius: 999px; padding: 4px 11px; white-space: nowrap;
	font-weight: 800; font-size: 11px; letter-spacing: .02em;
	background: var(--pr-soft); color: var(--pr-mut);
}
.qv-selo--pago { background: var(--pr-money-soft); color: var(--pr-money); }
.qv-selo--acao { background: var(--pr-warn-soft); color: var(--pr-warn); }
.qv-selo--aberto { background: var(--pr-mochila-soft); color: var(--pr-pri); }
.qv-selo--recusado { background: var(--pr-crit-soft); color: var(--pr-crit); }
.qv-quem { flex: 1 1 220px; min-width: 0; font-weight: 700; font-size: 14.5px; color: var(--pr-ink); }
.qv-quem small { display: block; font-weight: 600; font-size: 12.5px; color: var(--pr-mut); }
.qv-val { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.qv-abrir, a.qv-abrir:visited {
	font-weight: 700 !important; font-size: 13px; color: var(--pr-pri) !important;
	text-decoration: none !important; padding: 8px 4px; min-height: 40px;
	display: inline-flex; align-items: center;
}
a.qv-abrir:hover { text-decoration: underline !important; }
.qv-resumo { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; }
.qv-resumo div { display: grid; gap: 2px; }
.qv-resumo dt { font-size: 12px; font-weight: 700; color: var(--pr-mut); text-transform: uppercase; letter-spacing: .05em; }
.qv-resumo dd { margin: 0; font-size: 20px; font-weight: 800; color: var(--pr-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.qv-vazio { border: 1.5px dashed var(--pr-line); border-radius: var(--pr-r); padding: 22px; color: var(--pr-mut); font-weight: 600; }
@media (max-width: 575.98px) {
	.qv-cartao { gap: 8px; }
	.qv-quem { flex: 1 1 100%; order: 2; }
	.qv-val { order: 3; margin-left: auto; }
	a.qv-abrir { order: 4; }
}

/* =========================================================================
   34. A CONFIRMAÇÃO DO PEDIDO — o momento mais importante da compra ainda
   era um alert do Bootstrap com botão de fechar sobre uma faixa vazia do
   tema. O status vira o cabeçalho; no caixa do totem, o número do pedido é
   o que o cliente MOSTRA — então ele é grande.
   ========================================================================= */
.pc-cabeca {
	border-left: 4px solid var(--pr-pri); background: var(--pr-soft);
	border-radius: 0 var(--pr-r) var(--pr-r) 0;
	padding: 18px 22px; margin: 8px 0 22px;
}
.pc-cabeca .p3-titulo { margin: 0 0 4px; }
.pc-cabeca .p3-apoio { margin: 0; max-width: none; }
.pc-cabeca--success { border-left-color: var(--pr-money); background: var(--pr-money-soft); }
.pc-cabeca--success .p3-titulo { color: var(--pr-money); }
.pc-cabeca--warning { border-left-color: var(--pr-warn); background: var(--pr-warn-soft); }
.pc-cabeca--danger { border-left-color: var(--pr-crit); background: var(--pr-crit-soft); }
.pc-cabeca--danger .p3-titulo { color: var(--pr-crit); }
.pc-numero {
	display: block; margin: 12px 0 0; font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(34px, 7vw, 52px); color: var(--pr-ink);
	font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pc-numero small { display: block; font-size: 13px; font-weight: 700; color: var(--pr-mut); letter-spacing: .05em; text-transform: uppercase; }
.pc-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.pc-acoes .p3-btn { min-width: 220px; justify-content: center; }

/* o custom.css sublinha TODO <a> no celular; o caminho de volta da trilha
   não é um link de texto corrido */
a.p3-voltar, a.p3-voltar:visited { text-decoration: none !important; }
/* FATIA 49 — o cartão do filho que JÁ tem itens no pedido se anuncia */
.p3-filho__feito {
	display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
	border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 800;
	background: var(--pr-money-soft); color: var(--pr-money); vertical-align: middle;
}
/* o aviso de que o valor da lista é o de TODOS os itens */
.p3-nota-total {
	display: flex; gap: 9px; align-items: flex-start;
	border-left: 3px solid var(--pr-pri); background: var(--pr-mochila-soft);
	border-radius: 0 var(--pr-r) var(--pr-r) 0; padding: 11px 14px; margin: 0 0 16px;
	font-size: 13.5px; color: var(--pr-ink); max-width: 68ch;
}
.p3-nota-total b { color: var(--pr-pri); }

/* ================================================================
   FATIA 58 — as telas de PEDIDOS do cliente (dono, 10/09: "melhorar
   design dessas páginas, só do section principal").
   pedidos_pagos e detalhesdopedido nunca receberam a reforma: eram
   tabelas de 8 e 10 colunas do tema puro, ilegíveis no celular.
   Cabeçalho e rodapé não são tocados — só o miolo, marcado com .pc-area.
   ================================================================ */
.pc-area { color: var(--pr-ink); padding-bottom: 40px; }
.pc-area .pc-titulo {
	font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.02em;
	margin: 28px 0 4px; color: var(--pr-ink);
}
.pc-area .pc-apoio { color: var(--pr-ink-2, #4C5D74); font-size: 15px; margin: 0 0 22px; max-width: 68ch; }

/* --- cartão de pedido (lista) --- */
.pc-lista { display: grid; gap: 14px; }
.pc-card {
	border: 1px solid var(--pr-line); border-radius: var(--pr-r); background: #fff;
	padding: 16px 18px; box-shadow: 0 1px 2px rgba(21,36,56,.05), 0 6px 18px rgba(21,36,56,.04);
}
.pc-card__topo {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
	justify-content: space-between; margin-bottom: 10px;
	padding-bottom: 10px; border-bottom: 1px solid var(--pr-line);
}
.pc-card__num { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.pc-card__num a { color: var(--pr-pri); text-decoration: none; }
.pc-card__num a:hover { text-decoration: underline; }
.pc-card__data { color: var(--pr-ink-3, #7A8CA3); font-size: 13.5px; }
.pc-linhas { display: grid; gap: 8px; }
.pc-linha { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; }
.pc-linha__rot {
	flex: none; min-width: 92px; font-size: 11.5px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--pr-ink-3, #7A8CA3);
}
.pc-linha__val { flex: 1; min-width: 0; }
.pc-total { font-size: 19px; font-weight: 800; color: var(--pr-money); font-variant-numeric: tabular-nums; }
.pc-card__pe {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pr-line);
}
.pc-card__pe .pc-acao { margin-left: auto; }

/* --- selo de status --- */
.pc-selo {
	display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
	padding: 4px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
	background: var(--pr-mochila-soft, #EEF3FB); color: var(--pr-pri);
}
.pc-selo--pago { background: var(--pr-money-soft, #E7F6EE); color: var(--pr-money); }
.pc-selo--espera { background: #FBF2DC; color: #8A6206; }
.pc-selo--problema { background: #FCEDE6; color: #B4401A; }

/* --- itens do pedido (detalhe) --- */
.pc-item {
	display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--pr-line);
}
.pc-item:last-child { border-bottom: 0; }
.pc-item__nome { font-weight: 600; font-size: 15px; }
.pc-item__meta { color: var(--pr-ink-3, #7A8CA3); font-size: 13px; }
.pc-item__conta {
	display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
	font-size: 14px; font-variant-numeric: tabular-nums;
}
.pc-item__sub { margin-left: auto; font-weight: 700; }
.pc-grupo {
	margin: 22px 0 0; border: 1px solid var(--pr-line); border-radius: var(--pr-r);
	background: #fff; overflow: hidden;
}
.pc-grupo__cab {
	padding: 12px 18px; background: var(--pr-mochila-soft, #EEF3FB);
	border-bottom: 1px solid var(--pr-line); font-weight: 700;
}
.pc-grupo__corpo { padding: 4px 18px 8px; }
.pc-fecho {
	display: flex; justify-content: flex-end; gap: 14px; align-items: baseline;
	padding: 14px 18px; border-top: 2px solid var(--pr-ink); background: #FAFCFE;
	font-size: 17px; font-weight: 800;
}
.pc-fecho .pc-fecho__val { color: var(--pr-money); font-variant-numeric: tabular-nums; }
.pc-vazio {
	border: 1px dashed var(--pr-line-forte, #C3D0E2); border-radius: var(--pr-r);
	padding: 34px 22px; text-align: center; color: var(--pr-ink-2, #4C5D74);
}
@media (max-width: 575.98px) {
	.pc-linha { flex-direction: column; gap: 2px; }
	.pc-linha__rot { min-width: 0; }
	.pc-card__pe .pc-acao { margin-left: 0; width: 100%; }
	.pc-card__pe .pc-acao .btn { width: 100%; }
}

/* FATIA 61 — o botão que leva ao pagamento ganha o verde do dinheiro
   (--pr-money), o mesmo do PIX e da confirmação. */
.p3-btn--verde { background: var(--pr-money); color: #fff; }
.p3-btn--verde:hover { background: #0B7548; color: #fff; }
.p3-btn--verde:focus-visible { outline: 3px solid var(--pr-money); outline-offset: 2px; }

/* ==========================================================================
   FATIA 68 — editar o pedido NA finalização (plantão)

   O dono: "acontece muito na página de finalização o cliente decidir incluir
   ou excluir itens... hoje é difícil para a vendedora... ela precisa começar o
   processo tudo de novo". A quantidade era um número morto numa tabela.

   Os alvos seguem a régua do balcão: 44px de verdade, porque isso é usado de
   pé, no tablet, com o pai olhando.
   ========================================================================== */
.p7-editar-aviso {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px; font-size: 13.5px; color: #5B6B7E;
}
.p7-editar-aviso .p7-add { margin-left: auto; }

.p7-qtd { display: inline-flex; align-items: center; gap: 6px; }
.p7-qtd__b {
    min-width: 44px; min-height: 44px; padding: 0;
    border: 1px solid var(--pr-linha, #D7DEE8); border-radius: 10px;
    background: #fff; color: var(--pr-tinta, #1B2A3D);
    font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
}
.p7-qtd__b:hover { background: #F1F5FA; }
.p7-qtd__b:focus-visible { outline: 3px solid var(--pr-acao, #2C4A7C); outline-offset: 2px; }
.p7-qtd__n { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

.p7-tirar {
    min-width: 44px; min-height: 44px; margin-left: 8px;
    border: 0; border-radius: 10px; background: transparent;
    color: #A3243B; cursor: pointer;
}
.p7-tirar:hover { background: #FDECEF; }
.p7-tirar:focus-visible { outline: 3px solid #A3243B; outline-offset: 2px; }

/* item com quantidade zero: continua visível para a vendedora poder voltar
   atrás com o + , mas não se confunde mais com o que vai ser cobrado */
tr.item-excluido { opacity: .55; }
tr.item-excluido td:nth-child(2) { text-decoration: line-through; }

/* ==========================================================================
   FATIA 73 — no PLANTÃO, o filho vira ESCOLHA (não só conferência)

   O dono (11/09): "preciso poder escolher o filho depois de identificar o
   cliente para poder comprar a lista de 1 ou n filhos". A tela /plantao/alunos
   listava os filhos para ler em voz alta e mandava todo mundo para o primeiro.
   Agora cada nome é um alvo de toque que abre as listas DAQUELE filho.
   ========================================================================== */
.p2-filho__nome.pl-escolher-filho {
    display: flex; align-items: center; gap: 10px; flex: 1;
    min-height: 52px; padding: 8px 10px; margin: -8px -10px;
    border-radius: 10px; text-decoration: none; color: inherit; font: inherit; cursor: pointer;
}
.p2-filho__nome.pl-escolher-filho:hover { background: #EEF3FA; }
.p2-filho__nome.pl-escolher-filho:focus-visible { outline: 3px solid var(--pr-acao, #2C4A7C); outline-offset: 2px; }
.pl-filho-seta { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--pr-acao, #2C4A7C); }
/* já passou por aqui: o vendedor vê de relance quem falta */
.pl-filho-ok {
    font-size: 12px; font-weight: 700; color: var(--pr-money, #0B7548);
    background: #E9F5EF; border-radius: 999px; padding: 2px 9px; margin-left: 8px;
}

/* FATIA 74 — o recado do plantão (série sem listas, pedido retomado, recusa).
   Fica no topo, abaixo da barra do atendimento, e some ao ser lido. */
.pl-flash {
    margin: 10px auto; max-width: 1100px; padding: 12px 16px;
    border-radius: 10px; border-left: 4px solid var(--pr-crit, #A3243B);
    background: #FDECEF; color: #7A1B2C; font-weight: 600; font-size: 14.5px;
}
.pl-flash--ok { border-left-color: var(--pr-money, #0B7548); background: #E9F5EF; color: #0B5C3C; }


/* =========================================================================
   FATIA 79 — o banner da campanha no topo da página da escola.
   Largura inteira de verdade (a página é centrada em .container; o banner
   sai dele de propósito). Reserva a proporção 3:2 com aspect-ratio para a
   página não pular quando a imagem carrega.
   ========================================================================= */
.esc-banner {
	margin: 0 0 22px;
	background: var(--pr-soft);
	line-height: 0;
}
.esc-banner img {
	/* FATIA 79 — SEM aspect-ratio de propósito. Tinha posto 3:2 com object-fit:
	   cover, e ver a página no celular mostrou o estrago: arte fora dessa
	   proporção era CORTADA, justo num banner cujo recado está pintado dentro
	   da imagem. A arte manda na própria altura; o preço é um pequeno pulo de
	   layout enquanto ela carrega, e esse pulo eu aceito. */
	display: block;
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   FATIA 79b — o herói vazava para o lado no celular (390px: a página media
   403 de largura). A coluna do texto é um track 1fr, e track de grade não
   encolhe abaixo do conteúdo — bastava um nome de escola comprido para
   empurrar a página inteira. Vale para toda escola, com banner ou sem.
   ------------------------------------------------------------------------- */
.esc-hero-txt { min-width: 0; }
.esc-hero h1,
.esc-hero .lede,
.esc-hero .crumb { overflow-wrap: anywhere; }

/* FATIA 79b — o selo do parcelamento tem white-space:nowrap e sozinho media
   305px: num celular de 390 ele estourava a coluna do herói e levava a página
   junto. Aqui, onde o selo é uma frase e não um rótulo curto, ele pode quebrar. */
.esc-selos .selo { white-space: normal; }

/* -------------------------------------------------------------------------
   FATIA 80 — a tira de selos do protótipo: colada no banner, largura inteira,
   fundo suave. As promessas da escola em TEXTO, que é o que separa esta
   página da referência (lá elas são pixel dentro da arte).
   ------------------------------------------------------------------------- */
.esc-tira {
	background: var(--pr-soft);
	border-bottom: 1px solid var(--pr-line);
	padding: 11px 0;
	margin: 0 0 4px;
}
.esc-tira .esc-selos { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.esc-tira .selo {
	background: #fff;
	border: 1px solid var(--pr-line);
	font-size: 12px;
	padding: 6px 12px;
}
/* o banner encosta na tira: o respiro fica embaixo dela */
.esc-banner { margin-bottom: 0; }

/* o herói curto perde o par de botões, então fecha o espaço que era deles */
.esc-hero--curto { padding-bottom: 10px; }
.esc-hero--curto .lede { margin-bottom: 8px; }
.esc-hero--curto .esc-prova { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   FATIA 80b — o banner não pode comer a dobra do computador. A arte do dono é
   3:2; em largura inteira num monitor de 1366 isso dava 911px de altura e a
   página virava só banner — o defeito que apontei na referência.
   CONTAIN, não cover: a arte inteira continua à vista, nada é cortado.
   Dica para a arte: uma versão mais larga (ex. 1600×600) preenche melhor o
   computador; em 3:2 sobram faixas laterais do fundo suave.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.esc-banner img {
		max-height: min(52vh, 460px);
		object-fit: contain;
	}
}

/* =========================================================================
   FATIA 81 — a página da escola com cara de LANDING (referência: hotsite da
   Disal para o Marista). Um herói em duas colunas na faixa azul: painel com
   manchete, passos e promessas à esquerda; a arte da escola à direita.
   ========================================================================= */

/* uma página, um objetivo: o menu do site não aparece aqui */
body.pagina-escola .header-nav-bar { display: none; }

.lp-hero {
	background: var(--pr-pri);
	color: #fff;
	padding: 30px 0 36px;
}
.lp-hero__grade {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: 24px; align-items: center;
}
@media (min-width: 992px) {
	.lp-hero { padding: 40px 0 46px; }
	.lp-hero--com-arte .lp-hero__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
}
.lp-hero__painel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.lp-hero__escola { display: flex; align-items: center; gap: 12px; }
.lp-hero__brasao {
	width: 64px; height: 64px; flex: none;
	background: #fff; border-radius: 12px;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lp-hero__brasao img { max-width: 50px; max-height: 50px; object-fit: contain; }
.lp-hero__nome {
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255,255,255,.82); line-height: 1.3; min-width: 0;
}
.lp-hero__nome b {
	display: block; margin-top: 2px;
	font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; color: #fff;
	overflow-wrap: anywhere;
}

.lp-hero__titulo {
	margin: 2px 0 0; color: #fff;
	font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
	text-wrap: balance; overflow-wrap: anywhere;
}

.lp-hero__passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15.5px; line-height: 1.4; }
.lp-hero__passos li { display: flex; gap: 10px; align-items: baseline; }
.lp-hero__passos b { flex: none; min-width: 26px; color: #FFD54A; font-weight: 800; }

.lp-hero__selos { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-hero__selos .selo {
	background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.38);
	font-size: 12px; padding: 6px 12px; white-space: normal;
}
.lp-hero__prova { margin: 0; font-size: 14px; color: rgba(255,255,255,.9); }
.lp-hero__prova b { color: #FFD54A; }

.lp-hero__cta {
	align-self: flex-start;
	background: #fff; color: var(--pr-pri);
	font-weight: 800; font-size: 16px; padding: 14px 26px; border-radius: var(--pr-r-btn);
	text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.lp-hero__cta:hover, .lp-hero__cta:focus { background: #FFD54A; color: var(--pr-ink); text-decoration: none; }

.lp-hero__arte { min-width: 0; }
.lp-hero__arte img {
	display: block; width: 100%; height: auto;
	border-radius: var(--pr-r); box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
@media (max-width: 991.98px) {
	/* no celular a arte vem PRIMEIRO: é o que diz "esta página é da minha escola" */
	.lp-hero__arte { order: -1; }
	.lp-hero__cta { align-self: stretch; text-align: center; }
}

/* =========================================================================
   35. BOTÕES NO CELULAR (critique 09/10)
   Abaixo de 576px o custom.css reescreve .btn (CAIXA ALTA, 13–14px, peso
   500–600, canto de 4px) e o tema pinta .btn-primary com o azul do Porto — a
   página da escola e o pagamento perdiam o botão da reforma só no telefone.
   E o botão VERDE do resumo (FATIA 61) ficou fora da seção 19: texto azul
   sobre verde, ilegível. Aqui a reforma reafirma o que é dela.
   ========================================================================= */
a.p3-btn--verde,
a.p3-btn--verde:visited,
a.p3-btn--verde:active { color: #FFFFFF !important; }
a.lp-hero__cta,
a.lp-hero__cta:visited { color: var(--pr-pri) !important; text-decoration: none !important; font-weight: 800 !important; }
a.lp-hero__cta:hover,
a.lp-hero__cta:focus { color: var(--pr-ink) !important; }
@media (max-width: 575.98px) {
	.btn {
		text-transform: none;
		letter-spacing: 0;
		font-size: 15px;
		font-weight: 700;
		border-radius: var(--pr-r-btn);
	}
	.btn-primary { background-color: var(--pr-pri) !important; border-color: var(--pr-pri) !important; }
	.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-100) !important; border-color: var(--primary-100) !important; }
}
/* o interruptor (form-switch) do "Antes de pagar, confirme": o custom.css força
   18px de largura em TODO .form-check-input no celular, com !important — o trilho
   sumia e sobrava uma bolinha a 4px da borda da tela */
@media (max-width: 575.98px) {
	.form-switch { display: flex; align-items: flex-start; gap: 12px; padding-left: 0; }
	.form-switch .form-check-input {
		flex: none; float: none;
		width: 2.4em !important;
		height: 1.35em !important;
		margin: 2px 0 0 0 !important;
	}
	.form-switch .form-check-label { padding-left: 0 !important; }
}
/* legibilidade (critique 09/10, medido pelo detector):
   - texto de ajuda dos campos vinha #bdbdbd do tema (1,9:1); o cinza da reforma dá 5,3:1
   - selo do PIX: verde sobre verde-claro dava 3,7:1; o tom escuro do mesmo verde dá 5,7:1
   - selos e o rodapé estavam em 10,5–10,8px: piso de 12px */
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--pr-mut) !important; opacity: 1; } /* !important: o tema usa input[type="text"]::-webkit-input-placeholder (0,1,2), mais forte que estes (2º critique, 09/10) */
.selo { font-size: 12px; }
.selo-pix,
.esc-escolhe { color: #0A6E43; } /* o mesmo verde-sobre-verde-claro (3,7:1) no "Você escolhe o que comprar" */
#footer .text-1 { font-size: 12px !important; }
/* a barra fixa da montagem: a seção 11 compacta ".barra-final .btn", mas desde a
   FATIA 63 os botões são .p3-btn — no celular "Ir para pagamento" e "Comprar
   também para…" passavam da borda da tela (medido: R=427 e 493 em 375px) */
@media (max-width: 575.98px) {
	/* custom.css: "form.text-center { flex-direction: column !important; padding: 16px 12px !important }"
	   — seletor (0,1,1) que vencia a seção 11; em coluna com quebra, os botões iam
	   para uma 2ª coluna fora da tela. Mesmo peso aqui, e este arquivo vem depois. */
	form.barra-final {
		flex-direction: row !important;
		padding: 8px 10px !important;
		gap: 6px !important;
	}
	.barra-final .p3-btn {
		flex: 1 1 0;
		min-width: 0;
		margin-bottom: 0 !important;
		padding: 10px 8px !important;
		font-size: 13px !important;
		white-space: normal;
		line-height: 1.2;
	}
}
/* 2º critique (09/10): lista sem nenhum item vendável na página da escola — sem
   preço nem "Montar esta lista"; o estado é neutro (não é erro do pai) */
.esc-indisponivel {
	background: var(--pr-soft); color: var(--pr-mut);
	font-size: 13px; font-weight: 700; border-radius: 9px; padding: 9px 12px; margin: 0;
}
/* 2º critique (09/10): no celular a barra do resumo empilhava os 2 botões e media
   208px (26% da tela). Lado a lado — na ordem do dono (FATIA 61): outro filho à
   esquerda, o caminho do pagamento em verde à direita. */
@media (max-width: 767.98px) {
	.p3-barra__acoes:not(.p3-barra__acoes--uma) { grid-template-columns: 1fr 1fr; }
	.p3-barra__acoes .p3-btn { min-width: 0; padding: 10px 8px; font-size: 14px; white-space: normal; }
	.p3-barra__acoes .p3-btn small { font-size: 11px; }
}
/* 3º critique (09/10) — o que segurava a nota:
   - botão do menu no celular: era o azul do Porto (#0088CC), solto; agora o azul da
     marca e o canto da reforma. Os itens do menu NÃO mudam (decisão do dono).
   - recado da escola: aberto na primeira tela da escola na sessão; nas seguintes
     vira uma linha (banner_helper.php). No computador o resumo recolhido precisa
     aparecer — antes o <summary> só existia no celular. */
.header-btn-collapse-nav {
	background: var(--pr-pri) !important;
	border-color: var(--pr-pri) !important;
	color: #FFFFFF !important;
	border-radius: var(--pr-r-btn) !important;
}
.header-btn-collapse-nav:hover, .header-btn-collapse-nav:focus { background: var(--primary-100) !important; }
@media (min-width: 576px) {
	.school-aviso:not([open]) > summary {
		display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
		cursor: pointer; list-style: none; font-weight: 700; font-size: 14px;
	}
	.school-aviso:not([open]) > summary::-webkit-details-marker { display: none; }
	.school-aviso:not([open]) .school-aviso-mais { font-size: 12.5px; font-weight: 800; text-decoration: underline; }
	.school-aviso:not([open]) { padding: 9px 15px; }
}
/* 4º passo do critique (09/10) — contraste e leitura, medidos pelo detector:
   - verde de AVANÇAR: #fff sobre #0E8E56 dava 4,2:1 (mínimo 4,5); o tom escuro do
     mesmo verde dá 5,4:1. Vale para todo botão verde (avançar), não para preços.
   - cartões de produto da montagem no celular (custom.css): marca #999 a 9px (2,7:1),
     nome a 11px, subtotal #28a745 (3,0:1)
   - paginação dos extras no celular: a página atual era azul sobre azul (1,1:1) —
     custom.css pinta todo <a> com #0056b3 !important abaixo de 576px */
.p3-btn--verde, a.p3-btn--verde, .btn-success { background-color: #0B7A4A !important; border-color: #0B7A4A !important; }
.p3-btn--verde:hover, .btn-success:hover, .btn-success:focus { background-color: #08613A !important; border-color: #08613A !important; }
@media (max-width: 575.98px) {
	.mobile-product-card .mobile-product-card-name { font-size: 13px; }
	.mobile-product-card .mobile-product-card-brand { font-size: 12px; color: var(--pr-mut); }
	.mobile-product-card .mobile-product-card-subtotal { font-size: 13px; color: #0A6E43; }
	.pagination .page-item.active .page-link { color: #FFFFFF !important; text-decoration: none !important; }
	.pagination .page-link { text-decoration: none !important; }
}
/* 4º passo do critique (09/10) — topo do celular comia metade da tela (medido em 375px):
   - a faixa do botão do menu tinha folga do tema e o botão vinha CENTRALIZADO (o tema
     dá margem automática ao .header-nav): agora compacta e à direita. Cabeçalho 164→136px.
     Os itens do menu não mudam.
   - número da sacola saía cortado na borda direita
   - barra de etapas quebrava em 2 linhas (70px): no celular, só a etapa atual escrita
     ("Etapa 4 de 7 · Resumo") e as outras como traços verdes/cinza — uma linha (32px).
     As 7 etapas continuam no HTML (leitor de tela lê todas). */
@media (max-width: 575.98px) {
	.header-nav-bar { padding: 0 !important; min-height: 0 !important; border-top: 0 !important; }
	.header-nav-bar .header-container, .header-nav-bar .header-row, .header-nav-bar .header-column { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
	.header-nav-bar .header-row.justify-content-end { justify-content: flex-end !important; }
	.header-nav-bar .header-nav { min-height: 0 !important; padding: 4px 0 !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; width: auto !important; }
	.header-btn-collapse-nav { width: 44px; height: 40px; padding: 0 !important; margin: 0 0 0 auto !important; display: flex !important; align-items: center; justify-content: center; }
	.header-nav-features-cart { margin-right: 10px !important; }
	.p3-trilha { counter-reset: etapa; flex-wrap: nowrap; }
	.p3-trilha li { counter-increment: etapa; }
	.p3-trilha li:not(.aqui) { font-size: 0; gap: 0; }
	.p3-trilha li.aqui::before { content: "Etapa " counter(etapa) " de 7 · "; font-weight: 600; color: var(--pr-mut); }
}
/* 4º passo do critique (09/10): a barra da montagem no computador começava 8px antes dos
   cartões (margin: 0 -8px da página) — mesma coluna dos cartões, como as outras barras */
@media (min-width: 576px) { form.barra-final { margin: 0; } }

/* 4º passo do critique (09/10) — pagamento:
   - as formas de pagamento eram cartão dentro de cartão: o de fora vira só espaço
   - os aceites ("Antes de pagar, confirme") tinham 36x20px de toque: a linha inteira
     (o <label> já aponta para o interruptor) passa a ter 44px de altura */
.p7-formas { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.p7-formas > .card-body { padding: 0 !important; }
.form-switch { min-height: 44px; display: flex; align-items: center; }
.form-switch .form-check-label { cursor: pointer; padding-top: 6px; padding-bottom: 6px; }
.p7-resumo__total { font-weight: 800; color: var(--pr-ink); }

/* acerto do 4º passo: o botão final desativado herdava o azul-claro do tema; o total no
   resumo fechado do celular cortava na borda — vai para a linha de baixo */
#start_checkout:disabled, .btn-success:disabled { background-color: #0B7A4A !important; border-color: #0B7A4A !important; color: #FFFFFF !important; opacity: .5 !important; }
.p7-resumo__meta { flex-wrap: wrap; }
.p7-resumo__total { display: block; width: 100%; text-align: right; }

/* número da sacola: o tema fixa 15px de largura e 9px de letra — "28" virava "2" e o
   detector mediu 3,5:1; largura cresce com o número, letra legível, vermelho mais escuro */
#header .header-nav-features .header-nav-features-cart .cart-info .cart-qty {
	width: auto !important; min-width: 18px; height: 18px; line-height: 18px !important;
	padding: 0 5px !important; font-size: 11px !important; font-weight: 800; background-color: #C93A2F;
}

/* =========================================================================
   5º critique (09/10) — sobras do 4º passo, contraste, letra mínima, faixas
   laterais e o que mudou na montagem e no pagamento
   ========================================================================= */
/* o botão de pagar: a seção 23 (#start_checkout, azul) vencia o verde da 4ª rodada
   quando o botão ligava — verde ligado; desligado em cinza legível (era 2,15:1) */
#start_checkout { background: #0B7A4A !important; border-color: #0B7A4A !important; color: #FFFFFF !important; }
#start_checkout:hover:not(:disabled) { background: #08613A !important; border-color: #08613A !important; }
#start_checkout:disabled, .btn-success:disabled {
	background-color: #E6EAF0 !important; border-color: #D5DBE3 !important;
	color: #4A5868 !important; opacity: 1 !important; cursor: not-allowed;
}
/* "Ir para o pagamento" (entrega): a pele da FATIA 30 era o azul da marca */
#fechar_pedido_form .btn-success { background: #0B7A4A !important; border-color: #0B7A4A !important; }
#fechar_pedido_form .btn-success:hover:not(:disabled) { background: #08613A !important; filter: none; }
/* entrega: "Ver os extras" no azul do Bootstrap (#0d6efd) vira o contorno da marca */
#fechar_pedido_form ~ * .btn-outline-primary, .btn-outline-primary { color: var(--pr-pri); border-color: var(--pr-pri); }
.btn-outline-primary:hover { background: var(--pr-pri); color: #FFFFFF; }
/* entrega: cartão por filho com borda e selo verdes ("COM ITENS") brigava com o botão */
.card.p6-filho { border-color: var(--pr-line) !important; }
.badge.p6-selo {
	background: var(--pr-soft) !important; color: var(--pr-mut) !important;
	border: 1px solid var(--pr-line); font-weight: 700; font-size: 12px; text-transform: none;
}
/* PIX nos selos de confiança: verde-sobre-verde-claro a 3,7:1 */
.selos-confianca .sc-pix { color: #0A6E43; }

/* letra mínima de 12px no que o pai precisa ler */
.p3-tipo, .badge.ex-selo, .selo-escolha-unica, .p7r-grupo, .esc-tipo { font-size: 12px; }
.m2-hd__sub small, .p7r-item__nome small { font-size: 12px; }
.mobile-product-card .badge, .acc2 .badge { font-size: 12px; }
#fechar_pedido_form .card-text.small, .p6-filho .card-text.small { font-size: 13px; }
.p7-formas small, .p7-formas .small, #card_form small, p.text-muted.small { font-size: 12.5px; }
/* botões de linha com entrelinha 1,25: o texto encostava na borda ao quebrar */
a.p3-btn--linha, #res-continuar { line-height: 1.35; }

/* faixa lateral colorida (side-tab) vira borda inteira e fina no tom do aviso */
.alert, .school-aviso, .acesso-escola, .p3-recado, .pc-cabeca, .p3-nota-total, .pl-flash {
	border-width: 1px !important; border-style: solid !important; border-radius: var(--pr-r-btn) !important;
}
.alert-danger, .pl-flash { border-color: #F0C9C4 !important; }
.alert-success, .pl-flash--ok, .pc-cabeca--success { border-color: #BFE3CF !important; }
.alert-warning, .school-aviso, .pc-cabeca--warning { border-color: #EBD3A6 !important; }
.alert-info, .acesso-escola, .p3-nota-total { border-color: #C9DAF2 !important; }
.p3-recado, .pc-cabeca { border-color: var(--pr-line) !important; }
.pc-cabeca--danger { border-color: #F0C9C4 !important; }

/* montagem: itens em falta recolhidos no fim da lista (escolha do dono). Os
   contadores seguem no DOM SEM display:none — os coletores do salvar pulam o que
   está oculto e o zero do item em falta precisa viajar na revisão */
.m2-falta-toggle {
	display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px;
	background: none; border: 0; padding: 4px 0; min-height: 40px; text-align: left;
	font: inherit; font-weight: 600; color: var(--pr-mut); cursor: pointer;
}
.m2-falta-toggle__acao { color: var(--pr-pri); text-decoration: underline; white-space: nowrap; }
.m2-falta-toggle:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }
.acc2:not(.falta-aberta) tr.m2-falta-item { visibility: collapse; }
.acc2:not(.falta-aberta) .mobile-product-card.m2-falta-item {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); margin: 0 !important; padding: 0 !important;
}
tr.m2-falta-divisor td, div.m2-falta-divisor { font-size: 13px; }

/* pagamento: cobrança no mesmo endereço da entrega — os campos recolhem */
#fat_endereco_campos.fat-oculto { display: none; }

/* montagem no celular: "Conferir o pedido →" quebrava a seta numa 2ª linha e o
   "Comprar também para…" ocupava 4 linhas — o avanço fica numa linha ao lado do
   total; comprar para o outro filho vira link de texto embaixo */
@media (max-width: 575.98px) {
	form.barra-final { flex-wrap: wrap !important; align-items: center; }
	form.barra-final .barra-final-total { flex: 1 1 0 !important; min-width: 0; text-align: left; }
	.barra-final #finalizar-btn { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; padding: 12px 14px !important; font-size: 14px !important; }
	.barra-final .p3-btn:not(#finalizar-btn) {
		flex: 1 0 100%; order: 5; background: transparent !important; border: 0 !important;
		box-shadow: none !important; color: var(--pr-pri) !important; text-decoration: underline;
		font-weight: 600; min-height: 40px; padding: 4px 8px !important;
	}
	.barra-final .p3-btn:not(#finalizar-btn) i { display: none; }
	.barra-final #finalizar-btn i { display: none; } /* a seta quebrava numa 2ª linha; o verde já diz avançar */
}

/* resumo: lista marcada que ficou de fora do pedido (a barra dizia "pedido completo") */
.res-fora {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px;
	background: var(--pr-warn-soft); border: 1px solid #EBD3A6; border-radius: var(--pr-r-btn);
	color: #6B4508; padding: 12px 16px; margin: 0 0 14px; font-size: 14px; line-height: 1.45;
}
.res-fora a { color: var(--pr-pri); font-weight: 700; text-decoration: underline; white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }
#fechar_pedido_form .btn-success { font-weight: 700 !important; }
/* celular: a prévia decorativa do cartão somava ~350px a uma página de 3.700px */
@media (max-width: 575.98px) { #card_preview { display: none !important; } }
/* computador: a seta de "Conferir o pedido" também descia para a 2ª linha */
.barra-final #finalizar-btn { white-space: nowrap; }

/* =========================================================================
   6º critique (09/10)
   ========================================================================= */
/* entrega: frete único é FATO, não escolha — o rádio segue marcado no formulário
   (sem display:none, os coletores e os testes o leem), só o círculo some */
.p6-frete-unico { padding-left: 0 !important; border: 1px solid var(--pr-line) !important; background: var(--pr-soft); }
.p6-frete-unico .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.p6-frete-unico .form-check-label { font-weight: 600; color: var(--pr-ink); padding-left: 14px; }
/* extras no celular: 9 categorias em 4 linhas empurravam os produtos para fora da tela;
   uma linha só, com rolagem lateral */
@media (max-width: 575.98px) {
	.ex-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
	.ex-chips::-webkit-scrollbar { display: none; }
	.ex-chip { flex: 0 0 auto; white-space: nowrap; }
}
/* letra mínima: marca do produto na montagem do computador (10,5px ×42), cabeçalho
   da tabela (11px) e o número da sacola (11px) */
.acc2 td small.text-muted, .acc2 .table th { font-size: 12px !important; }
#header .header-nav-features .header-nav-features-cart .cart-info .cart-qty { font-size: 12px !important; }
#barra-final-cond { font-size: 12px !important; }

/* ===================================================== AUDITORIA 12/10 ====
   Termos de uso e privacidade: o texto (o mesmo, em seções) e a janela que
   abre por cima do pagamento. Antes era um bloco de <br> sem títulos, com
   rolagem lateral no celular (e-mail e endereço longos não quebravam). */
.termos { max-width: 72ch; margin: 0 auto; color: var(--pr-ink); line-height: 1.65; font-size: 16px; overflow-wrap: anywhere; }
.termos-topo { margin-bottom: 24px; }
.termos h1 { font-size: 1.6rem; line-height: 1.25; font-weight: 700; color: var(--pr-ink); margin: 0 0 6px; text-wrap: balance; }
.termos-meta { color: var(--pr-mut); font-size: 14px; margin: 0; }
.termos section { margin-top: 28px; }
.termos h2 { font-size: 1.15rem; font-weight: 700; color: var(--pr-ink); margin: 0 0 10px; padding-top: 4px; scroll-margin-top: 16px; }
.termos h3 { font-size: 1rem; font-weight: 600; color: var(--pr-ink); margin: 18px 0 6px; }
.termos p { margin: 0 0 10px; }
.termos ul { margin: 0 0 10px; padding-left: 1.25em; }
.termos li { margin-bottom: 4px; }
.termos a { color: var(--pr-pri); text-decoration: underline; }

/* janela dos termos no pagamento: o pai lê sem sair da página nem perder o que preencheu */
.termos-janela { border: 0; padding: 0; border-radius: var(--pr-r); width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--pr-shadow-lift); background: #fff; color: var(--pr-ink); }
.termos-janela::backdrop { background: rgba(21, 36, 56, .55); }
.termos-janela__barra { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--pr-line); }
.termos-janela__barra strong { font-size: 15px; }
.termos-janela__fechar { min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--pr-line); border-radius: var(--pr-r-btn); background: var(--pr-soft); color: var(--pr-ink); font-weight: 600; }
.termos-janela__fechar:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; }
.termos-janela__corpo { padding: 16px 20px 24px; overflow-y: auto; max-height: calc(100vh - 48px - 70px); }
.termos-janela .termos h1 { font-size: 1.3rem; }

/* aceite do pagamento: a frase inteira marca; só as palavras sublinhadas abrem os termos */
/* 13/10 (dono: "check desalinhado"): o interruptor segue o MESMO desenho do de
   cima (o padrão do form-switch); os links dentro do rótulo não podem herdar a
   altura mínima de 44px que o custom.css dá a todo botão no celular — era isso
   que jogava "Privacidade e Cookies" para uma linha distante. */
.aceite-termos label { cursor: pointer; }
.aceite-termos .link-termos { display: inline; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; color: var(--pr-pri) !important; text-decoration: underline; font: inherit; line-height: inherit; vertical-align: baseline; cursor: pointer; box-shadow: none !important; }
.aceite-termos .link-termos:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; border-radius: 3px; }

/* 13/10 (dono: "botão em branco") — o custom.css pinta de BRANCO o texto de todo
   link-botão em foco (a.btn:focus), e no celular o foco fica no botão depois do
   toque/voltar: "Ver os extras" virava texto branco sobre fundo branco. */
a.btn.btn-outline-primary, a.btn.btn-outline-primary:focus { color: var(--pr-pri) !important; background-color: #fff !important; border-color: var(--pr-pri) !important; }
a.btn.btn-outline-primary:hover, a.btn.btn-outline-primary:active { color: var(--pr-pri) !important; background-color: var(--pr-soft) !important; }

/* Auditoria 12/10 — o custom.css do tema, no celular, põe TODO .btn-primary com
   largura 100% e TODO link azul sublinhado, com !important. Na escola com senha
   o botão Entrar ocupava a linha e o campo de senha ficava com 26px; na 404 e
   no link vencido o botão virava azul sobre azul. */
@media (max-width: 575.98px) {
	.esc-senha-linha .btn.btn-primary { width: auto !important; margin-bottom: 0 !important; flex: 0 0 auto; }
	.esc-senha-linha input { min-width: 0; }
}
/* ano sem nada à venda agora: continua clicável (mostra o aviso da lista), mas apagado */
.filtro-serie.sem-itens:not(.ativo) { color: var(--pr-mut); border-style: dashed; }
/* recusa do pagamento que fica escrita (auditoria 12/10) */
.p7-erro { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--pr-r-inp); background: var(--pr-crit-soft); color: var(--pr-crit); font-weight: 600; font-size: 14px; }
/* editar cadastro: o "Voltar" ficava azul sobre cinza no celular (1,2:1) — o custom.css pinta todo link */
a.btn.btn-voltar-cad, a.btn.btn-voltar-cad:visited { background: #fff !important; color: var(--pr-ink) !important; border: 1.5px solid var(--pr-line) !important; text-decoration: none !important; }

/* Auditoria 12/10 — barras fixas ocupavam 17–19% da tela do celular. Na página
   da escola o botão caía para uma linha própria (o custom.css põe 100% em todo
   .btn-primary); na relação, o subtítulo do botão dobrava a altura. */
@media (max-width: 575.98px) {
	.esc-fixa { flex-wrap: nowrap; padding: 8px 12px; }
	.esc-fixa .btn.btn-primary { width: auto !important; margin-bottom: 0 !important; flex: 0 1 auto; max-width: 58%; line-height: 1.2; }
	.esc-fixa-txt { font-size: 12.5px; }
	.esc-fixa-txt b { font-size: 17px; }
	.p3-barra .p3-btn small { display: none; }
}

/* ===================================================== AUDITORIA 12/10 ====
   Entrar com código por e-mail (acesso) */
.login-codigo { margin-top: 8px; }
.login-codigo__ou { display: flex; align-items: center; gap: 12px; color: var(--pr-mut); font-size: 13px; margin: 6px 0 14px; }
.login-codigo__ou::before, .login-codigo__ou::after { content: ""; flex: 1; height: 1px; background: var(--pr-line); }
.login-codigo .btn-outline-primary { border: 1.5px solid var(--pr-pri) !important; color: var(--pr-pri) !important; background: #fff !important; white-space: normal; }
.login-codigo .btn-outline-primary:hover, .login-codigo .btn-outline-primary:focus-visible { background: var(--pr-soft) !important; }
.login-codigo__ajuda { font-size: 14px; color: var(--pr-mut); margin: 10px 0 0; }
.login-codigo__link { background: none; border: 0; padding: 0; color: var(--pr-pri); text-decoration: underline; font: inherit; font-weight: 600; cursor: pointer; min-height: 32px; }
.login-codigo__link:focus-visible { outline: 3px solid var(--pr-pri); outline-offset: 2px; border-radius: 3px; }
.login-codigo__painel { border: 1.5px solid var(--pr-line); border-radius: var(--pr-r); padding: 16px; background: #fff; }
.login-codigo__titulo { font-size: 18px; font-weight: 700; color: var(--pr-ink); margin: 0 0 10px; }
.login-codigo__ok { background: var(--pr-money-soft); color: #0B5C38; border-radius: var(--pr-r-inp); padding: 10px 12px; font-size: 14px; font-weight: 600; }
.login-codigo__erro { background: var(--pr-crit-soft); color: var(--pr-crit); border-radius: var(--pr-r-inp); padding: 10px 12px; font-size: 14px; font-weight: 600; }
.login-codigo__numero:not(:placeholder-shown) { letter-spacing: .35em; font-variant-numeric: tabular-nums; font-weight: 700; }
.login-codigo__titulo { text-transform: none !important; letter-spacing: 0 !important; }
.login-codigo__ou:has(~ .login-codigo__painel:not([hidden])) { display: none; }
.login-codigo__acoes { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }

/* 13/10 — no celular a altura mínima do conteúdo (calc(100vh - 393px), feita
   para o rodapé do computador) deixava um vão grande antes do rodapé, que no
   celular é bem mais alto. Ex.: "Seus pedidos" vazio. */
@media (max-width: 575.98px) {
	[role="main"].main, div[role="main"] { min-height: 0 !important; }
}
/* 13/10 — item ainda fora do pedido: o lugar do subtotal mostra o preço do produto, em cinza */
.mobile-product-card .subtotal-item.subtotal-item--preco, td.subtotal-item.subtotal-item--preco { color: var(--pr-mut) !important; font-weight: 600 !important; }

/* 13/10 (dono: "telefone torto e desalinhado") — no celular o ícone do WhatsApp
   tinha 14px e ficava 8px acima do usuário e da sacola (20px). Mesmo tamanho e
   mesmo centro — só o ícone do telefone se mexe. */
@media (max-width: 991.98px) {
	#header .header-extra-info-icon i.icon-phone { font-size: 20px !important; line-height: 1; display: block; top: 12px !important; }
}
/* 13/10 — o botão do menu ocupava uma linha inteira só para ele (60px de vão
   branco no topo de toda tela). Sobe para a linha dos ícones, à direita da
   sacola; o menu aberto continua descendo logo abaixo do cabeçalho. */
@media (max-width: 991.98px) {
	#header .header-body > .header-container .header-row.py-2 { padding-right: 56px; }
	#header .header-nav-bar .header-row { min-height: 0 !important; height: 0; }
	#header .header-nav-bar { border-top: 0 !important; }
	#header .header-btn-collapse-nav { position: absolute !important; top: -41px; right: 8px; width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; z-index: 5; display: flex !important; align-items: center; justify-content: center; }
	#header .header-nav-main nav.show, #header .header-nav-main nav.collapsing { margin-top: 0; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
	#header .header-btn-collapse-nav { top: -73px; }
}
/* 13/10 — com o botão do menu na linha dos ícones, nome de escola longo
   ("COLEGIO FRANCISCANO PIO XII") empurrava a sacola para baixo do botão. O
   nome encolhe (2 linhas no máximo) e, nas telas mais estreitas, sai do
   cabeçalho — ele já está no conteúdo de cada página. */
@media (max-width: 991.98px) {
	#header .header-nav-features .header-nav-feature.ps-lg-5 { min-width: 0; flex: 1 1 auto; margin-right: 8px !important; padding-right: 0 !important; }
	#header .header-nav-features .header-nav-feature.ps-lg-5 h4 { font-size: 15px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
}
@media (max-width: 400px) {
	#header .header-nav-features .header-nav-feature.ps-lg-5 h4 { display: none; }
}
/* 13/10 — na tela de toque o efeito de "passar o mouse" fica preso depois do toque: o
   "+" virava branco sobre cinza e parecia desativado. Sem mouse, sem efeito. */
@media (hover: none) {
	.qty-stepper .qty-stepper-btn:hover, .qty-stepper .qty-stepper-btn:focus { color: var(--pr-pri) !important; }
}
/* 13/10 — extra adicionado: o cartão mostra que está no pedido */
.product-thumb-info-image { position: relative; }
.ex-no-pedido { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: var(--pr-money); color: #fff; font-weight: 700; font-size: 12px; padding: 4px 8px; border-radius: 999px; }
/* 13/10 — "Ir para o pagamento" só parece desativado: o toque mostra o que falta */
#fechar_pedido_form .btn.disabled[aria-disabled="true"] { pointer-events: auto; cursor: pointer !important; }
/* 13/10 (dono: "parece um drop-down com essas setas, mas não tem opção ali") — o
   tema punha seta de submenu nos 3 itens (eram dropdown-toggle sem submenu). No
   celular o menu vira uma lista de atalhos: ícone, texto à esquerda, sem
   sublinhado, o item da página atual em azul claro. No computador nada muda. */
#header #mainNav .menu-ico { display: none; }
@media (max-width: 991.98px) {
	#header .header-nav-main nav { background: #FFFFFF; }
	#header .header-nav-main nav > ul#mainNav { padding: 8px 12px 12px; gap: 2px; flex-direction: column; }
	#header .header-nav-main nav > ul#mainNav > li { border: 0 !important; margin: 0; }
	#header .header-nav-main nav > ul#mainNav > li > a,
	#header .header-nav-main nav > ul#mainNav > li > a.active {
		display: flex !important; align-items: center; gap: 12px; justify-content: flex-start !important;
		min-height: 52px; padding: 8px 12px !important; margin: 0 !important; border-radius: var(--pr-r-btn) !important;
		background: transparent !important; color: var(--pr-ink) !important; text-decoration: none !important;
		font-size: 14px !important; font-weight: 600 !important; letter-spacing: .04em; text-align: left !important;
	}
	#header .header-nav-main nav > ul#mainNav > li > a:hover,
	#header .header-nav-main nav > ul#mainNav > li > a:focus-visible { background: var(--pr-soft) !important; }
	#header .header-nav-main nav > ul#mainNav > li > a.active { background: var(--pr-mochila-soft) !important; color: var(--pr-pri) !important; }
	#header .header-nav-main nav > ul#mainNav > li > a::before,
	#header .header-nav-main nav > ul#mainNav > li > a::after { display: none !important; }
	#header #mainNav .menu-ico {
		display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px;
		border-radius: 9px; background: var(--pr-soft); color: var(--pr-mut); font-size: 14px;
	}
	#header #mainNav a.active .menu-ico { background: var(--pr-pri); color: #FFFFFF; }
}
/* 13/10 — varredura dos cantos feios (dono: "faça do 1 ao 10") */
/* esqueci a senha / nova senha / editar cadastro: o mesmo título e cartão das outras telas */
.conta-card { border: 1.5px solid var(--pr-line) !important; border-radius: var(--pr-r) !important; box-shadow: var(--pr-shadow) !important; background: #FFFFFF; }
.conta-titulo { font-size: clamp(24px, 4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--pr-ink); margin: 0 0 6px; text-align: center; text-transform: none; }
.conta-sub { color: var(--pr-mut); font-size: 15px; text-align: center; margin: 0 0 22px; }
.conta-sub-titulo { font-size: 18px; font-weight: 700; color: var(--pr-ink); margin: 6px 0 14px; text-transform: none; letter-spacing: -.01em; }
.conta-card .btn-primary { border-radius: var(--pr-r-btn) !important; text-transform: none !important; }
.conta-acoes { display: flex; gap: 12px; margin: 8px 0 32px; }
.conta-acoes .btn { flex: 1 1 0; min-height: 50px; border-radius: var(--pr-r-btn) !important; text-transform: none !important; font-size: 16px !important; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) { .conta-acoes { flex-direction: column; } }
/* rodapé: endereço em caixa normal, sem o peso de título */
#footer h5 { text-transform: none !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0; line-height: 1.4; }
/* pagamento: no computador o interruptor do "Antes de pagar" encolhia (30x15) e ficava
   pendurado fora da linha — o mesmo desenho do celular em todas as larguras */
.form-switch { display: flex; align-items: flex-start; gap: 12px; padding-left: 0; }
.form-switch .form-check-input { flex: none; float: none; width: 2.4em !important; height: 1.35em !important; margin: 3px 0 0 0 !important; }
.form-switch .form-check-label { padding-left: 0 !important; }
/* pagamento no celular: "Resumo do pedido" quebrava em 2 linhas ao lado do "toque para conferir" */
@media (max-width: 575.98px) {
	.p7-resumo summary { align-items: center; }
	.p7-resumo__t { white-space: nowrap; flex: 0 0 auto; }
	.p7-resumo__meta { display: flex; justify-content: flex-end; text-align: right; }
}
/* entrega: o rótulo do valor de cada filho, discreto */
.p6-rot { color: var(--pr-mut); font-size: 14px; font-weight: 600; }
/* extras no celular: 2 por linha — nome e preço menores, botão da sacola no canto */
@media (max-width: 767.98px) {
	.products .product .ex-nome { font-size: 13px; line-height: 1.3; }
	.products .product .ex-preco { font-size: 14px; }
	.products .product .badge.ex-selo { font-size: 10.5px !important; max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* com 12px de vão entre colunas, 2 de 50% não cabiam e cada cartão caía para a linha de baixo */
	.products.product-thumb-info-list { column-gap: 0 !important; }
	/* a sacola desce para o canto de baixo da foto: em cima ela cobria a marca */
	.product .product-thumb-info .addtocart-btn-wrapper { top: auto !important; bottom: 8px !important; right: 8px !important; left: auto !important; }
	.product .product-thumb-info .addtocart-btn-wrapper .addtocart-btn { border-radius: 999px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
}
/* 404: o botão do WhatsApp ficava sem borda (o tema zerava) */
.p404 .acoes a.secundario { border: 1.5px solid #C5D3E4 !important; }
/* editar cadastro: o título colava no primeiro campo */
.conta-titulo.text-start { margin-bottom: 22px; }
/* 13/10 (dono: "do extras à entrega está desalinhado") — o tema dá 8px de margem
   embaixo de todo <li> de lista: a trilha das etapas subia 4px em relação ao
   "← voltar" ao lado */
.p3-trilha li { margin: 0 !important; }