/* SOLUTERRA — Section Variants v3 · backgrounds com contraste e textura */

/* ============================================================
   PAGE HERO — cabeçalho padrão de páginas internas (single)
   ============================================================ */
.page-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(191,163,106,.16), transparent 55%),
    linear-gradient(150deg, var(--graphite) 0%, var(--black) 100%);
  color: var(--champagne);
  overflow: hidden;
  padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 6vw, 64px);
}
/* Service/internal hero H1 capped — não usa display-xl gigante */
.page-hero h1.display-xl {
  font-size: clamp(32px, 4.6vw, 52px) !important;
  line-height: 1.08;
  max-width: 18ch;
  margin-top: 20px !important;
}
.page-hero .lede { max-width: 600px; font-size: clamp(16px,1.5vw,18px) !important; margin-top: 20px !important; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(191,163,106,.04) 18px 19px);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .crumb { color: rgba(244,239,227,.55); margin-bottom: 28px; }
.page-hero .crumb a { color: rgba(244,239,227,.75); }
.page-hero .crumb a:hover { color: var(--gold-light); }
.page-hero .crumb .sep { color: rgba(244,239,227,.3); }
.page-hero .eyebrow { color: var(--gold-light); }
.page-hero .eyebrow::before { background: var(--gold-aged); }
.page-hero h1, .page-hero .display-xl { color: var(--ivory); }
.page-hero h1 em, .page-hero .display-xl em, .page-hero h1 span[style] { color: var(--gold-light) !important; }
.page-hero .lede { color: rgba(244,239,227,.78); }
.page-hero .svc-meta { border-color: rgba(191,163,106,.2); margin-top: 40px; margin-bottom: 0; }
.page-hero .svc-meta .label { color: var(--gold-light); }
.page-hero .svc-meta .value { color: var(--ivory); }
.page-hero .svc-meta > div + div { border-color: rgba(191,163,106,.2); }
.page-hero .partner-hero { padding: 0; }
.page-hero .partner-stats .stat { border-color: rgba(191,163,106,.22); }
.page-hero .partner-stats .label { color: var(--gold-light); }
.page-hero .partner-stats .value { color: var(--ivory); }
.page-hero .placeholder {
  border-color: rgba(191,163,106,.25);
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 14px, rgba(191,163,106,.08) 14px, rgba(191,163,106,.08) 15px),
    var(--black);
}
.page-hero .placeholder .ph-label { background: rgba(11,15,19,.5); border-color: rgba(191,163,106,.25); color: var(--gold-light); }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); }
.reveal-ready [data-reveal] { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Safety: hero content is never hidden by reveal */
.page-hero [data-reveal], .hero-v3 [data-reveal], .hero [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ============================================================
   REFINAMENTOS DE LEITURA — prosa, listas, meta (todas páginas)
   ============================================================ */
/* Prosa editorial mais legível e viva */
.prose p { font-size: 17px; line-height: 1.72; color: #3a372f; }
.prose p.body-lg { font-size: 20px; line-height: 1.6; color: var(--black); font-weight: 400; }
.prose p strong { color: var(--black); font-weight: 600; }
.prose ul li { font-size: 16.5px; line-height: 1.6; color: #3a372f; }

/* Primeiro parágrafo de "O que é" com inicial editorial */
.prose p.body-lg:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  margin: 6px 12px 0 0;
  color: var(--gold-deep);
  font-weight: 400;
}

/* Eyebrow em coluna lateral — vira "kicker" vertical em telas grandes */
.two-col-12 > div:first-child .eyebrow { position: sticky; top: 110px; }

/* Checklist mais sofisticada */
.checklist li {
  padding: 18px 0;
  align-items: flex-start;
  gap: 18px;
}
.checklist li .body { font-size: 16.5px; line-height: 1.55; color: var(--black); padding-top: 1px; }
.check-icon {
  width: 30px; height: 30px;
  border: 0;
  background: rgba(191,163,106,.16);
  color: var(--gold-deep);
}

/* Meta strip mais editorial */
.svc-meta { gap: 0; }
.svc-meta .label { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 10px; }
.svc-meta .value { font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; }

/* Section headings: kicker + título com mais ar */
section .h1, section .h2 { letter-spacing: -0.02em; }
section .eyebrow + .h1, section .eyebrow + .h2 { margin-top: 18px; }

/* Steps (processo) numerados com força */
.step .num {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  font-weight: 500;
}
.step h3 { font-size: 22px; margin-top: 4px; }
.step .body { font-size: 15.5px; line-height: 1.6; }

/* Light section default text warmer (not gray-dead) */
.sv-paper .body, .sv-clay .body, .section .body { color: #514c40; }
.sv-paper .body-lg, .sv-clay .body-lg { color: var(--black); }

/* Marfim padrão (já existe via body) */
.sv-ivory {
  background: var(--ivory);
  color: var(--text);
}

/* Areia clara com vinheta dourada — "educativo claro" */
.sv-paper {
  position: relative;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(191,163,106,.10), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(168,121,69,.06), transparent 60%),
    linear-gradient(180deg, var(--ivory) 0%, var(--cream-light) 100%);
  color: var(--text);
  overflow: clip; /* clip permite position:sticky nos filhos, diferente de hidden */
}
.sv-paper::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(85,67,30,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 65%, rgba(85,67,30,.03) 0 1px, transparent 2px);
  background-size: 11px 11px, 15px 15px;
  opacity: .4;
  pointer-events: none;
}
.sv-paper > * { position: relative; z-index: 1; }

/* Marrom Terra Profunda — "institucional premium" */
.sv-terra {
  position: relative;
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(191,163,106,.14), transparent 60%),
    radial-gradient(50% 60% at 100% 0%, rgba(168,121,69,.10), transparent 55%),
    linear-gradient(135deg, var(--graphite) 0%, var(--black) 100%);
  color: var(--champagne);
  overflow: hidden;
}
.sv-terra::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(191,163,106,.04) 18px 19px);
  pointer-events: none;
}
.sv-terra > * { position: relative; z-index: 1; }
.sv-terra h1, .sv-terra h2, .sv-terra h3, .sv-terra h4,
.sv-terra .h1, .sv-terra .h2, .sv-terra .h3, .sv-terra .h4,
.sv-terra .display-xl { color: var(--ivory); }
.sv-terra em.bronze, .sv-terra em.bronze-dark, .sv-terra em.bronze-light { color: var(--gold-light); }
.sv-terra .body, .sv-terra .body-lg, .sv-terra p { color: rgba(244,239,227,.78); }
.sv-terra .eyebrow { color: var(--gold-light); }
.sv-terra .eyebrow::before { background: var(--gold-aged); }
.sv-terra .caption { color: rgba(244,239,227,.6); }

