/*
Theme Name:   GB Morada da Colina
Theme URI:    https://gbmoradadacolina.com.br
Description:  Child theme do Divi 5 para a Gracie Barra Morada da Colina — Jiu-Jitsu para Todos. Contém o design system da unidade (paleta, tipografia, animações e componentes) e os elementos globais do site.
Author:       Leo Chaves
Author URI:   https://gbmoradadacolina.com.br
Template:     Divi
Version:      1.31.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  gbmc
Tags:         divi, divi-5, child-theme, jiu-jitsu, gracie-barra
*/

/* ==========================================================================
   1. TOKENS — fonte única da verdade do design system
   Valores extraídos do site original (OKLCH convertido para sRGB).
   ========================================================================== */

:root {
  /* Marca */
  --gb-red:            #DF2625;
  --gb-red-dark:       #900000;
  --gb-red-glow:       rgba(223, 38, 37, .45);
  --gb-red-10:         rgba(223, 38, 37, .10);
  --gb-red-30:         rgba(223, 38, 37, .30);
  --gb-red-40:         rgba(223, 38, 37, .40);

  /* Superfícies */
  --gb-bg:             #2E2E2E;
  --gb-surface:        #242424;
  --gb-card:           #1B1B1B;
  --gb-accent:         #3A3736;

  /* Texto */
  --gb-fg:             #F8F8F8;
  --gb-muted:          #A4A4A4;
  --gb-on-primary:     #FCFCFC;

  /* Linhas */
  --gb-border:         rgba(255, 255, 255, .10);
  --gb-input:          rgba(255, 255, 255, .12);

  /* Programas (grade de horários) */
  --gb-prog-gb1:       #DF2625;
  --gb-prog-gb2:       #5A30B9;
  --gb-prog-kids:      #009C3F;
  --gb-prog-fem:       #ED68AE;
  --gb-prog-nogi:      #2E7D8F;
  --gb-prog-defesa:    #8C6A2B;
  --gb-prog-outro:     #4C5A63;

  /* Tipografia */
  --gb-font-display:   "Oswald", "Inter", sans-serif;
  --gb-font-body:      "Roboto", system-ui, -apple-system, sans-serif;

  /* Geometria */
  --gb-radius:         8px;   /* cards, seções */
  --gb-radius-sm:      6px;   /* botões, inputs */
  --gb-maxw:           1280px;
  --gb-section-pad:    80px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background-color: var(--gb-bg);
  color: var(--gb-fg);
  font-family: var(--gb-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
  font-family: var(--gb-font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

::selection { background: var(--gb-red); color: #fff; }

a { color: inherit; }
a:hover { color: var(--gb-red); }

/* ==========================================================================
   3. ANIMAÇÕES — replicadas do original
   ========================================================================== */

@keyframes gb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes gb-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 var(--gb-red-glow); }
  50%      { box-shadow: 0 0 0 14px rgba(223, 38, 37, 0); }
}

@keyframes gb-ken-burns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.18); }
}

.gb-fade-up   { animation: .8s cubic-bezier(.22, 1, .36, 1) both gb-fade-up; }
.gb-pulse     { animation: 2.4s ease-out infinite gb-pulse-red; }
.gb-ken-burns { animation: 18s ease-out infinite alternate gb-ken-burns; }

.gb-delay-1 { animation-delay: 120ms; }
.gb-delay-2 { animation-delay: 240ms; }
.gb-delay-3 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .gb-fade-up, .gb-pulse, .gb-ken-burns { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --- Eyebrow (kicker com risco à esquerda) ------------------------------- */
.gb-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 12px/1.2 var(--gb-font-body);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--gb-red);
}
.gb-eyebrow::before {
  content: "";
  height: 1px;
  width: 32px;
  background: var(--gb-red);
  flex: none;
}
.gb-eyebrow--center { justify-content: center; }
.gb-eyebrow--center::after {
  content: "";
  height: 1px;
  width: 0;
}

/* --- Card --------------------------------------------------------------- */
.gb-card {
  background: var(--gb-card);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  transition: transform .5s, border-color .5s, box-shadow .5s;
}
.gb-card:hover {
  transform: translateY(-4px);
  border-color: var(--gb-red-40);
  box-shadow: 0 25px 60px -20px var(--gb-red-glow);
}

.gb-elite { box-shadow: 0 25px 60px -20px var(--gb-red-glow); }

/* --- Grade com linhas finas (manifesto, estatísticas) -------------------- */
.gb-hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--gb-border);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  overflow: hidden;
}
.gb-hairline-grid > * { background: var(--gb-card); }

/* --- Glow radial vermelho ----------------------------------------------- */
.gb-glow-top,
.gb-glow-center,
.gb-glow-bottom { position: relative; isolation: isolate; }

.gb-glow-top::before,
.gb-glow-center::before,
.gb-glow-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.gb-glow-top::before    { background: radial-gradient(60% 80% at 50% 0%,   var(--gb-red-glow), transparent 70%); opacity: .5; }
.gb-glow-center::before { background: radial-gradient(50% 100% at 50% 50%, var(--gb-red-glow), transparent 70%); }
.gb-glow-bottom::before { background: radial-gradient(circle at 50% 120%,  var(--gb-red-glow), transparent 60%); }

/* --- Imagem com zoom no hover ------------------------------------------- */
.gb-zoom { overflow: hidden; }
.gb-zoom img { transition: transform .7s ease-out; display: block; width: 100%; }
.gb-zoom:hover img { transform: scale(1.1); }

/* --- Gradiente de leitura sobre foto ------------------------------------ */
.gb-scrim { position: relative; }
.gb-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--gb-bg), rgba(46,46,46,.8) 50%, rgba(46,46,46,.1));
  pointer-events: none;
}

/* --- Risco que cresce no hover ------------------------------------------ */
.gb-rule {
  display: block;
  height: 1px;
  width: 48px;
  background: var(--gb-red);
  transition: width .5s;
}
*:hover > .gb-rule { width: 80px; }

/* --- Barra que cresce no topo (manifesto) ------------------------------- */
.gb-topbar { position: relative; }
.gb-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gb-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s;
}
.gb-topbar:hover::before { transform: scaleX(1); }

/* ==========================================================================
   5. BOTÕES (aplicado também aos botões do Divi)
   ========================================================================== */

.gb-btn,
.et_pb_button.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border-radius: var(--gb-radius-sm);
  font: 700 14px/1 var(--gb-font-body);
  text-transform: uppercase;
  letter-spacing: .15em;
  text-decoration: none;
  transition: filter .3s, box-shadow .3s, background-color .3s, color .3s;
}

.gb-btn--primary {
  background: var(--gb-red);
  color: var(--gb-on-primary);
  border: 0;
}
.gb-btn--primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 40px var(--gb-red-glow);
  color: var(--gb-on-primary);
}

.gb-btn--outline {
  background: transparent;
  color: var(--gb-red);
  border: 1px solid var(--gb-red);
}
.gb-btn--outline:hover {
  background: var(--gb-red);
  color: var(--gb-on-primary);
}

.gb-btn--link {
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gb-fg);
  font-weight: 600;
  text-underline-offset: 8px;
}
.gb-btn--link:hover { text-decoration: underline; color: var(--gb-fg); }

.gb-btn--sm { height: 40px; padding: 0 16px; font-weight: 600; letter-spacing: .025em; }

/* Divi: remove a seta padrão dos botões com a classe gb-btn */
.et_pb_button.gb-btn::after { display: none !important; }

/* ==========================================================================
   6. FORMULÁRIOS (estilo comum a CF7 / Divi / plugin próprio)
   ========================================================================== */

.gb-form label,
.gb-field-label {
  display: block;
  margin-bottom: 8px;
  font: 600 12px/1.2 var(--gb-font-body);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gb-muted);
}

.gb-form input[type="text"],
.gb-form input[type="email"],
.gb-form input[type="tel"],
.gb-form select,
.gb-form textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--gb-bg);
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  color: var(--gb-fg);
  font: 400 14px/1.5 var(--gb-font-body);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.gb-form input:focus,
.gb-form select:focus,
.gb-form textarea:focus {
  border-color: var(--gb-red);
  box-shadow: 0 0 0 2px var(--gb-red-30);
}
.gb-form ::placeholder { color: var(--gb-muted); }

/* Rádio em formato de pílula */
.gb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-bg);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.gb-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.gb-pill:has(input:checked) {
  border-color: var(--gb-red);
  background: var(--gb-red-10);
  color: var(--gb-fg);
}

.gb-form-error { margin-top: 6px; font-size: 12px; color: var(--gb-red); }

/* ==========================================================================
   7. ELEMENTOS GLOBAIS FIXOS
   ========================================================================== */

/* Botão flutuante de WhatsApp */
.gb-whatsapp-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--gb-red);
  color: var(--gb-on-primary);
  box-shadow: 0 25px 60px -20px var(--gb-red-glow), 0 0 0 1px var(--gb-red-glow);
  transition: transform .3s;
}
.gb-whatsapp-fab:hover { transform: scale(1.1); color: var(--gb-on-primary); }
.gb-whatsapp-fab svg { width: 24px; height: 24px; }

/* Barra de progresso de rolagem */
.gb-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 2px;
  width: 0;
  background: var(--gb-red);
  box-shadow: 0 0 10px var(--gb-red-glow);
  pointer-events: none;
  transition: width 75ms linear;
}

/* ==========================================================================
   8. AJUSTES DO DIVI
   ========================================================================== */

/* Largura do container */
.et_pb_row { max-width: var(--gb-maxw); }

/* Seções sem padding padrão quando usamos o preset GB */
.gb-section { padding: var(--gb-section-pad) 0; }
.gb-section--surface { background: var(--gb-surface); }
.gb-section--card    { background: var(--gb-card); }

/* Bordas globais herdam o token */
.gb-bordered { border: 1px solid var(--gb-border); }
.gb-bordered-y { border-top: 1px solid var(--gb-border); border-bottom: 1px solid var(--gb-border); }

