/* =====================================================================
   LP Instituto Acreditando — versão de teste
   Paleta tirada do material real do Drive (banner roll-up, A4 e feed das
   aulas; logo do Instituto). Trocar a identidade = trocar estas variáveis.
   Contraste conferido (WCAG AA): ver 11-dev-ux-versao-de-teste.md
   ===================================================================== */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format('woff2'); }

:root {
  --azul-noite: #173142;      /* fundo do banner, do A4 e do feed */
  --azul-noite-2: #0F2533;    /* variação mais escura (rodapé, faixas) */
  --laranja: #F5A506;         /* logo do Instituto (fim do degradê) */
  --laranja-forte: #F39501;   /* logo do Instituto (início do degradê) */
  --laranja-texto: #9A5600;   /* laranja escurecido: único laranja permitido como TEXTO em fundo claro */
  --creme: #F7F4EE;           /* fundo claro das seções */
  --branco: #FFFFFF;
  --texto: #14232E;
  --texto-suave: #4A5560;
  --texto-claro: #C8D3DB;     /* texto secundário em fundo escuro */
  --verde-whatsapp: #1A7F3C;
  --vermelho-erro: #B3261E;
  --raio: 16px;
  --barra-altura: 64px;
  --largura: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
/* "hidden" sempre vence qualquer display (a armadilha do overlay da LP2 foi display:flex ignorando hidden) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-altura) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 18px; line-height: 1.6; color: var(--texto); background: var(--creme); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
address { font-style: normal; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dentro { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }

/* Foco bem visível nos dois fundos: anel branco + anel escuro */
:focus-visible { outline: 3px solid var(--branco); outline-offset: 2px; box-shadow: 0 0 0 6px var(--texto); border-radius: 6px; }
main:focus { outline: none; }

.pular { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--laranja); color: var(--azul-noite); padding: 12px 20px; font-weight: 700; border-radius: 8px; text-decoration: none; }
.pular:focus { top: 12px; }