/* Argila terrosa quente — substitui a antiga variante verde */
.sv-olive {
  position: relative;
  background:
    radial-gradient(70% 80% at 100% 100%, rgba(244,239,227,.10), transparent 60%),
    radial-gradient(50% 60% at 0% 0%, rgba(85,67,30,.18), transparent 55%),
    linear-gradient(160deg, #b78659 0%, var(--gold-deep) 55%, #8b5e33 100%);
  color: var(--ivory);
  overflow: hidden;
}
.sv-olive::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 30% 110%, transparent 0 80px, rgba(244,239,227,.05) 80px 81px),
    repeating-radial-gradient(circle at 70% -10%, transparent 0 70px, rgba(244,239,227,.05) 70px 71px);
  opacity: 0.7;
  pointer-events: none;
}
.sv-olive > * { position: relative; z-index: 1; }
.sv-olive h1, .sv-olive h2, .sv-olive h3, .sv-olive .h1, .sv-olive .h2, .sv-olive .h3 { color: var(--ivory); }
.sv-olive em.bronze, .sv-olive em.bronze-dark, .sv-olive em.bronze-light { color: var(--ivory); }
.sv-olive .body, .sv-olive .body-lg, .sv-olive p { color: rgba(244,239,227,.85); }
.sv-olive .eyebrow { color: var(--ivory); }
.sv-olive .eyebrow::before { background: var(--ivory); }

/* Marrom Cartório forte — "jurídico sofisticado" */
.sv-cartorio {
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(191,163,106,.20), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, #3f3217 100%);
  color: var(--champagne);
  overflow: hidden;
}
.sv-cartorio::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 24px, rgba(191,163,106,.05) 24px 25px);
  pointer-events: none;
}
.sv-cartorio > * { position: relative; z-index: 1; }
.sv-cartorio h1, .sv-cartorio h2, .sv-cartorio h3, .sv-cartorio .h1, .sv-cartorio .h2, .sv-cartorio .h3 { color: var(--ivory); }
.sv-cartorio em.bronze, .sv-cartorio em.bronze-light { color: var(--gold-light); }
.sv-cartorio .body, .sv-cartorio .body-lg, .sv-cartorio p { color: rgba(244,239,227,.78); }
.sv-cartorio .eyebrow { color: var(--gold-light); }
.sv-cartorio .eyebrow::before { background: var(--gold-aged); }

