/*
 * Habite-se DF — Banco oficial de ícones v1.0
 * Todos os ícones usam a mesma grade 24 × 24, traço arredondado e cor herdada.
 * Reutilize apenas as classes .ui-icon--* documentadas em /assets/icons/catalogo.html.
 */

.ui-icon {
  --icon-size: 1.15em;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  vertical-align: -.16em;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.ui-icon--whatsapp { --icon-url: url('/assets/icons/whatsapp.svg'); }
.ui-icon--phone { --icon-url: url('/assets/icons/phone.svg'); }
.ui-icon--mail { --icon-url: url('/assets/icons/mail.svg'); }
.ui-icon--map-pin { --icon-url: url('/assets/icons/map-pin.svg'); }
.ui-icon--menu { --icon-url: url('/assets/icons/menu.svg'); }
.ui-icon--close { --icon-url: url('/assets/icons/close.svg'); }
.ui-icon--arrow-right { --icon-url: url('/assets/icons/arrow-right.svg'); }
.ui-icon--arrow-up-right { --icon-url: url('/assets/icons/arrow-up-right.svg'); }
.ui-icon--chevron-down { --icon-url: url('/assets/icons/chevron-down.svg'); }
.ui-icon--check { --icon-url: url('/assets/icons/check.svg'); }
.ui-icon--clipboard-check { --icon-url: url('/assets/icons/clipboard-check.svg'); }
.ui-icon--calendar-clock { --icon-url: url('/assets/icons/calendar-clock.svg'); }
.ui-icon--credit-card { --icon-url: url('/assets/icons/credit-card.svg'); }
.ui-icon--message-square { --icon-url: url('/assets/icons/message-square.svg'); }
.ui-icon--search { --icon-url: url('/assets/icons/search.svg'); }
.ui-icon--file-check { --icon-url: url('/assets/icons/file-check.svg'); }
.ui-icon--home-check { --icon-url: url('/assets/icons/home-check.svg'); }
.ui-icon--ruler-pen { --icon-url: url('/assets/icons/ruler-pen.svg'); }
.ui-icon--blueprint { --icon-url: url('/assets/icons/blueprint.svg'); }
.ui-icon--map { --icon-url: url('/assets/icons/map.svg'); }
.ui-icon--building { --icon-url: url('/assets/icons/building.svg'); }
.ui-icon--shield-flame { --icon-url: url('/assets/icons/shield-flame.svg'); }
.ui-icon--help-circle { --icon-url: url('/assets/icons/help-circle.svg'); }
.ui-icon--play-circle { --icon-url: url('/assets/icons/play-circle.svg'); }
.ui-icon--info { --icon-url: url('/assets/icons/info.svg'); }
.ui-icon--instagram { --icon-url: url('/assets/icons/instagram.svg'); }
.ui-icon--tag { --icon-url: url('/assets/icons/tag.svg'); }
.ui-icon--key { --icon-url: url('/assets/icons/key.svg'); }
.ui-icon--chart-up { --icon-url: url('/assets/icons/chart-up.svg'); }
.ui-icon--target { --icon-url: url('/assets/icons/target.svg'); }
.ui-icon--handshake { --icon-url: url('/assets/icons/handshake.svg'); }

/* Badge numérico oficial para etapas que precisem conservar a numeração. */
.ui-step-badge {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  flex: 0 0 2.35rem;
  border-radius: 50%;
  color: #fff;
  background: #1266d6;
  box-shadow: 0 8px 18px rgba(18,102,214,.2);
  font-size: .9rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

/* Mantém o mesmo círculo mesmo dentro de componentes com CSS mais específico. */
.mini-step .ui-step-badge,
.funnel-card .ui-step-badge,
.journey .ui-step-badge {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: #fff;
  background: #1266d6;
  font-size: .9rem;
  line-height: 1;
}

/* Ícones automáticos de contato. */
a[href*="wa.me"]::before,
a[href^="tel:"]::before,
a[href^="mailto:"]::before {
  content: '';
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 1.08em;
  margin-right: .42em;
  vertical-align: -.16em;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

a[href*="wa.me"]::before {
  -webkit-mask-image: url('/assets/icons/whatsapp.svg');
  mask-image: url('/assets/icons/whatsapp.svg');
}

a[href^="tel:"]::before {
  -webkit-mask-image: url('/assets/icons/phone.svg');
  mask-image: url('/assets/icons/phone.svg');
}

a[href^="mailto:"]::before {
  -webkit-mask-image: url('/assets/icons/mail.svg');
  mask-image: url('/assets/icons/mail.svg');
}

/* Menu responsivo: uma única fonte para abrir e fechar. */
.menu-toggle .bar { display: none !important; }
.menu-toggle::after {
  content: '' !important;
  width: 22px;
  height: 22px;
  color: #fff;
  background-color: currentColor;
  -webkit-mask: url('/assets/icons/menu.svg') center / contain no-repeat;
  mask: url('/assets/icons/menu.svg') center / contain no-repeat;
}
.menu-toggle.active::after {
  -webkit-mask-image: url('/assets/icons/close.svg');
  mask-image: url('/assets/icons/close.svg');
}

/* Cartões de serviço presentes na página inicial. */
.ui-icon-box { font-size: 0 !important; }
.icon.ui-icon-box .ui-icon { --icon-size: 29px; }
.payment-icon .ui-icon { --icon-size: 31px; }
.mini-step b .ui-icon { --icon-size: 20px; }
.funnel-card b .ui-icon { --icon-size: 22px; }
.journey .num .ui-icon { --icon-size: 20px; }

.trust-row > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-row > span::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background-color: currentColor;
  -webkit-mask: url('/assets/icons/check.svg') center / contain no-repeat;
  mask: url('/assets/icons/check.svg') center / contain no-repeat;
}

/* Ofertas editoriais: o tipo do serviço define o ícone. */
.service-offer-icon {
  --offer-icon: url('/assets/icons/help-circle.svg');
  font-size: 0 !important;
}
.service-offer-icon::before {
  content: '';
  display: block;
  width: 31px;
  height: 31px;
  background-color: currentColor;
  -webkit-mask: var(--offer-icon) center / contain no-repeat;
  mask: var(--offer-icon) center / contain no-repeat;
}
.service-offer-habitese .service-offer-icon { --offer-icon: url('/assets/icons/home-check.svg'); }
.service-offer-cnd .service-offer-icon { --offer-icon: url('/assets/icons/file-check.svg'); }
.service-offer-averbacao .service-offer-icon { --offer-icon: url('/assets/icons/ruler-pen.svg'); }
.service-offer-regularizacao .service-offer-icon { --offer-icon: url('/assets/icons/clipboard-check.svg'); }
.service-offer-pericia .service-offer-icon { --offer-icon: url('/assets/icons/search.svg'); }
.service-offer-incendio .service-offer-icon { --offer-icon: url('/assets/icons/shield-flame.svg'); }
.service-offer-projetos .service-offer-icon { --offer-icon: url('/assets/icons/blueprint.svg'); }
.service-offer-orientacao .service-offer-icon { --offer-icon: url('/assets/icons/help-circle.svg'); }

.service-offer-card li::before,
.article .service-offer-card li::before {
  content: '' !important;
  top: .28em !important;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url('/assets/icons/check.svg') center / contain no-repeat;
  mask: url('/assets/icons/check.svg') center / contain no-repeat;
}

/* Setas e controles substituem caracteres de fontes diferentes. */
.intent-wa::after {
  content: '' !important;
  width: 21px;
  height: 21px;
  background: transparent url('/assets/icons/arrow-right.svg') center / contain no-repeat !important;
}
.funnel-card:not(:last-child)::after {
  content: '' !important;
  background: #fff url('/assets/icons/arrow-right.svg') center / 14px 14px no-repeat !important;
}
.faq-list summary::after {
  content: '' !important;
  width: 20px;
  height: 20px;
  background: transparent url('/assets/icons/chevron-down.svg') center / contain no-repeat;
  transition: transform .2s ease;
}
.faq summary { position: relative; padding-right: 32px; }
.faq summary::after {
  content: '' !important;
  position: absolute;
  right: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  background: transparent url('/assets/icons/chevron-down.svg') center / contain no-repeat;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.faq details[open] summary::after {
  content: '' !important;
  transform: translateY(-50%) rotate(180deg);
}
.faq-item summary::after {
  content: '' !important;
  background: #fff url('/assets/icons/chevron-down.svg') center / 16px 16px no-repeat !important;
}
.faq-item[open] summary::after {
  content: '' !important;
  background: #eaf3ff url('/assets/icons/chevron-down.svg') center / 16px 16px no-repeat !important;
  border-color: #8fb6dc !important;
  transform: rotate(180deg) !important;
}
.faq-list details[open] summary::after {
  content: '' !important;
  transform: translateY(-50%) rotate(180deg);
}

/*
 * Componente global do WhatsApp.
 *
 * Existem três modelos históricos no site. Estas regras, carregadas por último,
 * impedem que texto seja inserido dentro do círculo e fazem todos os modelos
 * virarem uma barra legível no celular.
 */
.btn.js-wa-link,
.btn-wa,
.btn-whatsapp,
.btnwa,
.nav-cta,
.service-card-actions .btn-mini-wa {
  align-items: center !important;
  justify-content: center !important;
  max-width: 100%;
  min-height: 44px;
  height: auto;
  gap: 8px;
  line-height: 1.3;
  text-align: center;
}

.btn.js-wa-link::before,
.btn-wa::before,
.btn-whatsapp::before,
.btnwa::before,
.nav-cta::before,
.service-card-actions .btn-mini-wa::before,
.wa-float::before,
.whatsapp-float::before,
.guide-wa-float::before,
.float::before,
.mobile-wa-bar::before {
  margin-right: 0 !important;
}

/* Home no desktop: botão em formato de pílula, nunca um círculo com texto. */
.wa-float {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: min(310px, calc(100vw - 32px));
  height: auto !important;
  min-height: 52px;
  padding: 12px 18px !important;
  gap: 8px;
  overflow: hidden !important;
  color: #fff !important;
  font-size: .92rem !important;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
.wa-float::before,
.guide-wa-float::before,
.float::before,
.mobile-wa-bar::before {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}
.floating-wa-label { display: inline; }

/* Páginas internas no desktop: círculo realmente icon-only. */
.whatsapp-float {
  position: fixed !important;
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 200 !important;
  display: grid !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #25d366 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.whatsapp-float::before {
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  margin: 0 !important;
}
.whatsapp-float::after { content: none !important; }

@media (max-width: 820px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }

  .btn.js-wa-link,
  .btn-wa,
  .btn-whatsapp,
  .btnwa,
  .nav-cta,
  .service-card-actions .btn-mini-wa {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* A home já possui a barra inferior própria; o segundo botão é removido. */
  .wa-float { display: none !important; }

  .whatsapp-float,
  .guide-wa-float,
  .float,
  .mobile-wa-bar {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 11px 16px !important;
    gap: 9px;
    overflow: hidden !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: #12823d !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-align: center;
    white-space: normal !important;
  }
  .whatsapp-float::before,
  .guide-wa-float::before,
  .float::before,
  .mobile-wa-bar::before {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    margin: 0 !important;
  }
  .whatsapp-float::after {
    content: 'Falar no WhatsApp' !important;
    display: inline !important;
    font-size: .94rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .whatsapp-float,
  .guide-wa-float,
  .float,
  .mobile-wa-bar {
    left: 8px !important;
    right: 8px !important;
    padding-inline: 12px !important;
    font-size: .88rem !important;
  }
  .whatsapp-float::after { font-size: .88rem !important; }
}

@media print {
  .ui-icon,
  a[href*="wa.me"]::before,
  a[href^="tel:"]::before,
  a[href^="mailto:"]::before { print-color-adjust: exact; }
}