.faixa-teste { background: #FFE9A8; color: var(--texto); text-align: center; font-size: 16px; font-weight: 600; padding: 4px 16px; }

/* ---------- Barra fixa com "abas" ---------- */
.barra { position: sticky; top: 0; z-index: 50; background: var(--azul-noite); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.barra__dentro { max-width: var(--largura); margin: 0 auto; padding: 0 12px; height: var(--barra-altura); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.barra__logo { display: flex; align-items: center; min-height: 48px; min-width: 48px; border-radius: 8px; }
.barra__logo-cheio { display: none; width: 168px; height: auto; }
.barra__logo-simbolo { width: 44px; height: auto; }
.abas { display: flex; gap: 6px; }
.aba { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 14px; color: var(--branco); text-decoration: none; font-weight: 600; font-size: 17px; border-radius: 999px; border-bottom: 3px solid transparent; }
.aba:hover { background: rgba(255,255,255,.08); }
.aba[aria-current="page"], .aba[aria-current="true"] { background: rgba(255,255,255,.14); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--laranja); }
.aba--loja { background: var(--laranja); color: var(--azul-noite); padding: 0 20px; }
.aba--loja:hover { background: var(--laranja-forte); }
.aba--loja[aria-current="page"], .aba--loja[aria-current="true"] { background: var(--laranja); text-decoration-color: var(--azul-noite); box-shadow: 0 0 0 3px var(--azul-noite), 0 0 0 5px var(--laranja); }
.aba__longo { display: none; }
@media (min-width: 760px) {
  .barra__logo-cheio { display: block; }
  .barra__logo-simbolo { display: none; }
  .aba__curto { display: none; }
  .aba__longo { display: inline; }
  .abas { gap: 10px; }
}

/* ---------- Botões (alvo mínimo 48 px; principais 56 px) ---------- */
.botoes { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 26px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 18px; text-decoration: none; text-align: center; cursor: pointer; border: 2px solid transparent; line-height: 1.25; }
.btn--acao { background: var(--laranja); color: var(--azul-noite); }
.btn--acao:hover { background: var(--laranja-forte); }
.btn--contorno { background: transparent; color: var(--branco); border-color: var(--branco); }
.btn--contorno:hover { background: rgba(255,255,255,.1); }
.btn--contorno-escuro { background: transparent; color: var(--texto); border-color: var(--texto); }
.btn--escuro { background: var(--azul-noite); color: var(--branco); }
.btn--whatsapp { background: var(--verde-whatsapp); color: var(--branco); }
.btn--whatsapp:hover { background: #156832; }
.btn--largo { width: 100%; }
/* CTA principal do topo (29/10, vídeo da Izadira): bem maior e mais chamativo; "Conheça o Instituto" fica secundário */
.btn--grande { width: 100%; min-height: 72px; padding: 16px 30px; font-size: 22px; border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(245,165,6,.28), 0 14px 30px -10px rgba(245,165,6,.65); }
.btn--grande svg { flex: none; }
.btn--grande:hover { box-shadow: 0 0 0 6px rgba(245,165,6,.38), 0 16px 34px -10px rgba(245,165,6,.75); }
.btn--secundario { min-height: 52px; font-size: 17px; font-weight: 600; padding: 10px 22px; border-width: 2px; border-color: rgba(255,255,255,.7); }
@media (min-width: 560px) { .btn--grande { font-size: 24px; min-height: 80px; padding: 18px 40px; white-space: nowrap; } }
/* Coluna do texto do topo mais estreita no computador: letra um pouco menor para o botão caber numa linha só */
@media (min-width: 960px) { .btn--grande { font-size: 22px; padding: 18px 30px; } }
.btn--pequeno { min-height: 48px; }
.btn--reservado { background: transparent; color: var(--laranja); border: 2px dashed var(--laranja); cursor: default; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: wait; }
@media (min-width: 560px) { .botoes { flex-direction: row; flex-wrap: wrap; } }
.hero .botoes { align-items: flex-start; }
@media (min-width: 560px) { .hero .botoes { flex-direction: column; } .hero .btn--grande { width: auto; } }

/* ---------- Hero ---------- */
.hero { background: var(--azul-noite); color: var(--branco); display: grid; }
.hero__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__texto { padding: 28px 16px 36px; max-width: 640px; }
.sobrelinha { text-transform: uppercase; letter-spacing: .06em; font-size: 16px; font-weight: 600; color: var(--laranja); margin-bottom: .6em; }
.sobrelinha--escura { color: var(--laranja-texto); }
.hero h1 { color: var(--branco); }
.hero__apoio { font-size: 20px; color: var(--texto-claro); }
.selo { display: flex; gap: 12px; align-items: flex-start; background: var(--azul-noite-2); border-left: 4px solid var(--laranja); padding: 14px 16px; border-radius: 8px; font-weight: 600; margin: 0; }
.selo svg { color: var(--laranja); flex: none; }
@media (min-width: 960px) {
  .hero { grid-template-columns: 1fr 1fr; grid-template-areas: "texto foto"; min-height: 560px; }
  .hero__foto { grid-area: foto; position: relative; }
  .hero__foto img { height: 100%; aspect-ratio: auto; }
  .hero__foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--azul-noite) 0%, rgba(23,49,66,0) 35%); pointer-events: none; }
  .hero__texto { grid-area: texto; align-self: center; padding: 48px 32px 48px max(16px, calc((100vw - var(--largura)) / 2 + 16px)); max-width: none; }
}

/* ---------- Vitrine curta do topo: saiu em 29/10 (pipeline 27) — a loja completa vem logo abaixo do topo ---------- */

/* ---------- Abas no menu (29/10, pipeline 27) ----------
   O app.js põe .abas-ligadas no <html> e "hidden" nos painéis das outras abas.
   Sem JavaScript nada disso acontece: todas as seções aparecem em sequência e a barra "Voltar para a loja" fica escondida. */
