/* Renata Surminski Advogada · v2
   Sistema de design fechado no ESTUDO v2. Nada aqui e improviso.
   O que saiu em relacao ao v1: rotulo em caixa alta, hairline entre
   secoes, numeral gigante, estrada tracejada, card quase reto. */

:root {
  /* Nucleo da marca (logo) */
  --azul-toga:    #012549;
  --rose-bussola: #F2AF9E;
  --rose-claro:   #FFBEAA;
  --papel:        #FFFFFF;

  /* Derivadas */
  --azul-noite:   #011A34;
  --azul-carta:   #062F57;
  --azul-borda:   #55749A;
  --areia:        #FBF5F2;
  --areia-borda:  #9C8B80;
  --tinta:        #14243A;
  --tinta-suave:  #4A5B70;
  --terra:        #9A5F45;

  /* Novas no v2 */
  --rose-fundo:    #FAEBE6;   /* rose a 14% sobre areia: a faixa da historia */
  --branco-quente: #FFFCFA;   /* fundo de card sobre areia e de secao alternada */
  --terra-texto:   #84503A;   /* terra pra texto corrido: 5.67:1 sobre rose-fundo */
  --linha-quente:  #E0CBC2;   /* unica linha do site: entre itens de FAQ e lista */
  --sombra-quente:      0 1px 2px rgba(154,95,69,.06), 0 10px 28px -14px rgba(154,95,69,.22);
  --sombra-quente-alta: 0 2px 4px rgba(154,95,69,.08), 0 24px 48px -20px rgba(154,95,69,.30);

  /* Tipografia */
  --fonte-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-texto:   'Newsreader', 'Iowan Old Style', Georgia, serif;

  --t-hero:     clamp(2.75rem, 6.4vw, 5rem);
  --t-h2:       clamp(2rem, 4.2vw, 3.15rem);
  --t-h3:       clamp(1.45rem, 2.4vw, 1.75rem);
  --t-destaque: clamp(1.35rem, 2.6vw, 1.9rem);
  --t-numero:   clamp(1.9rem, 3vw, 2.4rem);
  --t-abertura: clamp(1.08rem, 1.1rem + .25vw, 1.25rem);
  --t-corpo:    clamp(1.06rem, 0.95rem + 0.4vw, 1.19rem);
  --t-mini:     0.94rem;

  /* Espacamento, raio */
  --e-1: 0.5rem;  --e-2: 0.875rem; --e-3: 1.5rem;
  --e-4: 2.5rem;  --e-5: 4rem;     --e-6: 6.5rem;  --e-7: 9rem;

  --raio-card:     14px;
  --raio-botao:    999px;
  --raio-campo:    4px;
  --raio-selo:     8px;
  --raio-foto:     200px 200px 14px 14px;
  --raio-marcador: 50%;

  --largura: 1180px;
  --altura-topo: 78px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* height auto e obrigatorio: o atributo height do HTML vira hint de apresentacao
   e anularia o aspect-ratio das fotos */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); line-height: 0.98; }
h2 { font-size: var(--t-h2);   line-height: 1.05; }
h3 { font-size: var(--t-h3);   line-height: 1.1; letter-spacing: -0.01em; }

p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--rose-bussola); color: var(--azul-toga);
  padding: var(--e-2) var(--e-3); z-index: 200; border-radius: var(--raio-campo);
}
.pular:focus { left: var(--e-3); top: var(--e-3); }

:focus-visible {
  outline: 2px solid var(--rose-bussola);
  outline-offset: 3px;
}

/* ---------- estruturas de secao ---------- */

.env {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding-inline: var(--e-3);
}

.secao { padding-block: var(--e-5); }

@media (min-width: 900px) {
  .secao { padding-block: var(--e-6); }
}

.fundo-areia  { background: var(--areia);         color: var(--tinta); }
.fundo-branco { background: var(--branco-quente); color: var(--tinta); }
.fundo-toga   { background: var(--azul-toga);     color: var(--papel); }
.fundo-noite  { background: var(--azul-noite);    color: var(--papel); }

/* A faixa rose: uma so no site. O grao e o que tira a cara de chapado. */
.fundo-rose {
  position: relative;
  background: var(--rose-fundo);
  color: var(--tinta);
  isolation: isolate;
}
.fundo-rose::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.37 0 0 0 0 0.27 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Frase de abertura: substitui o rotulo em caixa alta. E uma frase
   completa na voz dela, em italico, caixa baixa, sem linha antes. */
.abertura {
  font-family: var(--fonte-texto);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-abertura);
  line-height: 1.4;
  color: var(--terra-texto);
  margin: 0 0 var(--e-2);
  max-width: 48ch;
  text-wrap: pretty;
}
.fundo-toga .abertura,
.fundo-noite .abertura { color: var(--rose-bussola); }

.intro { max-width: 62ch; }
.intro p:not(.abertura) { color: var(--tinta-suave); margin-top: var(--e-3); }
.fundo-toga .intro p:not(.abertura),
.fundo-noite .intro p:not(.abertura) { color: var(--papel); opacity: .88; }
.intro.centro { margin-inline: auto; text-align: center; }
.intro.centro .abertura { margin-inline: auto; }

/* ---------- botoes ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  font-family: var(--fonte-texto);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  min-height: 44px;
  border-radius: var(--raio-botao);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}

.btn-rose {
  background: var(--rose-bussola);
  color: var(--azul-toga);
  border-color: var(--rose-bussola);
}
.btn-contorno {
  background: transparent;
  color: var(--papel);
  border-color: var(--rose-bussola);
}
.btn-navy {
  background: var(--azul-toga);
  color: var(--papel);
  border-color: var(--rose-bussola);
}
.btn-grande { font-size: 1.1rem; padding: 1.15rem 2.2rem; }

@media (hover: hover) {
  .btn-rose:hover     { background: var(--rose-claro); border-color: var(--rose-claro); transform: translateY(-2px); box-shadow: var(--sombra-quente); }
  .btn-contorno:hover { background: var(--rose-bussola); color: var(--azul-toga); transform: translateY(-2px); }
  .btn-navy:hover     { background: var(--azul-noite); transform: translateY(-2px); }
}

/* ---------- header ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--azul-noite);
  transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease,
              transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  padding-block: var(--e-2);
}
/* Sobre o hero, a barra fica escondida ate o primeiro scroll. O
   :focus-within e o que salva quem navega por teclado. */
body.tem-cena .topo { transform: translateY(-105%); opacity: 0; pointer-events: none; }
body.tem-cena.topo-a-vista .topo,
body.tem-cena .topo:focus-within { transform: none; opacity: 1; pointer-events: auto; }

