/* Treinamento RV · Mente e Corpo */

@font-face {
  font-family: 'Cormorant';
  src: url(../fonts/cormorant-garamond.woff2) format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url(../fonts/cormorant-garamond-italic.woff2) format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url(../fonts/manrope.woff2) format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --abismo: #08222b;
  --fundo: #09252e;
  --mar: #0f3a44;
  --turquesa: #8cc7c0;
  --turquesa-escura: #2c6b6b;
  --espuma: #f6f3ec;
  --areia: #ece3d3;
  --areia-clara: #f3ede2;
  --tinta: #132a30;
  --tinta-suave: #4b5d60;
  --linha: rgba(19, 42, 48, .14);
  --linha-clara: rgba(246, 243, 236, .16);
  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --borda: 18px;
  --pad: clamp(20px, 4vw, 56px);
  --largura: 1240px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --secao: clamp(96px, 11vw, 156px);
  color-scheme: light;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--turquesa-escura); outline-offset: 3px; border-radius: 6px; }
.capa :focus-visible, .pausa :focus-visible, .fim :focus-visible, .topo :focus-visible { outline-color: var(--turquesa); }

.embrulho { width: min(var(--largura), calc(100% - var(--pad) * 2)); margin-inline: auto; }
.ico { width: 1em; height: 1em; flex: none; }

/* Rótulos e botões */
.rotulo {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--turquesa-escura);
}
.rotulo::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.rotulo-claro { color: var(--turquesa); }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: 600 15.5px/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .35s, color .35s, transform .45s var(--curva), box-shadow .45s var(--curva);
}
.botao .ico { width: 19px; height: 19px; }
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(0); }
.botao-espuma { background: var(--espuma); color: var(--abismo); }
.botao-espuma:hover { background: #fff; box-shadow: 0 14px 34px -16px rgba(140, 199, 192, .6); }
.botao-tinta { background: var(--tinta); color: var(--espuma); }
.botao-p { height: 44px; padding: 0 18px; font-size: 14px; }
.botao-p .ico { width: 17px; height: 17px; }
.botao-g { height: 60px; padding: 0 34px; font-size: 16.5px; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  font: 600 15px/1 var(--sans);
  color: var(--espuma);
  text-decoration: none;
}
.link-seta span { padding-bottom: 4px; border-bottom: 1px solid rgba(246, 243, 236, .35); transition: border-color .35s; }
.link-seta .ico { width: 18px; height: 18px; transition: transform .45s var(--curva); }
.link-seta:hover span { border-color: var(--espuma); }
.link-seta:hover .ico { transform: translateX(4px); }

/* Marca */
.marca-simbolo {
  display: block;
  width: 46px;
  aspect-ratio: 1826 / 1390;
  background: currentColor;
  -webkit-mask: url(../img/logo-rv.svg) center / contain no-repeat;
  mask: url(../img/logo-rv.svg) center / contain no-repeat;
}
.marca-nome {
  font: 600 12px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca-nome b { font-weight: 800; }

/* Topo */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--espuma);
  transition: background-color .5s, backdrop-filter .5s, box-shadow .5s;
}
.topo-faixa {
  width: min(var(--largura), calc(100% - var(--pad) * 2));
  margin-inline: auto;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 32px;
  transition: height .5s var(--curva);
}
.topo.rolou {
  background: rgba(9, 37, 46, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 -1px 0 var(--linha-clara);
}
.topo.rolou .topo-faixa { height: 68px; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.menu { display: flex; gap: 30px; }
.menu a {
  font: 500 14.5px/1 var(--sans);
  color: rgba(246, 243, 236, .76);
  text-decoration: none;
  transition: color .3s;
}
.menu a:hover { color: var(--espuma); }

/* Capa */
.capa {
  --respiro-baixo: 150px;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 128px 0 var(--respiro-baixo);
  color: var(--espuma);
  background: linear-gradient(180deg, #072029 0%, #0c3540 50%, #1c5a63 82%, #3f8682 100%);
  overflow: hidden;
}
canvas.mar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.4s ease;
}
canvas.mar.pronto { opacity: 1; }
.mar-reserva { position: absolute; left: 0; bottom: 0; width: 100%; height: 96px; z-index: -2; }

.capa-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.capa h1 {
  margin: 22px 0 26px;
  font-size: clamp(58px, 7.2vw, 104px);
  line-height: .92;
  letter-spacing: -.02em;
}
.capa h1 em { color: var(--turquesa); }
.capa-lead { max-width: 34ch; font-size: 18px; color: rgba(246, 243, 236, .84); }
.capa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 34px; }

.respire {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 42px;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(246, 243, 236, .64);
}
.respire b { font-weight: 600; color: var(--espuma); }
.respire-sep { margin: 0 2px; }
.respire-anel {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(246, 243, 236, .34);
  display: grid;
  place-items: center;
}
.respire-ponto {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(140, 199, 192, .55);
  transform: scale(.32);
  animation: respira 10s infinite;
}
@keyframes respira {
  0% { transform: scale(.32); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  40% { transform: scale(1); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100% { transform: scale(.32); }
}

/* Mosaico de vídeos: um vertical em arco e dois horizontais empilhados */
.capa-videos { container-type: inline-size; }
.mosaico {
  --g: 14px;
  --h: calc((100cqw - var(--g) * .1111) / 1.4514);
  display: grid;
  grid-template-columns: calc(var(--h) * .5625) minmax(0, 1fr);
  grid-template-rows: repeat(2, calc((var(--h) - var(--g)) / 2));
  gap: var(--g);
}
.video {
  position: relative;
  overflow: hidden;
  border-radius: var(--borda);
  background: #0b2e37;
  box-shadow: 0 40px 70px -42px rgba(0, 0, 0, .6);
  transform: translateZ(0);
}
.video::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(246, 243, 236, .14);
  background: linear-gradient(0deg, rgba(8, 34, 43, .42) 0%, rgba(8, 34, 43, 0) 42%);
  pointer-events: none;
}
.video-alto {
  grid-row: 1 / 3;
  border-radius: calc(var(--h) * .28125) calc(var(--h) * .28125) var(--borda) var(--borda);
}
.video video { width: 100%; height: 100%; object-fit: cover; }
.video figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 6px;
  border-radius: 999px;
  background: rgba(8, 34, 43, .44);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .02em;
  color: var(--espuma);
  white-space: nowrap;
}
.video-num {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(246, 243, 236, .16);
  font: italic 500 14px/1 var(--serif);
}

/* Valores */
.valores { padding: 30px 0 34px; border-bottom: 1px solid var(--linha); }
.valores-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: italic 400 clamp(22px, 2.2vw, 30px)/1.2 var(--serif);
  color: var(--tinta);
}
.valores-onda { color: var(--turquesa-escura); opacity: .55; }
.valores-onda .ico { width: 30px; height: 30px; }

