/* =====================================================================
   CLUBE DO 1% — SISTEMA VISUAL
   ---------------------------------------------------------------------
   Este é o único arquivo de estilos do site. As 3 etapas (página
   pública, telas de acesso e área da aluna) usam tudo daqui.

   Para mudar uma cor, fonte ou espaçamento no site inteiro, altere
   apenas o valor na seção "1. VARIÁVEIS" logo abaixo.
   ===================================================================== */


/* =====================================================================
   1. VARIÁVEIS (cores, fontes, tamanhos, espaços, sombras)
   ===================================================================== */
:root {
  /* ---- Cores ---- */
  --cor-fundo: #FFFFFF;          /* fundo de todas as páginas */
  --cor-texto: #1F1F1F;          /* títulos e texto forte */
  --cor-texto-suave: #8C8C8C;    /* texto corrido e descrições */
  --cor-marca-texto: #EFE8F3;    /* lavanda atrás de palavras do título */
  --cor-cabecalho: #F2F0F6;      /* fundo do cabeçalho ao rolar */
  --cor-lilas: #E4E3F5;          /* formas decorativas lilás */
  --cor-agua-clara: #E8F2EE;     /* formas decorativas verde-água */
  --cor-agua: #5EC4B6;           /* acento: contornos finos */
  --cor-amarelo: #E8A33D;        /* acento: barrinha dos bullets */
  --cor-cinza-apoio: #F1F1F1;    /* blobs de apoio e divisórias */
  --cor-branco: #FFFFFF;

  /* ---- Cores das telas de acesso (etapa 2) ---- */
  --cor-acesso-creme: #F7D6D2;        /* gradiente da boas-vindas (esquerda): tom do coração */
  --cor-acesso-offwhite: #FDF4F2;     /* gradiente da boas-vindas (direita): coração bem clarinho */
  --cor-acesso-card: #FFFFFF;         /* card central da boas-vindas */
  --cor-dourado: #B8A77E;             /* selo do clube */
  --cor-texto-medio: #3A3A3A;         /* parágrafos das telas de acesso */
  --cor-botao-acesso: #404041;        /* botões da boas-vindas e WhatsApp */
  --cor-botao-acesso-hover: #555556;
  --cor-botao-entrar: #232323;        /* botão ENTRAR e login social */
  --cor-botao-entrar-hover: #3A3A3A;
  --cor-borda-campo: #CFCFCF;
  --cor-erro: #C2554D;                /* vermelho suave das mensagens de erro */

  /* ---- Cores da área da aluna (etapa 3) ---- */
  --cor-fundo-area: #FAFAFA;          /* fundo das páginas internas */
  --cor-nav-link: #6B6B6B;            /* links da barra superior */
  --cor-borda-suave: #E6E6E6;         /* bordas e linhas finas */
  --cor-icone-inativo: #A0A0A0;       /* itens inativos da barra inferior */
  --cor-faixa: #FCFCFC;               /* faixas de atalho */
  --cor-pastel-pessego: #F9C4A8;
  --cor-pastel-verde: #9DD9BE;
  --cor-pastel-lilas: #E3D3E6;
  --cor-lilas-forte: #A98BC0;         /* ícone de raio */
  --cor-avatar-comentario: #D9BFE3;
  --cor-campo-comentario: #EAEAEA;
  --cor-borda-botao: #E8E8E8;

  /* ---- Fonte ----
     Se você enviar os arquivos da Gotham, basta trocar para:
     --fonte: "Gotham", "Montserrat", system-ui, sans-serif; */
  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Títulos de destaque. Se enviar a Quincy CF, troque para:
     --fonte-destaque: "Quincy CF", "Fraunces", Georgia, serif; */
  --fonte-destaque: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-manuscrita: "Sacramento", "Brush Script MT", cursive;  /* nome dos pilares */
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-bold: 700;

  /* ---- Tamanhos de texto (celular → computador) ---- */
  --tam-hero: clamp(26px, 0.9rem + 2.4vw, 44px);
  --tam-titulo-secao: clamp(24px, 1.2rem + 1.6vw, 36px);
  --tam-subtitulo: clamp(14px, 0.8rem + 0.35vw, 18px);
  --tam-texto: clamp(16px, 0.9rem + 0.55vw, 22px);
  --tam-pequeno: 14px;
  --tam-botao: 13px;

  /* ---- Espaçamento entre letras ---- */
  --espaco-letras-hero: 0.13em;
  --espaco-letras-titulo: 0.04em;
  --espaco-letras-subtitulo: 0.03em;
  --espaco-letras-texto: 0.02em;
  --espaco-letras-botao: 0.18em;

  /* ---- Espaços ---- */
  --margem-lateral: 20px;                         /* celular */
  --largura-maxima: 1440px;           /* largura máxima do conteúdo em telas grandes */
  --espaco-secao: clamp(80px, 6rem + 3vw, 140px); /* entre seções */
  --espaco-1: 8px;
  --espaco-2: 16px;
  --espaco-3: 24px;
  --espaco-4: 32px;
  --espaco-5: 48px;
  --espaco-6: 64px;

  /* ---- Cantos ---- */
  --raio-card: 24px;
  --raio-card-pequeno: 12px;
  --raio-pilula: 999px;

  /* ---- Sombras (sempre suaves e difusas) ---- */
  --sombra-card: 0 20px 60px rgba(0, 0, 0, 0.08);
  --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.06);
  --sombra-hover: 0 24px 60px rgba(0, 0, 0, 0.12);

  /* ---- Cabeçalho ---- */
  --altura-cabecalho: 80px;

  /* ---- Animação ---- */
  --anim-duracao: 0.6s;
  --anim-curva: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out suave */
}

@media (min-width: 900px) {
  :root {
    --margem-lateral: 40px;
    --altura-cabecalho: 115px;
  }
}


/* =====================================================================
   2. BASE
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--altura-cabecalho); overflow-x: hidden; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-weight: var(--peso-light);
  font-size: var(--tam-texto);
  line-height: 1.5;
  letter-spacing: var(--espaco-letras-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, iframe, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 1.5px solid var(--cor-agua); outline-offset: 4px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--largura-maxima) + var(--margem-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.container--estreito { max-width: calc(820px + var(--margem-lateral) * 2); }

.secao {
  position: relative;
  isolation: isolate;          /* mantém as formas decorativas atrás */
  padding-block: var(--espaco-secao) 0;
}

.secao:last-of-type { padding-bottom: var(--espaco-secao); }

.centralizado { text-align: center; }

.grade-2 {
  display: grid;
  gap: var(--espaco-5);
  align-items: center;
}

@media (min-width: 900px) {
  .grade-2 { grid-template-columns: 1fr 1fr; gap: var(--espaco-6); }
}


/* =====================================================================
   4. TIPOGRAFIA
   ===================================================================== */
.titulo-hero {
  font-size: var(--tam-hero);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-hero);
  line-height: 1.3;
  color: var(--cor-texto);
}

.titulo-secao {
  font-size: var(--tam-titulo-secao);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-titulo);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.titulo-secao--esquerda { text-align: left; }

.subtitulo {
  font-size: var(--tam-subtitulo);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-subtitulo);
  line-height: 1.4;
  color: var(--cor-texto);
}

