/**
 * Theme Name: Fruet — Advocacia e Consultoria Jurídica
 * Stylesheet: assets/site.css
 * Standard: Impeccable Editorial Design Standard
 * Description: Design editorial boutique para Tatiana Fruet (OAB/PR 121.204), com tipografia clássica, ritmo artesanal e zero vícios de IA.
 */

/* ==========================================================================
   1. Tipografia Local (Font Faces em WOFF Otimizados)
   ========================================================================== */
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/CormorantGaramond-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant';
  src: url('fonts/CormorantGaramond-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Design Tokens Normativos (Impeccable System)
   ========================================================================== */
:root {
  /* Cores Principais */
  --fruet-color-primary: #652B38;
  --fruet-color-primary-deep: #3D2028;
  --fruet-color-primary-dark: #2A141A;
  --fruet-color-primary-light: #7F3847;
  --fruet-color-ivory: #F4F0E9;
  --fruet-color-surface-warm: #ECE4D9;
  --fruet-color-surface-card: #FCFAF6;
  --fruet-color-bronze: #A98656;
  --fruet-color-bronze-light: #C9B69F;
  --fruet-color-ink: #272322;
  --fruet-color-muted: #5E5652;
  --fruet-color-subtle: #7E756F;
  --fruet-color-border: #DDD4C9;
  --fruet-color-border-subtle: #E8E1D8;
  --fruet-color-status-error: #8A2037;
  --fruet-color-status-success: #2B5E38;

  /* Aliases Retrô para Compatibilidade com Hooks e Templates */
  --wine: var(--fruet-color-primary);
  --deep: var(--fruet-color-primary-deep);
  --ivory: var(--fruet-color-ivory);
  --white: var(--fruet-color-surface-card);
  --bronze: var(--fruet-color-bronze);
  --ink: var(--fruet-color-ink);
  --muted: var(--fruet-color-muted);
  --line: var(--fruet-color-border);

  /* Tipografia Orgânica */
  --fruet-font-serif: 'Cormorant', Garamond, Georgia, serif;
  --fruet-font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --fruet-font-size-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fruet-font-size-display: clamp(2.875rem, 5.8vw, 4.875rem);
  --fruet-font-size-h1: clamp(2.5rem, 5vw, 4.125rem);
  --fruet-font-size-h2: clamp(2rem, 3.6vw, 3.125rem);
  --fruet-font-size-h3: clamp(1.4rem, 2.2vw, 1.875rem);

  /* Elevação Realista em Camadas Sutis (Zero Halos Artificiais) */
  --fruet-shadow-sm: 0 2px 8px -1px rgba(61, 32, 40, 0.04), 0 1px 3px rgba(61, 32, 40, 0.03);
  --fruet-shadow-md: 0 6px 18px -3px rgba(61, 32, 40, 0.06), 0 2px 6px -1px rgba(61, 32, 40, 0.04);
  --fruet-shadow-lg: 0 14px 34px -6px rgba(61, 32, 40, 0.08), 0 4px 12px -2px rgba(61, 32, 40, 0.04);
  --fruet-shadow-hover: 0 12px 28px -4px rgba(61, 32, 40, 0.12), 0 3px 8px -1px rgba(61, 32, 40, 0.05);

  /* Curvas Físicas Humanas */
  --fruet-ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fruet-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--fruet-ease-out);

  /* Grid e Respiro Vertical */
  --fruet-wrap: 1160px;
  --wrap: var(--fruet-wrap);
  --fruet-space-section: clamp(4.5rem, 7.5vw, 7.5rem);
  --fruet-space-gap: clamp(1.5rem, 3vw, 3.5rem);
}

/* ==========================================================================
   3. Reset e Fundações de Acessibilidade
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  scrollbar-color: var(--fruet-color-bronze) var(--fruet-color-ivory);
}

body {
  margin: 0;
  color: var(--fruet-color-ink);
  background-color: var(--fruet-color-ivory);
  font-family: var(--fruet-font-sans);
  font-size: var(--fruet-font-size-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--fruet-color-primary);
  color: #FFFFFF;
}

input, textarea, select {
  caret-color: var(--fruet-color-primary);
  font-family: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--fruet-font-serif);
  font-weight: 500;
  color: var(--fruet-color-ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fruet-font-size-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fruet-font-size-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fruet-font-size-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1.4em;
  color: var(--fruet-color-muted);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.2s var(--fruet-ease-natural);
}

a, button, input, summary {
  -webkit-tap-highlight-color: transparent;
}

button, a {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
}

/* Foco Acessível Padronizado (WCAG AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fruet-color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

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

em {
  font-style: normal;
  color: var(--fruet-color-primary);
}

.wrap {
  width: min(var(--fruet-wrap), calc(100% - 80px));
  margin-inline: auto;
}

.icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

/* ==========================================================================
   4. Componentes Globais (Botões, Links e Badges)
   ========================================================================== */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 15px 28px;
  background-color: var(--fruet-color-primary);
  color: #FFFFFF;
  border: 1px solid var(--fruet-color-primary);
  border-radius: 3px;
  font-family: var(--fruet-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1.3;
  box-shadow: var(--fruet-shadow-sm);
  transition: background-color 0.22s var(--fruet-ease-natural),
              transform 0.22s var(--fruet-ease-natural),
              box-shadow 0.22s var(--fruet-ease-natural);
}

.button .icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  transition: transform 0.22s var(--fruet-ease-natural);
}

.button:hover {
  background-color: var(--fruet-color-primary-deep);
  border-color: var(--fruet-color-primary-deep);
  box-shadow: var(--fruet-shadow-hover);
  transform: translateY(-2px);
}

.button:hover .icon {
  transform: translateX(3px);
}

.button:active {
  transform: translateY(0);
  box-shadow: var(--fruet-shadow-sm);
}

.button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.button-secondary {
  background-color: transparent;
  color: var(--fruet-color-primary);
  border-color: var(--fruet-color-border);
  box-shadow: none;
}

.button-secondary .icon {
  filter: none;
}

.button-secondary:hover {
  background-color: var(--fruet-color-surface-warm);
  border-color: var(--fruet-color-primary);
  color: var(--fruet-color-primary-deep);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fruet-color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--fruet-color-border);
  padding-bottom: 4px;
  transition: border-color 0.2s, color 0.2s;
}

.textlink .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.22s var(--fruet-ease-natural);
}

.textlink:hover {
  color: var(--fruet-color-primary-deep);
  border-color: var(--fruet-color-primary);
}

.textlink:hover .icon {
  transform: translateX(4px);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: -120px;
  left: 24px;
  background: #FFFFFF;
  color: var(--fruet-color-primary);
  padding: 14px 22px;
  border: 2px solid var(--fruet-color-primary);
  border-radius: 4px;
  font-weight: 600;
  box-shadow: var(--fruet-shadow-md);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 20px;
}

/* ==========================================================================
   5. Cabeçalho e Navegação
   ========================================================================== */
.site-header {
  background-color: var(--fruet-color-ivory);
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--fruet-color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 100px;
}

.brand {
  display: block;
  flex: 0 0 auto;
}

.brand img {
  width: 256px;
  height: 64px;
  object-fit: contain;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 0;
  margin: 0;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fruet-color-ink);
  text-decoration: none;
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--fruet-color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s var(--fruet-ease-natural);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
  color: var(--fruet-color-primary);
}

.menu-toggle {
  display: none;
}

