/* Conceito: a diagonal da capa da apresentação e as linhas de 6 e 9 metros da quadra de handebol.
   Visual único e claro, com faixas em verde-petróleo. */
:root {
  --petroleo: #104044;
  --petroleo-2: #0b3034;
  --agua: #49908D;
  --agua-escuro: #2f6f6c;
  --menta: #d5e7e3;
  --nevoa: #e3e5e0;
  --papel: #f6f7f4;
  --branco: #ffffff;
  --tinta: #16292b;
  --cinza: #4c5f60;
  --linha: #cdd5d1;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --corpo: "Figtree", "Segoe UI", Roboto, Arial, sans-serif;
  --largura: 1180px;
  --calha-e: max(16px, env(safe-area-inset-left, 0px));
  --calha-d: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.6 var(--corpo); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2 { font-family: var(--display); font-style: italic; font-weight: 700; line-height: 1.02; text-wrap: balance; color: var(--petroleo); }
h1 { font-size: clamp(3.1rem, 7.4vw, 5.6rem); }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.5rem); }
h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
:focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; border-radius: 4px; }

.faixa { padding-left: var(--calha-e); padding-right: var(--calha-d); }
.miolo { max-width: var(--largura); margin-inline: auto; padding-block: clamp(56px, 8vw, 96px); display: grid; gap: clamp(28px, 4vw, 44px); }
.miolo > * { min-width: 0; }
.rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--agua-escuro); }
.intro { display: grid; gap: 12px; max-width: 42rem; }
.intro p:not(.rotulo) { color: var(--cinza); font-size: 1.08rem; }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: 4px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; cursor: pointer; }
.botao-cheio { background: var(--petroleo); color: var(--branco); }
.botao-cheio:hover { background: var(--agua-escuro); }
.botao-vazado { border-color: var(--petroleo); color: var(--petroleo); }
.botao-vazado:hover { background: var(--petroleo); color: var(--branco); }
.botao-claro { background: var(--branco); color: var(--petroleo); }
.botao-claro:hover { background: var(--menta); }

/* Cabeçalho */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--papel); }
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo-miolo { max-width: var(--largura); margin-inline: auto; min-height: 68px; display: flex; align-items: center; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--petroleo); margin-right: auto; }
.marca img { height: 34px; width: auto; }
.marca span { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.4rem; line-height: 1; }
.menu { display: flex; gap: 24px; font-size: .96rem; font-weight: 500; }
.menu a { text-decoration: none; }
.menu a:hover { color: var(--agua-escuro); text-decoration: underline; text-underline-offset: 4px; }
.topo .botao { min-height: 42px; padding: 6px 16px; font-size: .94rem; }

