/*
 * Cleaned and organised stylesheet for your site.
 *
 * This file has been restructured to remove duplicate rules and unused
 * declarations. Styles are grouped by section for clarity. The base
 * resets, variables, layout helpers, component styles, and responsive
 * overrides live in clearly defined blocks. Mobile‐specific rules are
 * placed at the bottom of the file inside a max‑width media query, and
 * desktop adjustments are contained within a min‑width media query.
 */

/* ------------------------------------------------------------------
   CSS Variables
   ------------------------------------------------------------------ */

:root {
  --bg: #ffffff;
  --ink: #0b0b0c;
  --muted: #474c52;
  --accent: #d6a67c;
  --line: #eceff3;

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto,
    sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;

  --maxw: 1120px;
  --pad: clamp(16px, 3vw, 28px);
  --radius: 14px;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Variables consumed by the JavaScript scroll animations */
  --viewport-anchor: 0.5;
  --lead-vh: 0.8;
  

  --fs-base: clamp(16px, 1.1vw + 12px, 19px); /* ~16–19px */
  --lh-base: 1.65;
  

}

/* ------------------------------------------------------------------
   Base and Global Elements
   ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}
html, body { height: auto; min-height: 100%; }
body { min-height: 100svh; } /* força pelo menos a viewport visível */

html { font-size: var(--fs-base); }
body { line-height: var(--lh-base); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html { overflow-x: clip; }   /* moderno, evita a barra surgir */
body { overflow-x: hidden; } /* fallback */

img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Accent utility */
.accent {
  color: var(--accent);
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section {
  padding: clamp(48px, 8vw, 100px) 0;
}

.center {
  text-align: center;
  justify-content: center;
}

/* ------------------------------------------------------------------
   About Section
   ------------------------------------------------------------------ */

/* Grid layout for the photo and text */
.grid {
  display: grid;
  gap: clamp(16px, 3vw, 22px);
}

@media (min-width: 860px) {
  .grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

/* Uppercase eyebrow label */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  padding-left: 2px;
  line-height: 2;
  font-weight: 600;
}

/* Section titles */
.title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.14;
  margin: 0;
}

/* Subtitle under the title (hidden by default) */
.sans {
  font-family: var(--font-serif);
  font-size: clamp(16px, 3.8vw, 28px);
  margin: -20px 0 0;
  line-height: 120%;
  display: none;
}

.about .about__text p {
  margin: 8px 0 0;
}

/* ------------------------------------------------------------------
   Buttons & Footer
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 700;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  margin-top: 30px;
}

.btn--primary {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}

.btn--primary:hover {
  transform: translateY(-1px);
}

.fineprint {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Theme override helper for CTA buttons */
.bg-accent {
  background-color: var(--accent);
}

/* ------------------------------------------------------------------
   Scenes (sticky scrollytelling)
   ------------------------------------------------------------------ */

/* Each scene section */
.scene {
  position: relative;
  min-height: 110vh;
  border-top: 0 solid var(--line);
}

.scene:last-of-type {
  padding-bottom: 20vh; /* ou 200px, conforme o gosto */
}

/* Wrapper for image + text (single column on mobile) */
.scene__wrap {
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  grid-template-columns: 1fr;
  align-items: start;
  height: 100%;
}

/* Alternate order of image/text on desktop using data‑side */
.scene[data-side="right"] .scene__media {
  order: 2;
}
.scene[data-side="right"] .scene__pin {
  order: 1;
}

/* Sticky containers: use the same window for image and text */
.scene__pin,
.scene__media {
  position: sticky;
  top: 22vh;
  height: 75vh; /*era 76*/
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Text container: centre text vertically and horizontally */
.scene__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--pad);
  text-align: center;
  opacity: var(--z-opacity, 1);
}

/* Scene headings */
.scene__title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(28px, 8.4vw, 66px);
  line-height: 1.06;
  margin: 0;
  padding: 0;
  text-align: center;
  opacity: var(--t-opacity, 0);
  transform: none !important;
  transition: opacity 0s;
}