/* ==========================================================================
   6. Seção Hero Editorial
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--fruet-color-ivory);
  background-image: 
    linear-gradient(90deg, rgba(244, 240, 233, 0.96) 0%, rgba(244, 240, 233, 0.90) 55%, rgba(244, 240, 233, 0.72) 100%),
    url('images/hero-office-desktop.webp');
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--fruet-color-border);
}

.hero-grid {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 40px;
  align-items: center;
  position: relative;
}

.hero-copy {
  padding-block: 80px 90px;
  z-index: 2;
}

.hero h1 {
  font-size: var(--fruet-font-size-display);
  line-height: 1.02;
  margin-bottom: 24px;
}

.hero-intro {
  max-width: 460px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--fruet-color-muted);
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.hero-credential {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fruet-color-primary);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fruet-color-subtle);
}

.hero-visual {
  height: 100%;
  align-self: end;
  position: relative;
  min-width: 0;
  animation: hero-settle 0.7s var(--fruet-ease-natural) both;
}

@keyframes hero-settle {
  from {
    transform: translateY(16px);
    opacity: 0.92;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.portrait-frame {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.hero-portrait img {
  width: 100%;
  max-height: 660px;
  object-fit: contain;
  object-position: bottom;
}

.portrait-signature {
  position: absolute;
  right: 12px;
  bottom: 24px;
  z-index: 3;
  background-color: rgba(252, 250, 246, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--fruet-color-border-subtle);
  border-radius: 4px;
  padding: 16px 24px;
  box-shadow: var(--fruet-shadow-md);
}

.portrait-signature strong {
  display: block;
  font-family: var(--fruet-font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--fruet-color-primary);
  line-height: 1.1;
}

.portrait-signature span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fruet-color-muted);
  margin-top: 4px;
}

/* ==========================================================================
   7. Barra Institucional e Seções Gerais
   ========================================================================== */
.intro-bar {
  background-color: var(--fruet-color-surface-warm);
  border-bottom: 1px solid var(--fruet-color-border);
  padding: 18px 0;
}

.intro-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-bar-brand {
  font-weight: 600;
  color: var(--fruet-color-primary);
}

.intro-bar-details {
  color: var(--fruet-color-muted);
}

.section-surface {
  position: relative;
  padding-block: var(--fruet-space-section);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--fruet-color-border);
}

.section-heading > p {
  max-width: 380px;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* ==========================================================================
   8. Áreas de Atuação
   ========================================================================== */
.areas {
  background-color: var(--fruet-color-ivory);
  isolation: isolate;
  overflow: clip;
}

.areas-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  mask-image: linear-gradient(transparent, #000 18%, #000 76%, transparent);
}

.areas-ambient img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.area-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.area-row {
  display: grid;
  position: relative;
  isolation: isolate;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  gap: 18px;
  align-items: start;
  padding: 28px;
  min-height: 172px;
  border: 1px solid var(--fruet-color-border);
  border-radius: 14px;
  background: rgba(252, 250, 246, .94);
  text-decoration: none;
  transition: transform 180ms var(--fruet-ease-natural);
}

.area-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #eee3df;
  opacity: 0;
  transition: opacity 180ms var(--fruet-ease-natural);
}

.area-row:focus-visible {
  outline: 2px solid var(--fruet-color-primary);
  outline-offset: 4px;
}

.area-row:focus-visible::before {
  opacity: 1;
}

.area-icon-wrap {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--fruet-color-surface-warm);
}

.area-content h3 {
  font-size: 26px;
  color: var(--fruet-color-ink);
}

.area-content p {
  font-size: 15px;
  line-height: 1.75;
  margin: 8px 0 0;
  max-width: 380px;
}

.area-action {
  margin-top: 8px;
}

.area-arrow {
  width: 20px;
  transition: transform 180ms var(--fruet-ease-natural);
}

@media (hover: hover) and (pointer: fine) {
  .area-row:hover { transform: translateY(-3px); }
  .area-row:hover::before { opacity: 1; }
  .area-row:hover .area-arrow { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .area-row:hover, .area-row:hover .area-arrow { transform: none; }
}

/* ==========================================================================
   9. Sobre o Escritório
   ========================================================================== */
.about {
  background-color: var(--fruet-color-surface-warm);
  border-top: 1px solid var(--fruet-color-border);
  border-bottom: 1px solid var(--fruet-color-border);
}

.about-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 80px;
  align-items: center;
}

.about-media {
  position: relative;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--fruet-shadow-lg);
}

.about-portrait img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 25%;
}

.about-media figcaption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  background: rgba(252, 250, 246, 0.94);
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fruet-color-primary);
  text-align: center;
  border-top: 1px solid var(--fruet-color-border-subtle);
}

.about-text-content h2 {
  max-width: 540px;
  margin-bottom: 24px;
}

.about-text-content p {
  font-size: 16px;
  line-height: 1.85;
}

.about-badge {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fruet-color-primary) !important;
  margin: 20px 0 28px !important;
}

/* ==========================================================================
   10. Fluxo de Atendimento / Jornada Humanizada
   ========================================================================== */
.journey {
  background-color: var(--fruet-color-ivory);
}

.steps-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.step-card {
  border-top: 2px solid var(--fruet-color-bronze);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
}

.step-indicator {
  margin-bottom: 16px;
}

.step-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--fruet-color-primary);
}

.step-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--fruet-color-ink);
}

.step-card p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}

/* ==========================================================================
   11. Faixa Editorial de Filosofia
   ========================================================================== */
.editorial-band {
  min-height: 440px;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  background-color: var(--fruet-color-primary-deep);
  color: #FFFFFF;
  overflow: hidden;
}

.editorial-band-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.editorial-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: contrast(1.1);
}

.editorial-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(61, 32, 40, 0.94) 0%, rgba(61, 32, 40, 0.82) 50%, rgba(61, 32, 40, 0.50) 100%);
}

.editorial-copy {
  padding-block: 60px;
}

.editorial-icon {
  margin-bottom: 20px;
}

.editorial-icon .icon {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}

.editorial-copy h2 {
  color: #FFFFFF;
  max-width: 620px;
  margin-bottom: 18px;
}

.editorial-copy p {
  color: var(--fruet-color-surface-card);
  opacity: 0.9;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* ==========================================================================
   12. Presença Regional e Cidades
   ========================================================================== */
.region {
  background-color: var(--fruet-color-ivory);
}

.region-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.region-info h2 {
  margin-bottom: 20px;
}

.region-info p {
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 28px;
}

.city-list {
  list-style: none;
  columns: 2;
  column-gap: 32px;
  padding: 0;
  margin: 0;
}

.city-list li {
  break-inside: avoid;
  border-bottom: 1px solid var(--fruet-color-border);
}

.city-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.city-list a .icon {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform 0.2s, opacity 0.2s;
}

.city-list a:hover {
  color: var(--fruet-color-primary);
}

.city-list a:hover .icon {
  opacity: 1;
  transform: translateX(3px);
}

.region .fine-print {
  font-size: 12px;
  line-height: 1.75;
  color: var(--fruet-color-subtle);
  margin-top: 24px;
}

/* ==========================================================================
   13. Jornal / Artigos Jurídicos
   ========================================================================== */
.journal {
  background-color: var(--fruet-color-surface-warm);
  border-top: 1px solid var(--fruet-color-border);
}

.articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 40px;
}

