/* ==========================================================================
   Daniela Reges | Landing page
   Paleta: azul petróleo (destaque), verde sálvia (detalhes), areia (fundo)
   Forma: botões e etiquetas em pílula; imagens, cards e painéis com raio 16px
   ========================================================================== */

/* Albert Sans servida pelo próprio site (fonte variável, recorte latin do
   Google Fonts). Os pesos declarados são os mesmos que o Google servia. */
@font-face {
  font-family: "Albert Sans";
  src: url("assets/fonts/albert-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("assets/fonts/albert-sans-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
}

:root {
  --sand: #f3ede3;
  --sand-deep: #e9e0d2;
  --sand-line: #dcd2c2;

  --petrol: #1f4e5a;
  --petrol-hover: #183f49;
  --petrol-deep: #163b45;

  --sage: #8fa68e;
  --sage-soft: #dde4d6;
  --sage-deep: #5f7a63;
  --sage-light: #a9bea7; /* sálvia para usar sobre o petróleo */

  --ink: #1c2b30;
  --muted: #4b5b5f;
  --on-petrol: #eef1ea;
  --on-petrol-muted: #c4d8d4;

  --font: "Albert Sans", system-ui, sans-serif;
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 9rem);
  --nav-h: 72px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: var(--sage) var(--sand);
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--muted);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, blockquote, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: italic; }
strong { color: var(--ink); font-weight: 500; }

::selection { background: var(--sage-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* ---------- Tipografia ---------- */

.h2 {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.display {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}

.lead-xl {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lead-xl em, .display em { color: var(--petrol); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn i { font-size: 1.1em; transition: transform 0.3s var(--ease); }
.btn:hover i { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--petrol); color: var(--on-petrol); }
.btn--primary:hover { background: var(--petrol-hover); }

.btn--ghost { color: var(--petrol); border-color: var(--sand-line); }
.btn--ghost:hover { border-color: var(--petrol); }

.btn--sm { min-height: 44px; padding: 0.7rem 1.25rem; font-size: 0.9375rem; }
.btn--lg { min-height: 58px; padding: 1rem 2.25rem; font-size: 1.0625rem; }

/* ---------- Navegação ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(243 237 227 / 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(220 210 194 / 0.7);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__brand { display: block; flex-shrink: 0; }
.nav__brand img { height: 34px; width: auto; }

.nav__links {
  display: flex;
  gap: 2.25rem;
  font-size: 0.9375rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.nav__links a:hover { color: var(--petrol); }

@media (max-width: 767px) {
  .nav nav { display: none; }
  .nav__brand img { height: 27px; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  min-height: calc(100dvh - var(--nav-h) - 13rem);
}

.hero__text { display: grid; gap: 2rem; justify-items: start; }

.hero__quote blockquote p {
  font-size: clamp(2.125rem, 4.2vw, 3.625rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__quote em { color: var(--petrol); }

.hero__quote figcaption {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero__quote figcaption::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--sage);
}

/* tag de atendimento acima do nome */
.hero__tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--petrol);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}
.hero__tag i { font-size: 1.125rem; }
.hero__tag-sep { width: 1px; height: 0.9em; background: var(--sage); }

.hero__lead-sep { color: var(--sage); font-weight: 300; margin-inline: 0.15em; }

@media (max-width: 767px) {
  /* no celular: tag em duas linhas alinhadas e nome com subtítulo embaixo */
  .hero__tag { border-radius: var(--radius); padding: 0.65rem 1rem; column-gap: 0.6rem; }
  .hero__tag-sep { display: none; }
  .hero__tag span:last-child { flex-basis: 100%; padding-left: calc(1.125rem + 0.6rem); font-weight: 400; }
  .hero__lead-sep { display: none; }
  .hero__lead strong { display: block; }
}

.hero__lead {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__media { position: relative; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 12% -7% -6% 14%;
  border-radius: var(--radius);
  background: var(--sage-soft);
}

/* moldura de imagem: proporção reservada para não haver salto de layout */
.frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-deep);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--tall { aspect-ratio: 4 / 5; }
.frame--online { aspect-ratio: 4 / 3; }
.frame--online img { object-position: 62% 50%; }

/* faixa com o formato do atendimento, logo abaixo do hero */
.facts {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: 1.5rem;
  border-block: 1px solid var(--sand-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}
.facts li { display: flex; align-items: center; gap: 1rem; font-size: 0.9375rem; line-height: 1.45; }
.facts strong { display: block; font-weight: 500; font-size: 1rem; }
.facts__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--petrol);
  font-size: 1.5rem;
}
@media (max-width: 767px) {
  .facts { grid-template-columns: 1fr; padding-block: 1.25rem; gap: 1rem; }
}

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 2.25rem; }
  /* no celular a foto vem primeiro, em recorte mais baixo para o texto aparecer logo */
  .hero__media { order: -1; width: calc(100% - 1rem); max-width: 520px; }
  .hero__media::before { inset: 10% -1rem -1rem 18%; }
  .hero__media .frame--tall { aspect-ratio: 1 / 1; }
  .hero__media .frame img { object-position: 50% 30%; }
}

