/* ==========================================================================
   Dra. Laiz Andrade · sistema "RECORTE"
   Criado em 10/09/2026 pelo squad `site-builder`. Desescopado no mesmo dia.

   O QUE ESTE ARQUIVO E
   --------------------------------------------------------------------------
   O sistema visual do site inteiro. Nasceu como `home.css`, escopado em
   `.home-v3`, porque a primeira rodada redesenhou so a home. O Victor aprovou
   a direcao em 10/09/2026 e liberou o resto, entao o escopo caiu e o arquivo
   mudou de nome: ele agora vale nas doze paginas.

   ⚠️ A `/links/` NAO carrega este arquivo. Ela e uma pagina de bio
   autocontida, com <style> proprio, e redeclara `.btn--azul` e `.btn--verde`
   com outro significado. Carregar isto la quebraria os dois. Ela segue o mesmo
   sistema, escrito a mao no proprio arquivo.

   ORDEM DE CARGA: tokens.css → fonts.css → style.css → recorte.css
   O `style.css` continua sendo a base (reset, grade, estrutura do cabecalho e
   do rodape). Este arquivo vem depois e vence por ordem de origem, com a mesma
   especificidade. Nao aumente especificidade aqui sem necessidade: a ordem ja
   resolve.

   O QUE MUDA, EM UMA FRASE
   --------------------------------------------------------------------------
   Sai o morfismo (par de sombras clara e escura, sombra interna, vidro
   desfocado, gradiente que termina em branco) e entra o recorte: superficie
   chapada na cor da marca, borda solida, sombra deslocada sem borrao, foto em
   forma organica e os grafismos da Jedoline soltos na pagina.

   A REGRA DE COR, QUE E O MOTIVO DA RODADA
   --------------------------------------------------------------------------
   As seis cromaticas entram em 100%, como SUPERFICIE. A tinta e sempre o
   grafite. Os derivados escurecidos (--cta-rosa, --cta-azul) nao aparecem
   nenhuma vez neste arquivo: perderam o papel de fundo de botao, que era o
   que fazia o site parecer conduzido por uma cor que nao existe no brandbook.

   Cada familia e um trio fechado, declarado em uma classe so:
       .is-rosa { --sup: superficie · --edge: borda e sombra · --tinta: texto }
   Componente nenhum escolhe cor a mao. Ele escolhe a familia.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FAMILIAS DE COR
   Trio por familia. Trocar a familia de um bloco e trocar uma classe.
   Contraste do grafite sobre cada superficie, medido:
   amarelo 7,93 · verde 7,77 · rosa 6,63 · azul 6,27 · bege 5,88 · lilas 5,06.
   Todas passam AA para texto normal. Nenhuma seria usavel como tinta.
   --------------------------------------------------------------------------- */
.is-rosa    { --sup: var(--rosa);    --edge: var(--rosa-fundo);    --tinta: var(--rosa-tinta);    --veu: var(--rosa-claro); }
.is-azul    { --sup: var(--azul);    --edge: var(--azul-fundo);    --tinta: var(--azul-tinta);    --veu: var(--azul-claro); }
.is-amarelo { --sup: var(--amarelo); --edge: var(--amarelo-fundo); --tinta: var(--amarelo-tinta); --veu: var(--amarelo-claro); }
.is-verde   { --sup: var(--verde);   --edge: var(--verde-fundo);   --tinta: var(--verde-tinta);   --veu: var(--verde-claro); }
.is-lilas   { --sup: var(--lilas);   --edge: var(--lilas-fundo);   --tinta: var(--lilas-tinta);   --veu: var(--lilas-claro); }
.is-bege    { --sup: var(--bege);    --edge: var(--bege-fundo);    --tinta: var(--bege-tinta);    --veu: var(--bege-claro); }
.is-creme   { --sup: var(--creme);   --edge: var(--linha-forte);   --tinta: var(--grafite);       --veu: var(--creme); }
.is-branco  { --sup: var(--branco);  --edge: var(--linha-forte);   --tinta: var(--grafite);       --veu: var(--creme); }

/* ---------------------------------------------------------------------------
   2. BASE DA PAGINA
   --------------------------------------------------------------------------- */
body { background: var(--creme); }

h1, h2 { letter-spacing: -0.012em; }
/* 3,05rem e o teto medido, nao escolhido: a 3,5rem a frase "Crescer com
   cuidado." nao cabia na coluna do hero a 1440px e quebrava em duas linhas,
   desmontando o par de ritmo da tagline. */
h1 { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.05rem); line-height: 1.16; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 1.06rem + .4vw, 1.375rem); line-height: 1.3; }

/* `overflow: clip` e nao `hidden`, e a diferenca importa aqui.
   `hidden` cria um contexto de rolagem, e um contexto de rolagem MATA qualquer
   `position: sticky` dentro dele. A foto do ensaio e sticky. `clip` corta os
   grafismos que sangram para fora da secao exatamente igual, sem criar
   contexto de rolagem. A linha `hidden` fica antes como reserva para navegador
   antigo: la o corte funciona e o sticky simplesmente nao acontece. */