.article {
  background-color: var(--fruet-color-surface-card);
  border: 1px solid var(--fruet-color-border);
  border-radius: 4px;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--fruet-shadow-sm);
  transition: transform 0.25s var(--fruet-ease-natural), box-shadow 0.25s var(--fruet-ease-natural);
}

.article:hover {
  transform: translateY(-3px);
  box-shadow: var(--fruet-shadow-md);
}

.article-cover {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 20px;
  background-color: var(--fruet-color-border-subtle);
}

.article-cover img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s var(--fruet-ease-natural);
}

.article:hover .article-cover img {
  transform: scale(1.03);
}

.article-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fruet-color-primary);
  margin-bottom: 12px;
}

.article h3 {
  font-size: 24px;
  line-height: 1.18;
  margin-bottom: 14px;
}

.article h3 a {
  text-decoration: none;
  color: var(--fruet-color-ink);
  transition: color 0.2s;
}

.article h3 a:hover {
  color: var(--fruet-color-primary);
}

.article p {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 20px;
}

.article .textlink {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   14. Perguntas Frequentes (FAQ Acessível)
   ========================================================================== */
.faq {
  background-color: var(--fruet-color-ivory);
  border-top: 1px solid var(--fruet-color-border);
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
}

.faq-intro h2 {
  margin-bottom: 20px;
}

.faq-intro p {
  font-size: 15px;
  line-height: 1.8;
  max-width: 380px;
}

.questions {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--fruet-color-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--fruet-color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--fruet-color-primary);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex: 0 0 auto;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  background-color: var(--fruet-color-primary);
  border-radius: 1px;
}

.faq-icon::after {
  transform: rotate(90deg);
  transition: transform 0.25s var(--fruet-ease-natural);
}

.faq-item[open] .faq-icon::after {
  transform: rotate(0deg);
}

.faq-answer {
  padding-bottom: 22px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-answer p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--fruet-color-muted);
  margin: 0;
}

/* ==========================================================================
   15. Avaliações do Google (Módulo de Confiança Ético)
   ========================================================================== */
.reviews-section {
  background-color: var(--fruet-color-surface-warm);
  border-top: 1px solid var(--fruet-color-border);
  padding-block: var(--fruet-space-section);
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 36px;
}

.review {
  background-color: var(--fruet-color-surface-card);
  border: 1px solid var(--fruet-color-border);
  border-radius: 4px;
  padding: 28px;
  margin: 0;
  box-shadow: var(--fruet-shadow-sm);
  display: flex;
  flex-direction: column;
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.review-initial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--fruet-color-surface-warm);
  color: var(--fruet-color-primary);
  display: grid;
  place-items: center;
  font-family: var(--fruet-font-serif);
  font-size: 24px;
  font-weight: 600;
}

.review figcaption strong {
  display: block;
  font-family: var(--fruet-font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--fruet-color-ink);
}

.review figcaption small {
  display: block;
  font-size: 11px;
  color: var(--fruet-color-subtle);
  margin-top: 2px;
}

.review blockquote {
  margin: 0 0 20px;
  flex: 1;
}

.review blockquote p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--fruet-color-ink);
  margin: 0;
}

.review-origin {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--fruet-color-border-subtle);
  padding-top: 16px;
}

.review-origin > img {
  width: 20px;
  height: 20px;
}

.review-stars {
  color: #B47828;
  display: inline-flex;
  gap: 2px;
}

.review-origin > a {
  font-size: 11px;
  font-weight: 600;
  color: var(--fruet-color-primary);
  margin-left: auto;
}

.reviews-note {
  font-size: 11px;
  line-height: 1.75;
  color: var(--fruet-color-subtle);
  margin-top: 28px;
  max-width: 800px;
}

/* ==========================================================================
   16. Seção de Retorno de Contato (Callback)
   ========================================================================== */
/* ==========================================================================
   17. Newsletter e Instagram
   ========================================================================== */
.newsletter-section {
  background-color: var(--fruet-color-surface-warm);
  border-top: 1px solid var(--fruet-color-border);
  padding-block: 64px;
}

.newsletter-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.newsletter-intro h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  margin-bottom: 14px;
}

.newsletter-intro p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

.newsletter-fields {
  display: flex;
  gap: 10px;
  margin: 10px 0 14px;
}

.newsletter-fields input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  background-color: #FFFFFF;
  border: 1px solid var(--fruet-color-border);
  border-radius: 3px;
  padding: 12px 16px;
  font-size: 14px;
}

.newsletter-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fruet-color-ink);
}

.newsletter-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fruet-color-subtle);
}

.newsletter-form .consent input {
  margin-top: 3px;
  accent-color: var(--fruet-color-primary);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.newsletter-form .form-status {
  font-size: 13px;
  color: var(--fruet-color-primary);
  margin-top: 10px;
}

.newsletter-form .form-status[data-error] {
  color: var(--fruet-color-status-error);
}

.instagram-section {
  background-color: var(--fruet-color-ivory);
  border-top: 1px solid var(--fruet-color-border);
  padding-block: 64px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.instagram-post {
  display: block;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--fruet-color-border-subtle);
  box-shadow: var(--fruet-shadow-sm);
}

.instagram-post img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.5s var(--fruet-ease-natural);
}

.instagram-post:hover img {
  transform: scale(1.035);
}

.instagram-post span {
  position: absolute;
  inset: auto 0 0;
  padding: 24px 12px 12px;
  background: linear-gradient(transparent, rgba(61, 32, 40, 0.85));
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
}

.instagram-empty {
  border-top: 1px solid var(--fruet-color-border);
  padding-top: 24px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.instagram-empty p {
  margin: 0;
  font-size: 14px;
}

.fruet-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   18. Rodapé (Site Footer)
   ========================================================================== */
.site-footer {
  background-color: var(--fruet-color-primary-deep);
  color: #ECE0DC;
  padding-top: 64px;
  border-top: 2px solid var(--fruet-color-bronze);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
}

.footer-logo {
  width: 260px;
  height: auto;
  margin-bottom: 20px;
}

.footer-mission {
  font-size: 13px;
  line-height: 1.85;
  color: #D6C4BF;
  margin-bottom: 16px;
}

.footer-credential {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fruet-color-bronze-light);
}

.footer-title {
  font-family: var(--fruet-font-serif);
  font-size: 24px;
  color: #FCFAF6;
  margin-bottom: 18px;
}

.footer-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-col a,
.footer-contact-links a {
  display: block;
  font-size: 13px;
  color: #D6C4BF;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
}

.footer-nav-col a:hover,
.footer-contact-links a:hover {
  color: #FFFFFF;
}

.footer-address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.8;
  color: #D6C4BF;
  margin-bottom: 16px;
}

.footer-bottom {
  border-top: 1px solid rgba(221, 212, 201, 0.15);
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #B5A19B;
}

.footer-bottom p {
  margin: 0;
  color: inherit;
}

.footer-legal {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   19. WhatsApp Flutuante com 3D Pop-Out e Popover de Qualificação
   ========================================================================== */
.tf-wa-widget {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 999;
}

/* Gatilho Flutuante com Efeito 3D Pop-Out */
.tf-wa-trigger {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 6px 18px 6px 6px;
  background-color: #FFFFFF;
  border: 1px solid var(--fruet-color-border-subtle);
  border-radius: 40px;
  box-shadow: var(--fruet-shadow-lg);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--fruet-ease-natural), box-shadow 0.25s var(--fruet-ease-natural);
}