/* momento de entrada: texto em cascata, imagem se abrindo como uma cortina */
@media (prefers-reduced-motion: no-preference) {
  .hero__in {
    animation: rise 1.1s var(--ease) backwards;
    animation-delay: calc(var(--i) * 110ms + 80ms);
  }
  .hero__media .frame img {
    animation: unveil 1.6s var(--ease) 0.25s backwards;
  }
}
@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
}
@keyframes unveil {
  from { clip-path: inset(100% 0 0 0); scale: 1.08; }
  to   { clip-path: inset(0 0 0 0); scale: 1; }
}

/* ---------- A escuta analítica ----------
   Bloco escuro e centralizado. Círculos concêntricos finos atrás da frase,
   como a voz que ressoa no silêncio; ao rolar, eles se expandem. */

.escuta {
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 32%, var(--petrol) 0%, transparent 100%),
    var(--petrol-deep);
  color: var(--on-petrol-muted);
}
.escuta ::selection { background: var(--sage); color: var(--petrol-deep); }

.escuta__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  text-align: center;
}

.escuta__rings {
  position: absolute;
  z-index: -1;
  top: -6%;
  left: 50%;
  width: min(820px, 140vw);
  translate: -50% 0;
  pointer-events: none;
}
.escuta__rings circle { fill: none; stroke: var(--sage); stroke-width: 1; }
.escuta__rings circle:nth-child(1) { opacity: 0.5; }
.escuta__rings circle:nth-child(2) { opacity: 0.38; }
.escuta__rings circle:nth-child(3) { opacity: 0.27; }
.escuta__rings circle:nth-child(4) { opacity: 0.18; }
.escuta__rings circle:nth-child(5) { opacity: 0.1; }

.escuta__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sage-light);
  margin-bottom: 1.75rem;
}

.escuta__lead {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--on-petrol);
  max-width: 22ch;
  text-wrap: balance;
}
.escuta__lead em { color: var(--sage-light); }

.escuta__text {
  margin-top: 2rem;
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 54ch;
  text-wrap: balance;
}

.gains { margin-top: clamp(4rem, 8vw, 6rem); width: 100%; }
.gains__intro { color: var(--sage-soft); font-size: 1.0625rem; margin-bottom: 2rem; }
.gains__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 920px;
  margin-inline: auto;
}
.gains__list li {
  display: grid;
  justify-items: center;
  gap: 1rem;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--on-petrol);
  text-wrap: balance;
}
.gains__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgb(143 166 142 / 0.6);
  background: rgb(255 255 255 / 0.05);
  color: var(--sage-soft);
  font-size: 1.75rem;
}

@media (max-width: 767px) {
  .escuta__rings { top: -3%; }
  .gains { margin-top: 3.5rem; }
  .gains__intro { margin-bottom: 1.25rem; text-wrap: balance; }
  /* no celular, lista compacta: ícone à esquerda, texto ao lado */
  .gains__list { grid-template-columns: 1fr; gap: 0; max-width: 360px; }
  .gains__list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.875rem;
    text-align: left;
    border-top: 1px solid rgb(255 255 255 / 0.1);
  }
  .gains__list li:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.1); }
  .gains__icon { flex-shrink: 0; width: 48px; height: 48px; font-size: 1.375rem; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .escuta__rings circle {
      transform-origin: 400px 400px;
      animation: ripple linear backwards;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    .escuta__rings circle:nth-child(2) { animation-range: entry 15% cover 48%; }
    .escuta__rings circle:nth-child(3) { animation-range: entry 20% cover 51%; }
    .escuta__rings circle:nth-child(4) { animation-range: entry 25% cover 54%; }
    .escuta__rings circle:nth-child(5) { animation-range: entry 30% cover 57%; }
  }
}
@keyframes ripple {
  from { scale: 0.6; opacity: 0; }
}

/* ---------- Quem sou eu ----------
   Foto com a citação sobreposta; o texto vira quatro pilares com ícone. */


.quem__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.quem__media { margin: 0; position: relative; }