.r-sec { position: relative; overflow: hidden; overflow: clip; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.r-sec--creme  { background: var(--creme); }
.r-sec--branco { background: var(--branco); }
.r-sec--tight  { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* Faixa de cor cheia, de borda a borda. E o elemento que quebra o ritmo da
   pagina, e o unico lugar onde a cromatica ocupa a largura inteira da tela.
   O canto superior arredondado evita a caixa dura sem apelar para bolinha de
   creche: e a mesma curva generosa dos cards, so que em escala de pagina. */
.r-band {
  position: relative;
  background: var(--sup);
  color: var(--grafite);
  border-radius: var(--radius-band) var(--radius-band) 0 0;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}
.r-band--fecha { border-radius: var(--radius-band); }
.r-band > * { position: relative; z-index: 1; }

/* Textura da faixa: a padronagem sem emenda montada com os proprios grafismos
   da Jedoline (nuvem, coracao, arco-iris, flor, onda, folha, grama, sol,
   borboleta), recortados em silhueta creme. Fica em 15%, que e o ponto em que
   ela se percebe de perto e some de longe. Nao concorre com texto nenhum. */
.r-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/graf/tile-creme.webp");
  background-size: 300px 300px;
  opacity: .15;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 900px) { .r-band::before { background-size: 360px 360px; } }

/* ---------------------------------------------------------------------------
   3. CABECALHO E RODAPE
   Sobrescreve o chrome compartilhado, so dentro da home.
   --------------------------------------------------------------------------- */
.site-header {
  background: var(--creme);
  border-bottom: 1.5px solid var(--linha);
  box-shadow: none;
}
.nav-pill { background: transparent; box-shadow: none; padding: 0; gap: 2px; }
.nav-pill a { color: var(--grafite); border-radius: var(--radius-pill); }
.nav-pill a:hover { background: var(--rosa-claro); }
.nav-pill a[aria-current="page"] {
  background: var(--rosa);              /* grafite sobre rosa: 6,63:1 */
  color: var(--grafite);
  border: 1.5px solid var(--rosa-fundo);
  box-shadow: none;
  padding: 7.5px 14.5px;
}
.nav-toggle {
  background: var(--creme);
  border: 1.5px solid var(--linha-forte);
  box-shadow: var(--rec-sm) var(--linha);
}
.nav-mobile { background: var(--creme); }
.nav-mobile__close { background: var(--creme); border: 1.5px solid var(--linha-forte); }
.nav-mobile a[aria-current="page"]:not(.btn) { color: var(--rosa-tinta); }

.site-footer { background: var(--grafite); color: var(--creme); }

/* ---------------------------------------------------------------------------
   4. BOTOES
   ---------------------------------------------------------------------------
   O problema original: nenhuma das seis cromaticas serve de fundo para texto
   branco. O rosa da 2,04:1 com branco. A saida NAO e escurecer o rosa ate ele
   virar outra cor (que foi o que gerou o --cta-rosa e o vinho): e inverter a
   tinta para grafite e devolver o peso do botao pela borda e pela sombra
   deslocada. Rosa com grafite da 6,63:1, contra 4,59:1 do --cta-rosa com
   branco. O botao ficou mais legivel E passou a usar a cor da marca.

   A HIERARQUIA, 10/09/2026 · pedido do Victor: "dar um destaque melhor,
   principalmente nos do WhatsApp".
   ---------------------------------------------------------------------------
   Sao tres degraus, e o que os separa e o PESO DA BORDA, nao a cor do fundo.
   Assim o destaque cresce sem que o site vire um carnaval de botao colorido:

     1. CONTATO      `.btn--contato`  borda e sombra GRAFITE. O mais forte.
     2. NAVEGACAO    familia          borda e sombra no --edge da familia.
     3. DISCRETO     `.btn--secondary` fio de --linha-forte, sombra de 3px.

   POR QUE A BORDA DE CONTATO E GRAFITE, E ISSO FOI MEDIDO
   ---------------------------------------------------------------------------
   A WCAG 1.4.11 pede 3:1 no limite de um componente contra o que esta ao lado.
   Um botao deste site pousa em oito superficies diferentes (as seis
   cromaticas, o creme e o branco), e NENHUM dos --edge de familia clareia 3:1
   contra todas elas. Medido, com o pior caso de cada um:

     --rosa-fundo    sobre lilas   2,29  ✗
     --azul-fundo    sobre lilas   2,44  ✗
     --amarelo-fundo sobre lilas   1,92  ✗   ← e este era o caso REAL:
     --verde-fundo   sobre lilas   1,97  ✗     o botao amarelo da secao de
     --lilas-fundo   sobre grafite 1,68  ✗     localizacao da home pousa na
     --bege-fundo    sobre grafite 1,95  ✗     faixa azul, a 2,38:1.

   O grafite clareia contra as oito, e com folga:
     rosa 6,63 · azul 6,27 · amarelo 7,93 · verde 7,77 · lilas 5,06 ·
     bege 5,88 · creme 12,10 · branco 13,54.

   Ou seja: a borda grafite nao e so mais forte de olhar, e a unica que a
   norma aceita em qualquer lugar do site. As duas coisas coincidiram.
   --------------------------------------------------------------------------- */
.btn {
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn--primary,
.btn--azul,
.btn--amarelo,
.btn--verde,
.btn--secondary {
  color: var(--grafite);
  background: var(--sup);
  border-color: var(--edge);
  box-shadow: var(--rec-md) var(--edge);
}
.btn--primary  { --sup: var(--rosa);    --edge: var(--rosa-fundo); }
.btn--azul     { --sup: var(--azul);    --edge: var(--azul-fundo); }
.btn--amarelo  { --sup: var(--amarelo); --edge: var(--amarelo-fundo); }
.btn--verde    { --sup: var(--verde);   --edge: var(--verde-fundo); }
/* Degrau 3, o discreto. Ate 10/09/2026 ele tinha fio em --linha-forte, que e
   grafite a 30% e compoe em rgb(155,148,146) sobre o branco: 1,82:1 contra o
   proprio preenchimento e 1,06:1 quando o botao pousa na faixa amarela. Ou
   seja, o limite do botao era invisivel nos dois lados.

   O fio passa a ser grafite solido de 1,5px, que clareia 13,54:1 contra o
   branco e no minimo 5,06:1 contra qualquer faixa. Ele continua sendo o mais
   quieto dos tres, e o que o separa do CTA de contato nao e mais a borda: e o
   PREENCHIMENTO (branco contra cor da marca) e o PESO DA SOMBRA (3px clara
   contra 5px grafite). */
.btn--secondary{ --sup: var(--branco);  --edge: var(--grafite); border-width: 1.5px; box-shadow: var(--rec-sm) var(--linha-forte); }

/* Degrau 1. Vem DEPOIS das familias de proposito: mesma especificidade, ganha
   por ordem de origem, e assim `.btn--amarelo.btn--contato` mantem o fundo
   amarelo e troca so a borda e a sombra. */
.btn--contato { --edge: var(--grafite); border-color: var(--grafite); box-shadow: var(--rec-md) var(--grafite); }

.btn--primary:hover,
.btn--azul:hover,
.btn--amarelo:hover,
.btn--verde:hover,
.btn--secondary:hover {
  color: var(--grafite);
  transform: translate(-2px, -2px);
  box-shadow: var(--rec-lg) var(--edge);
}
.btn--secondary:hover { box-shadow: var(--rec-md) var(--linha-forte); }
.btn:active { transform: translate(1px, 1px); box-shadow: var(--rec-sm) var(--edge); }

/* Botao dentro do rodape grafite e da tarja de consentimento. La o fundo e o
   proprio grafite, entao a borda grafite sumiria: a tinta inverte e o limite
   passa a ser o creme (12,10:1 contra o rodape). */
.btn--on-dark { --sup: var(--creme); --edge: var(--creme); color: var(--grafite); background: var(--creme); border: 2px solid var(--creme); box-shadow: var(--rec-sm) rgba(244, 243, 225, .45); }
.btn--on-dark:hover { background: var(--branco); border-color: var(--branco); color: var(--grafite); transform: translate(-1px, -1px); }

/* O CTA do cabecalho e o mesmo botao de contato, em escala menor. E a escala
   que o subordina ao CTA principal da pagina, nao a cor: os dois sao rosa com
   borda grafite, e o do cabecalho tem 11px de recuo contra 15px do outro.

   Nao repetir aqui o defeito de 08/09/2026: a regra do menu mobile perdia para
   .btn--primary por especificidade e servia 2,95:1. O seletor de la continua
   com :not(.btn) e este bloco nao mexe nele. */
.header-cta {
  background: var(--rosa);
  color: var(--grafite);
  border: 2px solid var(--grafite);
  box-shadow: var(--rec-sm) var(--grafite);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.header-cta:hover { background: var(--rosa); color: var(--grafite); transform: translate(-1px, -1px); box-shadow: var(--rec-md) var(--grafite); }
.header-cta:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--grafite); }
.header-cta svg { fill: var(--grafite); }

/* ---------------------------------------------------------------------------
   BOTAO FLUTUANTE DO WHATSAPP
   ---------------------------------------------------------------------------
   E o contato mais visivel do site e o unico elemento que sobrevoa TODAS as
   superficies: as seis cromaticas, o creme, o branco e o rodape grafite. Por
   isso ele e o unico componente do sistema com dois aneis.

   O que havia antes, e valia nas onze paginas que ainda nao tinham sido
   migradas: fundo --cta-rosa #926C6B (cor que nao existe no brandbook), icone
   branco e sombra borrada. Contra o rodape grafite dava 2,95:1, ou seja
   reprovava justamente onde ele passa o tempo todo no fim da pagina.

   A construcao nova, e cada anel resolve um lado do problema:

     fundo   --rosa      cor da marca, icone grafite por cima → 6,63:1
     borda   2px grafite limite contra as seis cromaticas, o creme e o branco
                         (pior caso, o lilas, a 5,06:1)
     anel    3px creme   limite contra o rodape grafite → 12,10:1, que e onde
                         a borda grafite sumiria

   A adjacencia creme/grafite e INTERNA ao componente: ela vale 12,10:1 em
   qualquer fundo, entao o botao carrega o proprio contraste e deixa de
   depender do que esta atras. E o mesmo principio do adesivo recortado, que e
   a linguagem do sistema: o anel claro e a sangria da faca.
   --------------------------------------------------------------------------- */
.whatsapp-float {
  background: var(--rosa);
  color: var(--grafite);
  border: 2px solid var(--grafite);
  /* A primeira sombra pinta por cima da segunda: o anel creme come os 3px
     iniciais da sombra deslocada, e o que sobra dela aparece do anel para
     fora. E o efeito de adesivo com sombra, nao dois efeitos empilhados. */
  box-shadow: 0 0 0 3px var(--creme), var(--rec-md) var(--grafite);
}
.whatsapp-float:hover { background: var(--rosa); transform: translate(-2px, -2px); box-shadow: 0 0 0 3px var(--creme), var(--rec-lg) var(--grafite); }
.whatsapp-float:active { transform: translate(1px, 1px); box-shadow: 0 0 0 3px var(--creme), var(--rec-sm) var(--grafite); }
.whatsapp-float svg { fill: var(--grafite); }

/* ---------------------------------------------------------------------------
   5. CARTAO DE RECORTE
   Superficie chapada + borda solida + sombra deslocada. Zero borrao, zero
   gradiente terminando em branco, zero sombra interna.
   --------------------------------------------------------------------------- */
.r-card {
  position: relative;
  background: var(--sup);
  color: var(--grafite);
  border: 2px solid var(--edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--rec-md) var(--edge);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.r-card--flat { box-shadow: none; }
/* Cartao claro com fio da familia. E o mesmo desenho do `.r-post`: quando o
   conteudo e texto longo, a cromatica em 100% cansa e o lugar dela passa a ser
   a BORDA e a SOMBRA, nao o fundo. Usado nas politicas e nas notas de artigo. */
.r-card--claro { background: var(--branco); }
.r-card__corpo { padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 10px; }
/* Teto de medida em todo texto corrido. `ch` mede o zero da Raleway, que e
   ~1,35x a media das minusculas: 52ch renderiza cerca de 70 caracteres, que e
   o topo da faixa confortavel. Sem este teto, o cartao de largura inteira do
   tablet passava de 80. */
.r-card__corpo > p { font-size: 15.5px; line-height: 1.6; max-width: 52ch; }

/* Foto no topo do cartao, sangrando ate a borda. E o elemento que a referencia
   do Victor usa em todo card e que este site nao tinha em lugar nenhum. */
.r-card__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.r-card__foto--larga { aspect-ratio: 8 / 5; }

/* Marcador circular. Fica montado na divisa entre a foto e a cor, metade em
   cada uma, que e o que costura os dois blocos do cartao. */
.r-marca {
  position: relative;
  margin: -30px 0 2px 22px;
  width: 58px; height: 58px;
  border-radius: var(--radius-pill);
  background: var(--creme);
  border: 2px solid var(--edge);
  color: var(--edge);
  display: inline-flex; align-items: center; justify-content: center;
  font: 400 24px/1 var(--font-display);
  z-index: 2;
}
.r-marca img { width: 28px; height: 28px; object-fit: contain; }

/* ⚠️ A OPACIDADE SAIU EM 10/09/2026, e ela era um defeito medido.
   O kicker rodava com `opacity: .78`, e 11,5px ja e o menor corpo da pagina.
   Composto sobre as cromaticas isso dava 3,48:1 no lilas, 3,90 no bege, 4,07
   no azul e 4,19 no rosa: os quatro reprovam o minimo de 4,5 para texto
   normal. Estava assim na home que foi aprovada.
   O grafite cheio sobe para 5,06 a 7,93. O kicker continua subordinado ao
   titulo por TAMANHO e ENTRELETRA, que e como ele deveria estar sendo
   subordinado desde o comeco: transparencia em texto pequeno e o padrao que
   esta conta ja tinha proibido em 03/09/2026. */
.r-kicker {
  font: 700 11.5px var(--font-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* Grafismo dentro do cartao: assinatura discreta no canto, em creme sobre a
   cor. Muda por cartao, nunca se repete no mesmo bloco. */
/* O grafismo entra em silhueta creme, nao na cor original: um coracao rosa
   sobre um cartao rosa nao se ve. `brightness(0) invert(1)` zera a cor e
   devolve o branco, que sobre a cromatica em 30% le como o creme da marca. */
.r-card__graf {
  position: absolute;
  right: -10px; bottom: -12px;
  width: 92px;
  opacity: .32;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 0;
}
.r-card__corpo { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   6. GRAFISMOS SOLTOS
   Os PNG originais da Jedoline, sem recolorir e sem distorcer.
   --------------------------------------------------------------------------- */
.r-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: floaty 9s ease-in-out infinite;
}
.r-deco img { display: block; width: 100%; height: auto; }
.r-deco--quieto { animation: none; }
@media (prefers-reduced-motion: reduce) { .r-deco { animation: none; } }
/* No celular a pagina e estreita e o grafismo passa a disputar espaco com o
   texto. Os marcados como `so-desktop` saem abaixo de 900px. */
.r-deco--so-desktop { display: none; }
@media (min-width: 900px) { .r-deco--so-desktop { display: block; } }

/* ---------------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------------- */
.r-hero { position: relative; overflow: hidden; overflow: clip; padding-block: clamp(2.25rem, 1rem + 4vw, 5rem) clamp(3rem, 1.5rem + 5vw, 6rem); }
.r-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; position: relative; z-index: 1; }
@media (min-width: 940px) { .r-hero__grid { grid-template-columns: minmax(320px, 1.08fr) minmax(300px, .92fr); } }

.r-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 12.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grafite);
  background: var(--amarelo);            /* grafite sobre amarelo: 7,93:1 */
  border: 2px solid var(--amarelo-fundo);
  box-shadow: var(--rec-sm) var(--amarelo-fundo);
  padding: 9px 18px 9px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}
/* O icone do selo e traco monolinear grafite, nao o grafismo colorido: sobre
   o amarelo, qualquer um dos grafismos da paleta ficaria abaixo de 2:1. O
   grafite da 7,93:1 e obedece a regra de marca de icone de interface
   ("line icon monolinear, cor Neutro Escuro"). */
.r-badge svg { flex: none; }

.r-hero h1 { margin: 0 0 12px; max-width: 20ch; }
.r-hero__sub {
  font: 700 clamp(0.95rem, 0.86rem + 0.38vw, 1.125rem)/1.45 var(--font-body);
  color: var(--azul-tinta); margin: 0 0 var(--sp-2); max-width: 30ch;
}
.r-hero__lead { font-size: 17px; line-height: 1.7; margin: 0 0 var(--sp-4); max-width: 54ch; }
.r-hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--sp-4); }