.tf-wa-trigger:hover {
  transform: translateY(-2px);
  box-shadow: var(--fruet-shadow-hover);
}

/* Moldura e Mecânica do 3D Pop-Out */
.tf-wa-popout-frame {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.tf-wa-popout-circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fruet-color-surface-warm), var(--fruet-color-ivory));
  border: 2px solid var(--fruet-color-primary);
  box-shadow: 0 4px 10px rgba(61, 32, 40, 0.16);
  z-index: 1;
}

.tf-wa-popout-img {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  margin-top: -10px; /* Efeito 3D: a cabeça rompe a borda do círculo */
  filter: drop-shadow(0 4px 6px rgba(61, 32, 40, 0.26));
  transition: transform 0.3s var(--fruet-ease-natural);
}

.tf-wa-trigger:hover .tf-wa-popout-img {
  transform: translateY(-2px) scale(1.08);
}

.tf-wa-trigger-dot {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #25D366;
  border: 2px solid #FFFFFF;
  z-index: 3;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: tf-wa-pulse 2s infinite;
}

@keyframes tf-wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.tf-wa-trigger__copy strong {
  display: block;
  font-family: var(--fruet-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fruet-color-primary);
  line-height: 1.25;
  text-align: left;
}

.tf-wa-trigger__copy small {
  display: block;
  font-size: 10px;
  color: var(--fruet-color-muted);
  margin-top: 2px;
  text-align: left;
}

.tf-wa-trigger__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF;
  flex: 0 0 auto;
  margin-left: 2px;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
  transition: background-color 0.2s;
}

.tf-wa-icon-close {
  display: none;
}

.tf-wa-widget.is-open .tf-wa-icon-wa {
  display: none;
}

.tf-wa-widget.is-open .tf-wa-icon-close {
  display: block;
}

/* Popover de Captura de Leads e Opções */
.tf-wa-popover {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background-color: var(--fruet-color-surface-card);
  border: 1px solid var(--fruet-color-border);
  border-radius: 12px;
  box-shadow: 0 20px 48px -8px rgba(61, 32, 40, 0.24), 0 8px 18px -4px rgba(61, 32, 40, 0.12);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s var(--fruet-ease-natural), transform 0.28s var(--fruet-ease-natural);
}

.tf-wa-popover.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  display: block !important;
}

.tf-wa-popover[hidden] {
  display: none;
}

.tf-wa-popover__header {
  background-color: var(--fruet-color-primary);
  color: #FFFFFF;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tf-wa-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tf-wa-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.tf-wa-avatar-wrap img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.tf-wa-status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #25D366;
  border: 2px solid var(--fruet-color-primary);
}

.tf-wa-profile__name {
  font-family: var(--fruet-font-serif);
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.1;
  margin: 0;
}

.tf-wa-profile__role {
  font-size: 11px;
  color: var(--fruet-color-bronze-light);
  margin: 2px 0 0;
}

.tf-wa-profile__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #E8E1D8;
  margin-top: 3px;
}

.tf-wa-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #25D366;
}

.tf-wa-close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.2s;
  cursor: pointer;
  border: 0;
}

.tf-wa-close-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.tf-wa-popover__body {
  padding: 20px 18px;
}

.tf-wa-greeting {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fruet-color-muted);
  margin: 0 0 16px;
}

.tf-wa-field {
  margin-bottom: 12px;
}

.tf-wa-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fruet-color-ink);
  margin-bottom: 5px;
}

.tf-wa-required {
  color: var(--fruet-color-status-error);
}

.tf-wa-field input {
  width: 100%;
  min-height: 46px;
  background-color: #FFFFFF;
  border: 1px solid var(--fruet-color-border);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--fruet-color-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tf-wa-field input:focus {
  border-color: var(--fruet-color-primary);
  box-shadow: 0 0 0 2px rgba(101, 43, 56, 0.12);
  outline: none;
}

.tf-wa-field input.has-error {
  border-color: var(--fruet-color-status-error);
  background-color: #FFF9F9;
}

.tf-wa-field-error {
  display: none;
  font-size: 11px;
  color: var(--fruet-color-status-error);
  margin-top: 4px;
}

.tf-wa-field-error.is-visible {
  display: block;
}

/* 3 Botões de Opção por Área Jurídica */
.tf-wa-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 14px;
}

.tf-wa-options__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fruet-color-primary);
  margin-bottom: 2px;
}

.tf-wa-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--fruet-color-border);
  border-radius: 6px;
  font-family: var(--fruet-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--fruet-color-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--fruet-shadow-sm);
  transition: background-color 0.2s var(--fruet-ease-natural),
              border-color 0.2s var(--fruet-ease-natural),
              transform 0.2s var(--fruet-ease-natural),
              box-shadow 0.2s var(--fruet-ease-natural);
}

.tf-wa-option-btn svg {
  flex: 0 0 auto;
  color: var(--fruet-color-primary);
  transition: transform 0.2s var(--fruet-ease-natural);
}

.tf-wa-option-btn:hover {
  background-color: var(--fruet-color-surface-warm);
  border-color: var(--fruet-color-primary);
  color: var(--fruet-color-primary);
  transform: translateX(3px);
  box-shadow: var(--fruet-shadow-md);
}

.tf-wa-option-btn:hover svg {
  transform: translateX(3px);
}

.tf-wa-privacy-note {
  font-size: 11px;
  color: var(--fruet-color-subtle);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* Legado / Fallback */
.whatsapp-dock {
  display: none;
}

/* ==========================================================================
   20. Páginas Internas, Artigo Single e Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fruet-color-subtle);
  margin: 32px 0 40px;
}

.breadcrumbs a {
  color: var(--fruet-color-primary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.page-heading {
  max-width: 900px;
  margin-bottom: 48px;
}

.page-heading h1 {
  font-size: var(--fruet-font-size-h1);
  margin-bottom: 16px;
}

.page-intro {
  font-size: 18px;
  line-height: 1.85;
  color: var(--fruet-color-muted);
}

.page-wrap {
  padding-bottom: 96px;
}

.page-layout {
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

.page-prose {
  flex: 1;
  min-width: 0;
}

.page-aside {
  width: 310px;
  flex: 0 0 auto;
}

.aside-sticky {
  position: sticky;
  top: 120px;
  background-color: var(--fruet-color-surface-card);
  border: 1px solid var(--fruet-color-border);
  border-radius: 4px;
  padding: 28px;
  box-shadow: var(--fruet-shadow-sm);
}

.aside-portrait-wrap {
  margin-bottom: 20px;
  border-radius: 3px;
  overflow: hidden;
}

.aside-portrait-wrap img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top;
}

.aside-sticky h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--fruet-color-primary);
}

.aside-sticky p {
  font-size: 13px;
  line-height: 1.75;
  margin-bottom: 20px;
}

.aside-sticky .button {
  width: 100%;
  font-size: 12px;
  padding: 13px 18px;
}

.aside-credential {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fruet-color-subtle);
  text-align: center;
  margin-top: 14px;
}

/* Tipografia de Artigos (Prose Editorial) */
.prose {
  font-size: 17px;
  line-height: 1.85;
  max-width: 70ch;
}

.prose p {
  color: var(--fruet-color-ink);
  margin: 0 0 1.5em;
}

.prose h2 {
  font-size: 32px;
  margin: 1.8em 0 0.6em;
  line-height: 1.2;
}

.prose h3 {
  font-size: 24px;
  margin: 1.6em 0 0.6em;
}

.prose ul, .prose ol {
  padding-left: 24px;
  margin: 0 0 1.6em;
  color: var(--fruet-color-ink);
}

.prose li {
  margin: 0.5em 0;
}

.prose blockquote {
  margin: 2.4em 0;
  padding: 24px 32px;
  background-color: var(--fruet-color-surface-warm);
  border: 1px solid var(--fruet-color-border);
  border-radius: 4px;
  font-family: var(--fruet-font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: var(--fruet-color-primary);
  position: relative;
}

.prose a {
  color: var(--fruet-color-primary);
  text-decoration-thickness: 1px;
}

/* Single Article Header */
.single-article {
  padding-bottom: 80px;
}

.article-heading {
  max-width: 860px;
  margin-bottom: 36px;
}

.article-heading h1 {
  font-size: var(--fruet-font-size-h1);
  margin-bottom: 20px;
}

.article-deck {
  font-size: 19px;
  line-height: 1.8;
  color: var(--fruet-color-muted);
  margin-bottom: 28px;
}

.byline {
  display: flex;
  align-items: center;
  gap: 16px;
}

.byline-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--fruet-color-border);
}

