/* Manifesto Corporal — v4
   Formatação inspirada em thefutureinblack.com (títulos gigantes, rótulos numerados,
   declarações grandes, notas sobre foto, cartões empilhados, pílulas com seta) e
   depoimentos em recibos inspirados em poetry.camera.
   Identidade: paleta Mônica Cal / Moni.Cacau; Staatliches nos títulos gigantes,
   Glacial Indifference (Questrial até os arquivos chegarem) no texto, Courier Prime nos recibos. */

/* ---------- Fontes (hospedadas no site, licença SIL OFL em assets/fonts) ---------- */
@font-face { font-family: "Staatliches"; src: url("/assets/fonts/staatliches-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Questrial"; src: url("/assets/fonts/questrial-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/fonts/courier-prime-400.woff") format("woff"); font-weight: 400; font-display: swap; }
/* Quando a Glacial Indifference estiver em assets/fonts/, descomente (ela entra no lugar da Questrial):
@font-face { font-family: "Glacial Indifference"; src: url("/assets/fonts/GlacialIndifference-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Glacial Indifference"; src: url("/assets/fonts/GlacialIndifference-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*/

:root {
  /* paleta da marca */
  --azul: #2c4c60;
  --azul-noite: #122a42;
  --rosa: #a05a61;
  --rosa-texto: #894950;     /* rosa para texto sobre fundo claro (AA) */
  --rosa-claro: #ecd9d6;
  --verde: #47553b;
  --verde-claro: #c0c7a2;
  --areia: #c4a187;
  --areia-clara: #f1e9dd;    /* o "creme" da referência */
  --carvao: #232323;         /* o "preto" da referência */
  --branco: #fffdf9;
  --papel: #fbfaf6;          /* papel dos recibos e das notas */

  --fonte-gigante: "Staatliches", "Arial Narrow", sans-serif;
  --fonte-texto: "Glacial Indifference", "Questrial", "Avenir Next", "Segoe UI", sans-serif;
  --fonte-recibo: "Courier Prime", "Courier New", monospace;

  --largura: 84rem;
  --margem: clamp(1rem, 4vw, 3.5rem);
  --espaco: clamp(5rem, 11vw, 10rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-rapida: 160ms;
  --dur-base: 250ms;
  --topo-altura: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--topo-altura); }
body {
  margin: 0;
  background: var(--branco);
  color: var(--carvao);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur-rapida) ease; }
a:hover { color: var(--rosa-texto); }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
::selection { background: var(--rosa); color: var(--branco); }
input, textarea { caret-color: var(--rosa); }
html { scrollbar-color: var(--carvao) var(--branco); }
p { margin: 0 0 1em; max-width: 62ch; }
strong { font-weight: 700; }

.pular-conteudo { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.6rem 1rem; background: var(--carvao); color: var(--branco); border-radius: 999px; }
.pular-conteudo:focus { top: 1rem; }
.pular-conteudo:hover { color: var(--branco); }

.container { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-family: var(--fonte-gigante); line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-family: var(--fonte-texto); font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-family: var(--fonte-texto); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-family: var(--fonte-texto); font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }
h5 { font-size: 1.1rem; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; letter-spacing: -0.01em; }
.titulo-medio { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.titulo-lista { margin-top: 3rem; }

/* ---------- Topo: marca, relógio e pílula de menu ---------- */
/* Os itens do topo ficam fixos um a um (sem caixa em volta), para a marca e o
   relógio poderem usar mix-blend-mode e aparecer tanto no claro quanto sobre fotos. */
.topo { position: static; }
.marca, .relogio, .menu-botao { position: fixed; top: calc((var(--topo-altura) - 2.6rem) / 2); z-index: 102; }
.marca { left: var(--margem); }
.relogio { right: calc(var(--margem) + 7.9rem); }
.menu-botao { right: var(--margem); }
.marca {
  font-family: var(--fonte-gigante);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  /* pílula off-white (mesmo formato do menu) para não se misturar com o texto ao rolar */
  display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1.1rem;
  border-radius: 999px; background: var(--branco); color: var(--carvao);
  box-shadow: 0 2px 10px rgb(35 35 35 / 0.08);
}
.marca:hover { color: var(--rosa-texto); }
.topo__direita { display: contents; }
.relogio { margin: 0; display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1rem; border-radius: 999px; background: var(--branco); color: var(--carvao); font-size: 0.95rem; white-space: nowrap; box-shadow: 0 2px 10px rgb(35 35 35 / 0.08); }
.relogio__barra { opacity: 0.6; margin-right: 0.35rem; }
.menu-botao {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 1.1rem 0.35rem 0.35rem;
  border: 0; border-radius: 999px;
  background: var(--carvao); color: var(--branco);
  font: inherit; font-size: 0.95rem; font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-rapida) ease, transform 120ms var(--ease-out);
}
.menu-botao:hover { background: var(--rosa); }
.menu-botao:active { transform: scale(0.97); }
.menu-botao__icone { position: relative; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.menu-botao__icone span { position: absolute; left: 0.55rem; right: 0.55rem; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.menu-botao__icone span:first-child { top: 0.75rem; }
.menu-botao__icone span:last-child { top: 1.1rem; }
.menu-aberto .menu-botao__icone span:first-child { transform: translateY(0.175rem) rotate(45deg); }
.menu-aberto .menu-botao__icone span:last-child { transform: translateY(-0.175rem) rotate(-45deg); }

/* Menu em tela cheia (sem JS ele aparece como lista normal) */
.menu { width: 100%; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista a { text-decoration: none; }
.menu__contato { display: grid; gap: 0.3rem; margin-top: 2rem; font-size: 0.95rem; }
.menu__contato a { text-decoration: none; }
.js .menu {
  position: fixed; inset: 0; z-index: 101;
  display: grid; align-items: end;
  padding: calc(var(--topo-altura) + 2rem) var(--margem) var(--margem);
  background: var(--carvao); color: var(--branco);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 600ms var(--ease-out), visibility 0s linear 600ms;
  overflow-y: auto;
}
.js.menu-aberto .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 600ms var(--ease-out), visibility 0s; }
.js .menu__lista a {
  display: inline-block;
  font-family: var(--fonte-gigante);
  font-size: clamp(2.6rem, min(7vw, 9.5svh), 6.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--branco);
}
.js .menu__lista a:hover, .js .menu__lista a[aria-current="page"] { color: var(--rosa-claro); }
.js .menu__membros a { color: var(--areia); }
.js .menu__contato a { color: var(--areia-clara); }
html:not(.js) .menu-botao { display: none; }
html:not(.js) .marca, html:not(.js) .relogio { position: static; color: var(--carvao); mix-blend-mode: normal; }
html:not(.js) .topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--margem); }
html:not(.js) .menu__lista { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* ---------- Pílulas (CTA com círculo e seta) ---------- */
.pilula, .botao {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem;
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  border: 1px solid var(--carvao); border-radius: 999px;
  background: rgb(35 35 35 / 0.06);
  color: var(--carvao);
  font: inherit; font-size: 0.98rem; line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform 120ms var(--ease-out);
}
.pilula__seta {
  display: grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--carvao); color: var(--branco);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.pilula__seta svg, .rodape__topo svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilula:hover { background: var(--carvao); color: var(--branco); }
.pilula:hover .pilula__seta, .botao:hover .pilula__seta { background: var(--rosa); transform: rotate(-45deg); }
.pilula:active, .botao:active { transform: scale(0.97); }
.pilula--cheia { background: var(--rosa); border-color: var(--rosa); color: var(--branco); }
.pilula--cheia .pilula__seta { background: var(--branco); color: var(--rosa-texto); }
.pilula--cheia:hover { background: var(--carvao); border-color: var(--carvao); }
.pilula--cheia:hover .pilula__seta { background: var(--rosa); color: var(--branco); }
.botao { background: var(--carvao); color: var(--branco); }
.botao:not(:has(.pilula__seta)) { padding-right: 1.4rem; }
.botao .pilula__seta { background: var(--rosa); }
.botao:hover { background: var(--rosa); border-color: var(--rosa); color: var(--branco); }
.botao:hover .pilula__seta { background: var(--carvao); }
.botao--contorno { background: transparent; color: var(--carvao); }

/* ---------- Herói: título gigante + foto que se abre ---------- */
.heroi { position: relative; background: var(--branco); }
.heroi__palco {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--topo-altura) + 1.5rem) var(--margem) var(--margem);
}
.heroi__texto { position: relative; z-index: 1; display: grid; align-content: start; }
.heroi__titulo {
  margin: 0;
  font-size: clamp(3.2rem, 9.6vw, 10.5rem);
  text-align: center;
  color: var(--carvao);
}
.heroi--capa .heroi__titulo { font-size: clamp(4.5rem, 19vw, 21rem); line-height: 0.8; }
.heroi__linha { display: block; }
.heroi__linha--fina:first-child { text-align: left; }
.heroi__linha--fina:last-child { text-align: right; }
.heroi__linha--fina {
  font-family: var(--fonte-texto);
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-block: 0.4em;
}
/* Foto: cobre o palco inteiro; o clip-path recorta o "cartão" (o JS abre até a tela toda) */
.heroi__midia {
  --cartao-l: 35vw; --cartao-t: 54svh; --cartao-r: 35vw; --cartao-b: 3svh;
  position: absolute; inset: 0; z-index: 2;
  margin: 0;
  clip-path: inset(var(--cartao-t) var(--cartao-r) var(--cartao-b) var(--cartao-l));
}
.heroi--capa .heroi__midia { --cartao-t: 30svh; --cartao-b: 6svh; --cartao-l: 36vw; --cartao-r: 36vw; }
.heroi__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.heroi__legenda {
  position: absolute; left: var(--margem); right: var(--margem); bottom: 12svh; z-index: 3;
  margin: 0; max-width: none;
  font-size: clamp(2rem, 5.5vw, 5.5rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--branco);
  text-shadow: 0 0.1em 0.6em rgb(0 0 0 / 0.25);
  opacity: 0;
  pointer-events: none;
}
.heroi__rodape {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem;
}
.heroi__lead { margin: 0; max-width: 26ch; font-size: 1.05rem; line-height: 1.4; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 48rem) {
  .heroi__midia { --cartao-l: 16vw; --cartao-r: 16vw; --cartao-t: 42svh; --cartao-b: 30svh; }
  .heroi--capa .heroi__midia { --cartao-l: 20vw; --cartao-r: 20vw; --cartao-t: 34svh; --cartao-b: 34svh; }
  .heroi__lead { max-width: 34ch; }
}

