/* ==========================================================================
   Devatouch — sistema visual
   Paleta: verde-sálvia, rosa-terra, creme e terracota
   ========================================================================== */

:root {
  /* superfícies */
  --marca: #ff4500;
  --marca-escuro: #d63a00;

  --creme: #faf5ec;
  --creme-2: #f4ecdd;
  --creme-3: #ece0cc;
  --papel: #fffdf8;

  /* verde-sálvia */
  --salvia-900: #23302a;
  --salvia-800: #2e3a2f;
  --salvia-700: #3f5040;
  --salvia-600: #566a54;
  --salvia-500: #6d8168;
  --salvia-400: #8b9d84;
  --salvia-300: #a8b79e;
  --salvia-200: #c6d0bb;
  --salvia-100: #e2e7da;

  /* terracota */
  --terracota-700: #7f3719;
  --terracota-600: #9c4726;
  --terracota-500: #c05a34;
  --terracota-400: #d47a55;
  --terracota-300: #e5a382;
  --terracota-100: #f6e0d3;

  /* rosa-terra */
  --rosa-600: #a86257;
  --rosa-500: #ce9188;
  --rosa-400: #dfada5;
  --rosa-300: #ebc8c0;
  --rosa-100: #f8e8e4;

  /* texto */
  --tinta: #26302a;
  --tinta-media: #4b564d;
  --tinta-suave: #6b7568;

  /* semânticos */
  --alerta: #a8451f;
  --alerta-fundo: #fbe9e0;
  --cuidado: #8a6b17;
  --cuidado-fundo: #f8f0d8;
  --ok: #40684a;
  --ok-fundo: #e6f0e3;

  /* estrutura */
  --raio-p: 8px;
  --raio-m: 16px;
  --raio-g: 26px;
  --raio-organico: 32px 18px 30px 20px;
  --sombra-1: 0 1px 2px rgba(38, 48, 42, 0.05), 0 4px 14px -6px rgba(38, 48, 42, 0.12);
  --sombra-2: 0 2px 6px rgba(38, 48, 42, 0.06), 0 16px 34px -14px rgba(38, 48, 42, 0.2);
  --sombra-3: 0 30px 70px -30px rgba(38, 48, 42, 0.34);
  --borda: 1px solid rgba(86, 106, 84, 0.16);
  --borda-forte: 1px solid rgba(86, 106, 84, 0.3);

  --largura: 1200px;
  --leitura: 70ch;

  --fonte-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    "Times New Roman", serif;
  --fonte-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* cores da arte vetorial */
  --art-fundo: #efe6d5;
  --art-fundo-escuro: #3f5040;
  --art-fundo-quente: #f6e6cf;
  --art-fundo-frio: #e6ebe6;
  --art-folha-1: #5f7358;
  --art-folha-2: #7d9174;
  --art-folha-3: #9db092;
  --art-folha-mole: #c3c69a;
  --art-rosa: #ce9188;
  --art-rosa-claro: #ebc8c0;
  --art-caule: #6d8168;
  --art-vaso: #c05a34;
  --art-vaso-claro: #d8845d;
  --art-vaso-escuro: #7f3719;
  --art-esmalte: #a8b79e;
  --art-esmalte-claro: #c6d0bb;
  --art-plastico: #b9b2a4;
  --art-terra: #5e4a38;
  --art-terra-umida: #45362a;
  --art-pedra: #b1a58e;
  --art-pedra-clara: #c8bda6;
  --art-perlita: #e3ddd0;
  --art-creme: #faf5ec;
  --art-chao: #e0d3bb;
  --art-agua: #8fabb4;
  --art-luz: #ffe9b8;
  --art-sol: #f0b95e;
  --art-raio: #fbeccb;
  --art-linha: #6b7568;
  --art-tinta: #4b564d;
  --art-metal: #b6bcb6;
  --art-metal-escuro: #7d867d;
  --art-madeira: #a97f52;
  --art-cerda: #ddceae;
  --art-poeira: #c9bda6;
  --art-vidro: #eef3ee;
  --art-queimado: #cf9a6d;
  --art-queimado-2: #a8663c;
  --art-podre: #4a3b34;
  --art-praga: #e4d9c2;
  --art-mofo: #cfd6c4;
  --art-vento: #a8b79e;
  --art-gelo: #a9c1c9;
  --art-manta: #dfe4dd;
  --art-cobertura: #b7a98f;
  --art-tela: #8b9d84;
  --art-sal: #e9e2d1;
  --art-adubo: #b6c28d;
  --art-calo: #d9c8a8;
  --art-raiz: #cbb79a;
  --art-espinho: #7f6a4a;
  --art-pet: #b98f63;
  --art-alerta: #a8451f;
}