.sobretitulo {
  display: block;
  font-size: 12px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-botao);
  color: var(--cor-texto-suave);
  margin-bottom: var(--espaco-2);
}

.texto {
  font-size: var(--tam-texto);
  font-weight: var(--peso-light);
  line-height: 1.5;
  letter-spacing: var(--espaco-letras-texto);
  color: var(--cor-texto-suave);
  text-wrap: pretty;
}

.texto + .texto { margin-top: 1em; }

.descricao {
  font-size: var(--tam-pequeno);
  font-weight: var(--peso-light);
  line-height: 1.5;
  text-transform: lowercase;
  color: var(--cor-texto-suave);
}

.descricao--normal { text-transform: none; }

/* Efeito marca-texto: retângulo lavanda atrás de trechos do título */
.marca-texto {
  background: var(--cor-marca-texto);
  padding: 0.06em 0.16em;
  margin-inline: -0.04em;
  border-radius: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.citacao {
  font-size: var(--tam-subtitulo);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-subtitulo);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}


/* =====================================================================
   5. BOTÕES
   ===================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 16px 34px;
  border: 1px solid var(--cor-texto);
  border-radius: var(--raio-pilula);
  background: var(--cor-texto);
  color: var(--cor-branco);
  font-size: var(--tam-botao);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-botao);
  line-height: 1.2;
  text-align: center;
  transition: background var(--anim-duracao) var(--anim-curva),
              color var(--anim-duracao) var(--anim-curva);
}

.botao:hover { background: transparent; color: var(--cor-texto); }

.botao--contorno { background: transparent; color: var(--cor-texto); }
.botao--contorno:hover { background: var(--cor-texto); color: var(--cor-branco); }

.botao--largo { width: 100%; }

/* Botão só de texto, com linha fina embaixo */
.botao-texto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: var(--tam-botao);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-botao);
}

/* Botão redondo só com ícone (setas, favoritar, fechar) */
.botao-icone {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  color: var(--cor-texto);
  transition: opacity 0.3s var(--anim-curva), transform 0.3s var(--anim-curva);
}

.botao-icone:hover { transform: translateY(-2px); }
.botao-icone:disabled { opacity: 0.35; cursor: default; transform: none; }
.botao-icone svg { width: 20px; height: 20px; }

.nota-botao {
  margin-top: var(--espaco-2);
  font-size: 12px;
  color: var(--cor-texto-suave);
  letter-spacing: 0.06em;
}


/* =====================================================================
   6. ÍCONES (traço fino)
   ===================================================================== */
.icone {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ícone dentro de círculo branco com sombra suave */
.icone-circulo {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
  color: var(--cor-texto);
}


/* =====================================================================
   7. CABEÇALHO FIXO + MENU
   ===================================================================== */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--altura-cabecalho);
  background: transparent;
  transition: background var(--anim-duracao) var(--anim-curva);
}

.cabecalho.is-rolado { background: var(--cor-cabecalho); }

.cabecalho__interno {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: 15px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  margin-right: -0.32em;     /* compensa o espaço da última letra */
  white-space: nowrap;
}

.logo--imagem { margin-right: 0; line-height: 0; }
.logo--imagem img { height: 58px; width: auto; }
.logo--rodape img { height: 84px; }

@media (min-width: 900px) {
  .logo--imagem img { height: 82px; }
  .logo--rodape img { height: 96px; }
}

/* Hambúrguer de 2 linhas finas */
.menu-botao {
  justify-self: start;
  display: grid;
  gap: 8px;
  width: 44px;
  height: 44px;
  align-content: center;
}

.menu-botao span {
  display: block;
  width: 30px;
  height: 1.5px;
  background: var(--cor-texto);
  transition: transform 0.4s var(--anim-curva);
}

.menu-botao[aria-expanded="true"] span:first-child { transform: translateY(4.75px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:last-child { transform: translateY(-4.75px) rotate(-45deg); }

/* Gaveta lateral do menu */
.menu-gaveta {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
}

.menu-gaveta.is-aberta { visibility: visible; }

.menu-gaveta__fundo {
  position: absolute;
  inset: 0;
  background: rgba(31, 31, 31, 0.18);
  opacity: 0;
  transition: opacity 0.4s var(--anim-curva);
}

.menu-gaveta__painel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(420px, 88vw);
  padding: calc(var(--altura-cabecalho) + var(--espaco-3)) var(--margem-lateral) var(--espaco-5);
  background: var(--cor-cabecalho);
  transform: translateX(-100%);
  transition: transform 0.5s var(--anim-curva);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
}

.menu-gaveta.is-aberta .menu-gaveta__fundo { opacity: 1; }
.menu-gaveta.is-aberta .menu-gaveta__painel { transform: none; }

.menu-gaveta__links { display: grid; gap: var(--espaco-3); }

.menu-gaveta__links a {
  font-size: 15px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

body.menu-aberto { overflow: hidden; }


/* =====================================================================
   8. FORMAS ORGÂNICAS (blob de mídia + formas decorativas de fundo)
   ===================================================================== */
.midia-blob {
  position: relative;
  width: 100%;
  aspect-ratio: 1.12;
}

.blob {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  background: var(--cor-lilas);
}

.blob img,
.blob video,
.blob iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Contorno fino verde-água deslocado em volta do blob */
.blob-contorno {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--cor-agua);
  border-radius: 45% 55% 40% 60% / 56% 42% 58% 44%;
  transform: translate(14px, -12px) rotate(-5deg);
  pointer-events: none;
}

/* Botão de play circular translúcido */
.botao-play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s var(--anim-curva), background 0.4s var(--anim-curva);
}

.botao-play:hover { transform: scale(1.06); background: rgba(255, 255, 255, 0.8); }
.botao-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--cor-texto); }

/* Formas grandes de fundo, entrando pelas laterais */
.forma {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
}

.forma--lilas { background: var(--cor-lilas); opacity: 0.7; }
.forma--agua { background: var(--cor-agua-clara); }
.forma--cinza { background: var(--cor-cinza-apoio); }


/* =====================================================================
   9. CARDS
   ===================================================================== */
/* Card flutuante: branco, cantos 24px, sombra difusa */
.card-flutuante {
  background: var(--cor-branco);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  padding: var(--espaco-4) var(--espaco-3);
}

@media (min-width: 700px) {
  .card-flutuante { padding: var(--espaco-5) 56px; }
}

/* Card claro: cantos 12px (carrossel, aulas) */
.card-claro {
  background: var(--cor-cabecalho);
  border-radius: var(--raio-card-pequeno);
  overflow: hidden;
}

.card-claro__imagem {
  aspect-ratio: 4 / 5;
  background: var(--cor-lilas);
}

.card-claro__imagem--video { aspect-ratio: 16 / 9; }

.card-claro__imagem img { width: 100%; height: 100%; object-fit: cover; }

.card-claro__corpo { padding: var(--espaco-3); display: grid; gap: 6px; }


/* =====================================================================
   10. LISTAS
   ===================================================================== */
/* Lista com foto redonda de 64px + título + descrição */
.lista-itens > li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--espaco-3);
  align-items: center;
  padding-block: var(--espaco-3);
}

.lista-itens > li + li { border-top: 1px solid var(--cor-cinza-apoio); }
.lista-itens > li:first-child { padding-top: 0; }
.lista-itens > li:last-child { padding-bottom: 0; }

.avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor-lilas);
  color: var(--cor-texto);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--agua { background: var(--cor-agua-clara); }
.avatar--cinza { background: var(--cor-cinza-apoio); }

/* Lista de benefícios com ícone em círculo */
.lista-beneficios {
  display: grid;
  gap: var(--espaco-5) var(--espaco-4);
}

@media (min-width: 640px) { .lista-beneficios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lista-beneficios { grid-template-columns: repeat(3, 1fr); } }

.beneficio { display: grid; gap: var(--espaco-2); align-content: start; }
.beneficio .icone-circulo { margin-bottom: var(--espaco-1); }

/* Bullets com barrinha vertical amarela */
.lista-barrinha { display: grid; gap: var(--espaco-3); }

.lista-barrinha > li {
  position: relative;
  padding-left: 26px;
  font-size: var(--tam-texto);
  color: var(--cor-texto-suave);
  line-height: 1.5;
}

.lista-barrinha > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 2px;
  height: 0.95em;
  background: var(--cor-amarelo);
}

.lista-barrinha strong { font-weight: var(--peso-medium); color: var(--cor-texto); }

/* Sequência em linha (ex.: OBSERVAR → COMPREENDER → ...) */
.sequencia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  font-size: 11px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.sequencia li { display: flex; align-items: center; gap: 12px; }
.sequencia li + li::before { content: "→"; color: var(--cor-agua); letter-spacing: 0; }


/* =====================================================================
   11. MOCKUP DE CELULAR
   ===================================================================== */
.palco-mockup {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}

.palco-mockup .forma { z-index: 0; inset: 8% 4%; }

.celular {
  position: relative;
  z-index: 1;
  width: 210px;
  aspect-ratio: 9 / 19;
  padding: 8px;
  border-radius: 36px;
  background: var(--cor-texto);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.celular--esquerda { transform: rotate(-8deg) translate(22px, 10px); }
.celular--direita { transform: rotate(7deg) translate(-22px, -18px); }

.celular__tela {
  height: 100%;
  border-radius: 29px;
  background: var(--cor-fundo);
  overflow: hidden;
  padding: 26px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.tela__topo {
  font-size: 7px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-align: center;
}

.tela__ola { font-size: 11px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.08em; }
.tela__suave { color: var(--cor-texto-suave); font-size: 8px; }

.tela__destaque {
  padding: 12px;
  border-radius: 12px;
  background: var(--cor-marca-texto);
  display: grid;
  gap: 4px;
}

.tela__linha { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; }
.tela__mini { aspect-ratio: 1; border-radius: 8px; background: var(--cor-agua-clara); }
.tela__mini--lilas { background: var(--cor-lilas); }
.tela__mini--cinza { background: var(--cor-cinza-apoio); }
.tela__barra { height: 5px; border-radius: 3px; background: var(--cor-cinza-apoio); }
.tela__barra--curta { width: 60%; margin-top: 4px; }
.tela__video { aspect-ratio: 16 / 10; border-radius: 12px; background: var(--cor-lilas); display: grid; place-items: center; }
.tela__video span { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.tela__chips { display: flex; gap: 4px; }
.tela__chips span { padding: 3px 7px; border-radius: 999px; background: var(--cor-cinza-apoio); font-size: 6px; text-transform: uppercase; letter-spacing: 0.1em; }
.tela__chips span:first-child { background: var(--cor-texto); color: var(--cor-branco); }

@media (max-width: 520px) {
  .palco-mockup { min-height: 420px; }
  .celular { width: 160px; border-radius: 28px; padding: 6px; }
  .celular__tela { border-radius: 23px; }
}


/* =====================================================================
   12. CARROSSEL
   ===================================================================== */
.carrossel__trilho {
  display: flex;
  gap: var(--espaco-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  margin: -4px -2px -8px;
}

.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__trilho > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

@media (min-width: 640px) { .carrossel__trilho > * { flex-basis: calc((100% - var(--espaco-3)) / 2); } }
@media (min-width: 1000px) { .carrossel__trilho > * { flex-basis: calc((100% - var(--espaco-3) * 2) / 3); } }

.carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-top: var(--espaco-4);
}

.carrossel__setas { display: flex; gap: 12px; }

.carrossel__bolinhas { display: flex; gap: 10px; }

.carrossel__bolinhas button {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--cor-lilas);
  transition: width 0.4s var(--anim-curva), background 0.4s var(--anim-curva);
}

.carrossel__bolinhas button[aria-current="true"] { width: 24px; background: var(--cor-texto); }


/* =====================================================================
   13. FORMULÁRIOS, ETIQUETAS E OUTROS (usados nas etapas 2 e 3)
   ===================================================================== */
.campo { display: grid; gap: 10px; }

.campo__rotulo {
  font-size: 12px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.campo__entrada {
  width: 100%;
  min-height: 54px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-card-pequeno);
  background: var(--cor-cinza-apoio);
  font: inherit;
  font-size: 16px;
  font-weight: var(--peso-regular);
  letter-spacing: 0.02em;
  color: var(--cor-texto);
  transition: border-color 0.3s var(--anim-curva), background 0.3s var(--anim-curva);
}

.campo__entrada::placeholder { color: var(--cor-texto-suave); font-weight: var(--peso-light); }
.campo__entrada:focus { outline: none; border-color: var(--cor-agua); background: var(--cor-branco); }

.campo__ajuda { font-size: 13px; color: var(--cor-texto-suave); }

/* Etiqueta / filtro em formato de pílula */
.etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: var(--raio-pilula);
  background: var(--cor-cinza-apoio);
  font-size: 11px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: background 0.3s var(--anim-curva), color 0.3s var(--anim-curva);
}

.etiqueta.is-ativa,
.etiqueta[aria-pressed="true"] { background: var(--cor-texto); color: var(--cor-branco); }
.etiqueta--lavanda { background: var(--cor-marca-texto); }

.divisor { height: 1px; border: 0; background: var(--cor-cinza-apoio); margin: 0; }

/* Barra de progresso fina */
.progresso { height: 4px; border-radius: var(--raio-pilula); background: var(--cor-cinza-apoio); overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--cor-agua); }

/* Indicação de conteúdo ainda não enviado */
.placeholder {
  display: grid;
  place-items: center;
  padding: var(--espaco-2);
  text-align: center;
  font-size: 11px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(31, 31, 31, 0.45);
}


/* =====================================================================
   14. RODAPÉ
   ===================================================================== */
.rodape {
  padding-block: var(--espaco-6);
  border-top: 1px solid var(--cor-cinza-apoio);
  text-align: center;
  display: grid;
  gap: var(--espaco-3);
  justify-items: center;
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-size: 12px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.rodape__copia { font-size: 12px; color: var(--cor-texto-suave); letter-spacing: 0.06em; }


/* =====================================================================
   15. BOTÃO FLUTUANTE DE WHATSAPP
   ===================================================================== */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cor-agua);
  color: var(--cor-branco);
  box-shadow: 0 12px 30px rgba(94, 196, 182, 0.35);
  transition: transform 0.4s var(--anim-curva);
}

.whatsapp:hover { transform: translateY(-3px); }
.whatsapp svg { width: 28px; height: 28px; }


/* =====================================================================
   16. ANIMAÇÕES (fade + leve subida ao entrar na tela)
   ===================================================================== */