/* Tabela da grade de horários */
.gb-schedule { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.gb-schedule th { padding: 16px 12px; font: 600 10px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--gb-muted); text-align: center; }
.gb-schedule th:first-child,
.gb-schedule td:first-child { position: sticky; left: 0; z-index: 10; background: var(--gb-card); text-align: left; }
.gb-schedule td { padding: 6px; border-top: 1px solid var(--gb-border); vertical-align: middle; }
.gb-schedule td:first-child { padding: 12px 16px; font: 700 16px/1 var(--gb-font-display); }
/* A pilula e rotulo, nao botao: sem transform no hover, que sugeria clique
   numa tabela que nao e interativa. Padding justo para o texto respirar sem
   inflar a altura da linha. */
.gb-slot { border-radius: var(--gb-radius-sm); padding: 8px 10px; text-align: center; font: 700 11px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .05em; }
.gb-slot--gb1  { background: color-mix(in srgb, var(--gb-prog-gb1)  85%, transparent); color: var(--gb-on-primary); }
.gb-slot--gb2  { background: color-mix(in srgb, var(--gb-prog-gb2)  85%, transparent); color: #fff; }
.gb-slot--kids { background: color-mix(in srgb, var(--gb-prog-kids) 85%, transparent); color: var(--gb-bg); }
.gb-slot--fem  { background: color-mix(in srgb, var(--gb-prog-fem)  85%, transparent); color: var(--gb-bg); }
.gb-slot--empty { padding: 12px; text-align: center; font-size: 12px; color: rgba(164,164,164,.3); }

/* Mapa em modo escuro */
.gb-map-dark iframe { filter: invert(.92) hue-rotate(180deg) brightness(.9) contrast(.95); }

/* ==========================================================================
   9. RESPONSIVO
   ========================================================================== */

@media (max-width: 980px) {
  :root { --gb-section-pad: 56px; }
}

@media (max-width: 767px) {
  .gb-btn { height: 48px; padding: 0 20px; }
  .gb-whatsapp-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
}

/* ==========================================================================
   10. COMPONENTES DAS PÁGINAS SEMEADAS
   Tudo o que o provisionador emite por `GBMC_Divi::codigo()` é estilizado
   aqui. Regra: a página descreve estrutura, esta folha decide aparência —
   nenhum `style=` inline sai do PHP.
   ========================================================================== */

.gb-sec { position: relative; }
.gb-sec > .et_pb_row { padding: 0; width: 90%; }

.gb-sec--hero > .et_pb_row,
.gb-sec--hero-interno > .et_pb_row { width: 100%; }

/* --- Hero da home -------------------------------------------------------- */
.gb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88vh;
  padding: 96px 24px 48px;
  overflow: hidden;
}
/* O `inset: -1px` nao e enfeite. A hero tem `min-height: 88vh`, e 88% de uma
   janela raramente da um numero inteiro de pixels. A caixa do fundo, a
   imagem dentro dela (elemento substituido, que arredonda por conta propria)
   e o gradiente do ::after arredondam esse valor fracionario de formas
   diferentes, e sobra meia linha de foto sem o gradiente por cima --
   a linha clara embaixo da imagem principal. Um pixel a mais para cada lado
   cobre a sobra, e a hero tem `overflow: hidden` para nao vazar. */
.gb-hero__fundo { position: absolute; inset: -1px; z-index: 0; }
.gb-hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gb-hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 15% 50%, var(--gb-red-glow), transparent 70%),
    linear-gradient(to bottom, rgba(46,46,46,.7), rgba(46,46,46,.6) 55%, var(--gb-bg));
}
.gb-hero__conteudo { position: relative; z-index: 1; width: 100%; max-width: 768px; margin: 0 auto 0 max(0px, calc((100% - var(--gb-maxw)) / 2)); }
.gb-hero__titulo {
  margin: 20px 0 24px;
  font: 700 clamp(48px, 8vw, 88px)/.95 var(--gb-font-display);
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--gb-fg);
}
.gb-hero__desc { max-width: 620px; font-size: 18px; line-height: 1.625; color: var(--gb-muted); }
.gb-hero__desc strong { color: var(--gb-fg); font-weight: 500; }
.gb-hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 36px; }
.gb-hero__rolar {
  position: relative;
  z-index: 1;
  margin: 48px 0 0;
  text-align: center;
  font: 600 10px/1 var(--gb-font-body);
  text-transform: uppercase;
  letter-spacing: .4em;
  color: var(--gb-muted);
}

/* --- Hero das páginas internas ------------------------------------------ */
.gb-hero-interno { background: var(--gb-surface); padding: 80px 24px; text-align: center; }
.gb-hero-interno__wrap { max-width: 768px; margin: 0 auto; }
.gb-hero-interno__titulo {
  margin: 20px 0 16px;
  font: 700 clamp(36px, 5vw, 60px)/1.05 var(--gb-font-display);
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.gb-hero-interno__desc { font-size: 18px; line-height: 1.625; color: var(--gb-muted); margin: 0; }

/* --- Cabeçalho de seção -------------------------------------------------- */
.gb-cabecalho { margin-bottom: 48px; }
.gb-cabecalho--centro { max-width: 768px; margin-inline: auto; text-align: center; }
.gb-cabecalho__titulo {
  margin: 16px 0 12px;
  font: 700 clamp(32px, 4.7vw, 60px)/1.05 var(--gb-font-display);
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.gb-cabecalho__desc { margin: 0; font-size: 17px; line-height: 1.625; color: var(--gb-muted); }

/* --- CTA "primeira aula" ------------------------------------------------- */
.gb-sec--cta { background: var(--gb-red-10); border-top: 1px solid var(--gb-red-30); border-bottom: 1px solid var(--gb-red-30); }
.gb-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 64px 0;
}
.gb-cta__titulo { margin: 0 0 8px; font: 700 clamp(28px, 3.6vw, 48px)/1.05 var(--gb-font-display); text-transform: uppercase; letter-spacing: -.025em; }
.gb-cta__desc { margin: 0; color: var(--gb-muted); }
.gb-cta__acoes { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Três pilares -------------------------------------------------------- */
.gb-pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* O contorno parecia semitransparente porque, na pratica, era. O cartao
   recorta a foto num retangulo arredondado (`overflow: hidden` + raio) e nao
   tinha fundo proprio: a borda curva e desenhada com antialias, e o pixel
   meio-transparente da curva se mistura com o que estiver ATRAS do elemento
   -- o fundo da pagina. Dai a sensacao de vazamento. No hover ficava obvio
   porque a foto cresce 1.1 e o recorte e redesenhado quadro a quadro.
   Com fundo proprio a mistura acontece contra a cor do cartao, e `isolation`
   fecha o cartao num contexto de pintura so dele. */
.gb-pilar {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--gb-radius);
  border: 1px solid var(--gb-border);
  background: var(--gb-card);
  background-clip: padding-box;
  isolation: isolate;
  overflow: hidden;
}
.gb-pilar img { width: 100%; height: 100%; object-fit: cover; }
.gb-pilar__contador {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  font: 600 10px/1 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .25em; color: var(--gb-muted);
}
.gb-pilar__icone {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 9999px;
  border: 1px solid var(--gb-red-40);
  background: var(--gb-red-10);
  color: var(--gb-red);
  box-shadow: 0 0 24px var(--gb-red-glow);
}
.gb-pilar__base { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 24px; }
.gb-pilar__titulo { margin: 16px 0 8px; font: 700 24px/1 var(--gb-font-display); text-transform: uppercase; letter-spacing: .025em; }
.gb-pilar__texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }
.gb-pilar:hover .gb-rule { width: 80px; }

/* --- Manifesto ----------------------------------------------------------- */
.gb-manifesto { grid-template-columns: repeat(5, 1fr); }
.gb-conceito { padding: 28px; }
.gb-conceito__num { font: 700 12px/1 var(--gb-font-body); letter-spacing: .25em; color: var(--gb-muted); }
.gb-conceito__icone { display: block; margin: 20px 0 16px; color: var(--gb-red); }
.gb-conceito__titulo { margin: 0 0 10px; font: 600 16px/1.2 var(--gb-font-display); text-transform: uppercase; letter-spacing: .05em; }
.gb-conceito__texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }

/* --- Família global ------------------------------------------------------ */
.gb-familia { max-width: 900px; margin: 0 auto; text-align: center; }
.gb-familia__icone { display: inline-flex; color: var(--gb-red); }
.gb-familia__titulo { margin: 24px 0 16px; font: 700 clamp(30px, 4vw, 56px)/1.05 var(--gb-font-display); text-transform: uppercase; letter-spacing: -.025em; }
.gb-familia__desc { margin: 0 auto 48px; max-width: 700px; color: var(--gb-muted); }
.gb-numeros { grid-template-columns: repeat(4, 1fr); }
.gb-numero { padding: 32px 16px; }
.gb-numero__valor { display: block; font: 700 48px/1 var(--gb-font-display); color: var(--gb-red); }
.gb-numero__label { display: block; margin-top: 10px; font: 400 10px/1.4 var(--gb-font-body); text-transform: uppercase; letter-spacing: .25em; color: var(--gb-muted); }

/* --- Por que Morada da Colina -------------------------------------------- */
.gb-porque { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.gb-porque__foto { position: relative; }
.gb-porque__foto::before {
  content: ""; position: absolute; inset: 12px; z-index: 0;
  background: var(--gb-red); opacity: .2; filter: blur(40px);
}
.gb-porque__foto img { position: relative; z-index: 1; width: 100%; border-radius: var(--gb-radius); border: 1px solid var(--gb-border); }
.gb-diferenciais { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.gb-diferencial { display: flex; gap: 16px; align-items: flex-start; }
.gb-diferencial__icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--gb-radius-sm);
  border: 1px solid var(--gb-red-30); background: var(--gb-red-10); color: var(--gb-red);
}
.gb-diferencial__titulo { margin: 0 0 6px; font: 600 14px/1.3 var(--gb-font-display); text-transform: uppercase; letter-spacing: .08em; }
.gb-diferencial__texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }

/* --- Depoimentos --------------------------------------------------------- */
.gb-depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gb-depoimento { margin: 0; padding: 32px; display: flex; flex-direction: column; }
.gb-depoimento__aspas { color: var(--gb-red-40); }
.gb-depoimento__texto { flex: 1; margin: 20px 0 24px; padding: 0; border: 0; font-size: 16px; line-height: 1.7; color: rgba(248,248,248,.9); }
.gb-depoimento__pe { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--gb-border); }
.gb-depoimento__avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(223,38,37,.15); color: var(--gb-red);
  font: 700 14px/1 var(--gb-font-display);
}
.gb-depoimento__nome { display: block; font-size: 14px; font-weight: 600; }
.gb-depoimento__papel { display: block; margin-top: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gb-muted); }

/* --- Galeria da Escola + lightbox --------------------------------------- */
.gb-galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gb-galeria__item {
  position: relative; display: block; aspect-ratio: 4 / 5;
  border-radius: var(--gb-radius); border: 1px solid var(--gb-border); overflow: hidden;
}
.gb-galeria__item img { width: 100%; height: 100%; object-fit: cover; }
.gb-galeria__legenda {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px;
  font: 600 14px/1.2 var(--gb-font-display); text-transform: uppercase; color: var(--gb-fg);
}

/* O lightbox é `:target`: sem JavaScript, com voltar do navegador de graça. */
.gb-lightbox { position: fixed; inset: 0; z-index: 100; display: none; }
.gb-lightbox:target { display: grid; place-items: center; }
.gb-lightbox__fundo { position: absolute; inset: 0; background: rgba(5,5,5,.9); backdrop-filter: blur(4px); }
.gb-lightbox__caixa { position: relative; margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; }
.gb-lightbox__caixa img { display: block; max-width: 100%; max-height: 80vh; border-radius: var(--gb-radius); }
.gb-lightbox__caixa figcaption { margin-top: 12px; text-align: center; font: 600 12px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--gb-muted); }
.gb-lightbox__fechar {
  position: absolute; top: 20px; right: 24px;
  font-size: 40px; line-height: 1; color: var(--gb-fg); text-decoration: none;
}

/* --- Corpo docente ------------------------------------------------------- */
.gb-professor { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: center; }
.gb-professor__foto { position: relative; padding-left: 16px; }
.gb-professor__foto::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px;
  width: 4px; background: var(--gb-red);
}
.gb-professor__foto img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: contain;
  background: var(--gb-card);
  border-radius: var(--gb-radius); border: 1px solid var(--gb-border);
  box-shadow: 0 25px 60px -20px var(--gb-red-glow);
}
.gb-professor__rank { margin: 0; font: 600 12px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .25em; color: var(--gb-red); }
.gb-professor__nome { margin: 16px 0; font: 700 clamp(32px, 4vw, 48px)/1 var(--gb-font-display); text-transform: uppercase; }
.gb-professor__bio { margin: 24px 0 32px; color: var(--gb-muted); line-height: 1.7; }

/* --- Linha do tempo ------------------------------------------------------ */
.gb-timeline { list-style: none; margin: 0; padding: 0 0 0 48px; border-left: 1px solid var(--gb-border); display: grid; gap: 48px; }
.gb-marco { position: relative; }
.gb-marco::before {
  content: ""; position: absolute; left: -58px; top: 6px;
  width: 20px; height: 20px; border-radius: 9999px;
  border: 1px solid var(--gb-red); background: var(--gb-bg);
  box-shadow: inset 0 0 0 4px var(--gb-bg), inset 0 0 0 10px var(--gb-red);
}
.gb-marco__ano { display: block; font: 700 36px/1 var(--gb-font-display); color: var(--gb-red); }
.gb-marco__titulo { margin: 10px 0 8px; font: 600 20px/1.2 var(--gb-font-display); text-transform: uppercase; letter-spacing: .04em; }
.gb-marco__texto { margin: 0; max-width: 720px; color: var(--gb-muted); line-height: 1.7; }

/* --- Triângulo Gracie ---------------------------------------------------- */
.gb-triangulo-bloco { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.gb-triangulo-bloco__arte { position: relative; max-width: 384px; margin: 0 auto; }
.gb-triangulo { display: block; width: 100%; height: auto; }
.gb-triangulo__rot {
  position: absolute;
  font: 700 18px/1 var(--gb-font-display);
  text-transform: uppercase; letter-spacing: .05em; color: var(--gb-fg);
}
.gb-triangulo__rot--topo { top: -6px; left: 50%; transform: translateX(-50%); }
.gb-triangulo__rot--esq  { bottom: -4px; left: 0; }
.gb-triangulo__rot--dir  { bottom: -4px; right: 0; }
.gb-dimensoes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; color: var(--gb-muted); line-height: 1.7; }
.gb-dimensoes strong { color: var(--gb-fg); }

/* --- Abas dos programas (rádio + :checked, sem JavaScript) --------------- */
.gb-abas__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.gb-abas__rotulos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 768px; margin: 0 auto 48px; }
.gb-abas__rotulo {
  padding: 12px 20px; cursor: pointer;
  border: 1px solid var(--gb-border); border-radius: var(--gb-radius-sm);
  background: var(--gb-card);
  font: 700 12px/1 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .15em; color: var(--gb-muted);
  transition: border-color .2s, background-color .2s, color .2s;
}
.gb-abas__rotulo:hover { color: var(--gb-fg); border-color: var(--gb-red-40); }
.gb-abas__painel { display: none; }

/* Aba ativa: rótulo e painel do mesmo índice do rádio marcado. */
.gb-abas__radio:nth-of-type(1):checked ~ .gb-abas__rotulos .gb-abas__rotulo:nth-child(1) { border-color: var(--gb-red); background: var(--gb-red); color: var(--gb-on-primary); }
.gb-abas__radio:nth-of-type(1):checked ~ .gb-abas__paineis .gb-abas__painel:nth-child(1) { display: block; }
.gb-abas__radio:nth-of-type(2):checked ~ .gb-abas__rotulos .gb-abas__rotulo:nth-child(2) { border-color: var(--gb-red); background: var(--gb-red); color: var(--gb-on-primary); }
.gb-abas__radio:nth-of-type(2):checked ~ .gb-abas__paineis .gb-abas__painel:nth-child(2) { display: block; }
.gb-abas__radio:nth-of-type(3):checked ~ .gb-abas__rotulos .gb-abas__rotulo:nth-child(3) { border-color: var(--gb-red); background: var(--gb-red); color: var(--gb-on-primary); }
.gb-abas__radio:nth-of-type(3):checked ~ .gb-abas__paineis .gb-abas__painel:nth-child(3) { display: block; }
.gb-abas__radio:nth-of-type(4):checked ~ .gb-abas__rotulos .gb-abas__rotulo:nth-child(4) { border-color: var(--gb-red); background: var(--gb-red); color: var(--gb-on-primary); }
.gb-abas__radio:nth-of-type(4):checked ~ .gb-abas__paineis .gb-abas__painel:nth-child(4) { display: block; }
.gb-abas__radio:nth-of-type(5):checked ~ .gb-abas__rotulos .gb-abas__rotulo:nth-child(5) { border-color: var(--gb-red); background: var(--gb-red); color: var(--gb-on-primary); }
.gb-abas__radio:nth-of-type(5):checked ~ .gb-abas__paineis .gb-abas__painel:nth-child(5) { display: block; }
.gb-abas__radio:nth-of-type(6):checked ~ .gb-abas__rotulos .gb-abas__rotulo:nth-child(6) { border-color: var(--gb-red); background: var(--gb-red); color: var(--gb-on-primary); }
.gb-abas__radio:nth-of-type(6):checked ~ .gb-abas__paineis .gb-abas__painel:nth-child(6) { display: block; }

.gb-programa { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.gb-programa__foto { aspect-ratio: 5 / 4; border-radius: var(--gb-radius); border: 1px solid var(--gb-border); overflow: hidden; }
.gb-programa__foto img { width: 100%; height: 100%; object-fit: cover; }
.gb-programa__foto--base img { object-position: center bottom; }
.gb-programa__tagline { margin: 0; font: 600 12px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .3em; color: var(--gb-red); }
.gb-programa__titulo { margin: 16px 0; font: 700 clamp(28px, 3.4vw, 48px)/1.05 var(--gb-font-display); text-transform: uppercase; letter-spacing: -.025em; }
.gb-programa__desc { margin: 0 0 24px; color: var(--gb-muted); line-height: 1.7; }
.gb-programa__itens { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.gb-programa__itens li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gb-muted); }
.gb-programa__itens svg { flex: none; margin-top: 2px; color: var(--gb-red); }

/* --- Grade de horários --------------------------------------------------- */
.gb-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.gb-legenda__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 9999px;
  border: 1px solid var(--gb-border); background: var(--gb-card);
  font-size: 12px; color: var(--gb-muted);
}
.gb-legenda__cor { width: 10px; height: 10px; border-radius: 9999px; }
.gb-legenda__cor--gb1  { background: var(--gb-prog-gb1); }
.gb-legenda__cor--gb2  { background: var(--gb-prog-gb2); }
.gb-legenda__cor--kids { background: var(--gb-prog-kids); }
.gb-legenda__cor--fem  { background: var(--gb-prog-fem); }
.gb-schedule__wrap { overflow-x: auto; }
.gb-schedule__nota { margin-top: 16px; font-size: 12px; color: var(--gb-muted); }

/* --- Grade no celular ---------------------------------------------------- */
/* Aqui a tabela rola na horizontal de qualquer jeito, entao vale mais nao
   quebrar o nome da aula em tres linhas do que caber na tela: `nowrap` com
   fonte e padding menores, e a tabela escapando da margem do row do Divi
   para aproveitar a largura. */