/* --------------------------------------------------------------- base ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.72;
  color: var(--tinta);
  background-color: var(--creme);
  background-image:
    radial-gradient(1100px 620px at 88% -6%, rgba(235, 200, 192, 0.32), transparent 62%),
    radial-gradient(900px 560px at 4% 8%, rgba(198, 208, 187, 0.34), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(240, 227, 205, 0.6), transparent 60%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--terracota-600);
  text-decoration-color: rgba(192, 90, 52, 0.35);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover {
  color: var(--terracota-700);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--terracota-500);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.16;
  color: var(--salvia-900);
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.05rem, 1.5rem + 2.4vw, 3.3rem);
}

h2 {
  font-size: clamp(1.55rem, 1.28rem + 1.1vw, 2.15rem);
}

h3 {
  font-size: clamp(1.22rem, 1.1rem + 0.5vw, 1.42rem);
}

h4 {
  font-size: 1.08rem;
}

p {
  margin: 0 0 1.15em;
}

ul,
ol {
  margin: 0 0 1.3em;
  padding-left: 1.35em;
}

li {
  margin-bottom: 0.5em;
}

li::marker {
  color: var(--salvia-500);
}

strong {
  color: var(--salvia-900);
  font-weight: 650;
}

blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 3px solid var(--rosa-400);
  font-family: var(--fonte-titulo);
  font-size: 1.14em;
  color: var(--salvia-800);
}

hr {
  border: none;
  border-top: var(--borda);
  margin: 2.6em 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0 0 1.6em;
}

caption {
  caption-side: bottom;
  padding-top: 0.7em;
  font-size: 0.86rem;
  color: var(--tinta-suave);
  text-align: left;
}

th,
td {
  padding: 0.7em 0.85em;
  border-bottom: var(--borda);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--fonte-texto);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salvia-700);
  background: rgba(226, 231, 218, 0.55);
}

/* ------------------------------------------------------------ estrutura -- */

.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 0.7em 1.1em;
  background: var(--salvia-800);
  color: var(--creme);
  border-radius: var(--raio-p);
  text-decoration: none;
  transition: top 0.2s ease;
}

.pular:focus {
  top: 16px;
  color: var(--creme);
}

.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.6rem);
}

.env-estreito {
  max-width: 820px;
}

main {
  display: block;
  min-height: 50vh;
}

/* -------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 245, 236, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(86, 106, 84, 0.12);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  min-height: 74px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--marca);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-simbolo {
  width: 30px;
  height: 33px;
  flex: none;
}

.logo-texto {
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--marca);
  line-height: 1;
}

a.logo:hover {
  color: var(--marca-escuro);
}

a.logo:hover .logo-texto {
  color: var(--marca-escuro);
}

.nav-principal {
  margin-left: auto;
}

.nav-lista {
  display: flex;
  align-items: center;
  gap: clamp(0.2rem, 1.2vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-lista a {
  display: block;
  padding: 0.5em 0.72em;
  border-radius: 999px;
  font-size: 0.945rem;
  font-weight: 550;
  color: var(--salvia-700);
  text-decoration: none;
  white-space: nowrap;
}

.nav-lista a:hover {
  background: rgba(198, 208, 187, 0.5);
  color: var(--salvia-900);
}

.nav-lista a[aria-current="page"] {
  color: var(--terracota-600);
  background: var(--terracota-100);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.busca-topo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  background: var(--papel);
  border: var(--borda-forte);
  border-radius: 999px;
  padding: 0.28em 0.35em 0.28em 0.9em;
  box-shadow: var(--sombra-1);
}

.busca-topo input {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--tinta);
  width: 148px;
  padding: 0.3em 0;
}

.busca-topo input::placeholder {
  color: var(--tinta-suave);
}

.busca-topo input:focus {
  outline: none;
}

.busca-topo:focus-within {
  border-color: var(--terracota-400);
  box-shadow: 0 0 0 3px rgba(212, 122, 85, 0.2);
}

.icone-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: var(--salvia-800);
  color: var(--creme);
  cursor: pointer;
  flex: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.fav-conta {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--creme);
}

.icone-btn:hover {
  background: var(--terracota-600);
  transform: scale(1.05);
}

.icone-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.abrir-menu {
  display: none;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.9em;
  border: var(--borda-forte);
  border-radius: 999px;
  background: var(--papel);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--salvia-800);
  cursor: pointer;
}

.abrir-menu svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ------------------------------------------------------------ migalhas -- */

.migalhas {
  padding-top: 1.5rem;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}

.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.migalhas li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.migalhas li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--salvia-300);
  display: inline-block;
}

.migalhas a {
  color: var(--tinta-media);
  text-decoration: none;
}

.migalhas a:hover {
  color: var(--terracota-600);
  text-decoration: underline;
}

.migalhas [aria-current="page"] {
  color: var(--salvia-800);
  font-weight: 550;
}