/* Com movimento: o herói ganha altura para a foto abrir enquanto o palco fica preso */
.anim .heroi { height: 230svh; }
.anim .heroi__palco { position: sticky; top: 0; height: 100svh; }

/* ---------- Seções ---------- */
.secao { position: relative; padding-block: var(--espaco); }
.secao--branco { background: var(--branco); }
.secao--creme { background: var(--areia-clara); }
.secao--verde { background: var(--verde); color: var(--branco); }
.secao--verde a:hover { color: var(--rosa-claro); }
.secao--verde .rotulo { color: var(--areia-clara); }
.secao--foto { background: var(--carvao) url("/assets/img/rito-treino-feminino-praia-campeche.webp") center / cover no-repeat; color: var(--branco); overflow: hidden; }
.secao--foto::before { content: ""; position: absolute; inset: 0; background: rgb(18 42 66 / 0.62); }
.secao--foto > .container { position: relative; }
.secao--artigo { padding-top: calc(var(--topo-altura) + 4rem); }

/* Rótulo numerado: ■ NOME ............ 0N */
.rotulo {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: 0.9rem; margin-bottom: clamp(2.5rem, 6vw, 5rem);
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.rotulo__nome::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.55rem; background: currentColor; vertical-align: 0.02em; }
.rotulo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: left center;
  transform: scaleX(var(--fio, 1));
}
.rotulo::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; }

/* Declaração: H2 grande à direita, texto curto à esquerda */
.declaracao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); }
.declaracao__titulo { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
.declaracao__corpo { grid-column: 1; grid-row: 1; align-self: end; }
.declaracao__corpo p:last-child { margin-bottom: 0; }
.declaracao:not(:has(.declaracao__corpo)) { grid-template-columns: 1fr; }
.declaracao:not(:has(.declaracao__corpo)) .declaracao__titulo { grid-column: 1; max-width: 18ch; margin-left: auto; }
@media (max-width: 52rem) {
  .declaracao { grid-template-columns: 1fr; }
  .declaracao__titulo { grid-column: 1; text-align: left; }
  .declaracao__corpo { grid-column: 1; grid-row: 2; }
  .declaracao:not(:has(.declaracao__corpo)) .declaracao__titulo { margin-left: 0; }
}

.colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 6vw, 6rem); border-top: 1px solid currentColor; padding-top: 2rem; }
.colunas--uma { grid-template-columns: minmax(0, 1fr); margin-top: 3rem; }
.colunas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 4vw, 4rem); }
.coluna--abre p { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.35; letter-spacing: -0.01em; margin-top: 0; }
.colunas--uma .coluna { max-width: 44rem; margin-left: auto; }
.colunas--contato { border-top: 0; padding-top: 0; }
@media (max-width: 52rem) { .colunas { grid-template-columns: 1fr; } }

