/* ==========================================================================
   /mentoria — Mentoria Lips & Skin, com a Dra. Mariane Felin
   --------------------------------------------------------------------------
   O visual é o da proposta comercial da mentoria (Lips & Skin — Proposta da
   Mentoria, 18/10/2026): marfim, areia, quase preto e o vermelho do lábio. As
   letras são as do site (Noto Sans e Inter), a pedido da dona. O cabeçalho, o rodapé
   e o botão flutuante continuam os do site.

   Cada bloco é um painel com o canto arredondado do site (--raio-secao),
   um embaixo do outro. Do celular para cima:
     celular     ≤ 767 px  foto em cima, texto embaixo
     tablet      768–1199  lado a lado onde cabe
     computador  ≥ 1200 px

   Índice
     2. Tokens
     3. Painel e tipografia comuns
     4. Capa
     5. Uma mentora. Um aluno.
     6. Para quem é
     7. Como a mentoria acontece
     8. Na prática
     9. Os módulos
    10. Alunos certificados
    11. Perguntas
    12. Chamada final
   ========================================================================== */


/* ==========================================================================
   2. Tokens (os mesmos da proposta)
   ========================================================================== */

.pagina-mentoria {
  --ls-marfim: #f3eee8;
  --ls-areia: #e8e0d6;
  --ls-escuro: #141110;
  --ls-tinta: #1c1714;
  --ls-texto: #4e443d;
  --ls-texto-suave: #776a60;
  --ls-texto-claro: #a89a8e;
  --ls-creme: #e8e0d6;
  --ls-vinho: #9c1f2b;
  --ls-vinho-escuro: #7f1823;
  --ls-rosa: #c98b8b;
  --ls-linha: #d9cfc4;
  --ls-linha-escura: rgba(243, 238, 232, 0.16);

  /* as letras do site: Noto Sans no texto e nos títulos (800, como os
     títulos do site) e Inter Bold no nome "Lips & Skin" */
  --ls-titulo: var(--fonte-texto);
  --ls-sans: var(--fonte-texto);
  --ls-marca: var(--fonte-destaque);

  --ls-recuo: 24px;      /* recuo interno dos painéis: 24 no celular, 48 no tablet, 72 no computador */
  --ls-vao: 16px;        /* espaço entre um painel e outro */
}

@media (min-width: 768px) {
  .pagina-mentoria {
    --ls-recuo: 48px;
    --ls-vao: 20px;
  }
}

@media (min-width: 1200px) {
  .pagina-mentoria {
    --ls-recuo: 72px;
  }
}


/* ==========================================================================
   3. Painel e tipografia comuns
   ========================================================================== */

.ls-painel {
  position: relative;
  width: 100%;
  max-width: var(--largura-conteudo);
  padding: calc(var(--ls-recuo) + 16px) var(--ls-recuo);
  border-radius: var(--raio-secao);
  overflow: hidden;
  background: var(--ls-marfim);
  color: var(--ls-tinta);
  font-family: var(--ls-sans);
}

.ls-painel + .ls-painel {
  margin-top: var(--ls-vao);
}

.ls-painel--areia {
  background: var(--ls-areia);
}

.ls-painel--escuro {
  background: var(--ls-escuro);
  color: var(--ls-marfim);
}

/* Rótulo em caixa alta com espaço entre as letras ("MENTORIA INDIVIDUAL") */
.ls-sobretitulo {
  display: block;
  font-family: var(--ls-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ls-vinho);
}

.ls-painel--escuro .ls-sobretitulo {
  color: var(--ls-rosa);
}

.ls-titulo {
  font-family: var(--ls-titulo);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--ls-justo);
  color: var(--ls-tinta);
  text-wrap: balance;
}

.ls-painel--escuro .ls-titulo {
  color: var(--ls-marfim);
}

.ls-texto {
  font-family: var(--ls-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--ls-padrao);
  color: var(--ls-texto);
}

.ls-painel--escuro .ls-texto {
  color: var(--ls-texto-claro);
}

.ls-nota {
  font-family: var(--ls-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ls-texto-suave);
  letter-spacing: var(--ls-padrao);
}

/* O traço vermelho de 64 px embaixo dos títulos */
.ls-traco {
  flex: none;
  width: 64px;
  height: 2px;
  background: var(--ls-vinho);
}

/* Título e frase no alto de um painel */
.ls-cabeca {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

.ls-cabeca .ls-texto {
  max-width: 560px;
}

/* Botão do WhatsApp em vermelho-lábio (o .botao do site dá a forma e o
   texto que rola no hover). Quebra a linha se a tela for estreita. */
.ls-botao {
  max-width: 100%;
  background: var(--ls-vinho);
  color: #fff;
  font-family: var(--ls-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--ls-padrao);
  transition: background-color 0.3s var(--curva-suave);
}

.ls-botao:hover,
.ls-botao:focus-visible {
  background: var(--ls-vinho-escuro);
}

/* Até 359 px o rótulo (com o ícone) não cabe numa linha: quebra e centraliza */
@media (max-width: 359.98px) {
  .ls-botao {
    padding: 14px 22px;
    white-space: normal;
    text-align: center;
  }
}

.ls-painel--escuro .ls-botao:focus-visible {
  outline-color: var(--ls-marfim);
}

.ls-painel a:not(.botao):not(.link-seta) {
  color: inherit;
  text-underline-offset: 3px;
}

.ls-painel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   4. Capa
   Celular: a foto em cima (recorte 4:5, nos lábios) e o texto embaixo.
   A partir de 768 px: texto à esquerda e foto à direita, com o degradê da
   proposta entre os dois.
   ========================================================================== */

.ls-capa {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.ls-capa__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  overflow: hidden;
}

.ls-capa__foto img {
  object-position: 50% 62%;
}

.ls-capa__foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, var(--ls-escuro) 0%, rgba(20, 17, 16, 0) 100%);
  pointer-events: none;
}