.topo--densa {
  padding-block: 0.35rem;
  background: rgba(1,26,52,.94);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.8);
}

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img {
  width: 56px; height: 56px;
  border-radius: 50%;
  transition: width .25s ease, height .25s ease;
}
.topo--densa .marca img { width: 38px; height: 38px; }

.nav-desk { display: none; }
.nav-desk ul { display: flex; gap: var(--e-4); list-style: none; margin: 0; padding: 0; }
.nav-desk a {
  color: var(--papel);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding-block: 0.3rem;
  background: linear-gradient(var(--rose-bussola), var(--rose-bussola)) no-repeat left bottom / 0 1.5px;
  transition: background-size .28s cubic-bezier(.2,.8,.2,1);
}
.nav-desk a:hover,
.nav-desk a[aria-current="page"] { background-size: 100% 1.5px; }

.abrir-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity .2s ease;
}
.abrir-menu:hover { opacity: .7; }
.abrir-menu span {
  display: block; height: 1px; background: var(--papel); border-radius: 2px;
  transition: width .25s ease, background .2s ease;
}
.abrir-menu span:nth-child(1) { width: 22px; }
.abrir-menu span:nth-child(2) { width: 17px; }
.abrir-menu span:nth-child(3) { width: 22px; }
.abrir-menu:hover span { width: 22px; background: var(--rose-bussola); }

.topo .btn { padding: 0.7rem 1.3rem; font-size: 0.97rem; }
.topo .btn-topo { display: none; }

@media (min-width: 1000px) {
  .nav-desk { display: block; }
  .abrir-menu { display: none; }
  .topo .btn-topo { display: inline-flex; }
}

/* ---------- drawer mobile ----------
   Filho direto do body. Topo cortado pelo arco de sol, o unico
   ornamento do site. */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--areia);
  display: flex;
  flex-direction: column;
  padding: 0 var(--e-3) var(--e-3);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2%);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
  overflow-y: auto;
}
body.menu-aberto .menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
body.menu-aberto { overflow: hidden; }

.menu-topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-inline: calc(-1 * var(--e-3));
  padding: var(--e-2) var(--e-3) var(--e-4);
  background: var(--azul-noite);
  border-radius: 0 0 200px 200px;
  margin-bottom: var(--e-4);
}
.menu-topo .marca img { width: 64px; height: 64px; }
.fechar-menu {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio-campo);
  color: var(--papel);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}

.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.menu ul a {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  line-height: 1.1;
  color: var(--azul-toga);
  text-decoration: none;
  padding: 0.35rem 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}
body.menu-aberto .menu ul a { opacity: 1; transform: none; }

.menu-pe { margin-top: auto; padding-top: var(--e-4); display: grid; gap: var(--e-2); }
.menu-pe .btn { width: 100%; }
.menu-pe small { color: var(--tinta-suave); font-size: var(--t-mini); text-align: center; }

/* ---------- reveal on scroll ---------- */

.rev { transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1); }
html.js .rev { opacity: 0; transform: translateY(16px); }
html.js .rev.vis { opacity: 1; transform: none; }
.rev[style*="--i"] { transition-delay: calc(var(--i) * 80ms); }

/* ---------- card generico ---------- */

.card {
  background: var(--branco-quente);
  border: 1px solid var(--areia-borda);
  border-radius: var(--raio-card);
  padding: var(--e-4) var(--e-3);
  box-shadow: var(--sombra-quente);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--sombra-quente-alta); }
}
.fundo-rose .card { border-color: var(--terra); }

/* ---------- 4.1 areas ---------- */

.secao-areas { padding-top: var(--e-6); }

.areas {
  display: grid;
  grid-auto-flow: dense;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
@media (min-width: 900px) {
  .areas { grid-template-columns: 1fr 1fr; }
  .area-larga { grid-column: 1 / -1; }
}

.card h3 { margin-bottom: var(--e-1); }
.chapeu {
  font-style: italic;
  color: var(--terra-texto);
  margin-bottom: var(--e-3);
}

.itens {
  list-style: none;
  margin: 0 0 var(--e-3);
  padding: 0;
}
.itens li {
  padding: 0.55rem 0 0.55rem 1.4rem;
  border-bottom: 1px solid var(--linha-quente);
  position: relative;
}
.itens li::before {
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: 8px; height: 8px;
  border-radius: var(--raio-marcador);
  background: var(--rose-bussola);
}
.itens li:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .itens-duplas { column-count: 2; column-gap: var(--e-4); }
  .itens-duplas li { break-inside: avoid; }
}

.card-rodape {
  display: inline-block;
  font-weight: 500;
  color: var(--terra-texto);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1.5px;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.card-rodape:hover { color: var(--azul-toga); }
.historia-links { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.botao-vermais {
  display: none;
  margin: 0 0 var(--e-3);
  background: transparent;
  border: 1.5px solid var(--rose-bussola);
  border-radius: var(--raio-botao);
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  font-family: var(--fonte-texto);
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--azul-toga);
  cursor: pointer;
}
@media (max-width: 899px) {
  .lista-colapsa > li:nth-child(n+7) { display: none; }
  .lista-colapsa.expandida > li:nth-child(n+7) { display: block; }
  .botao-vermais { display: inline-block; }
}

/* resumo das areas na home: tres cards, o primeiro mais largo pra
   quebrar a simetria de "tres icones iguais" */
.areas-resumo { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
@media (min-width: 900px) { .areas-resumo { grid-template-columns: 1.3fr 1fr 1fr; } }
.areas-resumo .card { display: flex; flex-direction: column; }
.areas-resumo .card-rodape { margin-top: auto; align-self: flex-start; }
a.card { display: block; text-decoration: none; color: inherit; }
.areas-resumo .card p { color: var(--tinta-suave); margin: var(--e-2) 0 var(--e-3); }
.areas-resumo .card:first-child h3 { font-size: clamp(1.7rem, 2.8vw, 2.1rem); }
.nota-secao .card-rodape { margin-left: .4rem; }

/* ---------- 4.2 frases que chegam ---------- */

.falas {
  display: grid;
  gap: var(--e-4) var(--e-5);
  margin-top: var(--e-5);
}
@media (min-width: 900px) {
  .falas { grid-template-columns: 1fr 1fr; }
}
.fala .aspas {
  font-family: var(--fonte-display);
  font-size: var(--t-destaque);
  line-height: 1.18;
  color: var(--azul-toga);
  margin-bottom: var(--e-2);
  text-wrap: pretty;
}
.fala p:not(.aspas) { color: var(--tinta-suave); max-width: 56ch; }

/* ---------- 4.3 historia (faixa rose) ---------- */

.historia {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-5);
  align-items: start;
}
@media (min-width: 900px) {
  .historia { grid-template-columns: 1.15fr .85fr; gap: var(--e-6); }
  /* na pagina propria o titulo fica acima da grade; a foto sobe pra
     ficar ao lado dele em vez de sobrar um vazio em cima */
  .pagina-topo .historia-foto { margin-top: calc(-1 * (var(--t-h2) * 2.6 + var(--e-5))) !important; }
}
/* home: sem a foto ao lado, o texto ocupa a largura toda */
.historia.historia-solo { grid-template-columns: 1fr; }
.historia-texto p { max-width: 58ch; }

.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  margin: var(--e-4) 0;
}
.numero { display: flex; align-items: baseline; gap: 0.45rem; }
.numero strong {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--t-numero);
  line-height: 1;
  color: var(--azul-toga);
  font-variant-numeric: tabular-nums;
}
.numero span { color: var(--tinta-suave); font-size: var(--t-mini); max-width: 16ch; line-height: 1.3; }

