/* ================================================================
   1. VARIÁVEIS E RESET
   ================================================================ */
:root {
  --areia: #F4EFE7;
  --marfim: #FFF9F0;
  --terra: #332820;
  --barro: #9A5A3C;
  --barro-escuro: #7c4830;
  --oliva: #6F7352;
  --cafe: #4A332A;
  --rosa: #C89B84;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--terra);
  background: var(--areia);
  line-height: 1.65;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   2. TIPOGRAFIA BASE
   ================================================================ */
h1,
h2,
h3,
.logo,
.serif {
  font-family: 'Cormorant Garamond', serif;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1 {
  font-size: clamp(30px,3.8vw,48px);
  font-weight: 600;
  line-height: 1.22;
  margin-bottom: 22px;
}
h2 {
  font-size: clamp(28px,3.6vw,38px);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
}
h3 {
  font-family: 'Source Sans 3',sans-serif;
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 10px;
}
p {
  margin-bottom: 16px;
}
.lead {
  font-size: 20px;
  color: var(--terra);
  opacity: 0.92;
}
.bg-cafe .lead {
  color: var(--marfim);
  opacity: .78;
}
blockquote {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: clamp(20px,2.4vw,26px);
  line-height: 1.45;
  color: var(--barro-escuro);
  border-left: 3px solid var(--rosa);
  padding-left: 24px;
  margin: 24px 0;
}
.emphasis {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: 1.3em;
  color: var(--barro-escuro);
}

/* ================================================================
   3. LAYOUT E UTILITÁRIOS
   ================================================================ */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.prose {
  max-width: 720px;
}
.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
section {
  padding: 88px 0;
}
.bg-marfim {
  background: var(--marfim);
}
.bg-cafe {
  background: var(--cafe);
  color: var(--marfim);
}
.bg-cafe h2 {
  color: var(--marfim);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--oliva);
  font-weight: 600;
  margin-bottom: 18px;
}
.eyebrow.center {
  justify-content: center;
}
.eyebrow.on-dark {
  color: var(--rosa);
}
.divider {
  width: 120px;
  height: 18px;
  margin: 0 auto;
  opacity: 0.9;
}
.divider path {
  stroke: var(--barro);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
}
.divider.spaced {
  margin-top: 64px;
  margin-bottom: 64px;
}
.leaf-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.leaf-icon path,
.leaf-icon line {
  stroke: var(--oliva);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fechamento {
  text-align: center;
  border-top: 1px solid rgba(200,155,132,0.4);
}
.fechamento .prose {
  margin: 0 auto 8px;
}

/* ================================================================
   4. CABEÇALHO (partials: includes/header.php)
   ================================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,239,231,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200,155,132,0.35);
}
.nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--terra);
}
.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  flex-wrap: wrap;
}
.menu a {
  font-size: 15px;
  color: var(--terra);
  opacity: 0.85;
  transition: opacity .2s;
}
.menu a.active,
.menu a:hover {
  opacity: 1;
  color: var(--barro);
}
.nav-cta {
  font-family: 'Source Sans 3',sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: var(--barro);
  color: var(--marfim);
  padding: 11px 22px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .2s;
}
.nav-cta:hover {
  background: var(--barro-escuro);
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--terra);
  cursor: pointer;
}

/* ================================================================
   5. RODAPÉ (partials: includes/footer.php)
   ================================================================ */
footer {
  background: var(--cafe);
  color: var(--marfim);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(200,155,132,0.25);
}
footer .logo {
  color: var(--marfim);
  font-size: 24px;
  margin-bottom: 12px;
}
footer .foot-desc {
  font-size: 15px;
  color: rgba(255,249,240,0.7);
  max-width: 280px;
}
footer h4 {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: 16px;
  font-weight: 600;
}
footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer a {
  font-size: 15px;
  color: rgba(255,249,240,0.82);
  transition: color .2s;
}
footer a:hover {
  color: var(--rosa);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255,249,240,0.55);
}
.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--cafe);
  color: var(--marfim);
  border-top: 1px solid rgba(200,155,132,0.35);
  padding: 24px;
}
.cookie-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.cookie-banner-texto {
  flex: 1 1 420px;
}
.cookie-banner-texto strong {
  display: block;
  margin-bottom: 6px;
}
.cookie-banner-texto p {
  font-size: 14px;
  color: rgba(255,249,240,0.8);
  margin-bottom: 0;
}
.cookie-banner-texto a {
  color: var(--rosa);
  text-decoration: underline;
}
.cookie-banner-prefs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  flex: 1 1 220px;
}
.cookie-banner-prefs label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cookie-banner .btn {
  padding: 11px 20px;
  font-size: 14px;
}
.cookie-banner .btn-secondary {
  color: var(--marfim);
  border-color: var(--rosa);
}
.cookie-banner .btn-secondary:hover {
  background: rgba(200,155,132,0.14);
  color: var(--marfim);
}

