/*
Theme Name:   PP UCDB
Theme URI:    https://propaganda.ucdb.top/
Description:  Tema filho do Twenty Twenty-Five para o site do curso de Publicidade e Propaganda da UCDB. Linguagem editorial do Google Design (design.google) com as cores da UCDB e componentes do Material Design 3: papel e tinta, títulos pesados, muito respiro, cartões editoriais e chips contornados. Fonte do sistema (sem download), mobile-first e acessível (WCAG 2.2 AA). Inclui formulário de leads (e-mail + cópia no banco), WhatsApp, vídeos sob demanda e padrões de bloco para todas as seções.
Author:       Curso de Publicidade e Propaganda – UCDB
Template:     twentytwentyfive
Version:      3.5.4
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  pp-ucdb
*/

/* ==========================================================================
   Conceitos do Google Design (design.google) aplicados ao site:
   1. Papel e tinta: fundo #FDFDF5, texto #10120E; seções escuras editoriais (#12110C) e o azul UCDB como cor de marca.
   2. Tipografia como imagem: títulos em peso 800, entrelinha curta (1,05–1,1), grandes no computador.
   3. Respiro: seções com 4 a 7 rem de margem, grade de 3 colunas com 2 rem de intervalo.
   4. Cartões editoriais: sem caixa, sem sombra; só um fio de 2 px no topo, título forte, linha fina de apoio.
   5. Chips contornados em pílula (borda de 1,6 px) para etiquetas e habilidades.
   6. Imagens sem cantos arredondados.
   7. Cabeçalho mínimo: nome à esquerda, navegação à direita, linha fina embaixo.
   Do Material 3 ficam: alvos de 48 px, camadas de estado (8% hover, 10% foco), campos contornados e botões em pílula.
   ========================================================================== */