.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--anim-duracao) var(--anim-curva),
              transform var(--anim-duracao) var(--anim-curva);
  transition-delay: var(--atraso, 0s);
}

.js .revelar.is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}


/* =====================================================================
   17. PÁGINA PÚBLICA — posição dos blocos e das formas decorativas
   ===================================================================== */
.hero { padding-top: calc(var(--altura-cabecalho) + var(--espaco-3)); }

.hero__midia { width: min(100%, 640px); margin-inline: auto 0; padding: 14px 16px 0 0; }

.hero__texto { position: relative; z-index: 1; max-width: 820px; margin-top: var(--espaco-5); display: grid; gap: var(--espaco-3); }

.foto-luciana { object-position: 50% 30%; }

.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3) var(--espaco-4); margin-top: var(--espaco-2); }

.hero__forma-1 { width: 560px; height: 520px; top: -140px; left: -300px; }
.hero__forma-2 { width: 420px; height: 460px; top: 38%; right: -260px; }

@media (min-width: 900px) {
  .hero__midia { width: 58%; }
  .hero__texto { margin-top: -56px; }
  .hero__forma-1 { width: 720px; height: 640px; left: -380px; }
}

.esferas__card { margin-top: var(--espaco-5); }
.esferas__forma { width: 640px; height: 520px; top: 30%; left: -420px; }

.beneficios__intro { max-width: 720px; margin: var(--espaco-3) auto var(--espaco-6); }
.beneficios__forma { width: 620px; height: 560px; top: 10%; right: -440px; }

.como__lista { margin-top: var(--espaco-5); }
.como__sequencia { margin-top: var(--espaco-6); }
.como__cta { margin-top: var(--espaco-6); }
.como__forma { width: 560px; height: 600px; top: 20%; left: -400px; }


.sobre__foto { padding: 14px 16px 0 0; max-width: 520px; }
.sobre__forma { width: 600px; height: 540px; bottom: -40px; right: -420px; }



/* =====================================================================
   18. TELAS DE ACESSO (boas-vindas, login e redefinir senha)
   ===================================================================== */
.acesso-pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espaco-4) 16px var(--espaco-5);
}

.fundo-boas-vindas {
  background: linear-gradient(90deg, var(--cor-acesso-creme), var(--cor-acesso-offwhite));
}

.acesso-logo-topo { height: 34px; width: auto; }

/* Card central da boas-vindas */
.card-acesso {
  width: 100%;
  max-width: 630px;
  margin: auto 0;
  padding: var(--espaco-5) 24px;
  border-radius: 28px;
  background: var(--cor-acesso-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 640px) { .card-acesso { padding: var(--espaco-5); } }

.selo-clube { height: 50px; width: auto; margin-bottom: var(--espaco-4); }

.titulo-destaque {
  font-family: var(--fonte-destaque);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--cor-texto);
  text-wrap: balance;
}

@media (min-width: 640px) { .titulo-destaque { font-size: 44px; } }

.texto-acesso {
  margin-top: var(--espaco-3);
  font-size: clamp(18px, 0.9rem + 0.6vw, 23px);
  font-weight: var(--peso-light);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--cor-texto-medio);
  text-wrap: pretty;
}

.texto-acesso strong { font-weight: 600; }

.acesso-botoes {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 460px;
  margin-top: var(--espaco-5);
}

/* Botões retangulares das telas de acesso */
.botao-acesso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--cor-botao-acesso);
  border-radius: 6px;
  background: var(--cor-botao-acesso);
  color: var(--cor-branco);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: var(--peso-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.botao-acesso:hover { background: var(--cor-botao-acesso-hover); border-color: var(--cor-botao-acesso-hover); }

@media (max-width: 520px) { .botao-acesso { font-size: 14px; padding: 0 16px; } }

.botao-acesso svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

.botao-acesso--secundario { background: transparent; color: var(--cor-botao-acesso); }
.botao-acesso--secundario:hover { background: rgba(64, 64, 65, 0.06); border-color: var(--cor-botao-acesso); }

.botao-acesso--entrar {
  height: 54px;
  border-color: var(--cor-botao-entrar);
  border-radius: 8px;
  background: var(--cor-botao-entrar);
  font-size: 16px;
}

.botao-acesso--entrar:hover { background: var(--cor-botao-entrar-hover); border-color: var(--cor-botao-entrar-hover); }

.botao-acesso:disabled { opacity: 0.4; cursor: not-allowed; }
.botao-acesso:disabled:hover { background: var(--cor-botao-entrar); border-color: var(--cor-botao-entrar); }

/* Indicador de carregamento dentro do botão */
.carregando {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--cor-branco);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Fale conosco */
.fale-conosco {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--espaco-4);
  font-size: 15px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-medio);
}

.botao-redondo {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cor-botao-acesso);
  color: var(--cor-branco);
  transition: background 0.2s ease;
}

.botao-redondo:hover { background: var(--cor-botao-acesso-hover); }
.botao-redondo svg { width: 24px; height: 24px; }

.botao-redondo--pequeno { width: 36px; height: 36px; background: var(--cor-botao-entrar); }
.botao-redondo--pequeno:hover { background: var(--cor-botao-entrar-hover); }
.botao-redondo--pequeno svg { width: 17px; height: 17px; fill: currentColor; }

/* Formulário de login */
.login-coluna {
  width: 100%;
  max-width: calc(352px + 32px);
  margin-inline: auto;
  padding: 120px 16px var(--espaco-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 520px) { .login-coluna { padding-top: 64px; } }

.login-logo { height: 75px; width: auto; margin-bottom: var(--espaco-5); }

.login-titulo {
  font-size: 26px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto);
}

.login-subtitulo {
  margin-top: 10px;
  font-size: 17px;
  font-weight: var(--peso-light);
  letter-spacing: 0.03em;
  color: var(--cor-texto-medio);
}

.login-form { width: 100%; margin-top: var(--espaco-4); display: grid; gap: 24px; text-align: left; }

/* Campo com contorno e ícones (login) */
.campo-icone { position: relative; display: grid; gap: 6px; }

.campo-icone__caixa { position: relative; }

.campo-icone__icone {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.campo-icone__icone--esquerda { left: 14px; }

.campo-icone__entrada {
  width: 100%;
  height: 44px;
  padding: 0 44px;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: var(--cor-branco);
  font-family: var(--fonte);
  font-size: 14px;
  font-weight: var(--peso-regular);
  letter-spacing: 0.02em;
  color: var(--cor-texto);
  transition: border-color 0.2s ease;
}

.campo-icone__entrada::placeholder { color: var(--cor-texto-suave); font-weight: var(--peso-light); }
.campo-icone__entrada:focus { outline: none; border-color: var(--cor-texto); box-shadow: none; }

.campo-icone__olho {
  position: absolute;
  top: 50%;
  right: 6px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--cor-texto-suave);
}

.campo-icone__olho:hover { color: var(--cor-texto); }
.campo-icone__olho svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.campo-icone__erro { min-height: 0; font-size: 12px; color: var(--cor-erro); letter-spacing: 0.02em; }
.campo-icone.tem-erro .campo-icone__entrada { border-color: var(--cor-erro); }

.login-enviar { margin-top: 16px; }