/* ================================================================
   6. BOTÕES E LINKS
   ================================================================ */
.btn {
  display: inline-block;
  font-family: 'Source Sans 3',sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.btn-primary {
  background: var(--barro);
  color: var(--marfim);
  border: 1px solid var(--barro);
}
.btn-primary:hover {
  background: var(--barro-escuro);
  border-color: var(--barro-escuro);
}
.btn-secondary {
  background: transparent;
  color: var(--terra);
  border: 1.5px solid var(--terra);
}
.btn-secondary:hover {
  background: rgba(111,115,82,0.08);
  border-color: var(--oliva);
  color: var(--oliva);
}
.btn-secondary.on-dark {
  color: var(--marfim);
  border-color: var(--rosa);
}
.btn-secondary.on-dark:hover {
  background: rgba(200,155,132,0.14);
}
.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.btn-row.center {
  justify-content: center;
}
.btn-lg {
  font-size: 17px;
  padding: 18px 36px;
}
.link-arrow {
  color: var(--barro);
  font-weight: 600;
  border-bottom: 1px solid var(--barro);
  padding-bottom: 2px;
}
.link-arrow:hover {
  color: var(--barro-escuro);
  border-color: var(--barro-escuro);
}

/* ================================================================
   7. COMPONENTES COMPARTILHADOS — Fotos
   (placeholder tracejado + fotos reais, usados em quase toda página)
   ================================================================ */
.photo-placeholder {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(154,90,60,0.05) 10px, rgba(154,90,60,0.05) 11px), var(--marfim);
  border: 1.5px dashed var(--rosa);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 28px;
  color: var(--terra);
}
.photo-placeholder .cam-icon {
  width: 34px;
  height: 34px;
}
.photo-placeholder .cam-icon path,
.photo-placeholder .cam-icon circle {
  stroke: var(--barro);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.photo-placeholder span {
  font-size: 13px;
  letter-spacing: 0.2px;
  max-width: 250px;
  opacity: 0.7;
  line-height: 1.5;
}
.photo-hero {
  aspect-ratio: 3/4;
}
img.photo-hero {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.photo-destaque {
  aspect-ratio: 4/3;
  min-height: 300px;
}
img.photo-destaque {
  width: 100%;
  aspect-ratio: 3/4;
  min-height: 0;
  object-fit: cover;
  border-radius: 16px;
}

/* ================================================================
   8. COMPONENTES COMPARTILHADOS — Cards
   (.cards-grid/.card: home, sobre, o-fim-do-recomeco, para-você/educadoras
    .channels-grid/.channel-card: conteúdos)
   ================================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
  margin-top: 48px;
}
.cards-grid.three {
  grid-template-columns: repeat(3,1fr);
}
.cards-grid.four {
  grid-template-columns: repeat(4,1fr);
}
.card {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.card .tag {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--oliva);
  font-weight: 600;
  margin-bottom: 12px;
}
.card p {
  font-size: 16px;
  color: var(--terra);
  opacity: 0.9;
  flex-grow: 1;
}
.card ul {
  margin: 8px 0 12px 18px;
  font-size: 15px;
  opacity: 0.85;
}
.card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.card.on-cafe {
  background: rgba(255,249,240,0.05);
  border-color: rgba(200,155,132,0.4);
  color: var(--marfim);
}
.card.on-cafe .tag {
  color: var(--rosa);
}
.card.on-cafe p {
  color: var(--marfim);
  opacity: 0.85;
}
.channels-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  margin-top: 48px;
}
.channels-grid.row2 {
  grid-template-columns: repeat(2,1fr);
  margin-top: 24px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.channel-card {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 14px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.channel-card.highlight {
  background: #fdf0e4;
  border-color: var(--barro);
}
.channel-card .tag {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--oliva);
  font-weight: 600;
  margin-bottom: 12px;
}
.channel-card p {
  font-size: 16px;
  opacity: 0.9;
  flex-grow: 1;
}
.channel-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ================================================================
   9. COMPONENTES COMPARTILHADOS — Depoimentos
   (home, para-educadoras-e-escolas, depoimentos/)
   ================================================================ */
.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  margin-top: 48px;
}
.depoimento-card {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.depo-quote {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--terra);
  border: none;
  padding: 0;
  margin: 0;
}
.depo-quote p + p {
  margin-top: 12px;
}
.depo-nome {
  font-weight: 600;
  font-size: 15px;
  margin-top: auto;
}
.depo-papel {
  font-size: 13px;
  opacity: 0.65;
  margin: 0;
}

/* ================================================================
   10. COMPONENTES COMPARTILHADOS — Método MAPEAR
   (.mapear-row/.mapear-tag: home, para-você, para-educadoras, percurso,
    ponto-de-partida — .mapear-list: variante em lista usada só em sobre)
   ================================================================ */
.mapear-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 32px 0;
}
.mapear-tag {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--barro-escuro);
}
.mapear-tag.on-dark {
  background: rgba(255,249,240,0.06);
  border-color: rgba(200,155,132,0.5);
  color: var(--rosa);
}

