/* YOGA — base + cabeçalho + hero (elemento 4). Tokens em tokens.css. */
@font-face { font-family: "Playfair Display"; font-weight: 400 900; font-display: swap; src: url("fontes/playfair-display-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 100 900; font-display: swap; src: url("fontes/roboto-condensed-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("fontes/inter-latin-wght-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--text-base)/var(--line-normal) var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.container { width: min(calc(100% - 2 * var(--page-gutter)), var(--container-max)); margin-inline: auto; }

/* pular para o conteúdo */
.pular { position: absolute; left: var(--space-3); top: -80px; z-index: 60; display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4); background: var(--color-surface); color: var(--color-text); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; box-shadow: var(--shadow-card); }
.pular:focus { top: var(--space-3); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; border: 2px solid transparent; border-radius: var(--radius-pill); font: 600 var(--text-base)/1.2 var(--font-body); text-decoration: none; text-align: center; cursor: pointer; }
.btn--compacto { min-height: var(--touch-min); padding: 10px 22px; font-size: var(--text-sm); }
.btn--primario { background: var(--gradient-button); color: var(--color-text-on-primary); }
.btn--primario:hover { filter: brightness(1.08); box-shadow: var(--shadow-neon); }
.btn--primario:active { background: var(--button-active); filter: none; box-shadow: none; }
.btn--secundario { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-text); }
.btn--secundario:hover { background: var(--color-surface-light); box-shadow: var(--shadow-neon); }
.btn--secundario:active { background: var(--color-bg); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: filter var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .btn:active { transform: scale(.98); } }

/* cabeçalho: sobre a foto, ganha corpo ao rolar */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: linear-gradient(180deg, rgb(5 5 5 / .72), rgb(5 5 5 / 0)); }
.site-header.is-scrolled { background: rgb(5 5 5 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--color-border); }
@media (prefers-reduced-motion: no-preference) { .site-header { transition: background-color var(--transition-normal), box-shadow var(--transition-normal); } }
.navbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); width: min(calc(100% - 2 * var(--page-gutter)), var(--container-max)); min-height: 76px; margin-inline: auto; }
.navbar__esq { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--space-1); }
.navbar__esq a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-3); color: var(--color-text); font: 500 var(--text-sm)/1.4 var(--font-body); letter-spacing: .01em; text-decoration: none; border-radius: var(--radius-sm); }
.navbar__esq a:not(.btn):hover { color: var(--color-primary-light); }
.navbar__esq a[aria-current="true"]:not(.btn) { color: var(--color-primary-light); box-shadow: inset 0 -2px 0 var(--color-primary); border-radius: 0; }
.navbar__cta-mobile { display: none; }
.logo { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min); color: var(--color-text); text-decoration: none; }
.logo__icone { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 0 6px rgb(217 76 232 / .5)); }
.logo__texto { font: 600 22px/1 var(--font-display); letter-spacing: .08em; }
.navbar__dir { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.proto-tag { display: none; padding: 6px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text-muted); font: 500 var(--text-xs)/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.navbar__cta { display: none; }
.menu-botao { display: none; width: var(--touch-min); height: var(--touch-min); padding: 0; align-items: center; justify-content: center; border: 2px solid var(--color-border-strong); border-radius: var(--radius-pill); background: rgb(5 5 5 / .5); color: var(--color-text); cursor: pointer; }
.menu-botao svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-botao[aria-expanded="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }

/* celular: com JS o menu vira painel sob a barra; sem JS os links ficam em linha */
@media (max-width: 899.98px) {
  .navbar { grid-template-columns: 1fr auto 1fr; }
  .js .navbar__esq { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--page-gutter) var(--space-4); background: rgb(5 5 5 / .96); box-shadow: var(--shadow-card), 0 1px 0 var(--color-border); }
  .js .navbar__esq.is-open { display: flex; }
  .js .navbar__esq a:not(.btn) { padding: 0 var(--space-2); }
  .js .navbar__esq.is-open .navbar__cta-mobile { display: inline-flex; margin-top: var(--space-3); }
  .js .menu-botao { display: inline-flex; }
  .navbar__esq a:not(.btn) { font-size: var(--text-sm); }
}
@media (min-width: 900px) {
  .navbar__cta { display: inline-flex; }
  .proto-tag { display: inline-block; }
}

/* hero: foto de estúdio, palavra monumental sobre as pernas, botões embaixo */
.hero { --foto-topo: 5%; --foto-alt: 76%; position: relative; min-height: max(100vh, 760px); min-height: max(100svh, 760px); overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; justify-content: flex-end; }
/* a foto "se dissolve" nas quatro bordas (o fundo da foto é liso e escuro) */
.hero__foto { position: absolute; inset: var(--foto-topo) 0 auto 0; height: var(--foto-alt); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%); mask-composite: intersect; }
.hero__foto picture, .hero__foto img { display: block; width: 100%; height: 100%; }
.hero__foto img { object-fit: contain; object-position: 50% 0; }
/* degradê do design system (.05 no topo, .9 embaixo) sobre a área da foto e do chão */
.hero__sombra { position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; }
.hero__conteudo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--page-gutter) var(--space-8); }
.hero__titulo { margin: 0; font: 500 var(--hero-titulo)/.8 var(--font-display); letter-spacing: .02em; color: var(--color-text); text-shadow: 0 0 32px rgb(217 76 232 / .25); white-space: nowrap; }
.hero__tagline { margin: var(--space-4) 0 0; font: 700 var(--text-xl)/1.1 var(--font-heading); letter-spacing: -.02em; color: var(--color-text); }
.hero__apoio { margin: var(--space-2) 0 0; max-width: 44ch; font-size: var(--text-base); line-height: var(--line-normal); color: var(--color-text-muted); }
.hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 599.98px) {
  .hero { --foto-topo: 88px; --foto-alt: 56vh; min-height: max(100vh, 700px); min-height: max(100svh, 700px); }
  .hero__titulo { font-size: var(--hero-titulo-m); white-space: normal; }
  .hero__foto { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 82%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero__acoes { width: 100%; }
  .hero__acoes .btn { flex: 1 1 100%; }
}

/* seções provisórias (nenhum botão aponta para âncora vazia) */
.provisoria { padding-block: var(--section-space); border-top: 1px solid var(--color-border); background: var(--color-bg); }
.provisoria h2 { margin: 0 0 var(--space-2); font: 700 clamp(1.75rem, 3vw, 2.5rem)/var(--line-tight) var(--font-heading); letter-spacing: -.02em; }
.provisoria p { margin: 0; color: var(--color-text-muted); }
.rodape { padding-block: var(--space-8); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }

/* celular deitado (pouca altura): cabeçalho mais baixo */
@media (max-height: 480px) and (min-width: 600px) {
  html { scroll-padding-top: 72px; }
  .navbar { min-height: 60px; }
  .hero { --foto-topo: 60px; }
}

/* ===== Elemento 5 — introdução, modalidades, benefícios e grade semanal ===== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.secao { padding-block: var(--section-space); }
.secao__cab { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); }
.secao__sobre { margin: 0; font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-light); }
.secao__titulo { margin: 0; font: 700 clamp(1.75rem, 3vw, 2.5rem)/var(--line-tight) var(--font-heading); letter-spacing: -.02em; }
.secao__nota { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.intro { padding-block: var(--section-space); }
.intro__inner { text-align: center; }
.intro__texto { margin: 0 auto; max-width: 30em; font: 700 clamp(1.5rem, 3.4vw, 2.25rem)/1.2 var(--font-heading); letter-spacing: -.02em; color: var(--color-text); }

/* cartões de modalidade 3:4 */
.class-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.class-card { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-card); background: var(--color-secondary-dark); box-shadow: var(--shadow-card); }
.class-card__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.class-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-card); }
.class-card__content { display: flex; height: 100%; flex-direction: column; justify-content: space-between; padding: var(--space-4); color: var(--color-text); }
.class-card__duration { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: var(--radius-sm); background: rgb(5 5 5 / .65); font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; color: var(--color-text); }
.class-card__texto { display: grid; gap: var(--space-1); }
.class-card__title { margin: 0; font: 700 1.25rem/1.2 var(--font-heading); }
.class-card__description { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }
.class-card__nivel { margin: 0; font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; color: var(--color-text-muted); }
.class-card__link { position: static; display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--touch-min); margin-top: var(--space-1); color: var(--color-primary-light); font: 600 var(--text-sm)/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 4px; }
.class-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.class-card__link:focus-visible { outline: none; box-shadow: none; }
.class-card__link:focus-visible::after { outline: 2px solid var(--color-focus-photo); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-bg); }
.class-card:hover { box-shadow: var(--shadow-card), var(--shadow-neon); }
@media (prefers-reduced-motion: no-preference) { .class-card { transition: box-shadow var(--transition-normal); } }