/* Manifesto */
.manifesto {
  padding: var(--secao) 0;
  background: url(../img/ondas-areia.svg) center / cover no-repeat;
}
.manifesto-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; }
.manifesto-lado { display: flex; flex-direction: column; gap: 34px; padding-top: 14px; }
.manifesto-simbolo {
  display: block;
  width: 84px;
  aspect-ratio: 1826 / 1390;
  background: var(--turquesa-escura);
  -webkit-mask: url(../img/logo-rv.svg) center / contain no-repeat;
  mask: url(../img/logo-rv.svg) center / contain no-repeat;
}
.manifesto h2 {
  max-width: 24em;
  font-size: clamp(31px, 3.5vw, 50px);
  line-height: 1.2;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.manifesto h2 em { color: var(--turquesa-escura); }
.manifesto-assina {
  margin-top: 40px;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.manifesto-assina span { margin: 0 8px; color: var(--turquesa-escura); }

/* Cabeçalho das seções */
.cabeca { max-width: 780px; }
.cabeca h2, .para-quem h2, .duvidas h2, .pausa h2 {
  margin-top: 22px;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
}
.cabeca h2 em, .para-quem h2 em, .duvidas h2 em { color: var(--turquesa-escura); }
.cabeca-texto { max-width: 52ch; margin-top: 22px; font-size: 18px; color: var(--tinta-suave); }

/* Método */
.metodo { padding: var(--secao) 0; background: var(--areia-clara); }
.pilares {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid var(--linha);
}
.pilar { padding: 34px 28px 0; border-left: 1px solid var(--linha); }
.pilar:first-child { padding-left: 0; border-left: 0; }
.pilar:last-child { padding-right: 0; }
.pilar-topo { display: flex; align-items: flex-start; justify-content: space-between; }
.pilar-num { font: italic 500 22px/1 var(--serif); color: var(--turquesa-escura); }
.pilar-ico {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pilar h3 { margin: 44px 0 12px; font-size: 32px; line-height: 1.1; }
.pilar p { font-size: 16px; color: var(--tinta-suave); }

/* Pausa */
.pausa {
  position: relative;
  padding: calc(var(--secao) + 24px) 0;
  color: var(--espuma);
  background: radial-gradient(110% 90% at 78% 50%, #0f3a44 0%, var(--fundo) 55%, var(--abismo) 100%);
}
.pausa::before, .pausa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.pausa::before {
  top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath fill='%23f3ede2' d='M0 0h1440v18c-120 13-240 20-360 15S840 11 720 16 480 37 360 35 120 20 0 24z'/%3E%3C/svg%3E");
}
.pausa::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath fill='%23ece3d3' d='M0 44h1440V22c-120-11-240-17-360-11S840 31 720 28 480 7 360 9 120 24 0 20z'/%3E%3C/svg%3E");
}
.pausa-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pausa h2 em { color: var(--turquesa); }
.pausa-texto > p { max-width: 42ch; margin-top: 24px; font-size: 18px; color: rgba(246, 243, 236, .8); }
.pausa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 38px; }
.pausa-conta { font-size: 14px; letter-spacing: .02em; color: rgba(246, 243, 236, .62); }

.pausa-roda { display: grid; place-items: center; }
.roda {
  --s: 0;
  position: relative;
  width: min(400px, 100%);
  aspect-ratio: 1;
}
.roda > span { position: absolute; border-radius: 50%; will-change: transform; }
.roda-anel-3 { inset: 0; box-shadow: inset 0 0 0 1px rgba(246, 243, 236, .1); transform: scale(calc(.84 + .16 * var(--s))); }
.roda-anel-2 { inset: 11%; box-shadow: inset 0 0 0 1px rgba(246, 243, 236, .18); transform: scale(calc(.78 + .22 * var(--s))); }
.roda-anel-1 {
  inset: 22%;
  background: radial-gradient(circle, rgba(140, 199, 192, .2) 0%, rgba(140, 199, 192, .06) 70%);
  box-shadow: inset 0 0 0 1px rgba(140, 199, 192, .3);
  transform: scale(calc(.7 + .3 * var(--s)));
}
.roda-nucleo {
  inset: 33%;
  background: radial-gradient(circle at 38% 32%, #b4ddd6 0%, #5fa39e 48%, #2c6b6b 100%);
  box-shadow: 0 0 80px -10px rgba(140, 199, 192, .45);
  transform: scale(calc(.62 + .38 * var(--s)));
}
.roda-fase {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: italic 500 30px/1 var(--serif);
  color: var(--espuma);
  text-shadow: 0 1px 12px rgba(8, 34, 43, .35);
}
.pausa-roda { position: relative; }

/* Para quem */
.para-quem { padding: var(--secao) 0; }
.para-quem-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
.frase {
  margin-top: 48px;
  padding: 30px 32px;
  border-radius: var(--borda);
  background: var(--fundo);
  color: var(--espuma);
}
.frase p { font: italic 400 26px/1.3 var(--serif); }
.lista-quem { border-top: 1px solid var(--linha); }
.lista-quem li {
  display: flex;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--linha);
  font: 500 24px/1.3 var(--serif);
}
.lista-quem .ico { width: 26px; height: 26px; margin-top: 3px; color: var(--turquesa-escura); }

/* Como funciona */
.como { padding: var(--secao) 0; background: var(--areia-clara); }
.passos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 72px;
}
.passos::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 28px;
  right: 28px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7C4 2 8 2 12 7S20 12 24 7 32 2 36 7 44 12 48 7' fill='none' stroke='%23132a30' stroke-opacity='.26' stroke-width='1.2'/%3E%3C/svg%3E") left center / 48px 14px repeat-x;
}
.passo { position: relative; }
.passo-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--areia-clara);
  box-shadow: inset 0 0 0 1px rgba(19, 42, 48, .22);
  font: italic 500 24px/1 var(--serif);
  color: var(--turquesa-escura);
}
.passo h3 { margin: 30px 0 10px; font-size: 28px; line-height: 1.1; }
.passo p { font-size: 16px; color: var(--tinta-suave); }