/* Secondary buttons on dark / clay sections — SOLID fill so they read as real,
   tappable buttons with strong text contrast (ivory-on-clay failed AA). */
.sv-olive .btn-secondary,
.sv-cartorio .btn-secondary,
.cta-final .btn-secondary,
.testimonials .btn-secondary {
  background: var(--ivory);
  color: #4A3414;                 /* deep bronze — ~7:1 on ivory */
  border-color: var(--ivory);
  box-shadow: 0 12px 28px -14px rgba(40,28,12,.6);
}
.sv-olive .btn-secondary:hover,
.sv-cartorio .btn-secondary:hover,
.cta-final .btn-secondary:hover,
.testimonials .btn-secondary:hover {
  background: #FFFDF7;
  color: #2A1D09;
  border-color: #FFFDF7;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(40,28,12,.72);
}

/* Argila / dourado claro — destaque quente */
.sv-clay {
  position: relative;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(85,67,30,.10), transparent 55%),
    linear-gradient(180deg, #f0e3cc 0%, #e6d5b3 100%);
  color: var(--text);
  overflow: hidden;
}
.sv-clay::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(85,67,30,.06) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 70% 65%, rgba(85,67,30,.05) 0 1px, transparent 2px);
  background-size: 13px 13px, 17px 17px;
  opacity: .35;
  pointer-events: none;
}
.sv-clay > * { position: relative; z-index: 1; }

/* Divisor ornamental entre seções */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px var(--section-px);
  position: relative;
}
.section-divider .line {
  height: 1px;
  flex: 1;
  max-width: 240px;
  background: linear-gradient(90deg, transparent, var(--gold-aged) 50%, transparent);
}
.section-divider .diamond {
  width: 8px; height: 8px;
  background: var(--gold-aged);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(191,163,106,.12);
}
.section-divider .glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--gold-deep);
  line-height: 1;
  margin: 0 6px;
}

/* Floating accent shapes (decorative) */
.bg-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.10;
  z-index: 0;
}
.bg-shape-circle {
  border: 1px solid currentColor;
  border-radius: 999px;
}
.bg-shape-1 { top: -120px; right: -120px; width: 320px; height: 320px; color: var(--gold-aged); }
.bg-shape-2 { bottom: -160px; left: -100px; width: 360px; height: 360px; color: var(--gold-aged); }

/* Reveal lines (used by GSAP) */
.reveal-line {
  display: block;
  overflow: hidden;
}
.reveal-line > * { display: inline-block; }

/* ============================================================
   ANIMATED COUNTER NUMBERS
   ============================================================ */
.metric-row {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 48px;
}
.metric {
  padding: 28px 24px;
  background: rgba(244,239,227,.04);
  border: 1px solid rgba(191,163,106,.18);
  border-radius: var(--radius-lg);
  text-align: left;
  backdrop-filter: blur(8px);
}
.metric .num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--gold-light);
  letter-spacing: -0.02em;
}
.metric .num small { font-size: 60%; color: var(--gold-aged); margin-left: 4px; }
.metric .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,227,.7);
  margin-top: 14px;
  display: block;
}

/* ============================================================
   MARQUEE STRIP — bandas que rolam (cidades atendidas)
   ============================================================ */
.marquee {
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid rgba(191,163,106,.18);
  border-bottom: 1px solid rgba(191,163,106,.18);
  background: var(--ivory);
}
.marquee.on-dark {
  background: transparent;
  border-color: rgba(191,163,106,.18);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--gold-deep);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.marquee-item::after {
  content: "✦";
  font-size: 14px;
  color: var(--gold-aged);
  font-style: normal;
}
.marquee.on-dark .marquee-item { color: var(--gold-light); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================
   SERVIÇOS BLOCK v3 — editorial, ícones lineares, card featured
   ============================================================ */
.services-block { padding: clamp(72px, 10vw, 120px) 0; }

.services-head {
  display: grid;
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .services-head { grid-template-columns: 1.2fr auto; gap: 64px; }
}
.services-head .lede { margin: 0; }
.services-head-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: rgba(244,239,227,.06);
  border: 1px solid rgba(191,163,106,.30);
  border-radius: var(--radius-pill);
  color: var(--gold-light);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 320ms var(--ease-out);
  white-space: nowrap;
  align-self: end;
}
.services-head-cta .arrow {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--black);
  display: grid; place-items: center;
  transition: transform 320ms var(--ease-out);
}
.services-head-cta:hover {
  background: rgba(244,239,227,.10);
  border-color: var(--gold-light);
  color: var(--ivory);
}
.services-head-cta:hover .arrow { transform: translateX(6px); }