/* Linhas finas (formação, contatos, listas) */
.linhas { margin: 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.linhas > div, .linhas > li { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid currentColor; margin: 0; }
.linhas--lista > li { grid-template-columns: 1fr; font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: -0.02em; }
.linhas dt { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.linhas dd { margin: 0; }
@media (max-width: 40rem) { .linhas > div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---------- Palavra gigante preenchida por foto ---------- */
.palavra-imagem { overflow: hidden; padding-block: clamp(2rem, 6vw, 6rem); background: var(--branco); }
.palavra-imagem__texto {
  margin: 0; max-width: none;
  font-family: var(--fonte-gigante);
  font-size: clamp(8rem, 42vw, 40rem);
  line-height: 0.78;
  text-align: center;
  text-transform: uppercase;
  color: var(--verde);
  background-size: cover; background-position: 50% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.palavra-imagem--rito { background-image: url("/assets/img/rito-treino-feminino-praia-campeche.webp"); }
.palavra-imagem--rito-mesa { background-image: url("/assets/img/rito-ritualize-sua-rotina-de-treino.webp"); }
.palavra-imagem--gati { background-image: url("/assets/img/clube-da-gati-flor-primavera.webp"); }
.palavra-imagem--dance { background-image: url("/assets/img/dance-a-dentro-danca-expressiva.webp"); }

.palavra-gigante { overflow: hidden; background: var(--branco); padding-top: clamp(2rem, 6vw, 5rem); }
.palavra-gigante p {
  margin: 0; max-width: none; white-space: nowrap;
  font-family: var(--fonte-gigante);
  font-size: clamp(7rem, 30vw, 30rem); line-height: 0.8; text-transform: uppercase; text-align: center;
  color: var(--verde);
}

/* ---------- Mural: notas de papel sobre foto em sangria ---------- */
.titulo-mural { max-width: 22ch; margin-bottom: 2rem; }
.mural { position: relative; margin-inline: calc(50% - 50vw); min-height: clamp(36rem, 70vw, 56rem); overflow: hidden; }
.mural__foto { position: absolute; inset: 0; }
.mural__foto img { width: 100%; height: 115%; object-fit: cover; }
.mural__notas { position: relative; list-style: none; margin: 0; padding: 0; height: 100%; min-height: inherit; }
.nota {
  position: absolute;
  width: clamp(11rem, 17vw, 15rem); aspect-ratio: 4 / 5;
  margin: 0; padding: 1.1rem 1.1rem 1.4rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--papel); color: var(--carvao);
  box-shadow: 0 1.25rem 2.5rem -1rem rgb(0 0 0 / 0.35);
  font-size: 1rem; line-height: 1.3;
}
.nota::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--verde); }
.nota p { margin: 0; }
.nota strong { display: block; font-weight: 700; }
/* nota com foto (estilo polaroide) */
.nota--foto { aspect-ratio: auto; justify-content: flex-start; gap: 0.75rem; padding: 0.7rem 0.7rem 1.1rem; }
.nota--foto::before { display: none; }
.nota__foto { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--areia); }
.nota__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.nota--foto p { padding-inline: 0.2rem; }
/* nota com ícone (pilares do RITO no personal) */
.nota--icone::before { display: none; }
.nota__icone { width: clamp(3.5rem, 5.5vw, 5rem); height: auto; color: var(--verde); align-self: center; margin-block: auto; }
.nota--icone { justify-content: flex-start; }
/* subtítulo do mural: caixa alta, pequeno, com o quadradinho verde */
.titulo-mural--sub { display: flex; align-items: center; gap: 0.75rem; max-width: none; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: 0.12em; text-transform: uppercase; }
.titulo-mural--sub::before { content: ""; width: 0.7rem; height: 0.7rem; background: var(--verde); flex: none; }
.nota:nth-child(1) { left: 6%;  top: 14%; rotate: -2deg; }
.nota:nth-child(2) { left: 26%; top: 44%; rotate: 1.5deg; }
.nota:nth-child(3) { left: 47%; top: 10%; rotate: -1deg; }
.nota:nth-child(4) { left: 68%; top: 40%; rotate: 2deg; }
.nota:nth-child(5) { left: 84%; top: 8%; rotate: -1.5deg; }
.nota:nth-child(6) { left: 47%; top: 64%; rotate: 1deg; }
@media (max-width: 70rem) {
  .nota:nth-child(5) { left: 80%; }
}
@media (max-width: 52rem) {
  .mural { min-height: 0; padding: 44vw var(--margem) 2rem; }
  .mural__foto { bottom: auto; height: 62vw; }
  .mural__foto img { height: 100%; }
  .mural__notas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .nota { position: relative; left: auto !important; top: auto !important; width: auto; aspect-ratio: auto; min-height: 9rem; }
}

/* ---------- Cartões empilhados (foto | texto) ---------- */
.cartoes { display: grid; gap: 2rem; }
.cartao {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: min(78svh, 46rem);
  overflow: hidden;
  border-radius: 0.25rem;
  transform-origin: 50% 0;
  box-shadow: 0 -1.5rem 3rem -2rem rgb(0 0 0 / 0.35);
}
.cartao__foto { position: relative; overflow: hidden; background: var(--areia); min-height: 18rem; }
.cartao__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cartao__foto img[src*="projeto-newsletter-praia"] { object-position: 50% 92%; }
.cartao__texto { display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: clamp(1.75rem, 5vw, 4.5rem); }
.cartao__titulo { font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 0.4em; }
.cartao__acoes { margin-top: 1.25rem; }
.cartao--verde { background: var(--verde); color: var(--branco); }
.cartao--azul { background: var(--azul-noite); color: var(--branco); }
.cartao--creme { background: var(--areia-clara); color: var(--carvao); }
.cartao--rosa { background: var(--rosa-claro); color: var(--carvao); }
.cartao:nth-child(even) .cartao__foto { order: 2; }
.secao--creme .cartao--creme { background: var(--branco); }
.preco { font-family: var(--fonte-gigante); font-size: clamp(3rem, 6vw, 5rem); line-height: 0.95; margin-bottom: 0.3em; }
.preco span { display: block; font-family: var(--fonte-texto); font-size: 1rem; letter-spacing: 0; }
.preco s { font-size: max(0.5em, 1.1rem); opacity: 0.7; margin-right: 0.2em; }
@media (min-width: 52.01rem) {
  .anim .cartao { position: sticky; top: calc(var(--topo-altura) + 1rem); }
  .anim .cartao:nth-child(2) { top: calc(var(--topo-altura) + 2rem); }
  .anim .cartao:nth-child(3) { top: calc(var(--topo-altura) + 3rem); }
  .anim .cartao:nth-child(4) { top: calc(var(--topo-altura) + 4rem); }
  .anim .cartoes { gap: 22svh; }
}
@media (max-width: 52rem) {
  .cartao { grid-template-columns: 1fr; min-height: 0; }
  .cartao__foto { aspect-ratio: 4 / 3; }
  .cartao:nth-child(even) .cartao__foto { order: 0; }
}

/* ---------- Recibos (depoimentos) ---------- */
.recibos {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(0.75rem, 2vw, 1.75rem);
}
.recibo { flex: 0 1 19rem; margin: 0; }
.recibo:nth-child(1) { rotate: -2.5deg; margin-top: 3rem; }
.recibo:nth-child(2) { rotate: 1.5deg; }
.recibo:nth-child(3) { rotate: -1deg; margin-top: 5rem; }
.recibo figure {
  position: relative;
  margin: 0; padding: 1.5rem 1.4rem 2.2rem;
  background: var(--papel); color: var(--carvao);
  font-family: var(--fonte-recibo); font-size: 0.98rem; line-height: 1.4; text-align: center;
  /* borda serrilhada de papel destacado embaixo */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.6rem) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.2rem 0.6rem repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.6rem) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.2rem 0.6rem repeat-x;
}
.recibo { filter: drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / 0.35)); }
.recibo p { max-width: none; margin: 0; }
.recibo__estrelas, .recibo__fio { letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; opacity: 0.85; }
.recibo__nome { font-family: var(--fonte-recibo); font-size: 1.15rem; letter-spacing: 0; text-transform: uppercase; margin: 0.8rem 0 0.1rem; }
.recibo__papel { margin-bottom: 0.6rem !important; }
.recibo blockquote { margin: 1rem 0; text-align: left; }
.recibo__assinatura { margin-top: 0.6rem !important; font-size: 0.85rem; }
@media (max-width: 52rem) {
  .recibos { flex-direction: column; align-items: center; }
  .recibo { flex: none; width: min(100%, 22rem); margin-top: 0 !important; }
}