/* Abertura */
.abertura { background: var(--nevoa); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; }
.abertura-texto { padding-left: max(16px, env(safe-area-inset-left, 0px), calc((100vw - var(--largura)) / 2)); padding-right: 16px; padding-block: clamp(44px, 7vw, 92px); display: grid; align-content: center; gap: 22px; min-width: 0; }
.abertura-texto .sub { font-size: 1.16rem; max-width: 33rem; color: var(--tinta); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.abertura-foto { position: relative; min-width: 0; min-height: 420px; }
.abertura-foto::before { content: ""; position: absolute; inset: 0; background: var(--agua); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.abertura-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; clip-path: polygon(15% 0, 100% 0, 100% 100%, 5% 100%); }
.lugar span { display: inline-block; }
.lugar .modo::before { content: "|"; color: var(--agua); margin-inline: 10px; }
.pilares { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.pilares li + li::before { content: "|"; color: var(--agua); margin-right: 14px; }

/* Faixa do acompanhamento */
.perto { position: relative; background: var(--petroleo); color: var(--branco); overflow: hidden; }
.perto h2 { color: var(--branco); }
.perto .rotulo { color: #9fd1cb; }
.quadra { position: absolute; left: -160px; top: -40px; width: min(720px, 90vw); height: auto; opacity: .18; pointer-events: none; transform: scaleX(-1); }
.perto .miolo { position: relative; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; gap: clamp(28px, 5vw, 64px); }
.perto-coluna { display: grid; gap: 22px; align-content: start; min-width: 0; }
.perto-texto { display: grid; gap: 14px; }
.perto-foto { position: relative; min-height: 340px; min-width: 0; }
.perto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.perto-texto p:not(.rotulo) { color: #dcebe8; font-size: 1.08rem; }
.perto-subtitulo { font-weight: 700; font-size: 1.08rem; color: var(--branco); margin-bottom: -10px; }
.perto-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid rgba(255,255,255,.26); }
.perto-lista li { padding-block: 13px; border-bottom: 1px solid rgba(255,255,255,.26); font-weight: 500; }

/* Etapas */
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; counter-reset: etapa; }
.etapas li { counter-increment: etapa; display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 3px solid var(--agua); }
.etapas li::before { content: counter(etapa); font: italic 700 2.5rem/1 var(--display); color: var(--agua-escuro); }
.etapas p { font-size: .96rem; color: var(--cinza); }

/* Feedbacks */
.feedbacks { background: var(--branco); }
.feedbacks-topo { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.feedbacks-setas { display: flex; gap: 10px; }
.seta { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--petroleo); background: transparent; color: var(--petroleo); font-size: 1.25rem; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; }
.seta:hover { background: var(--petroleo); color: var(--branco); transform: translateY(-2px); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--linha); background: var(--papel); color: var(--petroleo); font: 600 .92rem var(--corpo); cursor: pointer; transition: background-color .15s, color .15s; }
.filtro:hover { border-color: var(--agua-escuro); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--branco); }
.fb-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 14px; min-width: 0; scrollbar-width: thin; }
.fb-card { scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 26px; background: var(--papel); border-radius: 4px; min-width: 0; }
.fb-aspas { font: italic 700 4.2rem/.6 var(--display); color: var(--agua); height: 28px; }
.fb-perfil { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--menta); color: var(--petroleo); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.fb-texto { font-size: 1.04rem; line-height: 1.6; color: var(--tinta); }
.fb-autor { font-weight: 700; font-size: .94rem; color: var(--petroleo); }
.fb-card.exemplo { background: transparent; border: 2px dashed var(--linha); }
.fb-card.exemplo .fb-texto, .fb-card.exemplo .fb-autor { color: var(--cinza); font-style: italic; font-weight: 400; }
.fb-nota { font-size: .88rem; color: var(--cinza); }
.fb-google { font-size: 1rem; color: var(--tinta); }
.fb-google a { font-weight: 700; color: var(--petroleo); }

/* Planos */
.planos-faixa { background: var(--nevoa); }
.planos-dica { display: none; margin-top: -16px; font-size: .9rem; font-weight: 600; color: var(--agua-escuro); }
.planos-dica::after { content: "\2192"; margin-left: .4em; }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plano { position: relative; background: var(--branco); padding: 24px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-width: 0; transition: transform .15s; }
.plano:hover { transform: translateY(-3px); }
.plano-destaque { background: var(--petroleo); color: var(--branco); }
.plano-nome { font: italic 700 2.1rem/1 var(--display); color: var(--petroleo); }
.plano-destaque .plano-nome { color: var(--branco); }
.plano-tag { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--agua-escuro); }
.plano-destaque .plano-tag { color: #9fd1cb; }
.plano-texto { font-size: .98rem; }
.beneficios { display: grid; align-content: start; gap: 8px; border-top: 1px solid var(--linha); padding-top: 14px; }
.plano-destaque .beneficios { border-top-color: rgba(255,255,255,.26); }
.beneficios li { padding-left: 20px; position: relative; font-size: .96rem; line-height: 1.45; }
.beneficios li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 3px; background: var(--agua); transform: skewX(-24deg); }
.plano-destaque .beneficios li::before { background: #9fd1cb; }
.beneficios .chave { font-weight: 700; }
.plano-botao { width: 100%; text-align: center; }
.plano-botao::after { content: ""; position: absolute; inset: 0; }

/* Materiais */
.materiais-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.materiais-texto { display: grid; gap: 14px; }
.materiais-texto p:not(.rotulo) { color: var(--cinza); }
.materiais-texto .acoes { padding-top: 4px; }
.materiais-texto .materiais-nota { font-size: .88rem; }
.materiais { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; }
.materiais li { padding: 8px 14px; background: var(--menta); color: var(--petroleo); font-weight: 600; font-size: .96rem; border-radius: 4px; }

/* Sobre */
.sobre { background: var(--branco); }
.sobre .miolo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.sobre-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 20%; }
.sobre-texto { display: grid; gap: 14px; max-width: 44rem; }
.sobre-texto p:not(.rotulo) { color: var(--cinza); }