.voltar-loja { display: none; }
.abas-ligadas .voltar-loja { display: block; background: var(--azul-noite-2); color: var(--texto-claro); padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); }
.voltar-loja .dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.voltar-loja__btn span { font-size: 22px; line-height: 1; }
.voltar-loja__onde { font-size: 16px; font-weight: 600; }
/* Título que recebe o foco ao trocar de aba: sem anel de foco (o foco não veio do teclado numa coisa clicável) */
[data-painel] h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* ---------- Seções ---------- */
.secao { padding: 56px 0; }
.secao--clara { background: var(--creme); color: var(--texto); }
.secao--escura { background: var(--azul-noite); color: var(--branco); }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
.destaque { font-size: 20px; max-width: 760px; }
.secao--escura .destaque { color: var(--texto-claro); }
.subtitulo { margin-top: 40px; font-size: 1.4rem; }

/* Linha do tempo */
.linha-tempo { border-left: 4px solid var(--laranja); margin-left: 8px; padding-left: 0; max-width: 820px; }
.linha-tempo li { position: relative; padding: 0 0 22px 28px; }
.linha-tempo li::before { content: ""; position: absolute; left: -12px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--laranja); border: 4px solid var(--creme); }
.linha-tempo__ano { display: inline-block; font-weight: 700; font-size: 20px; color: var(--laranja-texto); margin-bottom: 4px; }
.linha-tempo p { margin: 0; }

/* Frentes */
.frentes { display: grid; gap: 16px; grid-template-columns: 1fr; }
.frente { background: var(--branco); border-radius: var(--raio); padding: 22px; box-shadow: 0 1px 3px rgba(20,35,46,.12); }
.frente__icone { width: 48px; height: 48px; color: var(--laranja-texto); margin-bottom: 10px; }
.frente h4 { margin-bottom: .3em; }
.frente p { margin: 0; color: var(--texto-suave); }
.tudo-gratis { font-size: 24px; font-weight: 700; margin-top: 24px; color: var(--azul-noite); }
@media (min-width: 640px) { .frentes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .frentes { grid-template-columns: repeat(4, 1fr); } }

/* Foto dentro das seções "Conheça o Instituto" e "Aulas coletivas" (pipeline 20, B.4/B.5) */
.foto-secao { margin: 24px 0 8px; max-width: 760px; }
.foto-secao img { width: 100%; height: auto; border-radius: var(--raio); box-shadow: 0 1px 3px rgba(20,35,46,.14); }
.foto-secao--escura { margin: 0 0 28px; }