/* Scene paragraphs */
.scene__body {
  max-width: min(780px, 92vw);
  color: var(--muted);
  font-size: clamp(18px, 3vw, 20px);
  line-height: 1.55;
  margin: 16px 0 0;
  text-align: center;
  opacity: var(--p-opacity, 0);
  transform: none !important;
  transition: opacity 0s;
}

/* Image column wrapper */
.scene__media {
  align-self: start;
}

/* Images inside scenes */
.scene__media img {
  width: 80%;
  height: 80%;
  margin: 0 auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
  opacity: var(--img-opacity, 0);
  transform: translateY(var(--img-ty, 0)) scale(1);
  transition: opacity 0s, transform 0s;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------
   Focus Section
   ------------------------------------------------------------------ */

.focus {
  background: linear-gradient(180deg, #fff, #f7f4f0);
  height: auto;/*90vh;*/
  /*margin-top:45vh;*/
}

.focus-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.focus-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transform: translateY(8px) translateX(-10px);
  opacity: 0;
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}

.focus-item.is-in {
  transform: none;
  opacity: 1;
}

/* ------------------------------------------------------------------
   Topbar (appears after the first section on scroll)
   ------------------------------------------------------------------ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1),
              opacity 0.45s cubic-bezier(.2,.7,.2,1);
  backdrop-filter: saturate(160%) blur(10px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--line); /*tirei por enquanto*/
}

.topbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.topbar__wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.txt-center {
  text-align: center;
}

.topbar__brand {
  font-family: var(--font-serif);
  font-size: 14pt;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 0.9;
}

.terapeuta {
  font: 12px var(--font-sans);
  line-height: 0.2;
  font-weight: 400;
}

.topbar__cta {
  font-size: 10pt;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}

.topbar__cta:active {
  transform: scale(0.98);
}

/* Hide only the CTA button when the final call‑to‑action section is visible */
.topbar.hide-cta .topbar__cta {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

/* Avoid content being overlapped by the bar (applied via JS) */
.has-topbar-padding body,
.has-topbar-padding .scene:first-of-type,
.has-topbar-padding .about:first-of-type {
  scroll-margin-top: 64px;
}

/* ------------------------------------------------------------------
   Footer Section
   ------------------------------------------------------------------ */


.footer {
  padding: 14px 0;
}


/* ------------------------------------------------------------------
   Accessibility Focus Styles
   ------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, #fff);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Desktop Adjustments (≥980px)
   ------------------------------------------------------------------ */

@media (min-width: 980px) {
  /* Scenes become two columns with narrower containers and reduced gaps */
  .scene {
    min-height: 100vh;
    border-top: 0px solid var(--line);
  }

  .scene .container {
    max-width: 980px;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .scene__wrap {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 1.2vw, 16px);
  }

  /* Sticky windows: central alignment of content */
  .scene__pin,
  .scene__media {
    top: 12vh;
    height: 96vh;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .about.section {
  height:100vh;}

  /* Remove extra margins and control spacing between title and paragraph */
  .scene__title,
  .scene__body {
    margin: 0 !important;
    padding: 0 !important;
  }
  .scene__body {
    margin-top: 12px !important;
  }

  /* Image sizing and centring within its column */
  .scene__media img {
    width: 70% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Ensure the text column has comfortable width */
  .scene__body {
    max-width: 640px !important;
  } 
  

}

/* ------------------------------------------------------------------
   Mobile Adjustments (< 980px)
   ------------------------------------------------------------------ */

@media (max-width: 979.98px) {
  /* Always display text before image on mobile */
  .scene__wrap {
    display: grid;
    grid-template-columns: 1fr;
  }
  .scene__pin {
    order: 1;
  }
  .scene__media {
    order: 2;
  }
  /* Ignore data-side alternation on mobile */
  .scene[data-side="right"] .scene__media { order: 1; }
  .scene[data-side="right"] .scene__pin   { order: 2; }
  .scene[data-side="left"]  .scene__media { order: 1; }
  .scene[data-side="left"]  .scene__pin   { order: 2; }
  
  

  /* About image: force 4:3 ratio with slight zoom but no overflow */
  .about__image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    margin: 0;
    display: block;
  }
  .about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    transform-origin: center;
    border-radius: inherit;
    display: block;
  }

  /* Special rule for CTA buttons with three classes (btn, btn--primary, bg-accent) */
  .btn.btn--primary.bg-accent {
    padding: 8px 10px;
    font-size: 0.875rem;
  }
  
  .footer {
  padding: 14px 0;
  }
}




/* Primeira seção (#sobre): centralização vertical + horizontal */
.about.section#sobre {
  /*max-height: 100svh;               ocupa a altura inteira da janela */
  display: flex;                  /* cria um contexto flex para a seção */
  align-items: center;            /* centraliza verticalmente o .container */
  padding: 0;
}

