/* ============================================================
   Thati Lira — site público
   ============================================================ */

/* ------------------------------------------------------------------
   CABEÇALHO — barra de vidro que encolhe ao rolar
------------------------------------------------------------------ */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: .8rem 0;
  transition: padding var(--transicao);
}
.topo__barra {
  position: relative;
  padding: .95rem 1.1rem;
  border-radius: 999px;
  min-height: 76px;
  display: flex;
  align-items: center;
}
.topo__normal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  width: 100%;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.22,1,.36,1);
}
.topo__normal .marca { justify-self: center; }
/* Lados do cabeçalho: no celular só o essencial (menu à esquerda vazio,
   sanduíche à direita); em telas largas ganham links reais e a logo
   continua caindo exatamente no centro, porque as duas colunas são 1fr. */
.topo__lado { display: flex; align-items: center; gap: .5rem; min-width: 44px; }
.topo__lado--esquerda { justify-self: start; }
.topo__lado--direita { justify-self: end; }
/* A logo centralizada e o ícone de categorias já abrem tudo — um só
   gatilho de menu, como na referência (o ícone de categorias faz esse
   papel em qualquer tamanho de tela). */
.topo__lado--direita .sanduiche { display: none; }
.topo__link { display: none; }
@media (min-width: 900px) {
  .topo__link {
    display: inline-block;
    font-family: "Work Sans", sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
  }
  .topo__link:hover { color: var(--vinho-claro); }
}
.topo__busca {
  position: absolute;
  inset: .35rem .45rem .35rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.22,1,.36,1);
}
.topo__busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  padding: .5rem 0;
}
.topo__busca input:focus { outline: none; }
.topo__busca-lupa { display: grid; place-items: center; color: var(--vinho-claro); flex: none; }

.topo.buscando .topo__normal { opacity: 0; transform: scale(.97); pointer-events: none; }
.topo.buscando .topo__busca { opacity: 1; transform: none; pointer-events: auto; }

/* Sugestões que descem junto com a busca — sem ocupar espaço quando fechada */
.busca-dicas {
  margin-top: 0;
  padding: 0 1.1rem;
  max-height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  opacity: 0;
  transform: translateY(-10px) scale(.985);
  pointer-events: none;
  border-width: 0;
  transition: opacity 240ms ease, transform 340ms cubic-bezier(.22,1,.36,1),
              max-height 340ms cubic-bezier(.22,1,.36,1), padding 240ms ease, margin 240ms ease;
}
.topo.buscando .busca-dicas {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  max-height: 240px;
  margin-top: .5rem;
  padding: .9rem 1.1rem 1rem;
  border-width: 1px;
}
.busca-dicas .olho { display: block; margin-bottom: .55rem; }
.topo.compacto { padding: .45rem 0; }
.topo.compacto .topo__barra { padding-block: .6rem; }

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  text-decoration: none;
  flex: none;
}
/* A logo é imagem: a assinatura fica igual no computador e no celular */
.marca__logo {
  height: 46px;
  width: auto;
  display: block;
}
@media (min-width: 900px) { .marca__logo { height: 54px; } }
.marca--rodape { margin-bottom: .7rem; }
.marca--rodape .marca__logo { height: 34px; }
#gaveta-menu .marca__logo { height: 36px; }

/* Reserva: se o PNG faltar, a marca volta como texto */
.marca__logo--texto {
  font-family: var(--fonte-logo);
  font-size: 1.6rem;
  color: var(--vinho);
  line-height: 1.15;
}

/* ---- Botão sanduíche ---- */
.sanduiche {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
}
.sanduiche__traco {
  display: block;
  width: 18px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--vinho);
  transition: transform 340ms cubic-bezier(.22,1,.36,1), opacity 200ms;
}
.sanduiche__traco:nth-child(2) { width: 13px; margin-right: 5px; }
body.menu-aberto .sanduiche__traco:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
body.menu-aberto .sanduiche__traco:nth-child(2) { opacity: 0; }
body.menu-aberto .sanduiche__traco:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
/* O sanduíche abre a navegação completa — igual no computador e no celular */

/* ------------------------------------------------------------------
   BOLHA DO CHAT — único elemento flutuante da tela
------------------------------------------------------------------ */
.bolha-chat {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 70;

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.25rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  color: #fff;

  /* Vidro tingido de vinho: translúcido, mas com contraste para o texto branco */
  background: linear-gradient(165deg, rgba(26,24,21,.86), rgba(14,13,12,.78));
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 0 -10px 20px -12px rgba(255,255,255,.25),
    0 18px 38px -18px rgba(20,18,15,.85),
    0 3px 10px -6px rgba(20,18,15,.5);

  transition: transform 420ms cubic-bezier(.34,1.56,.64,1), opacity 280ms, box-shadow var(--transicao);
  -webkit-tap-highlight-color: transparent;
}
.bolha-chat svg { width: 22px; height: 22px; flex: none; }
.bolha-chat:hover { transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), 0 24px 46px -18px rgba(20,18,15,.9); }
.bolha-chat:active { transform: scale(.93, 1.05); }
.bolha-chat.escondida { transform: translateY(160%); opacity: 0; pointer-events: none; }

/* Reflexo que escorre na borda de cima — o toque de gelatina */
.bolha-chat::after {
  content: "";
  position: absolute;
  inset: 2px 10px auto 10px;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0));
  pointer-events: none;
}

/* Pulso discreto, só uma vez, para a pessoa notar que existe */
@keyframes chamar {
  0%, 88%, 100% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), 0 18px 38px -18px rgba(20,18,15,.85), 0 0 0 0 rgba(195,173,130,.5); }
  94% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), 0 18px 38px -18px rgba(20,18,15,.85), 0 0 0 14px rgba(195,173,130,0); }
}
.bolha-chat { animation: chamar 7s ease-out 3s 3; }