/* Selo de credencial: cartao de recorte em miniatura, no lugar das duas linhas
   de texto solto que existiam antes. */
.r-selos { display: flex; flex-wrap: wrap; gap: 10px; }
.r-selo {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 13px var(--font-body); color: var(--grafite);
  background: var(--branco);
  border: 1.5px solid var(--linha-forte);
  box-shadow: var(--rec-sm) var(--linha);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.r-selo svg { flex: none; }

/* Retrato: arco organico assentado sobre uma mancha rosa. A mancha e a unica
   forma livre da pagina e existe para tirar o retrato do retangulo, que era o
   pedido do Victor sobre a referencia. */
.r-hero__media { position: relative; justify-self: center; width: min(100%, 420px); }
.r-hero__mancha {
  position: absolute;
  inset: 16% -13% -7% -11%;
  background: var(--rosa);
  border-radius: 46% 54% 42% 58% / 50% 44% 56% 50%;
  z-index: 0;
}
@media (min-width: 940px) { .r-hero__mancha { inset: 14% -18% -8% -14%; } }
.r-hero__retrato {
  position: relative; z-index: 1;
  border-radius: var(--arco);
  overflow: hidden;
  border: 2px solid var(--rosa-fundo);
  background: var(--creme);
}
.r-hero__retrato img { width: 100%; height: auto; display: block; }

/* Adesivo sobre a foto. Substitui o balao de vidro desfocado, que era o
   morfismo mais literal do site. */
.r-sticker {
  position: absolute; left: 8px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--creme);
  border: 2px solid var(--linha-forte);
  box-shadow: var(--rec-sm) var(--linha-forte);
  border-radius: var(--radius-pill);
  padding: 10px 18px 10px 12px;
  font: 700 13px var(--font-body); color: var(--grafite);
}
.r-sticker img { height: 28px; width: auto; }

/* ---------------------------------------------------------------------------
   8. ENSAIO (posicionamento) · familia BEGE
   --------------------------------------------------------------------------- */
.r-ensaio { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .r-ensaio { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); } }
.r-ensaio__texto { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.r-prosa { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 58ch; }
.r-prosa p { font-size: 16.5px; line-height: 1.75; text-wrap: pretty; }

/* Pausa. Nao e paragrafo corrido: e o par de frases com ritmo proprio que ja
   existia na copy. Agora ele ganha superficie, em vez de so mudar de cor. */
.r-pausa {
  background: var(--sup);
  border: 2px solid var(--edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--rec-md) var(--edge);
  padding: 26px 30px;
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-display);
}
.r-pausa span {
  display: block;
  text-wrap: balance;
  font-size: clamp(1.2rem, 1.06rem + .55vw, 1.45rem);
  line-height: 1.38;
  color: var(--grafite);
  text-wrap: pretty;
}
.r-pausa--solta { background: transparent; border: none; box-shadow: none; padding: 0; }
/* Na pausa solta as duas frases precisam se separar sem a superficie. A
   segunda vai para a tinta rosa da marca. So dentro de .r-head, porque a
   pausa do cartao rosa ficaria com tinta rosa sobre fundo rosa. */
.r-head .r-pausa--solta span + span { color: var(--rosa-tinta); }