@media (max-width: 767px) {
  .gb-schedule__wrap { margin-inline: -36px; }
  .gb-schedule { min-width: 0; }
  .gb-schedule th { padding: 12px 10px; }
  .gb-schedule td { padding: 4px; }
  .gb-schedule td:first-child { padding: 8px 10px; font-size: 14px; }
  .gb-slot { font-size: 10px; padding: 7px 8px; white-space: nowrap; }
  .gb-slot--empty { padding: 7px 8px; }

  /* A dica de rolagem so existe no celular, entao nasce no CSS em vez de
     virar conteudo permanente da pagina. `sticky` a mantem visivel mesmo
     com a tabela rolada para o lado. */
  .gb-schedule__wrap::after {
    content: "Arraste para o lado para ver os outros dias  \2192";
    position: sticky;
    left: 0;
    display: block;
    padding-top: 10px;
    font: 500 11px/1.4 var(--gb-font-body);
    letter-spacing: .05em;
    color: var(--gb-muted);
    text-align: center;
  }
}

/* --- FAQ ----------------------------------------------------------------- */
.gb-faq { max-width: 768px; margin: 0 auto; display: grid; gap: 12px; }
.gb-faq__item { border: 1px solid var(--gb-border); border-radius: var(--gb-radius); background: var(--gb-card); padding: 0 20px; }
.gb-faq__item[open] { border-color: var(--gb-red-40); }
.gb-faq__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font: 600 16px/1.3 var(--gb-font-display);
  text-transform: uppercase; letter-spacing: .025em;
}
.gb-faq__pergunta::-webkit-details-marker { display: none; }
.gb-faq__pergunta::after {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gb-red); border-bottom: 2px solid var(--gb-red);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s;
}
.gb-faq__item[open] .gb-faq__pergunta::after { transform: rotate(225deg) translateY(-2px); }
.gb-faq__resposta { padding-bottom: 16px; font-size: 14px; line-height: 1.7; color: var(--gb-muted); }
.gb-faq__resposta p { margin: 0; }
.gb-faq__caixa {
  max-width: 768px; margin: 56px auto 0; padding: 32px; text-align: center;
  border: 1px solid var(--gb-red-30); border-radius: var(--gb-radius);
  background: rgba(223,38,37,.05);
}
.gb-faq__caixa-titulo { margin: 0 0 8px; font: 700 28px/1.1 var(--gb-font-display); text-transform: uppercase; }
.gb-faq__caixa-texto { margin: 0 0 24px; color: var(--gb-muted); }

/* --- Contato ------------------------------------------------------------- */
.gb-contato { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.gb-contato__form { padding: 40px; }
.gb-contato__lado { display: grid; gap: 24px; }
.gb-map-dark { border-radius: var(--gb-radius); overflow: hidden; }
.gb-map-dark iframe { display: block; width: 100%; height: 300px; border: 0; }
.gb-contato__lista { list-style: none; margin: 0; padding: 24px; display: grid; gap: 20px; }
.gb-contato__item { display: flex; gap: 16px; align-items: flex-start; }
.gb-contato__icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--gb-radius-sm);
  border: 1px solid var(--gb-red-30); background: var(--gb-red-10); color: var(--gb-red);
}
.gb-contato__rotulo { display: block; font: 600 11px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--gb-muted); }
.gb-contato__valor { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; }
.gb-contato__valor a { color: var(--gb-fg); }
.gb-contato__valor a:hover { color: var(--gb-red); }

/* --- Matrícula ----------------------------------------------------------- */
.gb-matricula { max-width: 768px; margin: 0 auto; }

/* --- Páginas jurídicas --------------------------------------------------- */
.gb-legal { max-width: 800px; margin: 0 auto; }
.gb-legal__bloco { margin-bottom: 40px; }
.gb-legal__bloco h2 { margin: 0 0 16px; font: 600 20px/1.2 var(--gb-font-display); text-transform: uppercase; letter-spacing: .05em; }
.gb-legal p, .gb-legal li { color: var(--gb-muted); line-height: 1.75; }
.gb-legal strong { color: var(--gb-fg); }
.gb-legal ul { padding-left: 20px; display: grid; gap: 10px; }
.gb-legal a { color: var(--gb-red); }
.gb-legal__data { font-size: 12px; }

/* Aviso de dependência ausente — visível de propósito. */
.gb-aviso {
  padding: 20px; border-radius: var(--gb-radius-sm);
  border: 1px dashed var(--gb-red-40); background: var(--gb-red-10);
  color: var(--gb-fg); font-size: 14px;
}

/* ==========================================================================
   11. RESPONSIVO DOS COMPONENTES SEMEADOS
   ========================================================================== */

@media (max-width: 1100px) {
  .gb-manifesto { grid-template-columns: repeat(2, 1fr); }
  .gb-galeria   { grid-template-columns: repeat(2, 1fr); }
  .gb-professor { grid-template-columns: 1fr; gap: 32px; }
  .gb-professor__foto { max-width: 360px; }
}

@media (max-width: 980px) {
  .gb-pilares,
  .gb-depoimentos { grid-template-columns: 1fr; }
  .gb-porque,
  .gb-triangulo-bloco,
  .gb-programa,
  .gb-contato { grid-template-columns: 1fr; gap: 32px; }
  .gb-numeros { grid-template-columns: repeat(2, 1fr); }
  .gb-contato__form { padding: 24px; }
  .gb-cta { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 767px) {
  .gb-hero { min-height: 80vh; padding: 80px 16px 40px; }
  .gb-hero__rolar { display: none; }
  .gb-hero-interno { padding: 56px 16px; }
  .gb-manifesto { grid-template-columns: 1fr; }
  .gb-programa__itens { grid-template-columns: 1fr; }
  .gb-timeline { padding-left: 32px; }
  .gb-marco::before { left: -42px; }
  .gb-numero__valor { font-size: 36px; }
  .gb-galeria { grid-template-columns: 1fr; }
  .gb-cta__acoes .gb-btn { width: 100%; }
}

/* ==========================================================================
   12. RECONCILIAÇÃO COM O DIVI
   Aqui mora tudo que existe só porque o Divi (ou uma regra genérica desta
   própria folha) estava vencendo o componente. Medido contra o original em
   1440px, não estimado.
   ========================================================================== */

/* --- Fundo das seções ---------------------------------------------------
   O Divi declara `.et_pb_section { background-color: #fff }` no CSS que ele
   injeta no `<head>` — depois desta folha, portanto ganhando por ordem. O
   resultado era um site escuro com faixas brancas entre as seções.
   `.et_pb_section.gb-sec` ganha por especificidade, sem `!important`. */
.et_pb_section.gb-sec            { background-color: transparent; }
.et_pb_section.gb-section--surface { background-color: var(--gb-surface); }
.et_pb_section.gb-section--card    { background-color: var(--gb-card); }

/* --- Padding vertical ---------------------------------------------------
   O Divi usa 4% (≈54px em 1440) e 54px fixos acima de 1350px. O original usa
   80px em toda seção. */
.et_pb_section.gb-sec { padding: var(--gb-section-pad) 0; }

/* Hero e heros internos trazem o próprio respiro no componente. */
.et_pb_section.gb-sec--hero,
.et_pb_section.gb-sec--hero-interno { padding: 0; }

/* A faixa de CTA tem respiro próprio (64px), definido no componente. */
.et_pb_section.gb-sec--cta { padding: 0; }

/* --- Linha e coluna do Divi --------------------------------------------
   A linha do Divi traz padding próprio e largura de 80%. O original usa um
   container de 1280px com 24px de respiro lateral. */
/* A linha do Divi ignora `max-width` de fora — ele declara a própria com
   especificidade maior. Repetir a classe (`.et_pb_row.et_pb_row`) empata e
   vence pela ordem, e `min()` garante o container de 1280px com 24px de
   respiro, que é a medida do original. */
.gb-sec > .et_pb_row,
.gb-sec > .et_pb_row.et_pb_row {
  /* O container do original é 1280px de caixa, com 24px de respiro POR DENTRO
     — o conteúdo útil dá 1232px. Sem esse respiro os cards saíam 411px em vez
     dos 395px do original: a diferença toda estava no padding, não na grade. */
  padding: 0 24px;
  width: min(100% - 48px, var(--gb-maxw));
  max-width: none;
  margin-inline: auto;
}
.gb-sec--hero > .et_pb_row,
.gb-sec--hero-interno > .et_pb_row { width: 100%; max-width: none; }

.gb-sec .et_pb_column { margin-bottom: 0; }
.gb-sec .et_pb_module { margin-bottom: 0; }

/* --- Tipografia dentro dos módulos --------------------------------------
   A regra base da seção 2 inclui `.et_pb_module h1` — que é (0,1,1) e portanto
   vence qualquer classe de componente sozinha, como `.gb-hero__titulo` (0,1,0).
   Era por isso que os títulos saíam com `letter-spacing: -.01em` em vez do
   `-.025em` do original: esta folha estava competindo consigo mesma.

   A correção é dar aos componentes a mesma especificidade, não subir tudo
   para `!important`. */
.et_pb_module .gb-hero__titulo        { letter-spacing: -.025em; line-height: .95; }
.et_pb_module .gb-hero-interno__titulo,
.et_pb_module .gb-cabecalho__titulo,
.et_pb_module .gb-familia__titulo,
.et_pb_module .gb-programa__titulo,
.et_pb_module .gb-cta__titulo         { letter-spacing: -.025em; line-height: 1.05; }
.et_pb_module .gb-pilar__titulo,
.et_pb_module .gb-professor__nome,
.et_pb_module .gb-marco__titulo,
.et_pb_module .gb-conceito__titulo,
.et_pb_module .gb-faq__caixa-titulo   { letter-spacing: .025em; }
.et_pb_module .gb-diferencial__titulo { letter-spacing: .08em; }
/* Medido no doc 02: a pergunta usa .025em, não o .08em dos títulos de bloco. */
.et_pb_module .gb-faq__pergunta { letter-spacing: .025em; }
.et_pb_module .gb-legal__bloco h2     { letter-spacing: .05em; }

/* Parágrafos dentro de módulo: o Divi zera margem e força 1.7 de entrelinha
   em `.et_pb_text_inner p`. Onde o componente manda, ele manda. */
.gb-sec .et_pb_module p:last-of-type { padding-bottom: 0; }

/* --- Respiro lateral do hero -------------------------------------------
   O original alinha o conteúdo do hero ao container de 1280px, com 24px de
   respiro — 96px a partir da borda em 1440. Sem isto o texto colava 23px
   mais à esquerda que o original. */
.gb-hero__conteudo { padding-inline: 24px; }

/* --- Cor de texto herdada ----------------------------------------------
   Módulo de texto do Divi assume `et_pb_bg_layout_light`, que pinta o texto
   de escuro. Como o site inteiro é escuro, o padrão está invertido. */
.gb-sec .et_pb_text,
.gb-sec .et_pb_code,
.gb-sec .et_pb_heading { color: var(--gb-fg); }

/* --- Imagens dentro de módulo ------------------------------------------- */
.gb-sec .et_pb_module img { display: block; }

/* ==========================================================================
   13. CABEÇALHO E RODAPÉ GLOBAIS
   Correspondem às seções 5 e 6 do doc 01. Vivem no Theme Builder do Divi, mas
   a aparência é toda daqui — o layout lá é só a estrutura mínima.
   ========================================================================== */

/* --- Cabeçalho ----------------------------------------------------------- */
.gb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 80px;
  padding-inline: 24px;
  background: rgba(46, 46, 46, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gb-border);
}

