/* sansa · páginas do rodapé · v1 · 15/10/2026
   Tokens e regras copiados de lp-sprint1/src/app/landing-v9/fragment.html (LP no ar).
   O que é novo (componentes das páginas internas) está abaixo de "componentes das páginas". */

html, body { background: #F2EADC; margin: 0; }
.lp9 { margin: 0; background: #F2EADC; padding: 28px; font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; color: #2E3A34; font-size: 17px; line-height: 1.55; }
.lp9 *, .lp9 *::before, .lp9 *::after { box-sizing: border-box; }
.lp9 h1, .lp9 h2, .lp9 h3, .lp9 h4, .lp9 p { margin: 0; }
.lp9 a { color: #A85F2E; }
.lp9 a:hover { color: #8A4C22; }
.lp9 img { max-width: 100%; }
.in { max-width: calc(1200px * var(--larg, 1)); margin: 0 auto; padding-inline: 24px; }
.serif { font-family: 'Fraunces', Georgia, serif; font-weight: 400; color: #1D2823; }
.k { font: 600 12px/1.4 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; margin: 0; }
.duo { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.duo.inv { grid-template-columns: 7fr 5fr; }
.duo.inv > .txt { order: 2; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 999px; background: #D9925E; color: #1D2823 !important; font: 600 15px 'Plus Jakarta Sans', sans-serif; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: #CF8550; }
.btn.sec { background: transparent; border: 1px solid rgba(29,40,35,.28); padding-block: 0; margin: 0; } /* v2: .sec (seção) dava 88px de padding ao botão */
.btn.sec:hover { border-color: #1D2823; background: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #D9925E; outline-offset: 3px; }

/* moldura: um cartão só, de ponta a ponta */
.pg { max-width: calc(1320px * var(--larg, 1)); margin: 0 auto; background: #FAF5EC; border-radius: 36px; overflow: clip; }

/* cabeçalho claro */
.nav { display: flex; align-items: center; gap: 32px; height: 76px; border-bottom: 1px solid #E6DCCB; }
.nav ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 24px; font-size: 14.5px; }
.nav ul a { color: #2E3A34; text-decoration: none; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: #A85F2E; }
.nav .btn { height: 42px; padding: 0 18px; font-size: 14px; }

/* seções */
.sec { padding-block: 88px; }
.sec + .sec { border-top: 1px solid #E6DCCB; }
.sec-tr { margin-inline: 64px; }
.h1 { font-size: 56px; line-height: 1.04; letter-spacing: -0.01em; }
h2.serif { font-size: 42px; line-height: 1.1; }
.lead { font-size: 18px; max-width: 56ch; }
.micro { font-size: 13px; color: #6E8080; }
.pilha { display: flex; flex-direction: column; gap: 18px; }

/* perguntas (igual à LP) */
.faq details { border-bottom: 1px solid #E2E8E4; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font: 600 17px/1.4 'Plus Jakarta Sans', sans-serif; color: #1D2823; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #6E8080; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0; padding: 0 0 18px; font-size: 16px; max-width: 62ch; }

/* fechamento verde-escuro (igual à LP) */
.fim { padding: 8px 40px 40px; }
.fim > .in { max-width: none; border-radius: 30px; padding: 96px 64px; text-align: center;
  background: radial-gradient(120% 90% at 25% 10%, #22322B 0%, #16231C 55%, #0E1511 100%);
  box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fim h2 { color: #FCFCFC; font-size: 44px; line-height: 1.08; max-width: 22ch; }
.fim p { color: #D7DED9; font-size: 13px; }
.fim p.dados { color: #9DB0AC; max-width: 46ch; }

/* rodapé (igual à LP, links apontando entre as páginas) */
footer .grade { padding-block: 56px 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; gap: 40px; font-size: 14px; color: #6E8080; }
footer .grade > div { display: flex; flex-direction: column; gap: 10px; }
footer .grade > div:first-child { grid-column: 1 / -1; align-items: center; text-align: center; padding-bottom: 32px; border-bottom: 1px solid #E6DCCB; }
footer .grade a, footer .grade span { color: #2E3A34; text-decoration: none; }
footer .grade a:hover { color: #A85F2E; }
footer .base { padding-block: 20px 40px; border-top: 1px solid rgba(29,40,35,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12.5px; color: #6E8080; }
footer .base a { color: #6E8080; text-decoration: none; }

/* barra fixa do celular (igual à LP) */
.fixa { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #1D2823; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); align-items: center; justify-content: space-between; gap: 12px; }
.fixa span { color: #D7DED9; font-size: 12.5px; white-space: nowrap; }
.fixa .btn { height: 44px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }

/* ===== componentes das páginas ===== */

/* cartão claro (mesmo #FCFCFC da tabela Retrato × Biografia) */
.cartao { background: #FCFCFC; border: 1px solid rgba(29,40,35,.08); border-radius: 20px; padding: 26px 24px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cartao h3 { font: 400 22px/1.2 'Fraunces', Georgia, serif; color: #1D2823; margin-bottom: 8px; }
.cartao p { font-size: 15.5px; }
.num { font: 400 36px/1 'Fraunces', Georgia, serif; color: #1D2823; display: block; margin-bottom: 10px; }

/* passos (igual ao "Como funciona" da LP) */
.passos { display: flex; flex-direction: column; gap: 22px; }
.passo { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.passo > span { font: 400 36px/1 'Fraunces', Georgia, serif; color: #1D2823; }
.passo b { display: block; color: #1D2823; }
.passo b small { font-weight: 400; font-size: 13px; color: #6E8080; }
.passo p { font-size: 15.5px; }

/* painel verde da Biografia */
.escuro { background: radial-gradient(120% 90% at 25% 10%, #22322B 0%, #16231C 55%, #0E1511 100%); color: #F2EDE1; border-radius: 28px; padding: 36px 34px; box-shadow: 0 40px 70px -40px rgba(14, 21, 17, .7); }
.escuro .serif { color: #FAF5EC; }
.escuro .k { color: #D0A95A; }
.escuro p { color: #C9CFC8; }
.escuro hr { border: 0; border-top: 1px solid #24312A; margin: 18px 0; }
.regua-b { position: relative; display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.regua-b i { flex: 1; }
.regua-b i:nth-child(1) { background: #A9483E; } .regua-b i:nth-child(2) { background: #A86A35; } .regua-b i:nth-child(3) { background: #5C8A68; }
.zonas-b { display: flex; justify-content: space-between; margin-top: 10px; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.zonas-b span:nth-child(1) { color: #C4574A; } .zonas-b span:nth-child(2) { color: #C9803F; } .zonas-b span:nth-child(3) { color: #7FB890; }
.lista-e { list-style: none; margin: 0; padding: 0; }
.lista-e li { padding: 14px 0; border-top: 1px solid #24312A; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.lista-e li:first-child { border-top: 0; }
.lista-e li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #D0A95A; margin-top: 8px; }
.lista-e b { color: #FAF5EC; font-weight: 600; display: block; }
.lista-e span { font-size: 14.5px; color: #C9CFC8; }

/* lista clara com marcador */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 14px 0; border-top: 1px solid #E6DCCB; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; }
.lista li:first-child { border-top: 0; }
.lista li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #D9925E; margin-top: 9px; }
.lista b { color: #1D2823; }

/* foto */
.foto { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(14, 21, 17, .45); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { font-size: 13px; color: #6E8080; padding: 10px 4px 0; background: #FAF5EC; }

/* bloco "a definir" (protótipo; some quando o dado existir) */
.tbd { border: 1.5px dashed #D9925E; background: rgba(217,146,94,.08); border-radius: 16px; padding: 18px 20px; font-size: 14.5px; color: #8A4C22; }
.tbd::before { content: "A definir"; display: block; font: 700 10.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #A85F2E; margin-bottom: 6px; }
.tbd.inline { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.tbd.inline::before { display: none; }

/* migalha */
.migalha { font-size: 13px; color: #6E8080; padding-top: 28px; }
.migalha a { color: #6E8080; text-decoration: none; }
.migalha a:hover { color: #A85F2E; }

/* tabela Retrato × Biografia (versão enxuta da LP) */
.comp { background: #FCFCFC; border-radius: 20px; padding: 6px 24px 8px; }
.comp-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.3fr); gap: 16px; padding: 14px 0; border-top: 1px solid rgba(29,40,35,.1); font-size: 14.5px; line-height: 1.45; }
.comp-row:first-child { border-top: 0; }
.comp-row > :first-child { color: #1D2823; font-weight: 600; font-size: 15px; }
.comp-head { color: #1D2823; }
.comp-head span { font: 400 20px 'Fraunces', Georgia, serif; }
.comp-tag { display: none; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; margin-bottom: 2px; }

/* biblioteca */
.busca { display: flex; flex-direction: column; gap: 14px; }
.busca input { width: 100%; height: 52px; border-radius: 14px; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; padding: 0 18px; font: 400 16px 'Plus Jakarta Sans', sans-serif; color: #1D2823; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: none; color: #2E3A34; font: 500 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.filtros button.on { border-color: #D9925E; color: #A85F2E; background: rgba(217,146,94,.08); }
.itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.item { display: flex; flex-direction: column; gap: 6px; background: #FCFCFC; border: 1px solid rgba(29,40,35,.08); border-radius: 18px; padding: 20px; text-decoration: none; color: #2E3A34 !important; transition: border-color .15s, transform .15s; min-width: 0; }
.item:hover { border-color: #D9925E; transform: translateY(-1px); }
.item h3 { font: 400 20px/1.2 'Fraunces', Georgia, serif; color: #1D2823; overflow-wrap: anywhere; }
.item .cien { font-style: italic; font-size: 13.5px; color: #6E8080; }
.item p { font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.item .tag { align-self: flex-start; font: 600 10.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; }
.item .rev { align-self: flex-start; font-size: 11.5px; color: #A85F2E; border: 1px dashed #D9925E; border-radius: 999px; padding: 1px 8px; }
.contagem { font-size: 13px; color: #6E8080; }
.vazio { padding: 40px 0; text-align: center; color: #6E8080; }
.aviso { font-size: 13.5px; color: #6E8080; border-left: 3px solid #D9925E; padding-left: 14px; max-width: 72ch; }

/* ficha */
.ficha-cab { display: flex; flex-direction: column; gap: 10px; }
.ficha-cab .cien { font-style: italic; color: #6E8080; font-size: 18px; }
.ficha-bloco { display: flex; flex-direction: column; gap: 10px; padding: 26px 0; border-top: 1px solid #E6DCCB; }
.ficha-bloco h2 { font-size: 26px !important; }

/* índice de páginas */
.mapa a.item p { -webkit-line-clamp: 4; }

@media (max-width: 1024px) {
  .lp9 { padding: 12px; }
  .pg { border-radius: 26px; }
  .in { padding-inline: 20px; }
  .nav { height: 64px; gap: 12px; justify-content: space-between; }
  .nav ul { display: none; }
  .nav .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
  .sec { padding-block: 56px; }
  .sec-tr { margin-inline: 20px; }
  .h1 { font-size: 40px; line-height: 1.05; }
  h2.serif { font-size: 32px; line-height: 1.1; }
  .duo, .duo.inv { grid-template-columns: 1fr; gap: 28px; }
  .duo.inv > .txt { order: 0; }
  .duo > * { min-width: 0; }
  .grade-3, .grade-4 { grid-template-columns: 1fr 1fr; }
  .itens { grid-template-columns: 1fr 1fr; }
  .fim { padding: 4px 16px 24px; }
  .fim > .in { border-radius: 24px; padding: 48px 22px; }
  .fim h2 { font-size: 32px; }
  .fim .btn { width: 100%; max-width: 340px; }
  footer .grade { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .comp-row { grid-template-columns: 1fr; gap: 8px; }
  .comp-head { display: none; }
  .comp-head + .comp-row { border-top: 0; }
  .comp-tag { display: block; }
  .escuro { padding: 28px 22px; border-radius: 22px; }
  .fixa { display: flex; }
  body { padding-bottom: 84px; }
}
@media (max-width: 640px) {
  .grade-2, .grade-3, .grade-4, .itens { grid-template-columns: 1fr; }
  .h1 { font-size: 36px; }
}

/* ---------- cabeçalho flutuante (16/10), igual ao da home ----------
   Ao rolar, o cabeçalho vira uma cápsula presa no topo; atrás dela, uma faixa lisa
   na cor da página separa a cápsula do conteúdo. */
.nav-band .nav.flutua { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(1120px, calc(100% - 24px)); height: 62px; margin: 0; padding: 0 8px 0 24px; border: 1.5px solid rgba(29,40,35,.14); border-radius: 999px; background: #FCFCFC; box-sizing: border-box; animation: nav-desce .28s cubic-bezier(.2,.8,.2,1); }
.nav-band .nav.flutua ul { gap: 4px; }
.nav-band .nav.flutua ul a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; transition: background .15s; }
.nav-band .nav.flutua ul a:hover { background: #F2EADC; color: #1D2823; }
.nav-band .nav.flutua ul a[aria-current="page"] { background: #1D2823; color: #FAF5EC; }
.nav-band .nav.flutua .btn { height: 46px; }
.nav-band.flutua-on::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 93px; z-index: 59; pointer-events: none; background: #F2EADC; }
/* 16/10: a faixa tem a cor do fundo da página; o cartão passa por baixo dela com os cantos de cima arredondados */
.nav-band.flutua-on::after { content: ""; position: fixed; z-index: 59; pointer-events: none; top: 93px; left: max(28px, calc((100% - calc(1320px * var(--larg, 1))) / 2)); right: max(28px, calc((100% - calc(1320px * var(--larg, 1))) / 2)); height: 36px; background: radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left top / 36px 36px no-repeat, radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right top / 36px 36px no-repeat; }
@keyframes nav-desce { from { transform: translate(-50%, -140%); opacity: 0; } }
@media (max-width: 760px) {
  .nav-band .nav.flutua { top: 10px; height: 52px; padding: 0 5px 0 18px; }
  .nav-band .nav.flutua .btn { height: 40px; }
  .nav-band.flutua-on::before { height: 80px; }
  .nav-band.flutua-on::after { top: 80px; }
}
@media (prefers-reduced-motion: reduce) { .nav-band .nav.flutua { animation: none; } }

/* âncoras não ficam escondidas atrás do cabeçalho flutuante */
.sec[id] { scroll-margin-top: 110px; }

/* Perguntas: no celular, os seis temas cabem em duas linhas de três */
@media (max-width: 640px) { .filtros-perg .btn { padding: 0 16px; } }

/* barra do CTA no celular (16/10): cápsula flutuante, com a mesma margem e o mesmo arredondado do cabeçalho */
@media (max-width: 1024px) {
  .fixa { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 999px; padding: 8px 8px 8px 22px; }
  body { padding-bottom: 96px; }
}

@media (max-width: 1024px) { .nav-band.flutua-on::after { left: 12px; right: 12px; height: 26px; background: radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left top / 26px 26px no-repeat, radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right top / 26px 26px no-repeat; } }
@media (max-width: 760px) { .nav-band.flutua-on::after { top: 80px; } }

/* CTA de baixo no celular (16/10): atrás da cápsula, uma faixa na cor do fundo da página, e o cartão
   termina arredondado logo acima dela (igual ao cabeçalho) */
@media (max-width: 1024px) {
  body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 29; pointer-events: none; background: #F2EADC; }
  body::before { content: ""; position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); height: 26px; z-index: 29; pointer-events: none;
    background: radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left bottom / 26px 26px no-repeat, radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right bottom / 26px 26px no-repeat; }
}

/* menu do celular (16/10): sem o "Começar grátis" no cabeçalho (o CTA mora na barra de baixo);
   no lugar dele, um botão de menu que abre a lista de páginas */
.menu-m { display: none; }
@media (max-width: 1024px) {
  .nav { position: relative; }
  .nav > .btn { display: none !important; }
  .menu-m { display: block; margin-left: auto; }
  .menu-m summary { list-style: none; width: 42px; height: 42px; border-radius: 50%; background: #1D2823; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
  .menu-m summary::-webkit-details-marker { display: none; }
  .menu-m summary span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #FAF5EC; transition: transform .2s, opacity .2s; }
  .menu-m[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-m[open] summary span:nth-child(2) { opacity: 0; }
  .menu-m[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-m-l { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 61; display: flex; flex-direction: column; padding: 6px; border-radius: 20px; background: #FCFCFC; border: 1px solid rgba(29,40,35,.14); box-shadow: 0 22px 40px -22px rgba(29,40,35,.55); }
  .menu-m-l a { padding: 12px 14px; border-radius: 14px; font: 500 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823 !important; text-decoration: none; }
  .menu-m-l a:hover, .menu-m-l a[aria-current="page"] { background: #F2EADC; }
}
@media (max-width: 760px) { .nav:has(.bib-movel) .menu-m { display: none; } }

/* ajuste fino (17/10): o bloco final tem a mesma largura do conteúdo (alinhado às vitrines e cartões acima) */
.fim > .in { max-width: 1152px; margin-inline: auto; }
@media (max-width: 1024px) { .fim { padding-inline: 20px; } } /* no celular, o bloco final na mesma largura do conteúdo */

/* 17/10: até 1024px, o primeiro bloco de Retrato, Biografia e Como funciona fica centralizado, como o hero da landing.
   Os passos numerados seguem alinhados à esquerda; as seções de baixo não mudam. */
@media (max-width: 1024px) {
  .abre { align-items: center; text-align: center; }
  .abre > .lead { margin-inline: auto; }
  .abre > .passos { align-self: stretch; text-align: left; }
}

/* 17/10: telas largas. Acima de 1440px a página inteira cresce na mesma proporção (1,05× a 1,3×); a largura de desenho continua 1320px */
@media (min-width: 1441px) { html { zoom: 1.05; } }
@media (min-width: 1600px) { html { zoom: 1.1; } }
@media (min-width: 1800px) { html { zoom: 1.2; } }
@media (min-width: 2100px) { html { zoom: 1.3; } }

/* 19/10, pedido do dono: objetivos da página do Retrato em 2 colunas iguais, todos com a mesma largura e altura */
.obj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.obj-grid .btn { width: 100%; height: 56px; padding: 0 14px; font-weight: 500; white-space: normal; text-align: center; line-height: 1.2; justify-content: center; }
.obj-grid .btn[aria-pressed="true"] { border-color: #d9925e; background: rgba(217,146,94,.12); color: #1d2823; }
.obj-ir { margin-top: 6px; width: 100%; max-width: 520px; height: 52px; justify-content: center; animation: obj-ir-entra .25s ease-out; }
.obj-ir[hidden] { display: none !important; }
@keyframes obj-ir-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .obj-ir { animation: none; } }

/* 19/10, pedido do dono: nos cartões de etapa numerada, o título fica ao lado do número. Só no celular, onde o cartão ocupa a largura toda;
   no desktop os cartões ficam lado a lado e estreitos, e o título volta para baixo do número (ao lado, ele quebrava em 3 linhas) */
@media (max-width: 760px) {
  .cartao.passo-n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .cartao.passo-n > .num { grid-column: 1; grid-row: 1; margin: 0; }
  .cartao.passo-n > h3 { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .cartao.passo-n > :not(.num):not(h3) { grid-column: 1 / -1; }
}
/* 19/10, pedido do dono: o preço no eyebrow da Biografia, com mais destaque que o resto do eyebrow */
.k .k-preco { font: 400 20px/1 'Fraunces', Georgia, serif; letter-spacing: 0; text-transform: none; color: #A85F2E; vertical-align: -2px; }

/* 20/10, pedido do dono: as páginas do rodapé com as mesmas medidas da página principal (a Biblioteca tem as suas e fica de fora).
   Seções a 72px (64 no celular), H1 58 (40 no celular), H2 42 (34), legenda 16 no celular, cartões com canto 12,
   e o hero cabendo na primeira tela: a foto do hero não passa da altura da tela, já descontado o zoom das telas largas */
body:not(:has(.bib-trilho)) section.sec { padding-block: 72px; }
body:not(:has(.bib-trilho)) .h1 { font-size: 58px; }
body:not(:has(.bib-trilho)) h2.serif { font-size: 42px; }
body:not(:has(.bib-trilho)) .cartao { border-radius: 12px; }
/* o zoom é o da landing em cada tela; quem faz o hero caber é a foto, limitada à altura útil da tela (--z vem do script) */
@media (min-width: 1025px) {
  body:not(:has(.bib-trilho)) .pg > section.sec:first-of-type .foto { max-height: calc((100vh - 20px) / var(--z, 1) - 200px); }
  /* o hero começa a 24px do cabeçalho, como o da página principal */
  body:not(:has(.bib-trilho)) .pg > section.sec:first-of-type { padding-top: 24px; }
}
@media (max-width: 1024px) {
  body:not(:has(.bib-trilho)) section.sec { padding-block: 64px; }
  body:not(:has(.bib-trilho)) .h1 { font-size: 40px; line-height: 1.05; }
  body:not(:has(.bib-trilho)) h2.serif { font-size: 34px; }
}
@media (max-width: 760px) {
  body:not(:has(.bib-trilho)) .lead { font-size: 16px; }
}
/* 20/10: a regra de espaço entre seções pegava também os botões "btn sec" (72px de padding); agora vale só para section.sec */
/* 20/10: Para médicos, os dois caminhos no hero (autor e validador), cada cartão com o seu botão no pé */
.caminhos { margin-top: 6px; gap: 12px; }
.caminhos .cartao { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; }
.caminhos .cartao h3 { margin: 0; font-size: 20px; }
.caminhos .cartao p { font-size: 14.5px; flex: 1; }
.caminhos .cartao .btn { align-self: flex-start; height: 44px; padding: 0 16px; font-size: 14px; }
@media (max-width: 760px) { .caminhos { grid-template-columns: minmax(0, 1fr) !important; } }
/* no hero de Para médicos a coluna do texto é mais larga, para os botões dos dois caminhos caberem numa linha */
@media (min-width: 1025px) {
  .duo:has(.caminhos) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .caminhos .cartao .btn { white-space: nowrap; }
}
/* 21/10, pedido do dono: número e título na mesma linha também no desktop, nos cartões largos (grades de 2 e 3 colunas).
   Na grade de 4 colunas o cartão é estreito demais e o título quebraria em três linhas: lá continua número em cima */
@media (min-width: 761px) {
  .grade-2 > .cartao.passo-n, .grade-3 > .cartao.passo-n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .grade-2 > .cartao.passo-n > .num, .grade-3 > .cartao.passo-n > .num { grid-column: 1; grid-row: 1; margin: 0; }
  .grade-2 > .cartao.passo-n > h3, .grade-3 > .cartao.passo-n > h3 { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .grade-2 > .cartao.passo-n > :not(.num):not(h3), .grade-3 > .cartao.passo-n > :not(.num):not(h3) { grid-column: 1 / -1; }
}
/* 21/10, pedido do dono: ícones pêssego na primeira coluna da tabela Retrato × Biografia, como na página principal */
.comp-nome { display: flex; align-items: center; gap: 10px; }
.comp-nome svg { flex: none; color: #d9925e; }

/* objetivos do Retrato com os ícones dos chips da landing (22/10): cinza em repouso, pêssego ao passar ou escolher */
.obj-grid .btn { gap: 10px; }
.obj-grid .ob-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: #b4beb9; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.obj-grid .btn:hover .ob-ic, .obj-grid .btn[aria-pressed="true"] .ob-ic { stroke: #d9925e; }

/* 22/10, pedido do dono: a linha sob o botão da Biografia fica centralizada em relação ao botão */
.cta-centro { display: flex; flex-direction: column; align-items: center; gap: 10px; width: fit-content; }
.cta-centro .micro { margin: 0; text-align: center; }
/* 22/10, pedido do dono: número e título na mesma linha também na grade de 4 colunas */
@media (min-width: 761px) {
  .grade-4 > .cartao.passo-n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .grade-4 > .cartao.passo-n > .num { grid-column: 1; grid-row: 1; margin: 0; }
  .grade-4 > .cartao.passo-n > h3 { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .grade-4 > .cartao.passo-n > :not(.num):not(h3) { grid-column: 1 / -1; }
}

/* 22/10, pedido do dono: fechamento em 2 colunas como o da landing (texto e botão, cartão "Onde está o seu?") */
.fim-duo { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 64px; align-items: center; width: 100%; }
.fim-txt { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.fim-txt h2, .fim-txt p { margin: 0; }
.fim-card { box-sizing: border-box; padding: 40px 44px; border-radius: 28px; background: #26332D; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.fim-card .k { margin: 0; color: #9DB0AC; }
.fim .fim-card .serif { margin: 0; font-size: 30px; line-height: 1.15; color: #FCFCFC; }
.fim-barra { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #5A4A3E 0 34%, #33423B 34% 67%, #3C5A4A 67% 100%); }
.fim-barra i { position: absolute; top: -3px; left: 50%; width: 20px; height: 20px; border-radius: 50%; border: 2px dashed #D7DED9; box-sizing: border-box; transform: translateX(-50%); }
.fim-card .zonas { display: flex; justify-content: space-between; font-size: 12px; color: #9DB0AC; }
/* celular e tablet: título, cartão, botão e as duas linhas, como na landing */
@media (max-width: 1024px) {
  .fim-duo { display: flex; flex-direction: column; gap: 0; }
  .fim-txt { display: contents; }
  .fim-txt h2 { order: 1; margin: 0 auto 28px; }
  .fim-card { order: 2; margin-bottom: 28px; width: 100%; }
  .fim-txt .btn { order: 3; margin: 0 auto 22px; }
  .fim-txt p { order: 4; margin: 0 auto 22px; text-align: center; }
  .fim-txt p.dados { order: 5; margin-bottom: 0; }
}
@media (max-width: 760px) { .fim-card { padding: 28px 24px; border-radius: 20px; } .fim .fim-card .serif { font-size: 26px; } }
/* 22/10: temas de Perguntas com ícones (cinza em repouso, pêssego ao passar) */
.filtros-perg .btn { gap: 8px; }
.filtros-perg .ob-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: #93a09a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.filtros-perg .btn:hover .ob-ic { stroke: #d9925e; }

/* 22/10: com "Começar meu Retrato, grátis" o botão da barra fixa passava da borda no celular; o texto quebra em duas linhas, como na landing */
.fixa .btn { white-space: normal; text-align: center; line-height: 1.15; flex: 0 1 auto; min-width: 0; }
.fixa span { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.3; }

/* publicado: marcas de revisão ocultas */
.rev { display: none !important; }

/* 25/10: o fundo claro vai de ponta a ponta (desktop e celular), igual à landing; sem moldura bege nem cantos no cartão, borda só nos blocos */
html, body, html body .lp9 { background: #FAF5EC !important; }
html body .lp9 { padding: 0 !important; }
html body .pg { border-radius: 0 !important; }
html body .nav-band.flutua-on::before, html body::after { background: #FAF5EC !important; }
html body .nav-band.flutua-on::after, html body::before { display: none !important; }

/* 03/11 (dono): no celular o pé do rodapé fica centralizado */
@media (max-width: 760px) { footer .base { flex-direction: column; align-items: center; text-align: center; } footer .base > div { justify-content: center; } }
/* 03/11 (dono): botões secundários com fundo claro e borda sólida (a borda fina semitransparente borrava sobre o bege com o zoom) */
.btn.sec { background: #FCFCFC; border: 1px solid #D9D3C7; }
.btn.sec:hover { background: #FCFCFC; border-color: #1D2823; }
/* objetivos do Retrato: texto numa linha, alinhado à esquerda com o ícone */
.obj-grid .btn { justify-content: flex-start; white-space: nowrap; height: 52px; padding: 0 18px; font-size: 15px; }
.obj-grid .btn span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .obj-grid .btn { height: 48px; padding: 0 14px; font-size: 14px; gap: 8px; } }
/* 03/11 (dono): ícone de traço nos cartões (Retrato: o que o Retrato pergunta) */
.cartao > .cartao-ic { display: block; width: 26px; height: 26px; margin: 0 0 14px; fill: none; stroke: #D9925E; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 03/11 (dono): botão secundário de link mais firme: borda na cor da tinta, seta que anda ao passar; os objetivos do Retrato e os filtros ficam como estão */
a.btn.sec { border-color: #1D2823; gap: 10px; }
a.btn.sec::after { content: "→"; font-weight: 500; transition: transform .2s; }
a.btn.sec:hover { background: #1D2823; color: #FAF5EC !important; }
a.btn.sec:hover::after { transform: translateX(3px); }
.obj-grid a.btn.sec { border-color: #D9D3C7; }
.obj-grid a.btn.sec::after { content: none; }
.obj-grid a.btn.sec:hover { background: #FCFCFC; color: #1D2823 !important; border-color: #1D2823; }
/* 03/11 (dono): o ícone do cartão na mesma linha do título; o texto vem embaixo, na largura toda */
.cartao:has(> .cartao-ic) { display: grid !important; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.cartao:has(> .cartao-ic) > .cartao-ic { grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin: 0; }
.cartao:has(> .cartao-ic) > h3 { grid-column: 2; grid-row: 1; margin: 0; }
.cartao:has(> .cartao-ic) > :not(.cartao-ic):not(h3) { grid-column: 1 / -1; margin-top: 10px; }
/* 03/11 (dono): no celular, menos espaço entre o cabeçalho e o eyebrow da primeira seção */
@media (max-width: 760px) { .nav-band + section.sec { padding-top: 28px !important; } }
/* 03/11 (dono): botão secundário de link em harmonia com o site: preenchimento bege, sem borda, texto e seta na tinta */
a.btn.sec { background: #F2EADC; border: 1px solid transparent; color: #1D2823 !important; height: 46px; padding: 0 22px; font-size: 14.5px; gap: 8px; }
a.btn.sec::after { font-size: 15px; }
a.btn.sec:hover { background: #EADDC6; border-color: transparent; color: #1D2823 !important; }
.obj-grid a.btn.sec { background: #FCFCFC; border: 1px solid #D9D3C7; height: 52px; padding: 0 18px; }
.obj-grid a.btn.sec:hover { background: #FCFCFC; border-color: #1D2823; }
@media (max-width: 760px) { .obj-grid a.btn.sec { height: 48px; padding: 0 14px; } }

/* 03/11 (dono): o bloco verde do fim leva o nadador de fundo, igual à landing (foto de teste; a definitiva vem do Gemini, no mesmo arquivo). O conteúdo de cada página segue o mesmo, sobre vidro */
.fim > .in { position: relative; overflow: hidden; isolation: isolate; background: #0E1511 var(--fim-foto, url(/paginas/img/fim-natacao.jpg)) var(--fim-pos, center 50%) / cover no-repeat; } /* 03/11: cada página pode trocar a foto com --fim-foto no section.fim */
.fim > .in::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(14,21,17,.5) 0%, rgba(14,21,17,.22) 50%, rgba(14,21,17,.4) 100%); }
.fim-txt { padding: 44px 36px; border-radius: 28px; background: rgba(14,21,17,.34); border: 1px solid rgba(255,253,248,.16); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.fim-card { background: rgba(22,35,28,.4); border: 1px solid rgba(255,253,248,.16); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
/* bloco só de texto (Para médicos, Biblioteca) e celular: véu uniforme por cima da foto, para o texto ler bem */
.fim > .in:not(:has(.fim-duo))::before { background: rgba(14,21,17,.52); }
@media (max-width: 1024px) { .fim > .in::before { background: rgba(14,21,17,.5); } }
.fim > .in p.dados { color: #C9D3CF; } /* 03/11: sobre a foto, a linha dos dados mais clara para ler bem */


/* 03/11 (dono): vidro do fim mais leve no celular e tablet ("glassmorphism exagerado"); o véu escuro da foto segura a leitura */
@media (max-width: 1024px) {
  .fim-txt { background: rgba(14,21,17,.16) !important; border-color: rgba(255,253,248,.10) !important; -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important; }
  .fim-card { background: rgba(22,35,28,.22) !important; border-color: rgba(255,253,248,.10) !important; -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important; }
  .fim h2 { text-shadow: 0 2px 16px rgba(0,0,0,.4); }
}

/* 03/11 (dono): bloco do fim em três colunas no desktop: o texto à esquerda, a foto livre no meio e o cartão à direita, os dois painéis com a mesma altura */
@media (min-width: 1025px) {
  .fim-duo { grid-template-columns: minmax(0, 380px) minmax(160px, 1fr) minmax(0, 380px); gap: 28px; align-items: stretch; }
  .fim-duo > .fim-txt { grid-column: 1; justify-content: center; }
  .fim-duo > .fim-card { grid-column: 3; justify-content: center; }
}
/* 03/11 (dono): no celular e tablet só o rótulo e o título vão para dentro da foto, sobre vidro (classe foto-vidro, bloco vidro-tit); o resto fica abaixo, fora da foto */
.vidro-tit { display: contents; }
@media (max-width: 1024px) {
  .foto-vidro { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0 !important; }
  .foto-vidro > .foto { grid-area: 1 / 1; }
  .foto-vidro > .pilha { display: contents; }
  .foto-vidro .vidro-tit { grid-area: 1 / 1; align-self: end; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin: 10px; padding: 18px 20px; border-radius: 18px; background: rgba(252,252,252,.86); border: 1px solid rgba(255,255,255,.7); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
  .foto-vidro .vidro-tit > * { margin: 0 !important; }
  .foto-vidro > .pilha > :not(.vidro-tit) { margin-top: 16px; }
  .foto-vidro > .pilha > .vidro-tit + * { margin-top: 24px; }
}
/* 03/11 (dono): no celular cada página pode ampliar e mover a foto do fim (--fim-tam-m e --fim-pos-m no section.fim); a Terra dos médicos some com a linha do horizonte e mostra as nuvens com as luzes da cidade */
@media (max-width: 1024px) { .fim > .in { background-size: var(--fim-tam-m, cover); background-position: var(--fim-pos-m, var(--fim-pos, center 50%)); } }
/* 03/11 (dono): no desktop cada página também pode ampliar a foto do fim (--fim-tam), para a pessoa ficar no espaço livre entre os painéis */
@media (min-width: 1025px) { .fim > .in { background-size: var(--fim-tam, cover); } }

/* 03/11 (dono): cartão escuro com foto no topo (classe com-foto): a foto entra pela largura, se funde no escuro e o texto do cartão fica embaixo dela. --foto, --foto-ar (proporção), --foto-pt (onde o texto começa), --f1 e --f2 (início e fim da fusão, em relação à altura da foto) */
.escuro.com-foto { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--foto-pt, 62%); }
.escuro.com-foto::before, .escuro.com-foto::after { content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: var(--foto-ar, 1 / 1); z-index: -1; pointer-events: none; }
.escuro.com-foto::before { background: var(--foto) center top / cover no-repeat; }
.escuro.com-foto::after { background: linear-gradient(180deg, rgba(22,35,28,0) 0%, rgba(22,35,28,0) var(--f1, 40%), #16231C var(--f2, 70%), #16231C 100%); }
.escuro.com-foto { background: linear-gradient(180deg, #16231C 0%, #16231C 55%, #0E1511 100%); } /* 03/11: fundo no mesmo tom da fusão, sem a linha onde a foto termina */
/* 03/11 (dono): no desktop o cartão com foto em duas colunas (classe lado): a foto à esquerda, o texto à direita, mais curto; no celular segue com a foto em cima */
@media (min-width: 1025px) {
  .escuro.com-foto.lado { max-width: none !important; width: 100% !important; justify-self: stretch !important; padding: 36px 34px 36px calc(44% + 34px); }
  .escuro.com-foto.lado::before, .escuro.com-foto.lado::after { right: auto; bottom: 0; width: 44%; height: 100%; aspect-ratio: auto; }
  .escuro.com-foto.lado::before { background-position: center; background-size: cover; }
  .escuro.com-foto.lado::after { background: linear-gradient(90deg, rgba(22,35,28,0) 55%, #16231C 100%); }
}
/* 03/11 (dono): vidro do título mais fino no celular ("ficou grosseiro"): painel do tamanho do conteúdo, letra menor, vidro mais leve */
@media (max-width: 1024px) {
  .foto-vidro .vidro-tit { justify-self: start; margin: 12px; padding: 12px 16px 13px; gap: 2px; border-radius: 14px; background: rgba(252,252,252,.74); border-color: rgba(255,255,255,.55); }
  .foto-vidro .vidro-tit .k { font-size: 11px; }
  .foto-vidro .vidro-tit p.serif { font-size: 40px !important; }
  .foto-vidro .vidro-tit h1 { font-size: 30px !important; line-height: 1.1; }
}
/* 03/11 (dono): bloco verde do fim alinhado ao conteúdo da página (mesmas bordas do texto acima), em todas as páginas */
@media (min-width: 1025px) { html body .fim > .in { max-width: calc(1200px * var(--larg, 1) - 48px) !important; margin-inline: auto !important; } }
/* 03/11 (dono): hero do Médico responsável em duas colunas iguais, foto mais baixa */
@media (min-width: 1025px) { .med-hero { grid-template-columns: 1fr 1fr !important; } .med-hero > .foto { aspect-ratio: 5 / 4 !important; } .med-hero > .foto img { object-position: center 62%; } }
/* 03/11 (dono): fim sem vidro (classe sem-vidro) quando a própria foto já traz as laterais escuras para o texto, como a corrida do Retrato; no desktop */
@media (min-width: 1025px) { .fim.sem-vidro .fim-txt, .fim.sem-vidro .fim-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
/* 03/11 (dono): proposta do fim sem vidro, em todas as páginas: texto e marcador direto sobre a foto, sem painel; a leitura vem de um degradê escuro nas laterais (onde está o conteúdo) e o meio fica limpo para a pessoa da foto */
.fim .fim-txt, .fim .fim-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.fim h2 { text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.fim .fim-card .serif, .fim .fim-card .k, .fim .fim-card .zonas { text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.fim > .in::before { background: linear-gradient(90deg, rgba(14,21,17,.93) 0%, rgba(14,21,17,.8) 28%, rgba(14,21,17,.12) 43%, rgba(14,21,17,.12) 57%, rgba(14,21,17,.8) 72%, rgba(14,21,17,.93) 100%) !important; }
.fim > .in:not(:has(.fim-duo))::before { inset: 0 !important; border-radius: 0 !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: radial-gradient(ellipse 60% 75% at 50% 50%, rgba(14,21,17,.72) 0%, rgba(14,21,17,.45) 60%, rgba(14,21,17,.3) 100%) !important; }
@media (max-width: 1024px) { .fim > .in::before { background: linear-gradient(180deg, rgba(14,21,17,.72) 0%, rgba(14,21,17,.5) 45%, rgba(14,21,17,.72) 100%) !important; } }
/* 03/11 (dono): foto mais larga no cartão em duas colunas, sem cortar as pessoas; o degradê fica só na beirada */
@media (min-width: 1025px) {
  .escuro.com-foto.lado { padding-left: calc(54% + 34px); }
  .escuro.com-foto.lado::before, .escuro.com-foto.lado::after { width: 54%; }
  .escuro.com-foto.lado::before { background-position: 55% center; }
  .escuro.com-foto.lado::after { background: linear-gradient(90deg, rgba(22,35,28,0) 86%, #16231C 100%); }
}
.escuro.com-foto:not(.lado)::before, .escuro.com-foto::before { background-position: center 35%; }
@media (min-width: 1025px) { .escuro.com-foto.lado > p.serif { font-size: 25px !important; } .escuro.com-foto.lado { padding-right: 28px; } } /* 03/11: título do cartão em duas colunas um pouco menor, para a altura não crescer */
/* 03/11 (dono): cartão e nota na largura do texto da mesma coluna (a do .lead, 56ch a 18px), sem passar da linha dos outros textos */
.pilha:has(> .lead) > .cartao, .pilha:has(> .lead) > .micro, .pilha:has(> .vidro-tit) > .cartao { max-width: 586px; box-sizing: border-box; } /* 586px: onde as linhas do texto terminam de fato */
/* 03/11 (dono): no desktop, o conteúdo de cada coluna lateral do fim fica centralizado na própria coluna (o texto à esquerda e o marcador centralizado na coluna à direita) */
@media (min-width: 1025px) {
  .fim-duo > .fim-txt, .fim-duo > .fim-card { align-items: center !important; text-align: center !important; justify-content: center; padding-inline: 24px !important; }
  .fim-duo > .fim-card > * { width: 100%; text-align: center; }
  .fim-duo > .fim-card .zonas { text-align: initial; }
}
/* 03/11 (dono): no celular, vidro sutil só no marcador do fim, sem borda (o título e o botão seguem direto sobre a foto) */
@media (max-width: 1024px) { html body .fim .fim-card { background: rgba(14,21,17,.3) !important; border: 0 !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; box-shadow: none !important; } }
/* 03/11 (dono): véu do fim ajustável no HTML de cada página (--fim-veu no section.fim), no desktop */
@media (min-width: 1025px) { .fim[style*="--fim-veu"] > .in::before { background: var(--fim-veu) !important; } }
/* 03/11 (dono): no desktop, cada coluna lateral do fim centrada na sua faixa (as duas laterais com a mesma largura, ~31% cada; o meio fica para a pessoa da foto) */
@media (min-width: 1025px) {
  .fim > .in:has(.fim-duo) { padding-inline: 0 !important; }
  .fim-duo { grid-template-columns: 1fr minmax(0, 1.25fr) 1fr !important; gap: 0 !important; }
  .fim-duo > .fim-txt, .fim-duo > .fim-card { width: 100%; max-width: 380px; justify-self: center; box-sizing: border-box; }
}
/* 04/11 (dono): véu do fim no celular ajustável no HTML (--fim-veu-m no section.fim) */
@media (max-width: 1024px) { .fim[style*="--fim-veu-m"] > .in::before { background: var(--fim-veu-m) !important; } }
/* 04/11 (dono): no celular o título da foto (foto-vidro) fica direto na foto, sem painel: texto branco sobre um degradê escuro na parte de baixo */
@media (max-width: 1024px) {
  .foto-vidro > .foto { position: relative; }
  .foto-vidro > .foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; background: linear-gradient(180deg, rgba(14,21,17,0) 0%, rgba(14,21,17,.45) 45%, rgba(14,21,17,.82) 100%); }
  .foto-vidro .vidro-tit { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin: 0 !important; padding: 0 22px 20px !important; }
  .foto-vidro .vidro-tit .k { color: rgba(252,252,252,.85) !important; }
  .foto-vidro .vidro-tit p.serif, .foto-vidro .vidro-tit h1 { color: #FCFCFC !important; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
}

/* 04/11 (dono): no celular, hero com botão e legenda dentro da foto (classe hero-in-foto), como o bloco verde do fim: degradê escuro embaixo, botão e legenda em branco */
@media (max-width: 1024px) {
  .hero-in-foto { display: grid !important; grid-template-columns: minmax(0, 1fr); row-gap: 0 !important; }
  .hero-in-foto > .pilha { display: contents; }
  .hero-in-foto > .pilha > .k { grid-row: 1; margin-bottom: 12px; }
  .hero-in-foto > .pilha > h1 { grid-row: 2; margin-bottom: 16px; }
  .hero-in-foto > .pilha > .lead { grid-row: 3; margin-bottom: 24px; }
  .hero-in-foto > .foto { grid-row: 4; grid-column: 1; position: relative; }
  .hero-in-foto > .foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none; background: linear-gradient(180deg, rgba(14,21,17,0) 0%, rgba(14,21,17,.5) 45%, rgba(14,21,17,.85) 100%); }
  .hero-in-foto > .pilha > div:has(> .btn) { grid-row: 4; grid-column: 1; align-self: end; justify-self: center; z-index: 1; margin: 0 20px 56px; }
  .hero-in-foto > .pilha > .micro { grid-row: 4; grid-column: 1; align-self: end; justify-self: center; z-index: 1; margin: 0 20px 22px; color: rgba(252,252,252,.88) !important; text-align: center; }
}
/* 04/11 (dono): cartão "Retrato e Biografia": a foto aparece inteira em cima, o verde só na beirada de baixo, e o texto começa onde a foto termina */
.retrato-texto-fora > .com-foto { --foto-pt: calc(75% + 26px) !important; --f1: 82% !important; --f2: 100% !important; }
/* 04/11 (dono): foto própria do celular no fim (--fim-foto-m), recortada no centro, sem os painéis escuros laterais que o Gemini embute */
@media (max-width: 1024px) { .fim[style*="--fim-foto-m"] > .in { background-image: var(--fim-foto-m) !important; background-size: cover !important; background-position: center 45% !important; } }
/* 04/11 (dono): bloco verde do fim mais baixo no desktop: menos respiro em cima e embaixo e título um pouco menor, para o bloco não ficar alto demais */
@media (min-width: 1025px) {
  html body .fim > .in { padding-block: 72px !important; }
  html body .fim h2 { font-size: 38px !important; line-height: 1.08 !important; }
}
/* 04/11 (dono): no desktop, o botão do hero da Biografia e a nota embaixo dele alinhados à esquerda, como o resto da coluna e o hero das outras páginas */
@media (min-width: 1025px) {
  .cta-centro { align-items: flex-start; }
  .cta-centro .micro { text-align: left; }
}
/* 04/11 (dono): fim com texto à esquerda (classe fim-lado no section.fim), no desktop: a foto encosta à direita na altura do bloco (--fim-tam: auto 100%) e o verde liso da esquerda se funde nela pelo --fim-veu. Usado na Biblioteca e em Perguntas */
@media (min-width: 1025px) {
  html body .lp9 .fim.fim-lado > .in { align-items: flex-start; text-align: left; }
  html body .lp9 .fim.fim-lado h2 { max-width: min(500px, 46%); }
}
/* 04/11 (dono): título longo no fim (classe longo no h2) em fonte menor: 30px no desktop e 26px no celular */
html body .fim h2.longo { font-size: 26px !important; line-height: 1.12 !important; text-wrap: balance; }
@media (min-width: 1025px) { html body .fim h2.longo { font-size: 30px !important; } }
/* 04/11 (dono): bloco do fim com texto à esquerda com altura mínima, para a foto da direita (que ocupa a altura do bloco) não ficar pequena quando o título tem uma linha só; cada página pode mudar com --fim-alt */
@media (min-width: 1025px) { html body .lp9 .fim.fim-lado > .in { min-height: var(--fim-alt, 440px); justify-content: center; box-sizing: border-box; } }

/* 04/11 (dono): botão mais elegante no card escuro do Retrato: contorno fino dourado, texto creme, seta discreta; no hover preenche em creme */
.escuro .btn.fino { background: transparent; border: 1px solid rgba(208,169,90,.6); color: #FAF5EC !important; font-weight: 500; letter-spacing: .01em; gap: 10px; padding: 0 22px 0 26px; transition: background .2s, border-color .2s, color .2s; }
.escuro .btn.fino::after { content: "→"; font-weight: 400; transition: transform .2s; }
.escuro .btn.fino:hover { background: #FAF5EC; border-color: #FAF5EC; color: #1D2823 !important; }
.escuro .btn.fino:hover::after { transform: translateX(3px); }

/* 04/11 (dono): legenda sob o CTA da Biografia numa linha só no desktop; a quebra fica só no celular */
@media (min-width: 761px) { .cta-centro .micro .so-cel { display: none; } .cta-centro .micro { white-space: nowrap; } }


/* 04/11 (dono): "botão arredondado não faz sentido" dentro de cartão. Padrão novo de ação em cartão (classe acao): link de texto em negrito, sublinhado fino terracota e seta; no hover o sublinhado fica cheio e a seta anda. A pílula (.btn) fica para o CTA principal da seção */
.acao { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 6px 0 5px; font: 600 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823 !important; text-decoration: none; border-bottom: 1px solid rgba(217,146,94,.55); transition: border-color .2s, gap .2s; }
.acao::after { content: "→"; color: #D9925E; font-weight: 500; transition: transform .2s; }
.acao:hover { border-bottom-color: #D9925E; }
.acao:hover::after { transform: translateX(4px); }

/* Investimento da Biografia (classe inv-cheia). 04-05/11 (dono): foto da orla em 16:9 e 2400 px, todo o texto dentro dela.
   Desktop: a foto ocupa a largura toda e se funde no verde escuro da marca (#16231C) num degradê limpo, sem desfoque ("parecia vidro sujo");
   texto em duas colunas, rótulo e preço à esquerda, frase e nota do exame à direita.
   05/11: sem o rótulo Investimento (dono pediu remover), "Avulso · Sem assinatura" acima do preço, frase só "Sugerimos repetir a cada seis meses."
   Celular e tablet: um cartão verde só; a foto em 4:3 no topo mostra os quatro amigos e se funde no verde, o texto começa onde ela termina;
   a nota do exame fica fora do cartão, discreta, em cinza. */
.inv-cheia { display: grid; grid-template-columns: minmax(0, 1fr); }
.inv-cheia > .foto { grid-area: 1 / 1; position: relative; isolation: isolate; aspect-ratio: 16 / 9; }
.inv-cheia > .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.inv-cheia > .foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(22,35,28,0) 38%, rgba(22,35,28,.62) 62%, rgba(22,35,28,.94) 82%, #16231C 100%); }
.inv-cheia > .pilha { grid-area: 1 / 1; position: relative; z-index: 3; align-self: end; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; row-gap: 10px; align-items: end; padding: 0 56px 48px; }
.inv-cheia .vidro-tit { display: flex; flex-direction: column; gap: 8px; grid-row: 1 / span 2; }
.inv-cheia .vidro-tit > * { margin: 0; }
.inv-cheia .lead, .inv-cheia .micro { grid-column: 2; margin: 0; }
.inv-cheia .inv-tag { margin: 0; font: 500 15px/1.4 'Plus Jakarta Sans', sans-serif; letter-spacing: .01em; color: rgba(242,237,225,.85); } /* 05/11 (dono): Avulso · Sem assinatura logo acima do preço */
.inv-cheia p.serif { color: #FCFCFC; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.inv-cheia .lead { color: #F2EDE1; max-width: none; line-height: 1.55; text-wrap: balance; }
.inv-cheia .micro { color: rgba(242,237,225,.75); }
.inv-cheia .micro a { color: #E9B37E; }
@media (max-width: 1024px) {
  .inv-cheia { display: block; position: relative; margin-bottom: 64px; }
  .inv-cheia > .foto { aspect-ratio: 4 / 3; border-radius: 28px 28px 0 0; box-shadow: none; }
  .inv-cheia > .foto img { object-position: 51% center; }
  .inv-cheia > .foto::after { background: linear-gradient(180deg, rgba(22,35,28,0) 42%, rgba(22,35,28,.6) 72%, #16231C 100%); }
  .inv-cheia > .pilha { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: -44px; padding: 0 22px 26px; background: linear-gradient(180deg, rgba(22,35,28,0) 0, #16231C 44px); border-radius: 0 0 28px 28px; box-shadow: 0 40px 70px -40px rgba(14,21,17,.45); } /* o topo transparente deixa a foto se fundir no verde sem emenda */
  .inv-cheia .vidro-tit { display: contents; }
  .inv-cheia p.serif { font-size: clamp(36px, 13vw, 44px) !important; white-space: nowrap; } /* 06/11: R$ 199,90 não quebra em 320 px */
  .inv-cheia .lead { font-size: 16px; line-height: 1.5; }
  .inv-cheia .micro { position: absolute; top: 100%; left: 4px; right: 4px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #6E8080; }
  .inv-cheia .micro a { color: #6E8080; }
}