/* A coluna do ensaio e mais alta que a da foto, e o vao que sobrava a direita
   era grande. A foto acompanha a rolagem em vez de ficar parada no topo. So no
   desktop: no celular as colunas empilham e nao existe vao. */
.r-ensaio__media { position: relative; }
@media (min-width: 940px) {
  .r-ensaio__media { position: sticky; top: 104px; }
}
.r-moldura {
  position: relative; z-index: 1;
  border-radius: var(--arco);
  overflow: hidden;
  border: 2px solid var(--edge);
  box-shadow: var(--rec-lg) var(--edge);
}
.r-moldura img { width: 100%; height: auto; display: block; }
/* ⛔ `.r-legenda` REMOVIDA em 10/09/2026, por decisao do Victor: "nada a ver
   colocar isso, nao precisa dessa informacao". Ela servia a linha "Imagem
   ilustrativa de banco. As pessoas retratadas sao modelos." sob a foto do
   ensaio.

   O que continua valendo, e e o que a ficha de licenca realmente exige: a
   Pexels License NAO pede atribuicao, entao a declaracao era zelo excedente.
   A proibicao real e de COMPOSICAO, e ela nao muda: foto de banco nunca entra
   em bloco de depoimento, nunca e legendada como caso atendido e nunca aparece
   ligada ao nome da Dra. Laiz como paciente da clinica. Nao recriar a classe:
   a protecao passa a vir de onde a foto e posta, nao de um aviso embaixo. */

/* ---------------------------------------------------------------------------
   9. JORNADA · cinco cartoes, cinco familias
   A ordem nao e decorativa. Ela segue o significado que a identidade da
   Jedoline atribui a cada cor:
     1 pre-natal        lilas   calma, sensibilidade, serenidade
     2 sala de parto    rosa    carinho, afeto, empatia
     3 hospitalar       azul    confianca, tranquilidade, equilibrio
     4 pos-alta         bege    aconchego, estabilidade, simplicidade
     5 puericultura     verde   esperanca, renovacao, vinculo
   O amarelo fica de fora deste bloco de proposito: a regra de marca proibe
   amarelo e verde na mesma peca, e aqui os dois dividiriam a mesma grade.
   --------------------------------------------------------------------------- */