@media (max-width: 420px) {
  .bolha-chat__texto { display: none; }
  .bolha-chat { padding: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bolha-chat { animation: none; }
  .bolha-chat:active { transform: none; }
}

/* ------------------------------------------------------------------
   HERO
------------------------------------------------------------------ */
.hero { padding: 1.2rem 0 2.2rem; }
.hero__grade { display: grid; gap: 1.4rem; }

.hero__cartao {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.04);
  animation: aproximar 18s ease-out forwards;
}
@keyframes aproximar { to { transform: scale(1); } }
.hero__cartao::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(44,20,24,0) 8%, rgba(44,20,24,.28) 48%, rgba(44,20,24,.72));
}
.hero__placa {
  flex: 1;
  min-width: 0;
  margin: 1rem;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: var(--r-lg);
}
.hero__placa .olho { color: var(--dourado-claro); }
.hero__placa h1 {
  color: #fff;
  font-size: clamp(1.9rem, 6.6vw, 3.1rem);
  margin-block: .35rem .5rem;
  text-wrap: balance;
}
.hero__placa p {
  color: rgba(255,255,255,.86);
  font-size: .98rem;
  margin-bottom: 1.1rem;
}
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.1rem;
}
.hero__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.hero__meta svg { width: 15px; height: 15px; }

/* Cartão de apresentação da Thati */
.perfil { padding: .5rem .5rem 1.3rem; display: grid; gap: 1rem; }
.perfil__retrato {
  position: relative;
  border-radius: calc(var(--r-lg) - 4px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--dourado-claro), var(--vinho-claro));
}
.perfil__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.perfil__retrato-vazio {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: "Playfair Display", serif; font-size: 5rem; color: #fff;
}
.perfil__retrato::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(44,20,24,.78));
  pointer-events: none;
}
.perfil__placa {
  position: absolute;
  left: .9rem; right: .9rem; bottom: .9rem;
  z-index: 1;
  color: #fff;
}
.perfil__placa .olho { color: var(--dourado-claro); }
.perfil__nome {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.9rem, 5.5vw, 2.4rem);
  color: #fff;
  line-height: 1.05;
  letter-spacing: .03em;
  margin: .15rem 0 .25rem;
}
.perfil__linha {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: rgba(255,255,255,.82);
}
.perfil__linha svg { width: 15px; height: 15px; color: var(--dourado-claro); }
.perfil p { font-size: .95rem; margin: 0; padding-inline: .75rem; color: var(--tinta-suave); line-height: 1.7; }
.perfil__botoes { display: grid; gap: .5rem; padding-inline: .75rem; }

/* No celular a matéria em destaque ocupa menos altura, para a foto respirar
   mais e para o cartão da Thati logo abaixo aparecer sem precisar rolar tanto. */
@media (max-width: 899px) {
  .hero { padding-bottom: 1.6rem; }
  .hero__grade { gap: 1rem; }
  .hero__cartao { min-height: clamp(280px, 44vh, 420px); }
  .hero__cartao::after { background: linear-gradient(180deg, rgba(44,20,24,0) 14%, rgba(44,20,24,.22) 52%, rgba(44,20,24,.66)); }
  .hero__placa { margin: .8rem; padding: 1.05rem 1.1rem 1.2rem; }
  .hero__placa h1 { margin-block: .28rem .4rem; }
  .hero__placa p { margin-bottom: .8rem; }
  .hero__meta { margin-bottom: .8rem; }
}

@media (min-width: 900px) {
  .hero__grade { grid-template-columns: 1.55fr .95fr; align-items: stretch; }
  .hero__cartao { min-height: 560px; }
  .hero__placa { margin: 1.6rem; }
}

/* ------------------------------------------------------------------
   FILTROS EM PASTILHA
------------------------------------------------------------------ */
.pastilha {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .87rem;
  color: var(--tinta);
  text-decoration: none;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
  transition: all var(--transicao);
}
.pastilha:hover { background: #fff; transform: translateY(-2px); }
.pastilha.ativa {
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.pastilha__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--dourado); flex: none; }

/* ------------------------------------------------------------------
   SEÇÕES
------------------------------------------------------------------ */
.secao { padding: 2.4rem 0; }
.secao__cabeca {
  display: flex; align-items: flex-end; gap: 1rem;
  margin-bottom: 1.3rem;
}
.secao__cabeca h2 { margin: 0; }
.secao__cabeca p { margin: .2rem 0 0; font-size: .92rem; color: var(--tinta-suave); }
.secao__link {
  margin-left: auto; flex: none;
  font-size: .87rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--vinho-claro);
}
.secao__link svg { width: 16px; height: 16px; transition: transform var(--transicao); }
.secao__link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------
   CARTÕES DE MATÉRIA
------------------------------------------------------------------ */
.grade { display: grid; gap: 1.1rem; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao);
  background: rgba(255,255,255,.55);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra);
}
.cartao:hover { transform: translateY(-5px); box-shadow: 0 30px 55px -28px rgba(20,18,15,.55); }
.cartao:active { transform: translateY(-1px) scale(.995); }
.cartao__foto {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: linear-gradient(140deg, var(--creme-2), var(--dourado-claro));
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
}
.cartao:hover .cartao__foto { transform: scale(1.05); }
.cartao__moldura { overflow: hidden; position: relative; }
.cartao__etiqueta {
  position: absolute; top: .75rem; left: .75rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--vinho);
  border: 1px solid rgba(255,255,255,.6);
}
.cartao__corpo { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.cartao__titulo {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--vinho);
  margin: 0;
  text-wrap: balance;
}
.cartao__resumo { font-size: .92rem; color: var(--tinta-suave); margin: 0; }
.cartao__rodape {
  margin-top: auto;
  display: flex; align-items: center; gap: .8rem;
  font-size: .76rem; color: var(--tinta-suave);
  padding-top: .5rem;
}
.cartao__rodape span { display: inline-flex; align-items: center; gap: .3rem; }
.cartao__rodape svg { width: 14px; height: 14px; }