/* ---------- Fundadora ---------- */
.fundadora { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: end; }
.fundadora__nome h2 { font-size: clamp(2rem, 3.8vw, 3.6rem); }
.fundadora__assinatura { font-family: var(--fonte-gigante); font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 0.95; text-transform: uppercase; color: var(--rosa-texto); }
.fundadora__foto { margin: 0; }
.fundadora__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 60rem) { .fundadora { grid-template-columns: 1fr; } .fundadora__foto { max-width: 26rem; } }

/* ---------- Perguntas (accordion) ---------- */
.perguntas { border-top: 1px solid currentColor; }
.perguntas details { border-bottom: 1px solid currentColor; }
.perguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.4rem; cursor: pointer; list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary h3 { margin: 0; }
.perguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--carvao); color: var(--branco); font-size: 1.3rem; transition: transform var(--dur-base) var(--ease-out); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding-bottom: 1.4rem; margin: 0; }

/* ---------- Newsletter: edições ---------- */
.edicoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.edicao__link { display: grid; gap: 0.8rem; padding: 1rem; border-radius: 0.75rem; background: var(--branco); text-decoration: none; transition: transform var(--dur-base) var(--ease-out); }
.edicao__link:hover { color: inherit; transform: translateY(-4px); }
.edicao__foto { display: block; overflow: hidden; border-radius: 0.5rem; }
.edicao__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.edicao__tag { justify-self: center; padding: 0.35rem 1rem; border-radius: 999px; background: var(--rosa); color: var(--branco); font-size: 0.85rem; }
.edicao__titulo { text-align: center; margin: 0; }
.edicao__link p { margin: 0; font-size: 0.95rem; text-align: center; }

/* ---------- Artigo ---------- */
.artigo { max-width: 50rem; }
.artigo__titulo { font-size: clamp(3rem, 8vw, 7rem); }
.artigo h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-top: 1.6em; }
.artigo h3 { margin-top: 1.4em; }
.artigo p { max-width: none; }
.artigo__meta { font-size: 0.95rem; }
.aviso-saude { border: 1px solid var(--verde); background: var(--verde-claro); padding: 1rem 1.25rem; margin-block: 2rem; border-radius: 0.5rem; }
.aviso-saude p { margin: 0; }
.preencher { background: var(--branco); outline: 2px dashed var(--rosa); outline-offset: 2px; padding: 0 0.3em; }

/* ---------- Formulários (linha fina, como na referência) ---------- */
.formulario { display: grid; gap: 1.4rem; max-width: 34rem; }
.campo { display: grid; gap: 0.2rem; }
.campo label { font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 0.7rem 0;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; font: inherit;
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-bottom: 2px solid var(--rosa); }
.campo textarea { resize: vertical; }
.campo small, .formulario small { font-size: 0.88rem; }
.formulario .botao { justify-self: start; }
.mensagem { margin: 0; padding: 0.8rem 1rem; max-width: none; border: 1px solid var(--carvao); border-radius: 0.5rem; background: var(--branco); color: var(--carvao); }
.mensagem[hidden] { display: none; }
.mensagem--ok { border-color: var(--verde); background: var(--verde-claro); }
.mensagem--erro { border-color: var(--rosa); background: var(--rosa-claro); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Área de membros ---------- */
.membro-item { padding-block: 1.4rem; border-top: 1px solid var(--carvao); }
.membro-item:last-child { border-bottom: 1px solid var(--carvao); }
.membro-item iframe, .membro-item video { width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--carvao); }
.membro-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }

/* ---------- Rodapé: frase gigante + pílulas ---------- */
.rodape { background: var(--branco); color: var(--carvao); padding-block: var(--espaco) 1.5rem; overflow: hidden; }
.rodape__final { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; }
.rodape__gigante { margin: 0; max-width: none; font-family: var(--fonte-gigante); font-size: clamp(4rem, 11vw, 11rem); line-height: 0.82; text-transform: uppercase; }
.rodape__convite { margin: 0; }
.rodape__ctas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-block: 3rem 5rem; }
.rodape__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--carvao); }
.rodape h4 { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.rodape__fim { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--carvao); font-size: 0.9rem; }
.rodape__fim p { margin: 0; max-width: none; }
.rodape__marca { font-family: var(--fonte-gigante); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; margin-right: 0.4rem; }
.rodape__topo { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--verde); color: var(--branco); }
.rodape__topo svg { rotate: -90deg; }
.rodape__topo:hover { background: var(--rosa); color: var(--branco); }
@media (max-width: 60rem) {
  .rodape__final { grid-template-columns: 1fr; }
  .rodape__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .rodape__ctas, .rodape__grade { grid-template-columns: 1fr; }
  .relogio { display: none; }
}

/* ---------- Movimento (movimento.js / GSAP) ----------
   O conteúdo é visível por padrão; só some no instante inicial quando o JS avisou
   que vai animar (.mov), com um limite de segurança de 2,5 s. */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.palavra__in { display: inline-block; }
.mov .heroi__titulo, .mov .heroi__rodape { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pilula:active, .botao:active, .menu-botao:active { transform: none; }
  .pilula:hover .pilula__seta, .botao:hover .pilula__seta { transform: none; }
  .js .menu { transition: visibility 0s; }
}

/* ---------- Capa da home: colagem com figuras que descolam (boca, lua, gato, pesinho) ----------
   Inspirada na seção "Jogar como prática" de thefutureinblack.com. A colagem fica num
   círculo; lua, gato, megafone e tênis são recortes por cima dela, exatamente no lugar.
   Ao rolar, eles descolam (sobem com sombra) e se afastam para as laterais, deixando o
   recorte no papel creme. */
