/* /public/css/themes/default.css
   Tema padrão (verde)
   Obs: arquivo “limpo” (sem duplicidades) + hover dos ícones sociais em verde do tema.
*/

/* =========================================================
   TOKENS DO TEMA (DEFAULT)
========================================================= */
:root[data-theme="default"]{
  /* =========================
     BRAND (muda por tema)
  ========================= */
  --brand: #38cc29;
  --brand-hover: #2baa21;
  --brand-700: #1e8f16;
  --brand-soft: #e9fbe7;

  --brand-ink: #0b2a09;

  --brand-ring: rgba(56,204,41,.12);
  --brand-ring-strong: rgba(56,204,41,.55);
  --brand-shadow: rgba(56,204,41,.18);

  --on-brand: #fff;

  /* =========================
     NEUTROS (geralmente não mudam por tema)
  ========================= */
  --surface: #fff;
  --surface-muted: #f7f7f7;
  --surface-muted-2: #f5f5f5;
  --surface-2: rgba(0,0,0,.03);

  --text: rgba(17,17,17,.92);
  --heading: #222;

  --text-muted: #777;
  --text-muted-1: #444444;
  --text-muted-2: #666;

  --border-subtle: #f1f1f1;
  --border-mid: #dddddd;

  --card-border: rgba(17,17,17,.10);
  --card-shadow: rgba(0,0,0,.06);

  /* =========================
     ALIASES (não repetem cor)
  ========================= */
  --text-strong: var(--heading);
  --border-soft: var(--border-subtle);

  /* =========================
     ALIASES extras (você usa)
  ========================= */
  --text-strong-2: #333;     /* usado em títulos */
  --text-muted-3: #2f5a2f;   /* usado em subtítulos da obra */
  --border-soft-2: #dfe7df;  /* usado no círculo da obra */

  /* =========================
     LINKS
  ========================= */
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --link-soft: #eff6ff;

  /* borda genérica (chips/pills/inputs/scrollbar) */
  --border: #d1d5db;

  /* inputs/checkbox custom (filtros) */
  --control-bg: var(--surface);
  --control-border: var(--brand);
  --control-focus-ring: color-mix(in srgb, var(--brand) 35%, transparent);

  /* sombras/overlay */
  --shadow-float: rgba(0,0,0,.25);

  /* =========================
     FOOTER
  ========================= */
  --footer-text: #ffffff;

  --footer-top-bg: #343b46;
  --footer-bottom-bg: #242830;

  --footer-title: var(--footer-text);
  --footer-title-underline: var(--footer-text);

  --footer-link: #f5f5f5;
  --footer-link-hover: #ffffff;

  --footer-social-border: #f5f5f5;
  --footer-social-icon: #f5f5f5;

  /* ✅ hover do ícone social em verde do tema */
  --footer-social-hover-bg: #f5f5f5;
  --footer-social-hover-icon: var(--brand);

  --footer-legal-link: #d0d4db;
  --footer-legal-link-hover: #ffffff;

  --footer-muted: #c0c5d0;

  /* (NOVO) Accent opcional p/ sections que usam vermelho (Designers) */
--accent: #b00815;

/* (NOVO) POIs (mapa) — cores por categoria (centraliza tudo num lugar só) */
--poi-food: #0082f9;
--poi-convenience: #f03b11;
--poi-education: #00ec00;
--poi-leisure: #005200;
--poi-health: #ff0a90;

 /* =========================
     TOKENS USADOS NA SECTION DE VÍDEOS
     (para não cair em fallback)
  ========================= */

  /* fundos/sombras do player */
  --video-black: #000;
  --shadow-strong: rgba(0,0,0,0.16);
  --shadow-heavy: rgba(0,0,0,0.70);

  /* textos auxiliares dos cards */
  --text-subtle: var(--text-muted-2);
  --text-faint: var(--text-muted);

  /* avatar/bolinhas/miudezas */
  --chip-bg: var(--surface-muted-2);

  /* filtro ativo (queremos seguir o tema, não um azul fixo) */
  --brand-blue: var(--brand);

  /* CTA do modal (segue o tema) */
  --cta: var(--brand);
  --cta-hover: var(--brand-hover);

  /* YouTube (se quiser manter vermelho padrão, mas tokenizado) */
  --youtube: #ff0000;
  --youtube-hover: #e00000;

  /* =========================
   PROJECT STATUS (obra / fase) — tokens
========================= */
--status-default: #f97316;

--status-scp: #6b7280;
--status-futuro-lancamento: #0ea5e9;
--status-breve-lancamento: #6366f1;
--status-lancamento: #22c55e;
--status-obra-iniciada: #eab308;
--status-obra-acelerada: #f97316;
--status-obra-fase-final: #f59e0b;
--status-pronto-para-morar: #111827;

/* (opcional) sombra e texto do badge */
--status-badge-text: #ffffff;
--status-badge-shadow: rgba(0,0,0,0.35);

/* =========================
   UX / Brand (tokens)
========================= */
--ux-green: #38cc29;
--ux-green-hover: #2fb321;
--ux-green-press: #249a1b;

/* neutros */
--ux-text: #111827;
--ux-text-strong: #121212;
--ux-text-muted: rgba(17,17,17,.65);
--ux-text-soft: rgba(17,17,17,.60);
--ux-border: rgba(17,17,17,.08);
--ux-border-strong: rgba(17,17,17,.14);
--ux-border-stronger: rgba(17,17,17,.12);

/* superfícies */
--ux-bg: #ffffff;
--ux-bg-soft: #f6f7f8;
--ux-chip-bg: rgba(56,204,41,.12);

/* foco */
--ux-focus: rgba(56,204,41,.25);

/* sombras */
--ux-shadow-sm: 0 10px 18px rgba(0,0,0,.10);
--ux-shadow-md: 0 14px 30px rgba(0,0,0,.18);
--ux-shadow-lg: 0 18px 60px rgba(0,0,0,.25);

/* overlays */
--ux-overlay: rgba(10,12,16,.62);
--ux-overlay-blur: 6px;

/* “ink” do verde (pra texto escuro em cima do verde) */
--ux-green-ink: #0b2a09;

/* search */
--ux-search-border: rgba(56,204,41,.28);
--ux-search-border-focus: rgba(56,204,41,.60);
--ux-search-ring: rgba(56,204,41,.18);

--portal-brand: #38cc29;
  --portal-brand-ink: #1b7a12;
  --portal-brand-soft: rgba(56,204,41,.12);
  --portal-brand-focus: rgba(56,204,41,.55);
  --portal-brand-ring: rgba(56,204,41,.12);
  --portal-brand-hover-bg: #e9fbe7;

  /* surfaces */
  --portal-surface: #ffffff;
  --portal-overlay: rgba(0,0,0,.55);

  /* text */
  --portal-text: rgba(17,17,17,1);
  --portal-text-70: rgba(17,17,17,.70);
  --portal-text-80: rgba(17,17,17,.80);
  --portal-text-75: rgba(17,17,17,.75);
  --portal-text-65: rgba(17,17,17,.65);

  /* borders & shadows */
  --portal-border: rgba(17,17,17,.12);
  --portal-border-soft: rgba(17,17,17,.10);
  --portal-border-strong: rgba(17,17,17,.55);
  --portal-shadow: 0 18px 50px rgba(0,0,0,.25);

  /* toast colors */
  --portal-ok-bg: rgba(16,185,129,.12);
  --portal-ok-border: rgba(16,185,129,.25);
  --portal-ok-text: #065f46;

  --portal-err-bg: rgba(239,68,68,.10);
  --portal-err-border: rgba(239,68,68,.20);
  --portal-err-text: #7f1d1d;

}