/* ------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  padding: 0.34em 0.85em;
  border-radius: 999px;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.etiqueta-cat {
  background: var(--salvia-100);
  color: var(--salvia-700);
  border: 1px solid rgba(86, 106, 84, 0.16);
}

a.etiqueta-cat:hover {
  background: var(--salvia-200);
  color: var(--salvia-900);
}

.etiqueta-nivel {
  background: var(--rosa-100);
  color: var(--rosa-600);
  border: 1px solid rgba(168, 98, 87, 0.2);
}

.etiqueta-nivel::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.etiqueta-nivel[data-nivel="intermediario"]::after,
.etiqueta-nivel[data-nivel="avancado"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-left: -0.24em;
}

.etiqueta-nivel[data-nivel="avancado"] {
  padding-right: 0.75em;
}

.meta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}

.meta-linha .ponto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--salvia-300);
}

/* ---------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.82em 1.5em;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 0.985rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-principal {
  background: linear-gradient(160deg, var(--terracota-500), var(--terracota-600));
  color: #fff8f2;
  box-shadow: 0 2px 4px rgba(127, 55, 25, 0.22), 0 14px 30px -12px rgba(127, 55, 25, 0.5);
}

.btn-principal:hover {
  color: #fff8f2;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(127, 55, 25, 0.24), 0 20px 38px -14px rgba(127, 55, 25, 0.55);
}

.btn-secundario {
  background: transparent;
  color: var(--salvia-800);
  box-shadow: inset 0 0 0 1.5px rgba(86, 106, 84, 0.32);
}

.btn-secundario:hover {
  color: var(--salvia-900);
  background: rgba(226, 231, 218, 0.6);
  transform: translateY(-2px);
}

.btn-fantasma {
  background: var(--papel);
  color: var(--salvia-800);
  box-shadow: var(--sombra-1);
}

.btn-fantasma:hover {
  color: var(--terracota-600);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: clamp(2.4rem, 4vw, 4.4rem) 0 clamp(3rem, 5vw, 5rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -30% auto 46%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(235, 200, 192, 0.4), transparent 72%);
  pointer-events: none;
}

.hero-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4rem);
}

.hero-texto {
  position: relative;
  z-index: 2;
}

.hero-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 1em 0.42em 0.6em;
  margin-bottom: 1.4rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.8);
  border: var(--borda);
  box-shadow: var(--sombra-1);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--salvia-700);
}

.hero-selo .ramo {
  width: 40px;
  color: var(--salvia-400);
}

.hero h1 {
  margin-bottom: 0.7em;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem);
  letter-spacing: -0.022em;
}

.hero h1 em {
  font-style: normal;
  color: var(--terracota-600);
  position: relative;
  white-space: nowrap;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  background: var(--rosa-300);
  opacity: 0.55;
  border-radius: 999px;
  z-index: -1;
}

.hero-resumo {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem);
  color: var(--tinta-media);
  margin-bottom: 1.9rem;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.2rem;
}

.hero-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-top: 1.6rem;
  border-top: var(--borda);
}

.hero-numero {
  display: flex;
  flex-direction: column;
}

.hero-numero b {
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--salvia-800);
  line-height: 1.1;
}

.hero-numero span {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.hero-palco {
  position: relative;
  z-index: 1;
}

.hero-art {
  width: 100%;
  filter: drop-shadow(0 34px 44px rgba(88, 66, 44, 0.22));
  animation: flutuar 11s ease-in-out infinite;
}

@keyframes flutuar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.hero-nota {
  position: absolute;
  right: 2%;
  bottom: 6%;
  max-width: 232px;
  padding: 1rem 1.15rem;
  background: rgba(255, 253, 248, 0.94);
  border: var(--borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-2);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tinta-media);
}

.hero-nota b {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  color: var(--salvia-800);
  margin-bottom: 0.25em;
}

/* --------------------------------------------------------------- seções -- */

.secao {
  padding: clamp(2.6rem, 5vw, 4.6rem) 0;
  position: relative;
}

.secao-tom {
  background: linear-gradient(180deg, rgba(226, 231, 218, 0.42), rgba(250, 245, 236, 0));
}

.secao-tom-rosa {
  background: linear-gradient(180deg, rgba(248, 232, 228, 0.6), rgba(250, 245, 236, 0));
}

.secao-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.secao-cabeca h2 {
  margin-bottom: 0.28em;
  max-width: 26ch;
}

.secao-cabeca p {
  margin: 0;
  max-width: 54ch;
  color: var(--tinta-media);
}

.secao-supra {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracota-600);
  margin-bottom: 0.7em;
}

