/* Mentoria ROTA — estilos do site.
   Cores e fontes ficam nas variáveis do :root; para mudar uma cor no site todo, mude só aqui. */
:root {
  --vinho: #590E22;
  --vinho-escuro: #3D0712;
  --marrom: #28140E;
  --marrom-medio: #5C4A42;
  --cobre: #8C4E37;
  --cobre-escuro: #7A4330;
  --creme: #F2EDEB;
  --creme-claro: #FAF7F5;
  --rosa-claro: #F5DDD3;
  --rosa: #EBD9D2;
  --rosa-queimado: #D9A491;
  --bege: #D8C7BE;
  --cinza-claro: #E8E4E1;
  --branco: #FFFFFF;
  --serif: 'Playfair Display',Georgia,serif;
  --sans: "Work Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
/* Fontes auto-hospedadas: mesmos arquivos e regras que o Google Fonts entregava
   (Playfair Display v40, Work Sans v24, subconjunto latino) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Base */
*,*::before,*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
picture {
  display: contents;
}
picture source {
  display: none;
}
a {
  color: var(--vinho);
}
/* :where() deixa esta regra mais fraca que as classes, como era quando os estilos ficavam inline:
   só escurece links que não têm cor própria (hoje, só a marca do cabeçalho). */
:where(a):hover {
  color: var(--vinho-escuro);
}
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
/* Giro da seta da pergunta aberta (ativado em 12/10/2026 a pedido da Gabriela; no design original
   ficava bloqueado). O seletor é mais forte que o .faq-chev, por isso vence mesmo vindo antes. */
details[open] .faq-chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}
section[id] {
  scroll-margin-top: 80px;
}

/* Cabeçalho */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme-claro);
  border-bottom: 1px solid var(--cinza-claro);
}
.cabecalho-barra {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 clamp(16px,5vw,24px);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px,2.5vw,16px);
}
.marca {
  display: flex;
  align-items: center;
  gap: clamp(8px,2.2vw,14px);
  min-width: 0;
  text-decoration: none;
}
.marca-logo {
  height: clamp(30px,8vw,52px);
  width: auto;
  flex-shrink: 0;
}
.marca-assinatura {
  padding-left: clamp(8px,2.2vw,14px);
  border-left: 1px solid var(--bege);
  font-size: clamp(11px,3vw,14px);
  line-height: 1.3;
  color: var(--marrom-medio);
}
.btn-cabecalho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 clamp(12px,3.5vw,18px);
  border-radius: 999px;
  background: var(--vinho);
  color: var(--branco);
  font-size: clamp(12px,3.4vw,14px);
  line-height: 1.15;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
}

/* Peças repetidas em várias seções */
.container {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 24px;
}
.secao {
  padding: clamp(72px,8vw,112px) 0;
}
.coluna-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sobretitulo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobre);
}
.sobretitulo-claro {
  color: var(--rosa-claro);
}
.sobretitulo-escuro {
  color: var(--cobre-escuro);
}
.titulo-secao {
  margin-top: 14px;
  max-width: 720px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px,3.4vw,42px);
  line-height: 1.15;
  color: var(--vinho);
  text-wrap: balance;
}
.titulo-secao-claro {
  color: var(--branco);
}
.titulo-coluna {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px,3.4vw,42px);
  line-height: 1.15;
  color: var(--vinho);
}

/* Chamada principal (#topo) */
.secao-topo {
  padding: clamp(48px,7vw,96px) 0 clamp(64px,8vw,112px);
}
.topo-grade {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: clamp(40px,6vw,88px);
  align-items: center;
}
.topo-titulo {
  margin-top: 20px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(40px,5.2vw,66px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--vinho);
  text-wrap: balance;
  font-variant-ligatures: no-common-ligatures;
}
.topo-texto {
  margin-top: 24px;
  max-width: 520px;
  font-size: clamp(18px,1.6vw,20px);
  line-height: 1.55;
  color: var(--marrom-medio);
  text-wrap: pretty;
}
.topo-acoes {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--vinho);
  color: var(--branco);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.btn-secundario {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--vinho);
  color: var(--vinho);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.topo-foto-caixa {
  position: relative;
  justify-self: stretch;
}
.topo-foto {
  height: auto;
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 640px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 14px;
}

/* Para quem é (#para-quem) */
.secao-para-quem {
  background: var(--creme-claro);
  padding: clamp(72px,8vw,112px) 0;
  border-top: 1px solid var(--cinza-claro);
}
.situacoes {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
}
.situacao {
  background: var(--branco);
  border: 1px solid var(--bege);
  border-radius: 14px;
  padding: 26px 28px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  color: var(--vinho);
}
.para-quem-fecho {
  margin-top: 36px;
  font-size: 18px;
  color: var(--marrom-medio);
}

/* Método ROTA (#metodo) */
.secao-metodo {
  background: var(--vinho);
  color: var(--creme);
  padding: clamp(72px,8vw,112px) 0;
}
.etapas {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 0;
  border-top: 1px solid rgba(242,237,235,.22);
}
.etapa {
  padding: 32px 28px 36px 0;
  border-bottom: 1px solid rgba(242,237,235,.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.etapa-letra {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  color: var(--rosa-queimado);
}
.etapa-titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--branco);
}
.etapa-texto {
  font-size: 16px;
  line-height: 1.55;
  color: var(--rosa);
  text-wrap: pretty;
}
.metodo-nota {
  margin-top: 40px;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--rosa);
  text-wrap: pretty;
}
.metodo-nota-destaque {
  color: var(--branco);
  font-weight: 600;
}