.byline-author {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fruet-color-primary);
}

.byline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fruet-color-subtle);
  margin-top: 3px;
}

.single-cover {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 48px;
  background-color: var(--fruet-color-border-subtle);
  box-shadow: var(--fruet-shadow-md);
}

.single-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-body {
  margin-inline: auto;
  width: min(70ch, calc(100% - 48px));
  font-size: 18px;
  line-height: 1.9;
}

/* Contextual guidance is shared by all articles and area/city pages. */
.article-contact {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin: 44px 0;
  padding: 30px;
  background: var(--fruet-color-surface-card);
  border: 1px solid var(--fruet-color-border);
  border-radius: 14px;
  text-align: left;
}
.article-contact-portrait {align-self: stretch;display: flex;align-items: flex-end;min-width: 0;}
.article-contact-portrait img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  object-position: center bottom;
  margin: 0;
  mask-image: linear-gradient(#000 82%, transparent);
}
.article-contact-copy {min-width: 0;}
.prose .article-contact h2 {font-size: 33px;line-height: 1.12;margin: 0 0 15px;color: var(--fruet-color-primary);}
.prose .article-contact p {font-size: 15px;line-height: 1.8;margin: 0 0 21px;color: var(--fruet-color-muted);}
.prose a.button {color: var(--fruet-color-surface-card);text-decoration: none;}
.prose a.button-secondary {color: var(--fruet-color-primary);}
.article-contact .button {max-width: 100%;min-height: 48px;padding: 13px 18px;font-size: 12px;gap: 15px;}
.article-contact .button span {color: inherit;}
.article-contact small {display: block;font-size: 11px;line-height: 1.7;color: var(--fruet-color-muted);margin-top: 16px;}
@media(max-width: 700px) {
  .article-body {width: calc(100% - 44px);font-size: 17px;}
  .article-contact {grid-template-columns: 1fr;gap: 16px;padding: 25px 22px;margin-block: 34px;}
  .article-contact-portrait {width: 100px;height: 130px;}
  .article-contact-portrait img {height: 145px;object-position: left bottom;}
  .prose .article-contact h2 {font-size: 30px;}
  .prose .article-contact p {font-size: 14px;}
  .article-contact .button {width: 100%;justify-content: space-between;font-size: 11px;}
  .article-contact small {font-size: 10px;}
}
@media(max-width: 360px) {
  .article-body {width: calc(100% - 36px);}
  .article-contact {padding: 22px 18px;}
  .prose .article-contact h2 {font-size: 28px;}
}

.article-disclaimer {
  margin-top: 48px;
  padding: 24px;
  background-color: var(--fruet-color-surface-warm);
  border-radius: 4px;
  border: 1px solid var(--fruet-color-border);
}

.article-disclaimer p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--fruet-color-muted);
  margin: 0;
}

.related {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--fruet-color-border);
}

.related h2 {
  margin-bottom: 32px;
}

/* ==========================================================================
   21. Busca, Filtro e Paginação
   ========================================================================== */
.archive-wrap {
  padding-block: 48px 96px;
}

.search-form {
  max-width: 680px;
  margin-bottom: 28px;
}

.search-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fruet-color-primary);
  margin-bottom: 8px;
}

.search-input-group {
  display: flex;
  gap: 12px;
}

.search-input-group input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  background-color: #FFFFFF;
  border: 1px solid var(--fruet-color-border);
  border-radius: 3px;
  padding: 12px 18px;
  font-size: 15px;
}

.category-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.category-filter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--fruet-color-border);
  border-radius: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fruet-color-ink);
  text-decoration: none;
  background-color: #FFFFFF;
  transition: all 0.2s;
}

.category-filter a:hover,
.category-filter a.is-active {
  background-color: var(--fruet-color-primary);
  border-color: var(--fruet-color-primary);
  color: #FFFFFF;
}

.pagination {
  margin-top: 56px;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--fruet-color-border);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fruet-color-ink);
  background-color: #FFFFFF;
}

