/*
 * brand-tokens.css
 *
 * D-TOKEN-01 path = CSS-override (not tailwind rebuild) for zero-dependency determinism.
 *
 * This project has no guaranteed build tooling (no Composer/npm/Vite, no JIT Tailwind
 * pipeline) — assets/css/style.css is a pre-compiled, checked-in artifact. Rather than
 * editing tailwind.config.js and rebuilding style.css, this stylesheet is loaded AFTER
 * style.css (see includes/_css.php) and overrides the same-specificity single-class
 * Edurock utility selectors (.bg-primaryColor, .text-primaryColor, etc.) by source
 * order, with no !important needed. See .planning/phases/02-funda-o-do-front-end-acessibilidade/02-UI-SPEC.md
 * for the fixed brand color values (do not recompute contrast — already WCAG-verified).
 */

/* ---------------------------------------------------------------------------
 * Brand recolor: Edurock purple/pink -> UniBarretos orange/navy-blue
 * primaryColor (accent)   = #F58220 orange
 * secondaryColor (brand blue) = #1B5FA8
 * Tailwind escapes ':' as '\:' and '/' as '\/' in generated class selectors —
 * replicated here to match the compiled utility classes exactly.
 * ------------------------------------------------------------------------- */

.bg-primaryColor { background-color: #F58220; }
.text-primaryColor { color: #F58220; }
.border-primaryColor { border-color: #F58220; }
.hover\:text-primaryColor:hover { color: #F58220; }
.hover\:bg-primaryColor:hover { background-color: #F58220; }
.hover\:border-primaryColor:hover { border-color: #F58220; }
.hover\:text-whiteColor:hover { color: #FFFFFF; }
.group:hover .group-hover\:text-primaryColor { color: #F58220; }
.decoration-primaryColor { text-decoration-color: #F58220; }

.bg-secondaryColor { background-color: #1B5FA8; }
.text-secondaryColor { color: #1B5FA8; }
.hover\:bg-secondaryColor:hover { background-color: #1B5FA8; }

/* ---------------------------------------------------------------------------
 * CSS variables do brand. O bloco acima recolore as CLASSES utilitarias, mas o
 * template tambem consome `var(--primaryColor)`/`var(--secondaryColor)` DIRETO
 * em varios lugares (setas + paginacao do Swiper, tabs .active de cursos,
 * filtros .is-checked) -- e essas variaveis continuavam com o roxo/rosa do
 * Edurock definido no :root de style.css. Sobrescritas aqui (brand-tokens.css
 * carrega depois de style.css) para o roxo/rosa nao vazar em NENHUM lugar que
 * use a variavel. Descoberto no UAT do gate da Fase 8 (setas e bolinhas roxas
 * no banner); esta e a correcao de raiz que completa o recolor de marca da
 * Fase 2. Valores identicos aos das classes utilitarias acima.
 * ------------------------------------------------------------------------- */
:root {
    --primaryColor: #F58220;
    --secondaryColor: #1B5FA8;
}

/* ---------------------------------------------------------------------------
 * New brand token utilities (navy surfaces, accent-as-text, display clamp)
 * Consumed by downstream plans 02-05 / 02-06 / 02-07 markup.
 * ------------------------------------------------------------------------- */

.bg-navy { background-color: #0B1E3F; }
.bg-navyDeep { background-color: #0A1729; }
.bg-navySoft { background-color: #12294D; }
.text-navy { color: #0B1E3F; }
.border-navy { border-color: #0B1E3F; }
.hover\:bg-navySoft:hover { background-color: #12294D; }
.hover\:text-navy:hover { color: #0B1E3F; } /* marquee: frase laranja -> navy no hover (substitui o secondaryColor rosa do template) */

.text-accentText { color: #B65C00; } /* orange-as-text on light, AA-safe */
.hover\:text-accentText:hover { color: #B65C00; }

.bg-accentHover { background-color: #D96D10; }
.hover\:bg-accentHover:hover { background-color: #D96D10; }

.bg-greySection { background-color: #ECECEE; }

/* Dark-mode card surface */
.dark .bg-navy-dark { background-color: #0C1B33; }

/* Fluid display heading (hero / umbrella title) — single clamp rule, no JIT needed */
.text-display {
  font-size: clamp(2.5rem, 5vw, 3.125rem);
  line-height: 1.2;
  font-weight: 800;
}

/* Respect reduced motion (belt-and-suspenders for AOS) */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Plan 02-05 additions: focus-visible rings + nav active-state underline.
 * The checked-in assets/css/style.css is pre-compiled Tailwind with no JIT and
 * no `focus-visible:` variant / `ring-*` utilities generated, so these are
 * hand-rolled plain-CSS classes (same D-TOKEN-01 override path) rather than
 * arbitrary Tailwind utility classes that would silently no-op.
 * ------------------------------------------------------------------------- */

/* Focus-visible ring for interactive elements on light/white surfaces (header, cards) */
.focus-ring:focus-visible {
  outline: 2px solid #0B1E3F;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus-visible ring for interactive elements on navy surfaces (topbar, footer) */
.focus-ring-onnavy:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Current-route nav item indicator: orange text + 2px underline bar */
.nav-link-active {
  color: #F58220 !important;
  position: relative;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  background-color: #F58220;
}

/* ---------------------------------------------------------------------------
 * Plan 02-06 addition: 44x44 minimum tap-area social icon chip (WCAG 2.5.5).
 * The compiled style.css has no min-w-44px/min-h-44px utility, so this is
 * hand-rolled following the same D-TOKEN-01 override path used by 02-05's
 * focus-ring/nav-link-active classes.
 * ------------------------------------------------------------------------- */
.social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * Global nav fitting (FOUND-01 — all 9 official items, full labels, kept)
 *
 * Everything below is MEASURED, not estimated (imagettfbbox against the actual
 * Hind 600 face). Three earlier attempts here were based on guessed text widths
 * and were all wrong.
 *
 * Label row (9 items + 3 dropdown carets):
 *   12px => 861px   13px => 908px   14px => 1029px    (text + carets, no padding)
 *   padding adds 9*2*N: px-6 => 108px, px-8 => 144px, px-10 => 180px
 *
 * Available nav width = 10 grid cols + 9 gaps of the header shell.
 *
 * Two dead classes caused the wreckage, both absent from the pre-compiled
 * bundle (it only ships what the Edurock demo used):
 *   - `lg:col-span-10`  -> only .lg\:col-span-1..9 exist. The nav div silently
 *     fell back to spanning ONE column (~140px); its ~1050px of content spilled
 *     out, and justify-center spread that overflow symmetrically, across the
 *     logo. `grid-column: 3 / -1` below does what the utility could not.
 *   - `lg:container`    -> no such class, so the shell has NO max-width below
 *     1500px and is full-width. (3xl:container-secondary-lg = 1460px and
 *     4xl:container = 1200px DO exist.)
 *
 * .header-shell pins the >=1921px case: the template's own 4xl:container SHRINKS
 * the shell from 1460px back to 1200px on 4K screens, which would re-break the
 * nav at the widest viewports. Hold it at 1460px instead.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
  /* cols 3..12 — the span utility for this does not exist (see above). */
  .nav-desktop { grid-column: 3 / -1; }
}

/* 992-1279: even 12px/px-6 (969px) exceeds the ~825-972px available here.
   Hand the range to the off-canvas menu rather than ship an unreadable row. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .nav-desktop { display: none; }
  .nav-burger  { display: block; }
  .mobile-menu { display: block; }
}

/* 1280-1499: ~1039px available. 12px + px-6 = 969px (70px headroom). */
@media (min-width: 1280px) {
  .nav-list > .nav-item > a {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
  }
}

/* >=1500: shell caps at 1460px => ~1189px available. 13px + px-8 = 1052px. */
@media (min-width: 1500px) {
  .nav-list > .nav-item > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }
}

@media (min-width: 1921px) {
  .header-shell { max-width: 91.25rem; }
}

/* ---------------------------------------------------------------------------
 * Fase 3 additions (03-02): utilitários que o bundle pré-compilado NÃO possui.
 *
 * VERIFICADO com grep de string fixa contra assets/css/style.css em 2026-07-16
 * (o seletor compilado não tem espaço antes da chave: `.lg\:col-span-8{`).
 * Ausentes e por isso hand-rolled aqui: object-fit, line-clamp, prose/typography,
 * underline/decoration/underline-offset, tracking-tight, py-60px/lg:py-80px/
 * lg:py-110px, max-w-[70ch], py-12px.
 *
 * Três dos blocos abaixo consertam defeitos JÁ EM PRODUÇÃO da Fase 2 — classes
 * declaradas em views/umbrella.php e views/404.php que nunca existiram no bundle
 * e portanto nunca renderizaram (o sublinhado da palavra-chave, o ritmo vertical
 * das seções, o padding vertical dos CTAs pill). Ver 03-UI-SPEC.md §5/§6/§7.
 * ------------------------------------------------------------------------- */

/* §1 — object-fit: imagens enviadas pelo admin têm proporção arbitrária e
   precisam preencher um slot fixo. Parear com o já-compilado .aspect-[16/9]. */
.card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* §2 — line-clamp: truncamento de excerpt/título. */
.line-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* §3 — .article-content: bloco de rich-text (NEWS-02). O plugin Typography não
   está instalado (.prose = 0 ocorrências) e o Preflight ZERA list-style de ul/ol
   e as margens de headings/p — sem este bloco o HTML do CKEditor renderiza sem
   estilo nenhum. Estiliza EXATAMENTE a allow-list do sanitizeRichText(), nada
   além. Headings de conteúdo (22/18px) são deliberadamente diferentes do papel
   Heading de chrome (28px caixa-alta). */
.article-content{ max-width: 70ch; }
.article-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #5F6C76;
  margin-bottom: 1.25em;
}
.article-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: #222222;
  margin: 1.5em 0 0.5em;
}
.article-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #222222;
  margin: 1.25em 0 0.5em;
}
.article-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #222222;
  margin: 1.25em 0 0.5em;
}
.article-content ul,
.article-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 0.5em; }
.article-content blockquote {
  border-left: 4px solid #0B1E3F;
  font-style: italic;
  color: #5F6C76;
  background: #ECECEE;
  padding: 1em 1.5em;
  margin: 1.5em 0;
}
.article-content hr {
  border: 0;
  border-top: 1px solid #EEEEEE;
  margin: 2em 0;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5em auto;
  display: block;
}
.article-content a {
  color: #B65C00;
  text-decoration: underline;
}
.article-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.25em;
}
.article-content th,
.article-content td {
  border: 1px solid #EEEEEE;
  padding: 0.5em 0.75em;
}
.article-content th { background: #ECECEE; }

/* §5 — .keyword-underline: assinatura de marca. Só fornece a mecânica do
   sublinhado via currentColor; a cor do texto vem de uma utility separada
   (text-primaryColor em fundo navy, text-accentText em fundo claro).
   Substitui a string morta `underline decoration-primaryColor decoration-4
   underline-offset-4`, cujas 3 de 4 classes nunca existiram. */
.keyword-underline{
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
}

/* §6 — .heading-tight: tracking do papel Heading (28px/800/caixa-alta).
   `tracking-tight` não existe no bundle (só tracking-5px/[.5px]/[4px]). */
.heading-tight{ letter-spacing: -0.025em; }

/* §7 — ritmo vertical de seção. `py-60px`/`lg:py-80px`/`lg:py-110px` não existem
   como conjunto (só `.lg\:py-60px` isolado, que não expressa um par mobile/desktop). */
.section-rhythm-hero{
  padding-top: 60px;
  padding-bottom: 60px;
}
.section-rhythm{
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (min-width: 1024px) {
  .section-rhythm-hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-rhythm {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

/* §8 — duas classes que a marcação da Fase 2 já usa e que também não existem no
   bundle. Fornecê-las aqui conserta umbrella.php/404.php sem tocar no markup
   deles (os CTAs pill hoje não têm padding vertical; os parágrafos não têm o
   limite de leitura de 70ch). O escape de Tailwind para `[` `]` `/` é replicado
   para casar com o nome de classe já escrito no HTML. */
.py-12px{
  padding-top: 12px;
  padding-bottom: 12px;
}
.max-w-\[70ch\]{ max-width: 70ch; }

/* §9 — legenda do lightbox: agora um <figcaption> real (D-13), nunca um
   round-trip pelo atributo alt. Ver assets/js/popup.js showImage(). */
.gallery-lightbox-figure { margin: 0; }
.slider-caption{
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  padding-top: 8px;
  max-width: 70ch;
  text-align: center;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * Fase 3 — gap closure (03-09): utilitarios DECLARADOS no markup que nao
 * existem em NENHUMA das 8 folhas carregadas por includes/_css.php.
 *
 * MEDIDO em 2026-07-17 por conjunto exato de seletores (nao por substring:
 * `.hover\:bg-navySoft` CONTEM `.hover\:bg-navy`, entao um grep de substring
 * da falso-positivo). O portao humano da Fase 3 achou 4; a medicao achou 15.
 *
 * Mesmo caminho do §8: definir a utility, NUNCA editar o markup — varias
 * destas tambem sao declaradas por arquivos da Fase 2 (breadcrumb, 404,
 * umbrella, rodape) que esta fase nao pode tocar.
 * ------------------------------------------------------------------------- */

/* A CORRECAO DE CONTRASTE. Era o unico seletor de cor num <p>/<ol> sobre
   bg-navy (#0B1E3F). Sem definicao herdava o preto padrao do agente de
   usuario — texto quase preto sobre navy escuro. O bundle nao tem NENHUMA
   utility de opacidade por barra, e nada define color em body.
   Resultado: ~9.4:1 sobre #0B1E3F (AAA). */
.text-whiteColor\/80 { color: rgba(255, 255, 255, 0.8); }

/* Sem esta, todo CTA pill do site cai para display:inline e os
   items-center/justify-center ao lado dela viram no-op. */
.inline-flex { display: inline-flex; }

.m-0 { margin: 0; }
.gap-8px { gap: 8px; }
.pt-8px { padding-top: 8px; }
.px-8px { padding-left: 8px; padding-right: 8px; }
.max-w-\[640px\] { max-width: 640px; }

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:bg-navy:hover { background-color: #0B1E3F; }
.hover\:shadow-blog:hover { box-shadow: 0px 3px 40px rgba(14, 37, 49, 0.078); }
.group:hover .group-hover\:text-accentText { color: #B65C00; }

@media (min-width: 992px) {
  .lg\:mt-50px { margin-top: 50px; }
  .lg\:p-50px  { padding: 50px; }
}

/* ---------------------------------------------------------------------------
 * Stretched-link (decisao do usuario, 2026-07-17): o box inteiro do card e
 * clicavel PRESERVANDO os links internos. Por isso um pseudo-elemento
 * sobreposto, e nao um <a> envolvendo tudo.
 *
 * A ordem de empilhamento e a regra inteira: a camada do card fica em z-index
 * 1 e os links internos em z-index 2. Inverter isso faz a camada engolir os
 * links internos, que e exatamente o que o usuario escolheu evitar.
 * ------------------------------------------------------------------------- */
.card-stretch { position: relative; }
.card-stretch-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.card-stretch-above { position: relative; z-index: 2; }

/* Area de clique da miniatura da galeria (decisao do usuario, 2026-07-17):
   a imagem toda abre o lightbox. A camada ja cobre exatamente a imagem. */
.gallery-hit { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * Phase 4 gate closure (04-09): 3 pre-existing dead classes in
 * includes/menu.php / includes/menu-mobile.php, surfaced only now because
 * 04-06 re-authored both files. VERIFIED absent from the compiled bundle
 * (grep against assets/css/style.css, 2026-07-18). Not the mega-menu promo
 * underline — that one reuses the already-existing .keyword-underline (§5
 * above) instead of inventing a new rule; see includes/menu.php's "Escolha
 * seu curso" span.
 * ------------------------------------------------------------------------- */

/* .nav-burger's grid cell (2nd column on the 2-col mobile header grid,
   index.php's `grid grid-cols-2 lg:grid-cols-12`) needs the hamburger button
   pinned to the right edge; `items-center` on the parent only handles the
   cross-axis. */
.justify-self-end { justify-self: end; }

/* Mega-menu "VER TODOS" pill CTA horizontal padding — bundle has px-15px and
   px-8px but no px-20px. */
.px-20px { padding-left: 20px; padding-right: 20px; }

/* Mobile "Ver todos os cursos" accordion link hover state — mirrors the
   already-defined .hover\:bg-accentHover (line 53 above), same accent value. */
.hover\:text-accentHover:hover { color: #D96D10; }

/* ---------------------------------------------------------------------------
 * Fase 5 additions (05-02): validation error tokens + honeypot off-screen
 * utility, consumed by the two public forms this phase adds (depoimento,
 * newsletter) and inherited verbatim by Phase 6's Contato form.
 * ------------------------------------------------------------------------- */

/* #DC2626 is the project's first semantic error token (first public write
   path with per-field validation). The Edurock demo's own red/green hues
   already in the bundle (.text-deepred, .text-greencolor) were deliberately
   rejected — they don't belong to the Fase 2 navy/orange/white palette. */
.text-error { color: #DC2626; }
.border-error { border-color: #DC2626; }
.bg-error-soft { background-color: #FEF2F2; }

/* Honeypot trap field (D-03). Deliberately avoids the "display" and
   "visibility" hiding properties — some bots specifically skip fields hidden
   through those two mechanisms, and the whole point of the trap is to still
   get filled in by a naive autofill script. Pushed off-screen instead, which
   stays reachable to that kind of script while never appearing to a sighted
   human visitor. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Fase 5 gate gap-closure (05-09, human UAT defeito 3).
 * ------------------------------------------------------------------------- */

/* Defeito 3 — /depoimentos, campo "Nome": the 05-UI-SPEC.md Public Form
   Pattern copies contact.html's icon-in-input markup verbatim (input with
   only .pl-26px, decorative icon absolutely positioned at .right-6). That
   pattern assumes a field wide enough that placeholder text never reaches
   the icon zone. Here the form sits inside .max-w-form-xl (31.875rem/510px)
   split into two columns by xl:grid-cols-2 gap-30px, so the Nome field is
   only ~240px wide — narrow enough that "Seu nome completo" runs under the
   icon (confirmed visually, headless screenshot at 1440px viewport). No
   .pr-* utility in the compiled style.css bundle reserves enough room
   (closest is .pr-35px/35px; the icon's left edge sits ~42-44px from the
   field's right edge), so this reserves the correct amount without
   fabricating a Tailwind-scale class that doesn't exist in the bundle.
   Flag for Phase 6: the shared Public Form Pattern's icon-in-input contract
   should carry this padding-right by default wherever it's used inside a
   narrow multi-column form, not just here. */
.pr-icon-safe { padding-right: 2.875rem; }

/* ---------------------------------------------------------------------------
 * Fase 5 gate gap-closure (05-09, human UAT defeito 4).
 * ------------------------------------------------------------------------- */

/* Defeito 4 — Home newsletter band, e-mail input: .placeholder\:text-placeholder
   (#62605D) is the light-background placeholder token, meant for white/off-
   white fields (e.g. the /depoimentos form). Blended at its usual 80% opacity
   over #0B1E3F (bg-navy) it renders as ~rgb(81,83,87) on ~rgb(11,30,63) —
   contrast ratio ≈2.14:1 (WCAG relative-luminance formula, computed not
   eyeballed), far below the 4.5:1 AA floor this is a public MEC-facing site.
   This is the first placeholder-on-navy field in the project. White at 70%
   opacity over the same navy blends to ~rgb(182,188,197), contrast ≈8.6:1 —
   clears AA with comfortable margin while staying visibly dimmer than the
   input's own full-white typed-text color. */
.placeholder-onnavy::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; }
.placeholder-onnavy::-moz-placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; }

/* ---------------------------------------------------------------------------
 * Fase 6 gate (06-15) — css-class-guard.sh MARKUP_FILES extension surfaced 2
 * real style bugs, not JS hooks, in views/contato.php's info-list icons.
 * ------------------------------------------------------------------------- */

/* views/contato.php's 3 info-list <li> rows (endereço/telefone/horário) pair
   a multi-line icofont icon with 2-3 lines of text side by side. The compiled
   bundle has no bare .items-start rule (only .items-center, used elsewhere),
   so the flex row fell back to browser-default stretch and the icon glyph
   rendered vertically centered against multi-line text instead of aligned to
   its top line. */
.items-start { align-items: flex-start; }

/* Companion nudge for the same 3 icons: with items-start now applied, the
   icofont glyph's own internal ascent sits ~2px above the first line of text
   it sits beside. The bundle has .mt-15px/.mt-25px/... (15px+ scale) but no
   .mt-2px -- fabricating a 15px-scale class here would overcorrect. */
.mt-2px { margin-top: 2px; }

/* ---------------------------------------------------------------------------
 * Fase 8 (08-03, UIUX-04): rail de acessibilidade nao pode cobrir a logo no
 * mobile. As classes top-[120px]/2xl:top-[300px] que estavam no elemento eram
 * MORTAS (ausentes do bundle compilado, sem JIT). Definido como utilitario
 * unico com media queries em vez de top-[Npx] responsivo (o bundle nao tem
 * nenhuma variante responsiva de top-). Mobile: offset maior para descer o
 * rail abaixo da faixa do header/logo; desktop restaura o offset original.
 * ------------------------------------------------------------------------- */
.a11y-rail-offset { top: 200px; }
@media (min-width: 1024px) { .a11y-rail-offset { top: 120px; } }  /* lg */
@media (min-width: 1536px) { .a11y-rail-offset { top: 300px; } }  /* 2xl */

/* 08-03 follow-up: extending css-class-guard.sh's MARKUP_FILES to
   includes/a11y-menu.php (first audit of this file) surfaced 4 more dead
   classes on the same rail's buttons, pre-existing and unrelated to the
   top-offset bug above but blocking the guard's required PASS. All four are
   genuine style gaps, not JS hooks -- defined here rather than parked in
   css-class-guard.sh's HOOKS allowlist. min-w-[44px]/min-h-[44px] enforce the
   WCAG 2.5.5 44x44 target-size floor the file's own header comment documents
   (w-11/h-11 already render 44px, but carry no minimum -- these are the
   defensive floor for a flex column child). border-white/20 was meant to
   render each button separator as a subtle light line; undefined it fell
   back to the browser's default border-color (currentColor, i.e. full-
   opacity white from text-whiteColor) -- a real, if minor, contrast miss.
   rounded-r-lg2 rounds only the two right corners (10px, matching the
   existing .rounded-lg2 radius) since the rail's left edge sits flush
   against the viewport edge. */
.min-w-\[44px\] { min-width: 44px; }
.min-h-\[44px\] { min-height: 44px; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.rounded-r-lg2 { border-radius: 0 10px 10px 0; }

/* ---------------------------------------------------------------------------
 * Fase 8 (08-04, UIUX-01): banner da home. A cor das setas e da bolinha ATIVA
 * ja e resolvida pela sobrescrita global de --primaryColor la em cima (o
 * template pinta ambas com var(--primaryColor)). Falta so um ajuste que NAO e
 * de cor de marca: a bolinha INATIVA usa `outline: 2px solid var(--blackColor)`
 * (preto), invisivel sobre o overlay escuro do banner. Trocado para contorno
 * branco. Especificidade 0,3,0 igual ao template (.home-hero == .hero na mesma
 * <section class="hero home-hero">), vence por ordem de carga. */
.home-hero .swiper-pagination .swiper-pagination-bullet {
    outline-color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
 * Fase 9 (CONFIG-03, UAT gate 09-06): botão flutuante de WhatsApp
 * (includes/whatsapp-float.php). O botão renderizava no HTML mas era INVISÍVEL:
 * 3 classes de valor arbitrário do template (bg-[#25D366], hover:bg-[#20BD5A],
 * bottom-[120px]) não existem no bundle pré-compilado (sem JIT) — sem cor de
 * fundo verde e sem posição vertical, o `fixed`+ícone branco não aparecia. O
 * arquivo também nunca esteve na lista auditada do css-class-guard, por isso
 * passou despercebido desde a Fase 2 (FOUND-07). Definidas aqui (mesmo padrão
 * de override do projeto) e o arquivo foi adicionado ao guard. Verde oficial do
 * WhatsApp (#25D366 / #20BD5A hover). */
.bg-\[\#25D366\] { background-color: #25D366; }
.hover\:bg-\[\#20BD5A\]:hover { background-color: #20BD5A; }
.bottom-\[120px\] { bottom: 120px; }

/* ---------------------------------------------------------------------------
 * Fase 10 (10-03, D-12): FAQ restyle -- marca d'água "FAQ" rotacionada
 * (product-details.html §faq). O bundle pré-compilado só tem as variantes
 * responsivas `lg:text-size-140`/`2xl:text-size-200` (herdadas de outra
 * página da demo) mas NÃO as classes base sem prefixo -- confirmado via
 * scripts/css-class-guard.sh --check text-size-140 text-size-200 em
 * 2026-07-30. O markup de includes/blocos/bloco-faq.php usa só as variantes
 * já definidas (lg:/2xl:), mas as classes base ficam aqui como o par
 * completo da escala, seguindo o mesmo padrão das demais entradas desta
 * folha (nunca fabricar um nome que não seja um valor real de font-size).
 * ------------------------------------------------------------------------- */
.text-size-140 { font-size: 140px; }
.text-size-200 { font-size: 200px; }

/* ---------------------------------------------------------------------------
 * Fase 10 (10-04, D-06): card de download do bloco "Arquivos PDF"
 * (includes/blocos/bloco-pdf.php). O bundle pré-compilado não tem
 * `min-w-0`/`truncate` (utilitários Tailwind padrão, sem uso prévio no
 * projeto) nem `text-size-20` (só existem as vizinhas 19/21 na escala já
 * compilada) — confirmado via scripts/css-class-guard.sh. `min-w-0` no
 * container flex + `truncate` no título são necessários juntos: sem
 * `min-width:0`, um filho flex nunca encolhe abaixo do seu conteúdo
 * intrínseco, e `truncate` (que depende de `overflow:hidden`) fica sem
 * efeito. `text-size-20` é o tamanho do ícone `icofont-download` no botão
 * circular, seguindo a mesma escala das demais entradas `.text-size-N`.
 * ------------------------------------------------------------------------- */
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-size-20 { font-size: 20px; }