/* Dúvidas */
.duvidas { padding: var(--secao) 0 calc(var(--secao) - 24px); }
.duvidas-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
.duvidas-lado > p:last-child { max-width: 34ch; margin-top: 22px; color: var(--tinta-suave); }
.perguntas { border-top: 1px solid var(--linha); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  position: relative;
  padding: 26px 52px 26px 0;
  list-style: none;
  cursor: pointer;
  font: 500 24px/1.25 var(--serif);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::before, .perguntas summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform .45s var(--curva), opacity .3s;
}
.perguntas summary::after { transform: rotate(90deg); }
.perguntas details[open] summary::after { transform: rotate(0deg); opacity: 0; }
.perguntas details p { max-width: 60ch; padding: 0 52px 28px 0; color: var(--tinta-suave); }
.perguntas details::details-content {
  height: 0;
  overflow: clip;
  transition: height .5s var(--curva), content-visibility .5s allow-discrete;
}
.perguntas details[open]::details-content { height: auto; }

/* Fechamento */
.fim {
  position: relative;
  isolation: isolate;
  padding-top: calc(58px + 54px + clamp(96px, 11vw, 150px));
  overflow: hidden;
  color: var(--espuma);
  background: linear-gradient(180deg, var(--areia) 0, var(--areia) 70px, #3f8682 70px, #1c5a63 22%, var(--fundo) 55%, var(--abismo) 100%);
  text-align: center;
}
.fim-conteudo { display: flex; flex-direction: column; align-items: center; }
.fim .rotulo::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.fim h2 {
  margin-top: 24px;
  font-size: clamp(46px, 5.8vw, 86px);
  line-height: .98;
  letter-spacing: -.015em;
}
.fim h2 em { color: var(--turquesa); }
.fim-conteudo > p:not(.rotulo) { max-width: 40ch; margin-top: 24px; font-size: 18px; color: rgba(246, 243, 236, .82); }
.fim .botao-g { margin-top: 40px; }

.rodape {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  margin-top: clamp(110px, 13vw, 170px);
  padding: 36px 0 calc(36px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha-clara);
  text-align: left;
  font-size: 14px;
  color: rgba(246, 243, 236, .66);
}
.rodape-marca { display: flex; align-items: center; gap: 16px; color: var(--espuma); }
.rodape-marca .marca-simbolo { width: 52px; }
.rodape-sub { margin-top: 8px; font-size: 13px; color: rgba(246, 243, 236, .62); }
.rodape-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.rodape-menu a { text-decoration: none; transition: color .3s; }
.rodape-menu a:hover { color: var(--espuma); }

/* Botão fixo do celular */
.fixo {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 40;
  height: 56px;
  display: none;
  box-shadow: 0 18px 40px -16px rgba(8, 34, 43, .6), inset 0 0 0 1px rgba(246, 243, 236, .14);
  transform: translateY(calc(100% + 40px));
  transition: transform .6s var(--curva);
}
.fixo:hover { transform: translateY(calc(100% + 40px)); }
.fixo.mostra, .fixo.mostra:hover { transform: none; }

/* Entrada suave */
.js .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--curva), transform 1.2s var(--curva);
  transition-delay: var(--atraso, 0s);
}
.js .revela.visto { opacity: 1; transform: none; }