:root {
	--pp-papel: var(--wp--preset--color--superficie);
	--pp-papel-2: var(--wp--preset--color--superficie-2);
	--pp-tinta: var(--wp--preset--color--texto);
	--pp-tinta-2: var(--wp--preset--color--texto-secundario);
	--pp-azul: var(--wp--preset--color--primaria);
	--pp-azul-claro: var(--wp--preset--color--primaria-container);
	--pp-escuro: var(--wp--preset--color--escuro);
	--pp-contorno: var(--wp--preset--color--contorno);
	--pp-fio: var(--wp--preset--color--contorno-variante);
	--pp-vermelho: var(--wp--preset--color--destaque);
	--pp-borda: 1.6px;
	--pp-elev: 0 1px 3px rgba(0,0,0,.2), 0 4px 8px 3px rgba(0,0,0,.1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
img, video { max-width: 100%; height: auto; border-radius: 0; }
:target, [id] { scroll-margin-top: 7.5rem; } /* âncora não fica sob o cabeçalho (WCAG 2.4.11) */
:where(h1, h2, h3) { text-wrap: balance; font-variation-settings: "wdth" 115; }
p { text-wrap: pretty; }

/* Seções escuras: azul UCDB (capa, prêmios) e escuro editorial (agência, rodapé) */
:is(.has-primaria-background-color, .has-escuro-background-color) { --pp-sobre: #FFFFFF; }

/* ---------- Foco visível (WCAG 2.4.7) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--pp-azul); outline-offset: 2px; border-radius: 4px;
}
:is(.has-primaria-background-color, .has-escuro-background-color) :where(a, button, summary, input):focus-visible { outline-color: #FFFFFF; }
:where(h1, h2, h3, legend, .pp-alerta, .pp-form-retorno)[tabindex="-1"]:focus { outline: none; }
.skip-link.screen-reader-text:focus { background: var(--pp-tinta); color: #fff; padding: 1rem 1.25rem; z-index: 100000; border-radius: 999px; }

/* ---------- Alvos de toque: 48×48 ---------- */
.wp-block-button__link, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close,
.pp-btn, .pp-form button, .pp-quiz button, details > summary { min-height: 48px; min-width: 48px; }

/* Links no texto: sublinhados (WCAG 1.4.1) */
.wp-block-post-content a:not(.wp-block-button__link):not(.pp-btn) { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.wp-block-post-content a:not(.wp-block-button__link):not(.pp-btn):hover { text-decoration-thickness: 2px; }
:is(.has-primaria-background-color, .has-escuro-background-color) a:not(.wp-block-button__link):not(.pp-btn) { color: #FFFFFF; }

/* ---------- Cabeçalho mínimo, fixo na rolagem ---------- */
/* O sticky vai no invólucro <header class="wp-block-template-part">, que tem a mesma altura do cabeçalho. */
.wp-block-template-part:has(> .pp-header) { position: sticky; top: 0; z-index: 50; }
.pp-header { background: var(--pp-papel); border-bottom: 1px solid color-mix(in srgb, var(--pp-tinta) 12%, transparent); }
body.admin-bar .wp-block-template-part:has(> .pp-header) { top: 46px; }
@media (min-width: 783px) { body.admin-bar .wp-block-template-part:has(> .pp-header) { top: 32px; } }
@media (max-width: 600px) { body.admin-bar .wp-block-template-part:has(> .pp-header) { top: 0; } }
.pp-header a { color: var(--pp-tinta); text-decoration: none; }
.pp-header .wp-block-site-title a { font-weight: 500; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; }
.pp-header .wp-block-navigation-item__content { padding: .75rem; border-radius: 999px; white-space: nowrap; }
@media (min-width: 600px) and (max-width: 1100px) { .pp-header .wp-block-navigation-item__content { padding: .75rem .5rem; } .pp-header .wp-block-navigation { font-size: .8125rem; } .pp-header .wp-block-site-title a { white-space: normal; } }
@media (min-width: 600px) { .pp-header .wp-block-navigation__container { flex-wrap: nowrap; gap: .125rem; } }
.pp-header .wp-block-navigation-item__content:hover { background: color-mix(in srgb, var(--pp-tinta) 8%, transparent); }
.pp-header .current-menu-item > .wp-block-navigation-item__content,
.pp-header .wp-block-navigation-item__content[aria-current="page"] { box-shadow: inset 0 0 0 var(--pp-borda) var(--pp-tinta); }
.pp-header .wp-block-navigation__submenu-container { border: 0 !important; border-radius: 4px; box-shadow: var(--pp-elev); padding: .5rem 0; min-width: 14rem !important; background: var(--pp-papel) !important; }
.pp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 0; padding: .75rem 1rem; }
.pp-header .is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; }

/* Menu no celular: gaveta com itens à esquerda, 56 px, largura total */
.pp-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem; background: var(--pp-papel) !important; }
.pp-header .is-menu-open .wp-block-navigation__responsive-container-content,
.pp-header .is-menu-open .wp-block-navigation__container,
.pp-header .is-menu-open .wp-block-navigation-item,
.pp-header .is-menu-open .wp-block-navigation__submenu-container { align-items: stretch !important; gap: 0 !important; width: 100%; box-sizing: border-box; }
.pp-header .is-menu-open .wp-block-navigation-item__content { box-sizing: border-box; display: flex !important; align-items: center; width: 100%; min-height: 56px; padding: 0 1rem !important; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; border-radius: 999px; }
.pp-header .is-menu-open .wp-block-navigation__submenu-container { padding: 0 0 0 1rem !important; }
.pp-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; font-weight: 400; color: var(--pp-tinta-2); }
body:has(.is-menu-open) .pp-barra { display: none; }

/* ---------- Chips contornados (etiqueta da seção e habilidades) ---------- */
.pp-tag, .pp-hab {
	display: inline-flex; align-items: center; min-height: 32px; padding: 0 1rem;
	border: var(--pp-borda) solid currentColor; border-radius: 100px; background: transparent; color: inherit;
	font-size: .875rem; line-height: 1rem; font-weight: 400;
}
.pp-hab { margin: 0 .25rem .5rem 0; }
.pp-hab-rot { font-size: .875rem; color: var(--pp-tinta-2); margin-right: .25rem; }

/* Parte do título em destaque: só cor */
.pp-marca { color: var(--pp-azul); }
:is(.has-primaria-background-color, .has-escuro-background-color) .pp-marca { color: var(--pp-azul-claro); }

/* Fio vermelho UCDB: só na capa, como assinatura da marca */
.pp-capa > .wp-block-heading:first-of-type::before { content: ""; display: block; width: 48px; height: 4px; background: var(--pp-vermelho); margin-bottom: 1.25rem; }

/* Fonte dos dados (CONAR, art. 27, §1º) */
.pp-fonte { font-size: .875rem; line-height: 1.25rem; color: var(--pp-tinta-2); }
:is(.has-primaria-background-color, .has-escuro-background-color) .pp-fonte { color: rgba(255,255,255,.82); }

/* ---------- Cartões editoriais: sem caixa, fio de 2 px no topo ---------- */
.pp-card { border: 0; border-top: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit; height: 100%; }
.pp-card h3, .pp-card h2 { margin-top: 0; }
.pp-card > :first-child { margin-top: 0; }
.pp-card .pp-fonte { color: var(--pp-tinta-2); }
:is(.has-primaria-background-color, .has-escuro-background-color) .pp-card .pp-fonte { color: rgba(255,255,255,.82); }
.pp-card--link { position: relative; }
.pp-card--link a { text-decoration: none; color: inherit; }
.pp-card--link a::after { content: ""; position: absolute; inset: 0; }
.pp-card--link:hover h3 a, .pp-card--link:hover h2 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.pp-card--link:focus-within { outline: 3px solid var(--pp-azul); outline-offset: 4px; }
.pp-card--link a:focus-visible { outline: none; }
/* Números grandes dos cartões (7 anos, 3×, 14…) */
.pp-card strong[style*="1.75rem"] { display: inline-block; font-size: clamp(2.25rem, 5vw, 3.25rem) !important; line-height: 1; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.pp-card .pp-dif { border-top: 1px solid var(--pp-fio); padding-top: .75rem; font-size: .875rem; }
.pp-card ul { padding-left: 1.25rem; margin-block: .25rem; }

/* Trilho horizontal */
.pp-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80%, 1fr); gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.pp-trilho > * { scroll-snap-align: start; }
@media (min-width: 782px) { .pp-trilho { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }

/* Linha do tempo */
.pp-timeline { border-left: 2px solid currentColor; padding-left: 1.5rem; }
.pp-timeline > .wp-block-group { position: relative; }
.pp-timeline > .wp-block-group::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }

/* Acordeões */
details.wp-block-details { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding: 0; margin: 0; }
details.wp-block-details > summary { cursor: pointer; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; padding: 1rem 2.5rem 1rem 0; list-style: none; position: relative; display: flex; align-items: center; }
details.wp-block-details > summary::-webkit-details-marker { display: none; }
details.wp-block-details > summary::after { content: ""; position: absolute; right: .75rem; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
details.wp-block-details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details.wp-block-details > summary:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
details.wp-block-details[open] { padding-bottom: 1rem; }

/* Tabela comparativa */
.pp-tabela { overflow-x: auto; }
.pp-tabela table { min-width: 640px; border-collapse: collapse; }
.pp-tabela th, .pp-tabela td { border: 0; border-bottom: 1px solid var(--pp-fio); padding: .875rem .75rem; vertical-align: top; text-align: left; }
.pp-tabela thead th { font-weight: 800; border-bottom: 2px solid var(--pp-tinta); }

/* Citação */
.wp-block-quote cite { font-size: .875rem; font-style: normal; color: var(--pp-tinta-2); }

/* ---------- Vídeo sob demanda ---------- */
.pp-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--pp-escuro); overflow: hidden; }
.pp-video--vertical { aspect-ratio: 9 / 16; max-width: 360px; }
.pp-video__btn { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: 1.25rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.05) 60%); }
.pp-video__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.pp-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--pp-tinta); display: grid; place-items: center; font-size: 1.5rem; }
.pp-video__titulo { font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; }
.pp-video__aviso { font-size: .75rem; }
.pp-video__btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.pp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Formulário (campo contornado do Material 3) ---------- */
.pp-form { display: grid; gap: 1.25rem; max-width: 36rem; }
.pp-form label, .pp-form legend { font-weight: 500; display: block; margin-bottom: .375rem; font-size: 1rem; }
.pp-form .pp-dica { font-size: .875rem; color: var(--pp-tinta-2); margin: .125rem 0 .375rem; }
.pp-form input[type="text"], .pp-form input[type="email"], .pp-form input[type="tel"], .pp-form select, .pp-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
	padding: .875rem 1rem; min-height: 56px;
	border: 1px solid var(--pp-contorno); border-radius: 4px;
	background: #FFFFFF; color: var(--pp-tinta);
}
.pp-form textarea { min-height: 96px; }
.pp-form input:hover, .pp-form select:hover, .pp-form textarea:hover { border-color: var(--pp-tinta); }
.pp-form input:focus-visible, .pp-form select:focus-visible, .pp-form textarea:focus-visible { outline: 2px solid var(--pp-azul); outline-offset: -1px; border-color: var(--pp-azul); }
.pp-form [aria-invalid="true"] { border: 2px solid var(--wp--preset--color--erro); }
.pp-form .pp-erro { color: var(--wp--preset--color--erro); font-size: .875rem; margin-top: .25rem; }
.pp-form .pp-erro::before { content: "⚠ "; }
.pp-form fieldset { border: 0; padding: 0; margin: 0; }
.pp-form .pp-opcao { display: flex; gap: .75rem; align-items: flex-start; padding: .25rem 0; min-height: 48px; }
.pp-form .pp-opcao input { width: 24px; height: 24px; margin: .125rem 0 0; flex: 0 0 auto; accent-color: var(--pp-azul); }
.pp-form .pp-opcao label { font-weight: 400; margin: 0; }
.pp-form .pp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pp-form button[type="submit"] {
	font: inherit; font-weight: 500; font-size: .875rem; cursor: pointer; justify-self: start;
	background: var(--pp-azul); color: #FFFFFF; border: 0; border-radius: 999px; padding: .75rem 1.75rem; min-height: 48px;
}
.pp-form button[type="submit"]:hover { background: var(--pp-tinta); }
.pp-form button[disabled] { opacity: .6; cursor: progress; }
.pp-alerta { background: #FCEEEE; color: var(--pp-tinta); padding: 1rem 1.25rem; border-left: 4px solid var(--wp--preset--color--erro); }
.pp-alerta--ok { background: #E8F3EC; border-left-color: var(--wp--preset--color--sucesso); }
.pp-alerta h2, .pp-alerta h3 { margin-top: 0; font-size: 1.25rem; }
.pp-lgpd { font-size: .875rem; color: var(--pp-tinta-2); }

/* ---------- Botões em pílula ---------- */
.pp-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 500; font-size: .875rem; text-decoration: none; border-radius: 999px; padding: .75rem 1.75rem; border: 0; }
.pp-btn--whats { background: #0B6E4F; color: #fff; } /* 6,12:1 */
.pp-btn--whats:hover { background: var(--pp-tinta); color: #fff; }
/* Botão contornado: borda de 1,6 px na cor do texto, como os chips do Google Design */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: inherit; border: var(--pp-borda) solid currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--pp-tinta); color: var(--pp-papel); border-color: var(--pp-tinta); }
:is(.has-primaria-background-color, .has-escuro-background-color) .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: #FFFFFF; color: var(--pp-tinta); }
:is(.has-primaria-background-color, .has-escuro-background-color) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--pp-azul-claro); color: var(--pp-tinta); }
:is(.has-primaria-background-color, .has-escuro-background-color) .is-style-outline > .wp-block-button__link { color: #FFFFFF; }
:is(.has-primaria-background-color, .has-escuro-background-color) .is-style-outline > .wp-block-button__link:hover { background: #FFFFFF; color: var(--pp-tinta); border-color: #FFFFFF; }

/* ---------- Barra inferior no celular e botão flutuante no computador ---------- */
.pp-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--pp-papel); border-top: 1px solid color-mix(in srgb, var(--pp-tinta) 12%, transparent); }
.pp-barra a { min-height: 48px; padding: .75rem; white-space: nowrap; font-size: .875rem; justify-content: center; }
.pp-barra .pp-btn--form { background: transparent; color: var(--pp-tinta); border: var(--pp-borda) solid var(--pp-tinta); }
body.pp-tem-barra { padding-bottom: 80px; }
@media (min-width: 782px) {
	.pp-barra { left: auto; right: 1.5rem; bottom: 1.5rem; grid-template-columns: auto; background: none; border: 0; padding: 0; }
	.pp-barra .pp-btn--form { display: none; }
	.pp-barra .pp-btn--whats { min-height: 56px; padding: 1rem 1.5rem; box-shadow: var(--pp-elev); }
	body.pp-tem-barra { padding-bottom: 0; }
}
@media print { .pp-barra { display: none; } .wp-block-template-part:has(> .pp-header) { position: static; } }