.credito { color: var(--tinta-suave); font-size: var(--t-mini); }

/* A foto entra "se preenchendo" de baixo pra cima: catalogo n. 11.
   Sem JS no caminho critico: o estado base e visivel; a mascara so
   entra quando o observador marca .vis. */
.historia-foto { position: relative; }
.historia-foto img {
  border-radius: var(--raio-foto);
  filter: saturate(.92) contrast(1.04);
  box-shadow: var(--sombra-quente-alta);
}
html.js .historia-foto.rev img {
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--p, 100%) - 18%), transparent var(--p, 100%));
          mask-image: linear-gradient(to top, #000 0, #000 calc(var(--p, 100%) - 18%), transparent var(--p, 100%));
  --p: 0%;
  transition: --p 1.3s cubic-bezier(.4,0,.2,1);
}
html.js .historia-foto.rev.vis img { --p: 118%; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.historia-foto .legenda {
  margin-top: var(--e-2);
  font-size: var(--t-mini);
  color: var(--tinta-suave);
}

.citacao-historia {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  max-width: 62ch;
}
.citacao-historia blockquote {
  font-family: var(--fonte-display);
  font-size: var(--t-destaque);
  line-height: 1.2;
  color: var(--azul-toga);
  margin: 0 0 var(--e-2);
  text-wrap: pretty;
}
.citacao-historia .assina { color: var(--terra-texto); font-style: italic; font-size: var(--t-mini); margin-bottom: var(--e-2); }
.citacao-historia .depois { color: var(--tinta-suave); }

/* ---------- 4.4 depoimentos ---------- */

.depoimentos {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
@media (min-width: 760px) {
  .depoimentos { grid-template-columns: 1fr 1fr; }
}
.depoimentos .card p {
  font-family: var(--fonte-display);
  font-size: 1.32rem;
  line-height: 1.3;
  color: var(--azul-toga);
  margin-bottom: var(--e-3);
}
.depoimentos .card footer { color: var(--terra-texto); font-size: var(--t-mini); font-weight: 500; }
.nota-secao { margin-top: var(--e-3); color: var(--tinta-suave); font-size: var(--t-mini); }

@media (max-width: 759px) {
  .grade-colapsa > *:nth-child(n+4) { display: none; }
  .grade-colapsa.expandida > *:nth-child(n+4) { display: block; }
  .grade-colapsa + .botao-vermais { display: inline-block; margin-top: var(--e-3); }
}

/* ---------- 4.6 promessas ---------- */

.promessas {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-4) var(--e-5);
}
@media (min-width: 760px) { .promessas { grid-template-columns: 1fr 1fr; } }
.promessa { position: relative; padding-left: 3rem; }
.promessa .marcador {
  position: absolute; left: 0; top: 0.2rem;
  width: 28px; height: 28px;
  border-radius: var(--raio-marcador);
  background: var(--azul-toga);
  color: var(--rose-bussola);
  font-weight: 500; font-size: 0.9rem;
  display: grid; place-items: center;
}
.promessa h3 { font-size: 1.4rem; margin-bottom: var(--e-1); }
.promessa p { color: var(--tinta-suave); max-width: 46ch; }

/* ---------- 4.7 faq ---------- */

.faq { margin-top: var(--e-4); max-width: 78ch; margin-inline: auto; }
.item-faq { border-bottom: 1px solid var(--linha-quente); }
.item-faq h3 { margin: 0; font-family: var(--fonte-texto); font-weight: 500; font-size: 1.1rem; letter-spacing: 0; }
.pergunta {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  background: transparent; border: 0;
  padding: 1.1rem 0;
  min-height: 44px;
  font: inherit; color: var(--tinta);
  text-align: left; cursor: pointer;
}
.cruz {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: var(--raio-marcador);
  background: var(--rose-fundo);
  position: relative;
  transition: transform .3s ease, background-color .2s ease;
}
.cruz::before, .cruz::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--terra-texto); border-radius: 2px;
  transform: translate(-50%, -50%);
}
.cruz::before { width: 12px; height: 1.5px; }
.cruz::after  { width: 1.5px; height: 12px; }
.item-faq.aberta .cruz { transform: rotate(45deg); background: var(--rose-bussola); }
.resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.2,.7,.3,1);
}
.resposta > div { overflow: hidden; }
.resposta p { color: var(--tinta-suave); padding-bottom: 1.1rem; max-width: 66ch; }
.item-faq.aberta .resposta { grid-template-rows: 1fr; }

/* ---------- 4.8 contato ---------- */

.contato-grade {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-4);
  align-items: start;
}
@media (min-width: 900px) { .contato-grade { grid-template-columns: 1.1fr .9fr; gap: var(--e-6); } }
.contato-grade p { max-width: 48ch; opacity: .92; }
.contato-grade .btn { margin-top: var(--e-3); }

/* o card de dados leva o arco de sol no topo: terceiro e ultimo ponto do ornamento */
.dados-card {
  background: var(--azul-carta);
  border: 1px solid var(--azul-borda);
  border-radius: 120px 120px var(--raio-card) var(--raio-card);
  padding: var(--e-5) var(--e-4) var(--e-4);
}
.dados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.dados li { display: grid; gap: 2px; }
.dados .rot { font-style: italic; color: var(--rose-bussola); font-size: var(--t-mini); }
.dados a { color: var(--papel); text-decoration: none; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) no-repeat left bottom / 100% 1px; }
.redes { margin-top: var(--e-3); }
.redes a { color: var(--rose-bussola); font-weight: 500; text-decoration: none; }