.services-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: rgba(191,163,106,.18);
  border: 1px solid rgba(191,163,106,.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 720px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card--feature { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .service-card--feature { grid-column: span 2; grid-row: span 2; }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 30px;
  background: linear-gradient(165deg, #6a5733 0%, var(--graphite) 100%);
  color: var(--champagne);
  text-decoration: none;
  position: relative;
  transition: background 360ms var(--ease-out), transform 360ms var(--ease-out);
  min-height: 230px;
}
.service-card:hover { background: linear-gradient(165deg, #7c6638 0%, #4a3d22 100%); transform: translateY(-3px); }
.service-card .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-card .sc-icon {
  width: 52px; height: 52px;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(191,163,106,.32);
  color: var(--gold-light);
  background: rgba(191,163,106,.06);
  transition: all 360ms var(--ease-out);
}
.service-card:hover .sc-icon {
  background: var(--gold-light);
  color: var(--graphite);
  border-color: var(--gold-light);
  transform: scale(1.05);
}
.service-card .sc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(244,239,227,.45);
}
.service-card .sc-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: 6px 12px;
  border: 1px solid rgba(191,163,106,.35);
  border-radius: var(--radius-pill);
}
.service-card .sc-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ivory) !important;
  margin: 0;
}
.service-card .sc-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(244,239,227,.72);
  margin: 0;
}
.service-card .sc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: auto;
  padding-top: 8px;
}
.service-card .sc-cta .arrow {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(191,163,106,.14);
  color: var(--gold-light);
  transition: all 360ms var(--ease-out);
}
.service-card:hover .sc-cta .arrow {
  background: var(--gold-light);
  color: var(--graphite);
  transform: translateX(4px);
}

/* Featured card */
.service-card--feature {
  background: linear-gradient(160deg, var(--black) 0%, var(--graphite) 100%);
  padding: 40px 38px;
}
.service-card--feature::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 80% at 0% 0%, rgba(191,163,106,.16), transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(191,163,106,.04) 18px 19px);
  pointer-events: none;
}
.service-card--feature > * { position: relative; z-index: 1; }
.service-card--feature .sc-icon {
  width: 60px; height: 60px;
  background: rgba(191,163,106,.16);
  border-color: rgba(191,163,106,.5);
}
.service-card--feature .sc-title {
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 4px 0;
}
.service-card--feature .sc-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.service-card--feature .sc-desc { font-size: 16px; max-width: 460px; }
.service-card--feature .sc-list {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.service-card--feature .sc-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,239,227,.62);
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-card--feature .sc-list li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--gold-light);
  flex-shrink: 0;
}
.service-card--feature:hover {
  background: linear-gradient(160deg, #1a1108 0%, #4a3d22 100%);
}

/* Services foot */
.services-foot {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  background: rgba(244,239,227,.04);
  border: 1px solid rgba(191,163,106,.18);
  border-radius: var(--radius-lg);
}
.services-foot-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ivory);
}
.services-foot .btn {
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* Reset the global .service-cell override on this page; new cards use .service-card */
.services-block .service-cell { background: transparent !important; border: 0; }

/* ============================================================
   QUOTE BANNER (a "manifesto" cta band)
   ============================================================ */
.quote-banner {
  padding: clamp(80px, 12vw, 140px) 0;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(191,163,106,.15), transparent 55%),
    linear-gradient(180deg, var(--graphite) 0%, var(--black) 100%);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.quote-banner::before {
  content: "“";
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 200px;
  color: rgba(191,163,106,.18);
  line-height: 1;
}
.quote-banner blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(26px, 4.2vw, 44px);
  line-height: 1.25;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.quote-banner blockquote em {
  color: var(--gold-light);
  font-style: italic;
  font-weight: 400;
}
.quote-banner cite {
  display: block;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-aged);
}