.ls-capa__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: -32px;
  padding: 0 var(--ls-recuo) calc(var(--ls-recuo) + 8px);
}

.ls-capa__titulo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-weight: 400;
}

.ls-capa__marca {
  display: block;
  font-family: var(--ls-marca);
  font-size: clamp(2.75rem, 1rem + 9vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ls-marfim);
}

.ls-capa__subtitulo {
  font-family: var(--ls-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ls-creme);
}

.ls-capa__local {
  margin-top: -10px;
  font-family: var(--ls-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ls-texto-claro);
}

.ls-capa__frase {
  max-width: 460px;
  color: var(--ls-creme) !important;
}

.ls-assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 12px;
}

/* O logo da Dra. é escuro com fundo transparente: em branco no fundo escuro */
.ls-assinatura__logo {
  width: 180px !important;
  height: auto !important;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.ls-assinatura__registro {
  font-family: var(--ls-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-texto-claro);
}

@media (min-width: 768px) {
  .ls-capa__subtitulo {
    font-size: 0.9375rem;
    letter-spacing: 0.24em;
  }

  .ls-capa {
    flex-direction: row-reverse;
    min-height: 640px;
  }

  .ls-capa__foto {
    flex: 0 0 45%;
    aspect-ratio: auto;
    max-height: none;
  }

  .ls-capa__foto img {
    position: absolute;
    inset: 0;
    object-position: 50% 50%;
  }

  .ls-capa__foto::after {
    inset: 0 auto 0 0;
    width: 40%;
    height: auto;
    background: linear-gradient(to right, var(--ls-escuro) 0%, rgba(20, 17, 16, 0) 100%);
  }

  .ls-capa__texto {
    flex: 1 1 auto;
    justify-content: center;
    gap: 24px;
    margin-top: 0;
    padding: calc(var(--ls-recuo) + 24px) 0 calc(var(--ls-recuo) + 24px) var(--ls-recuo);
  }
}

@media (min-width: 1200px) {
  .ls-capa {
    min-height: 720px;
  }
}


/* ==========================================================================
   5. Uma mentora. Um aluno. O dia inteiro.
   ========================================================================== */

.ls-mentora {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ls-mentora__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ls-mentora__titulo {
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ls-mentora__titulo em {
  display: block;
  font-style: normal;
  font-weight: 800;
  color: var(--ls-vinho);
}

.ls-mentora__texto .ls-texto {
  max-width: 440px;
}

.ls-mentora__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 calc(var(--ls-recuo) * -1) calc((var(--ls-recuo) + 16px) * -1);
  overflow: hidden;
}

.ls-mentora__foto img {
  object-position: 50% 30%;
}

.ls-mentora__foto figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 64px var(--ls-recuo) 24px;
  background: linear-gradient(to top, rgba(20, 17, 16, 0.72) 0%, rgba(20, 17, 16, 0) 100%);
  font-family: var(--ls-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ls-marfim);
}

@media (min-width: 768px) {
  .ls-mentora {
    flex-direction: row;
    align-items: center;
    min-height: 600px;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .ls-mentora__texto {
    flex: 1 1 auto;
    padding: calc(var(--ls-recuo) + 16px) 0;
  }

  .ls-mentora__foto {
    flex: 0 0 45%;
    align-self: stretch;
    aspect-ratio: auto;
    margin: 0;
  }

  .ls-mentora__foto img {
    position: absolute;
    inset: 0;
  }
}


/* ==========================================================================
   6. Para quem é
   ========================================================================== */

.ls-publico {
  display: grid;
  gap: 32px;
}

.ls-publico__cabeca {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ls-publico__lista {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ls-linha);
}

.ls-publico__lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ls-linha);
  font-family: var(--ls-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ls-tinta);
  letter-spacing: var(--ls-padrao);
}

.ls-publico__lista svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--ls-vinho);
}

@media (min-width: 900px) {
  .ls-publico {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }

  .ls-publico__nota {
    grid-column: 2;
  }
}


/* ==========================================================================
   7. Como a mentoria acontece
   ========================================================================== */

.ls-como {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ls-como__itens {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.ls-como__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ls-vinho);
}

.ls-icone {
  width: 32px;
  height: 32px;
  color: var(--ls-vinho);
}

.ls-como__titulo {
  font-family: var(--ls-titulo);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ls-tinta);
  letter-spacing: var(--ls-padrao);
}

