/* =============================================================
   GAIA ATLÂNTIDA RESIDENCES — Landing Page
   Paleta extraída do logotipo oficial da marca:
   #003D6F (marinho)  ·  #69CCE6 (azul-água / onda)  ·  #FFFFFF
   ============================================================= */

:root{
  --navy:        #003D6F;
  --navy-deep:   #002846;
  --navy-mid:    #0A4E86;
  --accent:      #69CCE6;
  --accent-dark: #35A9CC;
  --accent-ink:  #00304F;

  --ink:    #0E1E2B;
  --muted:  #5D7183;
  --bg:     #FFFFFF;
  --bg-alt: #F3F7FA;
  --line:   #E0E9F1;

  --ph-bg:   #FFF6DA;
  --ph-line: #D9A21B;
  --ph-ink:  #7A5804;

  --wrap: 1180px;
  --r:    14px;
  --r-sm: 8px;

  --shadow-sm: 0 2px 10px rgba(0,40,70,.07);
  --shadow-md: 0 12px 34px rgba(0,40,70,.13);
  --shadow-lg: 0 24px 60px rgba(0,40,70,.20);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* espaço para a barra fixa mobile */
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
@media (min-width:1024px){ body{ padding-bottom:0; } }

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.wrap--narrow{ max-width:820px; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }

/* ---------- Marcadores de conteúdo pendente ------------------ */
.ph{
  background:var(--ph-bg);
  color:var(--ph-ink);
  border-bottom:2px dotted var(--ph-line);
  padding:.05em .4em;
  border-radius:3px;
  font-style:normal;
  font-weight:600;
  font-size:.94em;
  white-space:normal;
}
.ph-card{ position:relative; }

/* =============================================================
   BOTÕES
   ============================================================= */
.btn{
  --btn-bg:var(--accent); --btn-ink:var(--accent-ink); --btn-line:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--btn-bg); color:var(--btn-ink);
  border:2px solid var(--btn-line);
  padding:16px 28px;
  border-radius:100px;
  font-size:.86rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  line-height:1.2; text-align:center;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.btn--accent  { --btn-bg:var(--accent);   --btn-ink:var(--accent-ink); }
.btn--accent:hover{ --btn-bg:#7FD7EE; }
.btn--primary { --btn-bg:var(--navy);     --btn-ink:#fff; }
.btn--primary:hover{ --btn-bg:var(--navy-mid); }
.btn--outline { --btn-bg:transparent; --btn-ink:var(--navy); --btn-line:var(--navy); box-shadow:none; }
.btn--outline:hover{ --btn-bg:var(--navy); --btn-ink:#fff; }
.btn--ghost   { --btn-bg:transparent; --btn-ink:#fff; --btn-line:rgba(255,255,255,.45); box-shadow:none; }
.btn--ghost:hover{ --btn-bg:rgba(255,255,255,.12); }

.btn--lg{ padding:19px 36px; font-size:.92rem; }
.btn--sm{ padding:11px 20px; font-size:.74rem; }
.btn--block{ display:flex; width:100%; }


/* =============================================================
   BARRA FIXA — DESKTOP (topo)
   ============================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(0,40,70,.92);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
  transform:translateY(-101%);
  transition:transform .35s var(--ease);
  display:none;
}
.topbar.is-visible{ transform:translateY(0); }
.topbar__inner{
  max-width:var(--wrap); margin-inline:auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.topbar__logo{ width:130px; height:auto; }
@media (min-width:1024px){ .topbar{ display:block; } }

/* =============================================================
   BLOCO 1 — HERO
   ============================================================= */
.hero{
  position:relative;
  min-height:clamp(560px, 84svh, 820px);
  display:grid; place-items:center;
  padding:56px 20px calc(78px + env(safe-area-inset-bottom));
  overflow:hidden;
  isolation:isolate;
}
.hero__bg,
.hero__video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
/* o vídeo só aparece depois que consegue tocar; até lá fica a imagem */
.hero__video{
  z-index:-2; opacity:0; pointer-events:none;
  transition:opacity .7s var(--ease);
}
.hero__video.is-tocando{ opacity:1; }
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,22,40,.62) 0%, rgba(0,22,40,.40) 34%, rgba(0,26,46,.80) 100%),
    rgba(0,35,62,.45);
}
/* Duas colunas a partir de 960px: discurso à esquerda, formulário à direita.
   Abaixo disso empilha, com o formulário logo após o texto. */
.hero__grid{
  width:100%; max-width:1180px; margin-inline:auto;
  display:grid; gap:clamp(26px,3.6vw,52px); align-items:center;
}
@media (min-width:960px){
  .hero__grid{ grid-template-columns:1.02fr .98fr; }
}
.hero__content{
  width:100%; max-width:820px; margin-inline:auto; text-align:center; color:#fff;
}
@media (min-width:960px){
  .hero__content{ text-align:left; margin-inline:0; }
}
.hero__logo{
  width:min(240px, 56vw); height:auto; margin:0 auto clamp(18px,3.6vh,34px);
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.4));
}
@media (min-width:960px){ .hero__logo{ margin-inline:0; } }
.hero__title{
  font-size:clamp(1.72rem, 5.4vw, 3.4rem);
  font-weight:600; line-height:1.14; letter-spacing:-.022em;
  text-shadow:0 2px 24px rgba(0,0,0,.42);
  text-wrap:balance;
}
.hero__title em{ font-style:normal; color:var(--accent); display:inline-block; }
.hero__sub{
  margin:clamp(16px,2.6vh,24px) auto 0; max-width:34em;
  font-size:clamp(.98rem, 2.5vw, 1.2rem); font-weight:400;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(0,0,0,.42);
  text-wrap:balance;
}
/* No desktop o texto alinha à esquerda junto do título. Sem isto, o
   "auto" acima centraliza o parágrafo dentro da coluna e ele descola
   da headline sempre que a coluna fica mais larga que os 34em. */