.capa { position: relative; background: var(--branco); }
.capa__palco {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
  padding: calc(var(--topo-altura) + 1rem) var(--margem) var(--margem);
}
.capa__colagem {
  --d: min(74svh, 80vw);
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
}
.capa__base { width: 100%; height: 100%; clip-path: circle(50% at 50% 50%); }
.capa__pecas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.capa__peca { position: absolute; height: auto; transform-origin: 50% 50%; }
.capa__peca--boca { left: 2.19%; top: 46.56%; width: 55%; }
.capa__peca--lua { left: 4.75%; top: 7.75%; width: 43.44%; }
.capa__peca--gato { left: 55.81%; top: 2.5%; width: 40.21%; }
.capa__peca--pesinho { left: 54.75%; top: 33.75%; width: 40.04%; }
/* capa do personal: agenda sobre a mesa; relógio, fita, tênis e halteres descolam */
.capa--personal .capa__peca--tenis { left: 6.71%; top: 56.83%; width: 39.38%; }
.capa--personal .capa__peca--relogio { left: 10.42%; top: 7.67%; width: 35%; }
.capa--personal .capa__peca--fita { left: 45.96%; top: 10.33%; width: 51.38%; }
.capa--personal .capa__peca--halter { left: 50.42%; top: 51.96%; width: 46%; }
/* capa do Clube da Gati: gata, neve, hibisco e halter */
.capa--clube .capa__peca--gato { left: 5.92%; top: 2.83%; width: 44.5%; }
.capa--clube .capa__peca--neve { left: 42.42%; top: 2.96%; width: 52.21%; }
.capa--clube .capa__peca--flor { left: 0.92%; top: 37.38%; width: 52.21%; }
.capa--clube .capa__peca--halter { left: 38.42%; top: 57.75%; width: 57.46%; }
/* capa do Dance a Dentro: borboleta, chinelos, olho e disco */
.capa--dance .capa__peca--borboleta { left: 5.67%; top: 5.25%; width: 54.46%; }
.capa--dance .capa__peca--chinelo { left: 58.21%; top: 16.96%; width: 30.29%; }
.capa--dance .capa__peca--disco { left: 50.67%; top: 49.17%; width: 41.5%; }
.capa--dance .capa__peca--olho { left: 4.54%; top: 38.04%; width: 52.88%; }
/* capa da newsletter: câmera, tachinha, megafone e halter */
.capa--news .capa__peca--camera { left: 4.12%; top: 2.25%; width: 49%; }
.capa--news .capa__peca--tachinha { left: 61.29%; top: 5.62%; width: 32.92%; }
.capa--news .capa__peca--megafone { left: 7.58%; top: 51.12%; width: 43.96%; }
.capa--news .capa__peca--halter { left: 41.5%; top: 56.75%; width: 54.92%; }
/* capa do contato: luminária, envelope, caneca e telefone */
.capa--contato .capa__peca--luminaria { left: 2.42%; top: 12.5%; width: 48.04%; }
.capa--contato .capa__peca--envelope { left: 50.12%; top: 11%; width: 44.25%; }
.capa--contato .capa__peca--caneca { left: 13%; top: 45.75%; width: 33.58%; }
.capa--contato .capa__peca--telefone { left: 40.17%; top: 59.38%; width: 53.58%; }
.capa__titulo {
  position: relative; z-index: 2;
  width: 100%;
  margin: 0;
  font-size: clamp(4.5rem, 18.5vw, 20rem);
  line-height: 0.8;
  text-align: center;
  color: var(--carvao);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.06em var(--branco);
}
.capa__linha { display: block; }
.capa__fina {
  display: block;
  font-family: var(--fonte-texto);
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1.2; letter-spacing: -0.02em;
  text-transform: none;
  text-align: left;
  margin-block: 0.4em;
  -webkit-text-stroke: 0;
}
.capa__fina--fim { text-align: right; }
/* as linhas finas ganham um fundo claro, para seguirem legíveis quando uma figura passa por baixo */
.capa__fina {
  width: fit-content;
  margin-right: auto;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--branco);
  position: relative; z-index: 1;
}
.capa__fina--fim { margin-left: auto; margin-right: 0; }
.capa__rodape {
  position: absolute; left: var(--margem); right: var(--margem); bottom: var(--margem); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem;
}
.capa__lead { margin: 0; max-width: 26ch; font-size: 1.05rem; line-height: 1.4; }
@media (max-width: 48rem) {
  .capa__colagem { --d: min(94vw, 58svh); top: 46%; }
  .capa__palco { align-items: start; padding-top: calc(var(--topo-altura) + 2rem); }
  .capa__titulo { font-size: clamp(3.6rem, 21vw, 7rem); margin-top: 18svh; }
  .capa__lead { max-width: 34ch; font-size: 0.98rem; }
}
.anim .capa { height: 210svh; }
.anim .capa__palco { position: sticky; top: 0; height: 100svh; }
.mov .capa__titulo, .mov .capa__rodape { visibility: hidden; }

/* ---------- Área de membros e administração ---------- */
.membro-topo__acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.vazio { padding: 1.25rem; border: 1px dashed currentColor; border-radius: 0.75rem; opacity: 0.75; max-width: none; }

.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-block: 2rem 4rem; }
.area-cartao { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1rem; min-height: 15rem; }
.area-cartao h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0; }
.area-cartao .pilula { justify-self: start; margin-top: auto; }
.area-cartao--clube { background: var(--rosa-claro); }
.area-cartao--dance { background: var(--verde-claro); }
.area-cartao--bloqueado { background: var(--areia-clara); }