.link-mais {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.link-mais svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.link-mais:hover svg {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- cards -- */

.grade {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}

.grade-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grade-3 {
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
}

.grade-4 {
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: rgba(192, 90, 52, 0.28);
}

.card-arte {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(158deg, var(--creme-2), var(--creme-3));
  overflow: hidden;
}

.card-arte .arte {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card-arte .arte {
  transform: scale(1.055);
}

.card-arte-etiquetas {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  z-index: 2;
}

.card-arte-etiquetas .etiqueta {
  background: rgba(255, 253, 248, 0.93);
  backdrop-filter: blur(6px);
}

.card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.4rem 1.4rem;
}

.card-corpo h3 {
  font-size: 1.16rem;
  line-height: 1.28;
  margin-bottom: 0.45em;
}

.card-corpo h3 a {
  color: inherit;
  text-decoration: none;
}

.card-corpo h3 a:hover {
  color: var(--terracota-600);
}

.card-corpo p {
  font-size: 0.935rem;
  line-height: 1.6;
  color: var(--tinta-media);
  margin-bottom: 1em;
}

.card-pe {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: var(--borda);
  font-size: 0.83rem;
  color: var(--tinta-suave);
}

/* card compacto em lista */
.card-linha {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-1);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.card-linha:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
}

.card-linha .card-arte {
  border-radius: 12px;
  aspect-ratio: 4 / 3;
}

.card-linha h3 {
  font-size: 1.06rem;
  margin-bottom: 0.3em;
}

.card-linha h3 a {
  color: inherit;
  text-decoration: none;
}

.card-linha h3 a:hover {
  color: var(--terracota-600);
}

.card-linha p {
  margin: 0 0 0.55em;
  font-size: 0.9rem;
  color: var(--tinta-media);
}

/* destaque editorial: composição em camadas */
.destaque {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.destaque-arte {
  position: relative;
  background: linear-gradient(150deg, var(--salvia-100), var(--creme-3));
  min-height: 300px;
}

.destaque-arte .arte {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destaque-corpo {
  padding: clamp(1.6rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.destaque-corpo h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.95rem);
  margin-bottom: 0.5em;
}

.destaque-corpo h3 a {
  color: inherit;
  text-decoration: none;
}

.destaque-corpo h3 a:hover {
  color: var(--terracota-600);
}

.destaque-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

/* categoria em pastilha */
.pastilhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pastilha {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.62em 1.15em;
  border-radius: 999px;
  background: var(--papel);
  border: var(--borda);
  box-shadow: var(--sombra-1);
  font-size: 0.93rem;
  font-weight: 550;
  color: var(--salvia-800);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pastilha:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 90, 52, 0.32);
  color: var(--terracota-600);
}

.pastilha b {
  font-weight: 600;
  color: var(--tinta-suave);
  font-size: 0.82rem;
}

/* cartão de categoria */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-organico);
  box-shadow: var(--sombra-1);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.cat-card::after {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(198, 208, 187, 0.5), transparent);
  transition: transform 0.4s ease;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
}

.cat-card:hover::after {
  transform: scale(1.25);
}

.cat-card .arte {
  width: 82px;
  height: 62px;
  margin-bottom: 0.9rem;
  position: relative;
  z-index: 1;
}

.cat-card h3 {
  position: relative;
  z-index: 1;
  font-size: 1.12rem;
  margin-bottom: 0.35em;
}

.cat-card p {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: var(--tinta-media);
  margin: 0 0 1em;
}

.cat-card span.cat-conta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terracota-600);
}

/* ------------------------------------------------------------- favoritos */

.btn-fav {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--borda);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--rosa-600);
  cursor: pointer;
  flex: none;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-fav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  transition: fill 0.2s ease;
}

.btn-fav:hover {
  transform: scale(1.09);
  border-color: var(--rosa-400);
}

.btn-fav[aria-pressed="true"] {
  background: var(--rosa-100);
  border-color: var(--rosa-400);
}

.btn-fav[aria-pressed="true"] svg {
  fill: var(--rosa-500);
}

.card-arte .btn-fav {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  box-shadow: var(--sombra-1);
}

/* ------------------------------------------------------------ ferramentas */

.painel-filtros {
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  margin-bottom: 2rem;
}

.campo-busca {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.7em 0.55em 1.1em;
  background: var(--creme);
  border: var(--borda-forte);
  border-radius: 999px;
  margin-bottom: 1.3rem;
}

.campo-busca svg {
  width: 19px;
  height: 19px;
  flex: none;
  stroke: var(--salvia-500);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.campo-busca input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--tinta);
  padding: 0.3em 0;
}

.campo-busca input:focus {
  outline: none;
}

.campo-busca:focus-within {
  border-color: var(--terracota-400);
  box-shadow: 0 0 0 3px rgba(212, 122, 85, 0.18);
}

.limpar-busca {
  border: none;
  background: none;
  padding: 0.35em;
  color: var(--tinta-suave);
  cursor: pointer;
  border-radius: 50%;
  display: none;
  place-items: center;
}

.limpar-busca svg {
  stroke: currentColor;
  width: 16px;
  height: 16px;
}

.limpar-busca[data-visivel="1"] {
  display: grid;
}

.filtro-grupo {
  margin-bottom: 1.15rem;
}

.filtro-grupo:last-child {
  margin-bottom: 0;
}

.filtro-titulo {
  display: block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.7em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  padding: 0.42em 0.95em;
  border: 1.4px solid rgba(86, 106, 84, 0.22);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.885rem;
  color: var(--salvia-700);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.chip:hover {
  background: var(--salvia-100);
  color: var(--salvia-900);
}

.chip[aria-pressed="true"] {
  background: var(--salvia-700);
  border-color: var(--salvia-700);
  color: var(--creme);
}

.filtros-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: var(--borda);
}

.contador {
  font-size: 0.9rem;
  color: var(--tinta-media);
}

.contador b {
  color: var(--salvia-800);
}