@media (min-width:960px){
  .hero__sub{ margin-inline:0; }
}
/* =============================================================
   FORMULÁRIO DE CAPTAÇÃO (hero)
   ============================================================= */
.hero__form{ width:100%; max-width:470px; margin-inline:auto; }
@media (min-width:960px){ .hero__form{ margin-inline:0 0 0 auto; } }

.form,
.form__ok{
  background:rgba(255,255,255,.97);
  border-radius:var(--r);
  padding:clamp(22px,3vw,30px);
  box-shadow:0 18px 50px rgba(0,20,38,.34);
}
.form__titulo{
  font-size:clamp(1.12rem,2.4vw,1.32rem); font-weight:700;
  color:var(--navy); letter-spacing:-.015em; text-wrap:balance;
}
.form__lead{
  margin-top:6px; margin-bottom:20px;
  font-size:.9rem; color:var(--muted); text-wrap:pretty;
}

.campo{ display:block; margin-bottom:13px; }
.campo__rotulo{
  display:block; margin-bottom:6px;
  font-size:.79rem; font-weight:600; letter-spacing:.02em; color:var(--navy);
}
.campo__campo{
  width:100%; padding:12px 14px;
  font:inherit; font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.campo__campo::placeholder{ color:#9aa8b4; }
.campo__campo:focus{
  outline:none; border-color:var(--accent-dark);
  box-shadow:0 0 0 3px rgba(105,204,230,.3);
}
.campo__erro{
  display:none; margin-top:5px;
  font-size:.76rem; font-weight:500; color:#c8452f;
}
.campo.is-erro .campo__campo{ border-color:#c8452f; }
.campo.is-erro .campo__campo:focus{ box-shadow:0 0 0 3px rgba(200,69,47,.18); }
.campo.is-erro .campo__erro{ display:block; }

/* Honeypot: fora da tela, sem foco por teclado. Robô preenche, gente não. */
.form__hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

.form .btn{ margin-top:7px; }
.form .btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.form__lgpd{
  margin-top:13px; font-size:.72rem; line-height:1.45;
  color:var(--muted); text-wrap:pretty;
}

/* Confirmação de envio */
.form__ok{ text-align:center; }
/* Mesmo desenho de "check" da checklist, feito com bordas. */
.form__ok-ico{
  position:relative; display:block;
  width:48px; height:48px; margin:2px auto 15px;
  border-radius:50%; background:var(--navy);
}
.form__ok-ico::after{
  content:''; position:absolute; left:15px; top:18px;
  width:16px; height:8px;
  border-left:2.6px solid #fff; border-bottom:2.6px solid #fff;
  rotate:-45deg;
}
.form__ok .form__lead{ margin-bottom:0; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:22px; height:36px; border:2px solid rgba(255,255,255,.55); border-radius:12px;
  display:none;
}
.hero__scroll::after{
  content:''; position:absolute; left:50%; top:7px; translate:-50% 0;
  width:3px; height:7px; border-radius:2px; background:rgba(255,255,255,.85);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(11px); opacity:.25 } }
@media (min-width:1024px) and (min-height:720px){ .hero__scroll{ display:block; } }
@media (prefers-reduced-motion: reduce){ .hero__scroll::after{ animation:none; } }

/* Telas baixas (iPhone SE e similares): comprime o hero para que
   headline, subheadline e botão caibam sem rolagem — exigência da copy. */
@media (max-height:730px){
  .hero{ padding:40px 20px calc(66px + env(safe-area-inset-bottom)); }
  .hero__logo{ width:min(184px, 46vw); margin-bottom:16px; }
  .hero__title{ font-size:clamp(1.45rem, 4.8vw, 2.1rem); line-height:1.18; }
  .hero__sub{ margin-top:13px; font-size:.92rem; }
  .hero__content .btn{ margin-top:20px; padding:15px 26px; font-size:.8rem; }
}
@media (max-height:660px){
  .hero{ padding:30px 18px calc(58px + env(safe-area-inset-bottom)); }
  .hero__logo{ width:min(158px, 42vw); margin-bottom:12px; }
  .hero__title{ font-size:clamp(1.3rem, 4.4vw, 1.85rem); }
  .hero__sub{ margin-top:10px; font-size:.85rem; }
  .hero__content .btn{ margin-top:16px; padding:13px 22px; font-size:.75rem; }
}
/* aparelhos estreitos: enxuga o aviso de cookies */
@media (max-width:380px){
  .cookies p{ font-size:.63rem; }
  .cookies .btn{ padding:8px 11px; font-size:.6rem; }
}

/* =============================================================
   SEÇÕES — base
   ============================================================= */
.section{ padding:clamp(58px, 9vw, 108px) 0; }
/* compensa a barra fixa do desktop nas âncoras #casas e #apartamentos */
#casas, #apartamentos{ scroll-margin-top:70px; }
.section--alt{ background:var(--bg-alt); }
.section--dark{ background:var(--navy-deep); color:#fff; }
.section--dark .sec-lead{ color:rgba(255,255,255,.80); }
.section--dark .eyebrow{ color:var(--accent); }

.sec-head{ margin-bottom:clamp(32px, 5vw, 56px); max-width:900px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:block; margin-bottom:14px;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-dark);
}
.sec-title{
  font-size:clamp(1.55rem, 4.1vw, 2.7rem);
  font-weight:600; letter-spacing:-.022em; line-height:1.14;
  text-wrap:balance;
}
.sec-title em{ font-style:normal; color:var(--accent-dark); }
.section--dark .sec-title em, .section--oferta .sec-title em{ color:var(--accent); }
.sec-title--xl{ font-size:clamp(1.8rem, 5vw, 3.15rem); }
.sec-lead{
  margin-top:18px; font-size:clamp(1rem,2.2vw,1.13rem); color:var(--muted);
  max-width:46em; text-wrap:pretty;
}
.sec-head--center .sec-lead{ margin-inline:auto; }
/* Par de marcas abrindo o bloco "Quem entrega o Gaia": DeMello
   (incorporação) e D1 (construção). Os dois arquivos originais são
   brancos; foram recoloridos para o marinho da marca.
   O alinhamento é por ALTURA, não largura — são proporções muito
   diferentes (4,4:1 e 1,4:1) e casar a largura desequilibraria. */
.marcas{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,3vw,30px);
  margin:0 auto clamp(38px,5vw,52px);
}
.marcas img{ display:block; width:auto; }
.marcas__demello{ height:clamp(46px,7vw,74px); }
.marcas__d1     { height:clamp(35px,5.3vw,56px); }
/* O "&" da Montserrat é geométrico e duro. Georgia em itálico dá a
   ligadura serifada sem o floreio do Didot — e existe no macOS e no
   Windows, então o resultado é consistente. */
.marcas__sep{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1;
  color:var(--muted); letter-spacing:0;
}
/* Ajustes só deste cabeçalho: o logo assume o peso visual, então o
   título entra menor e mais colado no eyebrow. */
.sec-head--marca{ margin-bottom:clamp(44px,6.2vw,72px); }
.sec-head--marca .eyebrow{ margin-bottom:7px; }
.sec-head--marca .sec-title{ font-size:clamp(1.42rem,3.6vw,2.3rem); }
.sub-title{
  margin:clamp(46px,6vw,66px) 0 22px;
  font-size:1.05rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}

.reforco{
  margin:30px auto 34px; max-width:44em; text-align:center;
  font-size:1.02rem; color:var(--muted); text-wrap:balance;
}

/* =============================================================
   BLOCO 2 — A ESCOLHA
   ============================================================= */
.escolha-grid{ display:grid; gap:24px; }
@media (min-width:860px){ .escolha-grid{ grid-template-columns:1fr 1fr; gap:32px; } }

.escolha-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.escolha-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.escolha-card__media{ overflow:hidden; aspect-ratio:4/3; }
.escolha-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.escolha-card:hover .escolha-card__media img{ transform:scale(1.05); }
.escolha-card__body{
  padding:clamp(24px,3.4vw,36px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; flex:1;
}
.escolha-card__body h3{
  font-size:clamp(1.24rem,2.9vw,1.6rem); color:var(--navy); font-weight:600; letter-spacing:-.015em;
}
.escolha-card__body p{ color:var(--muted); flex:1; text-wrap:pretty; }
.escolha-card__body .btn{ margin-top:6px; }

/* =============================================================
   BLOCO 3 — TOUR 360
   ============================================================= */
/* abas casa / cobertura */
.tour-opcoes{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin:0 0 22px;
}
.tour-opcao{
  border:1.5px solid rgba(255,255,255,.28); background:transparent; color:rgba(255,255,255,.82);
  padding:11px 24px; border-radius:100px; cursor:pointer;
  font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tour-opcao:hover{ border-color:var(--accent); color:#fff; }
.tour-opcao.is-ativa{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.tour-opcao:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.tour{ margin:0 0 clamp(32px,5vw,44px); }
.tour__facade{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:#000; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:16/9;
}
.tour__facade img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .35s var(--ease), transform .7s var(--ease); }
.tour__facade:hover img{ opacity:.85; transform:scale(1.03); }
.tour__play{
  position:absolute; inset:0; margin:auto;
  width:clamp(64px,9vw,88px); height:clamp(64px,9vw,88px);
  border-radius:50%; background:var(--accent);
  box-shadow:0 10px 34px rgba(0,0,0,.4);
  display:grid; place-items:center;
  transition:transform .3s var(--ease);
}
.tour__facade:hover .tour__play{ transform:scale(1.09); }
.tour__play::after{
  content:''; width:0; height:0; margin-left:5px;
  border-left:19px solid var(--accent-ink);
  border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.tour__badge{
  position:absolute; left:16px; top:16px;
  background:rgba(0,40,70,.82); color:#fff;
  padding:8px 15px; border-radius:100px;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.tour iframe{
  width:100%; aspect-ratio:16/9; border:0; display:block;
  border-radius:var(--r); box-shadow:var(--shadow-lg); background:#000;
}
.tour__aviso{
  display:grid; place-items:center; aspect-ratio:16/9;
  border-radius:var(--r); border:2px dashed var(--ph-line); background:var(--ph-bg);
  color:var(--ph-ink); font-weight:600; text-align:center; padding:24px;
}

/* =============================================================
   BLOCOS 4 e 5 — PLANTAS
   ============================================================= */
.planta-grid{ display:grid; gap:24px; }
@media (min-width:860px){ .planta-grid{ grid-template-columns:1fr 1fr; gap:32px; } }

.planta-card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.planta-card--destaque{ border:2px solid var(--accent); box-shadow:0 16px 44px rgba(53,169,204,.22); }
.planta-card__flag{
  position:absolute; z-index:2; right:16px; top:16px;
  background:var(--accent); color:var(--accent-ink);
  padding:7px 15px; border-radius:100px;
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.planta-card__photo{ aspect-ratio:16/10; overflow:hidden; }
.planta-card__photo img{ width:100%; height:100%; object-fit:cover; }
.planta-card__body{ padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:20px; flex:1; }
.planta-card__name{
  font-size:clamp(1.2rem,2.7vw,1.5rem); color:var(--navy); letter-spacing:-.015em;
}

.ficha dd small{ font-weight:400; font-size:.84em; color:var(--muted); }

/* card único e largo (casas): foto à esquerda, ficha à direita */
@media (min-width:860px){
  .planta-grid--1{ grid-template-columns:1fr; }
  .planta-grid--1 .planta-card{ flex-direction:row; align-items:stretch; }
  .planta-grid--1 .planta-card__photo{ width:56%; aspect-ratio:auto; }
  .planta-grid--1 .planta-card__photo img{ height:100%; }
  .planta-grid--1 .planta-card__body{ width:44%; justify-content:center; padding:clamp(28px,3.6vw,44px); }
  .planta-grid--1 .planta-card__name{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
  .planta-grid--1 .preco{ margin-top:26px; }
}
.ficha{ border-top:1px solid var(--line); }
.ficha > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.ficha dt{ color:var(--muted); font-size:.92rem; }
.ficha dd{ font-weight:600; text-align:right; }

.preco{ margin-top:auto; font-size:.95rem; color:var(--muted); }
.preco strong{ display:block; margin-top:4px; font-size:1.5rem; color:var(--navy); font-weight:700; letter-spacing:-.02em; }

/* =============================================================
   BLOCO 6 — LAZER (mosaico)
   ============================================================= */
.mosaico{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:860px){ .mosaico{ grid-template-columns:repeat(4,1fr); gap:16px; } }

.mosaico__item{
  position:relative; margin:0; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; background:var(--navy-deep);
}
.mosaico__item--big{ grid-column:span 2; }
@media (min-width:860px){
  .mosaico__item--big{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  /* os dois últimos ocupam largura dupla e fecham a grade sem vão */
  .mosaico__item--wide{ grid-column:span 2; aspect-ratio:16/7; }
}

.mosaico__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.mosaico__item:hover img{ transform:scale(1.06); }
.mosaico__item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(0,25,45,.78) 100%);
  pointer-events:none;
}
.mosaico__item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:16px 18px; color:#fff;
  font-size:clamp(.78rem,1.9vw,.95rem); font-weight:600; letter-spacing:.04em;
}

/* =============================================================
   BLOCO 7 — LOCALIZAÇÃO
   ============================================================= */
.local-grid{ display:grid; gap:28px; }
@media (min-width:900px){ .local-grid{ grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; } }

.aerea{
  position:relative; display:block; width:100%; padding:0; cursor:zoom-in;
  border:0; border-radius:var(--r); overflow:hidden; background:var(--navy);
  box-shadow:var(--shadow-md);
  transition:box-shadow .25s var(--ease);
}
.aerea:hover{ box-shadow:var(--shadow-lg); }
.aerea:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.aerea img{ width:100%; height:auto; display:block; }
.aerea__lupa{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,40,70,.88); color:#fff;
  padding:8px 16px; border-radius:100px;
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s var(--ease);
}
.aerea:hover .aerea__lupa, .aerea:focus-visible .aerea__lupa{ opacity:1; }
@media (hover:none){ .aerea__lupa{ opacity:1; } }

/* visor em tela cheia da aérea */
.visor{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,20,36,.95);
  display:grid; place-items:center; padding:20px;
  animation:fadeIn .22s var(--ease);
}
.visor[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.visor img{ max-width:96vw; max-height:92vh; width:auto; border-radius:var(--r-sm); }
.visor__fechar{
  position:absolute; right:16px; top:16px; width:46px; height:46px; z-index:2;
  border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
  cursor:pointer;
}
.visor__fechar::before, .visor__fechar::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:18px; height:2px; background:#fff;
}
.visor__fechar::before{ rotate:45deg; }
.visor__fechar::after{ rotate:-45deg; }

.dist-list{ display:grid; gap:4px; }
.dist-list li{
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
  font-size:1.02rem; color:var(--muted);
}
.dist-list strong{ color:var(--ink); font-weight:600; }
.dist-ico{
  width:26px; height:26px; flex:none; background-color:var(--accent-dark);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.dist-ico--praia   { -webkit-mask-image:var(--ic-praia);    mask-image:var(--ic-praia); }
.dist-ico--shopping{ -webkit-mask-image:var(--ic-shopping); mask-image:var(--ic-shopping); }
.dist-ico--cidade  { -webkit-mask-image:var(--ic-cidade);   mask-image:var(--ic-cidade); }
.dist-ico--estrada { -webkit-mask-image:var(--ic-estrada);  mask-image:var(--ic-estrada); }
.dist-note{ margin-top:26px; color:var(--muted); text-wrap:pretty; }

/* =============================================================
   BLOCO 8 — CONDIÇÕES (bloco-oferta)
   ============================================================= */
.section--oferta{
  background:
    radial-gradient(ellipse at 18% 0%, rgba(105,204,230,.16), transparent 58%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
}
.section--oferta .sec-head{ margin-bottom:clamp(38px,5vw,54px); }

.oferta-itens{ display:grid; gap:16px; margin-bottom:clamp(38px,5vw,52px); }
@media (min-width:800px){ .oferta-itens{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.oferta-itens li{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:clamp(26px,3.4vw,38px) clamp(20px,3vw,30px);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  backdrop-filter:blur(4px);
}
.oferta-num{
  font-size:clamp(2.7rem,7vw,4.1rem); font-weight:700; line-height:.95;
  color:var(--accent); letter-spacing:-.045em;
}
.oferta-num--ico{
  width:clamp(60px,8vw,78px); height:clamp(60px,8vw,78px); font-size:0;
  background-color:var(--accent);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-image:var(--ic-aperto); mask-image:var(--ic-aperto);
}
.oferta-txt{ font-size:1.02rem; font-weight:500; color:rgba(255,255,255,.94); text-wrap:balance; }
.oferta-nota{
  margin-top:30px; text-align:center; font-size:.86rem;
  max-width:50em; margin-inline:auto;
}

/* =============================================================
   BLOCO 9 — INCORPORADORA
   ============================================================= */
.bignumbers{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  padding-bottom:clamp(34px,4.6vw,48px); border-bottom:1px solid var(--line);
}
/* São 3 números: no mobile o terceiro ocupa a linha inteira em vez de ficar órfão. */
.bignumbers .bignum:last-child{ grid-column:1 / -1; }
@media (min-width:860px){
  .bignumbers{ grid-template-columns:repeat(3,1fr); gap:28px; }
  .bignumbers .bignum:last-child{ grid-column:auto; }
}
.bignum{ text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.bignum strong{
  font-size:clamp(2.1rem,5.4vw,3.35rem); font-weight:700; line-height:1;
  color:var(--navy); letter-spacing:-.04em;
}
.bignum span{ font-size:.86rem; color:var(--muted); letter-spacing:.03em; text-wrap:balance; }

.institucional{
  margin:clamp(30px,4vw,42px) auto 0; max-width:44em; text-align:center;
  font-size:clamp(1.02rem,2.3vw,1.2rem); color:var(--muted); text-wrap:balance;
}

/* carrossel de obras */
.carrossel{ position:relative; }
.carrossel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.carrossel__track::-webkit-scrollbar{ display:none; }
.carrossel__track > *{ scroll-snap-align:start; }
/* arrastar com o mouse */
.carrossel__track img{ -webkit-user-drag:none; user-select:none; }
@media (hover:hover) and (pointer:fine){
  .carrossel__track{ cursor:grab; }
  .carrossel__track.is-arrastando{ cursor:grabbing; user-select:none; }
}
@media (min-width:700px){ .carrossel__track{ grid-auto-columns:42%; gap:20px; } }
@media (min-width:1000px){ .carrossel__track{ grid-auto-columns:29%; } }

.obra{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.obra:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.obra__img{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt); }
.obra__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.obra:hover .obra__img img{ transform:scale(1.05); }
.obra h4{
  font-size:1rem; color:var(--navy); padding:16px; letter-spacing:-.01em;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
/* Ano da entrega, discreto à direita do nome. */
.obra__ano{
  flex:none; font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.02em;
}

.carrossel__nav{ display:flex; gap:10px; justify-content:center; margin-top:22px; }
.carrossel__btn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--line); background:#fff;
  display:grid; place-items:center;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.carrossel__btn:hover{ background:var(--navy); border-color:var(--navy); }
.carrossel__btn::after{
  content:''; width:9px; height:9px;
  border-left:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(45deg); margin-left:3px;
}
.carrossel__btn:hover::after{ border-color:#fff; }
.carrossel__btn--next::after{ transform:rotate(-135deg); margin-left:-3px; }
.carrossel__btn[disabled]{ opacity:.32; cursor:default; }
.carrossel__btn[disabled]:hover{ background:#fff; border-color:var(--line); }
.carrossel__btn[disabled]:hover::after{ border-color:var(--navy); }

/* ---- Andamento da obra: fotos verticais + informação ao lado ---- */
.andamento{
  margin:clamp(46px,6vw,70px) 0 0;
  padding-top:clamp(40px,5vw,56px);
  border-top:1px solid var(--line);
  display:grid; gap:clamp(28px,4vw,48px);
}
/* Mobile: título → fotos → checklist (ordem natural do DOM).
   Desktop: fotos à esquerda; título e checklist empilhados à direita. */
@media (min-width:900px){
  .andamento{ grid-template-columns:minmax(0,360px) 1fr; align-items:center; row-gap:0; }
  .andamento__midia{ grid-column:1; grid-row:1 / span 2; }
  .andamento__head { grid-column:2; grid-row:1; align-self:end; }
  .andamento__info { grid-column:2; grid-row:2; align-self:start; }
  .andamento .checklist{ margin-top:clamp(24px,3vw,32px); }
  .andamento .checklist li{ padding-bottom:2px; }
}
.andamento .checklist{ gap:18px; }

.obra-slider{ position:relative; }
.obra-slider__track{
  grid-auto-columns:100%;      /* uma foto por vez */
  /* sem o padding do carrossel genérico: aqui a foto vai até a borda */
  padding-bottom:0;
  gap:0; border-radius:var(--r); overflow:hidden auto;
  overflow-x:auto; overflow-y:hidden;
  box-shadow:var(--shadow-md);
}
.obra-foto{ margin:0; }
.obra-foto img{ width:100%; height:auto; display:block; aspect-ratio:9/16; object-fit:cover; }

.obra-slider__seta{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:44px; height:44px;
  background:rgba(255,255,255,.92); border-color:transparent;
  box-shadow:0 4px 16px rgba(0,40,70,.25);
}
.obra-slider__seta--prev{ left:12px; }
.obra-slider__seta--next{ right:12px; }
.obra-slider__seta:hover{ background:var(--navy); }
.obra-slider__contador{
  position:absolute; left:50%; bottom:14px; translate:-50% 0; z-index:2;
  background:rgba(0,40,70,.82); color:#fff;
  padding:6px 14px; border-radius:100px;
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  backdrop-filter:blur(6px);
}

.andamento__data{
  margin:10px 0 0; font-size:clamp(1.6rem,3.4vw,2.3rem);
  color:var(--navy); letter-spacing:-.022em;
}
.andamento__lead{
  margin-top:14px; color:var(--muted); font-size:1.02rem; max-width:36em; text-wrap:pretty;
}
/* No mobile o espaçamento vem do gap do grid; no desktop, do margin (row-gap:0). */
.andamento .checklist{ margin:0; max-width:34em; }

/* =============================================================
   BLOCO 10 — FAQ
   ============================================================= */
.faq{ display:grid; gap:12px; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.faq__item[open]{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
.faq__item summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:20px 54px 20px 22px; position:relative;
  font-size:1.02rem; font-weight:600; color:var(--navy); line-height:1.4;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:''; position:absolute; right:22px; top:50%; translate:0 -50%;
  width:12px; height:12px;
  border-right:2px solid var(--accent-dark); border-bottom:2px solid var(--accent-dark);
  rotate:45deg; transition:rotate .28s var(--ease), translate .28s var(--ease);
}
.faq__item[open] summary::after{ rotate:-135deg; translate:0 -20%; }
.faq__item summary:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.faq__body{ padding:0 22px 22px; color:var(--muted); }

/* =============================================================
   BLOCO 11 — FECHAMENTO
   ============================================================= */
.fechamento{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(72px,10vw,124px) 20px;
  color:#fff; text-align:center;
}
.fechamento__bg{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
}
.fechamento::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,25,45,.80) 0%, rgba(0,40,70,.72) 100%);
}
.fechamento__content{ max-width:760px; margin-inline:auto; }
.fechamento__title{
  font-size:clamp(1.7rem,4.7vw,3rem); font-weight:600; letter-spacing:-.022em;
  text-shadow:0 2px 22px rgba(0,0,0,.4); text-wrap:balance;
}
.fechamento__title em{ font-style:normal; color:var(--accent); }
.fechamento .btn{ margin-top:clamp(26px,3.8vw,38px); }

.checklist{
  display:grid; gap:14px; margin:clamp(30px,4.4vw,44px) auto;
  max-width:32em; text-align:left;
}
.checklist li{
  position:relative; padding-left:38px;
  font-size:clamp(.96rem,2.2vw,1.08rem); color:rgba(255,255,255,.95);
  text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.checklist li::before{
  content:''; position:absolute; left:0; top:.1em;
  width:24px; height:24px; border-radius:50%;
  background:var(--accent);
  -webkit-mask:none; mask:none;
}
.checklist li::after{
  content:''; position:absolute; left:6px; top:.52em;
  width:11px; height:6px;
  border-left:2.4px solid var(--accent-ink); border-bottom:2.4px solid var(--accent-ink);
  rotate:-45deg;
}
/* variante para fundo claro */
.checklist--escura li{ color:var(--ink); text-shadow:none; }
.checklist--escura li::before{ background:var(--navy); }
.checklist--escura li::after{ border-color:#fff; }

/* =============================================================
   RODAPÉ
   ============================================================= */
.rodape{ background:var(--navy-deep); color:rgba(255,255,255,.80); padding:clamp(46px,6vw,68px) 0 clamp(34px,4vw,46px); }
.rodape__inner{ display:grid; gap:26px; }
@media (min-width:820px){
  .rodape__inner{ grid-template-columns:auto 1fr; align-items:start; gap:44px; }
  .rodape__legal{ grid-column:1 / -1; }
}
.rodape__logo{ width:170px; height:auto; }
.rodape__info{ display:grid; gap:16px; font-size:.94rem; line-height:1.65; }
.rodape__info strong{ color:#fff; font-weight:600; }
.rodape__legal{
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem; line-height:1.6; color:rgba(255,255,255,.55); max-width:70em;
}

/* =============================================================
   BARRA FIXA — MOBILE
   ============================================================= */
.barra-fixa{
  position:fixed; inset:auto 0 0 0; z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(0,40,70,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
}
.barra-fixa .btn{ box-shadow:none; }
@media (min-width:1024px){ .barra-fixa{ display:none; } }

/* A barra só entra depois que o CTA do hero sai da tela — evita
   dois botões de WhatsApp disputando a primeira dobra. */
@media (max-width:1023px){
  .barra-fixa{ transition:transform .32s var(--ease); }
  body.hero-cta-visivel .barra-fixa{ transform:translateY(115%); }
  body.hero-cta-visivel .cookies{ bottom:calc(12px + env(safe-area-inset-bottom)); }
}
body.sem-transicao .barra-fixa,
body.sem-transicao .cookies{ transition:none; }

/* No mobile a conversão fica concentrada no hero + barra flutuante.
   Os CTAs intermediários saem para não poluir a rolagem.
   (Os botões dos cards do Bloco 2 permanecem: são âncoras de
   navegação para #casas / #apartamentos, não CTAs de WhatsApp.) */
@media (max-width:1023px){
  .section--tour .center,
  #casas .center,
  #apartamentos .center,
  .section--oferta .center,
  .fechamento__content > [data-cta]{ display:none; }

  .tour{ margin-bottom:0; }
  .reforco{ margin-bottom:0; }
  .oferta-itens{ margin-bottom:0; }
  .oferta-nota{ margin-top:26px; }
  .checklist{ margin-bottom:0; }
}

/* =============================================================
   COOKIES (LGPD)
   ============================================================= */
.cookies{
  position:fixed; z-index:80; left:8px; right:8px;
  bottom:calc(70px + env(safe-area-inset-bottom));
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg);
  padding:10px 12px; display:grid; gap:10px;
  grid-template-columns:1fr auto; align-items:center;
  animation:slideUp .35s var(--ease);
  transition:bottom .32s var(--ease);
}
.cookies[hidden]{ display:none; }
@keyframes slideUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.cookies p{ font-size:.68rem; line-height:1.4; color:var(--muted); }
.cookies__acoes{ display:flex; gap:6px; justify-content:flex-end; flex:none; }
.cookies .btn{ padding:8px 13px; font-size:.62rem; letter-spacing:.04em; box-shadow:none; }
.cookies .btn--ghost{ --btn-ink:var(--muted); --btn-line:var(--line); }
.cookies .btn--ghost:hover{ --btn-bg:var(--bg-alt); }
@media (min-width:1024px){
  .cookies{
    left:auto; right:20px; bottom:20px; max-width:430px;
    padding:20px; gap:14px; border-radius:var(--r);
    grid-template-columns:1fr;
  }
  .cookies p{ font-size:.84rem; line-height:1.55; }
  .cookies .btn{ padding:11px 20px; font-size:.72rem; }
}

/* =============================================================
   MOVIMENTO — entrada do hero e reveal no scroll
   -------------------------------------------------------------
   Tudo depende da classe .js no <html>. Sem JS, nada disso se
   aplica e a página aparece normalmente.
   ============================================================= */

/* --- Entrada do hero (CSS puro, sem esperar o main.js) --- */
@keyframes heroEntra{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

.js .hero__logo,
.js .hero__title,
.js .hero__sub,
.js .hero__content .btn{ animation:heroEntra .7s var(--ease) both; }
.js .hero__logo        { animation-delay:.05s }
.js .hero__title       { animation-delay:.14s }
.js .hero__sub         { animation-delay:.24s }
.js .hero__content .btn{ animation-delay:.34s }

/* --- Reveal no scroll --- */
.js [data-revelar]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-revelar].revelado{ opacity:1; transform:none; }

/* Escalonamento dentro das grades, para os itens não subirem em bloco.
   Fica restrito a estes containers de propósito. */
.js .escolha-grid  > [data-revelar]:nth-child(2){ transition-delay:.11s }
.js .planta-grid   > [data-revelar]:nth-child(2){ transition-delay:.11s }
.js .oferta-itens  > [data-revelar]:nth-child(2){ transition-delay:.10s }
.js .oferta-itens  > [data-revelar]:nth-child(3){ transition-delay:.20s }
.js .bignumbers    > [data-revelar]:nth-child(2){ transition-delay:.10s }
.js .bignumbers    > [data-revelar]:nth-child(3){ transition-delay:.20s }
.js .mosaico       > [data-revelar]:nth-child(2){ transition-delay:.07s }
.js .mosaico       > [data-revelar]:nth-child(3){ transition-delay:.14s }
.js .mosaico       > [data-revelar]:nth-child(4){ transition-delay:.21s }
.js .mosaico       > [data-revelar]:nth-child(5){ transition-delay:.28s }
.js .mosaico       > [data-revelar]:nth-child(6){ transition-delay:.35s }
.js .mosaico       > [data-revelar]:nth-child(7){ transition-delay:.42s }

/* Quem pediu menos movimento recebe a página estática. */
@media (prefers-reduced-motion: reduce){
  .js .hero__logo,
  .js .hero__title,
  .js .hero__sub,
  .js .hero__content .btn{ animation:none; }
  .js [data-revelar]{ opacity:1; transform:none; transition:none; }
}

/* =============================================================
   ÍCONES (máscaras SVG)
   ============================================================= */
:root{
  --ic-pin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s7-6.2 7-12A7 7 0 0 0 5 10c0 5.8 7 12 7 12Z'/><circle cx='12' cy='10' r='2.6'/></svg>");
  --ic-praia:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='17.5' cy='5.5' r='2.8'/><path d='M1.5 14c2 0 2 1.9 4 1.9S7.5 14 9.5 14s2 1.9 4 1.9S15.5 14 17.5 14s2 1.9 4 1.9'/><path d='M1.5 19c2 0 2 1.9 4 1.9S7.5 19 9.5 19s2 1.9 4 1.9S15.5 19 17.5 19s2 1.9 4 1.9'/></svg>");
  --ic-shopping:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3.6 8h16.8l-1.3 12.6a1.5 1.5 0 0 1-1.5 1.4H6.4a1.5 1.5 0 0 1-1.5-1.4L3.6 8Z'/><path d='M8.5 11V6.5a3.5 3.5 0 0 1 7 0V11'/></svg>");
  --ic-cidade:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 21V9.5l6-3.6V21'/><path d='M8.5 21V11.4l7-3.9V21'/><path d='M15.5 21V10.6l6 3.4V21'/><path d='M1.5 21h21'/></svg>");
  --ic-estrada:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 2.5 4.5 21.5'/><path d='M15.5 2.5l4 19'/><path d='M12 3.5v3M12 10.5v3M12 17.5v3'/></svg>");
  --ic-aperto:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m11 17 2 2a1 1 0 1 0 3-3'/><path d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/><path d='m21 3 1 11h-2'/><path d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/><path d='M3 4h8'/></svg>");
}