/* ================================================================
   11. COMPONENTES COMPARTILHADOS — Blocos de páginas de percurso/curso
   (o-fim-do-recomeco, ponto-de-partida, percurso-autoria-docente,
    para-voce, para-educadoras-e-escolas — listas, FAQ, citações, etc.)
   ================================================================ */
.content-placeholder {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(154,90,60,0.05) 10px, rgba(154,90,60,0.05) 11px), var(--marfim);
  border: 1.5px dashed var(--rosa);
  border-radius: 14px;
  padding: 24px 28px;
  font-size: 15px;
  opacity: 0.8;
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}
.process-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  margin: 32px auto 0;
  counter-reset: step;
}
.process-list li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 16px;
}
.process-list li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--barro);
  color: var(--marfim);
  font-family: 'Source Sans 3',sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-list li.final {
  font-weight: 600;
  color: var(--barro-escuro);
}
.process-list li.final::before {
  background: var(--barro-escuro);
}
.week-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--marfim);
  background: var(--barro);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.quote-card {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 14px;
  padding: 28px 26px;
}
.quote-card blockquote {
  margin: 0 0 12px;
  font-size: 19px;
}
.quote-card .quote-label {
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--oliva);
  font-weight: 600;
}
.authors-list {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px 40px;
  text-align: left;
}
.author-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(200,155,132,0.25);
}
.author-item .autor-nome {
  font-weight: 600;
  font-size: 16px;
}
.author-item .autor-obra {
  font-size: 14px;
  opacity: 0.7;
}
.for-whom-list {
  max-width: 760px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.for-whom-list .item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
}
.two-col-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(200,155,132,0.3);
  padding: 8px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  padding: 16px 4px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--barro);
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: "–";
}
.faq-item p {
  font-size: 16px;
  opacity: 0.9;
  padding: 0 4px 16px;
  max-width: 720px;
}
.princ-list {
  max-width: 780px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.princ-list .item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
}
.limites-box {
  background: var(--marfim);
  border: 1.5px solid var(--rosa);
  border-radius: 16px;
  padding: 36px 40px;
  max-width: 780px;
  margin: 0 auto;
}
.step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.step-list li {
  font-size: 16px;
}
.step-list strong {
  color: var(--barro-escuro);
}
.dim-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin: 32px 0;
}
.dim-item {
  background: var(--areia);
  border: 1px solid var(--rosa);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--barro-escuro);
}
.note {
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
  max-width: 640px;
  margin: 16px auto 0;
}

