.elementor-kit-5{--e-global-color-primary:#0468BF;--e-global-color-secondary:#0487D9;--e-global-color-text:#1F2430;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Josefin Sans";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Josefin Sans";--e-global-typography-secondary-font-weight:300;--e-global-typography-text-font-family:"Josefin Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   KIT DE EFEITOS X2 — vai para Elementor › Configurações do site › CSS personalizado
   (gravado pelo aplicar-tudo.php). Classes aplicadas pelos geradores;
   no editor, entram em Avançado › Classes CSS de qualquer elemento.
   Paleta do guia: azul #0468BF (principal) e #0487D9 (apoio) + tons profundos do rodapé.
   ===================================================================== */
:root {
  --x2-azul: #0468BF;
  --x2-apoio: #0487D9;
  --x2-profundo: #033F74;
  --x2-noite: #022D54;
  --x2-claro: #EAF2FA;
  --x2-royal: #11499E; /* azul royal da arte do Diego (01/10): fundo do cartão da equipe */
  --x2-grad: linear-gradient(120deg, #033F74 0%, #0468BF 45%, #0487D9 100%);
  --x2-grad-texto: linear-gradient(100deg, #0468BF 0%, #0487D9 55%, #033F74 100%);
  --x2-sombra: 0 18px 40px -18px rgba(4, 104, 191, .55);
  --x2-sombra-card: 0 28px 56px -28px rgba(3, 63, 116, .38);
  --x2-ease: cubic-bezier(.22, .61, .36, 1);
  --x2-fechadura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='112 658 124 175'%3E%3Cpath fill='white' fill-opacity='.07' d='M229.13,663.87h-30.78l-24.77,51.1-24.66-51.1h-30.41l39.88,82.42-39.25,80.96h30.1l13.16-26.91c-8.48-4.07-14.33-12.74-14.33-22.78,0-13.95,11.31-25.26,25.26-25.26s25.26,11.31,25.26,25.26c0,9.94-5.75,18.54-14.1,22.66l13.08,27.03h30.17l-38.99-80.81,40.37-82.57Z'/%3E%3C/svg%3E");
}

/* ---------- 1. Texto em gradiente ----------
   .x2-grad: trecho dentro de um título (<span class="x2-grad">)
   .x2-titulo-grad: título inteiro · .x2-numero: número do contador */
.x2-grad,
.x2-titulo-grad .elementor-heading-title,
.x2-numero .elementor-counter-number-wrapper {
  background: var(--x2-grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* versão clara, para texto sobre foto ou vídeo escuro */
.x2-grad-claro,
.x2-numero-claro .elementor-counter-number-wrapper {
  background: linear-gradient(100deg, #FFFFFF 0%, #CFE8FF 45%, #7FC3F2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ---------- 2. Botões ---------- */
.x2-btn-grad .elementor-button,
.x2-btn-contorno .elementor-button,
.x2-btn-branco .elementor-button,
.x2-btn-vidro .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-position .6s var(--x2-ease), transform .35s var(--x2-ease), box-shadow .35s var(--x2-ease), color .3s, border-color .3s;
}
.x2-btn-grad .elementor-button-icon,
.x2-btn-contorno .elementor-button-icon,
.x2-btn-branco .elementor-button-icon,
.x2-link-seta .elementor-button-icon { transition: transform .35s var(--x2-ease); }
.x2-btn-grad .elementor-button:hover .elementor-button-icon,
.x2-btn-contorno .elementor-button:hover .elementor-button-icon,
.x2-btn-branco .elementor-button:hover .elementor-button-icon,
.x2-link-seta .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }

/* brilho que atravessa o botão no hover */
.x2-btn-grad .elementor-button::after,
.x2-btn-branco .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--x2-ease);
}
.x2-btn-grad .elementor-button:hover::after,
.x2-btn-branco .elementor-button:hover::after { transform: translateX(130%); }

/* principal: gradiente que desliza */
.x2-btn-grad .elementor-button {
  background: linear-gradient(120deg, #033F74 0%, #0468BF 35%, #0487D9 65%, #0468BF 100%) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50% !important;
  border-color: transparent !important;
  color: #fff !important;
}
.x2-btn-grad .elementor-button:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px);
  box-shadow: var(--x2-sombra);
}

/* contorno: enche de gradiente no hover */
.x2-btn-contorno .elementor-button {
  background: linear-gradient(120deg, #0468BF, #0487D9) no-repeat 0 0 / 0% 100% !important;
  transition: background-size .5s var(--x2-ease), transform .35s var(--x2-ease), box-shadow .35s var(--x2-ease), color .3s, border-color .3s;
}
.x2-btn-contorno .elementor-button:hover {
  background-size: 100% 100% !important;
  color: #fff !important;
  border-color: var(--x2-azul) !important;
  transform: translateY(-2px);
  box-shadow: var(--x2-sombra);
}

/* branco sobre azul */
.x2-btn-branco .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(2, 45, 84, .6);
}

/* contorno branco com vidro fosco */
.x2-btn-vidro .elementor-button {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* 21/10 (Diego): no hover vira o degradê azul da marca (antes clareava o vidro) */
.x2-btn-vidro .elementor-button:hover, .x2-btn-vidro .elementor-button:focus-visible {
  background: var(--x2-grad) !important; border-color: transparent !important; color: #fff !important;
  transform: translateY(-2px); box-shadow: var(--x2-sombra);
}

/* portais: cor oficial de cada um (Zap #FF5D05 do logo · OLX #6E0AD6), para a pessoa reconhecer o destino */
.x2-btn-zap .elementor-button, .x2-btn-olx .elementor-button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--x2-ease), box-shadow .35s var(--x2-ease), filter .35s;
}
.x2-btn-zap .elementor-button::after, .x2-btn-olx .elementor-button::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--x2-ease);
}
.x2-btn-zap .elementor-button:hover::after, .x2-btn-olx .elementor-button:hover::after { transform: translateX(130%); }
.x2-btn-zap .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(255, 93, 5, .75); filter: brightness(1.06); }
.x2-btn-olx .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(110, 10, 214, .75); filter: brightness(1.12); }