.btn-texto {
  border: none;
  background: none;
  padding: 0.3em 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--terracota-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn-texto:hover {
  color: var(--terracota-700);
}

.vazio {
  padding: clamp(2.4rem, 5vw, 3.6rem) 1.5rem;
  text-align: center;
  border: var(--borda);
  border-radius: var(--raio-organico);
  color: var(--tinta-media);
  background: radial-gradient(120% 140% at 50% 0%, rgba(255, 253, 248, 0.95), rgba(239, 229, 213, 0.55));
  box-shadow: var(--sombra-1);
}

.vazio .arte {
  width: 168px;
  margin: 0 auto 1rem;
}

.vazio h2,
.vazio h3 {
  margin-bottom: 0.4em;
}

[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- artigo */

.artigo-topo {
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}

.artigo-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.artigo-topo h1 {
  max-width: 30ch;
}

.artigo-linha-fina {
  max-width: 58ch;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--tinta-media);
  margin-bottom: 1.6rem;
}

.assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.3rem;
  padding: 1rem 0;
  border-top: var(--borda);
  border-bottom: var(--borda);
  font-size: 0.9rem;
  color: var(--tinta-media);
}

.assinatura-autor {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.assinatura-autor .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--salvia-100);
  border: 2px solid var(--papel);
  box-shadow: var(--sombra-1);
}

.assinatura-autor .avatar svg {
  width: 100%;
  height: 100%;
}

.assinatura-autor b {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--salvia-800);
}

.assinatura-autor b a {
  color: inherit;
  text-decoration: none;
}

.assinatura-autor b a:hover {
  color: var(--terracota-600);
  text-decoration: underline;
}

.assinatura-autor span {
  font-size: 0.83rem;
  color: var(--tinta-suave);
}

.assinatura-datas {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: 0.85rem;
}

.assinatura-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.artigo-capa {
  position: relative;
  margin: 0 0 clamp(1.8rem, 3vw, 2.8rem);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: linear-gradient(152deg, var(--salvia-100), var(--creme-3));
  box-shadow: var(--sombra-2);
}

.artigo-capa .arte {
  width: 100%;
}

.artigo-capa figcaption {
  padding: 0.8rem 1.2rem;
  background: rgba(255, 253, 248, 0.88);
  font-size: 0.85rem;
  color: var(--tinta-media);
  border-top: var(--borda);
}

.artigo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.artigo-corpo {
  max-width: var(--leitura);
  font-size: 1.06rem;
}

.artigo-corpo > h2 {
  margin-top: 2.2em;
  padding-top: 0.2em;
  scroll-margin-top: 100px;
}

.artigo-corpo > h2:first-child {
  margin-top: 0;
}

.artigo-corpo > h2 + p {
  margin-top: 0;
}

.artigo-corpo h3 {
  margin-top: 1.9em;
  scroll-margin-top: 100px;
}

.artigo-corpo > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.artigo-corpo > h2::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rosa-400);
  transform: translateY(-0.18em);
}

.artigo-corpo figure {
  margin: 2em 0;
}

.artigo-corpo figure .arte {
  width: 100%;
  border-radius: var(--raio-m);
  background: linear-gradient(152deg, var(--creme-2), var(--creme-3));
  border: var(--borda);
}

.artigo-corpo figcaption {
  margin-top: 0.7em;
  font-size: 0.87rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}

.artigo-corpo ol {
  counter-reset: passo;
  list-style: none;
  padding-left: 0;
}

.artigo-corpo ol > li {
  counter-increment: passo;
  position: relative;
  padding-left: 2.5em;
  margin-bottom: 1em;
}

.artigo-corpo ol > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.75em;
  height: 1.75em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--salvia-100);
  color: var(--salvia-700);
  font-family: var(--fonte-titulo);
  font-size: 0.86em;
  font-weight: 650;
}

.artigo-corpo ul {
  list-style: none;
  padding-left: 0;
}

.artigo-corpo ul > li {
  position: relative;
  padding-left: 1.5em;
}

.artigo-corpo ul > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 2px 6px 2px 6px;
  background: var(--salvia-400);
}

/* passo a passo destacado */
.passos {
  margin: 1.8em 0 2em;
  padding: 0;
  list-style: none;
  counter-reset: passo-d;
}

.passos > li {
  counter-increment: passo-d;
  position: relative;
  padding: 0 0 1.6em 3.2em;
  margin: 0;
}

.passos > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.08em;
  top: 2.5em;
  bottom: 0.2em;
  width: 2px;
  background: linear-gradient(180deg, var(--salvia-200), rgba(198, 208, 187, 0.1));
}

.passos > li::before {
  content: counter(passo-d);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2.2em;
  height: 2.2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--salvia-700);
  color: var(--creme);
  font-family: var(--fonte-titulo);
  font-size: 0.95em;
  font-weight: 650;
}

.passos h3 {
  margin: 0.15em 0 0.4em;
  font-size: 1.14rem;
}

.passos p:last-child {
  margin-bottom: 0;
}

/* caixas de aviso */
.caixa {
  position: relative;
  margin: 1.9em 0;
  padding: 1.25rem 1.4rem 1.25rem 1.4rem;
  border-radius: var(--raio-m);
  border: 1px solid transparent;
  font-size: 0.985rem;
}

.caixa h4 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  font-family: var(--fonte-texto);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.caixa h4 svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.caixa p:last-child,
.caixa ul:last-child,
.caixa ol:last-child {
  margin-bottom: 0;
}