/* Centraliza o conteúdo dentro do container */
.about.section#sobre .container {
  width: 100%;
}

/* A grade alinha os dois lados (foto + texto) no centro vertical */
.about.section#sobre .grid {
  align-items: center;            /* centro vertical entre imagem e texto */
  justify-items: center;          /* centro horizontal de cada coluna */
  gap: clamp(16px, 3vw, 24px);
}

/* Textos centralizados e bloco com largura confortável */
.about.section#sobre .about__text {
  text-align: center;             /* centraliza os textos */
  max-width: 680px;               /* limita largura para leitura */
}

/* A imagem fica centralizada na sua coluna */
.about.section#sobre .about__image {
  display: grid;
  place-items: center;
}

/* Em telas grandes, mantém duas colunas; em mobile, empilha */
@media (min-width: 860px) {
  .about.section#sobre .grid {
    grid-template-columns: 1.1fr 1fr; /* sua proporção original */
  }
}

@media (max-width: 859.98px) {
  .about.section#sobre .grid {
    grid-template-columns: 1fr;  /* empilha imagem e texto no mobile */
  }
  .about.section#sobre .about__text {
    padding: 0 var(--pad);
  }
  .footer {
  /*margin-bottom:50px;*/
  }
}

.focus {
  background: linear-gradient(0deg, #fff, #f7f4f0);
  height: 90vh;
  padding-top: 20vh;
  padding-bottom: 20vh;
}

.section {
/*  min-height: 99vh;*/
/*  max-height: 100vh;*/
  }
  
  .footer {
  min-height: 70px;
  max-height: 70px;
  padding: 14px 0;
  
  }
  
  
  
  /* HERO SECTION – imagem de fundo em tela cheia */
#inicio {
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;     /* ocupa toda a altura da tela */
  padding: 0 var(--pad); /* mantém espaçamento lateral padrão */
}

#inicio .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

/* Opcional: sobreposição suave para legibilidade */
#inicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9); /* ajuste opacidade conforme o contraste */
  z-index: 0;
}

/* HERO – impedir vazamento da imagem de fundo */
#inicio{
  position: relative;
  min-height: 100svh;                  /* usa viewport visível no iOS */
  padding: 0 var(--pad);               /* sem padding vertical no hero */
  background-image: url("IMG/hero-bg.png"); /* use o nome do seu arquivo */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;              /* cobre sem distorcer */
  background-color: var(--bg);         /* cor de fundo de segurança */
  overflow: hidden;                    /* corta qualquer bleed interno */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;                  /* garante que o ::before não vaze */
}

#inicio .container{ position: relative; z-index: 1; max-width: 800px; }


/* Garante que não exista rolagem lateral em nenhuma página */
html, body{ overflow-x: hidden; }

/* Evita que a primeira seção depois do hero “grude” visualmente */
#sobre{ scroll-margin-top: 64px; }      /* mantém comportamento da topbar */

.scene__frame {
  position: relative;
  min-height: 100%;
}


/* garante que o frame tenha altura própria (não 0) */
.scene__frame {
  position: relative;
  min-height: 100%;
}