.link-sublinhado {
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--cor-texto);
}

.login-aviso {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--cor-cinza-apoio);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-texto-medio);
  text-align: center;
}

.login-aviso--erro { background: rgba(194, 85, 77, 0.08); color: var(--cor-erro); }

.login-social { margin-top: var(--espaco-5); display: grid; justify-items: center; gap: 16px; }

.login-social__rotulo {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
}

.login-social__botoes { display: flex; gap: 24px; }

[hidden] { display: none !important; }


/* =====================================================================
   19. ÁREA DA ALUNA (etapa 3)
   ===================================================================== */
.area { background: var(--cor-fundo-area); padding-bottom: 150px; }

.area .icone,
.icone-fino {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* Cards que sobem levemente ao passar o mouse */
.sobe { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sobe:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }

/* ---------- Barra superior (Início e Aula) ---------- */
.cabecalho--area { height: 88px; }
.cabecalho--area .cabecalho__interno { grid-template-columns: auto 1fr auto; gap: var(--espaco-3); }
.logo--area img { height: 54px; }

.nav-area { display: none; justify-self: center; }

.nav-area ul { display: flex; align-items: center; }

.nav-area li { display: flex; align-items: center; }
.nav-area li + li::before { content: "|"; margin: 0 18px; color: var(--cor-borda-suave); }

.nav-area a,
.nav-area__sair {
  font-size: 14px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-nav-link);
  transition: color 0.2s ease;
}

.nav-area a:hover,
.nav-area a[aria-current="page"] { color: var(--cor-texto); }
.nav-area__sair { display: none; color: var(--cor-texto); }

/* No celular fica só a logo, centralizada */
.cabecalho--area .cabecalho__interno { justify-items: center; grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .cabecalho--area .cabecalho__interno { justify-items: stretch; grid-template-columns: auto 1fr auto; }
  .nav-area, .nav-area__sair { display: block; }
}

/* Topo sobre foto escura (tela da aula): tudo em branco até rolar */
.cabecalho--sobre-foto:not(.is-rolado) .nav-area a,
.cabecalho--sobre-foto:not(.is-rolado) .nav-area__sair { color: rgba(255, 255, 255, 0.85); }
.cabecalho--sobre-foto:not(.is-rolado) .nav-area a:hover { color: var(--cor-branco); }
.cabecalho--sobre-foto:not(.is-rolado) .logo--area img { filter: brightness(0) invert(1); }

/* ---------- Faixa branca de cabeçalho (Categorias, Aulas, Favoritos, Perfil) ---------- */
.faixa-cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cor-branco);
  box-shadow: 0 1px 0 var(--cor-borda-suave);
}

.faixa-cabecalho__topo {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  height: 76px;
}

.faixa-cabecalho__topo .logo--area { justify-self: center; }
.faixa-cabecalho__topo .logo--area img { height: 46px; }

.botao-voltar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  color: var(--cor-texto);
}

.faixa-cabecalho__titulo {
  padding: 4px 0 22px;
  font-size: 22px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ---------- Barra inferior flutuante ---------- */
.barra-inferior {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  height: 88px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  border: 1px solid var(--cor-borda-suave);
  border-radius: 20px;
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

@media (min-width: 640px) {
  .barra-inferior { left: 50%; right: auto; bottom: 20px; width: 560px; translate: -50% 0; }
}

.barra-inferior__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--peso-light);
  color: var(--cor-icone-inativo);
  transition: color 0.2s ease;
}

.barra-inferior__item:hover { color: var(--cor-texto); }

.barra-inferior__item[aria-current="page"] { color: var(--cor-texto); }

.barra-inferior__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 36px;
  height: 2px;
  translate: -50% 0;
  background: var(--cor-amarelo);
}

@media (max-width: 400px) { .barra-inferior__item { font-size: 12px; } }

/* Botão redondo de destaque no centro da barra */
.barra-inferior__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: -26px;
  font-size: 13px;
  font-weight: var(--peso-light);
  color: var(--cor-texto);
}

.barra-inferior__avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--cor-branco);
  box-shadow: 0 0 0 2px var(--cor-agua), 0 10px 24px rgba(0, 0, 0, 0.16);
  background: var(--cor-lilas);
  transition: transform 0.2s ease;
}

.barra-inferior__centro:hover .barra-inferior__avatar { transform: translateY(-2px); }
.barra-inferior__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

/* ---------- Início ---------- */
.inicio { padding-top: calc(88px + var(--espaco-4)); }

.saudacao {
  font-size: 22px;
  font-weight: var(--peso-regular);
  text-align: center;
  letter-spacing: 0.04em;
}

.saudacao strong { font-weight: 600; text-transform: uppercase; }

/* Título centralizado com linha fina de cada lado */
.titulo-linhas {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(20px, 1rem + 1.2vw, 30px);
  font-weight: var(--peso-regular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.titulo-linhas::before,
.titulo-linhas::after { content: ""; flex: 1; height: 1px; background: var(--cor-borda-suave); }

.area-secao { margin-top: var(--espaco-6); }

/* Carrossel de pilares */
.trilho-pilares {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem-lateral);
  scrollbar-width: none;
  padding: 8px var(--margem-lateral) 16px;
  margin-inline: calc(var(--margem-lateral) * -1);
}

.trilho-pilares::-webkit-scrollbar { display: none; }

.pilar { flex: 0 0 200px; scroll-snap-align: start; display: grid; gap: 6px; }

.pilar__capa {
  position: relative;
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  margin-bottom: 8px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cor-lilas);
}

.pilar__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pilar__capa::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.16); }

.pilar__manuscrito {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  font-family: var(--fonte-manuscrita);
  font-size: 44px;
  line-height: 1;
  color: var(--cor-branco);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.pilar__nome { font-size: 18px; font-weight: var(--peso-regular); }

.uma-linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pilar__descricao { font-size: 14px; font-weight: var(--peso-light); color: var(--cor-texto-suave); }
.pilar__contagem { font-size: 14px; color: var(--cor-texto-suave); }

/* Card de destaque */
.card-destaque {
  max-width: none;
  margin-inline: auto;
  display: grid;
  gap: var(--espaco-4);
  align-items: center;
  padding: var(--espaco-4);
  border-radius: 28px;
  background: var(--cor-branco);
  box-shadow: var(--sombra-card);
}

@media (min-width: 760px) {
  .card-destaque { grid-template-columns: 1fr 1.15fr; padding: var(--espaco-5); gap: var(--espaco-5); }
}

.card-destaque__titulo {
  font-size: clamp(22px, 1rem + 1.2vw, 30px);
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.card-destaque__subtitulo {
  margin-top: 12px;
  font-size: clamp(16px, 0.9rem + 0.4vw, 20px);
  font-weight: var(--peso-light);
  color: var(--cor-texto-suave);
  line-height: 1.5;
}

/* Miniatura de vídeo */
.miniatura-video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cor-lilas);
}

.miniatura-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.miniatura-video::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

.miniatura-video__titulo {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cor-branco);
}

.miniatura-video .botao-play { z-index: 1; width: 64px; height: 64px; }
.miniatura-video .botao-play svg { width: 20px; height: 20px; }

/* Etiqueta "EM ALTA" com barrinha amarela */
.etiqueta-alta {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--cor-branco);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.etiqueta-alta::before { content: ""; width: 2px; height: 11px; background: var(--cor-amarelo); }