/* ---------- rodape ---------- */

.rodape {
  background: var(--azul-noite);
  color: var(--papel);
  padding-block: var(--e-4) var(--e-4);
}
.rodape-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3) var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.rodape-marca {
  display: flex; align-items: center; gap: var(--e-2);
  color: var(--papel); text-decoration: none;
  font-family: var(--fonte-display); font-size: 1.15rem; letter-spacing: .01em;
}
.rodape-marca img { width: 40px; height: 40px; border-radius: 50%; }
.rodape nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.rodape nav a { color: var(--papel); text-decoration: none; opacity: .78; font-size: var(--t-mini); }
.rodape nav a:hover { opacity: 1; color: var(--rose-bussola); }
.rodape-fim { padding-top: var(--e-3); }
.rodape-fim p { font-size: .82rem; opacity: .58; margin: 0 0 .4rem; }
.rodape-fim p:last-child { margin-bottom: 0; }

/* ---------- barra whatsapp mobile ---------- */

.barra-zap {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: 58px;
  align-items: center; justify-content: center;
  background: var(--rose-bussola);
  color: var(--azul-toga);
  font-weight: 500; text-decoration: none;
  box-shadow: 0 -6px 20px -12px rgba(0,0,0,.4);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.barra-zap.liberada { opacity: 1; transform: translateY(0); pointer-events: auto; }
.barra-zap.liberada.escondida { opacity: 0; transform: translateY(100%); pointer-events: none; }
@media (max-width: 619px) {
  .barra-zap { display: flex; }
  body { padding-bottom: 58px; }
}

/* ---------- paginas internas ---------- */

.pagina-topo { padding-top: var(--e-6); padding-bottom: var(--e-4); }
.pagina-topo h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 18ch; }
.pagina-topo .intro { max-width: 60ch; }
.pagina-topo .intro p:not(.abertura) { color: var(--tinta-suave); margin-top: var(--e-3); }

.bloco-texto { max-width: 66ch; }
.bloco-texto h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: var(--e-5) 0 var(--e-2); }
.bloco-texto h2:first-child { margin-top: 0; }
.bloco-texto ul { padding-left: 1.2rem; color: var(--tinta-suave); }
.bloco-texto li { margin-bottom: 0.35rem; }
.bloco-texto li::marker { color: var(--rose-bussola); }

.caminhos { display: grid; gap: var(--e-3); margin: var(--e-4) 0; }
@media (min-width: 760px) { .caminhos { grid-template-columns: 1fr 1fr; } }
.caminhos .card h3 { font-size: 1.5rem; margin-bottom: var(--e-2); }
.caminhos .card p { color: var(--tinta-suave); }

.custos { list-style: none; padding: 0; margin: var(--e-3) 0; display: grid; gap: var(--e-2); }
.custos li { padding-left: 1.4rem; position: relative; color: var(--tinta-suave); }
.custos li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 8px; height: 8px; border-radius: 50%; background: var(--rose-bussola); }
.custos b { color: var(--tinta); font-weight: 500; }

.cta-pagina { margin-top: var(--e-5); }
.cta-pagina .btn { margin-top: var(--e-3); }

/* artigos do Conteudo: acordeao no mesmo mecanismo do FAQ */
.artigos { margin-top: var(--e-4); display: grid; gap: var(--e-3); }
.artigo.card { padding: 0 var(--e-3); }
.artigo .pergunta { padding: 1.3rem 0; align-items: flex-start; }
.artigo h3 { font-family: var(--fonte-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -.01em; }
.artigo .resposta p { padding-bottom: var(--e-3); }
.artigo .fonte { font-size: var(--t-mini); font-style: italic; color: var(--terra-texto); }

/* ---------- guia: trilha com indice que acompanha ---------- */

.capa-guia .intro p:not(.abertura) { color: var(--tinta-suave); }

.trilha { display: grid; gap: var(--e-5); }
@media (min-width: 900px) {
  .trilha { grid-template-columns: 280px 1fr; gap: var(--e-6); align-items: start; }
  .trilha-indice { position: sticky; top: calc(var(--altura-topo) + var(--e-5)); padding-top: var(--e-4); }
}
.trilha-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); position: relative; }
.trilha-indice ol::before { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 1.5px; background: var(--linha-quente); }
.trilha-indice a { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta-suave); font-weight: 500; font-size: 1.18rem; position: relative; }
.trilha-indice a:hover { color: var(--azul-toga); }
.trilha-indice .marcador { width: 36px; height: 36px; border-radius: 50%; background: var(--rose-fundo); color: var(--terra-texto); display: grid; place-items: center; font-size: .95rem; flex: 0 0 36px; border: 1.5px solid var(--linha-quente); }
@media (max-width: 899px) {
  .trilha-indice ol { grid-template-columns: repeat(5, auto); justify-content: start; gap: var(--e-3); }
  .trilha-indice ol::before { display: none; }
  .trilha-indice a { flex-direction: column; font-size: .8rem; text-align: center; gap: 6px; }
}

.trilha-corpo { display: grid; gap: var(--e-6); }
.parada { position: relative; padding-left: 3rem; max-width: 66ch; }
.parada > .marcador { position: absolute; left: 0; top: .35rem; width: 28px; height: 28px; border-radius: 50%; background: var(--rose-bussola); color: var(--azul-toga); display: grid; place-items: center; font-weight: 500; font-size: .9rem; }
.parada h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: var(--e-2); }
.parada > p { color: var(--tinta-suave); }

/* os dois caminhos: navy e rose, um de frente pro outro, como os
   tecidos do hero */