/* Cartão grande, foto ao fundo (destaques) */
.cartao--foto { min-height: 340px; justify-content: flex-end; }
.cartao--foto .cartao__moldura { position: absolute; inset: 0; }
.cartao--foto .cartao__foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.cartao--foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,20,24,.05) 22%, rgba(44,20,24,.55) 58%, rgba(44,20,24,.88));
  pointer-events: none;
}
.cartao--foto .cartao__corpo { position: relative; z-index: 1; gap: .35rem; flex: none; margin-top: auto; }
.cartao--foto .cartao__rodape { margin-top: .2rem; }
.cartao--foto .cartao__titulo { color: #fff; }
.cartao--foto .olho { color: var(--dourado-claro); }
.cartao--foto .cartao__resumo, .cartao--foto .cartao__rodape { color: rgba(255,255,255,.8); }

/* Cartão horizontal, bom para listas no celular */
.cartao--linha { flex-direction: row; align-items: stretch; }
.cartao--linha .cartao__moldura { width: 38%; max-width: 160px; flex: none; }
.cartao--linha .cartao__foto { height: 100%; aspect-ratio: auto; }
.cartao--linha .cartao__corpo { padding: .85rem 1rem; }
.cartao--linha .cartao__titulo { font-size: 1.15rem; }

/* Trilho: grade comum — nada de puxar para o lado para ver o resto */
.trilho { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ------------------------------------------------------------------
   FAIXA DO APP
------------------------------------------------------------------ */
.faixa-app {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 2rem 1.5rem;
  display: grid;
  gap: 1.2rem;
  color: var(--creme);
}
.faixa-app h2 { color: #fff; margin-bottom: .3rem; }
.faixa-app p { color: rgba(255,255,255,.82); margin: 0; }
.faixa-app__brilho {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(195,173,130,.5), transparent 68%);
  top: -120px; right: -80px;
  pointer-events: none;
}
.faixa-app__lista { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.faixa-app__lista li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: rgba(255,255,255,.9); }
.faixa-app__lista svg { width: 18px; height: 18px; color: var(--dourado); flex: none; margin-top: .18rem; }
@media (min-width: 820px) {
  .faixa-app { grid-template-columns: 1.2fr .8fr; align-items: center; padding: 2.6rem; }
}

/* ------------------------------------------------------------------
   ARTIGO
------------------------------------------------------------------ */
.leitura-progresso {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 90;
  background: linear-gradient(90deg, var(--dourado), var(--vinho));
  width: 0;
  transition: width 90ms linear;
}

.artigo__capa {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  margin-bottom: -3.5rem;
}
.artigo__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artigo__capa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,20,24,.12), rgba(44,20,24,.72));
}

.artigo__cabeca {
  position: relative;
  z-index: 2;
  padding: 1.6rem 1.5rem;
  border-radius: var(--r-lg);
  margin-inline: auto;
  width: min(100% - 1.6rem, var(--leitura));
}
.artigo__cabeca h1 { margin: .4rem 0 .6rem; text-wrap: balance; }
.artigo__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  font-size: .8rem; color: var(--tinta-suave);
  border-top: 1px solid rgba(26,24,21,.12);
  padding-top: .9rem;
  margin-top: .9rem;
}
.artigo__meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.artigo__meta svg { width: 15px; height: 15px; color: var(--vinho-claro); }

.artigo__corpo { padding: 2rem 0 1rem; font-size: 1.06rem; }
.artigo__corpo > * { width: min(100% - 2.4rem, var(--leitura)); margin-inline: auto; }
.artigo__corpo p { line-height: 1.78; }
.artigo__corpo p:first-of-type::first-letter {
  font-family: "Playfair Display", serif;
  font-size: 3.4rem;
  float: left;
  line-height: .82;
  padding: .1em .12em 0 0;
  color: var(--vinho);
}
.c-titulo { margin-top: 2.4rem; }
.c-subtitulo { margin-top: 1.8rem; font-size: 1.35rem; color: var(--vinho-claro); }
.artigo__corpo a { text-decoration: underline; text-decoration-thickness: 1px; }

.c-aspas {
  margin: 2.2rem auto;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-md);
  border-left: 3px solid var(--dourado);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.c-aspas blockquote {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--vinho);
}
.c-aspas figcaption { margin-top: .7rem; font-size: .82rem; color: var(--tinta-suave); }

.c-destaque {
  margin: 2rem auto;
  padding: 1.3rem 1.4rem;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(195,173,130,.28), rgba(255,255,255,.5));
  border: 1px solid rgba(195,173,130,.5);
}
.c-destaque p { margin: 0; font-size: .98rem; }
.c-destaque__selo {
  display: inline-block;
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 1.2rem;
  color: var(--vinho);
  margin-bottom: .3rem;
}

.c-imagem { margin: 2rem auto; }
.c-imagem img { border-radius: var(--r-md); box-shadow: 0 24px 50px -30px rgba(20,18,15,.6); display: block; }
.c-imagem figcaption { margin-top: .6rem; font-size: .82rem; color: var(--tinta-suave); text-align: center; }
.c-imagem--larga { width: min(100% - 2.4rem, 900px) !important; }

/* Formato — proporção da foto (recorte). "original" não força nada, mantém
   o tamanho natural; os outros precisam de largura cheia pra o recorte valer. */
.c-imagem--vertical img, .c-imagem--horizontal img, .c-imagem--personalizado img { width: 100%; object-fit: cover; }
.c-imagem--vertical img { aspect-ratio: 4 / 5; }
.c-imagem--horizontal img { aspect-ratio: 16 / 9; }
.c-imagem--personalizado img { aspect-ratio: var(--proporcao-personalizada, 4 / 3); }

/* Posição — onde a foto fica e como o texto se comporta ao redor dela. */
.c-imagem--total { width: min(100% - 1.6rem, var(--largura)) !important; }
.c-imagem--esquerda, .c-imagem--direita {
  width: min(46%, 380px);
  margin-top: .3rem;
  margin-bottom: 1.3rem;
}
.c-imagem--esquerda { float: left; margin-right: 1.6rem; clear: left; }
.c-imagem--direita { float: right; margin-left: 1.6rem; clear: right; }
.c-imagem--esquerda figcaption, .c-imagem--direita figcaption { text-align: left; }

/* Título, subtítulo e divisória sempre começam limpos, nunca "abraçando"
   uma foto flutuante que sobrou da seção anterior. */
.c-titulo, .c-subtitulo, .c-divisor, .c-espaco, .c-ornamento { clear: both; }

.c-galeria {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 2rem auto;
  width: min(100% - 2.4rem, 900px) !important;
}
.c-galeria figure { margin: 0; }
.c-galeria img { border-radius: var(--r-sm); aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; }
.c-galeria figcaption { font-size: .76rem; color: var(--tinta-suave); margin-top: .35rem; }

.c-divisor { border: 0; border-top: 1px solid rgba(26,24,21,.16); margin: 2.4rem auto; }
.c-espaco { height: 2.6rem; }
.c-ornamento { display: flex; justify-content: center; gap: .5rem; margin: 2.6rem auto; }
.c-ornamento span { width: 6px; height: 6px; border-radius: 50%; background: var(--dourado); }
.c-ornamento span:nth-child(2) { background: var(--vinho-claro); transform: translateY(-3px); }