.quem__quote {
  position: relative;
  margin: -5rem 0 0 clamp(1rem, 3vw, 2.5rem);
  padding: 1.75rem 1.75rem 1.9rem;
  border-radius: var(--radius);
  background: var(--petrol);
  color: var(--on-petrol);
  box-shadow: 0 18px 40px -18px rgb(22 59 69 / 0.45);
}
.quem__quote i { font-size: 2rem; color: var(--sage); display: block; margin-bottom: 0.5rem; }
.quem__quote p {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
}

.quem__text { display: grid; gap: 1.25rem; }
.quem__intro { font-size: 1.1875rem; margin-bottom: 0.75rem; }

.pillars { display: grid; gap: 1.75rem; }
.pillars li { display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; align-items: start; }
.pillars__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--sage-soft);
  color: var(--petrol);
  font-size: 1.75rem;
}
.pillars h3 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0.2rem 0 0.35rem;
}
.pillars p { max-width: 58ch; }

@media (max-width: 899px) {
  .quem__grid { grid-template-columns: 1fr; }
  .quem__media { max-width: 460px; }
}
@media (max-width: 767px) {
  /* no celular o ícone fica acima do título */
  .pillars { gap: 2.25rem; }
  .pillars li { grid-template-columns: 1fr; gap: 1rem; }
  .pillars h3 { margin-top: 0; }
}

/* ---------- O corpo em movimento ----------
   Faixa de abertura em largura total (título no petróleo + foto),
   sintomas como uma frase grande com os termos destacados. */

.corpo {
  background: var(--sand-deep);
  border-bottom: 1px solid var(--sand-line);
  padding-bottom: var(--section-y);
}

.corpo__stage {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: clamp(440px, 72vh, 680px);
}

.corpo__stage-text {
  background: var(--petrol-deep);
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

.corpo__title {
  font-size: clamp(2rem, 3.4vw, 3.125rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--on-petrol);
  max-width: 14ch;
  text-wrap: balance;
}

.corpo__stage-img { position: relative; overflow: hidden; }
.corpo__stage-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.corpo__body {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(4rem, 8vw, 7rem);
}

.corpo__intro { max-width: 40ch; padding-top: 0.5rem; }

.corpo__signals {
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.corpo__signals span {
  color: var(--petrol);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.corpo__note {
  margin-top: 1.5rem;
  font-style: italic;
  max-width: 52ch;
}

.corpo__map {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--sand-line);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.corpo__map-text { display: grid; gap: 1.5rem; }
.corpo__map-text p:last-child { max-width: 50ch; }
.corpo__map-lead {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.corpo__map-lead em { color: var(--petrol); }

/* mapa vivo: mente, história e biologia ligadas por um triângulo */
.mapa {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 300 / 260;
  justify-self: center;
  margin-bottom: 2rem; /* espaço para os rótulos abaixo dos círculos */
}
.mapa__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa__lines path {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.mapa__node {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}
.mapa__node--top   { left: 50%; top: 15.4%; }
.mapa__node--left  { left: 14%; top: 81.5%; }
.mapa__node--right { left: 86%; top: 81.5%; }
.mapa__dot {
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 84px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--sand);
  border: 1px solid var(--sage);
  color: var(--petrol);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
}
.mapa__label {
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mapa__lines path {
      animation: draw linear backwards;
      animation-timeline: view();
      animation-range: entry 30% cover 50%;
    }
  }
}
@keyframes draw { from { stroke-dashoffset: 1; } }

@media (max-width: 899px) {
  .corpo__stage { grid-template-columns: 1fr; min-height: 0; }
  .corpo__stage-text { padding: 3rem var(--gutter) 2.5rem; }
  .corpo__stage-img { aspect-ratio: 4 / 3; }
  .corpo__body, .corpo__map { grid-template-columns: 1fr; }
  .mapa { max-width: 300px; margin-bottom: 2rem; }
}

/* ---------- Como trabalho ----------
   Três movimentos ligados por uma linha vertical (integrar, reorganizar, sustentar). */

.metodo__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.metodo__sub { color: var(--muted); margin-top: 0.5rem; }

.jornada {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
}
.jornada li { display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; align-items: start; position: relative; }
/* conector do ícone até o próximo item */
.jornada li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31.5px;
  top: 72px;
  bottom: calc(-1 * clamp(1.75rem, 3vw, 2.5rem) + 8px);
  width: 1px;
  background: var(--sage);
}
.jornada__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--petrol);
  color: var(--sage-soft);
  font-size: 1.875rem;
}
.jornada h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0.6rem 0 0.4rem;
}
.jornada p { max-width: 52ch; }

@media (max-width: 899px) {
  .metodo__grid { grid-template-columns: 1fr; }
  .metodo__media { order: -1; max-width: 460px; }
}

/* ---------- Perguntas ---------- */

.perguntas { padding-top: 0; }