/* ================================================================
   12. ESTRUTURA DE PÁGINA INTERNA
   (page-hero/hero-grid/content-block: usados por quase toda página
    secundária — sobre, contato, conteúdos, para-você, para-educadoras,
    o-fim-do-recomeco, ponto-de-partida, percurso-autoria-docente)
   ================================================================ */
.page-hero {
  padding: 56px 0 16px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0 24px;
}
.content-block {
  max-width: 740px;
  margin: 0 auto;
}
.content-block h2 {
  font-size: clamp(25px,3vw,32px);
}

/* ================================================================
   13. FORMULÁRIOS
   (contato, ponto-de-partida, percurso-autoria-docente)
   ================================================================ */
.form-card {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 16px;
  padding: 40px;
}
.form-card.standalone {
  max-width: 680px;
  margin: 40px auto 0;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-field label {
  font-size: 14px;
  font-weight: 600;
}
.form-field .hint {
  font-size: 13px;
  opacity: 0.6;
  font-weight: 400;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: 'Source Sans 3',sans-serif;
  font-size: 16px;
  color: var(--terra);
  background: var(--areia);
  border: 1.5px solid var(--rosa);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}
.form-field textarea {
  resize: vertical;
  min-height: 120px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--barro);
}
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 24px;
}
.consent-row input {
  margin-top: 4px;
}
.form-submit {
  border: none;
  cursor: pointer;
  width: 100%;
}
/* .radio-row (percurso-autoria-docente) — a especificidade empata com
   .form-field label acima, então esta regra precisa continuar depois
   dela no arquivo pra vencer a cascata. */
.radio-row {
  display: block;
}
.radio-row label {
  display: block;
  padding-left: 26px;
  text-indent: -26px;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 10px;
}
.radio-row label input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

/* ================================================================
   14. NEWSLETTER (home e para-você)
   ================================================================ */
.newsletter-box {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 18px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.form-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-inline input {
  font-family: 'Source Sans 3',sans-serif;
  font-size: 16px;
  color: var(--terra);
  background: var(--areia);
  border: 1.5px solid var(--rosa);
  border-radius: 8px;
  padding: 13px 16px;
}
.form-inline input:focus {
  outline: none;
  border-color: var(--barro);
}

/* ================================================================
   15. PÁGINA: HOME (index.php)
   ================================================================ */
.hero-travessia {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}
.hero-travessia-bg {
  position: absolute;
  inset: 0;
}
.hero-travessia-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hero-travessia-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  padding: 80px 0;
}
.hero-text-panel {
  position: relative;
  max-width: 560px;
  padding: 36px 40px 36px 0;
}
.hero-text-panel::before {
  content: "";
  position: absolute;
  top: -24px;
  bottom: -24px;
  left: -9999px;
  right: -24px;
  background: linear-gradient(90deg, var(--areia) 55%, rgba(244,239,231,0.85) 80%, rgba(244,239,231,0) 100%);
  z-index: -1;
}
.hero-text-panel h1 {
  font-size: clamp(30px,3.8vw,46px);
}
.hero-text-panel .bio {
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 480px;
}
.destaque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.destaque .kicker {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--barro);
  font-weight: 600;
  margin-bottom: 10px;
}
.destaque h2.serif {
  font-size: 34px;
}