.gb-header__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.gb-header__logo {
  width: 56px; height: 56px; border-radius: var(--gb-radius-sm);
  object-fit: cover; box-shadow: 0 0 0 1px var(--gb-border);
}
.gb-header__nome  { display: block; font: 700 14px/1.1 var(--gb-font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--gb-fg); }
.gb-header__unidade { display: block; margin-top: 2px; font: 400 10px/1.1 var(--gb-font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--gb-muted); }

.gb-header__menu ul { display: flex; justify-content: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.gb-header__menu a {
  position: relative; display: block; padding: 6px 0;
  font: 500 14px/1 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .025em;
  color: var(--gb-muted); text-decoration: none;
  transition: color .2s;
}
.gb-header__menu a:hover { color: var(--gb-fg); }
.gb-header__menu .current-menu-item > a { color: var(--gb-fg); }
.gb-header__menu .current-menu-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--gb-red);
}

.gb-header__acoes { display: flex; align-items: center; gap: 12px; }

@media (max-width: 767px)  {
  .gb-header { height: 68px; padding-inline: 16px; }
  .gb-header__texto { display: none; }
}

/* --- Rodapé -------------------------------------------------------------- */
.gb-footer { background: var(--gb-surface); border-top: 1px solid var(--gb-border); }
.gb-footer__wrap { max-width: var(--gb-maxw); margin: 0 auto; padding-inline: 24px; }

/* Faixa 1 — selos */
.gb-footer__selos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 32px;
  padding: 24px 0; border-bottom: 1px solid var(--gb-border);
}
.gb-footer__selo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .05em; color: var(--gb-muted);
}
.gb-footer__selo svg { color: var(--gb-red); flex: none; }

/* Faixa 2 — conteúdo */
.gb-footer__grade {
  display: grid;
  grid-template-columns: 4fr 2fr 3fr 3fr;
  gap: 48px;
  padding: 56px 0;
}
.gb-footer h4 {
  margin: 0 0 16px;
  font: 600 12px/1.2 var(--gb-font-display);
  text-transform: uppercase; letter-spacing: .2em; color: var(--gb-fg);
}
.gb-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gb-footer a { color: var(--gb-muted); text-decoration: none; font-size: 14px; transition: color .2s; }
.gb-footer a:hover { color: var(--gb-red); }
.gb-footer__texto { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--gb-muted); }

.gb-footer__marca span { display: block; }
.gb-footer__marca .l1 { font: 400 10px/1.4 var(--gb-font-body); letter-spacing: .35em; color: var(--gb-muted); text-transform: uppercase; }
.gb-footer__marca .l2 { font: 700 18px/1.3 var(--gb-font-display); letter-spacing: .18em; color: var(--gb-fg); text-transform: uppercase; }
.gb-footer__marca .l3 { font: 400 10px/1.4 var(--gb-font-body); letter-spacing: .3em; color: var(--gb-red); text-transform: uppercase; }
.gb-footer__marca .l4 { font: 400 10px/1.4 var(--gb-font-body); letter-spacing: .25em; color: var(--gb-muted); text-transform: uppercase; }

.gb-footer__horario { display: grid; gap: 8px; margin-top: 20px; font-size: 13px; }
.gb-footer__horario div { display: flex; justify-content: space-between; gap: 16px; }
.gb-footer__horario dt, .gb-footer__horario .rot { color: var(--gb-muted); }
.gb-footer__horario .val { color: var(--gb-fg); font-weight: 500; }

/* Faixa 3 — base */
.gb-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--gb-border);
  font-size: 12px; color: var(--gb-muted);
}
.gb-footer__base nav { display: flex; flex-wrap: wrap; gap: 16px; }
.gb-footer__ponto { color: var(--gb-red); }

@media (max-width: 980px) {
  .gb-footer__grade { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .gb-footer__grade { grid-template-columns: 1fr; }
  .gb-footer__base { flex-direction: column; }
}

/* O Theme Builder envolve o layout em wrappers próprios; eles não devem
   acrescentar respiro ao que já é uma faixa de largura total. */
/* As seções que o Theme Builder cria não levam a classe `gb-sec`, então a
   regra de fundo da seção 12 não as alcançava — e elas herdavam o branco
   padrão do Divi: uma faixa atrás do cabeçalho, outra atrás do rodapé. */
.et-l--header .et_pb_section,
.et-l--footer .et_pb_section { padding: 0; background-color: transparent; }
.et-l--header .et_pb_row,
.et-l--footer .et_pb_row { width: 100%; max-width: none; padding: 0; }

/* As duas regras acima valem nas paginas construidas no Divi 5. Blog, loja
   e pagina de produto caem no modo de compatibilidade do Divi (a barra de
   admin avisa: "Backwards Compatibility Mode"), e nesse caminho a folha
   gerada pelo Divi prefixa a secao com `#page-container`. Um id vence
   qualquer numero de classes, entao o `padding: 4% 0` voltava: 57px em cima
   e 57px embaixo do cabecalho, so nessas paginas. Aqui a regra carrega o
   mesmo id e mais uma classe. */
#page-container .et-l--header .et_pb_section,
#page-container .et-l--footer .et_pb_section {
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
}
#page-container .et-l--header .et_pb_row,
#page-container .et-l--footer .et_pb_row,
#page-container .et-l--header .et_pb_column,
#page-container .et-l--footer .et_pb_column {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   14. MENU MÓVEL
   O cabeçalho não pode depender de JavaScript carregar — é a peça que
   aparece em toda página e é a única navegação do site no celular. Então o
   gatilho é um checkbox escondido e o hambúrguer é o `<label>` dele.
   ========================================================================== */

.gb-header__gatilho { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.gb-header__hamburguer {
  display: none;
  grid-area: ham;
  /* As tres barras empilham. Sem `column` o flex as deita lado a lado e o
     hamburguer vira um traco horizontal -- era o que aparecia no celular. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: var(--gb-radius-sm);
  cursor: pointer;
  transition: background-color .2s;
}
.gb-header__hamburguer:hover { background: var(--gb-accent); }
.gb-header__hamburguer span {
  display: block;
  flex: none;           /* senao o flex encolhe as barras de 18px para 13px */
  width: 18px;
  height: 2px;
  background: var(--gb-fg);
  transition: transform .3s, opacity .2s;
}

/* Vira um X quando aberto — o usuário precisa ver que o mesmo botão fecha. */
.gb-header__gatilho:checked ~ .gb-header__hamburguer span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gb-header__gatilho:checked ~ .gb-header__hamburguer span:nth-child(2) { opacity: 0; }
.gb-header__gatilho:checked ~ .gb-header__hamburguer span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .gb-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marca ham acoes";
  }
  .gb-header__marca { grid-area: marca; }
  .gb-header__acoes { grid-area: acoes; }
  .gb-header__hamburguer { display: flex; margin-left: auto; }

  /* O painel desce por baixo da barra, com o mesmo fundo e desfoque. */
  .gb-header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 16px 20px;
    background: rgba(46, 46, 46, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gb-border);
  }
  .gb-header__gatilho:checked ~ .gb-header__menu { display: block; }

  .gb-header__menu ul { flex-direction: column; gap: 0; }
  .gb-header__menu li { border-top: 1px solid var(--gb-border); }
  .gb-header__menu li:first-child { border-top: 0; }
  .gb-header__menu a { padding: 14px 0; font-size: 15px; }
  .gb-header__menu .current-menu-item > a::after { display: none; }
  .gb-header__menu .current-menu-item > a { color: var(--gb-red); }
}

@media (max-width: 767px) {
  /* Em telas estreitas o botão de matrícula é o que importa; o contorno sai
     e o WhatsApp continua no botão flutuante do S.A.C. */
  .gb-header__acoes .gb-btn--outline { display: none; }
}

/* ==========================================================================
   15. FIDELIDADE — correções medidas contra o original
   Cada bloco aqui nasceu de uma medição no site de referência, não de
   estimativa. O padrão do erro se repetiu três vezes: uma regra de seção 12
   com especificidade maior vencendo a regra de componente da seção 10.
   ========================================================================== */

/* --- Cor dos títulos ----------------------------------------------------
   No original todo título é `#F8F8F8`. Aqui saíam cinza porque nenhuma regra
   de componente declarava cor, e o que vencia era um padrão herdado do Divi.
   Declarar explicitamente, com a especificidade de `.et_pb_module`, resolve
   sem `!important`. */