/* Scene headings */
.scene__title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(28px, 8.4vw, 66px);
  line-height: 1.06;
  margin: 0;
  padding: 0;
  text-align: center;
  /* REMOVIDO: opacity: var(--t-opacity, 0); */
  transform: none !important;
  transition: opacity 0.25s linear;
}

/* Scene paragraphs */
.scene__body {
  max-width: min(780px, 92vw);
  color: var(--muted);
  font-size: clamp(18px, 3vw, 20px);
  line-height: 1.55;
  margin: 16px 0 0;
  text-align: center;
  /* REMOVIDO: opacity: var(--p-opacity, 0); */
  transform: none !important;
  transition: opacity 0.25s linear;
}

/* Images inside scenes */
.scene__media img {
  width: 80%;
  height: 80%;
  margin: 0 auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
  /* REMOVIDO: opacity: var(--img-opacity, 0);
     REMOVIDO: transform: translateY(var(--img-ty, 0)) scale(1);
     REMOVIDO: transition: opacity 0s, transform 0s; */
  transition: opacity 0.25s linear; /* transição suave controlada pelo JS */
  will-change: opacity;
}




/* Garante que nada comece travado em 0 por CSS (o JS controla inline) */
.scene__title,
.scene__body,
.scene__media img {
  opacity: 1;                    /* estado base visível */
  transition: opacity 0.25s linear; /* animação suave quando JS muda */
}

/* (IMPORTANTE) Remova qualquer regra antiga do tipo:
   opacity: var(--t-opacity, 0);
   opacity: var(--p-opacity, 0);
   opacity: var(--img-opacity, 0);
   Elas não são mais necessárias. */
   
   
   
   
   
   
   
   
   /* === STICKY SAFE: nenhum ancestor com overflow travando === */
html, body,
.section, .scene, .scene__frame, .container {
  overflow: visible;       /* importante p/ sticky funcionar */
}

/* === Alturas e offset usando svh (iOS barra dinâmica) === */
.scene {
  min-height: 100svh;      /* cada cena ocupa a janela */
}

.scene__frame {
  position: relative;
  min-height: 100svh;      /* garante espaço p/ sticky ancorar */
}

/* Janela sticky comum para imagem e texto */
.scene__pin,
.scene__media {
  position: sticky;
  top: 12svh;              /* “janela” que ambos compartilham */
  height: 76svh;           /* 12 + 76 = 88svh de área útil */
  margin: 0;
  padding: 0;
}

/* Layout dentro do sticky */
.scene__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  text-align: center;
}

/* Imagem bem centralizada e sem distorcer */
.scene__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene__media img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--radius);
  /* Opacidade será controlada pelo JS via var() */
  opacity: var(--img-opacity, 1);
  transform: translateY(var(--img-ty, 0));
  transition: opacity 0.18s linear, transform 0.18s linear;
  will-change: opacity, transform;
}

/* Texto: mesmas variáveis controladas pelo JS */
.scene__title {
  opacity: var(--t-opacity, 0);
  transition: opacity 0.18s linear;
}

.scene__body {
  opacity: var(--p-opacity, 0);
  transition: opacity 0.18s linear;
}

/* Desktop: duas colunas + janela sticky um pouco maior */
@media (min-width: 980px) {
  .scene { min-height: 92svh; }
  .scene__frame { min-height: 92svh; }
  .scene__pin, .scene__media {
    top: 10svh;
    height: 80svh;
  }
  .scene .container {
    max-width: 980px;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .scene__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 1.2vw, 16px);
  }
  .scene__media img {
    width: 70%;
    height: auto;
  }
}

/* Mobile: texto antes da imagem (como já estava) */
@media (max-width: 979.98px) {
  .scene__wrap {
    display: grid;
    grid-template-columns: 1fr;
  }
  .scene[data-side="right"] .scene__media { order: 1; }
  .scene[data-side="right"] .scene__pin   { order: 2; }
  .scene[data-side="left"]  .scene__media { order: 1; }
  .scene[data-side="left"]  .scene__pin   { order: 2; }
  
  
  

  
}