/* ---------- Quiz de reserva ([pp_quiz]) ---------- */
.pp-quiz { border-top: 2px solid currentColor; padding: 1.25rem 0; }
.pp-quiz__progresso { font-size: .875rem; color: var(--pp-tinta-2); }
.pp-quiz__barra { height: 4px; background: var(--pp-fio); overflow: hidden; margin: .5rem 0 1rem; }
.pp-quiz__barra span { display: block; height: 100%; background: var(--pp-azul); transition: width .25s; }
.pp-quiz fieldset { border: 0; padding: 0; margin: 0; }
.pp-quiz legend { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; }
.pp-quiz__opcoes { display: grid; gap: .5rem; }
.pp-quiz__opcoes label { display: flex; gap: .75rem; align-items: center; cursor: pointer; border: var(--pp-borda) solid var(--pp-tinta); border-radius: 100px; padding: .75rem 1.25rem; min-height: 48px; }
.pp-quiz__opcoes input { width: 24px; height: 24px; accent-color: var(--pp-azul); }
.pp-quiz__opcoes label:has(input:checked) { background: var(--pp-tinta); color: var(--pp-papel); }
.pp-quiz__acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.pp-quiz button { font: inherit; font-weight: 500; font-size: .875rem; cursor: pointer; border-radius: 999px; padding: .75rem 1.75rem; border: var(--pp-borda) solid currentColor; background: transparent; color: inherit; }
.pp-quiz button.pp-quiz__primario { background: var(--pp-azul); color: #fff; border-color: var(--pp-azul); }

/* ---------- Área do aluno: atalhos ---------- */
.pp-atalhos { list-style: none; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.pp-atalhos a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 56px; padding: .75rem 0; border-top: 2px solid var(--pp-tinta); font-weight: 800; text-decoration: none; color: var(--pp-tinta); }
.pp-atalhos a:hover { text-decoration: underline; }
.pp-atalhos a[target="_blank"]::after { content: "↗"; }

.pp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Seções coladas umas nas outras, sem faixa de papel entre blocos coloridos */
.wp-block-post-content > section.alignfull, .entry-content > section.alignfull { margin-block: 0 !important; }
main.wp-block-group, .wp-site-blocks > main { margin-block-end: 0 !important; padding-bottom: 0 !important; }
.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:has(> footer) { margin-block-start: 0 !important; }

/* ---------- Cores das 8 áreas (círculos dos ícones do teste vocacional /teste/) ----------
   Decorativas: aparecem em círculos e fios, nunca como cor de texto. */
:root {
	--pp-c1: #FFB020; /* Branding */
	--pp-c2: #FF4D6D; /* Direção de Arte */
	--pp-c3: #7B61FF; /* Redação */
	--pp-c4: #00C2A8; /* Dados e Performance */
	--pp-c5: #FF7A3C; /* Gestão e Negócios */
	--pp-c6: #3D5AFE; /* Mídia */
	--pp-c7: #A3D948; /* Planejamento */
	--pp-c8: #00D1FF; /* Produção */
}
.pp-c1 { --pp-c: var(--pp-c1); } .pp-c2 { --pp-c: var(--pp-c2); } .pp-c3 { --pp-c: var(--pp-c3); } .pp-c4 { --pp-c: var(--pp-c4); }
.pp-c5 { --pp-c: var(--pp-c5); } .pp-c6 { --pp-c: var(--pp-c6); } .pp-c7 { --pp-c: var(--pp-c7); } .pp-c8 { --pp-c: var(--pp-c8); }

/* Fio de cada cartão em grade alterna as 8 cores, na ordem do teste */
.is-layout-grid > .pp-card { border-top-width: 3px; }
.is-layout-grid > .pp-card:nth-child(8n+1) { border-top-color: var(--pp-c1); }
.is-layout-grid > .pp-card:nth-child(8n+2) { border-top-color: var(--pp-c2); }
.is-layout-grid > .pp-card:nth-child(8n+3) { border-top-color: var(--pp-c3); }
.is-layout-grid > .pp-card:nth-child(8n+4) { border-top-color: var(--pp-c4); }
.is-layout-grid > .pp-card:nth-child(8n+5) { border-top-color: var(--pp-c5); }
.is-layout-grid > .pp-card:nth-child(8n+6) { border-top-color: var(--pp-c6); }
.is-layout-grid > .pp-card:nth-child(8n+7) { border-top-color: var(--pp-c7); }
.is-layout-grid > .pp-card:nth-child(8n+8) { border-top-color: var(--pp-c8); }

/* Cartões das 8 áreas: círculo na cor da área, como no teste */
.is-layout-grid > .pp-area { border-top: 3px solid var(--pp-c); }
.pp-area > :is(h2, h3):first-child::before { content: ""; display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--pp-c); margin-bottom: 1rem;
	background-image: radial-gradient(circle, transparent 60%, rgba(18,32,58,.16) 61%, rgba(18,32,58,.16) 63%, transparent 64%); }