/* toque dos portais no banner azul: laranja do Zap perto do botão do Zap, roxo da OLX perto do botão da OLX */
.x2-banner-zap::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(30% 120% at 100% 40%, rgba(110, 10, 214, .55) 0%, rgba(110, 10, 214, .16) 50%, rgba(110, 10, 214, 0) 78%),
    radial-gradient(36% 130% at 74% 72%, rgba(255, 93, 5, .45) 0%, rgba(255, 93, 5, .13) 50%, rgba(255, 93, 5, 0) 78%);
}
.x2-banner-zap > .e-con-inner, .x2-banner-zap > .elementor-element { position: relative; z-index: 1; }
/* botões empilhados embaixo (banner do Contato e celular): laranja à esquerda, roxo à direita, subindo do pé */
.x2-banner-zap--baixo::after {
  background:
    radial-gradient(70% 45% at 85% 100%, rgba(110, 10, 214, .5) 0%, rgba(110, 10, 214, .14) 50%, rgba(110, 10, 214, 0) 80%),
    radial-gradient(80% 50% at 15% 95%, rgba(255, 93, 5, .45) 0%, rgba(255, 93, 5, .12) 50%, rgba(255, 93, 5, 0) 80%);
}
@media (max-width: 767px) {
  .x2-banner-zap::after {
    background:
      radial-gradient(80% 40% at 90% 100%, rgba(110, 10, 214, .5) 0%, rgba(110, 10, 214, .14) 50%, rgba(110, 10, 214, 0) 80%),
      radial-gradient(90% 45% at 10% 92%, rgba(255, 93, 5, .42) 0%, rgba(255, 93, 5, .12) 50%, rgba(255, 93, 5, 0) 80%);
  }
}

/* "X" da X2 (a fechadura do logo) bem suave no fundo, atrás da foto da Magali */
.x2-marca-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='112 658 124 175'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230468BF'/%3E%3Cstop offset='1' stop-color='%230487D9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-opacity='.075' d='M229.13,663.87h-30.78l-24.77,51.1-24.66-51.1h-30.41l39.88,82.42-39.25,80.96h30.1l13.16-26.91c-8.48-4.07-14.33-12.74-14.33-22.78,0-13.95,11.31-25.26,25.26-25.26s25.26,11.31,25.26,25.26c0,9.94-5.75,18.54-14.1,22.66l13.08,27.03h30.17l-38.99-80.81,40.37-82.57Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 4% center !important;
  background-size: auto 122% !important;
}
@media (max-width: 767px) {
  .x2-marca-x { background-position: center 6% !important; background-size: auto 46% !important; }
}

/* ---------- 3. Cartões ----------
   .x2-card: sobe, ganha sombra azulada e borda em gradiente
   .x2-card--destaque: cartão azul com gradiente vivo */
.x2-card {
  transition: transform .5s var(--x2-ease), box-shadow .5s var(--x2-ease), border-color .5s;
  will-change: transform;
}
.x2-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--x2-sombra-card);
}
.x2-card:not(.x2-card--destaque):hover {
  border-color: transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--x2-grad) border-box !important;
}
.x2-card .elementor-icon { transition: transform .5s var(--x2-ease); }
.x2-card:hover .elementor-icon { transform: translateY(-3px) scale(1.08); }
.x2-card:hover .elementor-button-icon { transform: translateX(6px); }

.x2-card--destaque {
  background: var(--x2-grad) !important;
  background-size: 170% 170% !important;
  animation: x2-deriva 9s ease-in-out infinite alternate;
  border-color: transparent !important;
}
.x2-card--destaque:hover { box-shadow: 0 30px 60px -24px rgba(4, 104, 191, .65); }
@keyframes x2-deriva {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}

/* número dos passos (bolinha azul) */
.x2-passo-num {
  background: var(--x2-grad) !important;
  box-shadow: 0 0 0 0 rgba(4, 135, 217, .45);
  transition: box-shadow .5s var(--x2-ease), transform .5s var(--x2-ease);
}
.x2-card:hover .x2-passo-num {
  box-shadow: 0 0 0 8px rgba(4, 135, 217, .14);
  transform: scale(1.06);
}

/* ---------- 4. Fotos ----------
   .x2-foto: zoom suave na imagem + véu azul (vale para widget de imagem dentro do bloco) */
.x2-foto { overflow: hidden; }
.x2-foto img { transition: transform 1.2s var(--x2-ease), filter .6s; }
.x2-foto:hover img { transform: scale(1.06); }
.x2-foto .elementor-widget-image { position: relative; }
.x2-foto .elementor-widget-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(4, 135, 217, 0) 40%, rgba(3, 63, 116, .45) 100%);
  opacity: 0;
  transition: opacity .6s var(--x2-ease);
  pointer-events: none;
}
.x2-foto:hover .elementor-widget-image::after { opacity: 1; }

/* ---------- 5. Fundos ---------- */
/* fundo com foto (fundoFoto no gerador): o parallax não vaza dos cantos arredondados */
.x2-fundo-foto { overflow: hidden; }
.x2-fundo-foto > .elementor-motion-effects-container { border-radius: inherit; }
/* 13/10: o Pro só carrega o CSS do parallax (motion-fx) quando a própria página usa o efeito. Em Quem Somos o único
   parallax vem do banner global (shortcode), o CSS não vinha e a foto do Zap ficava com altura 0. Cópia das regras: */
.elementor-motion-effects-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.elementor-motion-effects-layer { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: cover;
  transition: transform 1s cubic-bezier(0, .33, .07, 1.03); }
/* banner lateral do Contato no celular (Diego, 08/10, opção A): a foto é vertical e o recorte do meio pegava só um
   pedaço do arco; no celular mostra a parte de cima, com o arco inteiro e a margem do lago */