/* Opções de serviço (#opcoes) */
.cartoes {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 24px;
  align-items: stretch;
}
.cartao {
  background: var(--creme-claro);
  border: 1px solid var(--bege);
  border-radius: 14px;
  padding: clamp(28px,3vw,40px);
  display: flex;
  flex-direction: column;
}
.cartao-destaque {
  background: var(--branco);
  border: 1px solid var(--rosa-queimado);
  border-radius: 14px;
  padding: clamp(28px,3vw,40px);
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 4px 0 var(--vinho);
}
.cartao-rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobre);
}
.cartao-titulo {
  margin-top: 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px,2.4vw,30px);
  line-height: 1.2;
  color: var(--vinho);
}
.cartao-resumo {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--marrom-medio);
  text-wrap: pretty;
}
.cartao-lista {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--bege);
}
.cartao-item {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--marrom);
}
.seta {
  color: var(--vinho);
  font-weight: 600;
}
.cartao-observacao {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--marrom-medio);
}
.cartao-acao {
  margin-top: auto;
  padding-top: 32px;
}
.btn-cartao-contorno {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--vinho);
  color: var(--vinho);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.btn-cartao {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--vinho);
  color: var(--branco);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Quem sou eu (#sobre) */
.secao-sobre {
  background: var(--bege);
  padding: clamp(72px,8vw,112px) 0;
}
.sobre-grade {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: clamp(40px,6vw,88px);
  align-items: center;
}
.sobre-foto {
  height: auto;
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 600px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 14px;
}
.sobre-texto {
  margin-top: 22px;
  max-width: 540px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--marrom);
  text-wrap: pretty;
}
.sobre-texto-seguinte {
  margin-top: 16px;
}

/* Perguntas frequentes (#duvidas) */
.duvidas-grade {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px,5vw,72px);
  align-items: flex-start;
}
.duvidas-intro {
  flex: 1 1 300px;
}
.duvidas-texto {
  margin-top: 18px;
  max-width: 360px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--marrom-medio);
}
.faq-lista {
  flex: 2 1 520px;
  min-width: 0;
  border-top: 1px solid var(--bege);
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--bege);
}
.faq-pergunta {
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-size: 18px;
  font-weight: 500;
  color: var(--vinho);
}
.faq-chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-right: 2px solid var(--cobre);
  border-bottom: 2px solid var(--cobre);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-resposta {
  padding: 0 40px 24px 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--marrom-medio);
  max-width: 68ch;
}

/* Chamada final (#contato) */
.secao-contato {
  background: var(--vinho-escuro);
  padding: clamp(72px,8vw,112px) 0;
}
.contato-grade {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: clamp(40px,6vw,80px);
  align-items: center;
}
.contato-titulo {
  margin-top: 16px;
  max-width: 620px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px,4.2vw,54px);
  line-height: 1.1;
  color: var(--branco);
  text-wrap: balance;
}
.contato-texto {
  margin-top: 22px;
  max-width: 480px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--creme);
}
.btn-contato {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--rosa-claro);
  color: var(--vinho);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.contato-foto {
  height: auto;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 14px;
}

/* Rodapé */
.rodape {
  background: var(--marrom);
  color: var(--bege);
  padding: 40px 0;
}
.rodape-barra {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rodape-marca {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rodape-logo {
  height: 56px;
  width: auto;
}
.rodape-assinatura {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bege);
}
.rodape-direita {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.rodape-sociais {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rodape-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(216,199,190,.35);
  color: var(--creme);
  text-decoration: none;
}
.rodape-copyright {
  font-size: 13px;
  color: var(--bege);
}

/* Botão flutuante de WhatsApp */
.btn-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--vinho);
  color: var(--branco);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(40,20,14,.25);
}

/* Hovers (antes: atributo style-hover do Claude Design) */
.hv1:hover {
  background: var(--vinho-escuro) !important;
  color: var(--branco) !important;
}
.hv2:hover {
  background: rgba(89,14,34,.06) !important;
}
.hv3:hover {
  background: rgba(89,14,34,.06) !important;
  color: var(--vinho) !important;
}
.hv4:hover {
  background: var(--creme-claro) !important;
  color: var(--vinho) !important;
}
.hv5:hover {
  background: var(--rosa-claro) !important;
  color: var(--vinho) !important;
  border-color: var(--rosa-claro) !important;
}
#wa-flutuante[hidden] {
  display: none !important;
}

/* Foco do teclado: só aparece navegando com Tab (não com mouse ou toque) */
a:focus-visible,summary:focus-visible {
  outline: 3px solid var(--vinho);
  outline-offset: 3px;
}
#metodo :focus-visible,#contato :focus-visible,footer :focus-visible {
  outline-color: var(--rosa-claro);
}
#wa-flutuante:focus-visible {
  outline: 3px solid var(--creme-claro);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--vinho) !important;
}

/* Quem pediu "reduzir movimento" no sistema não recebe rolagem suave nem animação */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .faq-chev {
    transition: none !important;
  }
}