.r-jornada { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (min-width: 620px)  { .r-jornada { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) {
  .r-jornada { grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
  .r-jornada > * { grid-column: span 2; }
  /* Cinco cartoes em tres colunas deixam um vao a direita. Com seis colunas de
     meia largura, a ultima dupla comeca na coluna 2 e a linha fica centrada. */
  .r-jornada > *:nth-child(4) { grid-column: 2 / span 2; }
}

.r-jornada .r-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.r-jornada .r-card:hover { transform: translate(-3px, -3px); box-shadow: var(--rec-lg) var(--edge); }
@media (prefers-reduced-motion: reduce) { .r-jornada .r-card:hover { transform: none; } }

.r-jornada .r-card__corpo h3 { margin: 4px 0 2px; }

.r-nota {
  font: 500 14.5px/1.6 var(--font-body);
  color: var(--grafite);
  max-width: 46ch;
}
.r-acao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------------
   10. PARA QUEM E · faixa VERDE, de borda a borda
   --------------------------------------------------------------------------- */
.r-dupla { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 860px) { .r-dupla { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }

.r-lista { list-style: none; display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; }
.r-lista li { display: flex; gap: 12px; align-items: flex-start; font: 500 15.5px/1.6 var(--font-body); max-width: 56ch; }
.r-lista li svg { flex: none; margin-top: 3px; }
.r-card h3.r-titulo-lista { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 19px; }
/* Nota de apoio. Era verde travado; passou a obedecer a familia em 10/09/2026,
   porque o mesmo componente serve a observacao da secao "Para quem e" (verde),
   ao aviso medico dos artigos (lilas) e a nota do formulario (lilas). */
.r-obs {
  font: 500 13.5px/1.65 var(--font-body);
  color: var(--grafite);
  margin: 24px 0 0;
  max-width: 52ch;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--veu);
  border-left: 4px solid var(--edge);
}

/* ---------------------------------------------------------------------------
   11. QUEM CUIDA · cartao ROSA grande
   --------------------------------------------------------------------------- */
.r-perfil { display: grid; gap: var(--sp-4); align-items: center; padding: 0; }
@media (min-width: 760px) { .r-perfil { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.25rem); } }
.r-perfil__foto {
  border-radius: var(--arco);
  overflow: hidden;
  border: 2px solid var(--rosa-fundo);
  background: var(--creme);
  margin: 30px 30px 0;
}
@media (min-width: 760px) { .r-perfil__foto { margin: 34px 0 34px 34px; } }
.r-perfil__foto img { width: 100%; height: auto; display: block; }
.r-perfil__texto { padding: 0 30px 34px; }
@media (min-width: 760px) { .r-perfil__texto { padding: 34px 40px 34px 0; } }
.r-perfil__texto h2 { margin: 12px 0 16px; }

/* ---------------------------------------------------------------------------
   12. BLOG · faixa AMARELA, de borda a borda
   --------------------------------------------------------------------------- */
.r-blog-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: var(--sp-5); }
.r-blog { display: grid; gap: var(--sp-3); }
@media (min-width: 700px)  { .r-blog { grid-template-columns: repeat(2, 1fr); } }
/* 1120px, nao 1020px. Medido: a 1024px as tres colunas davam 222px de texto,
   ou seja 29 caracteres por linha. Duas colunas largas leem melhor do que tres
   estreitas, e o ponto de virada esta acima do iPad em retrato. */
@media (min-width: 1120px) { .r-blog { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.r-post {
  text-decoration: none; color: var(--grafite);
  background: var(--branco);
  border: 2px solid var(--edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--rec-md) var(--edge);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.r-post:hover { color: var(--grafite); transform: translate(-3px, -3px); box-shadow: var(--rec-lg) var(--edge); }
@media (prefers-reduced-motion: reduce) { .r-post:hover { transform: none; } }
.r-post img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.r-post__corpo { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.r-post__corpo h3 { font-size: 18px; line-height: 1.32; }
.r-post__corpo p { font-size: 14.5px; line-height: 1.6; }
.r-tag {
  align-self: flex-start;
  font: 700 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grafite);
  background: var(--sup);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
}

/* ---------------------------------------------------------------------------
   13. FAQ · itens em LILAS cheio, sobre a pagina creme
   --------------------------------------------------------------------------- */
.r-faq { display: flex; flex-direction: column; gap: 14px; }
/* Os itens sao a superficie lilas em 100%, sobre a pagina creme. E aqui que o
   lilas ganha area: ele era a unica cor da marca com ZERO aparicao no site
   anterior. Grafite sobre lilas da 5,06:1, o pior caso das seis cromaticas, e
   ainda passa AA para texto normal com folga de 12%. */
.r-faq__item {
  background: var(--lilas);
  border: 2px solid var(--lilas-fundo);
  border-radius: var(--radius-lg);
  box-shadow: var(--rec-md) var(--lilas-fundo);
  padding: 0 24px;
}
.r-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; font: 700 16px/1.45 var(--font-body); color: var(--grafite);
  list-style: none; cursor: pointer;
}
.r-faq__item summary::-webkit-details-marker { display: none; }
.r-faq__item summary::marker { content: ""; }
.r-faq__seta {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill);
  background: var(--creme); border: 1.5px solid var(--lilas-fundo);
  color: var(--lilas-fundo);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.r-faq__item[open] .r-faq__seta { transform: rotate(180deg); }
/* 52ch, nao 66ch. A unidade `ch` mede a largura do zero, que na Raleway e
   bem maior que a media das minusculas: 66ch renderizava 89 caracteres reais
   por linha no desktop, acima do teto de leitura confortavel. Medido, nao
   estimado, com a linha mais longa de cada resposta. */
/* Link dentro de superficie cromatica NAO usa a cor de link do site.
   O `--cta-azul-hover` do style.css da 5,59:1 sobre creme e 2,34:1 sobre o
   lilas. Sobre cor, o link se distingue pelo sublinhado, e a tinta continua
   sendo o grafite. Vale para qualquer superficie da marca, nao so o FAQ. */
.r-faq__item a,
.r-card a:not(.btn),
.r-band a:not(.btn):not(.r-post) {
  color: var(--grafite);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.r-faq__item a:hover,
.r-card a:not(.btn):hover,
.r-band a:not(.btn):not(.r-post):hover { text-decoration-thickness: 3px; }

.r-faq__item p { font-size: 15px; line-height: 1.7; margin: 0; padding: 0 0 22px; max-width: 52ch; }

/* ---------------------------------------------------------------------------
   14. CLINICA · mosaico + citacao AMARELA sobre fundo branco
   --------------------------------------------------------------------------- */
.r-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.r-foto {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 2px solid var(--bege-fundo);
  box-shadow: var(--rec-md) var(--bege-fundo);
  aspect-ratio: 4 / 3;
}
.r-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-foto--larga { grid-column: span 2; }
/* Citacao longa. Ate 10/09/2026 esta classe tinha o amarelo travado no
   proprio seletor, porque so existia um lugar que a usava. Agora ela obedece a
   familia como todo o resto do sistema: `.r-citacao.is-lilas` e a fala da
   propria Dra. Laiz em /sobre, e a familia decide fundo, borda e aspas. */
.r-citacao {
  display: flex; flex-direction: column; justify-content: center;
  padding: 30px 28px;
  border-radius: var(--radius-2xl);
  background: var(--sup);
  border: 2px solid var(--edge);
  box-shadow: var(--rec-md) var(--edge);
  color: var(--grafite);
  margin: 0;
}
.r-citacao blockquote { margin: 0; max-width: 46ch; font: 400 16.5px/1.6 var(--font-display); color: var(--grafite); text-wrap: pretty; }
.r-citacao__aspas { font: 400 52px/.6 var(--font-display); color: var(--edge); display: block; margin-bottom: 8px; }
/* Depoimento: texto longo, entao a medida sobe e a fonte desce um degrau.
   O nome de quem fala e grafite cheio, nunca tinta clara sobre a cor. */
/* 54ch, nao 62. Contado caractere a caractere no navegador (Range por caixa de
   linha, que e a unica medida que nao mente com negrito no meio do texto): a
   62ch o depoimento rodava com 82 caracteres na linha mais longa a 1440px,
   acima do teto de 70. A 54ch fecha em 71. */
.r-citacao--longa blockquote { max-width: 54ch; font: 400 17px/1.7 var(--font-body); }
.r-citacao__por { margin-top: 22px; font: 600 22px/1.3 var(--font-script); color: var(--grafite); }
/* RECOMPOSICAO DE 10/09/2026
   ---------------------------------------------------------------------------
   A quinta celula do mosaico era a citacao "Divido a estrutura com outros 25
   especialistas da infancia...". O Victor pediu para removela, e a informacao
   nao se perdeu: o paragrafo de abertura da propria secao ja diz que o
   atendimento acontece dentro da estrutura da Viva Pediatria, no Setor
   Marista, com recepcao acolhedora e consultorios climatizados. A citacao
   repetia isso com outras palavras.

   Sobraram quatro fotos, e quatro em tres colunas deixa buraco. A grade foi
   remontada para fechar sem vao em cada faixa:

     >= 1000px   3 colunas · recepcao ocupa 2 + consultorio-3   (linha cheia)
                             consultorio-6 + consultorio-7 ocupa 2 (linha cheia)
     700-999px   2 colunas · 2x2 exato, nenhuma foto larga
     < 700px     1 coluna  · empilhado

   O ponto de virada caiu de 1200 para 1000px: os 1200 existiam por causa da
   MEDIDA DE LINHA da citacao, que abaixo disso rodava com 18 a 25 caracteres.
   Sem texto na grade, a restricao deixou de existir e o que manda passa a ser
   o tamanho da foto. A 1000px cada celula da 268px de largura, que ainda le
   como fotografia e nao como miniatura. */
@media (max-width: 999px) {
  .r-mosaico { grid-template-columns: repeat(2, 1fr); }
  .r-foto--larga { grid-column: span 1; }
}
@media (max-width: 699px) {
  .r-mosaico { grid-template-columns: 1fr; }
  .r-foto--larga { grid-column: span 1; }
}

/* ---------------------------------------------------------------------------
   15. LOCALIZACAO · faixa AZUL, de borda a borda
   --------------------------------------------------------------------------- */
.r-local { display: grid; gap: var(--sp-4); align-items: stretch; }
@media (min-width: 900px) { .r-local { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: var(--sp-5); } }
.r-local dl { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: 16px; }
.r-local dl > div { display: flex; gap: 14px; align-items: flex-start; }
.r-local dt { font: 700 15.5px/1.55 var(--font-body); display: inline; }
.r-local dd { display: inline; margin: 0; font: 500 15.5px/1.55 var(--font-body); }
/* O icone tinha o azul travado no seletor porque so existia na secao de
   localizacao da home. Passou a obedecer a familia em 10/09/2026.

   ⚠️ REGRA QUE VALE PARA QUALQUER PECA POUSADA EM COR: use o --edge da
   SUPERFICIE que esta embaixo, nao o de outra familia. Cada --edge foi
   calibrado ate exatamente 3,0:1 contra o proprio --sup; misturar familias
   quebra isso. Medido: --azul-fundo sobre azul da 3,02 e passa, --verde-fundo
   sobre azul da 2,43 e reprova. Icone verde num cartao azul nao e escolha de
   gosto, e limite invisivel. */
.r-icone {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: var(--creme); border: 2px solid var(--edge); color: var(--edge);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Obedece a familia (era azul travado). Na faixa de localizacao da home o
   resultado e identico, porque la a familia ja e a azul. */
.r-mapa {
  border-radius: var(--radius-2xl); overflow: hidden; min-height: 300px;
  border: 2px solid var(--edge);
  box-shadow: var(--rec-md) var(--edge);
  background: var(--creme);
}
.r-mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* ---------------------------------------------------------------------------
   16. CABECALHO DE SECAO
   --------------------------------------------------------------------------- */
.r-head { max-width: 40ch; margin-bottom: var(--sp-5); }
.r-head--largo { max-width: 54ch; }
.r-head--centro { margin-inline: auto; text-align: center; }
.r-head h2 { margin: 12px 0 16px; }
.r-head p { font-size: 16.5px; line-height: 1.7; max-width: 58ch; }

/* Olho da secao: ponto colorido + texto grafite. O texto do olho era colorido
   e pequeno ao mesmo tempo, que e a combinacao com menos folga de contraste na
   pagina. Passando a cor para o ponto, a informacao vira grafite (12,10:1) e a
   cor continua marcando a secao. */
.r-olho {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafite);
}
.r-olho::before {
  content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--sup); border: 1.5px solid var(--edge); flex: none;
}
.r-band .r-olho::before { background: var(--creme); border-color: var(--grafite); }

/* Titulo em primeira pessoa da propria Dra. Laiz. A aspa de abertura fica
   pendurada na margem para o texto manter o alinhamento optico. */
.r-aspas { text-indent: -0.42em; }
.r-aspas span { color: var(--rosa-fundo); }

/* ---------------------------------------------------------------------------
   17. ENTRADA DAS PALAVRAS DO H1 (mantida da versao anterior)
   --------------------------------------------------------------------------- */
.word-in { display: inline-block; opacity: 0; animation: wordIn .55s ease forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .word-in { opacity: 1; animation: none; } }

/* ===========================================================================
   18. CELULAR
   ---------------------------------------------------------------------------
   A licao de 08/09/2026 nao se herda: mede-se de novo. O defeito antigo era
   soma de recuos (margem da pagina + padding do cartao + a coluna que a
   bolinha do numero roubava), e a coluna de texto caia para 19 caracteres.

   Aqui o marcador nao divide linha com o texto, ele fica sobre a divisa da
   foto. Entao o unico recuo a controlar e o padding do cartao, que cai de
   26px para 20px abaixo de 640px. Alvo: 35 a 45 caracteres por linha.
   =========================================================================== */
@media (max-width: 639px) {
  .r-card__corpo   { padding: 24px 18px 26px; }
  .r-post__corpo   { padding: 22px 20px 24px; }
  .r-perfil__foto  { margin: 22px 20px 0; }
  .r-perfil__texto { padding: 0 20px 26px; }
  .r-pausa         { padding: 22px 20px; }
  .r-citacao       { padding: 24px 20px; }
  .r-faq__item     { padding: 0 18px; }
  .r-obs           { padding: 14px 16px; }

  .r-marca { width: 50px; height: 50px; font-size: 21px; margin: -26px 0 2px 18px; }
  .r-citacao blockquote { font-size: 16.5px; line-height: 1.6; }
  .r-band { border-radius: 36px 36px 0 0; padding-block: 3rem; }
  .r-band--fecha { border-radius: 36px; }

  p, li, dd, blockquote { text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }
  /* Portugues tem palavra longa demais para coluna de 280px sem hifenizacao:
     "desenvolvimento", "acompanhamento", "individualizado". Sem isto a linha
     quebra cedo e a medida cai de 36 para 28 caracteres. */
  .r-card__corpo p, .r-lista li, .r-post__corpo p,
  .r-faq__item p, .r-prosa p, .r-hero__lead,
  .r-obs, .r-citacao blockquote {
    hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 3;
  }

  /* Mesma causa da correcao de 08/09/2026, em escala menor: icone de largura
     fixa mais o vao roubando a coluna de texto de um item estreito. Aqui o
     icone precisa ficar ao lado (ele qualifica o item), entao o que encolhe
     e ele. Ganho medido: de 24 para 30 caracteres por linha. */
  .r-lista li { gap: 9px; }
  .r-lista li svg { width: 17px; height: 17px; margin-top: 3px; }
  .r-titulo-lista { font-size: 18px; margin-bottom: 15px; }

  /* O flutuante e `fixed` e cobre o que estiver embaixo. O que da para
     garantir e que o fim da pagina nunca fique coberto. */
  .site-footer { padding-bottom: calc(58px + 32px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-float { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  .r-card__corpo { padding: 22px 16px 24px; }
  .r-perfil__texto { padding: 0 16px 24px; }
}

/* Alvo de toque: mesma correcao de 08/09/2026, repetida aqui porque este
   arquivo redeclara o cabecalho. WCAG 2.5.8 pede 24px; a diretriz da Apple
   pede 44. 14px de recuo mais 16px de conteudo fecham em 44. */
@media (max-width: 859px) {
  .header-cta { padding-block: 14px; }
}


/* ===========================================================================
   19. ORCAMENTO DE ALTURA DA PRIMEIRA DOBRA
   ---------------------------------------------------------------------------
   INVARIANTE DA HOME, e ele nao e negociavel: a 360px de largura os DOIS botoes
   do hero tem de terminar acima da dobra. Quase todo o trafego dela vem do
   Instagram, no celular, e o CTA e o WhatsApp: e a conversao inteira da conta.

   O sistema novo custou altura (H1 maior, borda de 2px nos botoes, selo com
   icone) e, sem este bloco, o segundo CTA terminava em y=744 num viewport de
   740, ou seja 4px ABAIXO da dobra. Antes da rodada ele terminava em 685.

   O que este bloco faz: recomprime o ritmo do hero abaixo de 600px. Todos os
   ajustes sao de recuo e de escala, nenhum e de estrutura.

   ⚠️ Escopado em .r-hero de proposito. O hero de /sobre usa outras classes e
   nao pode herdar esta compressao.
   =========================================================================== */
@media (max-width: 599px) {
  .r-hero          { padding-block: 1.5rem 2.25rem; }
  /* "DO PRE-NATAL A PRIMEIRA INFANCIA" tem 32 caracteres. A 12,5px com 0,12em
     de entreletra ela pede 296px e so ha 258 disponiveis a 360px, entao a
     pilula quebrava em duas linhas. A 11,5px com 0,09em ela pede 258 e cabe. */
  .r-badge         { margin-bottom: var(--sp-2); padding: 7px 13px 7px 10px; font-size: 11.5px; letter-spacing: .09em; gap: 7px; }
  .r-badge svg     { width: 15px; height: 15px; }
  .r-hero h1       { margin-bottom: 8px; }
  .r-hero__sub     { margin-bottom: 10px; }
  .r-hero__lead    { margin-bottom: var(--sp-3); font-size: 16px; }
  .r-hero__acoes   { gap: 12px; margin-bottom: var(--sp-3); }
  .r-hero .btn     { padding: 13px 20px; font-size: 15px; }
  .r-hero__media   { margin-top: var(--sp-2); }
}


/* ===========================================================================
   20. O RESTO DO SITE · propagacao de 10/09/2026
   ---------------------------------------------------------------------------
   Ate aqui o arquivo descreve o que a home usa. Deste ponto para baixo vem o
   que as outras onze paginas pediram, e cada bloco existe porque uma pagina
   tem um conteudo que a home nao tem: a jornada em etapas longas, a trajetoria
   com anos, o artigo de texto corrido, o formulario.

   A regra nao muda: o componente escolhe a FAMILIA, nunca a cor.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   20.1 · HERO INTERNO (as paginas que nao sao a home)
   Mesmo vocabulario do hero da home, sem o retrato: selo, titulo, prosa.
   --------------------------------------------------------------------------- */
.r-hero-int { position: relative; overflow: hidden; overflow: clip; padding-block: clamp(2.5rem, 1.4rem + 4vw, 4.5rem) clamp(2.25rem, 1.2rem + 3.5vw, 3.75rem); }
.r-hero-int__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: center; }
@media (min-width: 940px) { .r-hero-int__grid--duplo { grid-template-columns: minmax(320px, 1.1fr) minmax(280px, .9fr); } }
.r-hero-int h1 { margin: 0 0 14px; max-width: 22ch; }
.r-hero-int__lead { font-size: 17px; line-height: 1.7; margin: 0; max-width: 54ch; }
.r-hero-int__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-4); }
.r-hero-int__media { position: relative; justify-self: center; width: min(100%, 400px); }

/* Linha manuscrita. E a unica aparicao da Caveat no corpo do site, e ela marca
   troca de voz: quem fala e a propria Dra. Laiz. A tinta e grafite cheio, nao
   um rosa escurecido: a 24px a fonte e grande o bastante para dispensar cor
   como enfase, e cor pequena e o pior caso de contraste de qualquer pagina. */
.r-script { font: 600 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.35 var(--font-script); color: var(--grafite); margin: 0 0 var(--sp-2); max-width: 34ch; }
/* Centrado: a coluna de texto nao segue o titulo ate a largura da pagina, ela
   fica com a mesma medida de leitura e so o bloco e que se centraliza. */
.r-hero-int--centro { text-align: center; }
.r-hero-int--centro h1 { margin-inline: auto; max-width: 24ch; }
.r-hero-int--centro .r-hero-int__lead,
.r-hero-int--centro .r-prosa { margin-inline: auto; text-align: left; }
.r-hero-int--centro .r-hero-int__acoes,
.r-hero-int--centro .r-badge { justify-content: center; }
.r-hero-int--centro .r-badge { display: inline-flex; }

/* ---------------------------------------------------------------------------
   20.2 · ETAPAS DA JORNADA (/acompanhamento)
   ---------------------------------------------------------------------------
   POR QUE ESTE COMPONENTE NAO REPETE O CARTAO DA HOME
   Na home as cinco etapas sao resumos de duas linhas numa grade de cinco. Aqui
   cada etapa tem um paragrafo inteiro, e cinco cartoes altos empilhados em
   largura cheia dariam uma coluna de 90 caracteres no monitor.

   A LICAO DE 08/09/2026, QUE E O MOTIVO DE O NUMERO SAIR DA COLUNA DO TEXTO
   O `.step` antigo era `grid-template-columns: 64px 1fr` com 20px de vao: num
   celular de 390px isso tirava 84px de uma coluna de 282, e o texto rodava com
   19 a 27 caracteres por linha. Aqui o numero NAO divide linha com o texto:
   ele fica montado sobre a divisa entre a foto e o corpo, exatamente como na
   home. A coluna de texto recebe a largura inteira do cartao.

   As fotos sao as mesmas cinco da jornada da home. Reuso deliberado: o
   visitante que vem da home reconhece a etapa pela imagem antes de ler.
   --------------------------------------------------------------------------- */
.r-etapas { display: flex; flex-direction: column; gap: var(--sp-4); }
.r-etapa { padding: 0; }
@media (min-width: 800px) {
  .r-etapa { display: grid; grid-template-columns: minmax(240px, 36%) minmax(0, 1fr); align-items: stretch; }
  /* Alternar o lado da foto quebra a escada de cinco cartoes iguais. Como e
     `order` e nao mudanca de DOM, leitor de tela e teclado seguem na ordem 1
     a 5. */
  .r-etapa:nth-child(even) .r-etapa__midia { order: 2; }
}
/* No celular a foto e uma faixa de proporcao fixa no topo do cartao.
   No monitor ela e a coluna da esquerda e precisa ter a altura do TEXTO, nao a
   propria. Se a `img` ficar no fluxo, a proporcao natural dela e que manda: a
   foto da sala de parto e retrato, e a 446px de largura ela empurrava o cartao
   para 600px de altura, deixando metade da coluna de texto vazia. Tirando a
   `img` do fluxo com `position: absolute`, quem passa a definir a altura da
   linha e o corpo do texto, e a foto se recorta para caber. */
.r-etapa__midia { position: relative; }
.r-etapa__midia img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 800px) {
  .r-etapa { min-height: 270px; }
  .r-etapa__midia img { position: absolute; inset: 0; aspect-ratio: auto; }
}
/* `relative` para que o grafismo de canto se ancore no CORPO do cartao, e nao
   no cartao inteiro: sem isto ele caia por cima da divisa com a foto. */
.r-etapa__corpo { position: relative; z-index: 1; padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.r-etapa__corpo h3 { margin: 2px 0; }
/* 52ch rende cerca de 70 caracteres reais na Raleway. Ver o bloco 6 do
   documento de sistema: `ch` mede o zero, nao a minuscula media. */
.r-etapa__corpo p { font-size: 15.5px; line-height: 1.7; max-width: 52ch; }

/* Marcador do numero. Na home ele se apoia na divisa horizontal entre a foto e
   a cor, com margem negativa. Aqui NAO da para fazer isso: a divisa e vertical
   no monitor e horizontal no celular, e o `.r-card` tem `overflow: hidden`, que
   cortaria a metade de fora do circulo em qualquer um dos dois casos.
   Entao ele vira um carimbo DENTRO da foto, no canto de baixo a esquerda. Fica
   no mesmo lugar nas duas grades e nunca e cortado. */
.r-marca--canto { position: absolute; left: 18px; bottom: 16px; margin: 0; z-index: 2; }

/* ---------------------------------------------------------------------------
   20.3 · TRAJETORIA (/sobre)
   Lista de formacao e linha do tempo. O ano deixa de ser texto colorido
   pequeno (que era o pior caso de contraste da pagina) e vira etiqueta na cor
   da familia, com tinta grafite.
   --------------------------------------------------------------------------- */
.r-cv + .r-cv { margin-top: var(--sp-6); }
.r-cv__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-3); font-size: var(--text-h3); line-height: var(--lh-h3); }
.r-cv__titulo .r-marca { position: static; margin: 0; width: 44px; height: 44px; flex: none; }
.r-cv__titulo .r-marca svg { width: 20px; height: 20px; }

.r-cv-lista { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.r-cv-lista li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 15px 0; border-bottom: 1.5px solid var(--linha);
  font: 500 15.5px/1.65 var(--font-body); max-width: 64ch;
}
.r-cv-lista li:last-child { border-bottom: none; }
.r-cv-lista__ponto { width: 12px; height: 12px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--sup); border: 2px solid var(--edge); }
.r-cv-lista--curta li { font-size: 14.5px; padding: 12px 0; }