@media (max-width: 767px) { .x2-banner-lateral { background-position: center 22% !important; } }
/* halo azul suave (topo das páginas, fundo branco) */
.x2-halo {
  background-image:
    radial-gradient(55% 60% at 88% 18%, rgba(4, 135, 217, .13), transparent 62%),
    radial-gradient(45% 55% at 0% 100%, rgba(4, 104, 191, .08), transparent 60%) !important;
}
/* malha de pontos (seções claras) */
.x2-pontos {
  background-image: radial-gradient(rgba(4, 104, 191, .10) 1px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
}
/* faixa azul com gradiente vivo e a fechadura em marca d'água */
.x2-banner {
  background-image: var(--x2-fechadura), linear-gradient(120deg, #033F74 0%, #0468BF 40%, #0487D9 70%, #0468BF 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 6% center, 0% 50% !important;
  background-size: auto clamp(200px, 150%, 380px), 220% 100% !important;
  animation: x2-banner 14s ease-in-out infinite alternate;
}
@keyframes x2-banner {
  from { background-position: right 6% center, 0% 50%; }
  to { background-position: right 4% center, 100% 50%; }
}
/* rodapé: só o gradiente profundo. 13/10: o Diego pediu o rodapé sem nenhum X (fechadura e X2 em contorno saíram) */
.x2-rodape:not(.x2-com-marca) {
  background-image: linear-gradient(160deg, #033F74 0%, #022D54 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.x2-rodape a, .x2-rodape-barra a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size .4s var(--x2-ease), color .3s;
}
.x2-rodape a:hover, .x2-rodape-barra a:hover { background-size: 100% 1px; color: #fff; }

/* 13/10: seção do Instagram (Serviços). Enquanto a conta da X2 não estiver conectada no Smash Balloon, o bloco do
   feed fica vazio e só abria um vão entre o texto e o botão: some até existir pelo menos um post */
.x2-insta .elementor-widget-shortcode:not(:has(.sbi_item)) { display: none; }

/* ---------- 6. Cabeçalho fixo que encolhe e vira vidro ao rolar ---------- */
.x2-topo {
  transition: padding .4s var(--x2-ease), padding-block .4s var(--x2-ease), background-color .4s, box-shadow .4s;
}
.x2-topo .elementor-widget-image img { transition: width .4s var(--x2-ease); }
.x2-topo.elementor-sticky--effects {
  background-color: rgba(255, 255, 255, .84) !important;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 12px 32px -20px rgba(2, 45, 84, .4);
  border-bottom-color: transparent !important;
  --padding-top: 8px !important;     /* o container do Elementor aplica o espaçamento por estas variáveis */
  --padding-bottom: 8px !important;
}
.x2-topo.elementor-sticky--effects .elementor-widget-image img { width: 160px !important; }
@media (max-width: 767px) {
  .x2-topo.elementor-sticky--effects .elementor-widget-image img { width: 130px !important; }
}

/* 13/10 (teste do Diego): cabeçalho azul em degradê, do azul profundo do rodapé ao azul da marca. Liga com
   TOPO_AZUL no build.mjs (classe x2-topo--azul + logo branco). Ao rolar, o mesmo degradê fica levemente translúcido */
.x2-topo--azul {
  background-color: transparent !important;
  background-image: linear-gradient(110deg, #022D54 0%, #033F74 45%, #0468BF 100%) !important;
  border-bottom-color: transparent !important;
}
.x2-topo--azul.elementor-sticky--effects {
  background-color: transparent !important;
  background-image: linear-gradient(110deg, rgba(2, 45, 84, .92) 0%, rgba(3, 63, 116, .9) 45%, rgba(4, 104, 191, .88) 100%) !important;
  box-shadow: 0 14px 34px -18px rgba(2, 45, 84, .65);
}
.x2-topo--azul .elementor-nav-menu--main .elementor-item,
.x2-topo--azul .elementor-nav-menu--main .elementor-item:visited { color: rgba(255, 255, 255, .86) !important; }
.x2-topo--azul .elementor-nav-menu--main .elementor-item:hover,
.x2-topo--azul .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #FFFFFF !important; }
.x2-topo--azul .x2-menu .e--pointer-underline .elementor-item::after { background: linear-gradient(90deg, #7CC4FF, #FFFFFF) !important; }
.x2-topo--azul .elementor-menu-toggle { color: #FFFFFF !important; background-color: rgba(255, 255, 255, .12) !important; }
.x2-topo--azul .elementor-menu-toggle svg { fill: #FFFFFF !important; }
/* botões sobre o azul: contorno branco translúcido e o principal em branco com texto azul */
.x2-topo--azul .x2-btn-contorno .elementor-button {
  background: rgba(255, 255, 255, 0) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .65) !important;
}
.x2-topo--azul .x2-btn-contorno .elementor-button:hover { background: rgba(255, 255, 255, .14) !important; border-color: #FFFFFF !important; }
.x2-topo--azul .x2-btn-grad .elementor-button { background: #FFFFFF !important; color: #033F74 !important; border-color: #FFFFFF !important; }
.x2-topo--azul .x2-btn-grad .elementor-button:hover { background: #EAF2FA !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }

/* 13/10: "Anúncios X2" só no menu do celular e do tablet; no computador o botão "Imóveis disponíveis" faz o papel */
@media (min-width: 1025px) {
  .x2-menu .elementor-nav-menu--main .x2-so-celular { display: none !important; }
}

/* menu: uma linha + sublinhado em gradiente */
.x2-nav-grupo { flex: 1 1 auto !important; min-width: 0; width: auto !important; justify-content: flex-end !important; }
.x2-nav-grupo > .elementor-element { flex: 0 0 auto !important; width: auto !important; }
.x2-menu .elementor-nav-menu--main .elementor-item { white-space: nowrap; }
.x2-menu .e--pointer-underline .elementor-item::after {
  height: 2px;
  border-radius: 2px;
  background: var(--x2-grad) !important;
}

/* ---------- 7. Cartão do corretor (Quem Somos: 7 · Home: 3 compactos) ----------
   Em repouso: foto + nome e função sobre o pé do degradê. No hover (ou foco pelo teclado):
   o degradê azul sobe e revela o registro (CRECI/OAB) e o botão de WhatsApp.
   A fechadura fica atrás da foto: com a foto recortada (sem fundo), ela aparece. */
.x2-equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.x2-rostos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* no celular a seção vira coluna com wrap e o Chrome encolhia o bloco HTML (42px) — a grade vazava por cima da seção seguinte.
   08/10: o mesmo com o cartão da Magali (bloco com altura 0, o cartão ficava por cima do texto na Home e em Quem Somos) */
.elementor-widget-html:has(.x2-equipe), .elementor-widget-html:has(.x2-rostos),
.elementor-widget-html:has(.x2-corretor--destaque) { flex: 0 0 auto; width: 100%; }
@media (max-width: 767px) { .e-con:has(> .elementor-widget-html .x2-corretor--destaque) { flex: 0 0 auto; } }
@media (max-width: 1024px) { .x2-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .x2-equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .x2-rostos { gap: 10px; } }

.x2-corretor {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg, #EAF2FA 0%, #D5E6F7 100%);
  font-family: 'Josefin Sans', sans-serif; color: #fff;
  transition: transform .55s var(--x2-ease), box-shadow .55s var(--x2-ease);
}
/* proporção 4:5 pelo espaçador (com aspect-ratio, o Chrome do celular calculava a altura errada e a grade vazava) */
.x2-corretor::before { content: ""; display: block; padding-top: 125%; }
.x2-corretor > svg { position: absolute; left: 22%; bottom: 0; width: 56%; height: 88%; color: var(--x2-azul); opacity: .9; z-index: 0; }
.x2-corretor > img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  object-fit: cover; object-position: center 18%;
  transition: transform 1.1s var(--x2-ease);
}

/* Cenário (01/10, aprovado pelo Diego a partir da arte dele): azul royal chapado com o "X2" do logo gigante e
   cortado nas bordas (SVG que o gerador põe dentro do cenário). x2-corretor--loja (só a Magali) troca pela foto da
   loja desfocada (imagem vem no style do próprio cenário). */
.x2-corretor__cena {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  background-color: var(--x2-royal); background-size: cover; background-position: center;
  box-shadow: 0 22px 44px -26px rgba(3, 63, 116, .45);
  transition: box-shadow .55s var(--x2-ease);
}
.x2-corretor__x2 { position: absolute; left: -6%; top: 4%; width: 112%; height: 96%; }
.x2-corretor__x2 * { fill: rgba(255, 255, 255, .22); }
.x2-corretor--loja .x2-corretor__cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(3, 63, 116, .12), rgba(2, 45, 84, .28)); }

/* Pessoa recortada com a cabeça para fora da moldura (padrão do Diego): o cenário fica dentro e o cabelo sai
   --x2-sai acima (16% na equipe, como na arte; 7% na Magali). --x2-altura vem do gerador, medida com o cabelo 7%
   acima; a diferença é somada aqui para o pé da foto continuar no pé do cartão. */
.x2-corretor--recorte { --x2-sai: 16%; overflow: visible; margin-top: calc(var(--x2-sai) * 1.35); clip-path: inset(-60% 0 0 0 round 16px); }
.x2-corretor--recorte > img, .x2-corretor__sombra {
  position: absolute; top: calc(var(--x2-sai) * -1); left: 50%; right: auto; bottom: auto;
  width: auto; max-width: none; height: calc(var(--x2-altura, 110%) + var(--x2-sai) - 7%);
  object-fit: contain; transform: translateX(-50%);
}
/* sombra lateral (como na arte): cópia escura e desfocada da pessoa, deslocada para a esquerda, dentro do cenário */
/* 13/10: sombra de lado mantida, bem mais suave (era opacidade .5, desfoque 12px e deslocamento 7%) */
.x2-corretor__sombra { z-index: 1; transform: translate(calc(-50% - 5%), 2%); filter: brightness(0) blur(20px); opacity: .22; pointer-events: none; }
.x2-corretor--recorte .x2-corretor__veu { border-radius: inherit; }
.x2-corretor--recorte:hover, .x2-corretor--recorte:focus-within { box-shadow: none; }
.x2-corretor--recorte:hover .x2-corretor__cena, .x2-corretor--recorte:focus-within .x2-corretor__cena { box-shadow: var(--x2-sombra-card); }
.x2-equipe:has(.x2-corretor--recorte) { row-gap: 56px; }
.x2-rostos:has(.x2-corretor--recorte) { row-gap: 40px; }

/* Magali em destaque (Home e Quem Somos): loja ao fundo, cabeça saindo menos */
.x2-corretor--destaque { border-radius: 22px; }
.x2-corretor--destaque.x2-corretor--recorte { --x2-sai: 7%; clip-path: inset(-60% 0 0 0 round 22px); }
.x2-corretor--destaque .x2-corretor__info { padding: 26px 28px 28px; }
.x2-corretor--destaque .x2-corretor__nome { font-size: 26px; }
.x2-corretor__veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(2, 45, 84, .97) 0%, rgba(3, 63, 116, .9) 32%, rgba(4, 104, 191, .55) 62%, rgba(4, 135, 217, 0) 100%);
  transform: translateY(55%);
  transition: transform .75s var(--x2-ease);
}
.x2-corretor__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 2px; }
.x2-corretor__funcao { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.x2-corretor__nome { font-size: 22px; font-weight: 600; line-height: 1.2; }
.x2-corretor__mais { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--x2-ease), opacity .45s; }
.x2-corretor__mais > div { overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
.x2-corretor__registro, .x2-corretor__wa { transform: translateY(10px); transition: transform .55s var(--x2-ease), background .3s, color .3s, box-shadow .3s; }
.x2-corretor__registro {
  margin-top: 12px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.x2-corretor__wa {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--x2-azul) !important;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.x2-corretor__wa svg { width: 17px; height: 17px; fill: currentColor; }
.x2-corretor__wa:hover { background: var(--x2-claro); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); }

.x2-corretor:hover, .x2-corretor:focus-within { transform: translateY(-6px); box-shadow: var(--x2-sombra-card); }
/* 01/10 (Diego, na prévia): o degradê sobe só até a metade (o rosto fica livre) e só nos cartões que têm CRECI ou
   WhatsApp; sem zoom na foto (o zoom tirava o recorte do centro). Cartão sem informação extra (Magali) não muda */
.x2-corretor:has(.x2-corretor__mais):hover .x2-corretor__veu, .x2-corretor:has(.x2-corretor__mais):focus-within .x2-corretor__veu { transform: translateY(28%); }
.x2-corretor:hover .x2-corretor__mais, .x2-corretor:focus-within .x2-corretor__mais { grid-template-rows: 1fr; opacity: 1; }
.x2-corretor:hover .x2-corretor__registro, .x2-corretor:focus-within .x2-corretor__registro { transform: none; transition-delay: .08s; }
.x2-corretor:hover .x2-corretor__wa, .x2-corretor:focus-within .x2-corretor__wa { transform: none; transition-delay: .16s; }

/* versão compacta (Home, 3 lado a lado) */
.x2-corretor--mini { border-radius: 12px; }
.x2-corretor--mini.x2-corretor--recorte { clip-path: inset(-60% 0 0 0 round 12px); }
.x2-corretor--mini .x2-corretor__sombra { filter: brightness(0) blur(12px); }
.x2-corretor--mini .x2-corretor__info { padding: 12px 12px 14px; }
.x2-corretor--mini .x2-corretor__funcao { font-size: 10px; letter-spacing: 1.5px; }
.x2-corretor--mini .x2-corretor__nome { font-size: 16px; }
.x2-corretor--mini .x2-corretor__registro { margin-top: 8px; padding: 3px 8px; font-size: 11px; }
.x2-corretor--mini .x2-corretor__wa { margin-top: 8px; padding: 7px 10px; font-size: 12px; gap: 6px; }
.x2-corretor--mini .x2-corretor__wa svg { width: 14px; height: 14px; }

.x2-corretor__registro, .x2-corretor__wa { white-space: nowrap; }
/* celular: 2 por linha, cartão mais enxuto (botão só "WhatsApp") */
@media (max-width: 767px) {
  .x2-corretor { border-radius: 12px; }
  .x2-corretor--recorte { clip-path: inset(-60% 0 0 0 round 12px); }
  .x2-corretor__sombra { filter: brightness(0) blur(12px); }
  .x2-equipe:has(.x2-corretor--recorte) { row-gap: 40px; }
  .x2-corretor--destaque .x2-corretor__nome { font-size: 22px; }
  .x2-corretor__info { padding: 12px 12px 14px; }
  .x2-corretor__funcao { font-size: 10px; letter-spacing: 1.2px; }
  /* 08/10: nos 3 rostos da Home, "ATENDIMENTO" passava da borda do cartão */
  .x2-corretor--mini .x2-corretor__funcao { font-size: 9px; letter-spacing: .5px; }
  .x2-corretor__nome { font-size: 17px; }
  .x2-corretor__registro { margin-top: 8px; padding: 3px 9px; font-size: 11px; letter-spacing: .5px; }
  .x2-corretor__wa { margin-top: 8px; padding: 7px 11px; font-size: 12px; gap: 6px; }
  .x2-corretor__wa svg { width: 14px; height: 14px; }
  .x2-corretor__wa-longo { display: none; }
}
/* celular e tablet (sem hover): tudo aberto, degradê na mesma altura do hover */
@media (hover: none) {
  .x2-corretor:has(.x2-corretor__mais) .x2-corretor__veu { transform: translateY(28%); }
  .x2-corretor__mais { grid-template-rows: 1fr; opacity: 1; }
  .x2-corretor__registro, .x2-corretor__wa { transform: none; }
}

/* ícones em círculo (Contato) */
.x2-icone-grad .elementor-icon { background: var(--x2-grad) !important; transition: transform .4s var(--x2-ease), box-shadow .4s; }
.x2-canal:hover .x2-icone-grad .elementor-icon { transform: scale(1.08) rotate(-4deg); box-shadow: var(--x2-sombra); }

/* ---------- 8. Entrada ao rolar (mais sutil que a padrão do Elementor) ----------
   O gerador marca o elemento com animação de entrada "fadeIn" + classe x2-revela */
.x2-revela.animated {
  animation-name: x2-sobe !important;
  animation-duration: .9s !important;
  animation-timing-function: var(--x2-ease) !important;
}
/* entrada roda uma vez só, mesmo em elemento que já tinha animação contínua */
.x2-revela.animated { animation-iteration-count: 1 !important; animation-direction: normal !important; }
/* cartão de destaque: primeiro entra, depois o gradiente começa a se mover */
.x2-card--destaque.x2-revela.animated {
  animation: x2-sobe .9s var(--x2-ease) backwards, x2-deriva 9s ease-in-out .9s infinite alternate !important;
}
@keyframes x2-sobe {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- 9. Acessibilidade ---------- */
.elementor-button:focus-visible, .x2-corretor__wa:focus-visible, .elementor-item:focus-visible {
  outline: 3px solid var(--x2-apoio);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .x2-revela.animated, .x2-card--destaque, .x2-banner { animation: none !important; }
  .x2-card, .x2-card:hover, .x2-corretor, .x2-corretor > img,
  .x2-corretor__registro, .x2-corretor__wa, .x2-corretor__mais,
  .x2-btn-grad .elementor-button, .x2-btn-contorno .elementor-button,
  .x2-btn-branco .elementor-button, .x2-btn-vidro .elementor-button,
  .x2-foto img { transition: none !important; transform: none !important; }
  .x2-btn-grad .elementor-button::after, .x2-btn-branco .elementor-button::after { display: none; }
  .elementor-motion-effects-element, .elementor-motion-effects-layer { transform: none !important; }
  /* sem movimento: cartão do corretor já aberto, com o degradê parado na metade */
  .x2-corretor__veu { transition: none !important; }
  .x2-corretor:has(.x2-corretor__mais) .x2-corretor__veu { transform: translateY(28%) !important; }
  .x2-corretor__mais { grid-template-rows: 1fr; opacity: 1; }
}

/* ---------- 10. Material da X2 de 21/10 (fotos do ensaio, vídeo da Magali, avaliações do Google) ---------- */
/* Equipe com 9 pessoas: no computador 5 + 4 (segunda linha centralizada), no tablet 3 por linha, no celular 2 */
/* a margem de cima do recorte era em % (vale na grade, mas no flex o % é da largura da grade inteira e abria um vão
   enorme entre as linhas): no flex, o espaço da cabeça vem do padding e do row-gap */
.x2-equipe, .x2-equipe:has(.x2-corretor--recorte) { display: flex; flex-wrap: wrap; justify-content: center; gap: 72px 20px; padding-top: 44px; }
.x2-equipe > .x2-corretor { flex: 0 0 calc((100% - 80px) / 5); margin-top: 0; }
@media (max-width: 1024px) { .x2-equipe > .x2-corretor { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 767px) {
  .x2-equipe, .x2-equipe:has(.x2-corretor--recorte) { gap: 52px 14px; padding-top: 34px; }
  .x2-equipe > .x2-corretor { flex-basis: calc((100% - 14px) / 2); }
}
/* recorte mais largo que o cartão: o clip-path esconde, mas a sobra contava na largura da página (rolagem lateral de
   8px no celular). clip só no eixo x deixa a cabeça sair por cima */
.x2-equipe, .x2-rostos, .elementor-widget-html:has(.x2-corretor--destaque) { overflow-x: clip; }
/* pé da foto esfumado: fotos de perto terminam dentro do cartão, sem linha reta (some por baixo do degradê do nome) */
.x2-corretor--recorte > img, .x2-corretor--recorte .x2-corretor__sombra {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
}

/* bloco HTML com largura zero no flex (mesmo caso da equipe e da Magali, seção 7) */
.elementor-widget-html:has(.x2-video) { flex: 0 0 auto; width: 100%; }

/* Vídeo da Magali: vertical, cantos do bloco grande, capa com play e legenda; ao tocar, a capa sai e entram os controles */
.x2-video { position: relative; margin: 0 auto; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  background: var(--x2-noite); box-shadow: 0 30px 60px -24px rgba(3, 63, 116, .45); }
.x2-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* .x2-video na frente: o botão do tema Hello (borda rosa, texto centralizado, fundo no hover) tem o mesmo peso */
.x2-video .x2-video__play, .x2-video .x2-video__play:hover, .x2-video .x2-video__play:focus {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: 14px; padding: 26px 24px; border: 0; border-radius: 0; cursor: pointer; text-align: left; white-space: normal;
  color: #fff; font-family: 'Josefin Sans', sans-serif;
  background: linear-gradient(to top, rgba(2, 45, 84, .9) 0%, rgba(2, 45, 84, .35) 34%, rgba(2, 45, 84, 0) 55%); }
.x2-video__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--x2-azul);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); transition: transform .4s var(--x2-ease); animation: x2-pulso 2.4s ease-out infinite; }
.x2-video__icone svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.x2-video__legenda { font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.x2-video__legenda strong { display: block; font-size: 21px; font-weight: 600; color: #fff; }
.x2-video__play:hover .x2-video__icone, .x2-video__play:focus-visible .x2-video__icone { transform: scale(1.08); }
.x2-video__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.x2-video.is-tocando .x2-video__play { display: none; }
@keyframes x2-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
@media (max-width: 767px) { .x2-video { max-width: 300px; border-radius: 18px; } }

/* Avaliações do Google em slide (21/10, referência do Diego): cartão azul fixo com a nota e cartões brancos que passam
   sozinhos (o script está no próprio bloco). O trilho rola na horizontal com encaixe; setas embaixo, centralizadas */
.x2-aval { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; font-family: 'Josefin Sans', sans-serif; }
.x2-aval__nota { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 30px 28px; border-radius: 20px; color: #fff;
  background: var(--x2-grad); box-shadow: var(--x2-sombra); min-height: 330px; }
.x2-aval__nota::after { content: ""; position: absolute; right: -40px; bottom: -30px; width: 190px; height: 230px; background: var(--x2-fechadura) no-repeat center / contain; opacity: .9; pointer-events: none; }
.x2-aval__estrelas { color: #F2B01E; font-size: 20px; letter-spacing: 3px; line-height: 1; }
.x2-aval__numero { display: block; margin-top: 14px; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.x2-aval__rotulo { font-size: 18px; color: rgba(255, 255, 255, .85); }
.x2-aval__rodape { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 24px; }
.x2-aval__rodape span { font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .8); }
.x2-aval__rodape strong { display: block; font-size: 18px; color: #fff; }
.x2-aval__rostos { display: flex; }
.x2-aval__rostos span { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -10px; border-radius: 50%; border: 2px solid #fff;
  background: #fff; color: var(--x2-azul) !important; font-weight: 700; font-size: 15px !important; }
.x2-aval__rostos span:first-child { margin-left: 0; }
.x2-aval__nota a { position: relative; z-index: 1; margin-top: 16px; font-size: 14px; font-weight: 600; color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
.x2-aval__trilho { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; }
.x2-aval__trilho::-webkit-scrollbar { display: none; }
.x2-aval__card { flex: 0 0 calc((100% - 40px) / 2.4); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; padding: 28px 26px;
  border-radius: 20px; background: #fff; border: 1px solid #E1E9F2; transition: box-shadow .35s var(--x2-ease), transform .35s var(--x2-ease); }
.x2-aval__card:hover { box-shadow: var(--x2-sombra-card); transform: translateY(-3px); }
.x2-aval__aspas { font-size: 64px; line-height: .8; height: 30px; font-weight: 700; color: var(--x2-azul); }
.x2-aval__card blockquote { margin: 14px 0 0; padding: 0; border: 0; font-size: 16px; line-height: 1.6; color: #1F2430; font-style: normal; }
.x2-aval__card figcaption { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; font-style: normal; }
.x2-aval__inicial { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--x2-claro); color: var(--x2-azul); font-weight: 700; font-size: 17px; }
.x2-aval__card figcaption strong { display: block; font-size: 16px; font-weight: 600; color: var(--x2-noite); }
.x2-aval__card figcaption small { font-size: 13px; color: #3A4254; }
.x2-aval__card figcaption small .x2-aval__estrelas { font-size: 11px; letter-spacing: 1px; }
.x2-aval__setas { grid-column: 1 / -1; display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.x2-aval__setas button, .x2-aval__setas button:hover, .x2-aval__setas button:focus { display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 1px solid #E1E9F2; background: #fff; color: var(--x2-azul); cursor: pointer; transition: background .3s, color .3s; }
.x2-aval__setas button:hover { background: var(--x2-azul); color: #fff; border-color: var(--x2-azul); }
.x2-aval__setas svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.elementor-widget-html:has(.x2-aval) { flex: 0 0 auto; width: 100%; }
@media (max-width: 1024px) {
  .x2-aval { grid-template-columns: 1fr; }
  .x2-aval__nota { min-height: 0; }
  .x2-aval__card { flex-basis: calc((100% - 20px) / 1.6); }
}
@media (max-width: 767px) { .x2-aval__card { flex-basis: 86%; } .x2-aval__numero { font-size: 52px; } }

/* Vídeo da Magali maior na Home */
.x2-video.x2-video--grande { max-width: 440px; }
@media (max-width: 767px) { .x2-video.x2-video--grande { max-width: 320px; } }

/* Rodapé com ícones e redes (21/10) */
.x2-rodape-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-family: 'Josefin Sans', sans-serif; }
.x2-rodape-lista li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.x2-rodape-lista svg { flex: 0 0 auto; width: 18px; height: 18px; color: #7FC4F5; }
.x2-redes { display: flex; gap: 10px; }
.x2-redes a, .x2-redes a:hover { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; transition: background .3s, transform .3s var(--x2-ease); }
.x2-redes a:hover { background: rgba(255, 255, 255, .22) !important; transform: translateY(-2px); }
.x2-redes svg { width: 20px; height: 20px; }
.x2-redes a:nth-child(2) svg { fill: currentColor; }

/* WhatsApp flutuante (só no celular e tablet: no computador o botão fica no cabeçalho) */
.x2-wa-flutuante { position: fixed; right: 16px; bottom: 18px; z-index: 999; display: none; width: 58px; height: 58px; border-radius: 50%;
  place-items: center; background: #25D366; color: #fff; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); transition: transform .3s var(--x2-ease); }
.x2-wa-flutuante svg { width: 30px; height: 30px; fill: currentColor; }
.x2-wa-flutuante:active { transform: scale(.94); }
@media (max-width: 1024px) { .x2-wa-flutuante { display: grid; } }

@media (prefers-reduced-motion: reduce) {
  .x2-video__icone { animation: none; transition: none; }
  .x2-wa-flutuante { transition: none; }
}

/* Isenção da Home: quadro "Quanto você teria de volta?" com texto em cima e botão embaixo (lado a lado o botão quebrava
   em 3 linhas). 21/10: a arte da casa saiu do gerador; o Diego aplica a imagem direto no WordPress */
.x2-isencao-conta { flex-direction: column !important; align-items: flex-start !important; }

/* reforços (21/10): o rodapé zera o fundo dos links e o tema zera a margem de figure */
a.x2-wa-flutuante, a.x2-wa-flutuante:hover, a.x2-wa-flutuante:focus { background: #25D366 !important; color: #fff !important; }
figure.x2-video { margin: 0 auto !important; }

/* rodapé: o tema pinta link de rosa; tudo branco (21/10) */
.x2-rodape-lista a, .x2-rodape-lista a:visited, .x2-rodape-lista a:hover { color: #fff !important; }
.x2-rodape-lista li { color: #fff; }
/* galeria das unidades (Contato) */
.elementor-widget-html:has(.x2-galeria) { flex: 0 0 auto; width: 100%; }
.x2-galeria { display: flex; flex-direction: column; gap: 40px; font-family: 'Josefin Sans', sans-serif; }
.x2-galeria__grupo h3 { margin: 0 0 14px; font-size: 22px; font-weight: 500; color: #1F2430; }
.x2-galeria__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.x2-galeria__fotos a { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 4; } /* fotos do Google são verticais */
.x2-galeria__fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--x2-ease); }
.x2-galeria__fotos a:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .x2-galeria__fotos { grid-template-columns: 1fr 1fr; gap: 10px; } .x2-galeria__fotos a { border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .x2-galeria__fotos img { transition: none; } }

/* Foto que sangra só para a direita numa seção normal (21/10, isenção da Home): o texto fica na grade de 1200px como as
   outras seções e a foto estica até a borda da tela. --sangra = espaço entre a grade e a borda; a seção corta o excesso
   da barra de rolagem (100vw inclui a barra) */
@media (min-width: 1025px) {
  .x2-sangra-dir { --sangra: max(24px, calc((100vw - 1200px) / 2));
    width: calc(46% + var(--sangra)) !important; margin: -88px calc(-1 * var(--sangra)) -88px 0 !important; border-radius: 0;
    align-self: stretch; }
  /* 21/10 (Diego): sangra também em cima e embaixo (a foto encosta no topo e na base, como a referência dele) (altura toda da seção; 88 = padding da seção no gerador) */
  .e-con:has(> .e-con-inner > .x2-sangra-dir), .e-con:has(> .x2-sangra-dir) { overflow-x: clip; }
}
@media (max-width: 1024px) { .x2-sangra-dir { border-radius: 20px; } }
/* passos da isenção: sem a margem que o tema põe embaixo de todo parágrafo (sobrava um vão em cada cartão) */
.x2-isencao .x2-card p:last-child { margin-bottom: 0; }
/* texto do passo quebra dentro do cartão (o "crescer" do Elementor travava o encolher da coluna) */
.x2-isencao .x2-card > .e-con, .x2-isencao .x2-card .elementor-widget { min-width: 0; flex-shrink: 1 !important; }
/* avaliações: fotos de quem avaliou (21/10) */
img.x2-aval__inicial { object-fit: cover; padding: 0; }
.x2-aval__rostos img { width: 36px; height: 36px; margin-left: -10px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.x2-aval__rostos img:first-child { margin-left: 0; }
/* unidade com foto: a foto sangra no cartão (21/10) */
.x2-unidade--foto { overflow: hidden; }
.x2-unidade--foto .x2-foto, .x2-unidade--foto .x2-foto img { border-radius: 0 !important; }
/* banner dos portais: botões maiores e lado a lado (21/10, o do Zap ficava pequeno no meio do banner) */
.x2-banner-zap .x2-btn-zap .elementor-button, .x2-banner-zap .x2-btn-olx .elementor-button { font-size: 18px !important; padding: 20px 38px 18px !important; min-width: 230px; justify-content: center; }
@media (max-width: 767px) { .x2-banner-zap .x2-btn-zap .elementor-button, .x2-banner-zap .x2-btn-olx .elementor-button { min-width: 0; width: 100%; padding: 18px 24px 16px !important; } .x2-banner-zap .x2-btn-zap, .x2-banner-zap .x2-btn-olx { width: 100%; } }
.x2-banner-lateral .x2-btn-zap .elementor-button, .x2-banner-lateral .x2-btn-olx .elementor-button { min-width: 0; font-size: 16px !important; padding: 16px 24px 14px !important; }
/* hero: no celular e tablet a barra do tour para antes do WhatsApp flutuante (cobria "Brasília") */
@media (max-width: 1024px) { .x2-tour .rail { right: 88px !important; } }

/* Banner com arte (21/10): bannerArte() no lib. Texto por cima da arte no computador; no celular, bloco azul + arte */
.elementor-widget-html:has(.x2-bnr) { flex: 0 0 auto; width: 100%; }
.x2-bnr { position: relative; container-type: inline-size; font-family: 'Josefin Sans', sans-serif; color: #fff; }
.x2-bnr__arte { display: block; width: 100%; height: auto; }
.x2-bnr__arte-m { display: none; }
.x2-bnr__txt { position: absolute; left: 9.4%; top: var(--topo); width: var(--larg); }
.x2-bnr__rotulo { display: block; margin-bottom: 1.2cqw; font-size: max(12px, .95cqw); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.x2-bnr h2 { margin: 0; font-size: var(--fonte); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.x2-bnr p { margin: 1.6cqw 0 0; font-size: max(15px, 1.9cqw); line-height: 1.4; color: rgba(255, 255, 255, .9); }
.x2-bnr__btn, .x2-bnr__btn:visited { display: inline-block; margin-top: 2.6cqw; padding: max(14px, 1.15cqw) max(26px, 2.2cqw); border-radius: 8px;
  background: #fff; color: var(--x2-azul) !important; font-size: max(15px, 1.15cqw); font-weight: 600; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(2, 45, 84, .6); transition: transform .3s var(--x2-ease), background .3s; }
.x2-bnr__btn:hover { background: var(--x2-claro); transform: translateY(-2px); }
@media (max-width: 767px) {
  .x2-bnr__arte { display: none; }
  .x2-bnr__arte-m { display: block; width: 100%; height: auto; margin-top: -24px; position: relative; z-index: 0; }
  .x2-bnr__txt { position: relative; z-index: 1; left: auto; top: auto; width: auto; padding: 32px 24px 36px; border-radius: 20px;
    background: linear-gradient(160deg, #0B6FCA 0%, #0A4F9C 100%); }
  .x2-bnr__rotulo { margin-bottom: 10px; }
  .x2-bnr h2 { font-size: 34px; }
  .x2-bnr p { margin-top: 12px; font-size: 17px; }
  .x2-bnr__btn { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .x2-bnr__btn { transition: none; } }

/* Contato · topo com a pessoa em Brasília (21/10): canais em duas colunas; no celular o véu cobre a foto toda */
.x2-canais-grade > .e-con { width: calc(50% - 10px) !important; }
@media (max-width: 767px) {
  .x2-canais-grade > .e-con { width: 100% !important; }
  .x2-contato-topo { background-position: 78% center !important; }
  .x2-contato-topo::before { background: rgba(255, 255, 255, .86) !important; }
}

/* Contato · slide das fotos da unidade (21/10): texto à esquerda, fotos grandes à direita passando sozinhas */
.elementor-widget-html:has(.x2-unid) { flex: 0 0 auto; width: 100%; }
.x2-unid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; font-family: 'Josefin Sans', sans-serif; }
.x2-unid__rotulo { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2.5px; color: var(--x2-azul); }
.x2-unid h2 { margin: 14px 0 0; font-size: 42px; font-weight: 500; line-height: 1.08; letter-spacing: -.6px; color: #1F2430; }
.x2-unid__txt > p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: #3A4254; }
.x2-unid__end { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--x2-azul); background: var(--x2-claro); border-radius: 0 10px 10px 0; display: flex; flex-direction: column; gap: 4px; }
.x2-unid__end strong { font-size: 17px; font-weight: 600; color: var(--x2-noite); }
.x2-unid__end span { font-size: 15px; color: #3A4254; line-height: 1.5; }
.x2-unid__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.x2-unid__btn, .x2-unid__btn:visited { display: inline-block; padding: 15px 26px 13px; border-radius: 6px; border: 2px solid var(--x2-azul); background: var(--x2-grad);
  color: #fff !important; font-size: 16px; font-weight: 600; text-decoration: none; transition: transform .3s var(--x2-ease), box-shadow .3s; }
.x2-unid__btn:hover { transform: translateY(-2px); box-shadow: var(--x2-sombra); }
.x2-unid__btn--linha, .x2-unid__btn--linha:visited { background: transparent; color: var(--x2-azul) !important; }
.x2-unid__btn--linha:hover { background: var(--x2-grad); color: #fff !important; border-color: transparent; }
.x2-unid__setas { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.x2-unid__setas button, .x2-unid__setas button:hover, .x2-unid__setas button:focus { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid #E1E9F2; background: #fff; color: var(--x2-azul); cursor: pointer; transition: background .3s, color .3s; }
.x2-unid__setas button:hover { background: var(--x2-azul); color: #fff; border-color: var(--x2-azul); }
.x2-unid__setas svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x2-unid__conta { font-size: 15px; font-weight: 600; letter-spacing: 2px; color: var(--x2-noite); min-width: 64px; text-align: center; }
.x2-unid__trilho { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; border-radius: 24px; }
.x2-unid__trilho::-webkit-scrollbar { display: none; }
.x2-unid__foto { position: relative; flex: 0 0 72%; margin: 0; scroll-snap-align: start; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 640px; }
.x2-unid__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x2-unid__foto figcaption { font-style: normal; position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(2, 45, 84, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 1024px) { .x2-unid { grid-template-columns: 1fr; gap: 32px; } .x2-unid__foto { flex-basis: 62%; } }
@media (max-width: 767px) {
  .x2-unid__txt { padding: 0 20px; }
  .x2-unid h2 { font-size: 30px; }
  .x2-unid__trilho { border-radius: 0; padding: 0 20px; scroll-padding: 0 20px; }
  .x2-unid__foto { flex-basis: 82%; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .x2-unid__btn { transition: none; } }

/* foto sangrando com 44% (Contato) */
@media (min-width: 1025px) { .x2-sangra-dir--44 { width: calc(44% + var(--sangra)) !important; } }

/* Contato · cartões clicáveis (21/10) */
.elementor-widget-html:has(.x2-cts), .elementor-widget-html:has(.x2-cta-eq) { flex: 0 0 auto; width: 100%; }
.x2-cts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; font-family: 'Josefin Sans', sans-serif; }
.x2-ct, .x2-ct:visited { display: flex; flex-direction: column; gap: 4px; padding: 20px 20px 18px; border: 1px solid #E1E9F2; border-radius: 14px; background: #fff;
  text-decoration: none; color: #1F2430 !important; transition: transform .35s var(--x2-ease), box-shadow .35s var(--x2-ease), border-color .3s; }
.x2-ct:hover, .x2-ct:focus-visible { transform: translateY(-3px); box-shadow: var(--x2-sombra-card); border-color: #CFE0F2; }
.x2-ct__ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 10px; background: var(--x2-claro); color: var(--x2-azul); }
.x2-ct__ic svg { width: 22px; height: 22px; }
.x2-ct__rot { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #3A4254; }
.x2-ct__valor { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--x2-noite); overflow-wrap: anywhere; }
.x2-ct__acao { margin-top: 8px; display: inline-flex; gap: 6px; font-size: 14px; font-weight: 600; color: var(--x2-azul); }
.x2-ct__acao span { transition: transform .3s var(--x2-ease); }
.x2-ct:hover .x2-ct__acao span { transform: translateX(4px); }
@media (max-width: 767px) { .x2-cts { grid-template-columns: 1fr; } }

/* Serviços · chamada final com corretores saindo do cartão (21/10) */
.x2-cta-eq { position: relative; display: flex; align-items: center; min-height: 340px; padding: 56px 64px; border-radius: 24px; overflow: visible;
  background: linear-gradient(160deg, #0B6FCA 0%, #0A4F9C 100%); font-family: 'Josefin Sans', sans-serif; color: #fff; }
.x2-cta-eq::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--x2-fechadura) no-repeat 38% 120% / 260px auto; opacity: .7; pointer-events: none; }
.x2-cta-eq__txt { position: relative; z-index: 2; width: 48%; }
.x2-cta-eq h2 { margin: 0; font-size: 44px; font-weight: 600; line-height: 1.08; letter-spacing: -.6px; color: #fff; }
.x2-cta-eq p { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.x2-cta-eq .x2-bnr__btn { margin-top: 26px; }
.x2-cta-eq__pessoas { position: absolute; right: 40px; bottom: 0; height: 132%; display: flex; align-items: flex-end; z-index: 1; pointer-events: none; }
.x2-cta-eq__pessoas img { height: 100%; width: auto; margin-left: -9%; filter: drop-shadow(-10px 0 24px rgba(2, 45, 84, .35)); }
.x2-cta-eq__pessoas img:first-child { margin-left: 0; }
.x2-cta-eq__pessoas img:nth-child(2) { height: 106%; position: relative; z-index: 2; }
@media (max-width: 1024px) { .x2-cta-eq__pessoas { right: 16px; height: 112%; } .x2-cta-eq__txt { width: 52%; } .x2-cta-eq h2 { font-size: 34px; } }
@media (max-width: 767px) {
  .x2-cta-eq { flex-direction: column; align-items: stretch; padding: 36px 24px 0; min-height: 0; }
  .x2-cta-eq__txt { width: auto; }
  .x2-cta-eq h2 { font-size: 30px; }
  .x2-cta-eq__pessoas { position: relative; right: auto; height: 230px; justify-content: center; margin-top: 24px; }
}/* End custom CSS */