/* Faixas de atalho */
.lista-atalhos { display: grid; gap: 16px; margin-top: var(--espaco-4); }

.faixa-atalho {
  display: grid;
  grid-template-columns: 1fr 22%;
  height: 120px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cor-faixa);
  box-shadow: var(--sombra-suave);
}

.faixa-atalho__texto {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.faixa-atalho__cor { display: grid; place-items: center; }
.faixa-atalho__cor--pessego { background: var(--cor-pastel-pessego); }
.faixa-atalho__cor--verde { background: var(--cor-pastel-verde); }
.faixa-atalho__cor--lilas { background: var(--cor-pastel-lilas); }

.faixa-atalho__botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
}

.faixa-atalho__botao .icone { width: 18px; height: 18px; }

/* Rodapé da área */
.rodape-area {
  margin-top: var(--espaco-6);
  padding: var(--espaco-5) 0 var(--espaco-3);
  border-top: 1px solid var(--cor-borda-suave);
}

.rodape-area__grade { display: grid; gap: var(--espaco-4); }

@media (min-width: 760px) {
  .rodape-area__grade { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
}

.rodape-area__logo img { height: 64px; width: auto; }

.rodape-area__titulo {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.rodape-area__links { display: grid; gap: 10px; }

.link-pequeno {
  font-size: 13px;
  font-weight: var(--peso-light);
  color: var(--cor-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cor-borda-suave);
}

.link-pequeno:hover { text-decoration-color: currentColor; }

.redes { display: flex; gap: 16px; color: var(--cor-texto); }
.redes a { display: grid; place-items: center; width: 36px; height: 36px; }

.rodape-area__copia { margin-top: var(--espaco-5); font-size: 12px; color: var(--cor-texto-suave); }

/* ---------- Layout com menu lateral (Categorias e Aulas) ---------- */
.layout-lateral {
  max-width: calc(720px + var(--margem-lateral) * 2);
  margin: var(--espaco-4) auto 0;
  padding-inline: var(--margem-lateral);
  display: grid;
  gap: var(--espaco-3);
}

@media (min-width: 760px) {
  .layout-lateral { grid-template-columns: 170px 1fr; gap: 32px; align-items: start; }
}

.menu-lateral { display: flex; overflow-x: auto; scrollbar-width: none; gap: 20px; }
.menu-lateral::-webkit-scrollbar { display: none; }

.menu-lateral a {
  flex: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-size: 16px;
  font-weight: var(--peso-regular);
  color: var(--cor-texto);
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.menu-lateral a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--cor-agua); }

@media (min-width: 760px) {
  .menu-lateral { flex-direction: column; gap: 0; position: sticky; top: 140px; }
  .menu-lateral a { white-space: normal; }
}

/* Banners de módulo */
.lista-banners { display: grid; gap: 8px; }

.banner-modulo {
  position: relative;
  display: flex;
  align-items: center;
  height: 142px;
  padding: 0 24px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
}

.banner-modulo__titulo {
  position: relative;
  z-index: 1;
  max-width: 55%;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

.banner-modulo__qtd { display: block; margin-top: 6px; font-size: 12px; font-weight: var(--peso-light); color: var(--cor-texto-suave); letter-spacing: 0.04em; }

.banner-modulo__foto {
  position: absolute;
  inset: 0 0 0 auto;
  width: 55%;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent);
  mask-image: linear-gradient(to left, #000 45%, transparent);
}

.banner-modulo__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Busca */
.busca { margin-bottom: var(--espaco-3); }

/* ---------- Grade e card de aula ---------- */
.grade-aulas { display: grid; gap: 32px 16px; }

@media (min-width: 560px) { .grade-aulas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 560px) { .grade-aulas--larga { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 24px; } }

.card-aula { display: grid; gap: 8px; align-content: start; }

.card-aula__foto {
  position: relative;
  display: block;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cor-lilas);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-aula:hover .card-aula__foto { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.card-aula__foto img { width: 100%; height: 100%; object-fit: cover; }

.card-aula__progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.5); }
.card-aula__progresso span { display: block; height: 100%; background: var(--cor-agua); }

.botao-favoritar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--cor-branco);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}

.botao-favoritar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.2s ease; }
.botao-favoritar[aria-pressed="true"] svg { fill: currentColor; }

.card-aula__dados {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: var(--peso-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}

.card-aula__dados .icone { width: 16px; height: 16px; color: var(--cor-lilas-forte); }
.card-aula__dados .barra { color: var(--cor-borda-suave); }

.card-aula__titulo { font-size: 18px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; }

.card-aula__descricao {
  font-size: 17px;
  font-weight: var(--peso-light);
  color: var(--cor-texto-suave);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Tela da aula ---------- */
.aula-capa {
  position: relative;
  height: min(700px, 92vh);
  min-height: 520px;
  overflow: hidden;
  background: var(--cor-texto);
}

.aula-capa > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 25%; }

.aula-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.05) 80%),
              linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 40%);
}

.aula-capa__conteudo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--espaco-6);
  z-index: 1;
  color: var(--cor-branco);
}

.aula-capa__acoes { display: flex; align-items: center; gap: 12px; }

.pilula-concluir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, 0.9);
  color: var(--cor-texto);
  font-size: 13px;
  font-weight: var(--peso-medium);
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}

.pilula-concluir .icone { width: 18px; height: 18px; }
.pilula-concluir[aria-pressed="true"] { background: var(--cor-agua); color: var(--cor-branco); }

.botao-coracao {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--cor-branco);
}

.botao-coracao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.botao-coracao[aria-pressed="true"] svg { fill: currentColor; }

.aula-capa__titulo {
  max-width: 720px;
  margin: 22px 0 28px;
  font-size: clamp(28px, 1.2rem + 2vw, 40px);
  font-weight: var(--peso-regular);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.botao-assistir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 52px;
  border-radius: 6px;
  background: var(--cor-branco);
  color: var(--cor-texto);
  font-size: 16px;
  font-weight: var(--peso-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s ease;
}

.botao-assistir:hover { background: #EFEFEF; }
.botao-assistir svg { width: 14px; height: 14px; fill: currentColor; }

.aula-colunas {
  display: grid;
  gap: var(--espaco-5);
  padding-block: var(--espaco-5);
}

@media (min-width: 900px) { .aula-colunas { grid-template-columns: 1fr 1.2fr; gap: 72px; } }

.rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.valor { margin-top: 4px; font-size: 13px; font-weight: var(--peso-light); color: var(--cor-texto-suave); }

.info-aula { display: flex; gap: 28px; }
.info-aula > div + div { padding-left: 28px; border-left: 1px solid var(--cor-borda-suave); }

.proxima-aula { margin-top: var(--espaco-5); }

.proxima-aula__linha {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}

.proxima-aula__miniatura { width: 120px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--cor-lilas); }
.proxima-aula__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.proxima-aula__titulo { font-size: 14px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.35; }

.play-redondo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cor-texto);
  color: var(--cor-branco);
  transition: transform 0.2s ease;
}

.play-redondo:hover { transform: scale(1.06); }
.play-redondo svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }

.materiais { margin-top: var(--espaco-5); }
.materiais ul { margin-top: 8px; }