/* FAQ (details/summary) com animação suave */
#duvidas details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  /*padding: 10px 14px;*/
  margin: 10px 0;
}

#duvidas summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}

#duvidas summary::-webkit-details-marker { display: none; }

#duvidas details[open] {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Conteúdo que anima (altura + opacidade) */
#duvidas .faq__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 280ms var(--easing), opacity 260ms linear;
  will-change: max-height, opacity;
}

#duvidas details[open] .faq__content {
  /* estes valores serão animados também via JS pra altura exata */
  opacity: 1;
}

/* espaçamento do parágrafo dentro do accordion */
#duvidas .faq__content p {
  color: var(--muted);
  margin: 10px 0 0;
}

/* Seção de dúvidas ocupa toda a altura visível */
#duvidas {
  min-height: 100svh;           /* usa altura da viewport visível (iOS seguro) */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* centraliza verticalmente o conteúdo inicial */
  padding: clamp(48px, 8vh, 80px) 0;
  background: linear-gradient(180deg, #fff, #f8f6f4);
  scroll-margin-top: 64px;      /* evita esconder atrás da topbar */
}

#duvidas .container {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

/* =========================
   FAQ (+ / –) para <details>
   ========================= */
.faq {
  max-width: 820px;
  margin: clamp(16px, 4vh, 28px) auto 0;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin: 10px 0;
  padding:0;
  overflow: clip; /* evita “vazar” conteúdo arredondado */
}

.faq__summary {
  /* zera o estilo padrão e mantém acessível */
  list-style: none;
  cursor: pointer;
  padding: 15px;
  /*padding-left: 10px;*/
  font-weight: 600;
  display: grid;
  grid-template-columns: 1fr auto; /* texto | ícone */
  align-items: left;
  gap: 12px;
  text-align: left;
}

.faq__summary::-webkit-details-marker { display: none; } /* Safari/iOS */
.faq__summary::marker { content: ""; } /* Firefox */

.faq__summary::after {
  content: "+";                 /* ícone fechado */
  font-size: 22px;
  line-height: 1;
  width: 22px;
  text-align: center;
  color: var(--ink);
  transition: transform .25s var(--easing), opacity .25s var(--easing);
}

/* estado aberto muda para “–” */
.faq__item[open] .faq__summary::after {
  content: "–";
  transform: rotate(0deg);
}

/* feedback ao focar pelo teclado */
.faq__summary:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, #fff);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

/* corpo da resposta */
.faq__content {
  padding: 0 15px 16px 15px;
  color: var(--muted);
  line-height: 1.6;
  hyphens: auto;
  text-align: left;
  text-wrap: pretty;
}

/* micro toque: sombra leve quando abre */
.faq__item[open] {
  box-shadow: 0 6px 26px rgba(0,0,0,.04);
}
   
   
/* já existe no seu CSS, só garanta estas linhas */
#duvidas .faq__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 280ms var(--easing),
              opacity 260ms linear,
              padding 280ms var(--easing); /* <— adiciona padding à transição */
  will-change: max-height, opacity, padding;
  padding-top: 0; /* padding-top/bottom começam zerados */
  padding-bottom: 0; /* padding-top/bottom começam zerados*/
  
}
  
  
  #duvidas .faq__content,
#duvidas .faq__content p,
#duvidas .faq__content li {
  text-align: left;          /* ocupa toda a largura */
  text-align-last: auto;        /* mude para 'justify' se quiser a última linha 100% */
  hyphens: auto;                /* hifenização automática */
  -webkit-hyphens: auto;        /* Safari */
  overflow-wrap: normal;        /* não “quebra feio” antes de hifenar */
  word-break: normal;           /* idem */
}
 
 /* 1) Hifenização (inclui Safari) */