/* Perguntas */
.perguntas { display: grid; border-top: 1px solid var(--linha); max-width: 50rem; }
details { border-bottom: 1px solid var(--linha); }
summary { cursor: pointer; padding-block: 16px; font-weight: 600; font-size: 1.06rem; color: var(--petroleo); }
details p { padding-bottom: 18px; color: var(--cinza); max-width: 44rem; }

/* Começar */
.comecar { background: var(--agua-escuro); color: var(--branco); }
.comecar .miolo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.comecar h2 { color: var(--branco); }
.comecar p { color: #e6f2f0; }
.comecar .rotulo { color: #d5e7e3; }
.comecar-texto { display: grid; gap: 12px; }
.comecar-foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 45% 32%; margin-top: 8px; }
.objetivos { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.objetivos legend { font-weight: 700; padding: 0 0 10px; }
.objetivos label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; background: rgba(255,255,255,.12); border-radius: 4px; cursor: pointer; font-weight: 500; }
.objetivos label:hover { background: rgba(255,255,255,.2); }
.objetivos input { width: 20px; height: 20px; accent-color: var(--petroleo); flex: none; margin: 0; }
.comecar-acao { display: grid; gap: 10px; justify-items: start; padding-top: 10px; }

/* Área do paciente */
.paciente { background: var(--nevoa); }
.paciente-grade { padding-block: clamp(44px, 6vw, 68px); grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(24px, 5vw, 64px); }
.atalhos { display: grid; border-top: 1px solid var(--linha); }
.atalho { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); min-width: 0; }
.atalho h3 { color: var(--petroleo); }
.atalho p { font-size: .95rem; color: var(--cinza); grid-column: 1; }
.atalho .vai { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: .92rem; color: var(--agua-escuro); text-align: right; }
.atalho .vai::after { content: " \2192"; }
.atalho:hover h3, .atalho:hover .vai { text-decoration: underline; text-underline-offset: 4px; }