.materiais a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-size: 14px;
}

.materiais a .icone { width: 20px; height: 20px; color: var(--cor-texto-suave); }

/* Comentários */
.comentarios__titulo { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }

.lista-comentarios { margin-top: 12px; }

.comentario {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.comentario__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cor-avatar-comentario);
  color: var(--cor-branco);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.comentario__nome { font-size: 13px; font-weight: 600; }
.comentario__texto { margin-top: 2px; font-size: 14px; font-weight: var(--peso-light); color: var(--cor-texto-medio); line-height: 1.5; }
.comentario__tempo { font-size: 12px; color: var(--cor-texto-suave); white-space: nowrap; }

.campo-comentario {
  display: flex;
  align-items: center;
  height: 48px;
  margin-top: var(--espaco-3);
  padding: 0 6px 0 20px;
  border-radius: var(--raio-pilula);
  background: var(--cor-campo-comentario);
}

.campo-comentario input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: var(--peso-regular);
  color: var(--cor-texto);
}

.campo-comentario input::placeholder { color: var(--cor-texto-suave); font-weight: var(--peso-light); }
.campo-comentario input:focus { outline: none; }
.campo-comentario:focus-within { box-shadow: 0 0 0 1px var(--cor-texto); }

.campo-comentario button { display: grid; place-items: center; width: 38px; height: 38px; color: var(--cor-texto); }
.campo-comentario button:disabled { color: var(--cor-icone-inativo); cursor: default; }
.campo-comentario button .icone { width: 20px; height: 20px; }

.contador { margin-top: 6px; text-align: right; font-size: 12px; color: var(--cor-texto-suave); }

/* Janela do vídeo */
.janela-video {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 20, 20, 0.88);
}

.janela-video__caixa { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.janela-video__caixa iframe { width: 100%; height: 100%; border: 0; }
.janela-video__aviso { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--cor-branco); font-size: 15px; line-height: 1.6; }
.janela-video__fechar { position: absolute; top: 16px; right: 16px; color: var(--cor-branco); }

/* ---------- Favoritos ---------- */
.estado-vazio { max-width: 420px; margin: var(--espaco-6) auto 0; text-align: center; display: grid; justify-items: center; gap: 14px; }
.estado-vazio svg { width: 120px; height: 100px; color: #C9C9C9; margin-bottom: 12px; }
.estado-vazio__frase { font-size: 18px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.06em; }
.estado-vazio__texto { font-size: 16px; font-weight: var(--peso-light); color: var(--cor-texto-suave); line-height: 1.6; }

/* ---------- Perfil ---------- */
.perfil { max-width: calc(var(--largura-maxima) + var(--margem-lateral) * 2); margin: var(--espaco-5) auto 0; padding-inline: var(--margem-lateral); }

/* No computador o perfil vira duas colunas: dados à esquerda, opções à direita */
@media (min-width: 900px) {
  .perfil { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; column-gap: 72px; align-items: start; }
  .perfil > :not(.outras-opcoes) { grid-column: 1; }
  .perfil > .outras-opcoes { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

.perfil__topo { display: grid; justify-items: center; gap: 14px; text-align: center; }

.avatar-grande {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor-marca-texto);
  font-size: 28px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
}

.avatar-grande img { width: 100%; height: 100%; object-fit: cover; }
.perfil__nome { font-size: 20px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.06em; }

.perfil__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: var(--espaco-4); }

.botao-quadrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100px;
  border: 1px solid var(--cor-borda-botao);
  border-radius: 8px;
  background: var(--cor-branco);
  font-size: 12px;
  font-weight: var(--peso-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.botao-quadrado:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); }

.plano-atual {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--espaco-4);
  padding: 16px 0;
  border-top: 1px solid var(--cor-borda-suave);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.icone-redondo {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cor-marca-texto);
}

.icone-redondo .icone { width: 20px; height: 20px; }
.plano-atual__rotulo { font-size: 12px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto-suave); }
.plano-atual__nome { font-size: 14px; font-weight: var(--peso-medium); }

.outras-opcoes { margin-top: var(--espaco-5); }
.outras-opcoes__titulo { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

.linha-opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-size: 14px;
  font-weight: var(--peso-regular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}

.linha-opcao .icone { width: 20px; height: 20px; color: var(--cor-texto-suave); }
.linha-opcao span { flex: 1; }
.linha-opcao .icone:last-child { width: 16px; height: 16px; }

.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 120px;
  z-index: 70;
  width: max-content;
  max-width: calc(100% - 32px);
  translate: -50% 0;
  padding: 12px 20px;
  border-radius: var(--raio-pilula);
  background: var(--cor-texto);
  color: var(--cor-branco);
  font-size: 13px;
  text-align: center;
  box-shadow: var(--sombra-card);
}

/* Ilustrações dos pilares (fundo branco, imagem inteira) */
.tem-arte { background: var(--cor-branco) !important; }
img.arte { object-fit: contain !important; padding: 7%; }
.pilar__capa.tem-arte { box-shadow: var(--sombra-suave); }
.pilar__capa.tem-arte::after { display: none; }
.proxima-aula__miniatura.tem-arte img.arte { padding: 4px; }

.arte-categoria {
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  padding: 16px;
  border-radius: 10px;
  background: var(--cor-branco);
  box-shadow: var(--sombra-suave);
}

.arte-categoria img { width: 100%; max-width: 420px; max-height: 170px; object-fit: contain; }
.tem-arte .botao-favoritar { color: var(--cor-texto); filter: none; }

/* Continue de onde parou */
.trilho-continuar {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem-lateral);
  scrollbar-width: none;
  padding: 4px var(--margem-lateral) 12px;
  margin-inline: calc(var(--margem-lateral) * -1);
}

.trilho-continuar::-webkit-scrollbar { display: none; }
.trilho-continuar > .card-aula { flex: 0 0 260px; scroll-snap-align: start; }
.trilho-continuar .card-aula__foto { height: 160px; }
.trilho-continuar .card-aula__descricao { display: none; }

.faixa-atalho__sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: var(--peso-light);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--cor-texto-suave);
}

/* Símbolos dos pilares (fundo transparente sobre a cor do bloco) */
.avatar__simbolo { object-fit: contain !important; padding: 7px; }

img.simbolo {
  position: relative;
  z-index: 1;
  width: 66% !important;
  height: 66% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.10));
}

.pilar__capa.tem-simbolo img.simbolo { position: relative; inset: auto; }
.card-aula__foto.tem-simbolo img.simbolo,
.miniatura-video.tem-simbolo img.simbolo { width: 52% !important; height: 52% !important; }
.miniatura-video.tem-simbolo { display: grid; place-items: center; }
.miniatura-video.tem-simbolo img.simbolo { position: relative; inset: auto; margin-top: -8%; }
.banner-modulo__foto.tem-simbolo { display: grid; place-items: center; }
.proxima-aula__miniatura.tem-simbolo { display: grid; place-items: center; }


/* =====================================================================
   20. ÁREA DA ALUNA — conteúdo real (áudio, texto da aula, carregamento)
   ===================================================================== */
.aula-capa__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.botao-assistir .icone { width: 18px; height: 18px; }
.botao-assistir--contorno { background: transparent; color: var(--cor-branco); border: 1px solid rgba(255, 255, 255, 0.8); }
.botao-assistir--contorno:hover { background: rgba(255, 255, 255, 0.12); }
.aula-capa__aviso { font-size: 15px; color: rgba(255, 255, 255, 0.85); }