.caixa-dica {
  background: var(--ok-fundo);
  border-color: rgba(64, 104, 74, 0.22);
}

.caixa-dica h4 {
  color: var(--ok);
}

.caixa-atencao {
  background: var(--cuidado-fundo);
  border-color: rgba(138, 107, 23, 0.24);
}

.caixa-atencao h4 {
  color: var(--cuidado);
}

.caixa-seguranca {
  background: var(--alerta-fundo);
  border-color: rgba(168, 69, 31, 0.24);
}

.caixa-seguranca h4 {
  color: var(--alerta);
}

.caixa-nota {
  background: rgba(226, 231, 218, 0.5);
  border-color: rgba(86, 106, 84, 0.2);
}

.caixa-nota h4 {
  color: var(--salvia-700);
}

/* materiais */
.materiais {
  margin: 1.9em 0;
  padding: 1.5rem 1.6rem;
  background: var(--papel);
  border: var(--borda);
  border-left: 4px solid var(--terracota-400);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-1);
}

.materiais h3 {
  margin: 0 0 0.9em;
  font-size: 1.1rem;
}

.materiais ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 0.15em 1.6em;
  margin: 0;
}

.materiais ul > li::before {
  border-radius: 50%;
  background: var(--terracota-400);
}

/* erros comuns */
.erros {
  margin: 1.9em 0;
  display: grid;
  gap: 0.9rem;
}

.erro {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
}

.erro-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--alerta-fundo);
  color: var(--alerta);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
}

.erro b {
  display: block;
  margin-bottom: 0.25em;
  font-size: 1.02rem;
  color: var(--salvia-900);
}

.erro p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-media);
}

/* variações por clima/espécie */
.variacoes {
  margin: 1.9em 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.variacao {
  padding: 1.25rem 1.35rem;
  background: linear-gradient(168deg, rgba(255, 253, 248, 0.95), rgba(244, 236, 221, 0.7));
  border: var(--borda);
  border-radius: var(--raio-m);
}

.variacao h4 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.55em;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  color: var(--salvia-800);
}

.variacao h4::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px 8px 3px 8px;
  background: var(--rosa-400);
  flex: none;
}

.variacao p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--tinta-media);
}

/* fontes */
.fontes {
  margin: 2.2em 0 0;
  padding: 1.6rem 1.7rem;
  background: rgba(226, 231, 218, 0.4);
  border: var(--borda);
  border-radius: var(--raio-m);
}

.fontes h2 {
  margin-top: 0 !important;
  font-size: 1.25rem !important;
}

.fontes ol {
  counter-reset: fonte;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 0.93rem;
}

.fontes ol > li {
  counter-increment: fonte;
  padding-left: 2.2em !important;
  position: relative;
  margin-bottom: 0.8em;
}

.fontes ol > li::before {
  content: counter(fonte) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--salvia-600);
  font-family: var(--fonte-titulo);
  font-weight: 650;
  display: block;
}

.fontes cite {
  font-style: normal;
  color: var(--salvia-900);
}

.fonte-org {
  color: var(--tinta-suave);
}

/* nota de revisão ao final do artigo */
.revisao {
  margin-top: 2.4em;
  padding: 1.4rem 1.6rem;
  border: 1px dashed rgba(86, 106, 84, 0.3);
  border-radius: var(--raio-m);
  font-size: 0.92rem;
  color: var(--tinta-media);
  background: rgba(255, 253, 248, 0.6);
}

.revisao b {
  color: var(--salvia-800);
}

.revisao p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- lateral -- */

.lateral {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.bloco-lateral {
  padding: 1.3rem 1.4rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-1);
}

.bloco-lateral h2,
.bloco-lateral h3 {
  font-size: 0.8rem;
  font-family: var(--fonte-texto);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.9em;
}

.indice ol {
  list-style: none;
  counter-reset: idx;
  margin: 0;
  padding: 0;
  font-size: 0.93rem;
}

.indice li {
  counter-increment: idx;
  margin-bottom: 0.15em;
}

.indice a {
  display: flex;
  gap: 0.6em;
  padding: 0.42em 0.6em;
  border-radius: var(--raio-p);
  color: var(--tinta-media);
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.18s ease, color 0.18s ease;
}

.indice a::before {
  content: counter(idx);
  flex: none;
  font-family: var(--fonte-titulo);
  font-size: 0.85em;
  color: var(--salvia-400);
}

.indice a:hover {
  background: rgba(226, 231, 218, 0.6);
  color: var(--salvia-900);
}

.indice a[aria-current="true"] {
  background: var(--salvia-100);
  color: var(--salvia-900);
  font-weight: 600;
}

.indice a[aria-current="true"]::before {
  color: var(--terracota-500);
}

.lateral-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.93rem;
}

.lateral-lista li {
  margin-bottom: 0.7em;
  padding-bottom: 0.7em;
  border-bottom: var(--borda);
}

.lateral-lista li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.lateral-lista a {
  color: var(--salvia-800);
  text-decoration: none;
  font-weight: 550;
  line-height: 1.4;
  display: block;
}

.lateral-lista a:hover {
  color: var(--terracota-600);
}