.perguntas__panel {
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--petrol) 0%, var(--petrol-deep) 70%);
  color: var(--on-petrol-muted);
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 5rem);
}
.perguntas__panel ::selection { background: var(--sage); color: var(--petrol-deep); }

.perguntas__title {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--on-petrol);
  max-width: 22ch;
  text-wrap: balance;
}

.perguntas__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  columns: 3 260px;
  column-gap: 1rem;
}
.perguntas__grid li {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 1.75rem 1.5rem 1.6rem;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
  transition: background-color 0.4s var(--ease);
}
.perguntas__grid li i {
  display: block;
  font-size: 2rem;
  color: var(--sage);
  margin-bottom: 1rem;
}
.perguntas__grid li:hover { background: rgb(255 255 255 / 0.1); }
.perguntas__grid p { color: var(--on-petrol); font-size: 1.0625rem; line-height: 1.6; }

.perguntas__final {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sage-soft);
  max-width: 34ch;
  text-wrap: balance;
}

.perguntas__close {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.perguntas__close p:first-child { color: var(--on-petrol); }

@media (max-width: 767px) {
  .perguntas__close { grid-template-columns: 1fr; }
}

/* ---------- Fechamento ---------- */

.fechamento__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.fechamento__text { display: grid; gap: 1.75rem; justify-items: start; }
.fechamento__text > p { max-width: 46ch; font-size: 1.125rem; }

.fechamento__quote p {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

@media (max-width: 899px) {
  .fechamento__grid { grid-template-columns: 1fr; }
}

/* ---------- Rodapé ---------- */

.footer { border-top: 1px solid var(--sand-line); }

.footer__inner {
  padding-block: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  font-size: 0.9375rem;
}
.footer__logo { height: 104px; width: auto; }
.footer__role { margin-top: 0.75rem; font-size: 0.875rem; }

.footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.footer__links a:hover { color: var(--petrol); }
.footer__links i { font-size: 1.25rem; color: var(--sage-deep); }

.footer__meta { display: grid; gap: 0.25rem; font-size: 0.875rem; text-align: right; }
.footer__meta a {
  color: var(--petrol);
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s var(--ease);
}
.footer__meta a:hover { text-decoration-color: var(--petrol); }
@media (max-width: 767px) { .footer__meta { text-align: left; } }

/* ---------- Ao rolar (CSS scroll-driven, sem JS) ----------
   Só nos pontos que contam a história: frases-chave, imagens e as perguntas.
   Sem suporte, tudo já aparece visível. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: settle linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .reveal-img img {
      animation: unveil linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes settle {
  from { opacity: 0; translate: 0 20px; filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ICONES */
/* Gerado por scripts/icones.py: Phosphor Light 2.1.1, só os 26 ícones usados no HTML. */
@font-face {
  font-family: "Phosphor-Light";
  src: url("assets/fonts/phosphor-light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.ph-light {
  font-family: "Phosphor-Light" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ph-light.ph-armchair:before { content: "\e012"; }
.ph-light.ph-arrow-up-right:before { content: "\e092"; }
.ph-light.ph-arrows-clockwise:before { content: "\e094"; }
.ph-light.ph-barbell:before { content: "\e0b6"; }
.ph-light.ph-book-open:before { content: "\e0e6"; }
.ph-light.ph-brain:before { content: "\e74e"; }
.ph-light.ph-circle-dashed:before { content: "\e602"; }
.ph-light.ph-compass:before { content: "\e1c8"; }
.ph-light.ph-dna:before { content: "\e924"; }
.ph-light.ph-ear:before { content: "\e70c"; }
.ph-light.ph-eye-closed:before { content: "\e222"; }
.ph-light.ph-fingerprint:before { content: "\e23e"; }
.ph-light.ph-flower-lotus:before { content: "\e6cc"; }
.ph-light.ph-footprints:before { content: "\ea88"; }
.ph-light.ph-globe-hemisphere-west:before { content: "\e28c"; }
.ph-light.ph-hand-heart:before { content: "\e810"; }
.ph-light.ph-heartbeat:before { content: "\e2ac"; }
.ph-light.ph-instagram-logo:before { content: "\e2d0"; }
.ph-light.ph-plant:before { content: "\ebae"; }
.ph-light.ph-quotes:before { content: "\e660"; }
.ph-light.ph-ruler:before { content: "\e6b8"; }
.ph-light.ph-shield:before { content: "\e40a"; }
.ph-light.ph-sun-horizon:before { content: "\e5b6"; }
.ph-light.ph-tree-structure:before { content: "\e67c"; }
.ph-light.ph-video-camera:before { content: "\e4da"; }
.ph-light.ph-whatsapp-logo:before { content: "\e5d0"; }
/* /ICONES */