.texto-aula { margin-top: 24px; font-size: 16px; font-weight: var(--peso-light); line-height: 1.75; color: var(--cor-texto-medio); }
.texto-aula p + p, .texto-aula p + ul, .texto-aula p + ol, .texto-aula ul + p, .texto-aula ol + p { margin-top: 12px; }
.texto-aula h3, .texto-aula h4 { margin: 28px 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto); }
.texto-aula h4 { font-size: 12px; color: var(--cor-texto-suave); }
.texto-aula ul, .texto-aula ol { margin-top: 8px; padding-left: 22px; list-style: disc; }
.texto-aula ol { list-style: decimal; }
.texto-aula li { margin-top: 6px; }
.texto-aula strong { font-weight: 600; color: var(--cor-texto); }
.texto-aula blockquote { margin: 16px 0; padding-left: 16px; border-left: 2px solid var(--cor-amarelo); font-style: italic; }

.comentario__apagar { margin-top: 4px; font-size: 12px; color: var(--cor-texto-suave); text-decoration: underline; text-underline-offset: 2px; }

.janela-audio {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 40px 28px 28px;
  border-radius: 20px;
  background: var(--cor-branco);
  text-align: center;
}

.janela-audio__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cor-marca-texto); }
.janela-audio__titulo { font-size: 15px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; }
.janela-audio__estado { font-size: 14px; color: var(--cor-texto-suave); }
.janela-audio__player { width: 100%; }

.carregando-area { display: grid; place-items: center; min-height: 60vh; }
.carregando--escuro { width: 28px; height: 28px; border-color: rgba(31, 31, 31, 0.15); border-top-color: var(--cor-texto); }


/* =====================================================================
   21. PAINEL DA LUCIANA (admin)
   ===================================================================== */
.admin { min-height: 100vh; background: var(--cor-fundo-area); }

.admin-topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--cor-branco);
  box-shadow: 0 1px 0 var(--cor-borda-suave);
}

.admin-topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.admin-topo__marca { display: flex; align-items: center; gap: 14px; }
.admin-topo__marca img { height: 44px; width: auto; }
.admin-topo__titulo { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.admin-topo__links { display: flex; align-items: center; gap: 20px; font-size: 12px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.1em; }

.admin-grade { display: grid; gap: 24px; padding-block: 32px 80px; }
@media (min-width: 900px) { .admin-grade { grid-template-columns: 240px 1fr; gap: 32px; align-items: start; } }

.admin-rotulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cor-texto-suave); margin-bottom: 10px; }

.admin-pilares { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 900px) { .admin-pilares { flex-direction: column; position: sticky; top: 104px; } }

.admin-pilar {
  display: flex; align-items: center; gap: 12px;
  flex: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  text-align: left;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.admin-pilar:hover { background: rgba(255, 255, 255, 0.7); }
.admin-pilar[aria-current="true"] { background: var(--cor-branco); box-shadow: var(--sombra-suave); font-weight: 600; }
.admin-pilar__cor { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.admin-pilar__qtd { margin-left: auto; font-size: 12px; font-weight: var(--peso-light); color: var(--cor-texto-suave); }

.admin-cartao { padding: 24px; border-radius: 16px; background: var(--cor-branco); box-shadow: var(--sombra-suave); }
.admin-cartao + .admin-cartao { margin-top: 20px; }

.admin-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.admin-cabeca h1, .admin-cabeca h2 { font-size: 18px; font-weight: var(--peso-medium); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-cabeca p { margin-top: 4px; font-size: 14px; font-weight: var(--peso-light); color: var(--cor-texto-suave); }
.admin-botoes { display: flex; flex-wrap: wrap; gap: 10px; }

.botao--pequeno { min-height: 40px; padding: 10px 20px; font-size: 11px; letter-spacing: 0.14em; }

.admin-modulos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.admin-modulos .etiqueta { cursor: pointer; }

.admin-aulas { margin-top: 20px; }

.admin-aula {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--cor-borda-suave);
}

.admin-aula__ordem { display: grid; gap: 2px; }
.admin-aula__ordem button { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 6px; color: var(--cor-texto-suave); }
.admin-aula__ordem button:hover:not(:disabled) { background: var(--cor-cinza-apoio); color: var(--cor-texto); }
.admin-aula__ordem button:disabled { opacity: 0.25; cursor: default; }
.admin-aula__ordem svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.admin-aula__titulo { font-size: 15px; font-weight: var(--peso-medium); line-height: 1.35; }
.admin-aula__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 12px; color: var(--cor-texto-suave); }

.admin-aula__acoes { display: flex; align-items: center; gap: 6px; }

.botao-mini {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  color: var(--cor-texto-suave);
  transition: background 0.2s ease, color 0.2s ease;
}

.botao-mini:hover { background: var(--cor-cinza-apoio); color: var(--cor-texto); }
.botao-mini svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.botao-mini--perigo:hover { color: var(--cor-erro); }

.selo-status {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 12px;
  border-radius: var(--raio-pilula);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--cor-cinza-apoio); color: var(--cor-texto-suave);
  white-space: nowrap;
}

.selo-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo-status--publicada { background: var(--cor-agua-clara); color: #2E8C7F; }

.admin-vazio { padding: 28px 0 8px; text-align: center; font-size: 14px; color: var(--cor-texto-suave); }

/* Gaveta lateral de edição */
.gaveta { position: fixed; inset: 0; z-index: 60; }
.gaveta__fundo { position: absolute; inset: 0; background: rgba(31, 31, 31, 0.25); }

.gaveta__painel {
  position: absolute; inset: 0 0 0 auto;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: var(--cor-branco);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.08);
}

.gaveta__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--cor-borda-suave); }
.gaveta__topo h2 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.gaveta__corpo { flex: 1; overflow-y: auto; padding: 24px; display: grid; gap: 20px; align-content: start; }
.gaveta__rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--cor-borda-suave); }

textarea.campo__entrada { min-height: 120px; resize: vertical; line-height: 1.6; font-size: 15px; }
select.campo__entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .campo-linha { grid-template-columns: 1fr; } }

.opcao-marcar { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.opcao-marcar input { width: 18px; height: 18px; accent-color: var(--cor-texto); }

.admin-material { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; }
.admin-material .campo__entrada { min-height: 44px; padding: 10px 14px; font-size: 14px; }

.admin-audio-atual { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--cor-cinza-apoio); font-size: 13px; word-break: break-all; }

.admin-previa { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--cor-texto-suave); }
.admin-previa img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }

/* Botão oficial do Google no login */
.google-oficial { display: grid; place-items: center; min-width: 40px; min-height: 40px; }

/* Páginas com menu lateral usam a largura toda do computador */
.layout-lateral { max-width: calc(var(--largura-maxima) + var(--margem-lateral) * 2); }
@media (min-width: 760px) { .layout-lateral { grid-template-columns: 200px 1fr; gap: 48px; } }
@media (min-width: 560px) { .layout-lateral .grade-aulas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 24px; } }
@media (min-width: 1100px) {
  .lista-banners { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .lista-banners .arte-categoria { grid-column: 1 / -1; }
}