/* ================================================================
   16. PÁGINA: CONTATO
   ================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: start;
}
.alt-contact {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.alt-contact h3 {
  font-family: 'Source Sans 3',sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.alt-contact .channel {
  border-bottom: 1px solid rgba(200,155,132,0.3);
  padding-bottom: 18px;
}
.alt-contact a.email {
  color: var(--barro);
  font-weight: 600;
}
.alt-contact .socials {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.alt-contact .socials a {
  color: var(--barro);
  font-weight: 600;
}

/* ================================================================
   17. PÁGINA: SOBRE
   ================================================================ */
.valores-list {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px 40px;
  text-align: left;
}
.valor-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(200,155,132,0.25);
}
.valor-item .leaf-icon path,
.valor-item .leaf-icon line {
  stroke: var(--rosa);
}
.mapear-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
  margin: 32px auto 0;
  counter-reset: step;
}
.mapear-list li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 16px;
}
.mapear-list li strong {
  flex-shrink: 0;
  white-space: nowrap;
}
.mapear-list li span {
  flex: 1;
  min-width: 0;
}
.mapear-list li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--barro);
  color: var(--marfim);
  font-family: 'Source Sans 3',sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-list {
  max-width: 740px;
  margin: 24px auto 0;
  columns: 2;
  column-gap: 40px;
}
.exp-list li {
  margin-bottom: 10px;
  font-size: 16px;
  break-inside: avoid;
  list-style: none;
  padding-left: 16px;
  position: relative;
}
.exp-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--barro);
}

/* ================================================================
   18. PÁGINAS LEGAIS (privacidade, termos, cookies)
   ================================================================ */
main {
  padding: 64px 0 96px;
}
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
}
.legal-doc a {
  color: var(--barro);
  text-decoration: underline;
}
.legal-doc h1 {
  font-size: clamp(28px,3.4vw,40px);
  margin-bottom: 12px;
}
.legal-doc .updated {
  font-size: 14px;
  opacity: 0.65;
  margin-bottom: 32px;
}
.legal-doc h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 12px;
  color: var(--barro-escuro);
}
.legal-doc h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 8px;
}
.legal-doc p {
  margin-bottom: 14px;
  font-size: 16px;
}
.legal-doc ul {
  margin: 0 0 14px 20px;
}
.legal-doc li {
  margin-bottom: 6px;
  font-size: 16px;
}
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
}
.legal-doc th,
.legal-doc td {
  border: 1px solid rgba(200,155,132,0.4);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-doc th {
  background: var(--marfim);
}
.legal-doc .placeholder {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(154,90,60,0.05) 10px, rgba(154,90,60,0.05) 11px), var(--marfim);
  border: 1.5px dashed var(--rosa);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 16px 0;
  font-size: 15px;
}
.banner-preview {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 14px;
  padding: 24px;
  margin: 16px 0 24px;
}
.banner-preview .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.banner-preview .btn {
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
}
.banner-preview .btn-primary {
  background: var(--barro);
  color: var(--marfim);
}
.banner-preview .btn-secondary {
  background: transparent;
  color: var(--terra);
  border: 1.5px solid var(--terra);
}

/* ================================================================
   19. PÁGINAS DE ERRO E CONFIRMAÇÃO (404, enviado/)
   ================================================================ */