#duvidas .faq__content,
#duvidas .faq__content p,
#duvidas .faq__content li {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty; /* navegs Chromium ajudam a distribuir melhor */
}


   
   
/* ====== Animations: utilidades declarativas ====== */

/* estado inicial comum (antes de entrar) */
[data-anim] {
  will-change: transform, opacity;
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
  opacity: 0;           /* começa invisível */
  transform: none;      /* cada variação redefine */
}

/* quando entrar na viewport */
[data-anim].is-in {
  opacity: 1;
  transform: none;
}

/* Variações (definem transform de partida) */
[data-anim="fade"]           { transform: none; }
[data-anim="fade-up"]        { transform: translateY(32px); }
[data-anim="fade-down"]      { transform: translateY(-52px); }
[data-anim="fade-left"]      { transform: translateX(-32px); }
[data-anim="fade-right"]     { transform: translateX(32px); }
[data-anim="zoom-in"]        { transform: scale(0.80); }
[data-anim="zoom-out"]       { transform: scale(1.20); }

/* Delays (em milissegundos via data-attr) */
[data-anim][data-delay="100"] { transition-delay: 100ms; }
[data-anim][data-delay="200"] { transition-delay: 200ms; }
[data-anim][data-delay="300"] { transition-delay: 300ms; }
[data-anim][data-delay="400"] { transition-delay: 400ms; }
[data-anim][data-delay="600"] { transition-delay: 600ms; }

/* Velocidades opcionais */
[data-anim][data-speed="fast"]  { transition-duration: 450ms; }
[data-anim][data-speed="slow"]  { transition-duration: 1800ms; }

/* Reentradas (se quiser animar toda vez que aparecer) */
[data-anim][data-repeat="true"] { /* JS vai remover is-in ao sair */ }

/* Acessibilidade: reduzir movimento respeitando prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }
}




/* 1) Hero: já está ok, só padronizando */
#inicio {
  min-height: 100svh;           /* usa viewport visível no iOS */
  display: flex;
  align-items: center;
}

/* 2) Quem sou: trocar de max-height para min-height e centralizar */
.about.section#sobre {
  min-height: 100svh;           /* era max-height */
  display: flex;
  align-items: center;
}

/* 3) 3 passos: ocupar a tela e centralizar verticalmente */
#como-funciona.section {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* opcional: evite “excesso” de respiro vertical dentro dessas 3 */
#inicio.section,
#sobre.section,
#como-funciona.section {
  padding-top: 10svh !important;
  padding-bottom: 10svh !important;
}





/* Corrige o alinhamento vertical do bloco "Quem sou" */
.about.section#sobre {
  display: flex;
  align-items: center;         /* centra verticalmente o .container */
}

.about.section#sobre .container {
  width: 100%;
}

.about.section#sobre .grid {
  display: grid;
  align-items: center;         /* centro vertical dos dois lados */
  justify-items: center;       /* centro horizontal */
  height: 100%;                /* <--- ESSENCIAL */
  gap: clamp(16px, 3vw, 24px);
}

.about.section#sobre .about__image,
.about.section#sobre .about__text {
  align-self: center;          /* garante alinhamento individual */
}

.mobileonly {
  display:none;
  }
  
@media (max-width: 979.98px) {
  .about.section#sobre {
  min-height: 100svh;           /* era max-height */
  }
  
  /* opcional: evite “excesso” de respiro vertical dentro dessas 3 */
#inicio.section,
#sobre.section,
#como-funciona.section {
  padding-top: 10svh !important;
  padding-bottom: 10svh !important;
}

  
.mobileonly {
  display:block;
  }

}



/* mantém o -10px, mas não deixa vazar*/ 
.focus-list { overflow-x: hidden; }





.break {
display:block;
 min-height: 10svh;
 min-width:100vw;
 
}


.pt25 {
 padding-top: 25svh;
}

.pb25 {
 padding-bottom: 25svh;
}


.pt5 {
 padding-top: 5svh;
}

.pb5 {
 padding-bottom: 5vh;
}



