/* ==================================================================
   Maquete de Papel — Redesign 2026
   Carregado por inc/mp-assets.php (depois do CSS do Astra).
   Cor principal: azul do tema (#0170B9).
   ================================================================== */

:root {
	--mp-azul: #0170B9;
	--mp-azul-escuro: #015c97;
	--mp-tinta: #15222d;
	--mp-texto: #3a4652;
	--mp-suave: #5b6773;
	--mp-linha: #dfe5ea;
	--mp-fundo: #f5f8fa;
	--mp-verde: #1f7a4a;
	--mp-verde-fundo: #e5f3ea;
}

/* ---------- Home (conteúdo da página Loja) ---------- */
.mp-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; margin: 0 0 28px; }
.mp-hero p.mp-lead { font-size: 1.15em; line-height: 1.55; color: var(--mp-texto); margin: 0 0 20px; }
.mp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.mp-btn { display: inline-block; padding: 13px 22px; border-radius: 4px; font-weight: 700; text-decoration: none !important; line-height: 1.2; }
.mp-btn.pri { background: var(--mp-azul); color: #fff !important; }
.mp-btn.pri:hover { background: var(--mp-azul-escuro); }
.mp-btn.sec { border: 2px solid var(--mp-azul); color: var(--mp-azul) !important; background: #fff; }
.mp-hero img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(20, 40, 60, .15); }
.mp-note { font-size: .9em; color: var(--mp-suave); margin-top: 10px; }

.mp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--mp-linha); border: 1px solid var(--mp-linha); border-radius: 6px; overflow: hidden; margin: 0 0 34px; }
.mp-trust div { background: #f7f9fa; padding: 14px 16px; font-size: .92em; line-height: 1.4; color: var(--mp-texto); }
.mp-trust b { display: block; color: var(--mp-tinta); font-size: 1.02em; margin-bottom: 2px; }

.mp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 34px; counter-reset: s; }
.mp-steps div { border: 1.5px dashed #b9c6d0; border-radius: 6px; padding: 12px; font-size: .92em; text-align: center; color: var(--mp-texto); }
.mp-steps div::before { counter-increment: s; content: counter(s); display: block; font-weight: 800; font-size: 1.4em; color: var(--mp-azul); }

.mp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.mp-cats a { border: 1px solid #cfd8df; border-radius: 999px; padding: 7px 14px; text-decoration: none !important; color: var(--mp-tinta) !important; background: #fff; font-size: .95em; }
.mp-cats a:hover { border-color: var(--mp-azul); color: var(--mp-azul) !important; }
.mp-h { font-size: 1.45em; margin: 0 0 12px; }

@media (max-width: 800px) {
	.mp-hero { grid-template-columns: 1fr; }
	.mp-hero .mp-img { order: -1; }
	.mp-trust { grid-template-columns: 1fr 1fr; }
	.mp-steps { grid-template-columns: 1fr 1fr; }
}

/* ---------- Vitrine: selos, dificuldade e preço no Pix ---------- */
.woocommerce ul.products li.product { position: relative; }
.mp-selo {
	position: absolute; top: 10px; left: 10px; z-index: 3;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 4px 8px; border-radius: 3px; background: #fff; color: var(--mp-tinta);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.mp-selo--top { background: #ffcf33; }

.mp-dif { display: inline-block; font-size: 12px; color: var(--mp-suave); margin: 2px 0 4px; }
.mp-dif::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #9aa7b2; vertical-align: 1px; }
.mp-dif--facil::before, .mp-dif--baixa::before { background: #2e9d5b; }
.mp-dif--media::before { background: #e0a100; }
.mp-dif--dificil::before, .mp-dif--alta::before, .mp-dif--avancada::before { background: #d0452a; }

.mp-pix { display: block; font-size: .82em; font-weight: 400; color: var(--mp-verde); margin-top: 2px; }
.mp-pix strong { font-weight: 700; }
.single-product .summary .mp-pix { font-size: .6em; margin-top: 4px; }

/* ---------- Página de produto ---------- */
.mp-spec { list-style: none; margin: 6px 0 18px !important; padding: 14px 16px !important; background: var(--mp-fundo); border: 1px solid var(--mp-linha); border-radius: 6px; font-size: .94em; }
.mp-spec li { margin: 0 0 4px; padding-left: 18px; position: relative; }
.mp-spec li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--mp-azul); }

.mp-confianca { list-style: none; margin: 10px 0 16px !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88em; color: var(--mp-texto); }
.mp-confianca li { margin: 0; padding-left: 20px; position: relative; }
.mp-confianca li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 11px; height: 6px; border-left: 2px solid var(--mp-verde); border-bottom: 2px solid var(--mp-verde); transform: rotate(-45deg); }

.mp-como { clear: both; margin: 32px 0 8px; padding: 22px 24px; border: 1.5px dashed #b9c6d0; border-radius: 6px; }
.mp-como h2 { font-size: 1.35em; margin: 0 0 12px; }
.mp-como ol { margin: 0 0 12px 1.2em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px; }
.mp-como ol li { margin: 0; }
.mp-como__ajuda { font-size: .9em; color: var(--mp-suave); margin: 0; }
@media (max-width: 800px) { .mp-como ol { grid-template-columns: 1fr; } }

/* Sem barra flutuante de compartilhamento na página de produto */
.single-product .shareaholic-share-buttons-container.floated,
.single-product [class*="shareaholic"][class*="float"] { display: none !important; }

/* ---------- Checkout enxuto ---------- */
.woocommerce-checkout .woocommerce-billing-fields .description { display: block; font-size: .85em; color: var(--mp-suave); margin-top: 4px; }
.woocommerce-checkout #billing_email_field .description,
.woocommerce-checkout #billing_cpf_field .description { position: static; }

/* ---------- Botão de WhatsApp ---------- */
.mp-whats {
	position: fixed; right: 18px; bottom: 18px; z-index: 9999;
	display: flex; align-items: center; gap: 8px;
	background: #25d366; color: #fff !important; text-decoration: none !important;
	padding: 10px 16px 10px 12px; border-radius: 999px; font-weight: 700; font-size: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.mp-whats:hover { background: #1ebe5b; }
.single-product .mp-whats { bottom: 84px; } /* acima do botão de compra fixo */
@media (max-width: 600px) { .mp-whats span { display: none; } .mp-whats { padding: 12px; } }

/* ---------- Kits (v1.1) ---------- */
.mp-kit-de { color: var(--mp-suave); font-weight: 400; margin-right: 4px; }
.mp-kit-oferta,
.mp-kit-checkout {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
	margin: 14px 0 18px; padding: 14px 16px; border-radius: 6px;
	background: #fff8e1; border: 1px solid #f1d27a; font-size: .93em; color: var(--mp-tinta);
}
.mp-kit-oferta p,
.mp-kit-checkout p { margin: 0; flex: 1 1 260px; }
.mp-kit-oferta__btn,
.mp-kit-checkout__btn {
	display: inline-block; padding: 9px 16px; border-radius: 4px; font-weight: 700; white-space: nowrap;
	background: var(--mp-tinta); color: #fff !important; text-decoration: none !important;
}
.mp-kit-oferta__btn:hover,
.mp-kit-checkout__btn:hover { background: #000; }
.mp-kit-checkout { margin: 0 0 24px; }

/* ---------- Modelo grátis e lista de e-mails (v1.2) ---------- */
.mp-gratis { color: var(--mp-verde); font-weight: 800; }
.mp-gratis-nota { background: var(--mp-verde-fundo); border-radius: 6px; padding: 10px 14px; font-size: .92em; color: var(--mp-tinta); margin: 0 0 14px; }
.mp-gratis-faixa {
	display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center;
	margin: 0 0 34px; padding: 18px 20px; border-radius: 6px;
	background: var(--mp-verde-fundo); border: 1px solid #bfe0cb;
}
.mp-gratis-faixa img { width: 140px; height: 140px; object-fit: contain; background: #fff; border-radius: 6px; }
.mp-gratis-faixa p { margin: 0 0 10px; color: var(--mp-texto); }
.mp-gratis-faixa__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-verde) !important; margin-bottom: 4px !important; }
.mp-gratis-faixa__titulo { font-size: 1.3em; font-weight: 700; color: var(--mp-tinta) !important; margin-bottom: 6px !important; }
@media (max-width: 600px) { .mp-gratis-faixa { grid-template-columns: 1fr; } .mp-gratis-faixa img { width: 100%; height: 180px; } }

.woocommerce-checkout .mp-newsletter { margin: 0 0 14px; font-size: .92em; }
.woocommerce-checkout .mp-newsletter label { display: flex; gap: 8px; align-items: flex-start; }
.woocommerce-checkout .mp-newsletter input { margin-top: 4px; }

/* ---------- Temporada volta às aulas (v1.2) ---------- */
.mp-temporada {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
	margin: 0 0 24px; padding: 14px 18px; border-radius: 6px; background: #fff8e1; border: 1px solid #f1d27a;
}
.mp-temporada p { margin: 0; flex: 1 1 320px; color: var(--mp-tinta); }
.mp-aviso-admin { background: #fff3cd; color: #664d03; text-align: center; padding: 8px 12px; font-size: 14px; }

/* Página Volta às aulas */
.mp-va-materias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 32px; }
.mp-va-materias > div { border: 1px solid var(--mp-linha); border-radius: 6px; padding: 16px 18px; background: #fff; }
.mp-va-materias h3 { margin: 0 0 8px; font-size: 1.15em; }
.mp-va-materias ul { margin: 0 0 0 1.1em; }
.mp-va-materias li { margin-bottom: 4px; }
.mp-va-faq h3 { font-size: 1.05em; margin: 18px 0 4px; }

/* ---------- Rodapé completo (v1.3) ---------- */
.mp-rodape { background: var(--mp-tinta); color: #c9d3db; padding: 40px 20px 28px; font-size: 14px; line-height: 1.6; }
.mp-rodape__grade { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 28px 32px; }
.mp-rodape p { margin: 0 0 10px; }
.mp-rodape ul { list-style: none; margin: 0; padding: 0; }
.mp-rodape li { margin: 0 0 6px; }
.mp-rodape a { color: #fff !important; text-decoration: none; }
.mp-rodape a:hover { text-decoration: underline; }
.mp-rodape__marca { font-size: 18px; font-weight: 700; color: #fff; }
.mp-rodape__titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fa3b3; }
.mp-rodape__selos li::before { content: "✓ "; color: #6fd19a; font-weight: 700; }
.mp-rodape__email { margin-top: 12px !important; word-break: break-all; }
@media (max-width: 900px) { .mp-rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 544px) {
	.mp-rodape__grade { grid-template-columns: 1fr; gap: 22px; }
	.mp-rodape li { margin-bottom: 10px; } /* alvos de toque maiores */
}

/* ---------- Perguntas frequentes (v1.3) ---------- */
.mp-faq { max-width: 820px; }
.mp-faq__grupo { font-size: 1.3em; margin: 28px 0 10px; }
.mp-faq__item { border: 1px solid var(--mp-linha); border-radius: 6px; margin: 0 0 8px; background: #fff; }
.mp-faq__item summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 600; color: var(--mp-tinta); list-style: none; position: relative; }
.mp-faq__item summary::-webkit-details-marker { display: none; }
.mp-faq__item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--mp-azul); }
.mp-faq__item[open] summary::after { content: "−"; }
.mp-faq__resp { padding: 0 16px 14px; color: var(--mp-texto); }
.mp-faq__resp p { margin: 0; }

/* ---------- Correções para celular (v1.3, teste em 375–500 px) ---------- */
/* "ou R$ X no Pix" quebrava em três linhas: o Astra deixa <strong> como bloco no preço. */
.mp-pix strong { display: inline !important; }

@media (max-width: 768px) {
	/* Cabeçalho de 157 px fixo + barra de compartilhamento de 56 px cobriam 1/3 da tela. */
	#masthead { position: relative !important; top: auto !important; }
	.shareaholic-share-buttons-container.shareaholic-floated,
	[class*="shareaholic"][class*="floated"] { display: none !important; }

	/* Texto base maior (o tema usa 13,7 px no celular). */
	body { font-size: 15px; }

	/* Campos com menos de 16 px fazem o iPhone dar zoom ao tocar. */
	.woocommerce form input.input-text,
	.woocommerce form select,
	.woocommerce form textarea,
	.woocommerce-checkout input.input-text { font-size: 16px !important; }

	/* Botão de finalizar tinha só 34 px de altura. */
	.woocommerce-checkout #place_order { min-height: 52px; font-size: 17px; width: 100%; }

	.single-product .single_add_to_cart_button { min-height: 46px; }
}