.lateral-lista small {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.82rem;
  font-weight: 400;
  margin-top: 0.15em;
}

.indice-movel {
  display: none;
  margin: 0 0 2rem;
  border: var(--borda);
  border-radius: var(--raio-m);
  background: var(--papel);
  overflow: hidden;
}

.indice-movel summary {
  padding: 0.95rem 1.2rem;
  font-weight: 600;
  color: var(--salvia-800);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.indice-movel summary::-webkit-details-marker {
  display: none;
}

.indice-movel summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--salvia-500);
  border-bottom: 2px solid var(--salvia-500);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.indice-movel[open] summary::after {
  transform: rotate(225deg);
}

.indice-movel .indice {
  padding: 0 1rem 1rem;
}

/* barra de progresso de leitura */
.progresso {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}

.progresso i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--salvia-400), var(--terracota-500));
  transition: width 0.1s linear;
}

/* --------------------------------------------------------- relacionados -- */

.relacionados {
  padding: clamp(2.4rem, 4vw, 4rem) 0;
  border-top: var(--borda);
  background: linear-gradient(180deg, rgba(248, 232, 228, 0.4), transparent 70%);
}

/* --------------------------------------------------------------- passos-- */

.trilha {
  counter-reset: etapa;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}

.trilha > li {
  counter-increment: etapa;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-1);
  margin: 0;
}

.trilha > li::before {
  content: counter(etapa);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--salvia-200), var(--salvia-100));
  color: var(--salvia-700);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 650;
}

.trilha h3 {
  margin: 0.15em 0 0.35em;
  font-size: 1.14rem;
}

.trilha p {
  margin: 0 0 0.6em;
  color: var(--tinta-media);
  font-size: 0.96rem;
}

.trilha p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- sintomas */

.sintomas {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}

.sintoma {
  padding: 1.4rem 1.5rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-1);
}

.sintoma h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.sintoma dl {
  margin: 0;
  font-size: 0.94rem;
}

.sintoma dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 0.9em;
}

.sintoma dt:first-child {
  margin-top: 0;
}

.sintoma dd {
  margin: 0.25em 0 0;
  color: var(--tinta-media);
}

/* ------------------------------------------------------------- glossário */

.glossario-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 2rem;
}

.glossario-nav a {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.5em;
  border-radius: 10px;
  background: var(--papel);
  border: var(--borda);
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--salvia-700);
  text-decoration: none;
}

.glossario-nav a:hover {
  background: var(--salvia-100);
  color: var(--salvia-900);
}

.glossario-letra {
  margin: 2.4rem 0 1.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--rosa-300);
  font-size: 1.5rem;
  scroll-margin-top: 100px;
}

.termos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.termo {
  padding: 1.25rem 1.35rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
}

.termo dt {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--salvia-900);
  margin-bottom: 0.35em;
}

.termo dd {
  margin: 0;
  font-size: 0.945rem;
  color: var(--tinta-media);
}

.termo dd a {
  font-weight: 550;
}

/* --------------------------------------------------------------- autores */

.autor-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1.6rem 1.8rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
}

.autor-card .retrato {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--salvia-100);
  border: 3px solid var(--creme-2);
}

.autor-card .retrato svg {
  width: 100%;
  height: 100%;
}

.autor-card h3 {
  margin-bottom: 0.15em;
}

.autor-cargo {
  display: block;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracota-600);
  margin-bottom: 0.8em;
}

.autor-foco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9em;
}

/* --------------------------------------------------------- página estática */

.pagina-topo {
  padding: clamp(1.6rem, 3vw, 2.8rem) 0 clamp(1.4rem, 2.5vw, 2.2rem);
}

.pagina-topo h1 {
  max-width: 26ch;
}

.pagina-resumo {
  max-width: 62ch;
  font-size: clamp(1.04rem, 1rem + 0.3vw, 1.2rem);
  color: var(--tinta-media);
  margin-bottom: 0;
}

.prosa {
  max-width: var(--leitura);
  padding-bottom: clamp(2.6rem, 5vw, 4.4rem);
}

.prosa h2 {
  margin-top: 2.1em;
  scroll-margin-top: 100px;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa h3 {
  margin-top: 1.7em;
}

.prosa-larga {
  max-width: none;
}

.dados-contato {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin: 1.8em 0;
}

.dado {
  padding: 1.25rem 1.35rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
}

.dado b {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.4em;
}

.dado p {
  margin: 0;
  font-size: 0.98rem;
}

.registro-correcoes {
  list-style: none;
  padding: 0;
  margin: 1.6em 0 0;
  display: grid;
  gap: 1rem;
}

.registro-correcoes > li {
  padding: 1.2rem 1.35rem;
  background: var(--papel);
  border: var(--borda);
  border-left: 4px solid var(--rosa-400);
  border-radius: var(--raio-m);
  margin: 0;
}

.registro-correcoes time {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.35em;
}

.registro-correcoes b {
  display: block;
  margin-bottom: 0.3em;
}

.registro-correcoes p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-media);
}

.registro-vazio {
  margin: 1.2em 0 0;
  padding: 1.2rem 1.35rem;
  background: var(--papel);
  border: var(--borda);
  border-radius: var(--raio-m);
  color: var(--tinta-media);
}