.c-lista { padding-left: 1.2rem; }
.c-lista li { margin-bottom: .6rem; }
.c-lista li::marker { color: var(--dourado); }

.c-video { margin: 2rem auto; aspect-ratio: 16/9; }
.c-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r-md); }

.c-botao-linha { text-align: center; }
.c-botao {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px -16px rgba(26,24,21,.9);
}

/* Barra de ações grudada no fim da tela (compartilhar/salvar) */
.acoes-artigo {
  position: sticky;
  bottom: 1.2rem;
  z-index: 50;
  display: flex;
  gap: .4rem;
  padding: .4rem;
  border-radius: 999px;
  width: fit-content;
  margin: 2rem auto 0;
}
.acoes-artigo { margin-bottom: .5rem; }

/* ------------------------------------------------------------------
   GAVETA (compartilhar, menu do celular)
------------------------------------------------------------------ */
.gaveta-fundo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(44,20,24,.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.gaveta-fundo.aberta { opacity: 1; pointer-events: auto; }

.gaveta {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  z-index: 101;
  width: min(100%, 520px);
  max-height: 86vh;
  overflow-y: auto;
  padding: .9rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,245,242,.96));
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-bottom: 0;
  box-shadow: 0 -20px 60px -30px rgba(20,18,15,.7);
}
.gaveta.aberta { transform: translate(-50%, 0); }
.gaveta__puxador {
  width: 42px; height: 4px; border-radius: 999px;
  background: rgba(26,24,21,.22);
  margin: 0 auto 1rem;
}
.gaveta h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.gaveta__opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .6rem; }
.gaveta__opcao {
  display: grid; justify-items: center; gap: .45rem;
  padding: .95rem .4rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.7);
  font-size: .76rem;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao);
}
.gaveta__opcao:hover { background: #fff; transform: translateY(-2px); }
.gaveta__opcao:active { transform: scale(.95); }
.gaveta__opcao svg { width: 24px; height: 24px; color: var(--vinho); }
.gaveta__link {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  background: rgba(26,24,21,.06);
  font-size: .82rem;
  color: var(--tinta-suave);
  word-break: break-all;
}
@media (min-width: 640px) {
  .gaveta { bottom: 1.2rem; border-radius: var(--r-xl); border-bottom: 1px solid var(--vidro-borda); }
  .gaveta { transform: translate(-50%, 130%); }
  .gaveta.aberta { transform: translate(-50%, 0); }
}

/* ------------------------------------------------------------------
   BUSCA EM CAMADA
------------------------------------------------------------------ */
.busca-camada {
  position: fixed; inset: 0; z-index: 110;
  display: grid; align-content: start; justify-items: center;
  padding: 12vh 1.2rem 2rem;
  background: rgba(249,245,242,.72);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
.busca-camada.aberta { opacity: 1; pointer-events: auto; }
.busca-caixa {
  width: min(100%, 620px);
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem .5rem 1.2rem;
  border-radius: 999px;
}
.busca-caixa input {
  flex: 1; border: 0; background: transparent;
  font: inherit; font-size: 1.05rem; color: var(--tinta);
  padding: .7rem 0;
}
.busca-caixa input:focus { outline: none; }
.busca-sugestoes { width: min(100%, 620px); margin-top: 1.2rem; display: grid; gap: .5rem; }
.busca-sugestoes .olho { margin-bottom: .2rem; }

/* ------------------------------------------------------------------
   RODAPÉ
------------------------------------------------------------------ */
.rodape {
  margin-top: 3rem;
  padding: 2.6rem 0 2.4rem;
  background: linear-gradient(180deg, transparent, rgba(26,24,21,.06));
}
.rodape__grade { display: grid; gap: 2rem; }
.rodape h4 { font-family: "Work Sans", sans-serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vinho-claro); margin-bottom: .8rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.rodape a { font-size: .92rem; text-decoration: none; color: var(--tinta); }
.rodape a:hover { color: var(--vinho); }
.rodape__base {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(26,24,21,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
  font-size: .78rem; color: var(--tinta-suave);
}
.rodape__sociais { display: flex; gap: .5rem; }
.assinatura-poty {
  display: inline-flex; align-items: center;
  opacity: .38;
  transition: opacity var(--transicao);
}
.assinatura-poty:hover { opacity: .85; }
.assinatura-poty img { height: 17px; width: auto; }
@media (min-width: 760px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ------------------------------------------------------------------
   AVISOS / ESTADOS
------------------------------------------------------------------ */
.vazio {
  text-align: center;
  padding: 3.5rem 1.5rem;
  border-radius: var(--r-lg);
}
.vazio svg { width: 46px; height: 46px; color: var(--dourado); margin-bottom: .8rem; }
.vazio h3 { margin-bottom: .4rem; }
.vazio p { color: var(--tinta-suave); margin: 0; }

.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.aviso svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.aviso--ok { background: rgba(58,122,90,.12); color: #2C6B4F; }
.aviso--erro { background: rgba(160,45,45,.1); color: #9B2C2C; }
.aviso--info { background: rgba(195,173,130,.2); color: #7A5F38; }

.paginacao { display: flex; justify-content: center; gap: .5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.paginacao a, .paginacao span {
  min-width: 44px; height: 44px;
  display: grid; place-items: center;
  padding-inline: .8rem;
  border-radius: 999px;
  font-size: .9rem;
  text-decoration: none;
  color: var(--tinta);
  background: rgba(255,255,255,.55);
  border: 1px solid var(--vidro-borda);
}
.paginacao .atual { background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo)); color: #fff; }

/* Lightbox simples da galeria */
.lupa {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(30,12,15,.88);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms;
}
.lupa.aberta { opacity: 1; pointer-events: auto; }
.lupa img { max-width: 100%; max-height: 86vh; border-radius: var(--r-md); }


/* ------------------------------------------------------------------
   EXPLORAR — a gaveta de caminhos do site
------------------------------------------------------------------ */
.explorar-atalhos { display: grid; gap: .5rem; }
.explorar-atalho {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.7);
  text-decoration: none; color: var(--tinta);
  transition: background var(--transicao), transform var(--transicao);
}
.explorar-atalho:hover { background: #fff; transform: translateX(3px); }
.explorar-atalho > svg:first-child { color: var(--vinho); flex: none; }
.explorar-atalho > svg:last-child { color: var(--dourado); margin-left: auto; flex: none; }
.explorar-atalho div { min-width: 0; }
.explorar-atalho b { display: block; font-weight: 500; font-size: .96rem; line-height: 1.3; }
.explorar-atalho span { font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; }

.explorar-temas { display: grid; gap: .4rem; }
@media (min-width: 460px) { .explorar-temas { grid-template-columns: 1fr 1fr; } }
.explorar-tema {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.55);
  text-decoration: none; color: var(--tinta);
  font-size: .9rem;
  transition: background var(--transicao);
}
.explorar-tema:hover { background: #fff; }
.explorar-tema b { font-weight: 500; }
.explorar-tema__conta { margin-left: auto; font-size: .76rem; color: var(--tinta-suave); }

/* ------------------------------------------------------------------
   CONVERSA — o chat treinado no painel
------------------------------------------------------------------ */
.conversa {
  position: fixed;
  z-index: 105;
  left: 50%;
  bottom: 0;
  width: min(100%, 440px);
  height: min(86vh, 640px);
  transform: translate(-50%, 104%);
  transition: transform 460ms cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,245,242,.97));
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-bottom: 0;
  box-shadow: 0 -24px 60px -30px rgba(20,18,15,.7);
}
.conversa.aberta { transform: translate(-50%, 0); }
@media (min-width: 640px) {
  .conversa { left: auto; right: 1.4rem; bottom: 1.4rem; border-radius: var(--r-xl); border-bottom: 1px solid var(--vidro-borda); transform: translate(0, 130%); }
  .conversa.aberta { transform: none; }
}

.conversa__topo {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  color: #fff;
  flex: none;
}
.conversa__foto { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,.5); }
.conversa__topo b { display: block; font-weight: 500; font-size: .98rem; }
.conversa__topo span { font-size: .74rem; color: rgba(255,255,255,.72); }
.conversa__estado { display: inline-flex; align-items: center; gap: .38rem; }
.pisca {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.55);
  animation: respiro-verde 2.8s ease-in-out infinite;
}
@keyframes respiro-verde {
  0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  50%      { opacity: 1;   box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) { .pisca { animation: none; opacity: 1; } }
.conversa__topo .icone-btn { margin-left: auto; background: rgba(255,255,255,.16); color: #fff; }
.conversa__topo .icone-btn:hover { background: rgba(255,255,255,.28); }

.conversa__fluxo {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(195,173,130,.12), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(26,24,21,.08), transparent 45%);
}
.fala {
  max-width: 84%;
  padding: .7rem .9rem;
  border-radius: 18px;
  font-size: .93rem;
  line-height: 1.5;
  animation: falaEntra 320ms cubic-bezier(.22,1,.36,1);
}
@keyframes falaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fala--dela {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(26,24,21,.1);
  border-bottom-left-radius: 6px;
  box-shadow: 0 6px 16px -12px rgba(20,18,15,.6);
}
.fala--minha {
  align-self: flex-end;
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  color: #fff;
  border-bottom-right-radius: 6px;
}
.fala a { color: inherit; }
.fala__links { display: grid; gap: .35rem; margin-top: .6rem; }
.fala__link {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .7rem;
  border-radius: 12px;
  background: rgba(26,24,21,.07);
  font-size: .85rem;
  text-decoration: none;
  color: var(--vinho);
  line-height: 1.35;
}
.fala__link:hover { background: rgba(26,24,21,.13); }
.fala__link svg { flex: none; width: 15px; height: 15px; }
.fala__zap {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .6rem; padding: .6rem 1rem;
  border-radius: 999px;
  background: linear-gradient(140deg, #2FA84F, #1F7F3C);
  color: #fff !important; text-decoration: none; font-size: .87rem;
}

.digitando { display: flex; gap: 4px; align-items: center; padding: .8rem .9rem; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--vinho-claro); animation: pulinho 1.1s infinite; }
.digitando i:nth-child(2) { animation-delay: .16s; }
.digitando i:nth-child(3) { animation-delay: .32s; }
@keyframes pulinho { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.conversa__atalhos {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .6rem 1rem; flex: none;
  background: linear-gradient(180deg, rgba(249,245,242,0), rgba(249,245,242,.92) 45%);
}
.conversa__atalhos:empty { display: none; }
.conversa__atalhos button {
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(26,24,21,.2);
  background: rgba(255,255,255,.75);
  font: inherit; font-size: .82rem; color: var(--vinho);
  cursor: pointer;
  transition: background var(--transicao);
}
.conversa__atalhos button:hover { background: var(--vinho); color: #fff; border-color: transparent; }

.conversa__barra {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(26,24,21,.1);
  background: rgba(255,255,255,.7);
  flex: none;
}
.conversa__barra input {
  flex: 1; min-width: 0;
  padding: .75rem 1rem;
  border: 1px solid rgba(26,24,21,.16);
  border-radius: 999px;
  background: #fff;
  font: inherit; font-size: .95rem;
}
.conversa__barra input:focus { outline: none; border-color: var(--vinho-claro); box-shadow: 0 0 0 3px rgba(155,77,88,.12); }
.conversa__enviar {
  width: 46px; height: 46px; flex: none;
  border: 0; border-radius: 50%;
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--transicao);
}
.conversa__enviar:hover { transform: scale(1.06); }
.conversa__enviar:active { transform: scale(.94); }


/* ------------------------------------------------------------------
   MENU EM GAVETA (sanduíche)
------------------------------------------------------------------ */
.menu-gaveta__topo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.menu-gaveta__topo .icone-btn { margin-left: auto; }

.menu-gaveta { display: grid; gap: .35rem; }
.menu-gaveta a, .menu-gaveta button {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: background var(--transicao), transform var(--transicao);
}
.menu-gaveta a:hover, .menu-gaveta button:hover { background: #fff; transform: translateX(3px); }
.menu-gaveta a:active, .menu-gaveta button:active { transform: scale(.99); }
.menu-gaveta svg { width: 20px; height: 20px; color: var(--vinho-claro); flex: none; }
.menu-gaveta a.ativo {
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.menu-gaveta a.ativo svg { color: var(--dourado-claro); }

/* Item do app: se destaca dos demais mesmo sem estar "ativo" no momento */
.menu-gaveta__destaque {
  background: linear-gradient(140deg, var(--dourado-claro), var(--dourado)) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #3A2318 !important;
  box-shadow: 0 10px 24px -14px rgba(195,173,130,.9);
}
.menu-gaveta__destaque svg { color: #3A2318 !important; }
.menu-gaveta__destaque.ativo {
  background: linear-gradient(140deg, var(--vinho), var(--vinho-fundo)) !important;
  color: #fff !important;
}
.menu-gaveta__destaque.ativo svg { color: var(--dourado-claro) !important; }
.menu-gaveta__selo {
  margin-left: auto;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(58,35,24,.16);
  flex: none;
}
.menu-gaveta__destaque.ativo .menu-gaveta__selo { background: rgba(255,255,255,.2); }

.menu-gaveta__pe {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(26,24,21,.12);
}
.menu-gaveta__bio {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; text-decoration: none; color: var(--vinho-claro);
}
.menu-gaveta__bio svg { width: 16px; height: 16px; }

/* ---------------- Créditos de foto ---------------- */
.c-credito {
  display: inline-block;
  font-size: .74em;
  opacity: .72;
  letter-spacing: .01em;
}
.c-imagem figcaption .c-credito,
.c-galeria figcaption .c-credito { display: block; margin-top: .15rem; }

.artigo__capa .artigo__credito {
  position: absolute;
  right: .8rem; top: .8rem;
  z-index: 2;
  font-size: .7rem;
  color: rgba(255,255,255,.72);
  background: rgba(20,8,10,.35);
  padding: .2rem .55rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ==================================================================
   PÁGINA INICIAL — LAYOUT EDITORIAL (ThatiLiraOficial)
   Blocos de cor firmes no lugar de vidro/gradiente nesta parte do
   site: a ideia é ler como revista impressa, não como app.
================================================================== */

/* ---------- Faixa utilitária preta (topo do topo) ---------- */
.topo__utilitaria { background: #000; color: #fff; }
.topo__utilitaria-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  font-family: "Work Sans", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topo__utilitaria-lado { display: flex; align-items: center; gap: 1.1rem; }
.topo__utilitaria a { color: #fff; text-decoration: none; }
.topo__utilitaria a:hover { color: var(--dourado-claro); }
.topo__utilitaria svg { width: 15px; height: 15px; display: block; }
.topo__siga { color: rgba(255,255,255,.6); letter-spacing: .08em; }

/* ---------- Links de navegação reais ao lado da logo ---------- */
.topo__categorias { display: inline-flex; }

/* ---------- Busca + compartilhar (abaixo da foto de capa) ---------- */
.mastro { padding: 1.6rem 0; border-bottom: 1px solid var(--vidro-borda); }
.mastro__grade { display: grid; gap: 1.3rem; justify-items: center; text-align: center; }
.mastro__busca-bloco, .mastro__compartilhar-bloco { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.mastro__busca { width: min(100%, 420px); border: 1px solid var(--vidro-borda); background: var(--creme); }
.mastro__busca input { width: 100%; text-align: center; border: 0; background: none; outline: none; font: inherit; font-size: .92rem; color: var(--tinta); padding: .65rem .8rem; }
.mastro__icones { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.mastro__icones a, .mastro__icones button { display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta); }
.mastro__icones svg { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .mastro__grade { grid-template-columns: 1fr 1fr; max-width: 720px; margin-inline: auto; }
}

/* ---------- Capa: a foto da autora, grande, antes de tudo ---------- */
.capa-autora { position: relative; overflow: hidden; }
.capa-autora__foto { width: 100%; height: 78vh; min-height: 420px; max-height: 720px; object-fit: cover; object-position: center 24%; display: block; }
.capa-autora::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.capa-autora__legenda {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.6rem 1.2rem 2rem;
  text-align: center;
}
.capa-autora__logo { height: 56px; width: auto; margin: 0 auto .6rem; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.capa-autora__legenda p { margin: 0; color: #fff; font-size: .92rem; letter-spacing: .03em; }
@media (min-width: 900px) {
  /* Em telas largas a foto (retrato) precisa cobrir uma caixa bem mais
     larga que alta — o corte vertical é grande, então a posição importa:
     32% mantém o rosto inteiro (do topo da testa ao queixo) visível. */
  .capa-autora__foto { height: 85vh; max-height: 820px; object-position: center 32%; }
  .capa-autora__logo { height: 76px; }
  .capa-autora__legenda p { font-size: 1.05rem; }
}

/* ---------- Carrossel: grade com setas no desktop, pilha no celular ---------- */
.carrossel { padding: 1.8rem 0; }
.carrossel__caixa { position: relative; display: flex; align-items: center; gap: .6rem; }
.carrossel__trilho { display: grid; gap: 1.4rem; grid-template-columns: 1fr; flex: 1; min-width: 0; }
.carrossel__item { display: block; text-decoration: none; color: var(--tinta); }
.carrossel__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: .8rem; }
.carrossel__item h3 { font-size: 1.15rem; margin: .25rem 0 0; }
.carrossel__seta {
  display: none;
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--vidro-borda);
  border-radius: 50%;
  background: var(--creme);
  color: var(--tinta);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px) {
  .carrossel__seta { display: flex; }
  .carrossel__trilho {
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 1.4rem) / 3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .carrossel__trilho::-webkit-scrollbar { display: none; }
  .carrossel__item { scroll-snap-align: start; }
}

/* ---------- Destaque editorial (matéria da vez) ---------- */
.destaque-editorial { padding: 1.6rem 0 2rem; }
.destaque-editorial__grade { display: grid; gap: 0; border-radius: var(--r-lg); overflow: hidden; }
.destaque-editorial__foto-link { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--vinho-fundo); }
.destaque-editorial__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque-editorial__selo {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, -50%) rotate(-12deg);
  width: 92px; height: 92px;
  background: var(--creme);
  border-radius: 50%;
  color: var(--tinta);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.4);
}
@media (min-width: 900px) {
  .destaque-editorial__selo { left: 0; top: 50%; transform: translate(-46%, -50%) rotate(-12deg); }
}

/* ---------- O arquivo: duas colunas assimétricas ---------- */
.arquivo-grade {
  display: grid;
  gap: 1.6rem;
  grid-template-areas: "titulo" "c1" "c2";
}
.arquivo-titulo { grid-area: titulo; margin: 0; }
.arquivo-cartao { grid-area: c1; display: block; text-decoration: none; color: var(--tinta); }
.arquivo-cartao--c2 { grid-area: c2; }
.arquivo-cartao__moldura { position: relative; margin-bottom: .9rem; }
.arquivo-cartao__moldura img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.arquivo-cartao__seta {
  position: absolute; right: 1rem; bottom: -19px;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--tinta-suave);
  color: var(--creme);
}
.arquivo-cartao__seta svg { width: 16px; height: 16px; }
.arquivo-cartao h3 { font-size: 1.3rem; margin: .3rem 0 0; }
@media (min-width: 900px) {
  .arquivo-grade {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "c1 titulo" "c1 c2";
    align-items: start;
    gap: 2.4rem;
  }
  .arquivo-cartao--c1 { align-self: stretch; }
  .arquivo-cartao--c1 .arquivo-cartao__moldura img { aspect-ratio: 3/4; }
}
.destaque-editorial__painel {
  background: var(--vinho-fundo);
  color: var(--creme);
  padding: 1.8rem 1.4rem 2rem;
  display: grid;
  gap: .7rem;
  align-content: center;
}
.destaque-editorial__painel .olho { color: var(--dourado-claro); }
.destaque-editorial__painel h1 {
  color: #fff;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.18;
  margin: 0;
}
.destaque-editorial__painel p { color: rgba(249,245,242,.82); margin: 0; line-height: 1.65; }
.destaque-editorial__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .84rem; color: rgba(249,245,242,.7); }
.destaque-editorial__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.destaque-editorial__meta svg { width: 15px; height: 15px; }
.destaque-editorial__painel .btn { justify-self: start; margin-top: .3rem; }
@media (min-width: 900px) {
  .destaque-editorial__grade { grid-template-columns: 1.3fr 1fr; }
  .destaque-editorial__foto-link { aspect-ratio: auto; }
  .destaque-editorial__painel { padding: 2.6rem 2.4rem; }
}

/* ---------- Assinatura da autora (byline discreto) ---------- */
.assinatura-autora { padding: .3rem 0 1.8rem; }
.assinatura-autora__grade {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .9rem 1.1rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(44,44,44,.1);
  border-bottom: 1px solid rgba(44,44,44,.1);
}
.assinatura-autora__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.assinatura-autora__foto--vazia {
  display: grid; place-items: center;
  background: var(--vinho);
  color: var(--creme);
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
}
.assinatura-autora__nome {
  display: block;
  font-family: var(--fonte-logo);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--vinho);
  margin-bottom: .2rem;
}
.assinatura-autora__texto p { margin: 0; font-size: .88rem; color: var(--tinta-suave); line-height: 1.5; max-width: 62ch; }
.assinatura-autora__acoes { grid-column: 1 / -1; }
.assinatura-autora__acoes .btn { width: 100%; }
@media (min-width: 900px) {
  .assinatura-autora__grade { grid-template-columns: auto 1fr auto; }
  .assinatura-autora__acoes { grid-column: auto; }
  .assinatura-autora__acoes .btn { width: auto; }
}

/* ---------- Cartão variante "arquivo": seta circular ---------- */
.cartao__seta {
  position: absolute;
  right: .8rem; bottom: .8rem;
  z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--vinho);
  box-shadow: 0 10px 20px -10px rgba(0,0,0,.4);
  transform: scale(.85);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.cartao__seta svg { width: 17px; height: 17px; }
.cartao--arquivo:hover .cartao__seta, .cartao--arquivo:focus-visible .cartao__seta { opacity: 1; transform: scale(1); }
.cartao--arquivo .cartao__etiqueta {
  background: var(--creme);
  color: var(--vinho-fundo);
  font-weight: 600;
}

/* ---------- Título "O arquivo" no estilo THE ARCHIVE ---------- */
.secao__cabeca--arquivo { align-items: baseline; }
.titulo-arquivo {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  letter-spacing: .01em;
  margin: 0;
}

/* ---------- Botão reto (chapado, sem gradiente nem pílula) ---------- */
.btn-reto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .3rem;
  padding: .85em 1.7em;
  background: var(--tinta);
  color: var(--creme);
  font-family: "Work Sans", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao);
}
.btn-reto:hover { background: var(--vinho-fundo); transform: translateY(-2px); }

/* ---------- Faixa de destaque (app ou chat) — bloco de cor firme, ao lado de uma foto ---------- */
.faixa-destaque {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  display: grid;
  gap: 0;
}
.faixa-destaque__texto {
  padding: 2rem 1.6rem;
  background: var(--dourado);
  display: grid;
  align-content: center;
  gap: .5rem;
}
.faixa-destaque__texto .olho { color: var(--vinho-fundo); }
.faixa-destaque__texto h2 { color: var(--tinta); margin: 0; }
.faixa-destaque__texto p { color: rgba(44,44,44,.75); margin: 0 0 .3rem; }
.faixa-destaque__foto { width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: center 20%; }
@media (min-width: 900px) {
  .faixa-destaque { grid-template-columns: 1.1fr 1fr; }
  .faixa-destaque__texto { padding: 3rem; }
}

/* ==================================================================
   REDESENHO EDITORIAL — paleta, tipografia e componentes
   Publicação impressa em tela: tinta quase preta sobre creme, serifada
   de exibição + geométrica de apoio, linhas finas no lugar de vidro,
   gradiente e pílula. Só o painel de destaque leva cor (areia).
   Os nomes das variáveis não mudaram — só os valores — então qualquer
   regra do arquivo que já usa var(--vinho)/var(--dourado)/etc. atualiza
   sozinha. Cores definitivas entram depois, pelo painel.
================================================================== */
:root {
  --vinho:         #1A1815;
  --vinho-claro:   #55504A;
  --vinho-fundo:   #0E0D0C;
  --dourado:       #C3AD82;
  --dourado-claro: #DDCBA8;
  --creme:         #F6F2EA;
  --creme-2:       #EFE8DA;
  --tinta:         #1C1A17;
  --tinta-suave:   #6B665F;

  --vidro-fundo:  var(--creme);
  --vidro-borda:  rgba(26,24,21,.16);
  --vidro-luz:    rgba(255,255,255,0);
  --vidro-sombra: none;
  --desfoque:     none;

  --r-xs: 0px; --r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 3px;
  --fonte-logo: "Playfair Display", Georgia, serif;
}

/* Sem manchas de cor animadas atrás do conteúdo — fundo plano, como papel. */
.atmosfera { display: none; }

body { font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

h1, h2, h3, h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta);
}
a { text-decoration-color: rgba(26,24,21,.3); }
a:hover { color: var(--tinta); }

.olho {
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  color: var(--tinta-suave);
}

.assinatura { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; }

/* Vidro → superfície plana com fio fino, sem desfoque nem brilho especular */
.vidro {
  background: var(--creme);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-sm);
  box-shadow: none;
}
.vidro::before { content: none; }
.vidro--escuro, .vidro--vinho {
  background: var(--vinho-fundo);
  border-color: rgba(255,255,255,.14);
  color: var(--creme);
  box-shadow: none;
}
.vidro--escuro::before { content: none; }

/* Botões: retos, chapados, sem brilho correndo nem gradiente */
.btn {
  --btn-fundo: var(--tinta);
  --btn-cor: var(--creme);
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--btn-fundo);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--btn-fundo);
  border-radius: 0;
  box-shadow: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: none; background: var(--vinho-claro); border-color: var(--vinho-claro); }