.ls-incluso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ls-linha);
}

.ls-incluso__rotulo {
  font-family: var(--ls-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ls-vinho);
}

.ls-incluso__itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ls-incluso__itens li {
  font-family: var(--ls-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ls-tinta);
  letter-spacing: var(--ls-padrao);
}

@media (min-width: 600px) {
  .ls-como__itens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ls-incluso {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
  }

  .ls-incluso__itens {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 32px;
  }
}

@media (min-width: 1200px) {
  .ls-como__itens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
  }
}


/* ==========================================================================
   8. Na prática
   Celular: o texto em cima e as duas fotos lado a lado embaixo.
   ========================================================================== */

.ls-pratica {
  display: flex;
  flex-direction: column-reverse;
  gap: 40px;
}

.ls-pratica__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ls-pratica__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ls-pratica__foto {
  aspect-ratio: 9 / 14;
  overflow: hidden;
  border-radius: 4px;
}

.ls-pratica__foto:first-child img {
  object-position: 60% 50%;
}

@media (min-width: 768px) {
  .ls-pratica {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .ls-pratica__fotos {
    flex: 0 0 50%;
    gap: 16px;
  }

  .ls-pratica__texto {
    flex: 1 1 auto;
  }
}


/* ==========================================================================
   9. Os módulos
   ========================================================================== */

.ls-modulos {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ls-modulos__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.ls-modulo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 32px;
  border: 1px solid var(--ls-linha);
  background: #faf7f3;
}

.ls-modulo__numero {
  font-family: var(--ls-marca);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ls-vinho);
}

.ls-modulo__nome {
  margin-top: 8px;
  font-family: var(--ls-titulo);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ls-tinta);
  letter-spacing: var(--ls-justo);
}

.ls-modulo__carga {
  font-family: var(--ls-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ls-texto-suave);
}

.ls-modulo__tema {
  margin-top: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ls-linha);
  font-family: var(--ls-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ls-tinta);
  letter-spacing: var(--ls-padrao);
}

.ls-modulo .ls-texto {
  margin-top: 4px;
}

.ls-modulo--escuro {
  border-color: var(--ls-escuro);
  background: var(--ls-escuro);
}

.ls-modulo--escuro .ls-modulo__numero {
  color: var(--ls-rosa);
}

.ls-modulo--escuro .ls-modulo__nome,
.ls-modulo--escuro .ls-modulo__tema {
  color: var(--ls-marfim);
}

.ls-modulo--escuro .ls-modulo__carga {
  color: var(--ls-texto-claro);
}

.ls-modulo--escuro .ls-modulo__tema {
  border-bottom-color: var(--ls-linha-escura);
}

.ls-modulo--escuro .ls-texto {
  color: var(--ls-texto-claro);
}

.ls-modulos__chamada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

@media (min-width: 900px) {
  .ls-modulos__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .ls-modulo {
    padding: 32px 28px 36px;
  }

  .ls-modulos__chamada {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
  }
}


/* ==========================================================================
   10. Alunos certificados
   Até 899 px, uma fila que rola para o lado dentro do painel (com o
   "encaixe" em cada foto); a partir de 900 px, as cinco lado a lado.
   ========================================================================== */

.ls-alunos {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ls-alunos__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 16px;
  margin: 0 calc(var(--ls-recuo) * -1);
  padding: 8px var(--ls-recuo) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--ls-recuo);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.ls-alunos__lista > li {
  scroll-snap-align: start;
}

.ls-aluno {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.ls-aluno__foto {
  aspect-ratio: 5 / 7;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(28, 23, 20, 0.14);
}

.ls-aluno figcaption {
  font-family: var(--ls-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--ls-texto);
  letter-spacing: var(--ls-padrao);
}

@media (min-width: 900px) {
  .ls-alunos__lista {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 20px;
    margin: 0;
    padding: 8px 0 16px;
    overflow: visible;
  }
}


/* ==========================================================================
   11. Perguntas (o <details> do site, com as cores e a letra da página)
   ========================================================================== */

.ls-perguntas {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ls-perguntas .perguntas {
  max-width: 860px;
  border-top-color: var(--ls-linha);
}

.ls-perguntas .pergunta {
  border-bottom-color: var(--ls-linha);
}

.ls-perguntas .pergunta summary {
  font-family: var(--ls-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls-padrao);
  color: var(--ls-tinta);
}

.ls-perguntas .pergunta summary::before,
.ls-perguntas .pergunta summary::after {
  background: var(--ls-vinho);
}

.ls-perguntas .link-seta {
  color: var(--ls-vinho);
}


/* ==========================================================================
   12. Chamada final
   ========================================================================== */

.ls-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.ls-final__marca {
  font-family: var(--ls-marca);
  font-size: clamp(2.75rem, 1rem + 7vw, 5.75rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ls-marfim);
}

.ls-final__frase {
  max-width: 420px;
}

.ls-final__registro {
  margin-top: 12px;
  font-family: var(--ls-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-texto-claro);
}

.ls-final__registro a {
  text-transform: none;
  letter-spacing: 0.04em;
}