.caminhos { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
@media (min-width: 760px) { .caminhos { grid-template-columns: 1fr 1fr; } }
/* o arco de 120px come o canto de cima: o texto entra abaixo dele */
.caminho { border-radius: var(--raio-card); padding: calc(var(--e-4) + 44px) var(--e-3) var(--e-4); }
.caminho-rose { background: var(--rose-fundo); border: 1px solid var(--terra); color: var(--tinta); border-radius: var(--raio-card) 120px var(--raio-card) var(--raio-card); }
.caminho-navy { background: var(--azul-toga); color: var(--papel); border-radius: 120px var(--raio-card) var(--raio-card) var(--raio-card); }
.caminho-nome { font-style: italic; font-weight: 500; margin-bottom: var(--e-1); }
.caminho-rose .caminho-nome { color: var(--terra-texto); }
.caminho-navy .caminho-nome { color: var(--rose-bussola); }
.caminho h3 { font-size: 1.5rem; margin-bottom: var(--e-2); }
.caminho p:last-child { margin: 0; }
.caminho-rose p:last-child { color: var(--tinta-suave); }
.caminho-navy p:last-child { color: var(--papel); opacity: .88; }

/* ---------- acordeao de fotos (home) ---------- */
.acordeao-fotos {
  display: flex; gap: 6px; height: 260px; margin-top: var(--e-5);
  border-radius: var(--raio-card); overflow: hidden;
}
@media (min-width: 760px) { .acordeao-fotos { height: 420px; } }
.acordeao-item {
  flex: 1; min-width: 44px; position: relative; padding: 0; margin: 0;
  border: 0; cursor: pointer; background-size: cover; background-position: center;
  transition: flex .5s cubic-bezier(.2,.8,.2,1);
}
.acordeao-item.sem-foto { background: var(--branco-quente); border-right: 1px solid var(--areia-borda); }
.acordeao-item.sem-foto:last-child { border-right: 0; }
@media (hover: hover) {
  .acordeao-item:not(.sem-foto):hover { flex: 4; }
}
.acordeao-item.ativo:not(.sem-foto) { flex: 4; }

/* ---------- galeria de fotos arrastavel (home, uso pessoal) ---------- */
.galeria-pessoal {
  margin-top: var(--e-6); position: relative;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;
  padding: var(--e-3) 0 var(--e-4);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.galeria-pessoal::-webkit-scrollbar { display: none; }
.galeria-pessoal.arrastando { cursor: grabbing; }
.galeria-pessoal-trilho {
  display: flex; gap: var(--e-3); width: max-content; padding: 0 var(--e-3);
}
.galeria-item {
  flex: 0 0 auto; width: 145px; height: 200px; padding: 0; border: 4px solid var(--branco-quente);
  border-radius: var(--raio-card); box-shadow: var(--sombra-quente-alta);
  background-size: cover; background-position: top center; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.galeria-item:nth-child(odd) { transform: rotate(-2deg); }
.galeria-item:nth-child(even) { transform: rotate(2deg); }
@media (min-width: 480px) { .galeria-item { width: 200px; height: 275px; } }
@media (min-width: 760px) { .galeria-item { width: 260px; height: 355px; } }

/* ---------- lightbox de fotos ---------- */
body.lightbox-aberta { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; padding: var(--e-4);
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,13,26,.92);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.aberto { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.lightbox-fechar {
  position: fixed; top: var(--e-3); right: var(--e-3); z-index: 301;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08); color: var(--papel); font-size: 1.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease;
}
.lightbox-fechar:hover { background: rgba(255,255,255,.18); }
.galeria-item:hover, .galeria-item:focus-visible {
  transform: rotate(0deg) translateY(-10px) scale(1.04);
  z-index: 3; box-shadow: 0 24px 48px -16px rgba(6,13,26,.35);
}

.lista-check { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 0; }
.lista-check li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--e-2); padding: .7rem 0; border-bottom: 1px solid var(--linha-quente); position: relative; }
.lista-check li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--terra); background: transparent; margin-top: .45rem; }
.lista-check li:first-child::before { background: var(--rose-bussola); border-color: var(--rose-bussola); }
.lista-check li:last-child { border-bottom: 0; }
.lista-check b { font-weight: 500; display: block; }
.lista-check span { color: var(--tinta-suave); font-size: var(--t-mini); grid-column: 2; }

.custos-tres { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
@media (min-width: 760px) { .custos-tres { grid-template-columns: 1.2fr 1fr 1fr; } }
.custo { background: var(--branco-quente); border: 1px solid var(--areia-borda); border-radius: var(--raio-card); padding: var(--e-3); position: relative; }
.custo .marcador { width: 26px; height: 26px; border-radius: 50%; background: var(--azul-toga); color: var(--rose-bussola); display: grid; place-items: center; font-size: .85rem; font-weight: 500; margin-bottom: var(--e-2); }
.custo b { display: block; font-weight: 500; margin-bottom: 4px; }
.custo p { margin: 0; color: var(--tinta-suave); font-size: var(--t-mini); }
.parada .faq { margin-top: var(--e-2); }

/* ---------- conteudo: revista ---------- */

.revista { display: grid; gap: var(--e-3); }
@media (min-width: 900px) { .revista { grid-template-columns: 1fr 1fr; } .revista .artigo:first-child { grid-column: 1 / -1; } }
.artigo { background: var(--branco-quente); border: 1px solid var(--areia-borda); border-radius: var(--raio-card); padding: var(--e-3) var(--e-4); box-shadow: var(--sombra-quente); border-bottom: 1px solid var(--areia-borda); }
.artigo-meta { display: flex; gap: var(--e-2); align-items: center; margin-bottom: var(--e-1); }
.artigo .tema { background: var(--rose-fundo); color: var(--terra-texto); border-radius: var(--raio-selo); padding: .2rem .7rem; font-size: var(--t-mini); font-weight: 500; }
.artigo .tempo { color: var(--tinta-suave); font-size: var(--t-mini); font-style: italic; }
.artigo h2 { margin: 0; }
.artigo .pergunta { padding: .6rem 0 .9rem; align-items: flex-start; font-family: var(--fonte-display); font-weight: 600; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.12; letter-spacing: -.01em; }
.revista .artigo:first-child .pergunta { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.artigo .resposta p { color: var(--tinta-suave); max-width: 62ch; padding-bottom: var(--e-2); }
.artigo .fonte { font-size: var(--t-mini); font-style: italic; color: var(--terra-texto); }

/* ---------- contato: duas colunas ---------- */

.contato-pagina { padding-block: var(--e-6); }
.contato-duas { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 900px) { .contato-duas { grid-template-columns: 1.1fr .9fr; gap: var(--e-7); } .contato-pagina { padding-block: var(--e-7); } }
.contato-fala h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); max-width: 14ch; }
.contato-fala > p:not(.abertura) { max-width: 46ch; opacity: .92; margin-top: var(--e-3); }
.contato-fala .btn { margin-top: var(--e-3); }
.o-que-mandar { margin-top: var(--e-5); }
.o-que-mandar ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.o-que-mandar li { display: flex; gap: var(--e-2); align-items: flex-start; }
.o-que-mandar .marcador { width: 28px; height: 28px; border-radius: 50%; background: var(--rose-bussola); color: var(--azul-toga); display: grid; place-items: center; font-weight: 500; font-size: .9rem; flex: 0 0 28px; }
.o-que-mandar b { display: block; font-weight: 500; }
.o-que-mandar span:not(.marcador) { opacity: .8; font-size: var(--t-mini); }
.contato-pagina .dados-card { padding-top: var(--e-6); }

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rev,
  html.js .rev.vis { opacity: 1; transform: none; transition: none; }
  html.js .historia-foto.rev img { -webkit-mask-image: none; mask-image: none; transition: none; }
  /* sem animacao nao ha por que esconder a barra na entrada */
  body.tem-cena .topo { transform: none; opacity: 1; pointer-events: auto; }
  .menu ul a { opacity: 1; transform: none; transition: none; }
  .topo, .btn, .card, .cruz, .resposta { transition: none; }
}