.page-numbers.current {
  background-color: var(--fruet-color-primary);
  border-color: var(--fruet-color-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   22. Página 404 e Estados Vazios
   ========================================================================== */
.empty-state-wrap {
  padding-block: 80px 120px;
}

.empty-state {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.empty-state-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fruet-color-primary);
  margin-bottom: 16px;
}

.empty-state h1, .empty-state h2 {
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
}

.empty-state-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* ==========================================================================
   23. Design Responsivo e Breakpoints Flutuantes
   ========================================================================== */
@media (max-width: 1080px) {
  .wrap {
    width: calc(100% - 48px);
  }

  .hero-grid {
    gap: 28px;
  }

  .about-layout {
    grid-template-columns: 380px 1fr;
    gap: 48px;
  }

  .steps-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .articles {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand-col {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .header-inner {
    min-height: 84px;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    min-width: 72px;
    padding: 8px 12px;
    border: 1px solid var(--fruet-color-border);
    border-radius: 4px;
    color: var(--fruet-color-primary);
    font-size: 13px;
    font-weight: 600;
  }

  .menu-toggle-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }

  .menu-toggle-bars .bar {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--fruet-color-primary);
    border-radius: 1px;
    transition: transform 0.2s;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background-color: var(--fruet-color-surface-card);
    border-bottom: 2px solid var(--fruet-color-primary);
    box-shadow: var(--fruet-shadow-lg);
    padding: 24px 32px 32px;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .main-nav a {
    font-size: 16px;
    min-height: 48px;
    width: 100%;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy {
    padding-block: 60px 32px;
  }

  .hero-visual {
    height: 480px;
    justify-content: center;
  }

  .hero-portrait img {
    max-height: 480px;
  }

  .area-list {
    grid-template-columns: 1fr;
  }

  .area-row {
    padding: 24px;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-media {
    max-width: 440px;
    margin: 0 auto;
  }

  .region-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .callback-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .newsletter-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .page-layout {
    flex-direction: column;
  }

  .page-aside {
    width: 100%;
  }

  .aside-sticky {
    position: static;
  }
}

@media (max-width: 480px) {
  .area-row { grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; padding: 22px 18px; }
  .area-icon-wrap { width: 38px; height: 42px; }
  .area-content h3 { font-size: 25px; }
  .area-arrow { width: 18px; }
}

@media (max-width: 640px) {
  .wrap {
    width: calc(100% - 36px);
  }

  .intro-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .steps-flow {
    grid-template-columns: 1fr;
  }

  .articles {
    grid-template-columns: 1fr;
  }

  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsletter-fields {
    flex-direction: column;
  }

  .search-input-group {
    flex-direction: column;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-brand-col {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 96px; /* Respiro para não sobrepor o WhatsApp dock */
  }

  .tf-wa-widget {
    right: 16px;
    bottom: 16px;
  }

  .tf-wa-trigger {
    padding: 4px 14px 4px 4px;
    min-height: 52px;
  }

  .tf-wa-trigger__copy small {
    display: none;
  }

  .tf-wa-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(39, 35, 34, 0.55);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.25s var(--fruet-ease-natural);
  }

  .tf-wa-widget.is-open .tf-wa-backdrop {
    display: block;
    opacity: 1;
  }

  .tf-wa-popover {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    z-index: 1000;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 -12px 36px rgba(61, 32, 40, 0.28);
    transform: translateY(100%);
  }

  .tf-wa-popover.is-open {
    transform: translateY(0);
  }
}

/* ==========================================================================
   24. Preferência por Movimento Reduzido (Acessibilidade)
   ========================================================================== */
@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;
  }

  .button:hover,
  .article:hover,
  .article-cover:hover img,
  .instagram-post:hover img,
  .tf-wa-trigger:hover,
  .tf-wa-trigger:hover .tf-wa-popout-img,
  .tf-wa-option-btn:hover {
    transform: none !important;
  }

  .tf-wa-trigger-dot {
    animation: none !important;
  }
}

.admin-bar .site-header {
  scroll-margin-top: 32px;
}

/* Full-width composition: the original seated photograph is a separate layer. */
.callback-section{position:relative;isolation:isolate;padding:72px 0 0;background:#e9e0d5;border:0;overflow:clip}
.callback-ambient{position:absolute;inset:0;z-index:-3;display:block}
.callback-ambient img{width:100%;height:100%;object-fit:cover}
.callback-scene{position:absolute;inset:0 auto 0 0;width:54%;z-index:-2;mask-image:linear-gradient(90deg,#000 0%,#000 76%,transparent 100%)}
.callback-seated,.callback-seated img{display:block;width:100%;height:100%}
.callback-seated img{object-fit:cover;object-position:center 26%}
.callback-section:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#271b1de8,transparent 48%),linear-gradient(90deg,transparent 42%,#f4f0e944 55%,#f4f0e9b8);pointer-events:none}
.callback-layout{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:end;position:relative;padding-bottom:55px;min-height:690px}
.callback-intro{padding-bottom:40px;max-width:470px;color:#fcfaf6}
.callback-intro :is(h1,h2){font-size:clamp(38px,3.8vw,56px);line-height:1.05;color:inherit;text-wrap:balance;margin:0}
.callback-intro>p{font-size:15px;line-height:1.85;margin:24px 0;color:inherit}
.callback-intro .callback-credential{font-size:11px;font-weight:600;letter-spacing:.03em;text-align:left;text-transform:none;color:inherit;margin:28px 0 0}
.callback-panel{background:#fcfaf6f7;padding:34px 36px;border:0;border-radius:12px;box-shadow:0 16px 44px #271b1d16}
.callback-form :is(h2,h3){font-size:37px;line-height:1.05;margin:0 0 16px;color:var(--fruet-color-primary)}
.callback-form .callback-form-intro{font-size:13px;line-height:1.8;margin:0 0 22px;color:var(--fruet-color-muted)}
.callback-form>label:not(.consent){display:block;font-size:12px;font-weight:600;color:var(--fruet-color-ink);margin:16px 0 7px}
.callback-form input:not([type=hidden]):not([type=checkbox]),.callback-form select{display:block;width:100%;min-height:49px;border:1px solid #c8bcb2;background:#f4f0e9;border-radius:4px;padding:12px;font:inherit;font-size:16px;color:var(--fruet-color-ink)}
.callback-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:11px;line-height:1.7;margin:21px 0;color:var(--fruet-color-muted)}
.callback-form .consent input{flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--fruet-color-primary)}
.callback-form .button{width:100%}
.callback-form .form-status{font-size:12px;margin:12px 0 0;color:var(--fruet-color-primary)}
.callback-form .form-status[data-error]{color:var(--fruet-color-status-error)}
.callback-form .callback-note{font-size:10px;line-height:1.8;color:var(--fruet-color-muted);margin:16px 0 0}
.callback-address{display:flex;position:relative;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #fcfaf644;margin-top:0;padding-block:24px;color:#fcfaf6;font-size:12px}
.callback-address address{font-style:normal;color:inherit;max-width:650px}
.callback-address .textlink{color:inherit;flex-shrink:0}
.callback-address .icon{filter:brightness(0) invert(1)}
@media(max-width:1100px) and (min-width:701px){.callback-section{padding-top:45px}.callback-section .callback-layout{gap:40px;grid-template-columns:1fr 1fr}.callback-panel{padding:28px}.callback-intro :is(h1,h2){font-size:43px}}
@media(max-width:700px){
 .callback-section{padding:0 0 15px;background:#e9e0d5}
 .callback-ambient img{object-position:center bottom}
 .callback-scene{width:100%;height:640px;inset:0 0 auto;mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%)}
 .callback-seated img{object-position:center top;object-fit:cover}
 .callback-section:before{background:linear-gradient(0deg,#e9e0d5 30%,transparent 80%);inset:360px 0 0}
 .callback-section .callback-layout{display:block;min-height:0;padding-top:400px;padding-bottom:28px}
 .callback-intro{max-width:100%;padding-bottom:25px;text-shadow:0 2px 20px #271b1d;color:#fff}
 .callback-intro :is(h1,h2){font-size:40px;max-width:380px}
 .callback-intro>p{font-size:13px;margin:16px 0;max-width:300px}
 .callback-intro .callback-credential{margin-top:15px;font-size:10px}
 .callback-panel{padding:29px 23px;box-shadow:0 12px 35px #3d202812}
 .callback-form :is(h2,h3){font-size:34px}
 .callback-address{display:block;border-top:1px solid #c4b5a8;padding-block:20px;color:var(--fruet-color-ink);font-size:11px}
 .callback-address .textlink{margin-top:15px;color:var(--fruet-color-primary)}
 .callback-address .icon{filter:none}
}
@media(max-width:360px){.callback-section .callback-layout{padding-top:340px}.callback-scene{height:580px}.callback-intro :is(h1,h2){font-size:36px}.callback-panel{padding:26px 19px}}

.hero h1{font-size:clamp(44px,4.5vw,64px);text-wrap:balance}.hero-copy{padding-block:68px 84px}.hero-visual{mask-image:linear-gradient(#000 0%,#000 77%,transparent 100%)}.hero{border-bottom:0}.tf-wa-profile>img{border-radius:50%;object-fit:cover}.tf-wa-option-btn .icon{width:22px;height:22px}.tf-wa-option-btn{text-decoration:none}.tf-wa-popover[hidden]{display:none}.tf-wa-popover__body .tf-wa-privacy-note{font-size:11px;line-height:1.8;color:var(--fruet-color-muted)}.tf-wa-trigger:focus-visible{outline:3px solid var(--fruet-color-primary);outline-offset:4px}@media(max-width:900px){html:not(.fruet-js) .main-nav{display:block;position:static;visibility:visible;opacity:1;transform:none;width:100%;max-height:none}html:not(.fruet-js) .header-inner{flex-wrap:wrap}html:not(.fruet-js) .menu-toggle{display:none}}@media(max-width:700px){.hero h1{font-size:44px;line-height:1.05}.hero-copy{padding-block:45px 15px}.callback-intro{text-shadow:none;color:var(--fruet-color-primary)}.callback-section:before{background:linear-gradient(0deg,#e9e0d5 65%,transparent 100%);inset:330px 0 0}}
.hero{isolation:isolate;background:#f1e9df;border:0}
.hero-scene{position:absolute;inset:0;z-index:-2;display:block;pointer-events:none;mask-image:linear-gradient(transparent,#000 8%,#000 82%,transparent 100%)}
.hero-scene img{width:100%;height:100%;object-fit:contain;object-position:right bottom}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f4f0e9b8,transparent 52%);pointer-events:none}
.hero:after{content:'';position:absolute;inset:auto 0 0;height:90px;z-index:-1;background:linear-gradient(transparent,var(--ivory));pointer-events:none}
.hero .hero-grid{min-height:800px;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px}
.hero .hero-copy{padding-block:70px 85px}
.hero .hero-copy h1{font-size:clamp(43px,4.4vw,62px);line-height:1.06;max-width:600px;text-wrap:balance}
.hero .hero-intro{max-width:500px;font-size:15px;line-height:1.85;color:#51443e}
.hero .hero-meta{flex-wrap:wrap;letter-spacing:0;color:#60534c;font-size:11px;gap:10px}
.hero .hero-credential{font-size:10px;letter-spacing:.025em}
.hero .hero-badges{height:auto;align-self:end;padding-bottom:100px;display:flex;flex-direction:column;align-items:flex-start;gap:13px;mask:none;animation:hero-settle .7s var(--fruet-ease-out) both}
.hero-badge{display:flex;align-items:center;gap:12px;padding:12px 17px;background:#fcfaf6ed;color:var(--wine);border-radius:12px;box-shadow:0 8px 28px #3d202814;font-size:11px;line-height:1.65}
.hero-badge:nth-child(2){margin-left:35px}
.hero-badge .icon{width:30px;height:30px;padding:4px;background:#ede4d9;border-radius:7px}
.hero-badge strong{font-weight:600}
@media(min-width:1600px){.hero-scene img{object-fit:cover;object-position:right 60%}.hero .hero-grid{min-height:840px}}
@media(max-width:1100px) and (min-width:701px){.hero .hero-grid{gap:25px;min-height:780px;grid-template-columns:1.2fr 1fr}.hero .hero-copy h1{font-size:48px}.hero .hero-intro{font-size:14px}.hero .hero-badges{padding-bottom:65px}.hero-badge{font-size:10px;padding:10px 12px}}
@media(max-width:700px){
 .hero .hero-grid{display:block;min-height:0;padding-bottom:390px}
 .hero .hero-copy{padding-block:40px 15px}
 .hero .hero-copy h1{font-size:43px;line-height:1.05;max-width:440px;margin-bottom:23px}
 .hero .hero-intro{font-size:14px;line-height:1.8;margin-bottom:25px;max-width:100%}
 .hero .hero-actions{gap:16px;margin-bottom:18px}
 .hero .hero-meta{font-size:10px;gap:7px}
 .hero-scene{top:auto;bottom:0;height:auto;aspect-ratio:1086/1448;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}
 .hero-scene img{object-fit:contain;object-position:bottom}
 .hero:before{background:linear-gradient(var(--ivory) 0%,#f4f0e9f5 44%,transparent 66%)}
 .hero .hero-badges{position:absolute;bottom:22px;left:0;right:0;display:flex;align-items:flex-start;gap:9px;padding:0;height:auto}
 .hero-badge{font-size:10px;padding:10px 13px;background:#fcfaf6ed;box-shadow:0 6px 20px #3d20280d}
 .hero-badge:nth-child(2){margin-left:25px}
 .hero-badge .icon{width:27px;height:27px}
}
@media(max-width:360px){.hero .hero-copy h1{font-size:38px}.hero .hero-grid{padding-bottom:340px}.hero .hero-credential{font-size:9px}}


@media(min-width:701px){.hero-scene{inset:auto 0 0;height:auto;aspect-ratio:1672/941;mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent)}}@media(max-width:700px){.review-grid{grid-template-columns:minmax(0,1fr);gap:22px}.review{min-width:0}.review-origin{flex-wrap:wrap;gap:10px}.review-origin>a{margin-left:auto}.review figcaption strong{font-size:25px}.header-inner{gap:14px}.brand img{max-width:100%;width:230px}.menu-toggle{min-width:65px;padding-inline:9px}}@media(max-width:360px){.brand img{width:202px}.header-inner{gap:9px}.menu-toggle{min-width:56px;font-size:12px}}

@media(min-width:701px){.hero-scene{max-height:100%}.hero-scene img{object-fit:contain;object-position:right bottom}}

.hero-scene{width:100%}

@media(max-width:700px){.single-cover img,.article-cover img{aspect-ratio:4/5;object-fit:contain;height:auto}}
@media(max-width:700px){.instagram-post:nth-child(n+3){display:none}}

/* Regional presence, editorial reading and directory pages — 03/11/2026. */
.brand-link { display:inline-flex;align-items:center;gap:12px;text-decoration:none; }
.footer-contact-links .brand-link { display:flex;align-items:center;gap:12px;width:fit-content; }
.brand-mark { position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;overflow:hidden; }
.brand-mark img,.tf-wa-trigger__icon img,.tf-wa-send img { filter:brightness(0) invert(1); }
.brand-mark--whatsapp { background:#128c4c; }
.brand-mark--instagram { background:linear-gradient(145deg,#6241b3,#c32c84 55%,#ed983f); }
.brand-mark::after { content:'';position:absolute;inset:-12px auto -12px -16px;width:10px;background:#fff;opacity:0;transform:translateX(0) rotate(25deg);pointer-events:none; }
@media(hover:hover) and (pointer:fine) {
  .brand-link:hover .brand-mark::after { opacity:.55;transform:translateX(70px) rotate(25deg);transition:transform 250ms var(--fruet-ease-natural),opacity 180ms; }
}
#tf-wa-popover[hidden],#tf-wa-send[hidden] { display:none!important; }
.tf-wa-popover { max-height:calc(100dvh - 120px);overflow-y:auto; }
.tf-wa-form { display:grid;gap:8px; }
.tf-wa-form>label,.tf-wa-form legend { font-size:13px;font-weight:600;color:var(--fruet-color-ink); }
.tf-wa-form>input { font:inherit;font-size:16px;width:100%;min-height:45px;padding:10px 12px;border:1px solid var(--fruet-color-border);border-radius:6px;background:var(--fruet-color-surface-card);color:var(--fruet-color-ink);margin-bottom:8px; }
.tf-wa-form fieldset { border:0;padding:0;margin:4px 0;min-width:0; }
.tf-wa-form legend { padding:0;margin-bottom:10px; }
.tf-wa-topic { display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--fruet-color-border);border-radius:6px;font-size:13px;line-height:1.5;margin-bottom:8px;cursor:pointer; }
.tf-wa-topic:has(input:checked) { border-color:var(--fruet-color-primary);background:#eee3df; }
.tf-wa-topic input { accent-color:var(--fruet-color-primary);width:16px;height:16px;flex:0 0 auto; }
.tf-wa-form-hint { font-size:12px;line-height:1.65;margin:2px 0 8px;color:var(--fruet-color-muted); }
.tf-wa-send { display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px;background:#087a3d;color:#fff;border-radius:6px;text-decoration:none;font-size:14px;font-weight:600; }
.tf-wa-send:focus-visible { outline:3px solid var(--fruet-color-primary);outline-offset:3px; }
.tf-wa-send:hover { background:#066331;color:#fff; }
.tf-wa-widget.is-nudging .tf-wa-trigger { animation:tf-wa-nudge 480ms var(--fruet-ease-natural); }
.tf-wa-trigger { position:relative;z-index:1001; }
.tf-wa-profile>img { width:46px;height:46px;object-fit:cover;object-position:center 18%;flex:0 0 auto; }
.tf-wa-popover__header { position:sticky;top:0;z-index:2; }
@keyframes tf-wa-nudge { 0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-2px) rotate(-1deg)}50%{transform:translateX(2px) rotate(1deg)}75%{transform:translateX(-1px) rotate(-.5deg)} }
@media(prefers-reduced-motion:reduce) { .tf-wa-widget.is-nudging .tf-wa-trigger {animation:none}.brand-mark::after {transition:none!important;transform:none!important;opacity:0!important} }
@media(max-width:640px) { .tf-wa-popover {bottom:90px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 112px);border-radius:14px}.tf-wa-popover__body {padding-bottom:24px} }
.region { isolation:isolate; overflow:clip; }
.region-ambient { position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;mask-image:linear-gradient(transparent,#000 30%,#000 75%,transparent); }
.region-ambient img { width:100%;height:100%;object-fit:cover;object-position:right center; }
.region-layout { grid-template-columns:1fr 1.05fr;gap:64px;align-items:start; }
.region-info>p { font-size:18px;line-height:1.8; }
.region-info>.textlink { font-size:15px; }
.region-map { margin:35px -15px 0; }
.region-map :is(svg,img) { display:block;width:100%;height:auto; }
.region-map-city { cursor:pointer;pointer-events:bounding-box; }
.region-map-city:is(:hover,:focus-visible,.is-active) text { fill:var(--fruet-color-primary-deep);font-weight:600;stroke:#fff;stroke-width:8px; }
.region-map-city:is(:hover,:focus-visible,.is-active) circle { fill:var(--fruet-color-primary-deep);stroke:#fff;stroke-width:3px; }
.region-map-city:focus-visible { outline:2px solid var(--fruet-color-primary);outline-offset:5px; }
.region .city-list a.is-active { background:#eee3df;color:var(--fruet-color-primary-deep);border-radius:6px; }
.region-map figcaption { margin:8px 15px 0;font-size:12px;line-height:1.8;color:var(--fruet-color-muted); }
.region-map figcaption a { color:inherit;text-underline-offset:4px; }
.region .city-list { columns:auto;display:grid;grid-template-columns:1fr; }
.region .city-list a { font-size:18px;line-height:1.5;min-height:54px;gap:18px; }
.region .city-list a .icon { width:20px;height:20px; }
.region .fine-print { font-size:14px;color:var(--fruet-color-muted);line-height:1.8; }
.journal { background:var(--fruet-color-surface-card);isolation:isolate;position:relative;overflow:clip;border-top:0; }
.journal::before { content:'';position:absolute;inset:0;z-index:-1;background:url('images/editorial-desktop.webp') right top/cover no-repeat;opacity:.1;mask-image:linear-gradient(#000,transparent 72%);pointer-events:none; }
.journal-intro { max-width:540px;font-size:17px;line-height:1.8;margin:20px 0 0; }
.journal .article { padding:24px;border-radius:14px;box-shadow:none; }
.journal .article h3 { font-size:29px;line-height:1.18; }
.journal .article p { font-size:16px;line-height:1.8; }
.reviews-section { background:var(--fruet-color-primary-deep);color:var(--fruet-color-surface-card);border-top:1px solid var(--fruet-color-bronze);position:relative;isolation:isolate;overflow:clip; }
.reviews-section::before { content:'';position:absolute;inset:0;z-index:-1;background:url('images/ambiente-desktop.webp') right center/cover no-repeat;opacity:.06;pointer-events:none; }
.reviews-section .section-heading { border-color:#c9b69f55; }
.reviews-section .section-heading h2 { color:var(--fruet-color-surface-card); }
.reviews-section .section-heading>p { color:#eaded5;font-size:16px; }
.reviews-section .review { border:0;box-shadow:none;border-radius:14px;padding:32px; }
.reviews-section .review blockquote p { font-size:16px;line-height:1.85; }
.reviews-section .reviews-note { color:#eaded5;font-size:13px;line-height:1.85; }
.page-layout { gap:48px; }
.page-prose { font-size:18px;line-height:1.8; }
.page-kind--areas,.page-kind--cities { position:relative;isolation:isolate; }
.page-kind--areas::before,.page-kind--cities::before { content:'';position:absolute;inset:0;z-index:-1;background:url('images/ambiente-desktop.webp') right top/cover no-repeat;opacity:.1;mask-image:linear-gradient(transparent,#000 22%,transparent 80%);pointer-events:none; }
.page-kind--areas .page-prose,.page-kind--cities .page-prose { max-width:none;width:100%; }
.page-kind--areas .page-prose>p,.page-kind--cities .page-prose>p { max-width:78ch; }
.page-prose .area-list { margin-block:36px; }
.page-prose .area-content h3 { margin:0;font-size:28px; }
.page-prose .area-content p { margin:10px 0 0;font-size:16px;line-height:1.75; }
.page-prose .area-row { color:var(--fruet-color-ink); }
.page-prose .area-row h3 { color:var(--fruet-color-ink); }
.page-kind--cities .page-prose>.city-list { padding:0;columns:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin:36px 0; }
.page-kind--cities .city-list li { margin:0; }
.page-kind--cities .city-list a { font-size:19px;min-height:70px;gap:20px; }
.page-kind--cities .city-list .icon { width:22px;height:22px; }
@media(max-width:900px) {
  .region-layout { grid-template-columns:1fr;gap:40px; }
  .region-map { max-width:620px;margin-inline:0; }
  .region .city-list { grid-template-columns:1fr 1fr;gap:0 28px; }
  .page-layout { gap:40px; }
}
@media(max-width:700px) {
  .region-info>p { font-size:17px; }
  .region-map { margin:25px -10px 0; }
  .region .city-list { grid-template-columns:1fr; }
  .region .city-list a { font-size:18px;min-height:58px; }
  .journal::before { background-image:url('images/editorial-mobile.webp'); }
  .journal .article h3 { font-size:28px; }
  .reviews-section::before { background-image:url('images/ambiente-mobile.webp'); }
  .reviews-section .review { padding:26px; }
  .page-kind--cities .page-prose>.city-list { grid-template-columns:1fr; }
  .page-kind--cities .city-list a { min-height:64px;font-size:18px; }
  .page-prose .area-content h3 { font-size:25px; }
  .page-prose .area-content p { font-size:15px; }
}