/* Impacto */
.impacto { display: grid; gap: 32px; }
.barras { margin: 0; }
.barras__legenda { font-weight: 600; margin-bottom: 12px; color: var(--texto-claro); }
.barras__tabela { width: 100%; border-collapse: collapse; }
.barras__tabela th { text-align: left; font-weight: 700; width: 64px; padding: 10px 8px 10px 0; vertical-align: middle; }
.barras__tabela td { padding: 10px 0; display: flex; align-items: center; gap: 12px; }
.barra-h { display: block; height: 28px; border-radius: 0 8px 8px 0; background: var(--laranja); width: calc(var(--v) / 1459 * 72%); min-width: 12px; }
.barras__numero { font-weight: 700; font-size: 20px; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.numeros li { background: var(--azul-noite-2); border-radius: var(--raio); padding: 18px; text-align: center; }
.numeros strong { display: block; font-size: clamp(1.8rem, 6vw, 2.4rem); color: var(--laranja); line-height: 1.1; }
.numeros span { display: block; font-size: 16px; color: var(--texto-claro); text-wrap: balance; }
.nota-impacto { margin-top: 28px; color: var(--texto-claro); max-width: 820px; }
@media (min-width: 900px) { .impacto { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ---------- Galeria (pipeline 24): mosaico por grupo + fundo com textura azul/amarelo ----------
   Fundo: creme da página + grão azulado + retícula de pontos azuis (textura de impresso),
   uma mancha amarela hachurada no canto de cima e curvas de nível azuis no canto de baixo.
   Tudo SVG/CSS inline, sem imagem. Os textos ficam sobre o creme (contraste AA). */
.secao--galeria { position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--creme);
  background-image: radial-gradient(rgba(23,49,66,.11) 1.1px, transparent 1.6px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .19 0 0 0 0 .26 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 18px 18px, 160px 160px; }
.secao--galeria::before, .secao--galeria::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
.secao--galeria::before { width: 190px; height: 190px; top: -70px; right: -80px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpattern id='t' width='7' height='7' patternUnits='userSpaceOnUse' patternTransform='rotate(38)'%3E%3Crect width='7' height='7' fill='%23F5A506'/%3E%3Cpath d='M0 0v7' stroke='%23F39501' stroke-width='2.6'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23t)' transform='translate(100 100)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3C/svg%3E"); transform: rotate(-12deg); }
.secao--galeria::after { width: 360px; height: 360px; bottom: -150px; left: -160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23173142' stroke-width='1.6' transform='translate(100 100) rotate(140)'%3E%3Cpath transform='scale(1.2)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3Cpath transform='scale(1)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3Cpath transform='scale(.82)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3Cpath transform='scale(.64)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3Cpath transform='scale(.46)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3Cpath transform='scale(.28)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3C/g%3E%3C/svg%3E"); opacity: .5; }
@media (min-width: 900px) {
  /* mancha azul pontilhada na margem direita, entre Musicalização e Aulas */
  .secao--galeria { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpattern id='p' width='6' height='6' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='3' cy='3' r='1.7' fill='%23173142'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23p)' transform='translate(100 100) rotate(70)' d='M44.7-61.2C57.1-52.2 66-38.6 71.4-23.5S78.6 8.2 73.2 22 55.1 46.8 41.2 55.9 12.2 72.2-3.9 77.5-37.1 86.4-48.6 78.7-66 52.2-70.6 34.5-78.4.2-74.3-14.3-58.8-41.2-45.6-50.2-17.3-64.8-.9-63.6 32.3-70.2 44.7-61.2Z'/%3E%3C/svg%3E"), radial-gradient(rgba(23,49,66,.11) 1.1px, transparent 1.6px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .19 0 0 0 0 .26 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 380px 380px, 18px 18px, 160px 160px; background-repeat: no-repeat, repeat, repeat;
    background-position: right -190px top 52%, 0 0, 0 0; }
  .secao--galeria::before { width: 420px; height: 420px; top: -150px; right: -130px; }
  .secao--galeria::after { width: 620px; height: 620px; bottom: -220px; left: -240px; }
}
.dica-galeria { color: var(--texto-suave); }
.secao--galeria .subtitulo { display: flex; align-items: center; gap: 12px; margin: 44px 0 14px; }
.secao--galeria .subtitulo::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 4px rgba(245,165,6,.28); }

/* Mosaico: cada grupo tem o seu desenho (grid-template-areas), na mesma ordem do HTML = ordem do teclado */
.mosaico { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(112px, 32vw, 150px); }
.mosaico li { min-width: 0; }
.m-a { grid-area: a; } .m-b { grid-area: b; } .m-c { grid-area: c; } .m-d { grid-area: d; } .m-e { grid-area: e; } .m-f { grid-area: f; }
.mosaico--arraia { grid-template-areas: "a a" "a a" "b c" "d c" "e e"; }
.mosaico--musica { grid-template-areas: "a a" "b c" "b d" "e f" "e f"; }
.mosaico--aulas  { grid-template-areas: "a a" "a a" "b c" "b d" "e f"; }
.mosaico .foto { position: relative; display: block; height: 100%; border-radius: 10px; overflow: hidden; background: var(--azul-noite); cursor: zoom-in; }
.mosaico .m-a .foto { border-radius: 18px; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s; }
/* Selo "ampliar": aparece no passar do mouse e no foco do teclado */
.mosaico .foto::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173142' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 2px 8px rgba(15,37,51,.35);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease-out, transform .2s ease-out; }
.mosaico .foto:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .mosaico .foto:hover img { transform: scale(1.045); filter: saturate(1.08); }
  .mosaico .foto:hover::after { opacity: 1; transform: none; }
}
@media (min-width: 700px) {
  .mosaico { gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto;
    grid-template-rows: repeat(2, clamp(110px, 12vw, 175px)) clamp(160px, 16vw, 235px); }
  /* 28/10 (Filipe): a foto do palco (b) estreitou para o painel "Arraiá do Acreds" (c) aparecer inteiro. */
  .mosaico--arraia { grid-template-areas: "a a b b c c" "a a b b c c" "d d e e e e"; }
  .mosaico--musica { grid-template-areas: "a a a b b c" "a a a b b c" "d d e e f f"; }
  .mosaico--aulas  { grid-template-areas: "a a b c c c" "a a b c c c" "d d e e f f"; }
  .mosaico .foto { border-radius: 12px; }
  .mosaico .m-a .foto { border-radius: 22px; }
}
.reservado { border: 3px dashed var(--texto-suave); border-radius: var(--raio); padding: 28px 20px; background: var(--branco); color: var(--texto-suave); }
.reservado p { margin: 0; }

/* Aulas */
.destaques-aulas { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.aulas__equipe { font-size: 19px; line-height: 1.5; margin: 0 0 32px; max-width: 46ch; }
.destaques-aulas span { background: var(--laranja); color: var(--azul-noite); font-weight: 700; padding: 8px 16px; border-radius: 999px; font-size: 16px; }
.aulas { display: grid; gap: 32px; }
.aulas h3 { margin-top: 28px; }
.aulas p { color: var(--texto-claro); }
.aulas p strong { color: var(--branco); }
.agenda { background: var(--azul-noite-2); border-radius: var(--raio); padding: 22px; }
.agenda h3 { margin-top: 0; }
.agenda__dias { display: flex; gap: 10px; margin-bottom: 12px; }
.agenda__dias li span { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; background: var(--laranja); color: var(--azul-noite); font-weight: 700; font-size: 20px; }
.agenda__hora { margin: 0; font-weight: 600; color: var(--branco) !important; }
.beneficios { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.beneficios li { border: 2px solid var(--laranja); color: var(--branco); border-radius: 999px; padding: 4px 14px; font-size: 16px; font-weight: 600; }
.endereco { margin-bottom: 16px; color: var(--branco); font-size: 18px; }
.aviso { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 16px; margin: 24px 0; background: #FFF4DB; color: var(--texto); }
.aviso p { margin: 0; color: var(--texto) !important; }
.aviso p strong { color: var(--texto) !important; }
.aviso svg { color: var(--laranja-texto); flex: none; }
.convite { margin-top: 20px; font-weight: 600; }
@media (min-width: 900px) { .aulas { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* Loja */
/* Frase dos produtos (pipeline 16, A.2): texto de apoio, abaixo do destaque e acima da legenda das fotos */
.loja__origem { font-size: 18px; max-width: 760px; color: var(--texto); border-left: 4px solid var(--laranja); padding-left: 14px; margin: 16px 0; }
.legenda-fotos, .legenda-ia { font-size: 16px; color: var(--texto-suave); font-weight: 600; }
/* Grade de cards (pipeline 22, 28/10): subgrid alinha foto, título, "Detalhes" e preço/botão
   na mesma altura em todos os cards da linha. Linhas de cada card:
   1 foto · 2 foto real (só nos cards com imagem ilustrativa) · 3 título+resumo · 4 detalhes · 5 compra */
.cards[role="list"] { margin: 32px 0 48px; }
.cards { display: grid; gap: 28px 24px; grid-template-columns: 1fr; margin: 32px 0 48px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--branco); border-radius: var(--raio); overflow: hidden; display: grid; grid-template-rows: auto auto auto auto 1fr; padding-bottom: 22px; box-shadow: 0 1px 2px rgba(20,35,46,.08), 0 6px 20px rgba(20,35,46,.08); border: 1px solid #E6E1D8; transition: box-shadow .2s ease; }
@supports (grid-template-rows: subgrid) {
  .cards > .card { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
}
.card:hover { box-shadow: 0 1px 2px rgba(20,35,46,.1), 0 10px 28px rgba(20,35,46,.14); }
.card > :not(.card__foto) { margin-inline: 22px; }
.card__foto { position: relative; margin: 0; background: #EFEAE2; }
/* Altura mínima 4:3 pelo padding (aspect-ratio faria o card alargar quando a foto ocupa 2 linhas,
   e container query desligaria o subgrid) */
/* 29/10: moldura quadrada — as imagens ilustrativas novas (estilo das referências da Izadira) são quadradas */
.card__foto::before { content: ""; display: block; padding-top: 100%; }
.card__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Card sem foto real: a foto ocupa também a linha 2, e a base das fotos fica alinhada na linha */
.card:not(:has(.card__foto-real)) .card__foto { grid-row: span 2; }
.card__etiqueta-ia { position: absolute; right: 10px; bottom: 10px; background: rgba(15,37,51,.9); color: var(--branco); font-size: 16px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
/* Foto real do produto logo abaixo da imagem de IA (toque para ampliar) — não cobre o rosto de ninguém */
.card__foto-real { display: flex; align-items: center; gap: 12px; padding: 10px 0 0; text-decoration: none; color: var(--laranja-texto); font-size: 16px; font-weight: 600; min-height: 48px; border-radius: 8px; }
.card__foto-real img { width: 72px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; flex: none; border: 1px solid #E6E1D8; }
.card__foto-real span { text-decoration: underline; text-underline-offset: 3px; }
.card__foto-real:hover span { text-decoration-thickness: 2px; }
.card__texto { padding-top: 18px; }
.card h3 { font-size: 20px; margin-bottom: .35em; color: var(--azul-noite); }
.card__resumo { margin: 0; color: var(--texto-suave); }
.card__detalhes { margin-top: 6px; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid #EEE9E1; }
.card summary { cursor: pointer; font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; color: var(--laranja-texto); list-style: none; border-radius: 6px; }
.card summary::-webkit-details-marker { display: none; }
/* Seta desenhada em CSS: mostra que "Detalhes" abre e fecha */
.card summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.card details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.card details ul { margin: 0 0 6px; padding-left: 22px; color: var(--texto); }
.card details li { margin-bottom: 4px; }
/* Bloco de compra encostado na base: preço e botão na mesma altura em todos os cards da linha */
.card__compra { align-self: end; display: flex; flex-direction: column; }
.card__aviso { font-size: 16px; line-height: 1.5; color: var(--texto-suave); background: #FFF8E8; border-left: 3px solid var(--laranja); border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 0 0 14px; }
.card__preco { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; color: var(--azul-noite); text-align: center; }

/* Como comprar */
.como-comprar { background: var(--branco); border-radius: var(--raio); padding: 28px 22px; border: 1px solid #E6E1D8; }
.como-comprar h3 { font-size: 1.5rem; color: var(--azul-noite); margin-bottom: 20px; }
.passos, .passos[role="list"] { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.passos li { display: flex; gap: 14px; align-items: center; background: var(--creme); border-radius: 12px; padding: 14px 16px; }
.passos li p { margin: 0; }
.passos__n { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--azul-noite); color: var(--branco); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.info-compra { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #EEE9E1; }
.info-compra li { padding: 14px 0; border-bottom: 1px solid #EEE9E1; margin: 0; }
.info-compra li:last-child { border-bottom: none; padding-bottom: 0; }
.info-compra strong { color: var(--azul-noite); }
@media (min-width: 900px) {
  .como-comprar { padding: 36px 40px; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .info-compra { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .info-compra li:nth-last-child(2) { border-bottom: none; padding-bottom: 0; }
}

/* Chamada final */
.chamada { background: var(--laranja); color: var(--azul-noite); padding: 48px 0; text-align: center; }
.chamada h2 { max-width: 760px; margin: 0 auto 24px; }

/* Rodapé */
.rodape { background: var(--azul-noite-2); color: var(--texto-claro); padding: 48px 0 56px; }
.rodape__grade { display: grid; gap: 32px; }
.rodape__nome { color: var(--branco); font-weight: 700; margin: 14px 0 4px; letter-spacing: .03em; }
.rodape__titulo { font-size: 1.15rem; color: var(--branco); }
.rodape__links li { margin: 4px 0; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--branco); text-underline-offset: 4px; }
.rodape__grupo { margin: 20px 0 10px; }
@media (min-width: 860px) { .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Janela (dialog nativo) ---------- */
.janela { border: none; padding: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; background: var(--branco); color: var(--texto); }
.janela::backdrop { background: rgba(10, 22, 31, .7); }
.janela__topo { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--azul-noite); color: var(--branco); }
.janela__topo h2 { margin: 0; font-size: 1.3rem; color: var(--branco); }
.janela__fechar { min-height: 48px; min-width: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--branco); background: transparent; color: var(--branco); font: inherit; font-weight: 600; cursor: pointer; }
.janela__fechar span { font-size: 24px; line-height: 1; margin-left: 4px; }
.janela__corpo { padding: 20px 16px 28px; }
.escolha { background: var(--creme); border-radius: 10px; padding: 12px 14px; }
@media (min-width: 640px) {
  .janela { width: 560px; height: fit-content; max-height: calc(100% - 48px); margin: auto; border-radius: var(--raio); }
}
.janela--foto { background: #000; }
.janela--foto[open] { display: flex; flex-direction: column; }
.janela--foto img { flex: 1; min-height: 0; width: 100%; height: auto; object-fit: contain; }
.janela__navegar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--azul-noite); color: var(--branco); }
.janela__passo { min-height: 48px; min-width: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--laranja); background: transparent; color: var(--branco); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.janela__passo:hover { background: var(--laranja); color: var(--azul-noite); }
.janela__passo span { font-size: 22px; line-height: 1; }
.janela__contador { margin: 0; font-size: 16px; color: var(--texto-claro); white-space: nowrap; }
/* 28/10, pedido do Filipe: a legenda da foto ampliada mostra só o nome do grupo; a descrição segue no alt, para leitor de tela. */
.janela__legenda { margin: 0; font-size: 18px; font-weight: 700; }
@media (min-width: 640px) { .janela--foto { width: min(1100px, 94vw); height: min(90vh, 900px); max-height: 90vh; } }

/* Formulário */
.campo { margin-bottom: 18px; }
.campo label, .opcoes legend { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select { width: 100%; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 18px; color: var(--texto); background: var(--branco); border: 2px solid #6B7680; border-radius: 10px; }
.campo input[aria-invalid="true"] { border-color: var(--vermelho-erro); border-width: 3px; }
.dica { font-size: 16px; color: var(--texto-suave); margin: 6px 0 0; }
.erro { color: var(--vermelho-erro); font-weight: 600; font-size: 16px; margin: 6px 0 0; display: flex; gap: 6px; }
.erro::before { content: "⚠"; speak: never; }
.opcoes { border: none; padding: 0; margin: 0 0 18px; }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; margin-bottom: 8px; border: 2px solid #6B7680; border-radius: 10px; cursor: pointer; }
.opcao input { width: 24px; height: 24px; accent-color: var(--azul-noite); flex: none; margin: 0; }
.opcao:has(input:checked) { border-color: var(--azul-noite); background: #EAF0F4; border-width: 3px; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--texto); outline-offset: 2px; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso-lgpd { font-size: 16px; color: var(--texto-suave); }
.aviso-lgpd a { color: var(--texto); font-weight: 600; }
.aviso-lgpd--forte { color: var(--texto); font-weight: 600; }
.erros-resumo { border: 3px solid var(--vermelho-erro); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; color: var(--vermelho-erro); font-weight: 600; }
.erros-resumo ul { margin: 6px 0 0; padding-left: 20px; }
.erros-resumo a { color: var(--vermelho-erro); }
.resultado { margin-bottom: 20px; }
.resultado__titulo { font-size: 1.4rem; font-weight: 700; margin-bottom: .4em; }
[data-etapa="final"] .btn { margin-bottom: 12px; }

/* Marcador visual dos pontos pendentes: só aparece com ?pendentes na URL (para revisão) */
/* Política de privacidade (pipeline 16, F.3) */
.politica h2 { font-size: 1.25rem; margin: 32px 0 8px; }
.politica ul { padding-left: 22px; }
.politica li { margin-bottom: 6px; }
.mostrar-pendentes [data-pendente] { outline: 3px dashed #D9256B; outline-offset: 3px; }

/* Loja e vitrine do topo: o visual da v2 (fotos sem o piso, vitrine iluminada) fica em loja-vitrine.css (pipeline 26) */