.et_pb_module .gb-hero__titulo,
.et_pb_module .gb-hero-interno__titulo,
.et_pb_module .gb-cabecalho__titulo,
.et_pb_module .gb-familia__titulo,
.et_pb_module .gb-programa__titulo,
.et_pb_module .gb-cta__titulo,
.et_pb_module .gb-pilar__titulo,
.et_pb_module .gb-conceito__titulo,
.et_pb_module .gb-professor__nome,
.et_pb_module .gb-marco__titulo,
.et_pb_module .gb-diferencial__titulo,
.et_pb_module .gb-faq__pergunta,
.et_pb_module .gb-faq__caixa-titulo,
.et_pb_module .gb-legal__bloco h2,
.et_pb_module .gb-footer h4,
.et_pb_module .gb-header__nome { color: var(--gb-fg); }

.et_pb_module .gb-numero__valor,
.et_pb_module .gb-marco__ano,
.et_pb_module .gb-programa__tagline,
.et_pb_module .gb-professor__rank { color: var(--gb-red); }

/* --- Hero em largura total ----------------------------------------------
   A regra genérica `.gb-sec > .et_pb_row.et_pb_row` (0,3,0) vencia a exceção
   do hero (0,2,0), e a foto ficava presa aos 1280px do container em vez de
   sangrar até a borda — que no original transborda a tela (1806px em 1600). */
.et_pb_section.gb-sec--hero > .et_pb_row.et_pb_row,
.et_pb_section.gb-sec--hero-interno > .et_pb_row.et_pb_row,
.et_pb_section.gb-sec--cta > .et_pb_row.et_pb_row {
  width: 100%;
  max-width: none;
  padding: 0;
}
.et_pb_section.gb-sec--hero .et_pb_column,
.et_pb_section.gb-sec--hero-interno .et_pb_column { padding: 0; }

/* --- Faixa de CTA -------------------------------------------------------
   Mesma armadilha: o fundo vermelho a 10% vinha de `.gb-sec--cta` (0,1,0) e
   era apagado por `.et_pb_section.gb-sec { background-color: transparent }`
   (0,2,0). Medido no original: fundo vermelho .1, bordas vermelhas .3. */
.et_pb_section.gb-sec--cta {
  background-color: var(--gb-red-10);
  border-top: 1px solid var(--gb-red-30);
  border-bottom: 1px solid var(--gb-red-30);
}
.gb-cta { max-width: var(--gb-maxw); margin-inline: auto; padding: 64px 24px; }
.et_pb_module .gb-cta__titulo { font-size: clamp(28px, 3.4vw, 48px); }

/* --- Manifesto ----------------------------------------------------------
   Medido: célula 28px de padding sobre `#1B1B1B`, ícone de 36px com traço
   1.5, e a ordem ícone → número → título → texto. */
.gb-conceito { padding: 28px; display: flex; flex-direction: column; }
.gb-conceito__icone { display: block; margin: 0 0 20px; color: var(--gb-red); line-height: 0; }
.gb-conceito__icone svg { width: 36px; height: 36px; }
.gb-conceito__num { font: 400 12px/1 var(--gb-font-body); letter-spacing: .25em; color: var(--gb-muted); }
.gb-conceito__titulo { margin: 10px 0; font: 700 20px/1.2 var(--gb-font-display); text-transform: uppercase; letter-spacing: .025em; }
.gb-conceito__texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }

/* --- Rodapé: as peças que faltavam -------------------------------------- */
.gb-footer__grade { grid-template-columns: 4fr 2fr 3fr 3fr; }
.gb-footer__topo { display: flex; align-items: center; gap: 16px; }
.gb-footer__logo { width: 64px; height: 64px; border-radius: var(--gb-radius-sm); object-fit: cover; flex: none; }
/* Especificidade casada: `.gb-footer h4` (0,1,1) traz `margin` shorthand e
   zerava o topo deste; por isso o segundo titulo da coluna colava na lista
   de cima. Mais respiro acima do que abaixo -- o titulo pertence a lista que
   vem depois dele. */
.gb-footer h4.gb-footer__h4--segundo { margin-top: 36px; }
.gb-footer h4 { display: flex; align-items: center; gap: 8px; }
.gb-footer h4 svg { color: var(--gb-red); flex: none; }

.gb-footer__contato li { display: flex; align-items: flex-start; gap: 10px; }
.gb-footer__contato svg { margin-top: 3px; color: var(--gb-red); flex: none; }

.gb-footer__news { margin-top: 28px; }
.gb-footer__news-linha { display: flex; gap: 8px; }
.gb-footer__news input {
  flex: 1; min-width: 0; padding: 12px 16px;
  background: var(--gb-bg); border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm); color: var(--gb-fg);
  font: 400 14px/1.4 var(--gb-font-body);
}
.gb-footer__news input::placeholder { color: var(--gb-muted); }
.gb-footer__news input:focus { outline: none; border-color: var(--gb-red); box-shadow: 0 0 0 2px var(--gb-red-30); }
.gb-footer__news button {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; border: 0; border-radius: var(--gb-radius-sm);
  background: var(--gb-red); color: var(--gb-on-primary); cursor: pointer;
  transition: filter .2s;
}
.gb-footer__news button:hover { filter: brightness(1.1); }
.gb-footer__nota { margin: 10px 0 0; font-size: 12px; color: var(--gb-muted); }

/* A base é uma linha só: copyright à esquerda, jurídicas e assinatura à
   direita. Empilhado, como estava, o rodapé ganhava três linhas de altura. */
.gb-footer__base-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* Mesmo caso: `.gb-footer ul` (0,1,1) e grid e vencia esta regra, entao
   Termos de Uso e Politicas empilhavam em vez de ficar lado a lado. */
.gb-footer ul.gb-footer__base-lista { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gb-footer__base-lista a { white-space: nowrap; }
.gb-footer__sep { color: var(--gb-muted); }
.gb-footer__base sup { font-size: .7em; }

@media (max-width: 980px) {
  .gb-footer__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .gb-footer__grade { grid-template-columns: 1fr; }
  .gb-footer__base-dir { flex-direction: column; align-items: flex-start; }
  .gb-footer__sep { display: none; }
}

/* ==========================================================================
   16. PÁGINA DE AGENDAMENTO
   ========================================================================== */

.gb-agendar { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.gb-agendar__form { padding: 40px; }
.gb-agendar__titulo { margin: 0 0 24px; font: 700 28px/1.1 var(--gb-font-display); text-transform: uppercase; letter-spacing: .025em; }

.gb-passos { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 24px; }
.gb-passo { display: flex; gap: 16px; align-items: flex-start; }
.gb-passo__icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--gb-radius-sm);
  border: 1px solid var(--gb-red-30); background: var(--gb-red-10); color: var(--gb-red);
}
.gb-passo__num { display: block; font: 600 11px/1.2 var(--gb-font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--gb-muted); }
.gb-passo__titulo { margin: 6px 0; font: 600 16px/1.2 var(--gb-font-display); text-transform: uppercase; letter-spacing: .05em; }
.gb-passo__texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }

.gb-agendar__nota {
  padding: 24px; border-radius: var(--gb-radius);
  border: 1px solid var(--gb-red-30); background: rgba(223,38,37,.05);
  font-size: 14px; line-height: 1.7; color: var(--gb-muted);
}
.gb-agendar__nota p { margin: 0 0 8px; }
.gb-agendar__nota p:last-child { margin: 0; }
.gb-agendar__nota strong { color: var(--gb-fg); }
.gb-agendar__nota a { color: var(--gb-red); }

.et_pb_module .gb-agendar__titulo,
.et_pb_module .gb-passo__titulo { color: var(--gb-fg); }

@media (max-width: 980px) {
  .gb-agendar { grid-template-columns: 1fr; gap: 32px; }
  .gb-agendar__form { padding: 24px; }
}

/* ==========================================================================
   17. FORMULÁRIOS DO OSS E LISTAGEM DO BLOG
   Duas peças que o child theme não cobria porque não é ele quem as gera: o
   formulário vem do `pnl-oss` e a listagem do blog vem do Divi. As duas
   apareciam com título cinza-escuro sobre fundo escuro — o padrão de quem
   nasceu para tema claro.
   ========================================================================== */

/* --- Assistente de matrícula e formulário de interesse ------------------- */
.gb-sec .pnl-oss-painel { padding: 32px; }

.gb-sec .pnl-oss-etapa h2,
.gb-sec .pnl-oss-form h2 {
  margin: 0 0 8px;
  font: 700 24px/1.15 var(--gb-font-display);
  text-transform: uppercase;
  letter-spacing: .025em;
  color: var(--gb-fg);
}
.gb-sec .pnl-oss-sub { margin: 0 0 24px; font-size: 14px; color: var(--gb-muted); }

/* Indicador de passos: círculos ligados por linha, como no original. */
.gb-sec .pnl-oss-passos {
  display: flex; align-items: center; gap: 0;
  margin: 0 0 32px; padding: 0; list-style: none;
}
.gb-sec .pnl-oss-passos > * {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 9999px;
  border: 1px solid var(--gb-border);
  background: var(--gb-card);
  font: 700 14px/1 var(--gb-font-display);
  color: var(--gb-muted);
}
.gb-sec .pnl-oss-passos > *.is-ativo,
.gb-sec .pnl-oss-passos > *[aria-current],
.gb-sec .pnl-oss-passos > *.is-feito {
  border-color: var(--gb-red);
  background: var(--gb-red);
  color: var(--gb-on-primary);
  box-shadow: 0 0 20px var(--gb-red-glow);
}

/* Escolha por cartões — é o que distingue este assistente de um formulário
   comum, e era o argumento do doc 04 para não usar plugin genérico. */