/* Telas médias */
@media (max-width: 1100px) {
  .menu { gap: 22px; }
  .capa-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .pilar, .pilar:first-child, .pilar:last-child { padding: 32px 0 40px; border-left: 0; border-top: 1px solid var(--linha); }
  .pilar:nth-child(odd) { padding-right: 28px; }
  .pilar:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--linha); }
  .pilar h3 { margin-top: 32px; }
}

@media (max-width: 980px) {
  .menu { display: none; }
}

/* Tablet em pé: empilha */
@media (max-width: 900px) {
  .capa { min-height: 0; padding-top: 118px; }
  .capa-grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .capa-lead { max-width: 46ch; }
  .capa-videos { width: min(100%, 600px); }
  .respire { margin-top: 34px; }
  .manifesto-grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .manifesto-lado { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 0; }
  .manifesto-simbolo { width: 64px; }
  .pausa-grade { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .roda { width: min(340px, 100%); }
  .para-quem-grade, .duvidas-grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .passos::before { display: none; }
  .rodape { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; }
  .rodape-marca { flex-direction: column; gap: 12px; }
  .fixo { display: inline-flex; }
}

/* Celular */
@media (max-width: 600px) {
  :root { --borda: 14px; }
  body { font-size: 16.5px; }
  .topo-faixa { height: 64px; gap: 16px; }
  .topo.rolou .topo-faixa { height: 60px; }
  .marca { gap: 11px; }
  .marca-simbolo { width: 38px; }
  .marca-nome { font-size: 11px; letter-spacing: .22em; }
  .topo .botao-p { width: 44px; padding: 0; }
  .topo .botao-p span { display: none; }
  .topo .botao-p .ico { width: 20px; height: 20px; }

  .capa { --respiro-baixo: 104px; padding-top: 96px; }
  .rotulo { gap: 10px; font-size: 11.5px; letter-spacing: .16em; }
  .rotulo::before { width: 20px; }
  .video-longo { display: none; }
  .capa h1 { margin: 18px 0 20px; font-size: 58px; }
  .capa-lead { font-size: 17px; }
  .capa-acoes { margin-top: 28px; gap: 4px 22px; }
  .respire { display: none; }
  .capa-grade { gap: 32px; }
  .mosaico { --g: 8px; }
  .video figcaption { left: 7px; bottom: 7px; gap: 6px; padding: 4px 9px 4px 4px; font-size: 10.5px; }
  .video-num { width: 18px; height: 18px; font-size: 11.5px; }

  .valores { padding: 24px 0 26px; }
  .valores-lista { flex-wrap: wrap; justify-content: center; gap: 6px 18px; max-width: 300px; font-size: 21px; }
  .valores-onda { display: none; }

  .manifesto h2 { font-size: 29px; line-height: 1.24; }
  .manifesto-assina { margin-top: 30px; font-size: 11px; line-height: 1.6; }

  .cabeca h2, .para-quem h2, .duvidas h2, .pausa h2 { font-size: 40px; }
  .cabeca-texto, .pausa-texto > p { font-size: 17px; }
  .pilares { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .pilar, .pilar:nth-child(odd), .pilar:nth-child(even) { padding: 28px 0 34px; border-left: 0; }
  .pilar h3 { margin-top: 22px; font-size: 30px; }

  .pausa { padding: calc(var(--secao) + 8px) 0; }
  .pausa::before, .pausa::after { height: 28px; }
  .pausa-acoes { flex-direction: column; align-items: flex-start; }
  .roda { width: min(300px, 100%); }
  .roda-fase { font-size: 26px; }

  .frase { margin-top: 36px; padding: 24px 24px; }
  .frase p { font-size: 23px; }
  .lista-quem li { gap: 16px; padding: 22px 0; font-size: 21px; }
  .lista-quem .ico { width: 22px; height: 22px; }

  .passos { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 48px; }
  .passos::before {
    display: block;
    top: 28px;
    bottom: 28px;
    left: 27.5px;
    right: auto;
    width: 1px;
    height: auto;
    background: var(--linha);
  }
  .passo { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 36px; }
  .passo:last-child { padding-bottom: 0; }
  .passo-num { grid-row: 1 / 3; }
  .passo h3 { margin: 12px 0 8px; font-size: 26px; }

  .perguntas summary { padding: 22px 44px 22px 0; font-size: 22px; }
  .perguntas details p { padding-right: 0; }

  .fim { padding-top: calc(42px + 40px + 96px); background: linear-gradient(180deg, var(--areia) 0, var(--areia) 50px, #3f8682 50px, #1c5a63 22%, var(--fundo) 55%, var(--abismo) 100%); }
  .fim h2 { font-size: 46px; }
  .fim-conteudo > p:not(.rotulo) { font-size: 17px; }
  .fim .botao-g { width: 100%; }
  .rodape { margin-top: 96px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .rodape-menu { max-width: 280px; gap: 10px 22px; }
  .rodape-direitos { text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revela { transform: none; transition: opacity .4s; }
  .respire-ponto { animation: none; transform: scale(.6); }
  .botao, .link-seta .ico { transition: none; }
}