.r-linha-tempo { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.r-linha-tempo li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; border-bottom: 1.5px solid var(--linha); }
.r-linha-tempo li:last-child { border-bottom: none; }
@media (min-width: 680px) { .r-linha-tempo li { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; } }
.r-linha-tempo__quando { align-self: start; justify-self: start; }
.r-linha-tempo__o-que { font: 500 15.5px/1.7 var(--font-body); max-width: 56ch; }

/* ---------------------------------------------------------------------------
   20.4 · GRADE DE CINCO (valores de /sobre)
   Mesma logica de largura da jornada da home: com seis meias-colunas a ultima
   dupla comeca na coluna 2 e a linha fica centrada, em vez de deixar um vao a
   direita.
   --------------------------------------------------------------------------- */
.r-grade-5 { display: grid; gap: var(--sp-3); }
@media (min-width: 620px)  { .r-grade-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .r-grade-5 { grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
  .r-grade-5 > * { grid-column: span 2; }
  .r-grade-5 > *:nth-child(4) { grid-column: 2 / span 2; }
}
.r-grade-5 .r-card__corpo { gap: 12px; }
.r-grade-5 .r-card__corpo h3 { margin: 2px 0 0; }
.r-grade-5 .r-card__corpo p { font-size: 14.5px; }
/* O marcador da grade de valores nao se apoia em foto nenhuma, entao ele volta
   ao fluxo normal, no topo do cartao. */
.r-card__corpo > .r-marca { position: static; margin: 0 0 4px; }

/* ---------------------------------------------------------------------------
   20.5 · ARTIGO (/blog/*)
   --------------------------------------------------------------------------- */
.r-migalha { font: 600 13.5px/1.6 var(--font-body); color: var(--grafite); margin-bottom: var(--sp-2); }
/* Recuo vertical para o alvo de toque: sem ele o link da migalha tem 16px de
   altura e reprova a WCAG 2.5.8, que pede 24. A migalha e navegacao, nao um
   link solto no meio de uma frase, entao a excecao de "inline" nao se aplica. */
.r-migalha a { display: inline-block; padding-block: 5px; color: var(--grafite); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.r-migalha a:hover { text-decoration-thickness: 3px; }
/* Sem opacidade: a 13,5px sobre a faixa lilas ela dava 3,03:1 e reprovava. O
   item atual ja se distingue por NAO ser link (nao tem sublinhado). */
.r-migalha span[aria-current] { font-weight: 700; }

.r-artigo__topo { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: center; position: relative; z-index: 1; }
@media (min-width: 940px) { .r-artigo__topo { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); } }
.r-artigo__topo h1 { margin: 0 0 16px; max-width: 22ch; }
.r-artigo__lead { font-size: 17px; line-height: 1.7; margin: 0; max-width: 52ch; }

/* Texto corrido. 60ch aqui, nao 52: o artigo e a unica pagina onde a leitura e
   longa e continua, e uma coluna larga demais cansa menos que uma coluna curta
   demais quando o texto tem varios paragrafos seguidos. Medido: 60ch rende 79
   caracteres a 1440px e 44 a 390px. */
/* 54ch, nao 60. Contado caractere a caractere: a 60ch os artigos rodavam com
   75 a 79 caracteres na linha mais longa a 1440px. A 54ch fecham em 69 a 71,
   que e o topo da faixa confortavel. Vale lembrar que `ch` mede a largura do
   ZERO, e na Raleway o zero e cerca de 1,35 vez a media das minusculas: por
   isso 54ch rende 70 caracteres e nao 54. */
.r-prosa-longa { max-width: 54ch; margin-inline: auto; }
.r-prosa-longa h2 { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.55rem); margin: var(--sp-5) 0 14px; }
.r-prosa-longa p { font-size: 16.5px; line-height: 1.8; margin: 0 0 var(--sp-3); text-wrap: pretty; }
/* Dentro da coluna do artigo a nota ja esta contida pelos 60ch do container;
   um segundo teto de 52ch so deixaria a caixa mais estreita que a lista ao
   lado, o que le como desalinhamento. */