/* ===========================================================
   HERO EM VIDEO (cn-)
   Colado de teste-2.html, aprovado. Nao mexer na cena.
   =========================================================== */

/* ===========================================================
   CENA DE ABERTURA EM VIDEO  ·  teste 2
   O video de 8s nao toca sozinho: cada quadro dele esta amarrado
   a um ponto do scroll. Quem rola a pagina e quem move a cena.

   O quadro cobre a secao inteira, sem moldura e sem esfumado nas
   bordas. O texto vive por cima da imagem. A unica sombra e a que
   fica atras de cada bloco de texto, so pra garantir leitura.

   Neste video os dois tecidos entram por lados opostos e se juntam
   no meio, entao o texto ocupa o vao entre eles enquanto ele existe
   e sobe pra faixa de cima quando o centro fecha.

   Prefixo cn- em tudo porque estilo.css ja usa .legenda, .fala e
   .selo pra outras coisas, e sem o prefixo as regras colidem.
   =========================================================== */

:root{
  /* azul de fundo amostrado do proprio video (#132237 a #2B384D) */
  --cn-fundo: #16233A;
  --cn-texto: #F4EFEA;
  --cn-sombra: 6,13,26;
}

/* --cn-curso: quanto scroll os 8s de video ocupam. Maior = mais lento. */
.cena{
  position:relative; --cn-curso:540vh; height:var(--cn-curso);
  background:var(--cn-fundo);
  margin-top:calc(-1 * var(--altura-topo));
}

.cn-grude{
  position:sticky; top:0;
  height:100dvh;
  overflow:hidden;
}

/* ---------- o quadro: cobre tudo ---------- */
.cn-palco{ position:absolute; inset:0; }
.cn-palco video,
.cn-palco .cn-poster{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  object-fit:cover; object-position:50% 50%;
}

/* Preenchimento borrado, so no retrato. Um video 16:9 nao cabe numa
   tela de celular sem cortar dois tercos da largura, e cortar aqui
   significa perder um dos dois tecidos, que e a cena inteira.
   Entao no retrato o video aparece inteiro e o resto da tela e o
   proprio primeiro quadro desfocado: cobre a secao toda, sem tarja. */
.cn-borrao{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover; transform:scale(1.25);
  filter:blur(34px) saturate(.85) brightness(.48);
  display:none;
}
.cn-palco video{ opacity:0; transition:opacity .25s ease; }
.cn-palco video.pronto{ opacity:1; }
.cn-palco .cn-poster{ transition:opacity .25s ease; }
.cn-palco .cn-poster.oculto{ opacity:0; }
/* na abertura (logo e nome) so o quadro do poster: os panos entram ao rolar */
.cena.em-abertura .cn-palco video{ opacity:0; }
.cena.em-abertura .cn-palco .cn-poster{ opacity:1; }

/* ---------- blocos de texto ---------- */
.cn-legendas{ position:absolute; inset:0; pointer-events:none; z-index:2; color:var(--cn-texto); }

.cn-bloco{
  position:absolute; isolation:isolate;
  opacity:0; transform:translateY(18px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1);
  text-shadow:0 1px 16px rgba(var(--cn-sombra),.7);
}
.cn-bloco.vis{ opacity:1; transform:none; }

/* A sombra que garante leitura. Elipse, nao caixa: caixa tem topo e
   base retos e a aresta aparece cortando a imagem por tras. Fica so
   embaixo do texto, nao em volta do quadro. */
.cn-bloco::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-90% -30%;
  /* Os raios tem que ficar em 50% ou menos. Acima disso a elipse passa
     da caixa que a contem, e o que sobra dela e cortado em reta: vira
     um retangulo escuro visivel por tras do texto, que foi exatamente
     o que aconteceu com os blocos largos e centralizados. */
  background:radial-gradient(ellipse 50% 46% at 50% 50%,
    rgba(var(--cn-sombra),.86) 0%,
    rgba(var(--cn-sombra),.64) 40%,
    rgba(var(--cn-sombra),.24) 66%,
    rgba(var(--cn-sombra),0) 100%);
}

/* O rotulo do hero e o unico do site em caixa alta: faz parte da cena
   aprovada. Fora do hero nao existe mais .rotulo. */
.cn-bloco .rotulo{
  font-family:var(--fonte-texto); font-weight:500; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--rose-bussola); margin:0 0 var(--e-2);
}
.cn-bloco .cn-frase{
  font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.5; margin:0;
  color:var(--cn-texto); text-wrap:pretty;
}
.cn-bloco .cn-frase b{ font-weight:500; color:var(--rose-bussola); }

.lg-1 h1{
  font-size:clamp(2.3rem,5vw,4.3rem); line-height:.98;
  margin:0; color:var(--cn-texto); max-width:13ch;
}
.lg-1 h1 em{ font-style:normal; color:var(--rose-bussola); }

/* abertura: logo e nome antes da cena comecar a andar */
.cn-abertura{ left:5vw; right:5vw; top:46%; translate:0 -50%; text-align:center; }
.cn-logo{ display:block; width:clamp(110px,16vw,170px); height:auto; aspect-ratio:1; border-radius:50%; margin:0 auto var(--e-3); box-shadow:0 8px 40px rgba(var(--cn-sombra),.55); }
.cn-nome{
  font-family:var(--fonte-display); font-weight:600; line-height:1;
  font-size:clamp(2.3rem,5vw,4.3rem); margin:0 0 var(--e-3); color:var(--cn-texto);
}
.cn-abertura .rotulo{ margin:0 auto; max-width:60ch; }