/* Fila de círculos das 8 áreas (chamada para o teste) */
.pp-circulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem .75rem; margin-block: 2rem !important; }
@media (min-width: 782px) { .pp-circulos { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pp-circ { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-size: .8125rem; line-height: 1.2; font-weight: 500; }
.pp-circ::before { content: ""; width: min(72px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--pp-c);
	background-image: radial-gradient(circle, transparent 60%, rgba(18,32,58,.16) 61%, rgba(18,32,58,.16) 63%, transparent 64%); }

/* ---------- Menu no celular: submenu fechado, com seta indicando que há seções ---------- */
.pp-header .is-menu-open .has-child { display: grid !important; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; column-gap: .5rem; }
.pp-header .is-menu-open .has-child > .wp-block-navigation-item__content { grid-column: 1; }
.pp-header .is-menu-open .has-child > .wp-block-navigation__submenu-icon {
	display: grid !important; place-items: center; grid-column: 2; grid-row: 1; width: 48px; height: 48px; margin: 0; padding: 0;
	border: var(--pp-borda) solid var(--pp-tinta); border-radius: 50%; background: transparent; color: var(--pp-tinta); cursor: pointer;
}
.pp-header .is-menu-open .has-child > .wp-block-navigation__submenu-icon svg { width: 14px; height: 14px; display: block !important; transition: transform .2s; }
.pp-header .is-menu-open .has-child[data-pp-aberto] > .wp-block-navigation__submenu-icon { background: var(--pp-tinta); color: var(--pp-papel); }
.pp-header .is-menu-open .has-child[data-pp-aberto] > .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }
.pp-header .is-menu-open .has-child > .wp-block-navigation__submenu-container { grid-column: 1 / -1; display: none !important; }
.pp-header .is-menu-open .has-child[data-pp-aberto] > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column; }
/* Indicador abaixo do item: "5 seções" (texto incluído pelo pp.js) */
.pp-header .is-menu-open .has-child > .wp-block-navigation-item__content .pp-sub-qtd { display: block; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--pp-tinta-2); margin-top: .125rem; }
.pp-header .wp-block-navigation-item__content .pp-sub-qtd { display: none; }
.pp-header .is-menu-open .has-child > .wp-block-navigation-item__content { flex-direction: column; align-items: flex-start !important; justify-content: center; }