.r-prosa-longa .r-obs { max-width: none; }
.r-fonte { font-size: 13.5px; line-height: 1.65; color: var(--grafite); opacity: .78; margin-top: var(--sp-2); }

/* Lista numerada dos sinais de alerta e lista de verificacao. Sao cartoes de
   recorte em miniatura: superficie branca, fio na cor da familia, sombra de
   3px. O numero e o visto ficam numa coluna estreita, mas aqui isso nao rouba
   medida: sao itens de UMA frase, nao paragrafo. */
.r-itens { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 var(--sp-4); padding: 0; counter-reset: r-item; }
.r-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 20px;
  background: var(--branco);
  border: 2px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--rec-sm) var(--edge);
  font-size: 15.5px; line-height: 1.65;
}
.r-item__n {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--sup); border: 2px solid var(--edge); color: var(--grafite);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px var(--font-body);
}
.r-item__n svg { width: 17px; height: 17px; }
.r-item__texto { max-width: 56ch; }

.r-grade-nota { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-2); margin: var(--sp-4) 0; }

/* ---------------------------------------------------------------------------
   20.6 · FORMULARIO (/contato)
   O campo perde a sombra interna, que era o morfismo mais literal do site
   antigo, e ganha fio solido. O foco deixa de ser um halo difuso e passa a ser
   o mesmo deslocamento dos botoes: a peca sobe e a sombra cresce.
   --------------------------------------------------------------------------- */