/* benefícios: círculos magenta alternados com ilustrações neon */
.secao--beneficios { border-block: 1px solid var(--color-border); background: var(--color-surface); }
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .beneficios { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .beneficios { grid-template-columns: minmax(0, 1fr); } }
.benefit-item { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.benefit-item__icon { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; }
.benefit-item--cheio .benefit-item__icon { background: var(--color-primary); }
.benefit-item--neon .benefit-item__icon { background: var(--color-bg); border: 2px solid var(--color-primary); box-shadow: var(--shadow-neon); }
.benefit-item__glifo { display: block; width: 52px; height: 52px; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.benefit-item--cheio .benefit-item__glifo { background: var(--color-text-on-primary); }
.benefit-item--neon .benefit-item__glifo { background: var(--color-primary-light); }
.benefit-item__title { margin: var(--space-2) 0 0; font: 700 1.125rem/1.2 var(--font-heading); }
.benefit-item__texto { margin: 0; max-width: 22ch; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }

/* grade semanal */
.grade { display: grid; gap: var(--space-4); }
.grade[hidden], .grade-est[hidden] { display: none; }
.grade__filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-filtro { min-height: var(--touch-min); padding: 0 var(--space-4); border: 2px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.chip-filtro:hover { border-color: var(--color-primary); }
.chip-filtro[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.grade__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.dia-btn { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 60px; padding: var(--space-2) 0; border: 2px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.dia-btn__a { font: 500 var(--text-xs)/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.dia-btn__b { font: 700 1.25rem/1 var(--font-heading); }
.dia-btn:hover { border-color: var(--color-primary); }
.dia-btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.grade__status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.grade__paineis { display: grid; gap: var(--space-4); }
.dia[hidden] { display: none; }
.dia__titulo { margin: 0 0 var(--space-3); font: 700 1.125rem/1.2 var(--font-heading); }
.dia__curto { display: none; }
.dia__lista { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dia__lista li[hidden] { display: none; }
.dia__vazio { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.aula { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "hora nome vagas" "hora meta vagas"; align-items: center; column-gap: var(--space-3); row-gap: 2px; width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; font: inherit; }
.aula__hora { grid-area: hora; font: 700 1.25rem/1 var(--font-heading); }
.aula__nome { grid-area: nome; font: 600 var(--text-base)/1.2 var(--font-body); }
.aula__meta { grid-area: meta; font-size: var(--text-xs); line-height: 1.3; color: var(--color-text-muted); }
.aula__vagas { grid-area: vagas; justify-self: end; font: 600 var(--text-sm)/1.2 var(--font-body); color: var(--color-primary-light); text-align: right; }
.aula__vagas--poucas { color: var(--color-warning); }
.aula__vagas--off { color: var(--color-text-muted); }
.aula:hover:not(.aula--off) { background: var(--color-surface-light); border-color: var(--color-primary); box-shadow: var(--shadow-neon); }
.aula--off { border-style: dashed; cursor: not-allowed; }
.aula--off .aula__hora, .aula--off .aula__nome { color: var(--color-text-muted); }
@media (prefers-reduced-motion: no-preference) { .aula, .dia-btn, .chip-filtro { transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); } }
@media (min-width: 1100px) {
  .grade__dias { display: none; }
  .grade__paineis { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
  .dia__longo { display: none; }
  .dia__curto { display: inline; }
  .aula { grid-template-columns: 1fr; grid-template-areas: "hora" "nome" "meta" "vagas"; row-gap: 4px; padding: var(--space-3); }
  .aula__vagas { justify-self: start; text-align: left; margin-top: var(--space-1); }
}
.grade-est dl { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; }
.grade-est__dia { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.grade-est dt { font-weight: 600; }
.grade-est dd { margin: 0; color: var(--color-text-muted); }

/* ===== Elemento 6 — pedido de aula experimental ===== */
.secao--exp { border-top: 1px solid var(--color-border); background: var(--color-bg); }
.pedido { display: grid; gap: var(--space-6); align-items: start; }
.pedido[hidden] { display: none; }
.pedido__passos { display: grid; gap: var(--space-4); min-width: 0; }
.pedido__erros { padding: var(--space-4) var(--space-6); background: var(--color-surface); border: 2px solid var(--color-error); border-radius: var(--radius-md); color: var(--color-text); }
.pedido__erros[hidden] { display: none; }
.pedido__erros p { margin: 0 0 var(--space-2); color: var(--color-error); }
.pedido__erros ul { margin: 0; padding-left: 1.2em; }
.pedido__erros a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--color-error); font-weight: 600; }

.passo { margin: 0; padding: var(--space-6); min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.passo__titulo { display: flex; align-items: center; gap: var(--space-3); float: left; width: 100%; padding: 0; margin: 0 0 var(--space-4); font: 700 1.25rem/1.2 var(--font-heading); letter-spacing: -.01em; color: var(--color-text); }
.passo__titulo + * { clear: both; }
.passo__n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); font: 700 1rem/1 var(--font-heading); }

/* campos */
.campos { display: grid; gap: var(--space-4); }
.campo { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.campo + .campo, .campos + .campo { margin-top: var(--space-4); }
.campo label, .campo__legenda { padding: 0; font: 600 var(--text-sm)/1.3 var(--font-body); color: var(--color-text); }
.campo__opc { font-weight: 400; color: var(--color-text-muted); }
.campo input[type="text"], .campo input[type="tel"], .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-light); color: var(--color-text); font: 400 var(--text-base)/1.5 var(--font-body); }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--color-primary-light) 50%), linear-gradient(135deg, var(--color-primary-light) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.campo select option:disabled { color: #8a808c; }
.campo textarea { resize: vertical; }
.campo input::placeholder { color: var(--color-text-muted); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--color-secondary); }
.campo [aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.campo__dica { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }
.campo__dica a { color: var(--color-primary-light); }
.campo__erro { margin: 0; font: 600 var(--text-sm)/1.4 var(--font-body); color: var(--color-error); }
.campo__erro[hidden] { display: none; }
.campo__erro::before { content: "Atenção: "; }

/* experiência (rádios em pílulas) */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.opcao { position: relative; display: block; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.opcao__corpo { display: flex; align-items: center; justify-content: center; position: relative; min-height: var(--touch-min); padding: 0 var(--space-4); border: 2px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-light); color: var(--color-text); font: 600 var(--text-sm)/1.2 var(--font-body); text-align: center; }
.opcao:hover .opcao__corpo { border-color: var(--color-primary); }
.opcao input:checked + .opcao__corpo { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); padding-left: calc(var(--space-4) + 12px); }
.opcao input:checked + .opcao__corpo::before { content: "✓" / ""; position: absolute; left: 14px; font-size: .8rem; line-height: 1; }
.opcao input:focus-visible + .opcao__corpo { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.opcao input:focus-visible { outline: none; }

/* consentimento */
.aceite { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-2) 0; font: 400 var(--text-sm)/1.45 var(--font-body); color: var(--color-text); cursor: pointer; }
.aceite input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

/* resumo */
.pedido__resumo { padding: var(--space-6); border: 1px solid var(--color-primary); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card), var(--shadow-neon); }
.pedido__resumo-titulo { margin: 0 0 var(--space-4); font: 700 1.25rem/1.2 var(--font-heading); }
.resumo { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }
.resumo div { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.resumo dt { font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.resumo dd { margin: 0; font: 600 var(--text-base)/1.35 var(--font-body); overflow-wrap: anywhere; }
.is-mudou { border-radius: var(--radius-sm); }
.pedido__enviar { width: 100%; }
.pedido__nota { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .pedido { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); }
  .pedido__resumo { position: sticky; top: 108px; }
  .pedido__erros { grid-column: 1 / -1; }
}
@media (max-height: 480px) { .pedido__resumo { position: static; } }

/* confirmação (dialog nativo) */
.conf { width: min(calc(100% - 32px), 480px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--color-primary); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card), var(--shadow-neon-strong); overflow: auto; }
.conf::backdrop { background: rgb(5 5 5 / .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.conf__corpo { padding: var(--space-8) var(--space-6) var(--space-6); }
.conf__icone { display: block; width: 48px; height: 48px; margin-bottom: var(--space-3); fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(217 76 232 / .5)); }
.conf__sobre { margin: 0 0 var(--space-1); font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-light); }
.conf__titulo { margin: 0; font: 700 1.75rem/1.1 var(--font-heading); letter-spacing: -.02em; }
.conf__titulo:focus-visible { outline: none; }
.conf__texto { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.conf__codigo { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-light); font-size: var(--text-sm); }
.conf__codigo strong { font-size: 1.125rem; letter-spacing: .06em; color: var(--color-primary-light); }
.resumo--lista { margin-bottom: 0; }
.conf__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.campos .campo + .campo { margin-top: 0; }
@media (min-width: 600px) { .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campos { align-items: start; }
.campo { align-content: start; }
.campo .aceite { font-weight: 400; }
.campo__dica a { display: inline-flex; align-items: center; min-height: var(--touch-min); }

/* ===== Elemento 7 — círculo de respiração ===== */
.secao--respire { border-block: 1px solid var(--color-border); background: radial-gradient(60% 80% at 50% 50%, rgb(142 22 143 / .22), transparent 70%), var(--color-bg); }
.secao__cab--centro { justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; }
.secao__nota--centro { text-align: center; }
.respire__inner { display: grid; justify-items: center; }
.respiro { display: grid; justify-items: center; gap: var(--space-6); }
.respiro[hidden], #respiro-sem-js[hidden] { display: none; }
.respiro__palco { position: relative; display: grid; place-items: center; width: min(78vw, 320px); aspect-ratio: 1; }
.respiro__anel { position: absolute; inset: 0; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.respiro__disco { position: absolute; inset: 0; border: 2px solid var(--color-primary-light); border-radius: 50%; background: radial-gradient(circle, rgb(217 76 232 / .28) 0%, rgb(142 22 143 / .55) 62%, rgb(217 76 232 / .85) 100%); box-shadow: var(--shadow-neon), inset 0 0 28px rgb(217 76 232 / .35); transform: scale(.82); }
.respiro__centro { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.respiro__texto { font: 500 clamp(1.75rem, 6vw, 2.5rem)/1 var(--font-display); letter-spacing: .02em; color: var(--color-text); }
.respiro__ciclo { font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.respiro__botao { min-width: 12rem; }

/* movimento: só com a pessoa apertando "Começar" e sem "reduzir movimento".
   Parado/reduzido: o círculo fica quieto (escala fixa) e só os textos mudam. */
@media (prefers-reduced-motion: no-preference) {
  .respiro__disco { transition: transform 600ms ease-in-out, box-shadow 600ms ease-in-out; }
  .respiro[data-fase="parado"] .respiro__disco { transform: scale(.6); }
  .respiro[data-fase="inspire"] .respiro__disco { transform: scale(1); box-shadow: var(--shadow-neon-strong), inset 0 0 40px rgb(217 76 232 / .5); transition: transform 4s ease-in-out, box-shadow 4s ease-in-out; }
  .respiro[data-fase="segure"] .respiro__disco { transform: scale(1); box-shadow: var(--shadow-neon-strong), inset 0 0 40px rgb(217 76 232 / .5); }
  .respiro[data-fase="expire"] .respiro__disco { transform: scale(.6); transition: transform 6s ease-in-out, box-shadow 6s ease-in-out; }
}

/* ===== Elemento 8 — microanimações e estados ===== */
/* estados que valem com ou sem movimento */
.chip-filtro:active, .dia-btn:active { background: var(--color-surface-light); border-color: var(--color-primary-light); }
.chip-filtro[aria-pressed="true"]:active, .dia-btn[aria-pressed="true"]:active { background: var(--button-active); border-color: var(--button-active); color: var(--color-text-on-primary); }
.aula:active:not(.aula--off) { background: var(--color-bg); border-color: var(--color-primary-light); box-shadow: none; }
.opcao:active .opcao__corpo { background: var(--color-surface); border-color: var(--color-primary-light); }
.opcao input:checked:active + .opcao__corpo { background: var(--button-active); border-color: var(--button-active); }
.aceite:active { color: var(--color-primary-light); }
.logo:hover .logo__icone { filter: drop-shadow(0 0 10px rgb(217 76 232 / .9)); }
.is-mudou { border-radius: var(--radius-sm); }

/* movimento: tudo aqui some com "reduzir movimento" */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sobe { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  @keyframes assenta { from { scale: 1.06; } to { scale: 1; } }
  @keyframes desce-barra { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes titulo { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

  /* entrada do hero (CSS puro: não depende de JavaScript) */
  .site-header .navbar { animation: desce-barra .8s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .hero__foto img { animation: assenta 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__foto { animation: aparece 1.2s ease .1s both; }
  .hero__titulo { animation: titulo 1.2s cubic-bezier(.2, .8, .2, 1) .25s both; }
  .hero__tagline { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) .6s both; }
  .hero__apoio { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) .75s both; }
  .hero__acoes { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) .9s both; }

  /* revelação ao rolar (o JS liga "reveal-ok"; sem ele nada fica escondido). Transição só no estado visível. */
  .reveal-ok .reveal { opacity: 0; translate: 0 22px; }
  .reveal-ok .reveal.is-visible { opacity: 1; translate: none; transition: opacity .7s ease calc(var(--i, 0) * 90ms), translate .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms), box-shadow var(--transition-normal); }

  /* cartões de modalidade: a foto aproxima no hover */
  .class-card__image { transition: scale .7s cubic-bezier(.2, .7, .2, 1); }
  .class-card:hover .class-card__image { scale: 1.05; }
  .logo__icone { transition: filter var(--transition-normal); }

  /* grade: quem volta a aparecer entra (filtro) e o painel do dia que passa a valer */
  @keyframes entra { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
  .dia.is-entra, .dia__lista li.is-entra { animation: entra .4s cubic-bezier(.2, .8, .2, 1) both; }

  /* formulário: ✓ das opções, destaque no resumo, erros */
  @keyframes pop-check { from { scale: .3; opacity: 0; } to { scale: 1; opacity: 1; } }
  .opcao input:checked + .opcao__corpo::before { animation: pop-check 180ms cubic-bezier(.2, .8, .2, 1); }
  @keyframes destaque { from { background: rgb(240 181 244 / .22); } to { background: transparent; } }
  .is-mudou { animation: destaque .8s ease-out; }
  @keyframes desce { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
  .pedido__erros:not([hidden]), .campo__erro:not([hidden]) { animation: desce .22s ease-out; }

  /* confirmação */
  @keyframes janela-entra { from { opacity: 0; translate: 0 14px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }
  .conf[open] { animation: janela-entra .28s cubic-bezier(.2, .8, .2, 1); }
  .conf[open]::backdrop { animation: fundo-entra .22s ease; }
  .conf__icone circle, .conf__icone path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: traco .7s ease .15s forwards; }
  @keyframes traco { to { stroke-dashoffset: 0; } }
}

/* ===== Elemento 9 — contato, rodapé e refino do celular ===== */
.contato { border-top: 1px solid var(--color-border); background: radial-gradient(70% 90% at 50% 0%, rgb(142 22 143 / .16), transparent 70%), var(--color-bg); scroll-margin-top: 80px; }
.contato__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 900px) { .contato__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); } }
.contato__bloco { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--color-primary); }
.contato__bloco h3 { margin: 0; font: 700 1.25rem/1.2 var(--font-heading); letter-spacing: -.01em; }
.contato__bloco p, .contato__bloco address { margin: 0; font-style: normal; }
.contato__nota { font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }
.contato__nota a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--color-primary-light); }
.contato__horarios { display: grid; gap: var(--space-2); margin: 0; }
.contato__horarios > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.contato__horarios dt { color: var(--color-text-muted); }
.contato__horarios dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.contato__rotulo { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.contato__fone { font: 700 1.375rem/1.3 var(--font-heading); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.contato .btn { justify-self: start; margin-top: var(--space-1); }

.rodape { padding-block: var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted); }
.rodape__inner { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .rodape__inner { grid-template-columns: auto 1fr auto; gap: var(--space-8); } }
.rodape__logo { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min); color: var(--color-text); text-decoration: none; }
.rodape__logo img { width: 36px; height: 36px; filter: drop-shadow(0 0 6px rgb(217 76 232 / .5)); }
.rodape__logo span { font: 600 22px/1 var(--font-display); letter-spacing: .08em; }
.rodape__aviso { margin: 0; }
.rodape__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.rodape__nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-2); color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; border-radius: var(--radius-sm); }
.rodape__nav a:hover { color: var(--color-primary-light); }
@media (prefers-reduced-motion: no-preference) { .rodape__nav a { transition: color var(--transition-fast); } }

/* celular deitado (pouca altura): cabeçalho mais baixo */
@media (max-height: 480px) and (min-width: 600px) {
  .contato { scroll-margin-top: 72px; }
}

/* ===== Landing page: um único caminho (aula experimental), horários fixos e dúvidas ===== */
.hero__pontos { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text); }
.hero__pontos li::before { content: "✦"; margin-right: var(--space-2); color: var(--color-primary-light); }
.intro__objetivo { margin: var(--space-6) auto 0; max-width: 40rem; font-size: var(--text-sm); line-height: var(--line-normal); color: var(--color-text-muted); }
.intro__objetivo b { color: var(--color-text); }
.grade-est { max-width: 52rem; }
.grade-est dl { margin-top: 0; }
.pedido--curto { max-width: 40rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.pedido--curto .pedido__erros { grid-column: auto; }
.duvidas { max-width: 46rem; border-top: 1px solid var(--color-border); }
.duvidas details { border-bottom: 1px solid var(--color-border); }
.duvidas summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--touch-min); padding-block: var(--space-4); font: 600 var(--text-base)/1.3 var(--font-body); cursor: pointer; list-style: none; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; flex: none; font-size: var(--text-xl); line-height: 1; color: var(--color-primary-light); }
.duvidas details[open] summary::after { content: "−"; }
.duvidas details p { margin: 0 0 var(--space-4); max-width: 40rem; color: var(--color-text-muted); line-height: var(--line-normal); }
.duvidas__cta { margin: var(--space-8) 0 0; }