.error-section {
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.big-404 {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond',serif;
  font-size: 220px;
  font-weight: 700;
  color: rgba(154,90,60,0.08);
  z-index: 0;
  line-height: 1;
  user-select: none;
}
.error-content {
  position: relative;
  z-index: 1;
}
.confirm-section {
  padding: 110px 0;
  text-align: center;
}
.confirm-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 28px;
}
.confirm-icon circle {
  stroke: var(--barro);
  stroke-width: 1.6;
  fill: none;
}
.confirm-icon path {
  stroke: var(--barro);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================================================================
   20. PÁGINA: BLOG (blog/index.php, blog/post.php)
   ================================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin-top: 48px;
}
.post-card {
  background: var(--marfim);
  border: 1px solid var(--rosa);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--terra);
}
.post-card-capa {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.post-card-body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.post-card-data {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--oliva);
  font-weight: 600;
}
.post-card-body h3 {
  font-size: 21px;
  margin-bottom: 4px;
}
.post-card-body p {
  font-size: 15px;
  opacity: 0.85;
  flex-grow: 1;
}
.post-card-body .link-arrow {
  align-self: flex-start;
  margin-top: 4px;
  border-bottom: none;
}
.blog-paginacao {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
}
.blog-paginacao a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rosa);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}
.blog-paginacao a.ativo {
  background: var(--barro);
  border-color: var(--barro);
  color: var(--marfim);
}
.post-header {
  padding-top: 8px;
}
.post-header .link-arrow {
  display: inline-block;
  margin-bottom: 24px;
  border-bottom: none;
}
.post-categorias {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.post-data {
  font-size: 14px;
  opacity: 0.65;
}
.post-capa-wrap {
  margin-top: -24px;
  margin-bottom: 8px;
}
.post-capa {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 16px;
}
.post-conteudo {
  font-size: 17px;
  line-height: 1.75;
}
.post-conteudo h2 {
  font-size: 28px;
  margin-top: 40px;
}
.post-conteudo h3 {
  font-size: 21px;
  margin-top: 32px;
}
.post-conteudo p {
  margin-bottom: 20px;
}
.post-conteudo a {
  color: var(--barro);
  text-decoration: underline;
}
.post-conteudo ul,
.post-conteudo ol {
  margin: 0 0 20px 22px;
}
.post-conteudo li {
  margin-bottom: 8px;
}
.post-conteudo blockquote {
  margin: 32px 0;
}
.post-conteudo img {
  border-radius: 12px;
  margin: 24px 0;
}

/* ================================================================
   21. RESPONSIVO
   (mantido em um bloco só, na ordem original, de propósito — mover
    media queries pra perto de cada seção arriscaria inverter a
    cascata em regras de mesma especificidade)
   ================================================================ */
@media (max-width:900px) {
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--areia);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 32px;
    border-bottom: 1px solid rgba(200,155,132,0.35);
    gap: 16px;
  }
  .menu.open {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
}
@media (max-width:640px) {
  section {
    padding: 56px 0;
  }
  .authors-list {
    grid-template-columns: 1fr;
  }
  .valores-list {
    grid-template-columns: 1fr;
  }
  .exp-list {
    columns: 1;
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-banner-actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width:860px) {
  .hero-travessia {
    min-height: auto;
  }
  .hero-travessia-inner {
    grid-template-columns: 1fr;
    padding: 48px 0 32px;
    gap: 32px;
  }
  .hero-text-panel {
    max-width: none;
    padding: 24px;
  }
  .hero-text-panel::before {
    left: -24px;
    right: -24px;
    top: -24px;
    bottom: -12px;
    background: linear-gradient(180deg, var(--areia) 55%, rgba(244,239,231,0.88) 85%, rgba(244,239,231,0) 100%);
  }
  .depoimentos-grid {
    grid-template-columns: 1fr;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 36px 0 8px;
    gap: 32px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .channels-grid {
    grid-template-columns: 1fr;
  }
  .channels-grid.row2 {
    grid-template-columns: 1fr;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .cards-grid.four {
    grid-template-columns: 1fr 1fr;
  }
  .cards-grid.three {
    grid-template-columns: 1fr;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:760px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .destaque {
    grid-template-columns: 1fr;
  }
  .destaque .photo-placeholder {
    order: 2;
  }
  .destaque .destaque-text {
    order: 1;
  }
  .newsletter-box {
    grid-template-columns: 1fr;
    padding: 32px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .two-col-lists {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dim-grid {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:560px) {
  .cards-grid.four {
    grid-template-columns: 1fr;
  }
}