.gb-sec .pnl-oss-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.gb-sec .pnl-oss-opcao {
  padding: 16px 20px;
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-bg);
  color: var(--gb-fg);
  font: 600 14px/1.2 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .05em;
  text-align: left; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.gb-sec .pnl-oss-opcao:hover { border-color: var(--gb-red-40); }
.gb-sec .pnl-oss-opcao.is-escolhida,
.gb-sec .pnl-oss-opcao[aria-pressed="true"] { border-color: var(--gb-red); background: var(--gb-red-10); }

.gb-sec .pnl-oss-campo { margin-bottom: 20px; }
.gb-sec .pnl-oss-erro { margin-top: 6px; font-size: 12px; color: var(--gb-red); }
.gb-sec .pnl-oss-resumo {
  margin: 24px 0 0; padding: 16px;
  border-radius: var(--gb-radius-sm);
  background: rgba(36,36,36,.5);
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gb-muted);
}
.gb-sec .pnl-oss-resumo span { color: var(--gb-fg); }

.gb-sec .pnl-oss-consentimento { font-size: 13px; color: var(--gb-muted); }
.gb-sec .pnl-oss-consentimento a { color: var(--gb-red); }
.gb-sec .pnl-oss-check { display: flex; gap: 10px; align-items: flex-start; }

.gb-sec .pnl-oss-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; }
.gb-sec .pnl-oss-nav .gb-btn[disabled],
.gb-sec .pnl-oss-nav .gb-btn:disabled { opacity: .4; cursor: not-allowed; }

/* O honeypot precisa sumir de verdade, não só ficar transparente. */
.gb-sec .pnl-oss-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .gb-sec .pnl-oss-opcoes { grid-template-columns: 1fr; }
  .gb-sec .pnl-oss-painel { padding: 20px; }
  .gb-sec .pnl-oss-nav { flex-direction: column-reverse; }
  .gb-sec .pnl-oss-nav .gb-btn { width: 100%; }
}

/* --- Listagem do blog ---------------------------------------------------
   O Divi entrega a listagem com as cores do tema claro. Aqui ela vira a
   grade de cards do doc 02: 3 colunas, imagem com zoom, meta em vermelho. */
/* Zerar fundo vale para os CONTÊINERES, não para o card. Listar
   `.blog .et_pb_post` aqui (0,2,0) apagava o fundo do card logo abaixo
   (0,1,0) — pela quarta vez nesta folha, uma regra genérica vencendo a
   específica. O card agora é declarado com a mesma especificidade. */
.et_pb_posts,
#left-area,
#main-content { background: transparent; }

.blog #main-content .container,
.archive #main-content .container,
.single-post #main-content .container { padding-top: 56px; }

/* O respiro lateral era margem em cada filho (titulo, meta, texto). O Divi
   descreve esses mesmos filhos com `#left-area` na frente, e um id vence
   qualquer numero de classes: o resumo colava na borda enquanto o titulo
   recuava. O recuo agora e padding do proprio cartao -- nao ha regra do
   Divi disputando isso -- e so a imagem sai dele, com margem negativa. */
.et_pb_post,
.blog .et_pb_post,
.archive .et_pb_post {
  margin-bottom: 24px;
  padding: 28px 28px 24px;
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  background: var(--gb-card);
  overflow: hidden;
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.et_pb_post:hover {
  transform: translateY(-4px);
  border-color: var(--gb-red-40);
  box-shadow: 0 25px 60px -20px var(--gb-red-glow);
}
.et_pb_post .entry-featured-image-url { display: block; margin: 0 -28px 24px; overflow: hidden; }
.et_pb_post .entry-featured-image-url:first-child { margin-top: -28px; }
.et_pb_post .entry-featured-image-url img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s; }
.et_pb_post:hover .entry-featured-image-url img { transform: scale(1.05); }

.et_pb_post .entry-title,
.et_pb_post .entry-title a {
  color: var(--gb-fg);
  font-family: var(--gb-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  text-decoration: none;
}
.et_pb_post .entry-title { margin: 0 0 12px; font-size: 20px; line-height: 1.2; }
.et_pb_post .entry-title a:hover { color: var(--gb-red); }

.et_pb_post .post-meta,
.et_pb_post .post-meta a {
  margin: 0 0 14px;
  font: 600 10px/1.4 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .25em;
  color: var(--gb-red); text-decoration: none;
}
.et_pb_post .post-content,
.et_pb_post p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }
.et_pb_post .post-content > :last-child { margin-bottom: 0; }
.et_pb_post .more-link {
  display: inline-block; margin: 16px 0 0;
  font: 600 12px/1 var(--gb-font-body);
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--gb-red); text-decoration: none;
}

/* Paginação e título do arquivo */
.pagination a, .pagination span, .wp-pagenavi a, .wp-pagenavi span { color: var(--gb-muted); }
.blog .et_pb_title_container h1, .archive h1.page-title { color: var(--gb-fg); }

/* O widget de posts recentes do WordPress também nasce claro. */
.widget, .et_pb_widget, .wp-block-heading { color: var(--gb-fg); }
.et_pb_widget a, .wp-block-latest-posts a { color: var(--gb-muted); }
.et_pb_widget a:hover, .wp-block-latest-posts a:hover { color: var(--gb-red); }

/* ==========================================================================
   18. ÍNDICE DE POLÍTICAS E AVISO DA NEWSLETTER
   ========================================================================== */

.gb-politicas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.gb-politica {
  display: flex; flex-direction: column;
  padding: 32px; text-decoration: none;
}
.gb-politica__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 20px;
  border-radius: var(--gb-radius-sm);
  border: 1px solid var(--gb-red-30); background: var(--gb-red-10); color: var(--gb-red);
}
.gb-politica__titulo { margin: 0 0 12px; font: 700 20px/1.2 var(--gb-font-display); text-transform: uppercase; letter-spacing: .025em; }
.gb-politica__texto { flex: 1; margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--gb-muted); }
.gb-politica__link { font: 600 12px/1 var(--gb-font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--gb-red); }
.gb-politicas__nota { margin: 32px 0 0; font-size: 13px; color: var(--gb-muted); }

.et_pb_module .gb-politica__titulo { color: var(--gb-fg); }

@media (max-width: 980px) { .gb-politicas { grid-template-columns: 1fr; } }

/* --- Retorno do formulário de newsletter -------------------------------- */
.pnl-crm-news__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pnl-crm-news__aviso { margin: 10px 0 0; font-size: 12px; color: var(--gb-fg); }
.pnl-crm-news__aviso.is-erro { color: var(--gb-red); }
.pnl-crm-news button[disabled] { opacity: .6; cursor: wait; }

/* ==========================================================================
   WooCommerce — a loja no tema escuro
   ==========================================================================
   O Divi entrega o arquivo de produtos com barra lateral e com as cores do
   tema claro. Duas consequencias medidas no site em 13/09/2026:

     - o titulo do produto saia #333 sobre o fundo #2E2E2E: contraste 1:1,
       o nome existia e ninguem via;
     - a barra lateral aparecia mesmo com a pagina Shop marcada como "sem
       barra lateral" no editor, porque o arquivo de produtos nao usa o
       layout da pagina: usa archive-product.php do Divi.
   ========================================================================== */

/* Largura total: o seletor tem id + classe, entao vence o #left-area do
   Divi sem precisar de !important. */
body.woocommerce #sidebar,
body.woocommerce-page #sidebar {
  display: none;
}

body.woocommerce #left-area,
body.woocommerce-page #left-area {
  width: 100%;
  padding-right: 0;
  float: none;
}

/* Esconder a barra lateral nao apaga o risco que a separava do conteudo: o
   Divi o desenha como .container::before, 1px de #E2E2E2 em posicao
   absoluta. Sem a barra ele fica no ar, cortando a pagina no meio. */
body.woocommerce #main-content .container::before,
body.woocommerce-page #main-content .container::before {
  display: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  color: var(--gb-fg);
  font-family: var(--gb-font-display);
}

/* Unico !important do arquivo, e ele e legitimo: o adversario e um
   !important do CSS que o proprio Divi gera para a cor de preco. Definir a
   cor em Personalizar -> WooCommerce dispensa esta linha. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--gb-fg) !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
  color: var(--gb-muted);
}

/* Placeholder de imagem em branco sobre fundo escuro e um retangulo que
   cega; o cinza do card some no lugar certo. */
.woocommerce ul.products li.product a img {
  background: var(--gb-card);
  border-radius: var(--gb-radius-sm);
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--gb-red);
  color: var(--gb-on-primary);
  border-radius: var(--gb-radius-sm);
  font-family: var(--gb-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--gb-red-dark);
  color: var(--gb-on-primary);
}

/* --- Página de obrigado -------------------------------------------------- */
.gb-obrigado { max-width: 720px; margin: 0 auto; }
.gb-obrigado__passos { margin: 0; padding-left: 1.2em; display: grid; gap: 14px; }
.gb-obrigado__passos li { color: var(--gb-fg); line-height: 1.6; }
.gb-obrigado__passos strong { color: var(--gb-red); font-family: var(--gb-font-display); text-transform: uppercase; letter-spacing: .03em; }
.gb-obrigado__acao { margin-top: 28px; text-align: center; color: var(--gb-muted); }
.gb-obrigado__acao .gb-btn { margin-left: 10px; }

/* --- Pagina do produto -------------------------------------------------- */

/* O vao no topo vinha do Divi: ele zera o padding do container so em pagina
   full width, e arquivo de produto nao e. 58px sobrando embaixo do
   cabecalho. */
body.woocommerce #main-content .container,
body.woocommerce-page #main-content .container {
  padding-top: 32px;
}

/* Mesmo problema do titulo na vitrine: h2 sai #333 sobre #2E2E2E. */
.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce #reviews h2,
.woocommerce #reviews h3,
.woocommerce #review_form #respond .comment-reply-title,
.woocommerce section.related > h2,
.woocommerce section.upsells > h2,
.woocommerce .cross-sells > h2 {
  color: var(--gb-fg);
  font-family: var(--gb-font-display);
}