.r-form { display: flex; flex-direction: column; gap: 20px; padding: 32px 30px 34px; }
.r-campo { display: flex; flex-direction: column; gap: 8px; }
.r-campo label { font: 700 13.5px var(--font-body); color: var(--grafite); }
.r-campo input, .r-campo textarea {
  width: 100%; font: 500 15px var(--font-body); color: var(--grafite);
  background: var(--creme);
  border: 2px solid var(--linha-forte);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.r-campo textarea { resize: vertical; }
/* Placeholder e TEXTO, entao pede 4,5:1, nao 3:1. Medido por composicao sobre
   o creme: a .45 do sistema antigo o cinza resultante era rgb(160,153,144) e
   dava 2,52:1, que reprova. A .68 ele vira rgb(118,106,103) e da 4,66:1. */
.r-campo input::placeholder, .r-campo textarea::placeholder { color: rgba(58, 42, 46, .68); }
.r-campo input:focus, .r-campo textarea:focus { border-color: var(--grafite); box-shadow: var(--rec-sm) var(--grafite); }
.r-form .btn { align-self: flex-start; }
/* Nome antigo de proposito: o `main.js` reescreve o `className` inteiro deste
   elemento com "form-msg is-error" ou "form-msg is-success". Renomear a classe
   obrigaria a mexer no JS so por causa de estilo, e nao vale o risco. */
.form-msg { font: 700 14px var(--font-body); margin: 0; }
.form-msg.is-error   { color: var(--erro); }
.form-msg.is-success { color: var(--sucesso); }

/* Bloco de dados de contato. Cada linha tem o icone na familia da propria
   informacao, e o texto e sempre grafite. */
.r-contato-lista { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.r-contato-lista li { display: flex; align-items: center; gap: 14px; }
.r-contato-lista a, .r-contato-lista span:not(.r-icone) { color: var(--grafite); font: 500 14.5px/1.55 var(--font-body); }
/* 22px de altura reprovava a WCAG 2.5.8 por 2px. Sao itens de lista, nao links
   dentro de frase, entao nao cabe a excecao de "inline". */
.r-contato-lista a { display: inline-block; padding-block: 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.r-contato-lista a:hover { text-decoration-thickness: 3px; color: var(--grafite); }
.r-icone--sm { width: 38px; height: 38px; }
.r-icone--sm svg { width: 17px; height: 17px; }
.r-crm { font: 700 13px var(--font-body); color: var(--grafite); }

/* ---------------------------------------------------------------------------
   20.7 · POLITICAS e 404
   --------------------------------------------------------------------------- */
.r-politica-topo { background: var(--creme); border-bottom: 3px solid var(--edge); }
.r-politica-topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; max-width: 900px; }
.r-politica-topo img { height: 40px; width: auto; }
.r-politica-main { max-width: 800px; margin-inline: auto; padding: var(--sp-6) var(--margin-mobile) var(--sp-9); }
.r-politica-sec { margin-bottom: var(--sp-7); }
.r-politica-sec h1 { margin: 0 0 10px; }
/* A faixa da politica e mais baixa que a de secao: e cabecalho de documento,
   nao secao de pagina. O que ela resolve de fato: sem ela a pagina de politicas
   ficava com ZERO por cento de area cromatica, medido, e era a unica do site
   assim. Documento juridico tambem carrega a marca. */
.r-politica-faixa { padding: 30px 28px 32px; margin-bottom: var(--sp-4); }
.r-politica-faixa h1, .r-politica-faixa h2 { margin: 12px 0 8px; }
.r-politica-faixa p { font-size: 15px; line-height: 1.6; margin: 0; }
.r-politica-faixa h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem); line-height: 1.25; font-family: var(--font-display); font-weight: 400; }
.r-politica-card { display: flex; flex-direction: column; gap: 22px; }
.r-politica-card > .r-marca { position: static; margin: 0 0 4px; }
.r-politica-card h2 { font-size: 17px; margin: 0 0 10px; }
/* Medido a 1440px: a 60ch os paragrafos da politica rodavam com 77 a 79
   caracteres. A 54ch fecham em 70. Documento juridico e o texto que MENOS pode
   cansar, porque ninguem le por vontade propria. */
.r-politica-card p { font-size: 15.5px; line-height: 1.75; max-width: 54ch; }

.r-erro { text-align: center; padding-block: var(--sp-8); max-width: 620px; margin-inline: auto; }
/* O icone do 404 era o `icon-creme.webp` solto na pagina, e ele e literalmente
   invisivel ali: a cor media dos pixels opacos e #F2F1E0 contra o creme
   #F4F3E1 da pagina, ou seja 1,01:1. Estava assim desde que a pagina nasceu.
   Em vez de trocar o arquivo, ele ganha o disco rosa da marca por baixo, que e
   o mesmo `.r-marca` do sistema em escala grande: creme sobre rosa da 6,63:1. */
.r-erro__marca {
  width: 132px; height: 132px; margin: 0 auto var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--rosa);
  border: 2px solid var(--grafite);
  box-shadow: var(--rec-md) var(--grafite);
  display: flex; align-items: center; justify-content: center;
}
.r-erro__marca img { height: 84px; width: auto; margin: 0; }
.r-erro h1 { margin: 12px 0 14px; }
.r-erro p { margin: 0 auto var(--sp-4); max-width: 46ch; font-size: 17px; line-height: 1.7; }
.r-erro__acoes { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------------------
   20.8 · TARJA DE CONSENTIMENTO
   Fundo grafite, tinta creme (12,10:1). O link fica creme sublinhado em vez de
   rosa: o rosa sobre grafite passa com folga (6,63:1), mas numa tarja escura e
   estreita o sublinhado identifica o link melhor do que a troca de matiz, e a
   regra da casa e que cor sozinha nunca carrega informacao.
   --------------------------------------------------------------------------- */
.consent-banner { border-top: 2px solid var(--creme); box-shadow: none; }
/* ⚠️ Este link tem 16px de altura e NAO e defeito: ele fica dentro de uma
   frase corrida, e a WCAG 2.5.8 tem excecao explicita para alvo "inline"
   (um link no meio de um paragrafo nao pode ganhar recuo sem desmontar a
   entrelinha). Nao "corrigir" em auditoria futura. */
.consent-banner a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.consent-banner a:hover { color: var(--branco); }

/* ---------------------------------------------------------------------------
   20.9 · RODAPE
   Ja era grafite com tinta creme, e isso nao muda: e o unico bloco escuro do
   site e ele fecha a pagina. O rosa dos titulos de coluna foi remedido e passa
   (6,63:1). O que muda e o fio da divisa, que sobe de .18 para .22 de opacidade,
   e o link, que ganha sublinhado no hover em vez de so trocar de cor.
   --------------------------------------------------------------------------- */
.site-footer h3 { color: var(--rosa); }          /* rosa sobre grafite: 6,63:1 */
.footer-grid { border-bottom-color: rgba(244, 243, 225, .22); }
.footer-nav a { color: var(--creme); text-decoration: none; }
.footer-nav a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand p:first-of-type { color: var(--rosa); }

/* ---------------------------------------------------------------------------
   20.10 · CELULAR, para o que entrou agora
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .r-etapa__corpo    { padding: 26px 20px 28px; }
  .r-form            { padding: 26px 20px 28px; }
  .r-politica-card   { padding: 26px 20px; }
  .r-item            { padding: 14px 16px; gap: 11px; grid-template-columns: 28px minmax(0, 1fr); }
  .r-item__n         { width: 28px; height: 28px; font-size: 13px; }
  .r-item__n svg     { width: 15px; height: 15px; }
  .r-cv__titulo .r-marca { width: 38px; height: 38px; }
  .r-cv__titulo      { font-size: 1.125rem; gap: 10px; }
  .r-prosa-longa p   { font-size: 16px; line-height: 1.75; }
  .r-contato-lista li { gap: 11px; }
  .r-icone--sm       { width: 32px; height: 32px; }
  .r-etapa__corpo p, .r-item__texto, .r-prosa-longa p, .r-linha-tempo__o-que,
  .r-cv-lista li, .r-hero-int__lead, .r-artigo__lead {
    hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 3;
  }
}
@media (max-width: 380px) {
  .r-etapa__corpo  { padding: 24px 16px 26px; }
  .r-form          { padding: 24px 16px 26px; }
  .r-politica-card { padding: 24px 16px; }
}