#duvidas .faq__content p:last-child {
  margin-bottom: 10px;
}


p,
li,
dd,
dt {
  font-size: 1rem;        /* todo texto corrido usa o base */
  line-height: var(--lh-base);
  margin: 0 0 1em;
  color: var(--ink);
}

/* 4) Opcional: fortalecer a regra contra componentes que setam font-size
   Use :where() para manter baixa especificidade, mas prevalecer por ficar no final */
:where(.scene__body,
      .about .about__text p,
      .faq__content p) {
  font-size: 1rem;
  line-height: var(--lh-base);
}

/* 5) Utilitários simples (para exceções pontuais) */
.text-sm { font-size: 0.875rem; }   /* ~14px–16px dependendo da base */
.text-md { font-size: 1rem; }       /* base */
.text-lg { font-size: 1.125rem; }   /* leve destaque */
.text-xl { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); }

/* 6) Pequenos ajustes por breakpoint (opcional) */
@media (max-width: 360px) {
  :root { --fs-base: 15px; } /* garante legibilidade em telas bem estreitas */
}


@media (max-width: 979.98px) {
  #inicio {
    background-image: url("IMG/hero-bg-mobile.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}













/* ===========================
   TYPO SYSTEM — PADRONIZAÇÃO
   =========================== */

:root {
  /* Escala tipográfica (usa clamp p/ responsivo) */
  --fs-display: clamp(36px, 7vw, 64px);   /* herói / scene__title */
  --fs-h1:     clamp(28px, 4.8vw, 48px);  /* .title (seções) */
  --fs-h2:     clamp(20px, 2.2vw, 26px);  /* subtítulos / .sans */
  --fs-body:   1rem;                      /* já baseado em --fs-base */
  --fs-small:  0.9375rem;                 /* ~15px */
  --fs-xsmall: 0.8125rem;                 /* ~13px */

  /* Alturas de linha */
  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-body:  var(--lh-base, 1.65);
  --lh-fine:  1.45;

  /* Espaçamento entre letras */
  --track-wide: 0.18em;
}

/* ========== Mapeamento dos estilos existentes ========== */

/* HEADINGS GRANDES (Hero / Cenas) */
:where(.scene__title) {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
}

/* HEADINGS DE SEÇÃO (Quem sou / Sessões / Dúvidas etc.) */
:where(.title) {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0 0 0.4em;
}

/* SUBTÍTULO CURTO (linha abaixo do title) */
:where(.sans) {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--muted);
  margin: 0.25em 0 0;
  display: block; /* deixe visible; remova se quiser continuar “hidden” */
}

/* EYEBROW / OVERLINE */
:where(.eyebrow) {
  font: 600 var(--fs-xsmall)/2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
  margin: 0 0 10px;
  padding-left: 2px;
}

/* BODY / PARÁGRAFOS / LISTAS */
:where(p, li, dd, dt, .scene__body, .about .about__text p, .faq__content p) {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* MICRO / FINEPRINT */
:where(.fineprint, .terapeuta) {
  font-family: var(--font-sans);
  font-size: var(--fs-xsmall);
  line-height: var(--lh-fine);
  color: var(--muted);
}

/* MARCA DO TOPO */
:where(.topbar__brand) {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-small);
  line-height: 1.1;
}

/* FAQ summary (pergunta) — legível e consistente */
:where(.faq__summary) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

/* BOTÕES — levemente menores que body; altura compacta */
:where(.btn) {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Utilitários opcionais */
.text-sm { font-size: var(--fs-small); line-height: var(--lh-body); }
.text-md { font-size: var(--fs-body);  line-height: var(--lh-body); }
.text-lg { font-size: 1.125rem;        line-height: var(--lh-snug); }
.text-xl { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); line-height: var(--lh-snug); }

/* Ajuste fino para telas muito estreitas */
@media (max-width: 360px) {
  :root { --fs-base: 15px; } /* já existia — mantém legibilidade */
}






* {
 outline: 0px solid red;
}