/* Design system do site IZZI School. Portado dos artboards em repaginacao/.
   Paleta e escala tipográfica vivem aqui como custom properties — nenhum hex
   deve ser digitado no admin nem repetido em template. */

:root {
  --c-purple: #7A0DF8;
  --c-purple-dark: #4B00A8;
  --c-purple-pale: #E5D7FE;
  --c-green: #14F51E;
  --c-dark: #0E0B13;
  --c-dark-2: #2C2537;
  --c-ink: #141118;
  --c-body: #3A3444;
  --c-muted: #6E6880;
  --c-muted-2: #8F87A0;
  --c-line: #CFC9DB;
  --c-line-2: #B9B3C6;
  --c-cream: #F0EFEB;
  --c-white-warm: #FAFAF8;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1xl: 96px;
  --fs-h1: 78px;   /* .r-h1 nos artboards (x5). 60px não existe no design. */
  --fs-h2: 42px;   /* .r-h2 nos artboards (x16). */
  --fs-h3: 24px;
  --fs-body: 17.5px;
  --fs-small: 14.5px;
  --fs-eyebrow: 12.5px;

  --sec-pad-x: 48px;
  --sec-max: 1240px;  /* largura de container mais repetida nos artboards (23x) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-cream);
  font-family: var(--font);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-purple); text-decoration: none; }
a:hover { color: var(--c-purple-dark); }
img { max-width: 100%; }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ---------- Layout ---------- */
.sec { padding: 0 var(--sec-pad-x); }
.sec-inner { max-width: var(--sec-max); margin: 0 auto; }

/* ---------- Tipografia ---------- */
.h-xl, .h-lg, .h-md { margin: 0; font-weight: 900; font-style: italic; text-wrap: pretty; }
.h-xl { font-size: var(--fs-h1xl); line-height: 0.92; letter-spacing: -2px; }
.h-lg { font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -1px; }
.h-md { font-size: var(--fs-h2); line-height: 1.12; }
.eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.lead { margin: 0; font-size: var(--fs-body); line-height: 1.75; color: var(--c-body); }

/* ---------- Botão skew (52 ocorrências nos artboards) ----------
   O <span> interno leva o skew contrário para o texto ficar reto. */
.btn-skew {
  display: inline-block;
  transform: skewX(-10deg);
  padding: 22px 38px;
  background: var(--c-green);
  color: var(--c-dark);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(14, 11, 19, 0.3);
}
.btn-skew > span { display: inline-block; transform: skewX(10deg); }
.btn-skew:hover { background: #fff; color: var(--c-dark); }
.btn-skew--sm { padding: 11px 20px; font-size: 12px; letter-spacing: 1.2px; box-shadow: none; }
/* Variante escura sobre fundo verde (faixa do Instagram e grade de reels). */
.btn-skew--dark { background: var(--c-dark); color: var(--c-green); box-shadow: none; }
.btn-skew--dark:hover { background: var(--c-purple); color: #fff; }

/* ---------- Navegação do header e do footer ----------
   `style-hover="color:#14F51E"` é o hover mais repetido dos artboards (104 de 142)
   e pertence justamente a estes links. */
.nav-link {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-link:hover { color: var(--c-green); }
.nav-link.is-active { color: var(--c-green); font-weight: 800; }

.burger-link { color: #fff; font-size: 22px; font-weight: 900; font-style: italic; }
.burger-link:hover { color: var(--c-green); }

/* Link verde sobre fundo roxo. Sem isto o `a:hover` global o levaria ao roxo escuro,
   que sobre #4B00A8 fica ilegível. */
.link-green { color: var(--c-green); }
.link-green:hover { color: #fff; }

.foot-link { color: #fff; font-size: 15px; }
.foot-link:hover { color: var(--c-green); }

/* ---------- Card de borda superior ---------- */
.card {
  background: #fff;
  border-top: 6px solid var(--c-green);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Carrossel de avaliações do Google ----------
   Também usado pela grade de reels: é a mesma linha de cabeçalho do artboard. */
.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rev-nav {
  width: 52px;
  height: 52px;
  border: 2px solid var(--c-dark);
  background: var(--c-cream);
  color: var(--c-ink);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font);
}
.rev-nav:hover { background: var(--c-green); }
.rev-nav--dark { background: var(--c-dark); color: #fff; }
.rev-nav--dark:hover { background: var(--c-purple); }

/* O carrossel move 100/perView % por clique (ver site.js): 3 cartões no desktop, 1 no mobile. */
.rev-card { flex: 0 0 calc(33.333% - 16px); min-width: 280px; }
.rev-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 900;
}

/* ---------- Temas dos planos (Plan.theme) ---------- */
.plan--LIGHT  { background: #fff;               color: var(--c-ink);  border-top-color: var(--c-purple); }
.plan--DARK   { background: var(--c-dark);      color: #fff;          border-top-color: var(--c-green); }
.plan--PURPLE { background: var(--c-purple);    color: #fff;          border-top-color: var(--c-green); }
.plan--LIGHT  .plan-sub { color: var(--c-muted); }
.plan--DARK   .plan-sub,
.plan--PURPLE .plan-sub { color: var(--c-purple-pale); }

/* Selo "Mais popular" pendurado na borda de cima do cartão. */
.plan-badge {
  position: absolute;
  top: -16px;
  right: 24px;
  padding: 7px 14px;
  background: var(--c-green);
  color: var(--c-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transform: skewX(-10deg);
}
.plan-badge > span { display: inline-block; transform: skewX(10deg); }

/* Lista de benefícios: o filete que a separa do preço muda com o tema. */
.plan-features { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid; padding-top: 20px; }
.plan--LIGHT  .plan-features { border-top-color: #E4E1D9; }
.plan--DARK   .plan-features,
.plan--PURPLE .plan-features { border-top-color: rgba(255, 255, 255, 0.25); }
/* O ✓ é a cor forte do cartão, não a do texto de apoio. */
.plan--LIGHT  .plan-features strong { color: var(--c-ink); }
.plan--DARK   .plan-features strong,
.plan--PURPLE .plan-features strong { color: #fff; }

/* Botão do cartão: verde que inverte para escuro (o hover padrão do .btn-skew vai a branco,
   que sobre o cartão claro sumiria). */
.btn-skew--hover-dark:hover { background: var(--c-dark); color: var(--c-green); }
/* Botão roxo da chamada de aulas em grupo. */
.btn-skew--purple { background: var(--c-purple); color: #fff; box-shadow: none; }
.btn-skew--purple:hover { background: var(--c-dark); color: #fff; }

/* ---------- Blog ---------- */
.post-title-link { color: var(--c-ink); }
.post-title-link:hover { color: var(--c-purple); }

/* Corpo do artigo. O artboard estiliza cada <p>/<h2> inline, mas aqui o HTML vem do
   CKEditor: a tipografia tem de morar na classe. As margens somam os `gap:22px` do
   artboard (h2 fica com 28px + 22px acima). */
.article-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-body);
}
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 22px; }
.article-body h2 {
  margin: 50px 0 22px;
  font-size: 31px;
  line-height: 1.15;
  font-weight: 900;
  font-style: italic;
  color: var(--c-ink);
  text-wrap: pretty;
}
.article-body h3 {
  margin: 40px 0 18px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  font-style: italic;
  color: var(--c-ink);
  text-wrap: pretty;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin-bottom: 10px; }
.article-body strong { color: var(--c-ink); }
.article-body a { font-weight: 700; border-bottom: 2px solid var(--c-green); }
.article-body img { height: auto; display: block; margin: 28px 0; }
/* A citação do artboard, na forma que o editor consegue produzir. */
.article-body blockquote {
  margin: 28px 0;
  padding: 44px 52px;
  background: var(--c-purple-dark);
  color: #fff;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 900;
  font-style: italic;
  text-wrap: pretty;
}
.article-body blockquote p { margin: 0; }

/* ---------- Forms públicos ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-body);
}
.field input, .field textarea {
  border: 1.5px solid #D8D4CC;
  background: var(--c-white-warm);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-ink);
  font-family: var(--font);
  outline: none;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--c-purple); }

/* Honeypot: fora da tela e fora do fluxo. `display:none` puro é o padrão que os bots
   mais conhecidos já sabem pular — daí o deslocamento. */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--c-green);
  color: var(--c-dark);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(14, 11, 19, 0.3);
}
.whatsapp-float:hover { background: var(--c-dark); color: var(--c-green); }

/* ---------- Âncoras responsivas (nomes vindos dos artboards) ---------- */
@media (max-width: 1140px) {
  .r-nav { display: none !important; }
  .r-burger { display: block !important; }
}

@media (max-width: 900px) {
  .r-head { padding: 14px 20px !important; }
  .r-grid, .r-grid3 { display: flex !important; flex-direction: column !important; }
  .r-h1xl, .h-xl { font-size: 76px !important; letter-spacing: -2px !important; }
  .r-h1, .h-lg { font-size: 44px !important; }
  .r-h1s { font-size: 30px !important; }
  .r-h2, .h-md { font-size: 29px !important; }
  /* Em coluna o .r-grid herda o `align-items:center` inline dos artboards, que desliga o
     stretch: a moldura de imagem só tem filhos absolutos, logo colapsaria para 0 de largura
     e a foto sumiria no mobile. */
  .r-img { height: 260px !important; width: 100% !important; }
  .r-sec, .sec { padding-left: 20px !important; padding-right: 20px !important; }
  .r-card { padding: 36px 26px !important; }
  .r-quote { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  /* site.js passa a 1 cartão por vez abaixo de 900px — o cartão tem de ocupar a faixa toda. */
  .rev-card { flex-basis: 100% !important; min-width: 0 !important; }
}

/* ---------- Slots de imagem ----------
   O `{% site_image %}` só aceita classe, não style: a moldura da seção define o tamanho
   e a imagem preenche. Qualificado por `img` para não afetar o placeholder abaixo. */
/* object-position acima do centro: as fotos dos slots são de pessoas, e num corte
   por `cover` o rosto quase sempre fica na metade de cima. Ancorar em 30% evita o
   enquadramento decapitado quando a moldura é mais larga que a imagem. */
img.slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ---------- Placeholder de slot de imagem vazio (só em DEBUG) ---------- */
.slot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  height: 100%;
  background: repeating-linear-gradient(45deg, #E5D7FE, #E5D7FE 12px, #F0EFEB 12px, #F0EFEB 24px);
  color: var(--c-purple-dark);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  padding: 16px;
}

/* ---------- Selos do rodapé (ReclameAQUI e Google) ---------- */
/* Lado a lado. A coluna do rodapé tem ~370px, então as duas caixas dividem o espaço
   em vez de exigir uma largura mínima — senão quebram para duas linhas. */
.selos {
  display: flex;
  gap: 12px;
  /* Sem isto o bloco estica para acompanhar a altura da coluna do endereço, e sobra
     espaço morto embaixo do texto dos selos. */
  align-self: start;
}
.selos > * { flex: 1 1 0; min-width: 0; }

.selo-box {
  border: 1px solid var(--c-dark-2);
  padding: 26px 12px;
  /* Empilhado: a coluna do rodapé dá ~95px por caixa, estreito demais para o selo
     e o texto lado a lado — o texto quebrava em duas linhas e a caixa esticava. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  text-decoration: none;
}
.selo-box p:first-child { font-size: 13px !important; line-height: 1.3; }
.selo-box p:last-child { font-size: 11.5px !important; }
a.selo-box:hover { border-color: var(--c-green); }

/* Os dois selos têm proporções bem diferentes: o do ReclameAQUI é largo (1.65) e o do
   Google é alto (0.67). Em vez de fixar altura — o que deixaria um deles minúsculo —
   cada um cresce até esbarrar no próprio limite: o largo na largura da caixa, o alto
   na altura máxima. Assim os dois ficam no maior tamanho que cabe. */
.selo-img {
  flex: none;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 112px;
  object-fit: contain;
}

/* ---------- Player de vídeo em fachada ---------- */
.video-facade {
  position: relative;
  display: block;
  cursor: pointer;
  background: var(--c-dark);
  overflow: hidden;
}
.video-facade:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 12px 32px rgba(14, 11, 19, 0.35);
  transition: transform .2s ease;
}
/* O triângulo do play, em CSS puro — sem ícone externo. */
.video-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid var(--c-dark);
}
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }

.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- `hidden` precisa vencer quem declara display ----------
   `.btn-skew` é `display:inline-block` e os fieldsets do teste são `display:flex` inline.
   Uma classe do autor vence o `[hidden]` da folha do navegador, e um style inline vence
   qualquer regra sem `!important` — ou seja, `el.hidden = true` no JS não esconderia nada.
   Esta linha é o que torna o passo a passo do teste possível sem reescrever os estilos. */
[hidden] { display: none !important; }