.btn::after { content: none; }
.btn--principal { --btn-fundo: var(--tinta); --btn-cor: var(--creme); border-color: var(--tinta); }
.btn--dourado { --btn-fundo: var(--dourado); --btn-cor: var(--tinta); border-color: var(--dourado); }
.btn--dourado:hover { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.btn--fantasma { --btn-fundo: transparent; --btn-cor: var(--tinta); border-color: var(--tinta); }

.icone-btn {
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--vidro-borda);
  color: var(--tinta);
}
.icone-btn:hover { background: rgba(26,24,21,.06); }

.pastilha {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--vidro-borda);
  color: var(--tinta);
}
.pastilha:hover { background: rgba(26,24,21,.05); transform: none; }
.pastilha.ativa { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.pastilha__ponto { border-radius: 50%; }

.cartao {
  border-radius: var(--r-sm);
  box-shadow: none;
  border: 1px solid var(--vidro-borda);
}
.cartao:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(20,18,15,.35); }
.cartao__foto { border-radius: 0; }

/* Cabeçalho: linha fina no lugar do vidro em pílula */
.topo__barra {
  border-radius: 0;
  border-bottom: 1px solid var(--vidro-borda);
  background: var(--creme);
  padding-inline: 0;
}
.busca-dicas { border-radius: var(--r-sm); }