/* --------------------------------------------------------------- chamada */

.chamada {
  position: relative;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.4rem);
  background: linear-gradient(150deg, var(--salvia-800), var(--salvia-700) 62%, #46583f);
  border-radius: var(--raio-g);
  color: var(--creme);
  overflow: hidden;
  box-shadow: var(--sombra-3);
}

.chamada::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -40%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 200, 192, 0.28), transparent 70%);
}

.chamada::after {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -55%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 122, 85, 0.3), transparent 70%);
}

.chamada-conteudo {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}

.chamada h2 {
  color: #f7f2e7;
}

.chamada p {
  color: rgba(247, 242, 231, 0.86);
  font-size: 1.05rem;
}

.chamada .btn-principal {
  background: var(--creme);
  color: var(--salvia-900);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}

.chamada .btn-principal:hover {
  color: var(--terracota-700);
}

.chamada .btn-secundario {
  color: var(--creme);
  box-shadow: inset 0 0 0 1.5px rgba(250, 245, 236, 0.45);
}

.chamada .btn-secundario:hover {
  color: var(--creme);
  background: rgba(250, 245, 236, 0.12);
}

/* --------------------------------------------------------------- rodapé -- */

.rodape {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(2.4rem, 4vw, 3.6rem) 0 1.8rem;
  background: linear-gradient(180deg, rgba(226, 231, 218, 0.5), rgba(226, 231, 218, 0.9));
  border-top: 1px solid rgba(86, 106, 84, 0.18);
}

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(86, 106, 84, 0.18);
}

.rodape-marca .logo {
  margin-bottom: 1rem;
}

.rodape-marca p {
  font-size: 0.93rem;
  color: var(--tinta-media);
  max-width: 38ch;
}

.rodape h2 {
  font-family: var(--fonte-texto);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--salvia-700);
  margin-bottom: 1em;
}

.rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.93rem;
}

.rodape li {
  margin-bottom: 0.55em;
}

.rodape li a {
  color: var(--tinta-media);
  text-decoration: none;
}

.rodape li a:hover {
  color: var(--terracota-600);
  text-decoration: underline;
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}

.rodape-base p {
  margin: 0;
}

.rodape-aviso {
  max-width: 62ch;
}

/* ------------------------------------------------------------- utilitário */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.centro {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.ramo {
  width: 96px;
  height: auto;
  color: var(--salvia-400);
}

.ramo-centro {
  margin: 2.4rem auto;
}

.aviso-topo {
  padding: 0.6rem 0;
  background: var(--salvia-800);
  color: rgba(250, 245, 236, 0.92);
  font-size: 0.84rem;
  text-align: center;
}

.aviso-topo a {
  color: var(--rosa-300);
}

/* --------------------------------------------------------------- 404 ----- */

.erro-404 {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  text-align: center;
}

.erro-404 .arte {
  max-width: 400px;
  margin: 0 auto 1.6rem;
}

.erro-404 p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--tinta-media);
}

.erro-404 .acoes {
  justify-content: center;
}

/* --------------------------------------------------------- responsivo --- */

@media (max-width: 1080px) {
  .artigo-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .lateral {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 1.2rem;
  }

  .lateral .indice {
    display: none;
  }

  .indice-movel {
    display: block;
  }

  .rodape-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rodape-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .nav-principal {
    display: none;
  }

  .nav-principal.aberto {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 0.9rem clamp(1.1rem, 4vw, 2.6rem) 1.4rem;
    background: var(--creme);
    border-bottom: var(--borda-forte);
    box-shadow: var(--sombra-2);
  }

  .nav-principal.aberto .nav-lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav-principal.aberto .nav-lista a {
    padding: 0.72em 0.9em;
    border-radius: var(--raio-p);
    font-size: 1rem;
  }

  .abrir-menu {
    display: inline-flex;
    margin-left: auto;
  }

  .busca-topo {
    display: none;
  }

  .hero-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-palco {
    order: -1;
    max-width: 520px;
  }

  .hero-nota {
    display: none;
  }

  .destaque {
    grid-template-columns: minmax(0, 1fr);
  }

  .destaque-arte {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .autor-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .autor-card .retrato {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 620px) {
  body {
    line-height: 1.68;
  }

  .logo-texto {
    font-size: 1.02rem;
  }

  .logo-simbolo {
    width: 26px;
    height: 29px;
  }

  .card-linha {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-linha .card-arte {
    aspect-ratio: 16 / 9;
  }

  .trilha > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }

  .trilha > li::before {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .assinatura-acoes {
    margin-left: 0;
    width: 100%;
  }

  .rodape-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
  }

  .hero-numeros {
    gap: 1.2rem 2rem;
  }

  .artigo-corpo {
    font-size: 1.02rem;
  }

  .passos > li {
    padding-left: 2.7em;
  }

  .erro {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .topo,
  .rodape,
  .lateral,
  .relacionados,
  .progresso,
  .indice-movel,
  .assinatura-acoes,
  .chamada {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .artigo-grade {
    grid-template-columns: 1fr;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}