.cn-dado .n{
  display:block; font-family:var(--fonte-display); font-weight:600;
  font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:.84;
  color:var(--rose-bussola); margin:0 0 var(--e-2);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Posicoes. Enquanto os tecidos estao afastados, o vao do meio e o
   espaco mais limpo do quadro e e o ponto do conceito: o texto fica
   centrado nele. Quando eles se encontram, o meio fecha e o texto desce
   pro chao de nevoa, que e a outra area calma do video.
   `translate` centra na vertical sem brigar com o `transform` que faz
   o bloco subir ao aparecer: sao propriedades separadas. */
.lg-1{ left:5vw; right:5vw; top:46%; translate:0 -50%; text-align:center; }
.lg-2{ left:5vw; right:5vw; top:47%; translate:0 -50%; text-align:center; }
.lg-3{ left:5vw; right:5vw; top:48%; translate:0 -50%; text-align:center; }
.lg-4{ left:5vw; right:5vw; bottom:9vh; text-align:center; }

.lg-1 h1{ margin-inline:auto; max-width:17ch; }
.lg-2 .cn-frase,.lg-4 .cn-frase{ margin-inline:auto; max-width:50ch; }
/* no terceiro bloco o vao ja esta estreitando: coluna mais magra */
.lg-3 .cn-frase{ margin-inline:auto; max-width:34ch; }

/* fecho: as tres portas na faixa de baixo */
.lg-5{ left:5vw; right:5vw; bottom:6vh; }
.lg-5::before{ opacity:.72; }
.cn-portas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px; pointer-events:auto;
}
.cn-porta{
  display:block; text-decoration:none; color:var(--cn-texto);
  background:rgba(246,239,233,.07);
  border:1px solid rgba(242,175,158,.38);
  border-radius:var(--raio-card);
  padding:.85rem 1rem;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:background-color .24s ease, border-color .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.cn-porta strong{ display:block; font-weight:500; font-size:1rem; margin-bottom:2px; }
.cn-porta span{ display:block; font-size:.85rem; line-height:1.4; color:rgba(246,239,233,.78); }
@media (hover:hover){
  .cn-porta:hover{ background:rgba(242,175,158,.16); border-color:var(--rose-bussola); transform:translateY(-3px); }
}
.cn-porta:focus-visible{ outline:2px solid var(--rose-bussola); outline-offset:3px; }

.cn-acao{ display:flex; justify-content:center; margin-top:var(--e-2); }
.cn-acao .btn{ pointer-events:auto; text-shadow:none; }

/* A piscadela do fim. Entra com atraso proprio: se aparecer junto com
   as portas vira mais uma linha do bloco, e piada que chega junto com
   a informacao nao le como piada. */
/* A piscadela ganhou batida propria, no meio da tela e grande,
   entre o "11 anos" e as portas. Pedido da Renata. */
.lg-6{ left:5vw; right:5vw; top:46%; translate:0 -50%; text-align:center; }
.cn-piada{
  margin:0; font-family:var(--fonte-display); font-weight:600;
  font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1;
  letter-spacing:-.015em; color:var(--rose-bussola);
}
.cn-piada-obs{
  display:block; font-family:var(--fonte-texto); font-weight:400;
  font-style:italic; font-size:1.35rem; letter-spacing:normal;
  color:var(--rose-bussola); margin:.5rem 0 0;
}

/* rodape da cena */
.cn-selo{
  position:absolute; left:0; right:0; bottom:1.8vh; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px;
  opacity:0; transition:opacity .6s ease;
  font-size:.76rem; letter-spacing:.05em; color:rgba(246,239,233,.66);
  text-shadow:0 1px 12px rgba(var(--cn-sombra),.9);
}
.cn-selo.vis{ opacity:1; }

/* dica de rolagem, some no primeiro movimento */
.cn-dica{
  position:absolute; left:50%; translate:-50% 0; bottom:3vh; z-index:3;
  margin:0; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,239,233,.62); transition:opacity .5s ease;
  text-shadow:0 1px 12px rgba(var(--cn-sombra),.9);
}
.cn-dica.some{ opacity:0; }

/* ---------- telas pequenas ----------
   Este video e abstrato e simetrico, e a acao toda acontece no centro:
   os tecidos entram pelas bordas e se encontram no meio. Entao aqui da
   pra cobrir a tela inteira em retrato sem perder a historia. O corte
   deixa de fora as pontas dos tecidos no segundo ato, e em troca o
   celular ganha o mesmo quadro imersivo do desktop, sem faixa e sem
   fundo borrado. */
@media (max-width:860px){
  .cena{ --cn-curso:320vh; }
  .cn-borrao{ display:none; }

  .lg-1,.lg-2,.lg-3,.lg-6{ left:6vw; right:6vw; width:auto; max-width:none; text-align:center; }
  .cn-piada{ font-size:clamp(2rem,10vw,2.8rem); }
  .cn-piada-obs{ font-size:1.1rem; }
  .lg-1{ top:44%; }
  .lg-2,.lg-3{ top:46%; }
  .lg-1 h1{ max-width:none; font-size:clamp(2.35rem,10.5vw,3rem); }
  .lg-2 .cn-frase,.lg-3 .cn-frase,.lg-4 .cn-frase{ max-width:none; }
  .cn-bloco .cn-frase{ font-size:1.06rem; }
  .cn-bloco .rotulo{ letter-spacing:.11em; }

  .lg-4{ left:6vw; right:6vw; bottom:18vh; text-align:center; }
  .cn-dado .n{ font-size:clamp(2.6rem,12vw,3.4rem); }

  .lg-5{ left:5vw; right:5vw; bottom:4vh; }
  .cn-portas{ grid-template-columns:1fr; gap:7px; }
  .cn-porta{ padding:.66rem .85rem; }
  .cn-porta strong{ font-size:.94rem; }
  .cn-porta span{ font-size:.8rem; }
  .cn-acao .btn{ width:100%; padding:.85rem 1.2rem; }
  .cn-selo{ display:none; }
  .cn-dica{ display:none; }
}

/* ---------- quem pediu menos movimento ----------
   A cena desmonta: quadro parado e textos empilhados, na ordem
   em que apareceriam. */
@media (prefers-reduced-motion:reduce){
  .cena{ height:auto; margin-top:0; }
  .cn-grude{ position:static; height:auto; overflow:visible; padding-bottom:var(--e-5); }
  .cn-palco{ position:static; aspect-ratio:16/9; margin-bottom:var(--e-4); }
  .cn-palco video,.cn-palco .cn-poster{ object-fit:cover; }
  .cn-dica{ display:none; }
  .cn-legendas{ position:static; }
  .cn-bloco{
    position:static; opacity:1; transform:none !important; translate:none;
    width:auto; max-width:none; text-align:left;
    margin:0 0 var(--e-4); padding:0 6vw; text-shadow:none;
  }
  .cn-bloco::before{ display:none; }
  .cn-abertura{ display:none; }
  .cn-selo{ position:static; opacity:1; justify-content:flex-start; padding:0 6vw; text-shadow:none; }
}