.woocommerce div.product .woocommerce-tabs ul.tabs { background: transparent; padding-left: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--gb-border); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--gb-card);
  border-color: var(--gb-border);
  border-radius: var(--gb-radius-sm) var(--gb-radius-sm) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--gb-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--gb-surface); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gb-fg); }

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 28px;
}

.woocommerce #reviews .woocommerce-noreviews,
.woocommerce #review_form #respond p { color: var(--gb-fg); }
.woocommerce #review_form #respond label { color: var(--gb-muted); }

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
  background: var(--gb-card);
  color: var(--gb-fg);
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  padding: 12px 14px;
}

.woocommerce #review_form #respond textarea::placeholder { color: var(--gb-muted); }

/* O contorno branco e o corpo de 20px vinham do botao grande do Divi. Os dois
   !important sao pelo mesmo motivo do preco: o adversario e CSS gerado pelo
   Divi, e a folha dele entra depois desta. */
body.woocommerce #respond input#submit,
body.woocommerce-page #respond input#submit {
  border: 0 !important;
  font-size: 14px !important;
  padding: 12px 26px;
  line-height: 1.2;
}

/* Grade de tamanho: os rotulos saiam escuros sobre escuro. */
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations th { color: var(--gb-fg); }
.woocommerce div.product form.cart .variations select {
  background: var(--gb-card);
  color: var(--gb-fg);
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  padding: 8px 10px;
}
.woocommerce div.product form.cart .reset_variations { color: var(--gb-muted); }
.woocommerce div.product .stock { color: var(--gb-muted); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--gb-fg); }

/* --- Grade de horários: a moldura da tabela nova -------------------------- */

/*
 * `.gb-schedule__wrap` foi desenhado para a tabela antiga: ele mesmo rola na
 * horizontal e, no celular, escapa da margem do row com `margin-inline: -36px`.
 * A grade nova tem o próprio container de rolagem — dois containers roláveis
 * aninhados, mais a margem negativa, era a outra metade do vazamento à
 * esquerda no celular.
 *
 * `:has()` deixa a regra valer só quando o conteúdo é a grade nova, sem
 * precisar re-semear a página para trocar a classe.
 */
.gb-schedule__wrap:has(.pnl-oss-grade) {
  overflow: visible;
  padding: 16px 16px 20px;
}

@media (max-width: 767px) {
  .gb-schedule__wrap:has(.pnl-oss-grade) {
    margin-inline: 0;
    padding: 12px 12px 16px;
  }
}

/* --- Grade de horários: o cartão não levanta ----------------------------- */

/* O .gb-card sobe 4px no hover — bom num cartão de programa, ruim numa
   tabela de dados: a grade inteira se mexe quando o mouse passa e o olho
   perde a linha que estava seguindo. */
.gb-schedule__wrap.gb-card:hover {
  transform: none;
  border-color: var(--gb-border);
  box-shadow: none;
}

/* --- Página do produto: o resto do padrão -------------------------------- */

/* O botão de comprar saía azul contornado — é o botão padrão do Divi para
   `.alt`, e a nossa regra anterior não cobria essa variante. A classe do
   body entra duas vezes de propósito: a regra do Divi tem exatamente a mesma
   especificidade e vem depois na cascata. */
body.woocommerce.woocommerce div.product form.cart button.single_add_to_cart_button,
body.woocommerce.woocommerce a.button.alt,
body.woocommerce.woocommerce button.button.alt,
body.woocommerce.woocommerce input.button.alt {
  background: var(--gb-red);
  color: var(--gb-on-primary);
  border: 0;
  border-radius: var(--gb-radius-sm);
  font-family: var(--gb-font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 28px;
}

body.woocommerce.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
body.woocommerce.woocommerce a.button.alt:hover,
body.woocommerce.woocommerce button.button.alt:hover {
  background: var(--gb-red-dark);
  color: var(--gb-on-primary);
}

/* Seletor de variação: a tabela do WooCommerce desalinha rótulo e campo
   porque são células de larguras diferentes. Vira um bloco. */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin-bottom: 18px;
}

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 0;
}

.woocommerce div.product form.cart .variations th.label {
  margin-bottom: 6px;
  font-family: var(--gb-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}

.woocommerce div.product form.cart .variations td.value select {
  width: 100%;
  max-width: 320px;
}

.woocommerce div.product form.cart .quantity .qty {
  background: var(--gb-card);
  color: var(--gb-fg);
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  padding: 12px 8px;
  height: auto;
}

.woocommerce div.product .product_meta { color: var(--gb-muted); }
.woocommerce div.product .product_meta a { color: var(--gb-red); }
.woocommerce .woocommerce-breadcrumb a { color: var(--gb-muted); }
.woocommerce div.product p.price { font-family: var(--gb-font-display); }

/* As abas continuavam claras: a regra do Divi tem a mesma especificidade e
   vem depois. Mesma solução do botão. */
body.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li,
body.woocommerce.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
  background: var(--gb-card);
  border-color: var(--gb-border);
}

body.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li a,
body.woocommerce.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a {
  color: var(--gb-muted);
}

body.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body.woocommerce.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--gb-surface);
}

body.woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--gb-fg);
}

/* Tabela de atributos dentro de "Informação adicional". */
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
  color: var(--gb-fg);
  border-color: var(--gb-border);
  background: transparent;
}
.woocommerce div.product .woocommerce-product-attributes th { color: var(--gb-muted); }

/* ==========================================================================
   22. ARTIGO E COMENTARIOS
   O cartao do post e o mesmo objeto na listagem e no artigo aberto. O que
   muda aqui e a tipografia do corpo (texto para ler, nao resumo) e o bloco
   de comentarios, que o Divi entrega no tema claro.
   ========================================================================== */

/* Os mesmos valores da secao 17, agora carregando o id. O Divi descreve
   `#left-area article`, e sem o id o padding do cartao nao se aplicava nas
   paginas que caem no modo de compatibilidade. */
#main-content .et_pb_post { padding: 28px 28px 24px; }
#main-content .et_pb_post .entry-featured-image-url { margin: 0 -28px 24px; }
#main-content .et_pb_post .entry-featured-image-url:first-child { margin-top: -28px; }
#main-content .et_pb_post .entry-title,
#main-content .et_pb_post .post-meta { margin-left: 0; margin-right: 0; }

.single-post #main-content .et_pb_post .entry-title { font-size: 30px; line-height: 1.15; }
.single-post #main-content .et_pb_post .post-meta { margin-bottom: 20px; }

.single-post #main-content .et_pb_post .entry-content p,
.single-post #main-content .et_pb_post .entry-content li {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gb-fg);
}
.single-post #main-content .et_pb_post .entry-content > :last-child { margin-bottom: 0; }
.single-post #main-content .et_pb_post .entry-content h2,
.single-post #main-content .et_pb_post .entry-content h3 {
  margin: 32px 0 12px;
  color: var(--gb-fg);
  font-family: var(--gb-font-display);
  text-transform: uppercase;
  letter-spacing: .025em;
}

/* --- Comentarios --------------------------------------------------------- */

#main-content #comment-wrap {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  background: var(--gb-card);
}

/* O titulo saia cinza escuro sobre fundo escuro e ainda recuado para fora do
   cartao: o Divi da um padding-left proprio a ele. */
#main-content #comment-wrap #comments,
#main-content #comment-wrap #reply-title,
#main-content #respond .comment-reply-title {
  margin: 0 0 6px;
  padding: 0;
  color: var(--gb-fg);
  font-family: var(--gb-font-display);
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
}
#main-content #respond .comment-reply-title small { display: block; margin-top: 6px; }
#main-content #respond .comment-reply-title small a { color: var(--gb-red); }

#main-content #commentform .logged-in-as,
#main-content #commentform .comment-notes,
#main-content #commentform .logged-in-as a,
#main-content #commentform .comment-notes a {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gb-muted);
}
#main-content #commentform .logged-in-as a:hover { color: var(--gb-red); }

#main-content #commentform textarea,
#main-content #commentform input[type="text"],
#main-content #commentform input[type="email"],
#main-content #commentform input[type="url"] {
  width: 100%;
  background: var(--gb-surface);
  color: var(--gb-fg);
  border: 1px solid var(--gb-input);
  border-radius: var(--gb-radius-sm);
  padding: 14px 16px;
  font-size: 14px;
}
#main-content #commentform textarea::placeholder,
#main-content #commentform input::placeholder { color: var(--gb-muted); }
#main-content #commentform textarea:focus,
#main-content #commentform input:focus { outline: none; border-color: var(--gb-red-40); }

#main-content #commentform .form-submit { margin: 16px 0 0; text-align: left; }

/* Mesmo adversario do botao de avaliacao do produto: o botao grande do Divi,
   azul e contornado, em folha que entra depois desta. Os dois !important sao
   contra !important do lado de la. */
body #main-content #commentform .submit,
body #main-content #commentform input#submit,
body #main-content #commentform button#et_pb_submit {
  background: var(--gb-red);
  color: var(--gb-on-primary);
  border: 0 !important;
  border-radius: var(--gb-radius-sm);
  font-family: var(--gb-font-display);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 28px;
}
body #main-content #commentform .submit:hover,
body #main-content #commentform button#et_pb_submit:hover {
  background: var(--gb-red-dark);
  color: var(--gb-on-primary);
}

#main-content .comment-body,
#main-content .comment_postinfo,
#main-content .comment_area { color: var(--gb-fg); }
#main-content .comment_postinfo .comment_date { color: var(--gb-muted); }

@media (max-width: 767px) {
  #main-content .et_pb_post { padding: 20px 20px 22px; }
  #main-content .et_pb_post .entry-featured-image-url { margin: 0 -20px 20px; }
  #main-content .et_pb_post .entry-featured-image-url:first-child { margin-top: -20px; }
  #main-content #comment-wrap { padding: 20px; }
  .single-post #main-content .et_pb_post .entry-title { font-size: 24px; }
}