/* ---------- Cabeçalho: no computador, nome do curso centralizado e menu centralizado logo abaixo (os dois fixos na rolagem).
   No celular, nome do curso à esquerda e botão do menu à direita, na mesma linha.
   Feito só com CSS, para funcionar também em cabeçalhos já editados no Editor do site. */
@media (min-width: 600px) {
	.pp-header > .wp-block-group { flex-direction: column !important; align-items: center !important; gap: 0 !important; }
	.pp-header > .wp-block-group > .wp-block-navigation { justify-content: center; }
	.pp-header .wp-block-navigation__container { justify-content: center !important; }
	/* Nome do curso no mesmo tamanho do menu, em negrito */
	.pp-header .wp-block-site-title { font-size: .875rem !important; line-height: 1.25rem !important; text-align: center; }
	.pp-header .wp-block-site-title a { font-weight: 700; white-space: nowrap; }
	/* Mesmo respiro acima do nome do curso e abaixo do menu */
	.pp-header { padding-top: 0 !important; padding-bottom: 0 !important; }
	.pp-header .wp-block-site-title { padding-top: 14px; }
}
@media (min-width: 600px) and (max-width: 1100px) { .pp-header .wp-block-site-title { font-size: .8125rem !important; } }
/* No celular: nome do curso e botão do menu centralizados na mesma linha */
@media (max-width: 599px) {
	.pp-header > .wp-block-group { align-items: center !important; }
	.pp-header > .wp-block-group > .wp-block-group { align-items: center; }
	.pp-header .wp-block-site-title { margin: 0 !important; line-height: 1.2 !important; }
	.pp-header .wp-block-navigation__responsive-container-open { display: flex; align-items: center; justify-content: center; margin: 0; }
}