.materiais { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1.5rem; margin-block: 1.5rem 3.5rem; }
.materiais--pdf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.material { display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem; border-radius: 1rem; background: var(--areia-clara); }
.material h3 { margin: 0; }
.material p { margin: 0; }
.material iframe, .material video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0.5rem; background: var(--carvao); margin-top: 0.5rem; }
.material .pilula { justify-self: start; margin-top: 0.5rem; }
.material__tipo { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.material__aviso { color: var(--rosa-texto); }

/* chave liga/desliga */
.chave { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.chave__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave__trilho { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: #c9c3bb; transition: background-color var(--dur-base) var(--ease-out); }
.chave__trilho::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform var(--dur-base) var(--ease-out); }
.chave__input:checked + .chave__trilho { background: var(--verde); }
.chave__input:checked + .chave__trilho::after { transform: translateX(1.1rem); }
.chave__input:focus-visible + .chave__trilho { outline: 2px solid var(--rosa); outline-offset: 2px; }
.chave__input:disabled + .chave__trilho { opacity: 0.45; cursor: not-allowed; }
.chave__rotulo { font-size: 0.95rem; }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-block: 1rem 3rem; }
.resumo__item { padding: 1.1rem 1.25rem; border-radius: 1rem; background: var(--areia-clara); }
.resumo__item p { margin: 0; }
.resumo__numero { font-family: var(--fonte-gigante); font-size: 2.6rem; line-height: 1; }

.admin-filtros { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; margin-bottom: 1rem; }
.admin-filtros .campo { min-width: min(100%, 16rem); }
.admin-contagem { font-size: 0.9rem; opacity: 0.75; }
.usuarias { display: grid; gap: 1rem; margin-bottom: 4rem; }
.usuaria { display: grid; gap: 1rem; padding: 1.25rem 1.4rem; border: 1px solid #ddd5ca; border-radius: 1rem; background: var(--branco); }
.usuaria--inativa { background: #f3efea; }
.usuaria--inativa .usuaria__nome { text-decoration: line-through; opacity: 0.6; }
.usuaria__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1rem; }
.usuaria__nome { margin: 0; font-size: 1.35rem; }
.usuaria__email { margin: 0; font-size: 0.95rem; word-break: break-all; }
.usuaria__selos { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: start; }
.selo { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; background: var(--areia-clara); }
.selo--ok { background: var(--verde-claro); }
.selo--pendente { background: var(--rosa-claro); }
.selo--admin { background: var(--carvao); color: var(--branco); }
.usuaria__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; font-size: 0.9rem; }
.usuaria__meta dt { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }
.usuaria__meta dd { margin: 0; }
.usuaria__chaves { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; padding-block: 0.75rem; border-block: 1px solid #ece6dd; }
.usuaria__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.usuaria__senha { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.usuaria__senha input { min-height: 2.75rem; padding: 0.4rem 0.9rem; border: 1px solid #cfc7bc; border-radius: 999px; font: inherit; background: var(--branco); }

.admin-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; margin-bottom: 4rem; }
@media (max-width: 60rem) { .admin-duas { grid-template-columns: 1fr; } }
.admin-cartao { padding: 1.5rem; border-radius: 1rem; background: var(--areia-clara); max-width: none; }
.admin-cartao h3 { margin: 0; }
.materiais-admin { display: grid; gap: 0.75rem; }
.material-admin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1rem; padding: 1rem 1.2rem; border: 1px solid #ddd5ca; border-radius: 1rem; }
.material-admin h3 { margin: 0.2rem 0; font-size: 1.15rem; }
.material-admin p { margin: 0; }
.material__fonte { font-size: 0.82rem; opacity: 0.7; word-break: break-all; }
.material-admin__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- Formação: título e lista lado a lado ---------- */
.formacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: end; }
.formacao .declaracao__titulo { text-align: left; margin: 0 0 1.5rem; }
.formacao__abre p { margin: 0; max-width: 34ch; }
.formacao__h3 { margin-top: 0; }
@media (max-width: 52rem) { .formacao { grid-template-columns: 1fr; } }

/* ---------- Capa: título também respeita a altura da tela (evita encostar nos botões) ---------- */
.capa__titulo { font-size: min(clamp(4.5rem, 18.5vw, 20rem), 31svh); }
.capa--personal .capa__titulo, .capa--contato .capa__titulo { font-size: min(clamp(3rem, 15vw, 17rem), 36svh); }
@media (max-width: 48rem) {
  .capa__titulo { font-size: clamp(3.6rem, 21vw, 7rem); }
  .capa--personal .capa__titulo, .capa--contato .capa__titulo { font-size: 15.5vw; }
}

/* ---------- Plano trimestral: texto + caminho desenhado (Mês 1, 2, 3) ---------- */
.plano { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid currentColor; }
.plano__texto h3 { margin-top: 0; }
.plano__texto p { margin-bottom: 0; }
.caminho { position: relative; height: clamp(12rem, 18vw, 15rem); }
.caminho__linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.caminho__linha path { fill: none; stroke: var(--verde); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.caminho__linha .caminho__seta { stroke-dasharray: none; stroke-linejoin: round; }
.caminho__passos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.caminho__passos li { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; width: max-content; }
.caminho__passos li::before { content: ""; order: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0.35rem var(--areia-clara); margin-bottom: 0.5rem; }
/* bolinhas sobre a linha: x = 1/6, 3/6, 5/6; y = 70%, 30%, 70% */
.caminho__passos li:nth-child(1) { left: 16.67%; top: calc(70% - 0.55rem); }
.caminho__passos li:nth-child(3) { left: 83.33%; top: calc(70% - 0.55rem); }
.caminho__passos li:nth-child(2) { left: 50%; bottom: calc(70% - 0.55rem); flex-direction: column-reverse; }
.caminho__passos li:nth-child(2)::before { margin: 0.5rem 0 0; }
.caminho__mes { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.caminho__passos strong { font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -0.01em; }
.caminho__passos li:nth-child(2) .caminho__mes { order: 2; }
.caminho__passos li:nth-child(2) strong { order: 1; }
@media (max-width: 52rem) {
  .plano { grid-template-columns: 1fr; }
  .caminho { height: auto; }
  .caminho__linha { display: none; }
  .caminho__passos { position: relative; display: grid; gap: 1.4rem; padding-left: 2rem; border-left: 2px dashed var(--verde); margin-left: 0.5rem; }
  .caminho__passos li:nth-child(n) { position: relative; left: auto; top: auto; bottom: auto; transform: none; align-items: flex-start; text-align: left; flex-direction: column; width: auto; }
  .caminho__passos li:nth-child(n)::before { position: absolute; left: calc(-2rem - 1px - 0.55rem); top: 0.2rem; margin: 0; }
  .caminho__passos li:nth-child(2) .caminho__mes { order: 0; }
}

/* ---------- Onde treinar: nomes das academias + texto ao lado ---------- */
.academias { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center;
  border-top: 1px solid currentColor; padding-top: 2rem; }
.academias__nomes { display: grid; gap: 1.25rem; }
.academias__nomes h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.academias__nomes span { display: block; margin-top: 0.35rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.academias__texto { margin: 0; max-width: 32ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.4; }
@media (max-width: 52rem) { .academias { grid-template-columns: 1fr; } }

/* ---------- Trilhas na área de membros ---------- */
.trilhas { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-block: 2rem 4rem; }
.trilha { border-top: 1px solid currentColor; padding-top: 1.5rem; }
.trilha__sub { margin: 0 0 0.35rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.trilha__titulo { margin: 0; }
.trilha .materiais { margin-block: 1.5rem 0; }

/* ---------- Admin: trilhas e newsletter ---------- */
.admin-dica { margin: -0.25rem 0 0.5rem; font-size: 0.92rem; opacity: 0.8; }
.material-admin__grupo { margin: 1.5rem 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.material-admin__grupo:first-child { margin-top: 0; }
.material-admin__trilha { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; margin-top: 0.6rem; font-size: 0.85rem; }
.material-admin__trilha label { display: grid; gap: 0.2rem; }
.material-admin__trilha input { font: inherit; padding: 0.35rem 0.5rem; border: 1px solid currentColor; border-radius: 0.4rem; background: transparent; color: inherit; }
.material-admin__trilha input[type=text] { width: 11rem; }
.material-admin__trilha input[type=number] { width: 4.5rem; }
.material-admin__trilha .botao { padding: 0.4rem 0.9rem; }
.formulario small { display: block; margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.45; opacity: 0.8; }
.formulario textarea#nl-conteudo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.5; }
.admin-botoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nl-previa { margin-top: 2rem; padding: 1.5rem; border: 1px dashed currentColor; border-radius: 0.75rem; }
.nl-previa__titulo { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0.25rem 0 1rem; }
.nl-previa__corpo h2 { font-size: 1.3rem; }

/* ---------- Leitura da coluna criada no painel ---------- */
.coluna-capa { margin: 2rem 0; }
.coluna-capa img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; border-radius: 0.5rem; }
.coluna-corpo ul { padding-left: 1.2rem; }
.coluna-corpo li { margin-bottom: 0.35rem; }
.coluna-fim { margin-top: 3rem; }

/* ---------- Agenda do mês (Dance a Dentro) ---------- */
.agenda__chamada { margin-top: 0; }
.agenda { margin: 1.5rem 0 3.5rem; }
.agenda__vazio { margin: 0; padding: 1.5rem; border: 1px dashed currentColor; border-radius: 0.75rem; max-width: 60ch; }
.agenda__mes { margin: 2rem 0 0.75rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.agenda__mes:first-child { margin-top: 0; }
.agenda__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.agenda__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; border-radius: 0.75rem; background: var(--branco); }
.agenda__data { align-self: start; display: grid; justify-items: center; align-content: start; min-width: 4.5rem; padding: 0.6rem 0.5rem; border-radius: 0.5rem; background: var(--verde); color: var(--branco); text-align: center; }
.agenda__dia { font-family: var(--fonte-gigante); font-size: 2.6rem; line-height: 0.9; }
.agenda__semana { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.agenda__titulo { margin: 0 0 0.3rem; font-size: 1.2rem; line-height: 1.2; }
.agenda__info { margin: 0; font-size: 0.92rem; opacity: 0.85; }
.agenda__descricao { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.45; }
.agenda__corpo .pilula { margin-top: 0.9rem; padding: 0.6rem 1.25rem; min-height: 0; }
.admin-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.material-admin--passado { opacity: 0.55; }

/* ---------- Edições da coluna: carrossel com setas desenhadas ---------- */
.carrossel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.carrossel__trilho {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 2 * 1.5rem) / 3);
  gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1.25rem; scrollbar-width: none; overscroll-behavior-x: contain; overflow-anchor: none; scroll-padding-inline: 0.25rem;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; border-radius: 1rem; }
.carrossel__trilho > * { scroll-snap-align: start; }
.carrossel .edicao__link {
  display: flex; flex-direction: column; height: 100%; gap: 0.75rem; padding: 1rem 1rem 1.25rem;
  border: 2px solid var(--carvao); border-radius: 1rem; background: var(--branco);
  box-shadow: 0 0 0 var(--carvao);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.carrossel .edicao__link:hover, .carrossel .edicao__link:focus-visible { transform: translate(-3px, -4px); box-shadow: 4px 6px 0 var(--carvao); }
.carrossel .edicao__foto { border-radius: 0.5rem; }
.carrossel .edicao__foto img { aspect-ratio: 4 / 3; }
.carrossel .edicao__tag { align-self: flex-start; padding: 0.25rem 0.8rem; font-size: 0.78rem; }
.carrossel .edicao__titulo { text-align: left; font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; letter-spacing: -0.01em; }
.carrossel .edicao__link p {
  text-align: left; font-size: 0.95rem; line-height: 1.45; opacity: 0.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carrossel .edicao__link::after { content: "Leia mais  →"; white-space: pre; margin-top: auto; padding-top: 0.5rem; font-weight: 700; color: var(--rosa-texto); }
.carrossel .edicao__link:hover::after { text-decoration: underline; text-underline-offset: 0.2em; }

.carrossel__seta {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0;
  border: 2px solid var(--carvao); border-radius: 50%; background: var(--branco); color: var(--carvao);
  box-shadow: 0 3px 0 var(--carvao); cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.carrossel__seta svg { width: 1.9rem; height: 1.9rem; transition: transform var(--dur-base) var(--ease-out); }
.carrossel__seta:hover:not(:disabled), .carrossel__seta:focus-visible { background: var(--rosa); color: var(--branco); transform: translateY(-3px) rotate(-4deg); box-shadow: 0 6px 0 var(--carvao); }
.carrossel__seta--ant:hover:not(:disabled) svg { transform: translateX(-3px); }
.carrossel__seta--prox:hover:not(:disabled) svg { transform: translateX(3px); }
.carrossel__seta:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--carvao); }
.carrossel__seta:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.carrossel--sem-rolagem .carrossel__seta { visibility: hidden; }

@media (max-width: 64rem) { .carrossel__trilho { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (max-width: 40rem) {
  .carrossel { grid-template-columns: 1fr 1fr; }
  .carrossel__trilho { grid-column: 1 / -1; grid-row: 1; grid-auto-columns: 86%; gap: 1rem; }
  .carrossel__seta { grid-row: 2; width: 3rem; height: 3rem; }
  .carrossel__seta--ant { justify-self: end; }
  .carrossel__seta--prox { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .carrossel__trilho { scroll-behavior: auto; } }

/* ---------- Newsletter: gatas recortadas + tópicos da coluna ---------- */
.quadro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin: 1rem 0 4.5rem; }
.quadro__arte { position: relative; padding: 6% 4%; }
.quadro__papel {
  position: absolute; left: 2%; right: 8%; top: 30%; bottom: 3%; background: var(--verde);
  box-shadow: 0 14px 28px rgb(35 35 35 / 0.18);
  background-image: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.3px); background-size: 5px 5px;
}
.quadro__arte img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgb(35 35 35 / 0.18)); }
@media (prefers-reduced-motion: no-preference) {
  .quadro__arte img { animation: quadro-balanca 7s ease-in-out infinite alternate; transform-origin: 50% 90%; }
}
@keyframes quadro-balanca { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }

.quadro__titulo { margin: 0 0 1.75rem; max-width: 16ch; }
.quadro__topicos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; max-width: 34rem; }
.quadro__topicos li { position: relative; padding-left: 1.6rem; font-size: 1.1rem; line-height: 1.5; }
.quadro__topicos li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rosa); }
.quadro__topicos li:nth-child(3n+2)::before { background: var(--verde); }
.quadro__topicos li:nth-child(3n)::before { background: var(--areia); }
.quadro__topicos strong { font-weight: 700; }

@media (max-width: 64rem) { .quadro { grid-template-columns: 1fr; } .quadro__arte { max-width: 30rem; margin-inline: auto; } }
@media (min-width: 64.01rem) { .quadro { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

/* ---------- Contato: canais em cartões e formulário sem linhas ---------- */
.canais { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 32rem; }
.canais--academias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.canal {
  display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem;
  background: var(--papel); border-radius: 1.1rem; color: inherit; text-decoration: none;
  box-shadow: 0 1px 0 rgb(35 35 35 / 0.06);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.canal:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgb(35 35 35 / 0.1); }
a.canal:hover .canal__icone { background: var(--rosa); color: var(--branco); }
.canal__icone {
  flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--verde-claro); color: var(--carvao); transition: background var(--dur-base), color var(--dur-base);
}
.canal__icone .nota__icone { width: 1.45rem; height: 1.45rem; margin: 0; }
.canal__rotulo { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.canal__valor { display: block; font-size: 1.1rem; overflow-wrap: anywhere; }
.formulario--cartao { background: var(--papel); border-radius: 1.4rem; padding: clamp(1.25rem, 3vw, 2rem); gap: 1.1rem; }
.formulario--cartao .campo input, .formulario--cartao .campo select, .formulario--cartao .campo textarea {
  border: 0; border-radius: 0.8rem; padding: 0.8rem 1rem; background: var(--areia-clara, #ebe1d4); background: rgb(196 161 135 / 0.16);
}
.formulario--cartao .campo input:focus-visible, .formulario--cartao .campo select:focus-visible, .formulario--cartao .campo textarea:focus-visible {
  border: 0; outline: 2px solid var(--rosa); outline-offset: 1px;
}
@media (max-width: 30rem) { .canais--academias { grid-template-columns: 1fr; } }

/* ---------- Carrossel de cartões (o que está incluso no Clube da Gati) ---------- */
.carrossel--cartoes .carrossel__trilho { list-style: none; margin: 0; }
.incluso {
  display: flex; flex-direction: column; gap: 0.5rem; min-height: 15rem; margin: 0; padding: 1.5rem 1.4rem;
  border: 2px solid var(--carvao); border-radius: 1.2rem; background: var(--rosa-claro);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.incluso:nth-child(3n+2) { background: var(--verde-claro); }
.incluso:nth-child(3n) { background: var(--branco); }
.incluso:hover { transform: translate(-3px, -4px); box-shadow: 4px 6px 0 var(--carvao); }
.incluso .nota__icone { width: 3rem; height: 3rem; margin: 0 0 auto; align-self: flex-start; }
.incluso__titulo { margin: 1.5rem 0 0; font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; }
.incluso p { margin: 0; line-height: 1.45; }

/* ---------- Formação: cartão + etiquetas no lugar das linhas ---------- */
.canal--grande { max-width: 30rem; background: var(--areia-clara); }
.etiquetas__rotulo { margin: 1.5rem 0 0.7rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etiquetas li { margin: 0; padding: 0.5rem 1rem; border-radius: 999px; background: var(--rosa-claro); font-size: 1rem; }
.etiquetas li:nth-child(even) { background: var(--verde-claro); }

/* ---------- Perguntas frequentes: cartões arredondados no lugar das linhas ---------- */
.perguntas { border-top: 0; display: grid; gap: 0.75rem; }
.perguntas details { border-bottom: 0; border-radius: 1.2rem; background: var(--papel); color: var(--carvao); padding-inline: clamp(1.1rem, 2.5vw, 1.75rem);
  box-shadow: 0 1px 0 rgb(35 35 35 / 0.06); transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); }
.perguntas details:hover { box-shadow: 0 10px 20px rgb(35 35 35 / 0.08); }
.perguntas details[open] { background: var(--branco); box-shadow: 0 10px 24px rgb(35 35 35 / 0.1); }
.perguntas summary { padding-block: 1.15rem; }
.perguntas summary::after { background: var(--rosa-claro); color: var(--carvao); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base); }
.perguntas details:hover summary::after, .perguntas details[open] summary::after { background: var(--rosa); color: var(--branco); }
.perguntas details p { max-width: 46rem; }

/* ---------- Plano trimestral: cartão + caminho em movimento ---------- */
.plano { border-top: 0; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 1.5rem; background: var(--papel); }
.caminho__passos li::before { box-shadow: 0 0 0 0.35rem var(--papel); }
@media (prefers-reduced-motion: no-preference) {
  .caminho__linha path:first-child { animation: caminho-anda 1.1s linear infinite; }
  .caminho__passos li::before { animation: caminho-pulsa 3.6s ease-in-out infinite; }
  .caminho__passos li:nth-child(2)::before { animation-delay: 1.2s; }
  .caminho__passos li:nth-child(3)::before { animation-delay: 2.4s; }
  .caminho__linha .caminho__seta { animation: caminho-seta 1.1s ease-in-out infinite alternate; }
}
@keyframes caminho-anda { to { stroke-dashoffset: -13; } }
@keyframes caminho-pulsa {
  0%, 30%, 100% { scale: 1; background: var(--verde); box-shadow: 0 0 0 0.35rem var(--papel), 0 0 0 0.35rem rgb(160 90 97 / 0); }
  12% { scale: 1.35; background: var(--rosa); box-shadow: 0 0 0 0.3rem var(--papel), 0 0 0 0.75rem rgb(160 90 97 / 0.22); }
}
@keyframes caminho-seta { to { translate: 3px -3px; } }

/* ---------- Ajustes: linha dupla e preço "de/por" ---------- */
.linhas + .colunas--uma { border-top: 0; padding-top: 0; }
.preco--de-por s { display: block; font-size: max(0.42em, 1.2rem); margin: 0 0 0.25em; }
.preco--de-por strong { display: block; font-weight: inherit; white-space: nowrap; }

/* ---------- Administração: abas, filtros e trilhas que abrem e fecham ---------- */
.admin-abas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; padding: 0.4rem; border-radius: 999px; background: var(--areia-clara); width: fit-content; max-width: 100%; }
.admin-aba, .segmento button { font: inherit; padding: 0.6rem 1.25rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease; }
.admin-aba:hover, .segmento button:hover { background: var(--rosa-claro); }
.admin-aba[aria-pressed="true"], .segmento button[aria-pressed="true"] { background: var(--carvao); color: var(--branco); }
.admin-painel > h2:first-child { margin-top: 0; }
.admin-painel + .admin-painel:not([hidden]) { margin-top: 4rem; }
.segmento { display: flex; flex-wrap: wrap; gap: 0.35rem; width: fit-content; max-width: 100%; margin: 0.5rem 0 1.25rem; padding: 0.3rem; border: 1px solid #ddd5ca; border-radius: 999px; }
.segmento button { padding: 0.45rem 1rem; font-size: 0.95rem; }
.admin-novo { margin-bottom: 2.5rem; }
.admin-novo > summary { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.4rem; border-radius: 999px; background: var(--rosa); color: var(--branco); cursor: pointer; list-style: none; user-select: none; }
.admin-novo > summary::-webkit-details-marker { display: none; }
.admin-novo__mais { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--branco); color: var(--rosa); font-size: 1.2rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out); }
.admin-novo[open] .admin-novo__mais { transform: rotate(45deg); }
.admin-novo .admin-cartao { margin-top: 1rem; max-width: 44rem; }
.mat-area { margin: 1.75rem 0 0.25rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.mat-area:first-child { margin-top: 0; }
.mat-grupo { border: 1px solid #ddd5ca; border-radius: 1rem; background: var(--branco); }
.mat-grupo > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 0.9rem 1.2rem; cursor: pointer; list-style: none; }
.mat-grupo > summary::-webkit-details-marker { display: none; }
.mat-grupo > summary::after { content: "+"; margin-left: auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--areia-clara); font-size: 1.2rem; transition: transform var(--dur-base) var(--ease-out); }
.mat-grupo[open] > summary::after { transform: rotate(45deg); background: var(--rosa); color: var(--branco); }
.mat-grupo__titulo { margin: 0; font-size: 1.2rem; }
.mat-grupo__resumo { font-size: 0.88rem; opacity: 0.7; }
.mat-grupo__itens { border-top: 1px solid #ece6dd; }
.mat-linha { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem 0.9rem; padding: 0.65rem 1.2rem; }
.mat-linha + .mat-linha { border-top: 1px solid #f1ece4; }
.mat-linha--rascunho { background: #f7f3ee; }
.mat-linha--rascunho .mat-linha__titulo { opacity: 0.65; }
.mat-linha__num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--areia-clara); font-size: 0.9rem; }
.mat-linha__tipo--video { background: var(--rosa-claro); }
.mat-linha__tipo--pdf { background: var(--verde-claro); }
.mat-linha__titulo { margin: 0; font-size: 1.02rem; font-weight: 400; overflow-wrap: anywhere; }
.mat-linha .chave__rotulo { font-size: 0.85rem; }
.mat-linha__editar { padding: 0.35rem 0.9rem; font-size: 0.9rem; }
.mat-linha__edicao { grid-column: 1 / -1; display: grid; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 0.8rem; background: var(--areia-clara); }
.mat-linha__edicao[hidden] { display: none; }
.mat-linha__edicao p { margin: 0; }
.mat-linha__descricao { font-size: 0.92rem; }
@media (max-width: 40rem) {
  .admin-abas, .segmento { border-radius: 1.2rem; }
  .mat-linha__tipo { justify-self: start; }
  .mat-linha { grid-template-columns: 2rem auto minmax(0, 1fr); }
  .mat-linha__titulo { grid-column: 1 / -1; grid-row: 2; }
  .mat-linha .chave { grid-column: 1 / 3; grid-row: 3; }
  .mat-linha__editar { grid-row: 3; justify-self: end; }
}