/* ---------- blog ---------- */

.capa-blog .intro p:not(.abertura) { max-width: 52ch; }

.secao-posts { padding-top: var(--e-4); }
.posts { display: grid; gap: var(--e-3); }
@media (min-width: 760px) { .posts { grid-template-columns: 1fr 1fr; gap: var(--e-4); } }
@media (min-width: 1040px) {
  .posts:not(.posts-dois) { grid-template-columns: repeat(3, 1fr); }
  .posts:not(.posts-dois) .post-destaque { grid-column: 1 / -1; }
}

.post-card {
  display: flex; flex-direction: column; gap: var(--e-2);
  background: var(--areia); color: var(--tinta);
  border: 1px solid var(--linha-quente); border-radius: var(--raio-card);
  padding: var(--e-4) var(--e-3);
  box-shadow: var(--sombra-quente);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.fundo-areia .post-card { background: var(--branco-quente); }
.post-card:hover, .post-card:focus-visible { transform: translateY(-4px); box-shadow: var(--sombra-quente-alta); border-color: var(--rose-bussola); }
.post-card h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.post-card p { color: var(--tinta-suave); margin: 0; font-size: var(--t-mini); line-height: 1.6; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.post-meta .tema, .tema-chip {
  background: var(--rose-fundo); color: var(--terra-texto); border-radius: var(--raio-selo);
  padding: .2rem .7rem; font-size: var(--t-mini); font-weight: 500;
}
.post-meta .tempo { color: var(--tinta-suave); font-size: var(--t-mini); font-style: italic; }
.post-ler { margin-top: auto; padding-top: var(--e-1); color: var(--terra-texto); font-weight: 500; font-size: var(--t-mini); }
.post-ler span { display: inline-block; transition: transform .3s ease; }
.post-card:hover .post-ler span { transform: translateX(5px); }

.post-destaque { background: var(--azul-toga); color: var(--papel); border-color: var(--azul-toga); padding: var(--e-4); }
.fundo-areia .post-destaque, .post-destaque { background: var(--azul-toga); }
.post-destaque h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 22ch; color: var(--papel); }
.post-destaque p { color: var(--papel); opacity: .86; font-size: var(--t-corpo); max-width: 58ch; }
.post-destaque .post-meta .tema { background: rgba(242,175,158,.18); color: var(--rose-bussola); }
.post-destaque .post-meta .tempo { color: var(--papel); opacity: .75; }
.post-destaque .post-ler { color: var(--rose-bussola); }

/* leitura de um artigo */
.progresso-leitura { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.progresso-leitura span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--rose-bussola); }

.leitura-topo { padding: var(--e-6) 0 var(--e-4); }
.env.estreito { max-width: 780px; }
.voltar { display: inline-block; color: var(--terra-texto); font-size: var(--t-mini); font-weight: 500; text-decoration: none; margin-bottom: var(--e-3); }
.voltar:hover { text-decoration: underline; text-underline-offset: 4px; }
.tema-chip { display: inline-block; margin: 0 0 var(--e-2); }
.leitura-topo h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.04; max-width: 20ch; margin: 0 0 var(--e-3); }
.leitura-topo .lead { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.6; color: var(--tinta-suave); max-width: 60ch; margin: 0 0 var(--e-3); }
.leitura-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; font-size: var(--t-mini); color: var(--tinta-suave); }
.leitura-meta span + span::before { content: "·"; margin-right: 1.1rem; color: var(--rose-bussola); }
.leitura-meta .tempo { font-style: italic; color: var(--terra-texto); }

.leitura-grade { padding-block: var(--e-4) var(--e-5); display: block; }
.indice { display: none; }
.texto { max-width: 680px; margin-inline: auto; }
.texto > p, .texto li { font-size: clamp(1.1rem, 1rem + .35vw, 1.24rem); line-height: 1.78; color: var(--tinta); }
.texto > p { margin: 0 0 1.35rem; }
.texto h2 { font-size: clamp(1.7rem, 3vw, 2.15rem); line-height: 1.12; margin: var(--e-5) 0 var(--e-2); scroll-margin-top: calc(var(--altura-topo) + 20px); }
.texto ul, .texto ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.texto li { margin-bottom: .55rem; padding-left: .3rem; }
.texto li::marker { color: var(--rose-bussola); }

.em-resumo { background: var(--rose-fundo); border-radius: var(--raio-card); padding: var(--e-3); margin: 0 0 var(--e-4); border-left: 4px solid var(--rose-bussola); }
.em-resumo-t { font-family: var(--fonte-display); font-weight: 600; font-size: 1.4rem; color: var(--terra-texto); margin: 0 0 var(--e-1) !important; }
.em-resumo ul { margin: 0; padding-left: 1.2rem; }
.em-resumo li { font-size: 1.05rem !important; line-height: 1.6 !important; margin-bottom: .4rem; }

.nota-leitura { background: var(--azul-toga); color: var(--papel); border-radius: var(--raio-card); padding: var(--e-3); margin: var(--e-4) 0; }
.nota-leitura strong { display: block; font-family: var(--fonte-display); font-weight: 600; font-size: 1.45rem; color: var(--rose-bussola); margin-bottom: .4rem; }
.nota-leitura p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--papel); opacity: .92; }

.aviso-leitura { margin-top: var(--e-4) !important; padding-top: var(--e-3); border-top: 1px solid var(--linha-quente); font-size: var(--t-mini) !important; font-style: italic; color: var(--tinta-suave) !important; line-height: 1.6 !important; }
.proximo-passo { margin: var(--e-2) 0 0 !important; }

@media (min-width: 1100px) {
  .leitura-grade { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: var(--e-5); justify-content: center; }
  .indice { display: block; position: sticky; top: calc(var(--altura-topo) + 24px); align-self: start; }
  .indice p { font-family: var(--fonte-display); font-weight: 600; font-size: 1.2rem; color: var(--terra-texto); margin: 0 0 var(--e-2); }
  .indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linha-quente); }
  .indice a { display: block; padding: .45rem 0 .45rem var(--e-2); margin-left: -1px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.35; color: var(--tinta-suave); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
  .indice a:hover, .indice a.ativo { color: var(--terra-texto); border-left-color: var(--rose-bussola); }
  .texto { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .post-card, .post-ler span { transition: none; } .post-card:hover { transform: none; } }