.setor { border-radius: 0; box-shadow: none; border: 1px solid var(--vidro-borda); }
.setor__legenda { border-radius: 0; }
.destaque-editorial__grade { border-radius: 0; }
.faixa-destaque { border-radius: 0; }

/* ---------- Gavetas (menu, compartilhar, explorar) no mesmo estilo editorial ---------- */
.gaveta-fundo { background: rgba(20,18,15,.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.gaveta {
  border-radius: 0;
  background: var(--creme);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--vidro-borda);
  border-bottom: 0;
  box-shadow: 0 -20px 45px -30px rgba(20,18,15,.5);
}
.gaveta h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
.gaveta__puxador { background: rgba(26,24,21,.25); }
.gaveta__opcao {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--vidro-borda);
}
.gaveta__opcao:hover { background: rgba(26,24,21,.05); }
.gaveta__opcao svg { color: var(--tinta); }
.gaveta__link { border-radius: 0; background: rgba(26,24,21,.05); }
@media (min-width: 640px) { .gaveta { border-radius: 0; } }

.menu-gaveta__topo .marca img { height: 34px; width: auto; }
.menu-gaveta a, .menu-gaveta button {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--vidro-borda);
  font-family: "Work Sans", sans-serif;
}
.menu-gaveta a:hover, .menu-gaveta button:hover { background: rgba(26,24,21,.05); transform: none; }
.menu-gaveta svg { color: var(--tinta-suave); }
.menu-gaveta a.ativo {
  background: var(--tinta) !important;
  color: var(--creme) !important;
  border-color: var(--tinta) !important;
}
.menu-gaveta a.ativo svg { color: var(--creme) !important; }
.menu-gaveta__destaque {
  background: var(--dourado) !important;
  border-color: var(--dourado) !important;
  color: var(--tinta) !important;
  box-shadow: none;
}
.menu-gaveta__destaque svg { color: var(--tinta) !important; }
.menu-gaveta__destaque.ativo {
  background: var(--tinta) !important;
  color: var(--creme) !important;
  border-color: var(--tinta) !important;
}
.menu-gaveta__destaque.ativo svg { color: var(--creme) !important; }
.menu-gaveta__selo { border-radius: 0; background: rgba(28,26,23,.14); }
.menu-gaveta__destaque.ativo .menu-gaveta__selo { background: rgba(255,255,255,.2); }