/* =========================================================
   CTAs / MODAL / FORM
========================================================= */
.project-summary-cta{
  background: var(--brand, #38cc29);
  color: #fff;
  border-color: var(--brand, #38cc29);
}
.project-summary-cta:hover{
  background: var(--brand-hover, #2baa21);
  border-color: var(--brand-hover, #2baa21);
}

.project-summary-cta-secondary{
  background: var(--surface, #fff);
  color: var(--brand, #38cc29);
  border-color: var(--brand, #38cc29);
}
.project-summary-cta-secondary:hover{
  background: var(--brand-soft, #e9fbe7);
}

.project-summary-views-icon,
.project-summary-icon{
  color: var(--brand, #38cc29);
}
@media (max-width: 600px){
  .project-summary-icon{ color: var(--brand, #38cc29); }
}

.portal-modal__badge{
  background: var(--brand-ring, rgba(56,204,41,.12));
  color: var(--brand-700, #1e8f16);
}

.lead-form__input:focus,
.lead-form__textarea:focus{
  border-color: var(--brand-ring-strong, rgba(56,204,41,.55));
  box-shadow: 0 0 0 4px var(--brand-ring, rgba(56,204,41,.12));
}
.lead-form__helper i{ color: var(--brand-700, #1e8f16); }

.lead-form__submit{
  background: var(--brand, #38cc29);
  color: var(--brand-ink, #0b2a09);
  box-shadow: 0 10px 20px var(--brand-shadow, rgba(56,204,41,.18));
}

/* =========================================================
   SECTION – FICHA TÉCNICA (tokenizada)
========================================================= */
.section-techsheet{ background: var(--surface, #fff); }

.tech-intro-text{ color: var(--text-muted-2, #444); }

.tech-intro-cta{
  background: var(--brand, #38cc29);
  color: #fff;
}
.tech-intro-cta:hover{ background: var(--brand-hover, #2baa21); }

.section-techsheet-body{ background: var(--surface-muted, #f7f7f7); }

.tech-item dt{ color: var(--brand, #38cc29); }
.tech-item dd{ color: var(--text-muted-2, #444); }

.techsheet-download{
  background: var(--brand, #38cc29);
  color: #fff;
}
.techsheet-download:hover{ background: var(--brand-hover, #2baa21); }

/* =========================================================
   AMENITIES + DIFFERENTIALS + OBRA (só cores)
========================================================= */
/* AMENITIES */
.project-amenities-title{ color: var(--text-strong-2, #333); }
.project-amenity-icon{ color: var(--brand, #38cc29); }
.project-amenity-text{ color: var(--text-muted, #555); }

/* DIFFERENTIALS */
.project-differentials{
  background: var(--surface, #fff);
  border-top-color: var(--border-soft, #f1f1f1);
}
.project-differentials-title{ color: var(--text-strong, #222); }
.project-differential-item{ color: var(--text-muted, #555); }
.project-differential-icon{
  border-color: var(--brand, #38cc29);
  background: var(--brand-soft, #f7fdf6);
  color: var(--brand, #38cc29);
}
.project-differentials-toggle{
  border-color: var(--brand, #38cc29);
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}
.project-differentials-toggle:hover{
  background: var(--brand-hover, var(--brand, #38cc29));
  border-color: var(--brand-hover, var(--brand, #38cc29));
}

/* STATUS DA OBRA */
.project-obra-status{
  background: var(--brand-soft, #f7fbf7);
  border-top-color: var(--brand-ring, rgba(56,204,41,.12));
}

.obra-status-title,
.obra-gallery-title,
.obra-progress-circle-value{
  color: var(--text-strong, #0a1f0a);
}

.obra-status-subtitle,
.obra-gallery-subtitle,
.obra-progress-circle-label{
  color: var(--text-muted-3, #2f5a2f);
}

/* círculo de progresso: só troca cor ativa */
.obra-progress-circle{
  background: conic-gradient(
    var(--brand, #38cc29) calc(var(--obra-progress, 0) * 1%),
    var(--border-soft-2, #dfe7df) 0
  );
}
.obra-progress-circle-inner{
  background: var(--surface, #fff);
  box-shadow: 0 0 0 8px var(--brand-ring, rgba(56,204,41,.12));
}

.obra-status-bar{ background: var(--brand-ring, rgba(56,204,41,.12)); }
.obra-status-bar-fill{ background: var(--brand, #38cc29); }

.obra-thumb{ border-color: var(--brand-ring, rgba(56,204,41,.20)); }
.obra-thumb:hover{
  border-color: var(--brand, #38cc29);
  box-shadow: 0 10px 30px var(--brand-shadow, rgba(56,204,41,.18));
}

.obra-lightbox-close{ color: #fff; }
.obra-lightbox-caption{ color: rgba(255,255,255,0.88); }

/* =========================================================
   NAV ÍCONES / BOTÕES (tema)
========================================================= */
.portal-center-nav .nav-phase-icon,
.portal-action-icon,
.portal-btn-icon{
  color: var(--brand) !important;
}

.portal-center-nav .nav-phase-link:hover,
.portal-action-link:hover{
  color: var(--brand-hover) !important;
}
.portal-center-nav .nav-phase-link:hover .nav-phase-icon,
.portal-action-link:hover i{
  color: var(--brand-hover) !important;
}

/* botão sair */
.portal-logout-btn:hover,
.portal-logout-btn:focus,
.portal-logout-btn:focus-visible{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.portal-logout-btn:active{
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  color: #fff !important;
}
.portal-logout-btn:hover i,
.portal-logout-btn:focus i,
.portal-logout-btn:active i{
  color: #fff !important;
}

/* auth buttons (bootstrap) */
.portal-auth-area .btn.btn-outline-dark{ border-color: var(--brand) !important; }
.portal-auth-area .btn.btn-outline-dark:hover,
.portal-auth-area .btn.btn-outline-dark:focus,
.portal-auth-area .btn.btn-outline-dark:focus-visible{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.portal-auth-area .btn.btn-dark{ border-color: var(--brand) !important; }
.portal-auth-area .btn.btn-dark:hover,
.portal-auth-area .btn.btn-dark:focus,
.portal-auth-area .btn.btn-dark:focus-visible{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* =========================================================
   HERO (carousel / badges / features)
========================================================= */
#heroCarousel .btn-carousel,
.btn-carousel{
  background: var(--brand) !important;
  color: #fff !important;
}
#heroCarousel .btn-carousel:hover,
.btn-carousel:hover{
  background: var(--brand-hover) !important;
}
#heroCarousel .btn-carousel:active,
.btn-carousel:active{
  background: var(--brand-700) !important;
}

.hero-carousel .project-ref-badge{
  background: var(--brand) !important;
  color: #fff !important;
}
.hero-carousel .project-ref-badge i{ color: #fff !important; }
.hero-carousel .hero-feat i{ color: var(--brand) !important; }

/* =========================================================
   SEARCH PAGE (fundos / header / ordenar / dropdown / paginação)
========================================================= */
body.page-search .search-header-extra,
body.page-search .section-search-results,
body.page-search .section-search-results > .container,
body.page-search .search-results-container{
  background: var(--surface-muted, #f7f7f7);
}

.search-header,
.search-header--fixed,
body.page-search .search-header--fixed{
  background: var(--surface, #fff);
  border-bottom-color: var(--border-subtle, #f1f1f1);
}

.search-header--fixed,
body.page-search .search-header--fixed{
  box-shadow: 0 2px 6px var(--card-shadow, rgba(0,0,0,.06));
}

/* Botão Ordenar + menu */
.search-sort-wrapper{ position: relative; display: inline-block; }

.search-sort-btn{
  background-color: var(--surface, #fff);
  border: 1px solid var(--card-border, rgba(17,17,17,.10));
  color: var(--text, rgba(17,17,17,.92));
  border-radius: 8px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.search-sort-btn i{ font-size: 11px; }

.search-sort-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background-color: var(--surface, #fff);
  border-radius: 12px;
  border: 1px solid var(--card-border, rgba(17,17,17,.10));
  box-shadow: 0 8px 20px var(--card-shadow, rgba(0,0,0,.06));
  padding: 4px 0;
  z-index: 40;
  display: none;
}
.search-sort-menu.is-open{ display: block; }

.search-sort-option{
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--text-strong-2, #333);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-sort-option:hover{ background-color: var(--surface-muted, #f7f7f7); }
.search-sort-option.is-active{
  font-weight: 600;
  background-color: var(--brand-soft, #e9fbe7);
}
.search-sort-menu hr{
  border-top-color: var(--border-subtle, #f1f1f1) !important;
}

/* Paginação (sem underline) */
.search-pagination .page-btn,
.search-pagination .page-btn:link,
.search-pagination .page-btn:visited{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-pagination .page-btn{
  background: var(--surface, #fff);
  border-color: var(--card-border, rgba(17,17,17,.10));
  color: var(--text, rgba(17,17,17,.92));
}
.search-pagination .page-btn:hover{
  border-color: var(--brand, #38cc29);
  color: var(--brand, #38cc29);
}
.search-pagination .page-btn--active{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  border-color: var(--brand, #38cc29);
}

/* =========================================================
   COMPRA / REGIÃO / FILTROS (cores)
========================================================= */
.buy-type-btn,
.order-btn,
.filters-toggle{
  background: var(--surface, #fff);
  border-color: var(--card-border, rgba(17,17,17,.10));
  color: var(--text, rgba(17,17,17,.92));
}

.buy-type-btn:hover,
.order-btn:hover{
  background: var(--surface-muted, #f7f7f7);
  box-shadow: 0 2px 6px var(--card-shadow, rgba(0,0,0,.06));
}

.buy-type-btn-icon,
.order-btn-icon,
.filters-toggle-icon{
  color: var(--brand, #38cc29);
}

.buy-type-btn-caret,
.order-btn-caret{
  color: var(--text-muted, #777);
}

.buy-region-breadcrumb{ color: var(--text-muted-2, #666); }

.search-map-link{ color: var(--brand, #38cc29); }
.search-map-link:hover{ color: var(--brand-hover, #2baa21); }

.buy-type-dropdown,
.order-dropdown,
.filters-panel{
  background: var(--surface, #fff);
  box-shadow: 0 10px 25px var(--card-shadow, rgba(0,0,0,.06));
}

.buy-type-divider{ background: var(--border-subtle, #f1f1f1); }

.order-option:hover,
.buy-type-checkbox:hover,
.filter-group-body label:hover,
.filter-type-option:hover{
  background: var(--surface-muted, #f7f7f7);
}

.buy-type-subtitle,
.filter-clear-btn,
.filter-type-select-all{
  color: var(--text-muted, #777);
}

.filter-type-title{ color: var(--text, rgba(17,17,17,.92)); }

.filter-type-category-header{ border-bottom-color: var(--border-subtle, #f1f1f1); }
.filter-type-option,
.filter-group{ border-bottom-color: var(--surface-2, rgba(0,0,0,.03)); }

.region-search-label,
.region-search-icon{
  color: var(--brand, #38cc29);
}
.region-search-input-wrapper{
  border-bottom-color: var(--brand, #38cc29);
}
.region-search-input{ color: var(--text, rgba(17,17,17,.92)); }
.region-search-input::placeholder{ color: var(--text-muted, #777); }
.region-search-input-wrapper:focus-within{ border-color: var(--brand-hover, #2baa21); }

/* toggle switch */
.toggle-slider{
  background-color: color-mix(in srgb, var(--text, rgba(17,17,17,.92)) 18%, transparent);
}
.toggle-slider::before{ background-color: var(--surface, #fff); }
.toggle-switch input:checked + .toggle-slider{ background-color: var(--brand, #38cc29); }

/* aplicar filtros */
.filters-apply-btn{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  box-shadow: 0 4px 10px var(--brand-shadow, rgba(56,204,41,.18));
}
.filters-apply-btn:hover{
  background: var(--brand-hover, #2baa21);
  box-shadow: 0 6px 16px var(--brand-shadow, rgba(56,204,41,.18));
}

/* mobile overlay filtros */
@media (max-width: 768px){
  .filters-panel{ background: var(--surface, #fff); }
  .filters-panel-header{ border-bottom-color: var(--border-subtle, #f1f1f1); }
  .filters-close-btn{ color: var(--text, rgba(17,17,17,.92)); }
  .filters-panel-footer{
    border-top-color: var(--border-subtle, #f1f1f1);
    background: var(--surface, #fff);
  }
}

/* =========================================================
   CHECKBOXES (listas) — THEME
========================================================= */
.filter-checkbox-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.filters-panel .filter-checkbox-option,
.filters-panel .filter-type-option{
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
  font-size: 14px;
  color: var(--text, rgba(17,17,17,.92));
  cursor: pointer;
  background: transparent;
}

.filters-panel label{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* checkbox custom */
.filters-panel .filter-checkbox-option input[type="checkbox"],
.filters-panel .filter-type-option input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 4px;

  border: 2px solid var(--control-border, var(--brand));
  background-color: var(--control-bg, var(--surface));

  background-image: none;
  box-shadow: none;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.filters-panel .filter-checkbox-option input[type="checkbox"]:hover,
.filters-panel .filter-type-option input[type="checkbox"]:hover{
  border-color: var(--brand, #38cc29);
}

.filters-panel .filter-checkbox-option input[type="checkbox"]:checked,
.filters-panel .filter-type-option input[type="checkbox"]:checked{
  background-color: var(--brand, #38cc29);
  border-color: var(--brand, #38cc29);
}

/* limpa pseudo antigo */
.filters-panel .filter-checkbox-option input[type="checkbox"]::after,
.filters-panel .filter-type-option input[type="checkbox"]::after{
  content: none;
}

/* ✅ V fininho */
.filters-panel .filter-checkbox-option input[type="checkbox"]:checked::before,
.filters-panel .filter-type-option input[type="checkbox"]:checked::before{
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid var(--on-brand, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filters-panel .filter-checkbox-option input[type="checkbox"]:focus-visible,
.filters-panel .filter-type-option input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--control-focus-ring, rgba(56,204,41,.35));
  outline-offset: 2px;
}

/* NÃO mexer no toggle "selecionar tudo" (nativo) */
.toggle-switch input[type="checkbox"]{
  appearance: auto;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  position: static;
  margin: 0;
}

/* pill ativa */
.filter-feature-pill.is-active{
  background-color: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  border-color: var(--brand, #38cc29);
}

/* =========================================================
   RESULTS GRID / CARDS (cores)
========================================================= */
.project-card{
  background-color: var(--surface, #fff);
  border-color: var(--card-border, rgba(17,17,17,.10));
}
.project-card-media{ border-bottom-color: var(--border-subtle, #f1f1f1); }

.card-media-dot{ background: rgba(255,255,255,.40); }
.card-media-dot.is-active{ background-color: var(--brand, #38cc29); }

.project-card-location{ color: var(--text-muted, #777); }
.project-meta-item,
.project-card-price{ color: var(--text-muted-2, #666); }
.project-card-price strong{ color: var(--heading, #222); }

.project-meta-icon{ color: var(--brand, #38cc29); }

.project-card-title a:hover{ color: var(--heading, #222); }

.project-card-link:focus-visible{ outline-color: var(--brand, #38cc29); }

.projects-view-all-btn{
  background-color: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  box-shadow: 0 4px 12px var(--brand-shadow, rgba(56,204,41,.18));
}
.projects-view-all-btn:hover{
  background-color: var(--brand-hover, #2baa21);
  box-shadow: 0 8px 18px var(--brand-shadow, rgba(56,204,41,.18));
}

/* favoritar */
.fav-heart-btn{
  border-color: var(--card-border, rgba(17,17,17,.12));
  background: rgba(255,255,255,.92);
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
}
.fav-heart-btn .fav-heart path{
  stroke: var(--text, rgba(17,17,17,.92));
  fill: none;
}
.fav-heart-btn.is-favorited .fav-heart path{
  fill: var(--text, rgba(17,17,17,.92));
  stroke: var(--text, rgba(17,17,17,.92));
}

/* =========================================================
   SEARCH CARD (home)
========================================================= */
.search-wrapper-bg{ background: var(--surface-muted, #f6f7f8); }

.search-card-form{
  background: var(--surface, #fff);
  border-color: var(--card-border, rgba(17,17,17,.10));
}
.search-card-label{ color: var(--heading, #222); }

.search-card-row .search-input{
  background-color: var(--surface, #fff);
  color: var(--text, rgba(17,17,17,.92));
  border-color: color-mix(in srgb, var(--brand, #38cc29) 28%, transparent);
}
.search-card-row .search-input::placeholder{
  color: var(--text-muted-2, #6b7280);
}
.search-card-row .search-input:focus{
  border-color: color-mix(in srgb, var(--brand, #38cc29) 60%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand, #38cc29) 18%, transparent);
}
/* lupa (stroke cinza) */
.search-card-row .search-input{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 21l-4.3-4.3m1.3-5.2a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0Z' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.search-card-row .search-card-btn{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}
.search-card-row .search-card-btn:hover{
  background: var(--brand-hover, #2baa21);
}

/* =========================================================
   VITRINE (cores)
========================================================= */
.vitrine-wrapper{ background: var(--surface-muted, #f2f3f2); }

.vitrine-shell{
  background: var(--surface, #fff);
  border-color: var(--card-border, rgba(17,17,17,.10));
}

.vitrine-pill--badge{
  background: var(--heading, #111827);
  color: var(--on-brand, #fff);
}

.vitrine-title{ color: var(--heading, #111827); }

.vitrine-title-link{ color: var(--link, #2563eb); }
.vitrine-title-link:hover{ color: var(--link-hover, #1d4ed8); }

.filter-pill{
  background: var(--surface, #fff);
  border-color: var(--border, #d1d5db);
  color: var(--heading, #111827);
}
.filter-pill-icon{
  border-color: var(--border, #d1d5db);
  color: var(--text-muted-2, #4b5563);
}
.filter-pill:hover{
  border-color: var(--link, #2563eb);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--link, #2563eb) 15%, transparent);
}
.filter-pill.is-open{
  border-color: var(--link, #2563eb);
  background: var(--link-soft, #eff6ff);
}

.filter-panel{
  background: var(--surface, #fff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
}

.filter-panel-title{ color: var(--heading, #111827); }

.chip{
  background: var(--surface, #fff);
  border-color: var(--border, #d1d5db);
  color: var(--heading, #111827);
}
.chip:hover{ border-color: var(--link, #2563eb); }

.link-btn{ color: var(--link, #2563eb); }

.filter-apply-btn{
  background: var(--link, #2563eb);
  color: var(--on-brand, #fff);
}

.check-title{ color: var(--heading, #111827); }
.check-sub{ color: var(--text-muted-2, #6b7280); }

.filter-input{
  border-color: var(--border, #d1d5db);
  color: var(--heading, #111827);
  background: var(--surface, #fff);
}

.vitrine-carousel::-webkit-scrollbar-thumb{ background: var(--border, #d1d5db); }

.vitrine-card{
  background: var(--surface, #fff);
  box-shadow: 0 4px 4px rgba(15, 23, 42, 0.12);
}

.card-media-dot{ background: rgba(255,255,255,0.55); }
.card-media-dot.is-active{ background: #ffffff; }

.vitrine-chat-btn,
.vitrine-chat,
.vitrine-card-chat{
  background: var(--surface, #fff);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  color: var(--brand, #38cc29);
}

.badge-destaque{
  background: var(--link, #2563eb);
  color: var(--on-brand, #fff);
}

.vitrine-card-title{ color: var(--heading, #111827); }
.vitrine-card-location{ color: var(--text-muted-2, #6b7280); }
.meta-item{ color: var(--heading, #111827); }
.vitrine-card-price{ color: var(--heading, #111827); }

.meta-item svg{ stroke: var(--brand, #38cc29); }

.vitrine-arrow{
  background: var(--surface, #fff);
  border-color: var(--card-border, rgba(17,17,17,.10));
  color: var(--brand, #38cc29);
}
.vitrine-arrow:hover{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}

.card-media-arrow{ background: rgba(255,255,255,0.75); }
.card-media-arrow:hover{ background: rgba(255,255,255,0.95); }

/* =========================================================
   HOME • Benefits (cores)
========================================================= */
.section-benefits{ background: var(--brand-soft, #effcee); }

.benefits-title,
.benefit-title{ color: var(--heading, #020617); }

.benefits-subtitle,
.benefit-text{ color: var(--text-muted-2, #4b5563); }

.benefit-icon{ color: var(--brand, #38cc29); }

.benefit-item:hover{ box-shadow: 0 6px 14px var(--card-shadow, rgba(0,0,0,.06)); }

.search-card-btn-benefits{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}
.search-card-btn-benefits:hover{ background: var(--brand-hover, #2baa21); }

/* =========================================================
   PORTAL BOTTOM (cores)
========================================================= */
.portal-bottom-section--alt{ background: var(--surface-muted, #fafafa); }
.portal-bottom-title{ color: var(--heading, #222); }

.portal-bottom-grid a{ color: var(--text-muted-2, #555); }
.portal-bottom-grid a:hover{ color: var(--brand, #38cc29); }

/* =========================================================
   FOOTER (cores) + hover ícone verde
========================================================= */
.site-footer{ color: var(--footer-text, #fff); }

.site-footer .footer-top{ background: var(--footer-top-bg, #343b46); }
.site-footer .footer-bottom{ background: var(--footer-bottom-bg, #242830); }

.footer-title{
  color: var(--footer-title, var(--footer-text, #fff));
}
.footer-title::after{
  background: var(--footer-title-underline, var(--footer-text, #fff));
}

.footer-links a{ color: var(--footer-link, #f5f5f5); }
.footer-links a:hover{ color: var(--footer-link-hover, #fff); }

/* ✅ garante que o <i> herde a cor do container */
.footer-social-item i{ color: inherit; }

/* social */
.footer-social-item{
  border-color: var(--footer-social-border, #f5f5f5);
  color: var(--footer-social-icon, #f5f5f5);
}
.footer-social-item:hover{
  background: var(--footer-social-hover-bg, #f5f5f5);
  color: var(--footer-social-hover-icon, var(--brand));
}

.footer-legal-links a{ color: var(--footer-legal-link, #d0d4db); }
.footer-legal-links a:hover{ color: var(--footer-legal-link-hover, #fff); }

.footer-powered-by,
.footer-copy{ color: var(--footer-muted, #c0c5d0); }

/* =========================================================
   PROJECT PAGE • tabs nav + hero (mantido)
========================================================= */
.project-page{ background: var(--surface, #fff); }

.project-tabs-nav{
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--surface-muted-2, #f5f5f5);
  border-bottom: 1px solid var(--border-mid, #ddd);
}

.project-tabs-nav-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.project-tabs-toggle{
  display: none; /* desktop */
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: var(--surface-muted-2, #f5f5f5);
  color: var(--heading, #222);
  font-size: 0.95rem;
  font-weight: 600;
  align-items: center;
  justify-content: space-between;
}

.project-tabs-toggle-label{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.project-tabs-toggle-icon{
  display: inline-flex;
  transition: transform 0.2s ease;
}

.project-tabs-inner{
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.75rem 1rem;
  position: relative;
}

.project-tab-link{
  position: relative;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted-1, #444);
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface-muted-2, #f5f5f5);
}

.project-tab-link:hover{ color: var(--brand, #38cc29); }

.project-tabs-underline{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brand, #38cc29);
  transform: translateX(0);
  transition: transform 0.25s ease, width 0.25s ease;
}

/* MOBILE – MENU VERTICAL OVERLAY */
@media (max-width: 768px){
  .project-tabs-nav{ position: sticky; top: 0; z-index: 50; }
  .project-tabs-toggle{ display: flex; }

  .project-tabs-nav-inner{ position: relative; }

  .project-tabs-inner{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;

    padding: 0.5rem 1rem 0.75rem;
    background: var(--surface-muted-2, #f5f5f5);
    color: var(--on-brand, #fff);

    max-height: calc(100vh - 120px);
    overflow-y: auto;

    box-shadow: 0 8px 24px var(--shadow-float, rgba(0,0,0,0.25));
  }

  .project-tabs-nav.is-open .project-tabs-inner{ display: flex; }
  .project-tabs-nav.is-open .project-tabs-toggle-icon{ transform: rotate(180deg); }

  .project-tab-link{
    width: 100%;
    padding: 0.5rem 0;
    color: var(--text, rgba(17,17,17,.92));
    background: var(--surface-muted-2, #f5f5f5);
  }

  .project-tabs-underline{ display: none !important; }

  /* fundo unificado sem gradiente */
  .project-tabs-nav,
  .project-tabs-toggle,
  .project-tabs-inner{
    background: var(--project-tabs-bg, #f5f5f5);
    color: var(--text-strong, #222);
    background-image: none;
    box-shadow: none;
    border-color: var(--project-tabs-border, #e1e1e6);
  }
  .project-tabs-nav::before,
  .project-tabs-nav::after,
  .project-tabs-inner::before,
  .project-tabs-inner::after{
    content: none;
  }
  .project-tab-link{
    color: var(--text-strong, #222);
    background: var(--project-tabs-bg, #f5f5f5);
  }
  .project-tab-link:hover{ color: var(--brand, #38cc29); }
}

/* HERO DO EMPREENDIMENTO (tokenizado) */
.project-hero{
  position: relative;
  color: var(--on-hero, #fff);
  background: var(--hero-bg, #000);
  overflow: hidden;
}

.project-hero-media{ width: 100%; }

.project-hero-media img{
  width: 100%;
  height: var(--hero-img-h-desktop, 420px);
  object-fit: cover;
  display: block;
  filter: brightness(var(--hero-dim, .75));
}

/* conteúdo à ESQUERDA (desktop) */
.project-hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px 64px;
}

.project-hero-content{
  max-width: 640px;
  text-align: left;
  margin-left: clamp(32px, 2vw, 160px);
}

.project-hero-badges{
  display: inline-flex;
  gap: 12px;
  margin-bottom: 16px;
}

.project-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
}

.project-badge--phase{
  background: var(--badge-phase, #ff8a2c);
  color: var(--on-badge-phase, #fff);
}

.project-badge--highlight{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}

.project-hero-title{
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 12px;
}

.project-hero-tagline{
  font-size: 1rem;
  margin: 0 0 16px;
}

.project-hero-location{
  font-size: 1.2rem;
  opacity: .9;
  font-weight: 500;
}

/* MOBILE “Even style” — hero vertical */
@media (max-width: 700px){
  .project-hero-media img{
    height: var(--hero-img-h-mobile, min(78vh, 760px));
  }

  .project-hero-overlay{
    align-items: flex-end;
    padding: 24px 16px 28px;
  }

  .project-hero-content{
    margin-left: 0;
    max-width: 560px;
  }
}

/* =========================================================
   GALLERY (Airbnb) — TOKENIZADO (sem criar vars novas)
   - Troquei cores hardcoded por tokens já existentes no default.css
   - Removi duplicações (.gallery-overlay-cat-thumb estava repetido)
========================================================= */

/* ==============================
   SECTION + CABEÇALHO
================================= */

.section-gallery{
  padding: 24px 0 72px;
  background: var(--surface-muted, #f7f9fb);
}

.section-gallery-inner{
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.section-gallery-header{
  margin-bottom: 20px;
}

.section-gallery-header h2{
  font-size: 2rem;
  margin-bottom: 4px;
  color: var(--heading, #111);
}

.section-gallery-header p{
  color: var(--text-muted-2, #666);
  font-size: 0.95rem;
}

/* ==============================
   FILTROS DE CATEGORIA
================================= */

.gallery-filters{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gallery-filter{
  border: 1px solid var(--border-mid, #ddd);
  background: var(--surface-muted-2, #f8f8f8);
  color: var(--text, #111);
  border-radius: 15px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.gallery-filter:hover{
  background: var(--surface-muted, #f7f7f7);
}

.gallery-filter.is-active{
  background: var(--heading, #111);
  color: #fff;
  border-color: var(--heading, #111);
}

/* ==============================
   VITRINE DESKTOP (AIRBNB)
================================= */

.airbnb-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-top: 30px;
  margin-bottom: 50px;
}

/* altura única da vitrine */
.airbnb-gallery-main,
.airbnb-gallery-side{
  height: 420px;
}

.airbnb-gallery-main{
  position: relative;
  background: var(--surface-muted-2, #eee);
}

.airbnb-gallery-main img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: filter 0.15s ease-out;
  cursor: pointer !important;
}

/* hover: escurece levemente */
.airbnb-gallery-main img:hover{
  filter: brightness(0.82);
}

/* miniaturas (direita) */
.airbnb-gallery-side{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
}

.airbnb-gallery-side img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer !important;
  transition: filter 0.15s ease-out;
}

.airbnb-gallery-side img:hover{
  filter: brightness(0.82);
}

/* botão "Ver todas as fotos" */
.airbnb-gallery-show-all{
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 5;
}

.airbnb-gallery-show-all:hover{
  background: rgba(0, 0, 0, 0.9);
}

/* ==============================
   VITRINE MOBILE (1 grande + 2 pequenas)
================================= */

@media (max-width: 768px){
  .section-gallery-inner{
    margin: 0 auto;
    padding: 0 20px;
  }

  .airbnb-gallery{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 5px;
    border-radius: 0;
  }

  .airbnb-gallery-main{ height: auto; }

  .airbnb-gallery-main img{
    width: 100%;
    height: auto;
  }

  .airbnb-gallery-side{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 110px;
    gap: 5px;
    height: auto;
  }

  .airbnb-gallery-side img{
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    cursor: pointer !important;
  }

  /* esconde 3ª e 4ª mini no mobile */
  .airbnb-gallery-side img:nth-child(n+3){
    display: none !important;
  }
}

/* ==============================
   POPUP / TOUR POR FOTOS (LAYOUT AIRBNB)
================================= */

.gallery-overlay[hidden]{ display: none; }

/* fundo branco ocupando toda a tela */
.gallery-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface, #ffffff);
  overflow-y: auto;
}

/* Conteúdo com padding igual ao site */
.gallery-overlay-shell{
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px calc(24px + clamp(32px, 8vw, 160px));
  display: flex;
  flex-direction: column;
}

/* header */
.gallery-overlay-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #eee);
  margin-bottom: 20px;
}

.gallery-overlay-back{
  border: none;
  background: var(--surface-muted-2, #f5f5f5);
  color: var(--text, #111);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}

.gallery-overlay-back:hover{
  background: var(--surface-muted, #f0f0f0);
}

.gallery-overlay-header-text h3{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading, #111);
}

.gallery-overlay-header-text p{
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted, #777);
}

/* miniaturas das categorias (topo) */
.gallery-overlay-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--border-subtle, #eee);
  margin-bottom: 28px;
}

.gallery-overlay-cat{
  width: 120px;
  cursor: pointer;
  text-align: center;
  border-radius: 12px;
}

.gallery-overlay-cat-thumb{
  width: 100%;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  cursor: pointer;
}

.gallery-overlay-cat-label{
  font-size: 0.85rem;
  margin-top: 6px;
  display: block;
  color: var(--text-muted-1, #444);
}

.gallery-overlay-cat.is-active .gallery-overlay-cat-label{
  font-weight: 600;
  color: var(--heading, #111);
}

/* blocos de galeria por categoria */
.gallery-overlay-scroll{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gallery-overlay-section{
  padding-bottom: 8px;
}

.gallery-overlay-section-title{
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--heading, #111);
  border-left: 4px solid var(--heading, #111);
  padding-left: 8px;
}

/* grid de fotos em cada categoria */
.gallery-overlay-grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-overlay-item img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
}

@media (min-width: 900px){
  .gallery-overlay-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* mobile overlay */
@media (max-width: 600px){
  .gallery-overlay-shell{
    max-width: 100%;
    padding: 20px;
  }

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

  .gallery-overlay-cat{ width: 100px; }
  .gallery-overlay-cat-thumb{ height: 70px; }
}

/* lista de imagens base (não aparece na página) */
.gallery-hidden-list{ display: none; }

/* ==============================
   LIGHTBOX / CARROSSEL FULL-SCREEN
================================= */

.gallery-lightbox[hidden]{ display: none; }

.gallery-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-inner{
  width: 100%;
  max-width: 1100px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.gallery-lightbox-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 10px;
}

.gallery-lightbox-close{
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.gallery-lightbox-counter{
  font-size: 0.95rem;
  opacity: 0.85;
}

.gallery-lightbox-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.gallery-lightbox-figure{
  margin: 0;
  flex: 1;
  text-align: center;
}

.gallery-lightbox-figure img{
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 12px;
  cursor: pointer;
}

.gallery-lightbox-close,
.gallery-lightbox-arrow,
.gallery-lightbox-cta{
  cursor: pointer;
}

.gallery-lightbox-figure figcaption{
  margin-top: 8px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.90);
}

.gallery-lightbox-arrow{
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-arrow:hover{
  background: rgba(255,255,255,0.28);
}

/* mobile */
@media (max-width: 768px){
  .gallery-lightbox-inner{ padding: 12px; }

  .gallery-lightbox-main{
    position: relative;
    gap: 0;
  }

  .gallery-lightbox-figure{ flex: 1; }

  .gallery-lightbox-figure img{ max-height: 70vh; }

  .gallery-lightbox-arrow{
    position: absolute;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }

  .gallery-lightbox-arrow.prev{ right: 58px; }
  .gallery-lightbox-arrow.next{ right: 16px; }
}

/* Footer do lightbox: CTA (✅ usa brand do tema, sem vars novas) */
.gallery-lightbox-footer{
  margin-top: 16px;
  text-align: center;
}

.gallery-lightbox-cta{
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  font-size: 0.95rem;
  text-decoration: none;
  font-weight: 500;
}

.gallery-lightbox-cta:hover{
  background: var(--brand-hover, #2baa21);
}

/* =========================================================
   PROJECT PAGE • BADGE REF (tokenizado, sem vars novas)
========================================================= */
.project-badge--ref{
  background: var(--link, #2563eb);
  border: 1px solid var(--link, #2563eb);
  color: var(--on-brand, #fff);
}

/* =========================================================
   SECTION • PLANTAS (tokenizado, sem criar vars no :root)
========================================================= */
.project-plants{
  background: var(--surface, #fff);
  padding: 56px 0 72px;
  border-top: 1px solid var(--border-subtle, #f1f1f1);
}

.project-plants-inner{
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.project-plants-title{
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--heading, #222);
  margin: 0 0 32px;
}

/* Abas */
.plants-tabs{
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  border-bottom: 1px solid var(--border-mid, #e2e2e2);
  margin-bottom: 24px;
  overflow-x: auto;
}
.plants-tabs::-webkit-scrollbar{ display: none; }

.plants-tab{
  position: relative;
  padding: 8px 4px 14px;
  border: none;
  background: transparent;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-muted-1, #555);
  cursor: pointer;
  white-space: nowrap;
}
.plants-tab::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--brand, #38cc29);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.plants-tab.is-active{ color: var(--text, #111); }
.plants-tab.is-active::after{ transform: scaleX(1); }

/* Layout */
.plants-panels{ margin-top: 24px; }
.plants-panel{ display: none; }
.plants-panel.is-active{ display: block; }

.plants-layout{
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* Menu lateral */
.plants-menu{
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plants-metric-block{ border-radius: 16px; }

.plants-metric-toggle{
  width: 100%;
  border: none;
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.3rem;
  padding: 14px 20px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 8px;
}
.plants-metric-toggle:hover{
  background: var(--brand-hover, #2baa21);
}

.plants-metric-main{ font-weight: 600; }
.plants-metric-sub{ font-size: 0.8rem; opacity: 0.85; }

.plants-metric-chevron{
  font-size: 0.95rem;
  display: inline-block;
  transition: transform .15s ease;
}
.plants-metric-block.is-open .plants-metric-chevron{ transform: rotate(180deg); }

.plants-options{
  margin-top: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.plants-metric-block.is-open .plants-options{ display: flex; }

/* Tipologias (botões) */
.plants-option{
  border-radius: 14px;
  border: 1.5px solid var(--border, #d1d5db);
  background: var(--surface, #fff);

  padding: 12px 16px;
  min-height: 46px;

  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text-muted-1, #555);
  text-align: left;
  cursor: pointer;

  box-shadow: 0 2px 8px color-mix(in srgb, var(--card-shadow, rgba(0,0,0,.06)) 70%, transparent);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.plants-option:hover{
  border-color: var(--brand, #38cc29);
  box-shadow: 0 6px 16px var(--card-shadow, rgba(0,0,0,.06));
  transform: translateY(-1px);
}
.plants-option.is-active{
  background: var(--brand-soft, #e9fbe7);
  border-color: var(--brand, #38cc29);
  color: var(--text-muted-1, #555);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-shadow, rgba(0,0,0,.06)) 85%, transparent);
}

/* Viewer (desktop) */
.plants-viewer{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plants-viewer-main{
  position: relative;
  overflow: hidden;
}

.plants-viewer-image{
  width: 100%;
  display: block;
  object-fit: contain;
}

.plants-fullscreen-btn{
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: 999px;
  border: 1px solid var(--card-border, rgba(17,17,17,.10));
  padding: 6px 14px;
  background: var(--surface, #fff);
  color: var(--text-strong-2, #333);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.plants-fullscreen-btn:hover{
  border-color: var(--brand, #38cc29);
  color: var(--brand, #38cc29);
}

.plants-viewer-caption{
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--heading, #222);
}

.plants-viewer-meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  font-size: 0.85rem;
  color: var(--text-muted-1, #444);
  margin-top: 4px;
}

.plants-meta-item{
  display: flex;
  align-items: center;
  gap: 6px;
}
.plants-meta-item dt, .plants-meta-item dd{ margin: 0; }

.plants-meta-icon{
  font-size: 1rem;
  color: var(--brand, #38cc29);
}

/* label “sr-only” */
.plants-meta-label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px){
  .plants-viewer-meta{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }
}

/* estado vazio */
.plants-empty{
  padding: 24px 0 8px;
  color: var(--text-muted, #777);
}

/* Viewer mobile (por metragem) */
.plants-viewer-mobile{ display: none; }
.plants-figure-mobile{ margin: 0; }
.plants-image-mobile{
  width: 100%;
  display: block;
  border-radius: 12px;
}
.plants-caption-mobile{
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-muted-1, #444);
  text-align: left;
}

/* Responsivo */
@media (max-width: 1024px){
  .plants-layout{ flex-direction: column; }
  .plants-menu{ width: 100%; max-width: 480px; }
}
@media (max-width: 768px){
  .project-plants{ padding: 40px 0 56px; }
  .project-plants-inner{ padding: 0 20px; }

  /* Esconde viewer grande no mobile */
  .project-plants [data-plants-viewer]{ display: none; }

  /* Mostra viewer por metragem abaixo das opções */
  .plants-viewer-mobile{ display: block; margin-top: 12px; }
  .plants-viewer-main{ border-radius: 16px; }
}
.plants-metric-block:not(.is-open) .plants-viewer-mobile{
  display: none !important;
}

/* =========================================================
   SECTION • LOCALIZAÇÃO / MAPA (tokenizado)
   ✅ sem vars novas no :root
   ✅ cores por categoria com vars LOCAIS (evita repetir hex 4x)
========================================================= */
.project-location{
  background: var(--surface, #fff);
  padding: 56px 0 72px;
  border-top: 1px solid var(--border-subtle, #f1f1f1);

  /* ⬇️ VARS LOCAIS (não cria duplicação no default :root) */
  --poi-food: #0082f9;
  --poi-convenience: #f03b11;
  --poi-education: #00ec00;
  --poi-leisure: #005200;
  --poi-health: #ff0a90;
}

.project-location-inner{
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.project-location-title{
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--heading, #222);
  margin: 0 0 24px;
}

.project-location-card{
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface, #fff);
  box-shadow: 0 12px 30px var(--card-shadow, rgba(0,0,0,.06));
  border: 1px solid var(--card-border, rgba(17,17,17,.10));
}

/* mapa */
.project-location-map{
  width: 100%;
  height: 420px;
}
@media (max-width: 768px){
  .project-location-map{ height: 320px; }
}

/* faixa inferior */
.project-location-bottom{
  display: grid;
  grid-template-columns: 2fr 3fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
}

.project-location-address-label{
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
  margin: 0 0 4px;
}
.project-location-address-text{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--link, #2563eb);
}

/* pois */
.project-location-pois-title{
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted-1, #555);
}

.project-location-pois-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* chip base */
.project-location-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 15px;
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface, #fff);
  font-size: 0.85rem;
  color: var(--text-muted-1, #555);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

/* ✅ ícone herda a cor do chip (evita regras duplicadas por categoria) */
.project-location-chip-icon i{ color: currentColor; }

.project-location-chip.is-active{
  background: var(--link, #2563eb);
  border-color: var(--link, #2563eb);
  color: #fff;
}

/* botão “Como chegar?” */
.project-location-actions{
  display: flex;
  justify-content: flex-end;
}
.project-location-directions{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 15px;
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--brand, #38cc29);
  white-space: nowrap;
  gap: 4px;
}
.project-location-directions:hover{
  background: var(--brand-hover, #2baa21);
  border-color: var(--brand-hover, #2baa21);
}

/* responsivo */
@media (max-width: 1024px){
  .project-location-bottom{
    grid-template-columns: 1.2fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "address actions"
      "pois    pois";
  }
  .project-location-address{ grid-area: address; }
  .project-location-pois{ grid-area: pois; }
  .project-location-actions{ grid-area: actions; justify-content: flex-end; }
}

@media (max-width: 768px){
  .project-location-inner{ padding: 0 20px; }

  .project-location-bottom{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "address"
      "pois"
      "actions";
    gap: 16px;
  }

  .project-location-actions{ justify-content: flex-start; }

  /* ✅ MOBILE: layout 3 + 2 sem scroll */
  .project-location-pois-chips{
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
  }
  .project-location-chip{
    flex: 0 0 calc(33.33% - 8px);
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 0.78rem;
    white-space: normal;
  }
  .project-location-chip:nth-child(n+4){
    flex: 0 0 calc(50% - 8px);
  }
}
@media (max-width: 400px){
  .project-location-chip{
    flex: 0 0 calc(50% - 8px);
  }
}

/* =========================================================
   LOCALIZAÇÃO • CORES POR CATEGORIA (sem duplicar hex)
   - usa as vars locais definidas em .project-location
========================================================= */
.project-location-chip[data-poi-category="food"]{
  border-color: var(--poi-food);
  color: var(--poi-food);
}
.project-location-chip[data-poi-category="food"].is-active{
  background: var(--poi-food);
  border-color: var(--poi-food);
  color: #fff;
}

.project-location-chip[data-poi-category="convenience"]{
  border-color: var(--poi-convenience);
  color: var(--poi-convenience);
}
.project-location-chip[data-poi-category="convenience"].is-active{
  background: var(--poi-convenience);
  border-color: var(--poi-convenience);
  color: #fff;
}

.project-location-chip[data-poi-category="education"]{
  border-color: var(--poi-education);
  color: var(--poi-education);
}
.project-location-chip[data-poi-category="education"].is-active{
  background: var(--poi-education);
  border-color: var(--poi-education);
  color: #fff;
}

.project-location-chip[data-poi-category="leisure"]{
  border-color: var(--poi-leisure);
  color: var(--poi-leisure);
}
.project-location-chip[data-poi-category="leisure"].is-active{
  background: var(--poi-leisure);
  border-color: var(--poi-leisure);
  color: #fff;
}

.project-location-chip[data-poi-category="health"]{
  border-color: var(--poi-health);
  color: var(--poi-health);
}
.project-location-chip[data-poi-category="health"].is-active{
  background: var(--poi-health);
  border-color: var(--poi-health);
  color: #fff;
}

/* =========================================================
   TOWER MODAL • CORES TOKENIZADAS (sem vars no :root)
   ✅ cola no final do default.css (override)
========================================================= */

/* CTA "Ver torre" */
.plants-tower-btn{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}
.plants-tower-btn:hover{
  background: var(--brand-hover, #2baa21);
}
.plants-tower-btn.is-disabled{
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* Modal + tokens locais */
.tower-modal{
  /* vars LOCAIS (não polui o :root) */
  --tower-accent: var(--brand, #38cc29);
  --tower-accent-hover: var(--brand-hover, #2baa21);
  --tower-accent-soft: var(--brand-soft, #e9fbe7);

  --tower-bg: var(--surface, #fff);
  --tower-sidebar-bg: var(--surface-2, #fafafa);

  --tower-border: var(--border, #d1d5db);
  --tower-border-soft: var(--border-subtle, #eee);

  --tower-text: var(--text, #111);
  --tower-muted: var(--text-muted-1, #666);

  /* tag “soon” (mantém sua paleta sem criar token global) */
  --tower-soon-bg: #fff4e0;
  --tower-soon-fg: #b77700;
}

.tower-modal-backdrop{
  background: color-mix(in srgb, #000 55%, transparent);
}

.tower-modal-dialog{
  background: var(--tower-bg);
}

.tower-modal-header{
  border-bottom: 1px solid var(--tower-border-soft);
}

.tower-modal-title{
  color: var(--tower-text);
}

.tower-modal-close{
  color: var(--tower-text);
}
.tower-modal-close:hover{
  color: var(--tower-accent);
}

/* Sidebar */
.tower-modal-sidebar{
  border-right: 1px solid var(--tower-border-soft);
  background: var(--tower-sidebar-bg);
}

.tower-sidebar-title{
  color: var(--tower-text);
}

/* Cards (lista de torres) */
.tower-slide{
  background: var(--tower-bg);
  border: 1px solid color-mix(in srgb, var(--tower-border) 75%, transparent);
}

.tower-slide:hover{
  border-color: var(--tower-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tower-accent) 18%, transparent);
}

.tower-slide.is-active{
  border-color: var(--tower-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tower-accent) 28%, transparent);
  background: var(--tower-accent-soft);
}

.tower-slide-thumb{
  background: color-mix(in srgb, var(--tower-border) 70%, transparent);
}

.tower-slide-name{
  color: var(--tower-text);
}

.tower-slide-meta{
  color: var(--tower-muted);
}

/* Tag padrão (verde do projeto) */
.tower-slide-tag{
  background: color-mix(in srgb, var(--tower-accent) 12%, #fff);
  color: var(--tower-accent);
}

/* Tag “soon” */
.tower-slide-tag--soon{
  background: var(--tower-soon-bg);
  color: var(--tower-soon-fg);
}

/* Coluna direita */
.tower-modal-details{
  color: var(--tower-text);
}

.tower-detail-title{
  color: var(--tower-text);
}

.tower-detail-item dt{
  color: var(--text-muted-1, #555);
}

/* Ícone: herda do acento, sem repetir hex */
.tower-detail-icon{
  color: var(--tower-accent);
}

/* Mobile: bordas */
@media (max-width: 768px){
  .tower-modal-sidebar{
    border-right: none;
    border-bottom: 1px solid var(--tower-border-soft);
  }

  /* fade da rolagem horizontal (usa fundo do sidebar) */
  .tower-slides::after{
    background: linear-gradient(
      to left,
      color-mix(in srgb, var(--tower-sidebar-bg) 100%, transparent),
      color-mix(in srgb, var(--tower-sidebar-bg) 0%, transparent)
    );
  }
}

/* =========================================================
   DESIGNERS • THEME OVERRIDES (SOMENTE CORES)
   Cole no final do themes/default.css
========================================================= */

/* section bg */
.section-designers{
  background: var(--surface-muted, #f7f9fb);
}

/* título: palavra destacada (antes #b00815) */
.designers-copy h2{
  color: var(--heading, #222);
}
.designers-copy h2 span{
  /* usa o azul do tema (já existe no default.css) */
  color: var(--link, #2563eb);
}

/* textos */
.designers-lead{
  color: var(--text, rgba(17,17,17,.92));
}
.designers-text{
  color: var(--text-muted-2, #555);
}

/* bullets */
.designers-highlights li::before{
  color: var(--link, #2563eb);
}

/* header do carrossel */
.designers-carousel-header{
  color: var(--text-muted, #777);
}

/* setas (desktop) */
.designers-arrow{
  border-color: var(--card-border, rgba(17,17,17,.10));
  background: var(--surface, #fff);
  color: var(--text, rgba(17,17,17,.92));
}
.designers-arrow:hover{
  background: var(--heading, #111);
  color: var(--on-brand, #fff);
}

/* card */
.designer-card{
  background: var(--surface, #fff);
  border-color: var(--border-subtle, #eee);
}

/* thumb bg */
.designer-thumb{
  background: var(--surface-muted-2, #f5f5f5);
}

/* contador na foto (mantém escuro) */
.designer-thumb-counter{
  background: rgba(0,0,0,0.7);
  color: #fff;
}

/* tag */
.designer-tag{
  background: var(--surface-muted-2, #f3f3f3);
  color: var(--text-muted-2, #555);
}

/* título card */
.designer-card h3{
  color: var(--heading, #222);
}

/* resumo */
.designer-summary{
  color: var(--text-muted-2, #555);
}

/* botão "Saiba mais" (antes #111/#000) -> usa brand */
.designer-more{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}
.designer-more:hover{
  background: var(--brand-hover, #2baa21);
}

/* =========================================================
   MODAL DESIGNER • THEME OVERRIDES (SOMENTE CORES)
========================================================= */

.designer-modal{
  background: var(--surface, #fff);
}

.designer-modal-title-group h3{
  color: var(--heading, #222);
}
.designer-modal-title-group span{
  color: var(--text-muted, #777);
}

.designer-modal-close{
  background: var(--surface-muted-2, #f3f3f3);
  color: var(--text, rgba(17,17,17,.92));
}
.designer-modal-close:hover{
  background: var(--brand-soft, #e9fbe7);
  color: var(--brand, #38cc29);
}

.designer-modal-content p{
  color: var(--text-muted-2, #555);
}

/* CTA do modal (antes #111/#000) -> usa brand */
.designer-modal-cta{
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);
}
.designer-modal-cta:hover{
  background: var(--brand-hover, #2baa21);
}

/* contador no modal (mantém escuro) */
.designer-media-counter{
  background: rgba(0,0,0,0.7);
  color: #fff;
}

/* setas do carrossel no modal (mantém escuro) */
.designer-media-arrow{
  background: rgba(0,0,0,0.75);
  color: #fff;
}
.designer-media-arrow:hover{
  background: rgba(0,0,0,0.9);
}
/* =========================
   HOME: Nearby Places (tokenizado)
   ========================= */

.home-nearby {
  padding: 56px 0;
}

.home-nearby__inner {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.home-nearby__head {
  margin-bottom: 18px;
}

.home-nearby__title {
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--heading, #222);
}

.home-nearby__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted, #777);
  opacity: 0.95;
}

.home-nearby__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-nearby__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 14px;

  /* antes: rgba(255,255,255,0.85) + borda/box-shadow fixos */
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  border: 1px solid var(--card-border, rgba(17,17,17,.10));
  box-shadow: 0 10px 22px var(--card-shadow, rgba(0,0,0,.06));

  backdrop-filter: blur(6px);
}

.home-nearby__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.home-nearby__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  /* mantém vibe neutra, mas com token */
  background: var(--surface-2, rgba(0,0,0,.03));
  flex: 0 0 auto;
}

.home-nearby__icon i {
  font-size: 16px;
  color: var(--text, rgba(17,17,17,.92));
  opacity: 0.85;
}

.home-nearby__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text, rgba(17,17,17,.92)) 55%, transparent);
  display: inline-block;
}

.home-nearby__label {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text, rgba(17,17,17,.92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-nearby__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.home-nearby__distance {
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;

  background: var(--surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--card-border, rgba(17,17,17,.10));
  white-space: nowrap;
  color: var(--text, rgba(17,17,17,.92));
  opacity: 0.85;
}

.home-nearby__hint {
  position: relative;
}

.home-nearby__hint-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  border: 1px solid var(--card-border, rgba(17,17,17,.10));
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);

  cursor: pointer;
  padding: 0;
}

.home-nearby__hint-btn:hover {
  background: var(--surface-2, rgba(0,0,0,.03));
}

.home-nearby__tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 48px));
  padding: 12px 12px;
  border-radius: 12px;

  /* tooltip é escuro mesmo; não precisa tokenizar */
  background: rgba(20, 20, 20, 0.92);
  color: #fff;

  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}

.home-nearby__tooltip::before {
  content: "";
  position: absolute;
  right: 12px;
  top: -6px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(20, 20, 20, 0.92);
}

.home-nearby__hint:hover .home-nearby__tooltip,
.home-nearby__hint:focus-within .home-nearby__tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Empty */
.home-nearby__empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface-2, rgba(0,0,0,.03));
  border: 1px dashed color-mix(in srgb, var(--text, rgba(17,17,17,.92)) 18%, transparent);
}

.home-nearby__empty-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--heading, #222);
}

.home-nearby__empty-text {
  color: var(--text-muted, #777);
  font-size: 14px;
}

@media (max-width: 900px) {
  .home-nearby__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Projeto: Nearby Simple (tokenizado no BRAND)
   ========================= */

.pr-nearby-simple { padding: 0px 0; }

.pr-nearby-simple__header{
  text-align: center;
  padding: 40px calc(24px + clamp(32px, 8vw, 160px));
  max-width: 1920px;
  margin: 0 auto;
}

.pr-nearby-simple__title,
.pr-nearby-simple__subtitle{
  text-align: center;
  color: var(--heading, #222);
}

.pr-nearby-simple__subtitle{
  color: var(--text-muted, #777);
}

.pr-nearby-simple__list{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pr-nearby-simple__item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding: 14px 12px;

  /* antes: #38cc29 */
  border: 1px solid var(--brand, #38cc29);

  border-radius: 14px;
  background: var(--surface-2, rgba(0,0,0,.03));
}

.pr-nearby-simple__icon{
  width: 78px;
  height: 78px;
  border-radius: 999px;

  /* antes: #38cc29 */
  border: 2px solid var(--brand, #38cc29);

  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;

  background: color-mix(in srgb, var(--brand-soft, #e9fbe7) 55%, transparent);
}

.pr-nearby-simple__icon i{
  font-size: 26px;
  opacity: .95;

  /* antes: #38cc29 */
  color: var(--brand, #38cc29);
}

.pr-nearby-simple__body{ min-width:0; flex: 1 1 auto; }

.pr-nearby-simple__name{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 6px;
  white-space: normal;
  word-break: break-word;
  color: var(--text, rgba(17,17,17,.92));
}

.pr-nearby-simple__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pr-nearby-simple__distance{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted-2, #666);
  opacity: .95;
}

.pr-nearby-simple__links{
  display:flex;
  gap: 12px;
}

.pr-nearby-simple__link{
  font-size: 13px;
  text-decoration: none;
  color: var(--link, #2563eb);
  opacity: .90;
  border-bottom: 1px dotted color-mix(in srgb, var(--link, #2563eb) 40%, transparent);
}
.pr-nearby-simple__link:hover{ opacity: 1; }

.pr-nearby-simple__link--strong{
  font-weight: 700;
  border-bottom-style: solid;
  border-bottom-color: color-mix(in srgb, var(--link, #2563eb) 65%, transparent);
}

/* tooltip inline (mantém escuro) */
.pr-tip-inline{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  line-height: 1;
  opacity: .88;
}
.pr-tip-inline:hover{ opacity: 1; }

.pr-tip-inline::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);

  z-index: 60;
  min-width: 220px;
  max-width: 320px;
  min-height:40px;

  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  white-space: normal;
  text-align: left;

  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.pr-tip-inline:hover::after,
.pr-tip-inline:focus-visible::after{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* se algum ancestral tiver overflow hidden, evita cortar o tooltip */
.pr-nearby-simple__item,
.pr-nearby-simple__meta,
.pr-nearby-simple__distance{
  overflow: visible;
}

@media (max-width: 1024px){
  .pr-nearby-simple__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .pr-nearby-simple__list{
    grid-template-columns: 1fr;
  }
}

/* ✅ encaixe do search-card inline dentro do buy-region-bar */
.buy-region-bar .region-search--inline {
  flex: 1;
  min-width: 460px;
}

/* =========================================
   SECTION – DÚVIDAS (tokenizado)
========================================= */

.section-lead-doubts {
  background: var(--surface-2, #f5f5f5);
  padding: 72px 0;
}

.section-lead-doubts-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.lead-doubts-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin-bottom: 32px;
  color: var(--heading, #222);
}

/* BLOCO = FORM + BOTÃO */
.lead-doubts-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}

/* FORM */
.lead-doubts-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.lead-doubt-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--text, rgba(17,17,17,.92));
}

/* checkboxes (accent-color tokenizado) */
.lead-doubt-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--brand, #2bb24c);
}

/* BOTÃO */
.lead-doubts-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 15px;
  border: none;
  cursor: pointer;

  background: var(--brand, #2bb24c);
  color: #fff;

  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  box-shadow: 0 10px 22px var(--brand-shadow, rgba(0,0,0,.12));
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}

.lead-doubts-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* =========================================
   MODAL – ATENDIMENTO EMAIL (tokenizado)
========================================= */

.lead-modal[hidden] { display: none; }

.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.lead-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;

  background: var(--surface, #fff);
  border-radius: 6px;

  padding: 32px 32px 40px;
  box-sizing: border-box;

  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  z-index: 1;
}

/* header */
.lead-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 24px;
}

.lead-modal-title {
  flex: 1;
  text-align: center;
  font-size: 1.6rem;
  color: var(--heading, #222);
}

.lead-modal-close,
.lead-modal-back {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text, rgba(17,17,17,.92));
}

.lead-modal-back { padding: 4px 8px; }

/* steps */
.lead-modal-steps { min-height: 160px; }

.lead-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lead-field-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text, rgba(17,17,17,.92));
}

.lead-input,
.lead-textarea {
  width: 100%;
  border-radius: 6px;

  border: 1px solid var(--card-border, rgba(17,17,17,.14));
  background: var(--surface, #fff);

  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  color: var(--text, rgba(17,17,17,.92));
}

.lead-input:focus,
.lead-textarea:focus {
  border-color: var(--brand, #2bb24c);
  box-shadow: 0 0 0 3px var(--brand-ring, rgba(56,204,41,.18));
}

.lead-textarea {
  resize: vertical;
  min-height: 120px;
}

/* telefone */
.lead-phone-row { display: flex; gap: 8px; }
.lead-phone-ddi { max-width: 120px; }

/* radios */
.lead-optin-text {
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-muted, #777);
}

.lead-optin-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: 0 auto 8px;
}

.lead-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text, rgba(17,17,17,.92));
}

/* botão do modal */
.lead-btn-primary {
  align-self: center;
  padding: 12px 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;

  background: var(--brand, #2bb24c);
  color: #fff;

  font-weight: 600;
  font-size: 0.95rem;
}

.lead-btn-primary:hover {
  filter: brightness(1.05);
}

/* progress bar */
.lead-modal-progress {
  margin-top: 28px;
  height: 6px;
  border-radius: 15px;

  background: var(--surface-2, #e9ecef);
  overflow: hidden;
}

.lead-modal-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--brand, #2bb24c);
  border-radius: inherit;
  transition: width 0.25s ease;
}

/* ============================
   AJUSTES MOBILE – DÚVIDAS + MODAL
============================ */

@media (max-width: 768px) {
  /* centraliza CTA no mobile */
  .lead-doubts-block { align-items: center; }

  .lead-doubts-cta {
    align-self: center;
    padding-left: 65px;
    padding-right: 65px;
  }

  .lead-modal-dialog {
    max-width: calc(100% - 32px);
    padding: 24px 20px 28px;
  }
}

.project-videos {
  padding: 64px 0 80px;
  background: var(--surface-2, #f7f9fb);
}

.project-videos-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

/* HERO */

.project-videos-hero { /* sem cor */ }

.project-videos-hero-media {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 40px var(--shadow-strong, rgba(0,0,0,0.16));
  background: var(--video-black, #000);
}

.video-embed-16x9 { /* sem cor */ }

.video-embed-16x9 iframe { /* sem cor */ }

.project-videos-hero-title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--heading, #0b1a33);
}

.project-videos-hero-subtitle {
  margin: 0;
  color: var(--text-muted, #555);
  line-height: 1.6;
}

/* FILTROS */

.project-videos-filters { /* sem cor */ }

.project-videos-filter {
  border-radius: 15px;
  border: 1px solid var(--card-border, #d0d4da);
  padding: 6px 14px;
  background: var(--surface, #fff);
  font-size: 0.85rem;
  color: var(--text-muted, #555);
  cursor: pointer;
}

.project-videos-filter.is-active {
  background: var(--brand-blue, #0054a6);
  border-color: var(--brand-blue, #0054a6);
  color: #fff;
}

/* ROW */

.project-videos-row { /* sem cor */ }

.project-videos-row-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading, #222);
}

/* GRID */

.project-videos-grid { /* sem cor */ }

/* CARD */

.video-card {
  border-radius: 10px;
  border: none;
  padding: 0;
  background: var(--surface, #fff);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-card-thumb {
  position: relative;
  background: var(--video-black, #000);
}

.video-card-thumb img { /* sem cor */ }

/* duração */

.video-card-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  font-size: 0.7rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.8);
  color: #fff;
}

/* corpo */

.video-card-title {
  color: var(--text-strong, #111827);
}

.video-card-meta {
  color: var(--text-subtle, #6b7280);
}

.video-card-channel-avatar {
  background: var(--chip-bg, #e5e7eb);
}

.video-card-stats {
  color: var(--text-faint, #9ca3af);
}

/* RODAPÉ */

.project-videos-more {
  border-radius: 15px;
  border: none;
  background: var(--brand, #38cc29);
  color: #fff;
  padding: 14px 36px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 16px 32px var(--brand-shadow, rgba(56,204,41,0.35));
}

/* MODAL HORIZONTAL */

.video-modal-backdrop {
  background: rgba(15,23,42,0.75);
}

.video-modal-dialog {
  background: var(--video-black, #000);
  box-shadow: 0 24px 60px var(--shadow-heavy, rgba(0,0,0,0.5));
}

.video-modal-close {
  background: rgba(15,23,42,0.9);
  color: #fff;
}

/* OVERLAY SHORTS */

.shorts-overlay-backdrop {
  background: rgba(15,23,42,0.92);
}

.shorts-overlay-player {
  background: var(--video-black, #000);
  box-shadow: 0 20px 60px var(--shadow-heavy, rgba(0,0,0,0.7));
}

.shorts-overlay-close {
  background: rgba(15,23,42,0.9);
  color: #fff;
}

.shorts-overlay-nav {
  background: rgba(15,23,42,0.8);
  color: #fff;
}

/* Botão "Voltar" no shorts */
.shorts-overlay-back {
  background: rgba(248, 250, 252, 0.95);
  color: var(--text-strong, #111827);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

/* Overlay reels */

.reels-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.reels-close {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.reels-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.reels-video-frame {
  background: var(--video-black, #000);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
}

.reels-nav-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.reels-nav-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* CTA YouTube (se quiser brand também dá pra tokenizar) */
.reels-youtube-link {
  background: var(--youtube, #ff0000);
  color: #fff;
}

.reels-youtube-link:hover {
  background: var(--youtube-hover, #e00000);
}

/* Modal horizontal (layout novo) */

.video-modal-left {
  background: var(--video-black, #000);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.video-modal-meta { color: #fff; }
.video-modal-channel { opacity: 0.8; }
.video-modal-info { opacity: 0.75; }

.video-modal-cta {
  background: var(--cta, #f97316);
  color: #fff;
}

.video-modal-cta:hover {
  background: var(--cta-hover, #ea580c);
}

.video-modal-youtube {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}

.video-modal-youtube:hover {
  background: rgba(255, 255, 255, 0.12);
}

.video-modal-close {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* CARROSSEL (setas) */

.project-videos-arrow {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}

.project-videos-arrow:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: #ffffff;
}

/* Scrollbar thumb */
.project-videos-grid--horizontal::-webkit-scrollbar-thumb,
.project-videos-grid--shorts::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
}
/* Capa do vídeo principal + botão play */

.project-video-hero{
  position: relative;
}

.project-video-hero-cover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botão de play centralizado na capa */
.project-video-hero-play{
  position: absolute;
  inset: 0;
  border: none;

  /* overlay escuro (tokenizado) */
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--video-black, #000) 6%, transparent),
    color-mix(in srgb, var(--video-black, #000) 55%, transparent)
  );

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Bolinha */
.project-video-hero-play-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  /* tokenizado */
  background: var(--surface, #fff);
  border: 2px solid var(--brand, #16a34a);

  box-shadow: 0 14px 30px var(--shadow-heavy, rgba(0,0,0,0.40));
  position: relative;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

/* Triângulo (play) */
.project-video-hero-play-icon::before{
  content: "";
  position: absolute;

  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;

  /* tokenizado */
  border-left: 20px solid var(--brand, #16a34a);

  top: 52%;
  left: 50%;
  transform: translate(-38%, -50%);
  transition: border-left-color 0.2s ease, transform 0.2s ease;
}

/* Hover */
.project-video-hero:hover .project-video-hero-play-icon{
  transform: scale(1.05);

  /* tokenizado */
  background: var(--brand, #16a34a);
  border-color: var(--brand, #16a34a);

  /* usa sombra do tema (verde) se existir, senão cai na shadow-heavy */
  box-shadow: 0 18px 40px var(--brand-shadow, rgba(22,163,74,0.45));
}

/* No hover o triângulo fica "on-brand" */
.project-video-hero:hover .project-video-hero-play-icon::before{
  border-left-color: var(--on-brand, #fff);
  transform: translate(-36%, -50%);
}

/* Setas do carrossel (tokenizadas) */
.project-videos-arrow{
  border: 1px solid color-mix(in srgb, var(--on-brand, #fff) 40%, transparent);
  border-radius: 999px;

  background: color-mix(in srgb, var(--video-black, #000) 65%, transparent);
  color: var(--on-brand, #fff);

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  backdrop-filter: blur(4px);

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.project-videos-arrow:hover{
  background: color-mix(in srgb, var(--video-black, #000) 90%, transparent);
  border-color: var(--on-brand, #fff);
  transform: translateY(-1px);
}

.project-videos-arrow:disabled{
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* Reels close (remove duplicado e tokeniza) */
.reels-close:hover{
  background: color-mix(in srgb, var(--on-brand, #fff) 22%, transparent);
}
/* ✅ Empty state centralizado (favoritos) — TOKENIZADO */

.fav-empty{
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fav-empty__card{
  width: 100%;
  max-width: 560px;
  text-align: center;

  padding: 28px 22px;

  /* antes: #e9e9e9 */
  border: 1px solid var(--border-subtle, #e9e9e9);

  border-radius: 16px;

  /* antes: #fff */
  background: var(--surface, #fff);

  /* antes: rgba(0,0,0,.06) */
  box-shadow: 0 10px 24px var(--card-shadow, rgba(0,0,0,.06));
}

.fav-empty__icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin: 0 auto 14px auto;

  display: flex;
  align-items: center;
  justify-content: center;

  /* antes: #f4f2f1 */
  background: var(--surface-muted, #f4f2f1);

  /* antes: #111 */
  color: var(--text, #111);

  font-size: 22px;
}

.fav-empty__title{
  margin: 0 0 8px 0;
  font-size: 20px;
  line-height: 1.25;

  /* garante token em todos os temas */
  color: var(--heading, #222);
}

.fav-empty__text{
  margin: 0 0 16px 0;

  /* antes: #666 */
  color: var(--text-muted-2, #666);

  line-height: 1.5;
}

/* Botão com Font Awesome no “look” do projeto (verde do tema) */
.fav-empty__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 12px;

  border: 1px solid var(--brand, #38cc29);
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);

  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;

  box-shadow: 0 10px 22px var(--brand-shadow, rgba(56,204,41,.18));
  transition: filter .15s ease, transform .12s ease, background .15s ease, border-color .15s ease;
}

.fav-empty__btn:hover{
  background: var(--brand-hover, #2baa21);
  border-color: var(--brand-hover, #2baa21);
  filter: none;
}

.fav-empty__btn:active{
  background: var(--brand-700, #1e8f16);
  border-color: var(--brand-700, #1e8f16);
  transform: translateY(1px);
}
/* ===========================
   Favorites grid (layout apenas)
   =========================== */
.page-favorites .listing-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 1100px){
  .page-favorites .listing-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .page-favorites .listing-grid{
    grid-template-columns: 1fr !important;
  }
}

.project-card-body{ position: relative; }

.fav-actions{
  position: relative;
  z-index: 5;
  display: flex !important;
  padding: 12px 0 4px 0;
}

/* ===========================
   Botão remover favorito (tokenizado)
   =========================== */
.fav-remove-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 18px;
  border-radius: 12px;

  border: 1px solid var(--brand, #38cc29);
  background: var(--brand, #38cc29);
  color: var(--on-brand, #fff);

  cursor: pointer;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 10px 22px var(--brand-shadow, rgba(56,204,41,.18));
  transition: background .15s ease, border-color .15s ease, filter .15s ease, transform .12s ease;
}

.fav-remove-btn:hover{
  background: var(--brand-hover, #2baa21);
  border-color: var(--brand-hover, #2baa21);
  filter: none;
}

.fav-remove-btn:active{
  background: var(--brand-700, #1e8f16);
  border-color: var(--brand-700, #1e8f16);
  transform: translateY(1px);
}

.fav-remove-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===========================
   Praia (abaixo do título) — tokenizado
   =========================== */
.project-card-beach{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: .92;

  /* garante cor consistente no texto */
  color: var(--text-muted-2, #666);
}

.project-card-beach i{
  color: var(--brand, #38cc29);
  font-size: 1rem;
}

/* ===========================
   Badge Referência (brand) — tokenizado
   =========================== */
.project-card-refrow{ margin-top: 10px; }

.project-ref-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  color: var(--on-brand, #fff);
  background: var(--brand, #38cc29);
}

.project-ref-badge i{
  color: currentColor; /* herda do badge */
  font-size: 12px;
}

/* Badge de status da obra (Futuro lançamento, Lançamento, etc.) */
.project-status-badge{
  position: absolute;
  top: 12px;
  left: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 10px;

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  background: var(--status-default, #f97316);
  color: var(--status-badge-text, #ffffff);

  box-shadow: 0 2px 6px var(--status-badge-shadow, rgba(0,0,0,0.35));
  z-index: 2;
}

/* Variações por fase (batendo com o phaseClass que montamos no backend) */
.project-status-badge--scp{
  background: var(--status-scp, #6b7280);
}

.project-status-badge--futuro_lancamento{
  background: var(--status-futuro-lancamento, #0ea5e9);
}

.project-status-badge--breve_lancamento{
  background: var(--status-breve-lancamento, #6366f1);
}

.project-status-badge--lancamento{
  background: var(--status-lancamento, #22c55e);
}

.project-status-badge--obra_iniciada{
  background: var(--status-obra-iniciada, #eab308);
}

.project-status-badge--obra_acelerada{
  background: var(--status-obra-acelerada, #f97316);
}

.project-status-badge--obra_fase_final{
  background: var(--status-obra-fase-final, #f59e0b);
}

.project-status-badge--pronto_para_morar{
  background: var(--status-pronto-para-morar, #111827);
}


/* Links do topnav por fase */
.portal-center-nav .nav-phase-link{
  border-radius: 12px;
  padding: 8px 10px;
  transition: color .15s ease, opacity .15s ease;
}

/* ícone (estado normal) */
.portal-center-nav .nav-phase-icon{
  color: var(--ux-green);
  font-size: 14px;
  line-height: 1;
  transition: color .15s ease;
}

/* hover = muda a cor do TEXTO e do ÍCONE (sem fundo) */
.portal-center-nav .nav-phase-link:hover{
  background: transparent !important;
  color: var(--ux-green);
}
.portal-center-nav .nav-phase-link:hover .nav-phase-icon{
  color: var(--ux-green);
}

/* ===== Topnav: ícones (Font Awesome) ===== */
.portal-action-icon,
.portal-btn-icon,
.nav-phase-icon{
  color: var(--ux-green);
}

/* garante que o ícone não “herde” outra cor do bootstrap */
.portal-action-link i,
.portal-auth-area .btn i,
.nav-phase-link i{
  color: var(--ux-green);
}

/* hover: muda só a cor do link (texto + ícone acompanha) */
.portal-action-link:hover,
.nav-phase-link:hover{
  color: var(--ux-green-hover);
}
.portal-action-link:hover i,
.nav-phase-link:hover i{
  color: var(--ux-green-hover);
}

/* foco acessível sem fundo */
.portal-action-link:focus-visible,
.nav-phase-link:focus-visible{
  outline: none;
  text-decoration: none;
  box-shadow: 0 0 0 4px var(--ux-focus);
  border-radius: 10px;
}

/* ===== Botão Sair: hover verde + ícone branco ===== */
.portal-logout-btn:hover,
.portal-logout-btn:focus,
.portal-logout-btn:focus-visible{
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}
.portal-logout-btn:hover i,
.portal-logout-btn:focus i,
.portal-logout-btn:focus-visible i{
  color: #fff !important;
}
.portal-logout-btn:active{
  background: var(--ux-green-press) !important;
  border-color: var(--ux-green-press) !important;
  color: #fff !important;
}
.portal-logout-btn:active i{
  color: #fff !important;
}

/* ===== Hover verde para Entrar / Criar conta ===== */
.portal-auth-area .btn.btn-outline-dark:hover,
.portal-auth-area .btn.btn-outline-dark:focus,
.portal-auth-area .btn.btn-outline-dark:focus-visible{
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}
.portal-auth-area .btn.btn-outline-dark:hover i,
.portal-auth-area .btn.btn-outline-dark:focus i,
.portal-auth-area .btn.btn-outline-dark:focus-visible i,
.portal-auth-area .btn.btn-outline-dark:hover svg,
.portal-auth-area .btn.btn-outline-dark:focus svg,
.portal-auth-area .btn.btn-outline-dark:focus-visible svg{
  color: #fff !important;
}
.portal-auth-area .btn.btn-outline-dark:hover svg path,
.portal-auth-area .btn.btn-outline-dark:focus svg path,
.portal-auth-area .btn.btn-outline-dark:focus-visible svg path{
  stroke: #fff !important;
}

.portal-auth-area .btn.btn-dark:hover,
.portal-auth-area .btn.btn-dark:focus,
.portal-auth-area .btn.btn-dark:focus-visible{
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}
.portal-auth-area .btn.btn-dark:hover i,
.portal-auth-area .btn.btn-dark:focus i,
.portal-auth-area .btn.btn-dark:focus-visible i{
  color: #fff !important;
}

/* ===== Bordas verdes no estado normal (botões topo) ===== */
.portal-auth-area .btn.btn-outline-dark{
  border-color: var(--ux-green) !important;
  color: var(--ux-text) !important;
}
.portal-auth-area .btn.btn-outline-secondary{
  border-color: var(--ux-green) !important;
  color: var(--ux-text) !important;
}
.portal-auth-area .btn.btn-dark{
  border-color: var(--ux-green) !important;
}

/* ícone verde no normal */
.portal-auth-area .btn i{
  color: var(--ux-green) !important;
}
.portal-auth-area .btn svg path{
  stroke: var(--ux-green) !important;
}

/* força TUDO branco no hover do logout */
.portal-logout-btn:hover,
.portal-logout-btn:focus{
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}
.portal-logout-btn:hover *,
.portal-logout-btn:focus *{
  color: #fff !important;
}
.portal-logout-btn:hover svg,
.portal-logout-btn:focus svg{
  stroke: #fff !important;
  fill: #fff !important;
}