/* Rodapé */
.rodape { background: var(--petroleo-2); color: #cfe4e0; font-size: .94rem; }
.rodape .miolo { padding-block: 40px 44px; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; }
.rodape img { height: 40px; width: auto; }
.rodape strong { color: var(--branco); display: block; }
.rodape-marca { display: grid; gap: 10px; }
.rodape nav { display: grid; gap: 6px; }
.rodape a:hover { color: var(--branco); }
.legal { grid-column: 1 / -1; font-size: .84rem; border-top: 1px solid rgba(255,255,255,.2); padding-top: 16px; }

/* Animações: tudo fica visível em repouso; o movimento só acontece na entrada */
@keyframes sobe { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes vem-esquerda { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes vem-direita { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes salta { 0% { opacity: 0; transform: translateY(18px) scale(.82); } 70% { opacity: 1; transform: translateY(-3px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes foto-desliza { from { transform: translateY(36px) scale(.97); } to { transform: none; } }
@keyframes linha-cresce { from { background-size: 0 3px; } to { background-size: 100% 3px; } }
@keyframes letreiro-anda { to { transform: translateX(-25%); } }
@keyframes pulso { 0%, 55% { box-shadow: 0 0 0 0 rgba(73, 144, 141, .6); } 100% { box-shadow: 0 0 0 16px rgba(73, 144, 141, 0); } }
@keyframes abre { from { opacity: .45; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes entra-foto { from { opacity: .45; transform: translateX(44px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes entra-faixa { from { opacity: .45; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes desenha { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
.abertura-texto > * { animation: abre .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.abertura-texto > :nth-child(2) { animation-delay: .1s; }
.abertura-texto > :nth-child(3) { animation-delay: .2s; }
.abertura-texto > :nth-child(4) { animation-delay: .3s; }
.abertura-texto > :nth-child(5) { animation-delay: .4s; }
.abertura-foto::before { animation: entra-faixa .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.abertura-foto img { animation: entra-foto .9s .1s cubic-bezier(.2, .7, .2, 1) backwards; }
main { overflow-x: clip; }
.anima, .anima-esq, .anima-dir { animation: sobe .75s var(--atraso, 0ms) cubic-bezier(.2, .7, .2, 1) backwards; }
.anima-pop { animation: salta .6s var(--atraso, 0ms) ease-out backwards; }
.anima-foto { animation: foto-desliza .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.etapas li { border-top: 0; padding-top: 17px; background: linear-gradient(var(--agua), var(--agua)) top left / 100% 3px no-repeat; }
.etapas li.anima-pop { animation: salta .6s var(--atraso, 0ms) ease-out backwards, linha-cresce .9s var(--atraso, 0ms) ease-out backwards; }
@media (min-width: 721px) {
  .anima-esq { animation-name: vem-esquerda; }
  .anima-dir { animation-name: vem-direita; }
}
.progresso { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 31; background: var(--agua); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.letreiro { overflow: hidden; background: var(--agua-escuro); color: var(--branco); padding-block: 12px; }
.letreiro-trilho { display: flex; width: max-content; }
.letreiro-trilho.rodando { animation: letreiro-anda 36s linear infinite; }
.letreiro:hover .letreiro-trilho { animation-play-state: paused; }
.letreiro-grupo { display: flex; flex: none; }
.letreiro-grupo li { font: italic 700 1.35rem/1.2 var(--display); white-space: nowrap; }
.letreiro-grupo li::after { content: "/"; color: #9fd1cb; margin-inline: 22px; }
.abertura-foto { overflow: hidden; }
.abertura-foto img { top: -6%; bottom: auto; height: 112%; }
.perto-foto { overflow: hidden; }
.perto-foto img { top: -8%; bottom: auto; height: 116%; }
.plano { transition: transform .18s ease-out, box-shadow .18s ease-out; }
.plano:hover { box-shadow: 0 18px 36px rgba(16, 64, 68, .18); }
.abertura .botao-cheio, .barra .botao-cheio { animation: pulso 2.6s ease-out infinite; }
.materiais li { transition: transform .15s, background-color .15s; }
.materiais li:hover { transform: translateY(-3px); background: #bfdcd6; }
.perto.linhas .linha-solida { animation: desenha 1.6s ease-in-out backwards; }
.perto.linhas .linha-solida:nth-child(2) { animation-delay: .3s; }
.perto.linhas .linha-tracejada { animation: surge 1s 1.2s ease-out backwards; }
.sobre-foto, .comecar-foto, .perto-foto img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sobre-foto:hover, .comecar-foto:hover, .perto-foto:hover img { transform: scale(1.02); }
.botao { transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.botao:hover { transform: translateY(-2px); }
.atalho .vai::after { display: inline-block; margin-left: .4em; transition: transform .2s; }
.atalho:hover .vai::after { transform: translateX(5px); }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Como posso te ajudar */
.ajuda-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ajuda-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 24px 22px 22px; background: var(--branco); border-top: 4px solid var(--agua); text-decoration: none; color: var(--tinta); min-width: 0; transition: transform .18s ease-out, box-shadow .18s ease-out; }
.ajuda-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(16, 64, 68, .14); }
.ajuda-num { font: italic 700 2.6rem/1 var(--display); color: var(--agua); }
.ajuda-card h3 { color: var(--petroleo); font-size: 1.18rem; }
.ajuda-card p { color: var(--cinza); font-size: .98rem; }
.ajuda-card .vai, .caminho .vai { font-weight: 700; font-size: .92rem; color: var(--agua-escuro); }
.ajuda-card .vai::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform .2s; }
.ajuda-card:hover .vai::after { transform: translateX(5px); }
.ajuda-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

/* Método A.P.E.X */
.apex { background: var(--papel); }
#materiais { background: var(--branco); }
.apex-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linha); }
.apex-lista li { display: grid; gap: 8px; align-content: start; padding: 22px 22px 8px; border-left: 1px solid var(--linha); min-width: 0; }
.apex-lista li:first-child { border-left: 0; padding-left: 0; }
.apex-letra { font: italic 700 clamp(4.6rem, 9vw, 7rem)/.9 var(--display); color: transparent; -webkit-text-stroke: 2px var(--agua); }
.apex-lista h3 { color: var(--petroleo); font-size: 1.2rem; }
.apex-lista p { color: var(--cinza); font-size: .98rem; }

/* Sobre: conquistas */
.conquistas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.conquista { display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--petroleo); color: #dcebe8; border-top: 4px solid var(--agua); min-width: 0; }
.conquista + .conquista { background: var(--agua-escuro); border-top-color: #9fd1cb; }
.conquista h3 { font: italic 700 1.55rem/1 var(--display); color: var(--branco); }
.conquista ul { display: grid; gap: 7px; }
.conquista li { position: relative; padding-left: 18px; font-size: .95rem; line-height: 1.4; }
.conquista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 3px; background: #9fd1cb; transform: skewX(-24deg); }
@media (max-width: 440px) { .conquistas { grid-template-columns: minmax(0, 1fr); } }

/* Sobre: formação */
.sobre-lista { display: grid; gap: 8px; border-top: 1px solid var(--linha); padding-top: 14px; }
.sobre-lista li { position: relative; padding-left: 20px; font-weight: 600; color: var(--petroleo); }
.sobre-lista li::before { content: ""; position: absolute; left: 0; top: .65em; width: 10px; height: 3px; background: var(--agua); transform: skewX(-24deg); }

/* Caminhos para começar */
.comecar .miolo { grid-template-columns: minmax(0, 1fr); }
.comecar-topo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.comecar-topo .comecar-foto { margin-top: 0; }
.caminhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.caminho { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 24px; background: rgba(255, 255, 255, .1); border-top: 4px solid #9fd1cb; min-width: 0; margin: 0; }
.caminho-num { font: italic 700 2.4rem/1 var(--display); color: #9fd1cb; }
.caminho h3 { color: var(--branco); font-size: 1.25rem; }
.caminho .objetivos label { min-height: 44px; padding: 8px 12px; }
.caminho .botao { justify-self: start; margin-top: 4px; }
.caminho:first-child .botao-claro { animation: pulso 2.6s ease-out infinite; }

/* Botão flutuante (computador) */
.flutuante { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: 24px; z-index: 24; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 16px; border-radius: 999px; background: var(--agua-escuro); color: var(--branco); font-weight: 700; text-decoration: none; box-shadow: 0 10px 26px rgba(16, 64, 68, .3); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s, transform .25s, background-color .15s; }
.flutuante.visivel { opacity: 1; transform: none; pointer-events: auto; }
.flutuante:hover { background: var(--petroleo); transform: translateY(-2px); }
.rodape .miolo { padding-bottom: 96px; }

/* Título principal com o rótulo de localização dentro (ajuda o Google) */
.abertura h1 .rotulo { display: block; margin-bottom: 22px; font-family: var(--corpo); font-style: normal; line-height: 1.6; }
.abertura h1 .frase { display: block; }

/* Provas na abertura */
.provas { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem; font-weight: 600; color: var(--petroleo); }
.provas li + li::before { content: ""; display: inline-block; width: 9px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--agua); transform: skewX(-24deg); }
.provas a { text-decoration: none; }
.provas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.estrela { color: #c9962b; }

/* Menu: destaque para atletas */
.menu .menu-atleta { color: var(--agua-escuro); font-weight: 700; }

/* Faixa que leva para a página de atletas */
.atleta-faixa { position: relative; background: var(--petroleo-2); color: var(--branco); overflow: hidden; }
.atleta-faixa .miolo { position: relative; padding-block: clamp(44px, 6vw, 72px); grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; }
.atleta-faixa h2 { color: var(--branco); }
.atleta-faixa .rotulo { color: #9fd1cb; }
.atleta-faixa p:not(.rotulo) { color: #dcebe8; font-size: 1.08rem; max-width: 40rem; }
.atleta-faixa-texto { display: grid; gap: 12px; }
.atleta-faixa .quadra { left: auto; right: -120px; top: -60px; transform: none; opacity: .14; }
.botao-seta::after { content: "\2192"; margin-left: .5em; transition: transform .2s; }
.botao-seta:hover::after { transform: translateX(4px); }

/* Planos: itens em comum */
.inclusos { display: grid; gap: 14px; padding: 24px; background: var(--branco); border-left: 4px solid var(--agua); }
.inclusos h3 { font: italic 700 1.6rem/1 var(--display); color: var(--petroleo); }
.inclusos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.inclusos li { position: relative; padding-left: 20px; font-size: .98rem; line-height: 1.45; }
.inclusos li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 3px; background: var(--agua); transform: skewX(-24deg); }
.plano .beneficios li { font-weight: 600; }

/* Onde eu atendo */
.locais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.local { display: grid; gap: 12px; align-content: start; padding: 26px; background: var(--branco); border-top: 4px solid var(--agua); min-width: 0; }
.local h3 { font: italic 700 1.9rem/1 var(--display); color: var(--petroleo); }
.local p { color: var(--cinza); }
.local strong { color: var(--tinta); }
.local a { font-weight: 700; color: var(--petroleo); }
.paises { display: flex; flex-wrap: wrap; gap: 8px; }
.paises li { padding: 6px 12px; border-radius: 999px; background: var(--menta); color: var(--petroleo); font-weight: 600; font-size: .9rem; }
.locais-faixa { background: var(--papel); }

/* Página de atletas */
.momentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.momento { display: grid; gap: 8px; align-content: start; padding-top: 16px; background: linear-gradient(var(--agua), var(--agua)) top left / 100% 3px no-repeat; }
.momento h3 { color: var(--petroleo); font-size: 1.15rem; }
.momento p { color: var(--cinza); font-size: .98rem; }
.modalidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.modalidade { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 26px; background: var(--branco); border-top: 4px solid var(--agua); min-width: 0; }
.modalidade:nth-child(2), .modalidade:nth-child(3) { background: var(--petroleo); color: #dcebe8; border-top-color: #9fd1cb; }
.modalidade h3 { font: italic 700 2.2rem/1 var(--display); color: var(--petroleo); }
.modalidade:nth-child(2) h3, .modalidade:nth-child(3) h3 { color: var(--branco); }
.modalidade p { font-size: 1rem; }
.modalidade .botao { justify-self: start; }
.modalidade-outros { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 32px; align-items: center; border-top-color: var(--agua-escuro); }
.modalidade-outros h3 { grid-column: 1; }
.modalidade-outros p { grid-column: 1; }
.modalidade-outros .botao { grid-column: 2; grid-row: 1 / span 2; }
.modalidades-nota { color: var(--cinza); }
.modalidades-nota a { font-weight: 700; color: var(--petroleo); }
.trajetoria { background: var(--branco); }
.atleta-planos { background: var(--nevoa); }
.atleta-planos .miolo { grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; }
.voltar { font-weight: 600; text-decoration: none; color: var(--petroleo); }
.voltar::before { content: "\2190"; margin-right: .4em; }

/* Política de privacidade */
.texto-legal { display: grid; gap: 14px; max-width: 46rem; }
.texto-legal h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 14px; }
.texto-legal p { color: var(--cinza); }
.texto-legal a { color: var(--petroleo); font-weight: 600; }
.aviso-cookies a { color: var(--petroleo); font-weight: 600; }

/* Aviso de cookies */
.aviso-cookies { position: fixed; left: var(--calha-e); right: var(--calha-d); bottom: 16px; z-index: 40; max-width: 640px; margin-inline: auto; display: grid; gap: 12px; padding: 18px 20px; background: var(--branco); color: var(--tinta); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 40px rgba(16, 64, 68, .22); font-size: .95rem; }
.aviso-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.aviso-acoes .botao { min-height: 42px; padding: 6px 18px; }

/* Barra do celular */
.barra { display: none; }

@media (max-width: 960px) {
  .menu { display: none; }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
  .planos { gap: 12px; }
  .plano { padding: 20px 16px; }
  .plano-nome { font-size: 1.8rem; }
  .plano .botao { padding-inline: 10px; font-size: .92rem; }
  .fb-trilho { grid-auto-columns: 78%; }
  .perto .miolo, .sobre .miolo, .comecar .miolo, .paciente-grade, .materiais-grade { grid-template-columns: minmax(0, 1fr); }
  .perto-foto { min-height: 0; }
  .perto-foto img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .sobre-foto { aspect-ratio: 1 / 1; object-position: 40% 18%; }
  .ajuda-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apex-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .apex-lista li, .apex-lista li:first-child { border-left: 0; padding: 18px 0; border-bottom: 1px solid var(--linha); }
  .comecar-topo, .caminhos { grid-template-columns: minmax(0, 1fr); }
  .atleta-faixa .miolo, .atleta-planos .miolo { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .inclusos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .momentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modalidades, .locais { grid-template-columns: minmax(0, 1fr); }
  .modalidade-outros { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .modalidade-outros .botao { grid-column: 1; grid-row: auto; }
  .caminho { grid-template-rows: none; }
}
@media (max-width: 720px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .abertura { grid-template-columns: minmax(0, 1fr); }
  .rodape .miolo { grid-template-columns: minmax(0, 1fr); }
  .lugar span { display: block; }
  .lugar .modo::before { content: none; }
  .abertura-texto { padding-left: var(--calha-e); padding-right: var(--calha-d); padding-bottom: 28px; }
  .abertura-foto { min-height: 0; }
  .abertura-foto::before { display: none; }
  .abertura-foto img { position: static; width: 100%; height: auto; aspect-ratio: 1 / 1; clip-path: none; object-position: 50% 14%; }
  .perto-lista { grid-template-columns: minmax(0, 1fr); }
  .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .filtro { flex: none; }
  .topo .botao { display: none; }
  .planos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--calha-e); margin-inline: calc(var(--calha-e) * -1) calc(var(--calha-d) * -1); padding: 6px var(--calha-d) 14px var(--calha-e); scrollbar-width: none; }
  .planos::-webkit-scrollbar { display: none; }
  .plano { scroll-snap-align: start; padding: 22px 18px; }
  .planos-dica { display: block; }
  .flutuante { display: none; }
  .aviso-cookies { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .rodape .miolo { padding-bottom: 44px; }
  .barra { position: fixed; inset: auto 0 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--papel); border-top: 1px solid var(--linha); padding: 10px var(--calha-d) calc(10px + env(safe-area-inset-bottom, 0px)) var(--calha-e); }
  .barra .botao { min-height: 46px; padding: 6px 10px; }
}
@media (max-width: 440px) {
  .etapas { grid-template-columns: minmax(0, 1fr); }
  .ajuda-grade, .apex-lista, .inclusos ul, .momentos { grid-template-columns: minmax(0, 1fr); }
  .atalho { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .atalho .vai { grid-column: 1; grid-row: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}