.explorar-atalho, .explorar-tema { border-radius: 0 !important; }

/* ---------- Formulário de contato ---------- */
.contato-form { display: grid; gap: 1.1rem; }
.contato-dupla { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.contato-campo { display: grid; gap: .4rem; }
.contato-campo span { font-family: "Work Sans", sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.contato-campo input, .contato-campo select, .contato-campo textarea {
  width: 100%;
  border: 1px solid var(--vidro-borda);
  background: var(--creme);
  font: inherit;
  font-size: .95rem;
  color: var(--tinta);
  padding: .75rem .9rem;
  border-radius: 0;
}
.contato-campo input:focus, .contato-campo select:focus, .contato-campo textarea:focus { outline: none; border-color: var(--tinta); }
.contato-campo textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.contato-erro { padding: .8rem 1rem; border: 1px solid var(--vinho); color: var(--vinho); margin-bottom: 1rem; }
.contato-recebido { padding: 2rem; border: 1px solid var(--vidro-borda); text-align: center; }
.contato-recebido h3 { margin-bottom: .5rem; }
@media (min-width: 640px) {
  .contato-dupla { grid-template-columns: 1fr 1fr; }
}

/* ---------- Pop-up de confirmação (contato) ---------- */
.gaveta--curta { max-height: none; }
.contato-ok { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 1.2rem .5rem 1.6rem; }
.contato-ok__marca { color: var(--tinta); }
.contato-ok__marca svg { width: 40px; height: 40px; }
.contato-ok h3 { margin: 0; }
.contato-ok p { margin: 0; color: var(--tinta-suave); max-width: 40ch; }
.contato-ok .btn-reto { margin-top: .6rem; }