/* ==========================================================================
   Endless Parque da Cidade - Jacarei
   Componentes novos, carregados DEPOIS do css do Elementor.
   Paleta herdada do tema (mesmas variaveis do Elementor).
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS DO PADRAO VISUAL
   Cores amostradas de fontes RGB confiaveis do proprio empreendimento: o
   logo (degrade dourado) e a tela final do video. Nao do PDF do book - ele e
   CMYK de impressao e, sem gerenciamento de cor, a conversao inverte os tons.
   -------------------------------------------------------------------------- */
:root{
  /* marrons, do mais profundo ao mais claro */
  --end-espresso:#2A1912;
  --end-dark:#38231D;
  --end-brown:#4B2B1F;
  --end-brown-mid:#6C4D39;
  --end-smoke:#7A5D49;
  --end-taupe:#9E7A5C;

  /* metais */
  --end-bronze:#AB8262;
  --end-gold:#D0AB7D;
  --end-gold-deep:#B8863F;
  --end-champagne:#F6E8BD;

  /* claros */
  --end-cream:#ECDBBC;
  --end-ivory:#FBF2D7;
  --end-off:#F7F2EA;

  /* degrade metalico do logo, para textos e filetes de destaque */
  --end-metal:linear-gradient(100deg,#7B624D 0%,#AB8262 22%,#D0AB7D 48%,#F6E8BD 68%,#C79E6E 100%);

  /* tipografia */
  --end-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --end-sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* compatibilidade com o que ja estava escrito */
  --end-olive:var(--end-espresso);
  --end-tan:var(--end-gold-deep);
  --end-beige:var(--end-gold);
  --end-sand:var(--end-bronze);
}

/* --------------------------------------------------------------------------
   1. Atributos do hero (substitui a arte "img-atributos")
   -------------------------------------------------------------------------- */
.end-attrs{
  color:#fff;
  font-weight:300;
  line-height:1.35;
  text-align:left;
  max-width:34rem;
  margin:0 auto;
  padding:0 8px;
}
.end-attrs__lead{
  font-size:1.6em;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .6em;
}
.end-attrs__lead b{font-weight:600;}
.end-attrs__list{list-style:none;margin:0;padding:0;}
.end-attrs__list li{
  position:relative;
  padding:.55em 0 .55em 1.35em;
  font-size:1.05em;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.end-attrs__list li:last-child{border-bottom:0;}
.end-attrs__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.15em;
  width:.5em;
  height:1px;
  background:var(--end-beige);
}
.end-attrs__list b{font-weight:600;}

@media (max-width:1024px){
  .end-attrs{text-align:center;max-width:30rem;}
  .end-attrs__list li{padding-left:0;}
  .end-attrs__list li::before{display:none;}
}

/* --------------------------------------------------------------------------
   2. Botoes de tour virtual - o "Ultra" e o destaque
   -------------------------------------------------------------------------- */
.end-tours{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:14px;
  margin:1.8em 0 .4em;
}
.end-tour{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  flex:1 1 auto;
  min-height:52px;
  padding:14px 22px;
  border-radius:2px;
  font-size:.82em;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
/* o rotulo fica acima da camada de luz */
.end-tour__rotulo{position:relative;z-index:2;}

/* secundario: contorno */
.end-tour--plain{
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:#fff;
}
.end-tour--plain:hover,.end-tour--plain:focus-visible{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  color:#fff;
}

/* principal: preenchido, maior, com selo */
.end-tour--ultra{
  position:relative;
  flex:1.35 1 auto;
  min-height:62px;
  padding:18px 26px;
  border:0;
  background:var(--end-tan);
  color:#fff;
  font-size:.95em;
  font-weight:600;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.75);
}
.end-tour--ultra:hover,.end-tour--ultra:focus-visible{
  background:var(--end-sand);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 32px -12px rgba(0,0,0,.8);
}
.end-tour--ultra .end-tour__tag{
  position:absolute;
  top:-10px;
  right:14px;
  padding:2px 9px;
  border-radius:999px;
  background:var(--end-olive);
  color:var(--end-beige);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
}
/* Efeito de luz: um brilho diagonal varre o botao de tempos em tempos.
   Vive num span proprio porque quem recorta o brilho e ele - se o recorte
   fosse no botao, o selo "Ultra", que fica para fora, seria cortado junto. */
.end-tour__luz{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
.end-tour__luz::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width:45%;
  height:220%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 32%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.18) 68%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:end-brilho 5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes end-brilho{
  0%   {left:-80%;}
  45%  {left:135%;}
  100% {left:135%;}
}
/* brilho suave em volta, para o ultra pesar mais que o outro botao */
.end-tour--ultra{
  box-shadow:0 10px 26px -12px rgba(0,0,0,.75),
             0 0 20px -6px rgba(205,188,167,.5);
}
.end-tour--ultra:hover,.end-tour--ultra:focus-visible{
  box-shadow:0 16px 32px -12px rgba(0,0,0,.8),
             0 0 30px -4px rgba(205,188,167,.75);
}
/* no hover a luz passa uma vez, mais rapido */
.end-tour--ultra:hover .end-tour__luz::before{
  animation-duration:1.4s;
}
@media (prefers-reduced-motion:reduce){
  .end-tour{transition:none;}
  .end-tour__luz::before{animation:none;opacity:0;}
}
@media (max-width:600px){
  .end-tours{flex-direction:column;gap:12px;}
  .end-tour{width:100%;}
}

/* variante para fundo claro (secao de plantas) */
.end-tours--light .end-tour--plain{
  border-color:var(--end-sand);
  color:var(--end-dark);
}
.end-tours--light .end-tour--plain:hover{
  background:var(--end-dark);
  border-color:var(--end-dark);
  color:#fff;
}

/* --------------------------------------------------------------------------
   3. Secao de plantas (estrutura pronta, artes entram depois)
   -------------------------------------------------------------------------- */
.end-plantas{
  background:var(--end-off);
  padding:clamp(48px,7vw,96px) 20px;
}
.end-plantas__inner{max-width:1140px;margin:0 auto;}
.end-plantas__head{text-align:center;margin-bottom:clamp(28px,4vw,52px);}
.end-plantas__title{
  margin:0 0 .35em;
  color:var(--end-dark);
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.end-plantas__sub{
  margin:0;
  color:var(--end-sand);
  font-size:clamp(1rem,1.5vw,1.15rem);
  font-weight:300;
}
.end-plantas__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2.5vw,30px);
}
.end-planta{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(80,77,67,.12);
  overflow:hidden;
}
.end-planta__art{
  position:relative;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(45deg,rgba(177,157,130,.07) 0 10px,transparent 10px 20px),
    var(--end-off);
  color:var(--end-sand);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  padding:16px;
}
.end-planta__art img{width:100%;height:100%;object-fit:contain;}
.end-planta__body{padding:20px 22px 24px;}
.end-planta__name{
  margin:0 0 .3em;
  color:var(--end-dark);
  font-size:1.15rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.end-planta__meta{
  margin:0;
  color:var(--end-sand);
  font-size:.95rem;
  font-weight:300;
}
.end-plantas__foot{
  margin-top:clamp(26px,3.5vw,42px);
  text-align:center;
}
.end-plantas__foot .end-tours{justify-content:center;max-width:620px;margin-inline:auto;}
.end-plantas__legal{
  margin:1.6em 0 0;
  color:var(--end-sand);
  font-size:.78rem;
  font-weight:300;
}

/* --------------------------------------------------------------------------
   4. Marcadores de rascunho
   Somem quando a classe "endless-draft" sai do <body>.
   -------------------------------------------------------------------------- */
.end-todo,.end-note{display:none;}
body.endless-draft .end-todo{
  display:inline-block;
  padding:1px 7px;
  border:1px dashed #c9a227;
  border-radius:3px;
  background:rgba(201,162,39,.12);
  color:#8a6d0b;
  font-size:.8em;
  font-weight:500;
  font-style:normal;
  letter-spacing:.02em;
  vertical-align:baseline;
}
body.endless-draft .end-note{
  display:block;
  max-width:1140px;
  margin:0 auto;
  padding:10px 16px;
  border-left:3px solid #c9a227;
  background:rgba(201,162,39,.1);
  color:#8a6d0b;
  font-size:.85rem;
  font-weight:500;
  text-align:left;
  letter-spacing:.01em;
}

/* ==========================================================================
   5. Correcoes de contraste e enquadramento
   As imagens originais do site de origem eram faixas escuras feitas sob medida
   para receber texto (img-bg-tech tinha 1891x469, quase 4:1). Os renders do
   Endless sao 16:9 e claros, entao o texto branco sumia por cima deles.
   Os caminhos aqui sao relativos a ESTE arquivo (assets/), nao a pagina.
   ========================================================================== */

/* Diferenciais: scrim da esquerda para o texto branco descolar da foto,
   deixando a fachada e o letreiro visiveis a direita. */
.elementor-1489 .elementor-element.elementor-element-f8e13ee:not(.elementor-motion-effects-element-type-background){
  background-image:
    linear-gradient(90deg, rgba(28,26,22,.90) 0%, rgba(28,26,22,.72) 42%, rgba(28,26,22,.30) 75%, rgba(28,26,22,.12) 100%),
    url("img/endless/acesso.webp");
  background-position: center center;
  background-size: cover;
}

/* As regras das duas faixas de sustentabilidade (2e0c571 e bc5182f) sairam
   junto com aquele bloco, removido por ser especificacao do empreendimento
   de origem. As imagens vista-varanda.webp e fachada-aerea.webp continuam
   disponiveis em img/endless/ e seguem no carrossel. */

/* Parque da Cidade: a coluna da imagem e uma faixa baixa e larga; "top right"
   mostrava so ceu. Puxa o enquadramento para o jardim. */
.elementor-1489 .elementor-element.elementor-element-8f6dbdd:not(.elementor-motion-effects-element-type-background){
  background-position: center 62%;
  background-size: cover;
}
/* No desktop a altura dessa faixa vem da coluna de texto ao lado - o spacer
   proprio vale so 50px. No mobile o spacer ja da 220px e as colunas empilham.
   Entao o empurrao vai so no desktop, para a foto do parque nao virar tira. */
@media (min-width:768px){
  .elementor-1489 .elementor-element.elementor-element-8f6dbdd{ min-height: 260px; }
}

/* --------------------------------------------------------------------------
   6. Tarja de rascunho legivel em qualquer fundo
   Antes era translucida e sumia sobre foto.
   -------------------------------------------------------------------------- */
body.endless-draft .end-note{
  background:#FFF6DC;
  border-left:3px solid #C9A227;
  border-radius:2px;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5);
  color:#6B5307;
  position:relative;
  z-index:5;
}
body.endless-draft .end-attrs .end-note{
  margin-top:12px;
  font-size:.8rem;
}

/* ==========================================================================
   7. Logo institucional
   O CSS do tema manda img{width:50%}. Como os dois logos vizinhos (parceiro e
   IHPS) sairam, a coluna ficou sozinha e larga, e 50% dela virou um logo
   gigante. Limite em pixels resolve sem mexer no tema.
   ========================================================================== */
.elementor-1489 .elementor-element.elementor-element-0f8ee40 img{
  width:auto;
  max-width:230px;
  height:auto;
}

/* ==========================================================================
   8. Painel de pendencias
   Fica fora do fluxo, entao nao empurra nem sobrepoe nada do layout.
   Some inteiro quando a classe endless-draft sai do <body>.
   ========================================================================== */
.end-painel{display:none;}
body.endless-draft .end-painel{
  display:block;
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:9998;
  width:min(340px,calc(100vw - 32px));
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#4A3B08;
  background:#FFFBEF;
  border:1px solid #E3CD8A;
  border-radius:8px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
  overflow:hidden;
}
.end-painel__toggle{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 14px;
  border:0;
  background:#F4E4B8;
  color:#4A3B08;
  font:inherit;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  text-align:left;
  cursor:pointer;
}
.end-painel__toggle:hover{background:#EFDCA6;}
.end-painel__pin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#8A6D0B;
  color:#fff;
  font-size:.72rem;
}
.end-painel__corpo{
  max-height:min(46vh,420px);
  overflow:auto;
  padding:10px 14px 12px;
}
.end-painel--fechado .end-painel__corpo{display:none;}
.end-painel__corpo ul{margin:0;padding:0;list-style:none;}
.end-painel__corpo li{
  padding:7px 0;
  border-bottom:1px solid rgba(138,109,11,.16);
  font-size:.78rem;
  line-height:1.45;
}
.end-painel__corpo li:last-child{border-bottom:0;}
.end-painel__corpo li b{
  display:inline-block;
  margin-right:6px;
  color:#8A6D0B;
  font-weight:700;
}
.end-painel__rodape{
  margin:10px 0 0;
  font-size:.7rem;
  opacity:.75;
}
.end-painel__rodape code{
  padding:1px 4px;
  border-radius:3px;
  background:rgba(138,109,11,.12);
  font-size:.95em;
}
@media (max-width:600px){
  body.endless-draft .end-painel{left:10px;bottom:10px;width:calc(100vw - 20px);}
}

/* ==========================================================================
   9. Menu de ancora
   Fixo no topo. Transparente sobre o hero, ganha fundo solido ao rolar.
   ========================================================================== */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* o menu fixo cobriria o topo de cada secao ao pular para a ancora */
#inicio,#projeto,#localizacao,#lazer,#plantas,#diferenciais,#si-america,#cadastro{
  scroll-margin-top:78px;
}

.end-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:9990;
  display:flex;
  align-items:center;
  gap:24px;
  height:74px;
  padding:0 clamp(16px,3vw,40px);
  background:linear-gradient(180deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.18) 60%,transparent 100%);
  transition:background-color .3s ease,box-shadow .3s ease,height .3s ease;
}
.end-nav--solido{
  height:64px;
  background:rgba(38,35,29,.96);
  box-shadow:0 6px 24px -12px rgba(0,0,0,.8);
}

.end-nav__marca{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}
.end-nav__marca img{
  width:auto;
  height:34px;
  transition:height .3s ease;
}
.end-nav--solido .end-nav__marca img{ height:28px; }

.end-nav__links{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,30px);
  margin-inline-start:auto;
}
.end-nav__links ul{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,28px);
  margin:0;
  padding:0;
  list-style:none;
}
.end-nav__links a{
  position:relative;
  display:inline-block;
  padding:6px 0;
  color:#fff;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  opacity:.88;
  transition:opacity .2s ease,color .2s ease;
}
.end-nav__links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--end-beige);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.end-nav__links a:hover{opacity:1;}
.end-nav__links a:hover::after,
.end-nav__links a.esta-aqui::after{transform:scaleX(1);}
.end-nav__links a.esta-aqui{opacity:1;color:var(--end-beige);}

.end-nav__cta{
  display:inline-flex;
  align-items:center;
  padding:11px 20px;
  border-radius:2px;
  background:var(--end-tan);
  color:#fff !important;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:1 !important;
  transition:background-color .25s ease,transform .25s ease;
}
.end-nav__cta::after{display:none;}
.end-nav__cta:hover{background:var(--end-sand);transform:translateY(-1px);}

/* hamburguer */
.end-nav__hamb{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  margin-inline-start:auto;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.end-nav__hamb span{
  display:block;
  width:24px;
  height:2px;
  margin-inline:auto;
  background:#fff;
  transition:transform .25s ease,opacity .2s ease;
}
.end-nav--aberto .end-nav__hamb span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.end-nav--aberto .end-nav__hamb span:nth-child(2){opacity:0;}
.end-nav--aberto .end-nav__hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1024px){
  .end-nav{height:62px;}
  .end-nav--solido{height:58px;}
  .end-nav__hamb{display:flex;}
  .end-nav__links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:8px 20px 20px;
    background:rgba(38,35,29,.98);
    box-shadow:0 18px 30px -16px rgba(0,0,0,.85);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .end-nav--aberto .end-nav__links{opacity:1;visibility:visible;transform:none;}
  .end-nav__links ul{flex-direction:column;align-items:stretch;gap:0;}
  .end-nav__links li{border-bottom:1px solid rgba(255,255,255,.1);}
  .end-nav__links a{display:block;padding:14px 2px;font-size:.78rem;}
  .end-nav__links a::after{display:none;}
  .end-nav__links a.esta-aqui{color:var(--end-beige);}
  .end-nav__cta{justify-content:center;margin-top:16px;padding:14px 20px;}
  #inicio,#projeto,#localizacao,#lazer,#plantas,#diferenciais,#si-america,#cadastro{
    scroll-margin-top:64px;
  }
}

/* ==========================================================================
   10. PADRAO VISUAL - tipografia
   O book alterna uma serifada de alto contraste nos titulos com uma sans
   geometrica clara, em caixa alta bem espacada, nos rotulos e textos.
   Cormorant Garamond e Jost sao as equivalentes web (OFL, servidas daqui).
   ========================================================================== */

body{ font-family:var(--end-sans); }

/* titulos na serifada. Cuidado: .elementor-heading-title tambem e usada em
   <p> (o rotulo do formulario), por isso o seletor vai por tag. */
h1, h2, h3,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
.end-plantas__title,
.end-planta__name{
  font-family:var(--end-serif);
  font-weight:400;
  letter-spacing:.015em;
  line-height:1.12;
}
h1.elementor-heading-title,
h2.elementor-heading-title{
  font-size:clamp(1.9rem,3.6vw,3.1rem);
}
.end-plantas__title{font-weight:400;letter-spacing:.05em;}
.end-planta__name{font-weight:500;letter-spacing:.02em;text-transform:none;font-size:1.35rem;}

/* rotulos, listas, botoes e formulario ficam na sans */
.elementor-icon-list-text,
.elementor-button-text,
.wpcf7 input, .wpcf7 textarea, .wpcf7 select,
.end-attrs, .end-tour, .end-nav, .end-plantas__sub, .end-planta__meta{
  font-family:var(--end-sans);
}

/* caixa alta espacada, a assinatura do book */
.elementor-button-text,
.end-tour,
.end-nav__links a,
.end-nav__cta{
  letter-spacing:.16em;
}

/* o texto corrido respira mais que o padrao do tema */
p.elementor-heading-title,
.elementor-widget-text-editor p{
  font-family:var(--end-sans);
  font-weight:300;
  line-height:1.7;
}

/* ==========================================================================
   11. PADRAO VISUAL - textura
   Pedra marmorizada quente, a mesma da tela final do video. Entra nas duas
   faixas escuras da pagina, por cima da cor de fundo ja remapeada.
   ========================================================================== */
.elementor-1489 .elementor-element.elementor-element-b749fec:not(.elementor-motion-effects-element-type-background),
.elementor-1489 .elementor-element.elementor-element-2b3261b3:not(.elementor-motion-effects-element-type-background){
  background-image:
    linear-gradient(180deg,rgba(42,25,18,.86) 0%,rgba(42,25,18,.78) 100%),
    url("img/endless/textura-marmore.webp");
  background-size:cover;
  background-position:center center;
  background-attachment:scroll;
}

/* faixa fina metalica, para separar secoes como o book faz */
.end-filete{
  height:1px;
  border:0;
  margin:0;
  background:var(--end-metal);
  opacity:.85;
}

/* ==========================================================================
   12. PADRAO VISUAL - acabamentos
   ========================================================================== */

/* o selo "lancamento" ganha o dourado da marca */
.elementor-1489 .elementor-element.elementor-element-d9ff572 .elementor-button{
  background-color:transparent;
  border:1px solid var(--end-gold);
  color:var(--end-champagne);
  letter-spacing:.22em;
  font-family:var(--end-sans);
  font-weight:400;
}

/* o botao do formulario acompanha o bronze */
.wpcf7-submit{
  background-color:var(--end-dark) !important;
  color:var(--end-champagne) !important;
  font-family:var(--end-sans);
  letter-spacing:.18em;
  transition:background-color .25s ease;
}
.wpcf7-submit:hover{ background-color:var(--end-gold-deep) !important; }

/* o menu fixo passa a usar o marrom da marca */
.end-nav--solido{ background:rgba(42,25,18,.96); }
@media (max-width:1024px){
  .end-nav__links{ background:rgba(42,25,18,.98); }
}

/* botao ultra: o degrade metalico do logo no lugar do bronze chapado */
.end-tour--ultra{
  background:linear-gradient(100deg,#8A6A4F 0%,#AB8262 30%,#C9A275 55%,#AB8262 80%,#8A6A4F 100%);
}
.end-tour--ultra:hover,.end-tour--ultra:focus-visible{
  background:linear-gradient(100deg,#9A7757 0%,#BC9070 30%,#DDB584 55%,#BC9070 80%,#9A7757 100%);
}
.end-tour--ultra .end-tour__tag{
  background:var(--end-espresso);
  color:var(--end-champagne);
}

/* ==========================================================================
   13. Lazer
   A lista veio do book (paginas ROOFTOP e PAVIMENTO TERREO). O jogo de icones
   SVG do site de origem saiu: cada um era desenhado para um item especifico e
   nao havia equivalente para os espacos do Endless. No lugar entra a numeracao
   em circulo que o proprio book usa nessas duas paginas.
   ========================================================================== */
.end-lazer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,4vw,64px);
  width:100%;
  counter-reset:none;
}
.end-lazer__grupo{ counter-reset:endlazer; }
.end-lazer__titulo{
  margin:0 0 1.1em;
  padding-bottom:.5em;
  border-bottom:1px solid rgba(171,130,98,.35);
  color:var(--end-brown);
  font-family:var(--end-serif);
  font-size:clamp(1.35rem,2vw,1.7rem);
  font-weight:400;
  letter-spacing:.03em;
}
.end-lazer__lista{
  margin:0;
  padding:0;
  list-style:none;
}
.end-lazer__lista li{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:.85em;
  padding:.5em 0;
  color:var(--end-brown-mid);
  font-family:var(--end-sans);
  font-size:1rem;
  font-weight:300;
  letter-spacing:.06em;
}
.end-lazer__n{
  counter-increment:endlazer;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75em;
  height:1.75em;
  border:1px solid var(--end-bronze);
  border-radius:50%;
  color:var(--end-bronze);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:0;
  transform:translateY(.1em);
}
.end-lazer__n::before{ content:counter(endlazer); }

@media (max-width:600px){
  .end-lazer{gap:34px;}
  .end-lazer__lista li{font-size:.95rem;}
}

/* ==========================================================================
   14. Logo do menu: so aparece depois de rolar
   No topo o hero ja mostra a marca em tamanho grande - repeti-la na barra e
   redundante. O espaco continua reservado (visibility, nao display), entao os
   links nao pulam de lugar quando ela entra.
   ========================================================================== */
.end-nav__marca{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.end-nav--solido .end-nav__marca{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
/* no mobile o menu aberto tambem mostra a marca, para dar contexto */
@media (max-width:1024px){
  .end-nav--aberto .end-nav__marca{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
}

/* ==========================================================================
   15. Rodape com dois creditos
   Eram tres (realizacao, construcao, gestao comercial). Com a saida do bloco
   de construcao, os dois que restaram sao normalizados para a mesma largura e
   centralizados; a divisoria fica so entre eles.
   ========================================================================== */
.elementor-1489 .elementor-element.elementor-element-578429f3{
  --justify-content:center;
  justify-content:center;
}
.elementor-1489 .elementor-element.elementor-element-7d8cfe54,
.elementor-1489 .elementor-element.elementor-element-681d833{
  --width:auto;
  width:auto;
  flex:0 1 auto;
  align-items:center;
  justify-content:center;
  padding-inline:clamp(22px,4vw,60px);
}
.elementor-1489 .elementor-element.elementor-element-7d8cfe54{
  border-width:0 1px 0 0;
  border-color:rgba(208,171,125,.32);
}
.elementor-1489 .elementor-element.elementor-element-681d833{
  border-width:0;
}
@media (max-width:600px){
  .elementor-1489 .elementor-element.elementor-element-7d8cfe54{
    border-width:0 0 1px 0;
    padding-block-end:18px;
  }
  .elementor-1489 .elementor-element.elementor-element-7d8cfe54,
  .elementor-1489 .elementor-element.elementor-element-681d833{
    width:100%;
    flex-basis:100%;
  }
}

/* O #6eed41d9 e um espacador vazio de 50% que ja vinha assim no site de
   origem (conferido no _base.html). Com tres creditos ele nao incomodava;
   com dois, empurra o par para fora do centro. Some so na exibicao - o
   elemento fica no HTML, porque nao e resto de remocao minha. */
.elementor-1489 .elementor-element.elementor-element-6eed41d9{ display:none; }

/* ==========================================================================
   16. Creditos do rodape
   Estavam desequilibrados: a SI America saia gigante (a regra do tema manda
   a imagem ocupar a largura do container) e a Franca praticamente sumia -
   o logo dela e azul-marinho com telhado vermelho, sobre marrom escuro.
   O video da marca resolve isso mostrando os dois em branco; e o que se faz
   aqui, com filtro, sem precisar de arte nova.
   ========================================================================== */
/* Os dois ocupam exatamente a mesma caixa. Igualar so a altura nao bastava:
   a SI America e bem mais alongada (472x90) que a Franca (750x250), entao na
   mesma altura uma saia com quase o dobro da largura da outra. Com a caixa
   fixa, cada marca se ajusta dentro dela e o tamanho aparente fica igual. */
.elementor-1489 .elementor-element.elementor-element-995d1de img,
.elementor-1489 .elementor-element.elementor-element-4a9fac6f img{
  width:180px;
  height:52px;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  filter:brightness(0) invert(1);
  opacity:.92;
  transition:opacity .25s ease;
}
.elementor-1489 .elementor-element.elementor-element-995d1de img:hover,
.elementor-1489 .elementor-element.elementor-element-4a9fac6f img:hover{ opacity:1; }

/* cada credito vira uma coluna: rotulo em cima, logo embaixo, tudo centrado */
.elementor-1489 .elementor-element.elementor-element-7d8cfe54,
.elementor-1489 .elementor-element.elementor-element-681d833{
  --flex-direction:column;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  min-height:96px;
}
/* o rotulo, na caixa alta espacada do book */
.elementor-1489 .elementor-element.elementor-element-236e33fa .elementor-heading-title,
.elementor-1489 .elementor-element.elementor-element-3aa2db45 .elementor-heading-title{
  margin:0;
  color:var(--end-gold);
  font-family:var(--end-sans);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
}
/* os wrappers internos nao podem impor largura propria */
.elementor-1489 .elementor-element.elementor-element-1b055e4,
.elementor-1489 .elementor-element.elementor-element-b231626,
.elementor-1489 .elementor-element.elementor-element-995d1de,
.elementor-1489 .elementor-element.elementor-element-4a9fac6f,
.elementor-1489 .elementor-element.elementor-element-3aa2db45,
.elementor-1489 .elementor-element.elementor-element-236e33fa{
  --width:auto;
  width:auto;
  text-align:center;
}

@media (max-width:600px){
  .elementor-1489 .elementor-element.elementor-element-995d1de img,
  .elementor-1489 .elementor-element.elementor-element-4a9fac6f img{ width:150px; height:44px; }
  .elementor-1489 .elementor-element.elementor-element-7d8cfe54,
  .elementor-1489 .elementor-element.elementor-element-681d833{ min-height:0; gap:10px; }
}

/* ==========================================================================
   17. Creditos do rodape: centralizar no mesmo eixo do texto legal
   Os dois grupos vinham com larguras declaradas incompativeis - a realizacao
   com --width:100% e a intermediacao com 48% - herdadas de quando eram tres
   creditos. Assim o par nao caia no centro da pagina, e sim deslocado para a
   esquerda, fora do eixo do texto legal logo abaixo.
   ========================================================================== */
.elementor-1489 .elementor-element.elementor-element-578429f3{
  --width:100%;
  width:100%;
  max-width:100%;
  margin-inline:auto;
  --justify-content:center;
  justify-content:center;
  --align-items:flex-start;
  align-items:flex-start;
}
.elementor-1489 .elementor-element.elementor-element-7d8cfe54,
.elementor-1489 .elementor-element.elementor-element-681d833{
  --width:auto;
  width:auto;
  flex:0 0 auto;
}
/* espacador vazio de 50% dentro do grupo da Franca; ja vinha vazio do site de
   origem (conferido no _base.html), so somava espaco morto. */
.elementor-1489 .elementor-element.elementor-element-f47314{ display:none; }

/* ==========================================================================
   18. Galeria do projeto
   Substitui o carrossel do Elementor, que nunca inicializava (o CSS do Swiper
   aplicava, mas o JS dos widgets nao rodava, e os 19 slides empilhavam).
   Aqui a rolagem e nativa, com scroll-snap: sem JavaScript ainda funciona
   como galeria horizontal - o JS so acrescenta setas, legenda e miniaturas.
   ========================================================================== */
.end-galeria{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
}
.end-galeria__palco{ position:relative; }

.end-galeria__trilho{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.end-galeria__trilho::-webkit-scrollbar{ display:none; }
.end-galeria__trilho:focus-visible{ outline:2px solid var(--end-gold); outline-offset:3px; }

.end-galeria__slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
/* O corte fica ancorado na BASE. As fachadas sao renders em retrato (1632x1920)
   numa moldura 16/9: centralizado, sobrava o meio da torre e se perdia o
   terreo com as lojas, que e o trecho que interessa. Nas imagens que ja sao
   16/9 nao ha corte, entao a ancora nao muda nada nelas. */
.end-galeria__img{
  aspect-ratio:16 / 9;
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* setas: so o chevron, desenhado em CSS */
.end-galeria__seta{
  position:absolute;
  top:50%;
  z-index:2;
  width:46px;
  height:46px;
  margin-top:-23px;
  border:0;
  border-radius:50%;
  background:rgba(42,25,18,.5);
  cursor:pointer;
  transition:background-color .25s ease;
}
.end-galeria__seta:hover{ background:rgba(42,25,18,.8); }
.end-galeria__seta::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:11px;
  border-top:1.5px solid var(--end-champagne);
  border-right:1.5px solid var(--end-champagne);
}
.end-galeria__seta--ant{ left:14px; }
.end-galeria__seta--ant::before{ transform:translate(-30%,-50%) rotate(-135deg); }
.end-galeria__seta--prox{ right:14px; }
.end-galeria__seta--prox::before{ transform:translate(-70%,-50%) rotate(45deg); }

.end-galeria__legenda{
  margin:18px 0 0;
  color:var(--end-gold);
  font-family:var(--end-sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
}

/* tira de miniaturas */
/* Colada na base da imagem, com as bordas batendo com as do palco. Nao entra
   sobreposta porque o enquadramento mostra o terreo, e a tira taparia ele. */
.end-galeria__miniaturas{
  display:flex;
  gap:6px;
  margin:6px 0 0;
  padding:0 0 4px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.end-galeria__miniaturas::-webkit-scrollbar{ display:none; }
.end-galeria__miniaturas li{ flex:0 0 auto; }
.end-galeria__miniaturas button{
  display:block;
  width:92px;
  height:52px;
  padding:0;
  border:1px solid transparent;
  background-size:cover;
  /* mesma ancora da imagem grande, para a miniatura mostrar o mesmo trecho */
  background-position:center bottom;
  opacity:.45;
  cursor:pointer;
  transition:opacity .25s ease,border-color .25s ease;
}
.end-galeria__miniaturas button:hover{ opacity:.8; }
.end-galeria__miniaturas button.esta-aqui{
  opacity:1;
  border-color:var(--end-gold);
}

@media (max-width:768px){
  .end-galeria__seta{ width:38px; height:38px; margin-top:-19px; }
  .end-galeria__miniaturas button{ width:70px; height:40px; }
  .end-galeria__legenda{ font-size:.66rem; letter-spacing:.18em; }
}
@media (prefers-reduced-motion:reduce){
  .end-galeria__trilho{ scroll-behavior:auto; }
}

/* ==========================================================================
   19. Fundo do hero
   A fachada noturna deixa um ceu azul chapado justo atras do titulo - alem de
   vazio, e um azul frio brigando com o marrom e o dourado da marca. Por cima
   entram a textura de marmore, em soft-light, e um veu quente da esquerda,
   que e o lado onde o texto fica. O predio continua legivel a direita.
   ========================================================================== */
.elementor-1489 .elementor-element.elementor-element-f0f84ee:not(.elementor-motion-effects-element-type-background){
  background-image:
    linear-gradient(105deg,
      rgba(38,22,15,.90) 0%,
      rgba(38,22,15,.70) 32%,
      rgba(42,25,18,.38) 58%,
      rgba(42,25,18,.14) 82%,
      rgba(42,25,18,.05) 100%),
    url("img/endless/textura-marmore.webp"),
    url("img/endless/fachada-noite.webp");
  background-size:cover,cover,cover;
  background-position:center,center,top left;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-blend-mode:normal,soft-light,normal;
}
@media (max-width:1024px){
  /* no mobile o texto ocupa a largura toda, entao o veu vem de cima */
  .elementor-1489 .elementor-element.elementor-element-f0f84ee:not(.elementor-motion-effects-element-type-background){
    background-image:
      linear-gradient(180deg,
        rgba(38,22,15,.88) 0%,
        rgba(38,22,15,.62) 45%,
        rgba(42,25,18,.35) 100%),
      url("img/endless/textura-marmore.webp"),
      url("img/endless/fachada-noite.webp");
  }
}

/* ==========================================================================
   20. Diferenciais
   Lista da pagina 21 do book. A secao tem foto escura ao fundo, entao o texto
   e claro e os marcadores sao filetes dourados, no lugar de bolinha.
   ========================================================================== */
.end-difs{
  margin:1.4em 0 0;
  padding:0;
  list-style:none;
  max-width:46rem;
}
.end-difs li{
  position:relative;
  padding:.55em 0 .55em 1.5em;
  color:#F2E7D4;
  font-family:var(--end-sans);
  font-size:1rem;
  font-weight:300;
  letter-spacing:.04em;
  line-height:1.5;
}
.end-difs li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.1em;
  width:.75em;
  height:1px;
  background:var(--end-gold);
}
.end-difs__nota{
  margin:1.2em 0 0;
  color:rgba(242,231,212,.6);
  font-family:var(--end-sans);
  font-size:.72rem;
  font-weight:300;
  letter-spacing:.08em;
}

/* ==========================================================================
   21. Entorno
   Mapa do book mais os pontos proximos, agrupados como no material impresso.
   ========================================================================== */
.end-entorno{
  background:var(--end-off);
  padding:clamp(44px,6vw,88px) 20px;
}
.end-entorno__inner{
  display:grid;
  grid-template-columns:minmax(280px,1.1fr) minmax(280px,1fr);
  gap:clamp(28px,4vw,60px);
  align-items:start;
  max-width:1180px;
  margin-inline:auto;
}
.end-entorno__mapa{ margin:0; }
.end-entorno__mapa img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(171,130,98,.28);
}
.end-entorno__mapa figcaption{
  margin-top:.7em;
  color:var(--end-taupe);
  font-family:var(--end-sans);
  font-size:.68rem;
  font-weight:300;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.end-entorno__titulo{
  margin:0 0 1em;
  color:var(--end-brown);
  font-family:var(--end-serif);
  font-size:clamp(1.7rem,2.6vw,2.3rem);
  font-weight:400;
  letter-spacing:.03em;
}
.end-entorno__grupo{ margin-bottom:1.5em; }
.end-entorno__grupo h4{
  margin:0 0 .55em;
  padding-bottom:.4em;
  border-bottom:1px solid rgba(171,130,98,.3);
  color:var(--end-bronze);
  font-family:var(--end-sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.end-entorno__grupo ul{
  display:flex;
  flex-wrap:wrap;
  gap:.35em 1.1em;
  margin:0;
  padding:0;
  list-style:none;
}
.end-entorno__grupo li{
  color:var(--end-brown-mid);
  font-family:var(--end-sans);
  font-size:.92rem;
  font-weight:300;
  letter-spacing:.03em;
}
@media (max-width:840px){
  .end-entorno__inner{ grid-template-columns:1fr; }
}

/* ==========================================================================
   22. Lupa da galeria
   O lightbox do Elementor saiu junto com o carrossel; este e proprio.
   ========================================================================== */
.end-galeria__ilustrativa{
  margin:12px 0 0;
  color:var(--end-taupe);
  font-family:var(--end-sans);
  font-size:.66rem;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
}
.end-lupa{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(16px,4vw,48px);
  background:rgba(24,14,10,.94);
  cursor:zoom-out;
}
.end-lupa[hidden]{ display:none; }
.end-lupa__img{
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  cursor:default;
}
.end-lupa__legenda{
  margin:0;
  color:var(--end-gold);
  font-family:var(--end-sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.end-lupa__fechar{
  position:absolute;
  top:clamp(12px,3vw,28px);
  right:clamp(12px,3vw,28px);
  width:44px;
  height:44px;
  border:1px solid rgba(246,232,189,.4);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.end-lupa__fechar::before,.end-lupa__fechar::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:15px;
  height:1.5px;
  background:var(--end-champagne);
}
.end-lupa__fechar::before{ transform:translate(-50%,-50%) rotate(45deg); }
.end-lupa__fechar::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.end-lupa__fechar:hover{ border-color:var(--end-champagne); }

/* a imagem da galeria vira clicavel */
.end-galeria__img{ cursor:zoom-in; }

/* ==========================================================================
   23. Motion
   Duas coisas: a entrada do hero na carga e a revelacao por rolagem no resto.
   Movimento curto (18px) e lento (.9s), com saida desacelerada - marca de alto
   padrao se move devagar; salto e quique destoariam do resto.

   Tudo depende da classe "end-motion" no <html>, posta por um script no topo
   do <head> apenas quando ha IntersectionObserver e o usuario nao pediu menos
   movimento. Sem ela, nada aqui esconde nada: a pagina aparece inteira.
   ========================================================================== */

/* --- revelacao por rolagem ---
   A transicao fica numa regra e o estado inicial em outra, presa a
   :not(.visivel). Quando o JS poe a classe, a regra que esconde simplesmente
   deixa de casar - nada de disputa de especificidade.

   Foi exatamente ai que quebrou antes: o estado inicial vinha de
   ".end-motion :is(...)", que vale (0,2,1), e a regra que revelava era
   ".end-motion .visivel", so (0,2,0). A classe entrava e perdia; o conteudo
   ficava invisivel para sempre. */
.end-motion :is(
  .elementor-widget-heading h2,
  .elementor-widget-heading p,
  .elementor-widget-text-editor,
  .end-galeria,
  .end-lazer__grupo,
  .end-difs li,
  .end-plantas__head,
  .end-planta,
  .end-plantas__foot,
  .end-entorno__mapa,
  .end-entorno__titulo,
  .end-entorno__grupo
){
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--n,0) * 80ms);
}
.end-motion :is(
  .elementor-widget-heading h2,
  .elementor-widget-heading p,
  .elementor-widget-text-editor,
  .end-galeria,
  .end-lazer__grupo,
  .end-difs li,
  .end-plantas__head,
  .end-planta,
  .end-plantas__foot,
  .end-entorno__mapa,
  .end-entorno__titulo,
  .end-entorno__grupo
):not(.visivel){
  opacity:0;
  transform:translateY(18px);
}

/* --- entrada do hero, na carga --- */
@keyframes end-entra{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}
.end-motion .elementor-1489 .elementor-element.elementor-element-d9ff572,
.end-motion .elementor-1489 .elementor-element.elementor-element-5d9bb47,
.end-motion .elementor-1489 .elementor-element.elementor-element-e382ad2,
.end-motion .end-attrs,
.end-motion .end-tours,
.end-motion .elementor-1489 .elementor-element.elementor-element-cc25cf9{
  /* "both" no lugar de "forwards", justamente para NAO precisar de um
     opacity:0 fixo aqui: durante o atraso vale o estado "from" do keyframe,
     e no fim vale o "to". Se a animacao nao rodar por qualquer motivo, o
     elemento fica visivel - em vez de sumir para sempre. */
  animation:end-entra 1s cubic-bezier(.22,.61,.36,1) both;
}
.end-motion .elementor-1489 .elementor-element.elementor-element-d9ff572{ animation-delay:.15s; }
.end-motion .elementor-1489 .elementor-element.elementor-element-5d9bb47{ animation-delay:.28s; }
.end-motion .elementor-1489 .elementor-element.elementor-element-e382ad2{ animation-delay:.44s; }
.end-motion .end-attrs                                                  { animation-delay:.58s; }
.end-motion .end-tours                                                  { animation-delay:.72s; }
.end-motion .elementor-1489 .elementor-element.elementor-element-cc25cf9{ animation-delay:.5s; }

/* --- acabamentos de hover, no mesmo tempo do resto --- */
.end-planta{
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s cubic-bezier(.22,.61,.36,1);
}
.end-planta:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -22px rgba(42,25,18,.55);
}
.end-galeria__miniaturas button{ transition:opacity .25s ease,border-color .25s ease,transform .35s ease; }
.end-galeria__miniaturas button:hover{ transform:translateY(-2px); }

/* o filete metalico entra crescendo do centro, sob os titulos do entorno */
.end-entorno__titulo{ position:relative; padding-bottom:.5em; }
.end-entorno__titulo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:1px;
  background:var(--end-metal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.22,.61,.36,1) .25s;
}
.end-motion .end-entorno__titulo.visivel::after,
html:not(.end-motion) .end-entorno__titulo::after{ transform:scaleX(1); }

/* --- quem pediu menos movimento nao recebe nada disso --- */
@media (prefers-reduced-motion:reduce){
  /* o :not(.visivel) repete o seletor que esconde, senao esta regra perde
     para ele na especificidade e o conteudo continua sumido */
  .end-motion :is(
    .elementor-widget-heading h2,.elementor-widget-heading p,
    .elementor-widget-text-editor,.end-galeria,.end-lazer__grupo,.end-difs li,
    .end-plantas__head,.end-planta,.end-plantas__foot,
    .end-entorno__mapa,.end-entorno__titulo,.end-entorno__grupo
  ):not(.visivel){ opacity:1; transform:none; transition:none; }
  .end-motion .elementor-1489 .elementor-element,
  .end-motion .end-attrs,
  .end-motion .end-tours{ opacity:1; animation:none; }
  .end-planta:hover{ transform:none; }
}

/* ==========================================================================
   24. Arte da planta
   Reaproveita .end-galeria__img para cair na mesma lupa, mas planta nao pode
   ser cortada: em vez de "cover" num 16/9, entra inteira sobre branco.
   ========================================================================== */
/* O container da arte deixa de ser flex centralizado: como o div da planta nao
   tem largura propria, num flex ele ficava com largura 0 e, com proporcao 4/3,
   altura 0 tambem - a planta simplesmente sumia. Em bloco, ele ocupa a largura
   toda e a proporcao passa a valer. */
.end-planta .end-planta__art{
  display:block;
  padding:0;
  background:#fff;
  aspect-ratio:auto;
}
.end-planta__img{
  width:100%;
  aspect-ratio:4 / 3;
  background-size:contain;
  /* planta nao pode ser cortada nem empurrada para a base como as fotos */
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#fff;
}

/* ==========================================================================
   25. Lupa com fundo claro
   As plantas sao webp com canal alfa: fundo transparente e chamadas em texto
   escuro. Sobre o marrom da lupa elas ficavam ilegiveis. Quando o elemento
   clicado traz data-fundo="claro", a imagem entra sobre branco.
   ========================================================================== */
.end-lupa--claro .end-lupa__img{
  background:#fff;
  padding:clamp(12px,2vw,28px);
  border-radius:2px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}
/* a legenda tambem muda, para nao brigar com o branco logo acima */
.end-lupa--claro .end-lupa__legenda{ color:var(--end-cream); }

/* ==========================================================================
   26. Plantao de vendas
   Faixa entre o pre-footer e o rodape legal. Endereco abre no mapa, telefone
   disca no celular e o botao leva ao mesmo numero do WhatsApp flutuante.
   ========================================================================== */
.end-plantao{
  background:var(--end-dark);
  padding:clamp(34px,4.5vw,58px) 20px;
}
.end-plantao__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,3vw,52px);
  max-width:1140px;
  margin-inline:auto;
  text-align:center;
}
.end-plantao__titulo{
  margin:0;
  color:var(--end-gold);
  font-family:var(--end-serif);
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:400;
  letter-spacing:.03em;
}
.end-plantao__dados{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(16px,2.5vw,40px);
  justify-content:center;
}
.end-plantao__item{
  display:flex;
  flex-direction:column;
  gap:.35em;
  margin:0;
  text-align:left;
}
.end-plantao__rotulo{
  color:var(--end-bronze);
  font-family:var(--end-sans);
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.end-plantao__valor{
  color:#F2E7D4;
  font-family:var(--end-sans);
  font-size:.98rem;
  font-weight:300;
  letter-spacing:.03em;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,color .25s ease;
}
.end-plantao__valor:hover{
  color:var(--end-champagne);
  border-bottom-color:var(--end-gold);
}
.end-plantao__zap{
  display:inline-flex;
  align-items:center;
  padding:14px 26px;
  border:1px solid var(--end-gold);
  border-radius:2px;
  color:var(--end-champagne);
  font-family:var(--end-sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .25s ease,color .25s ease;
}
.end-plantao__zap:hover{
  background:var(--end-gold);
  color:var(--end-espresso);
}
@media (max-width:700px){
  .end-plantao__inner{ flex-direction:column; gap:22px; }
  .end-plantao__item{ text-align:center; align-items:center; }
}

/* ==========================================================================
   27. Botao flutuante de WhatsApp
   Substitui o do plugin Joinchat, que era uma <div> vazia montada por
   JavaScript. Aqui e um link comum: funciona mesmo sem script.
   ========================================================================== */
.end-zap{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9995;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.55);
  transition:transform .25s ease,box-shadow .25s ease;
}
.end-zap svg{
  width:32px;
  height:32px;
  fill:#fff;
}
.end-zap:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 28px -10px rgba(0,0,0,.6);
}
@media (max-width:600px){
  .end-zap{ right:14px; bottom:14px; width:52px; height:52px; }
  .end-zap svg{ width:29px; height:29px; }
}
@media (prefers-reduced-motion:reduce){
  .end-zap{ transition:none; }
  .end-zap:hover{ transform:none; }
}

/* ==========================================================================
   28. Formulario nativo
   Mesmos campos, sem o Contact Form 7. A validacao passa a ser a do proprio
   navegador, pelo atributo "required".
   ========================================================================== */
.end-form__nota{
  margin:.9em 0 0;
  color:#fff;
  font-family:var(--end-sans);
  font-size:11px;
  font-weight:300;
}
.end-form input:invalid:not(:placeholder-shown){
  box-shadow:inset 0 0 0 1px rgba(190,80,60,.55);
}

/* ==========================================================================
   29. Faixa de destaques
   Segunda secao da pagina, entre o hero e o bloco do carrossel. Entra em
   claro porque os dois vizinhos sao escuros - sem isso viraria um bloco
   escuro so, e o hero perderia o corte.
   ========================================================================== */
.end-destaques{
  background:var(--end-off);
  padding:clamp(38px,5vw,68px) 20px;
}
.end-destaques__inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(24px,3.5vw,52px);
  max-width:1180px;
  margin-inline:auto;
}
.end-destaque{
  padding-top:18px;
  border-top:1px solid rgba(171,130,98,.4);
}
.end-destaque__titulo{
  margin:0 0 .45em;
  color:var(--end-brown);
  font-family:var(--end-serif);
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.02em;
}
.end-destaque__apoio{
  margin:0;
  color:var(--end-brown-mid);
  font-family:var(--end-sans);
  font-size:.9rem;
  font-weight:300;
  line-height:1.5;
  letter-spacing:.03em;
}
@media (max-width:600px){
  .end-destaques__inner{ gap:22px; }
  .end-destaque{ padding-top:14px; }
}

/* --- icones da faixa de destaques ---
   Traco fino em dourado, no mesmo peso dos filetes do resto da pagina.
   Sao SVG inline, nao fonte de icone: a pagina nao volta a depender disso. */
.end-destaque__icone{
  display:block;
  width:34px;
  height:34px;
  margin-bottom:14px;
  color:var(--end-bronze);
  transition:color .3s ease;
}
.end-destaque:hover .end-destaque__icone{ color:var(--end-gold-deep); }
@media (max-width:600px){
  .end-destaque__icone{ width:30px; height:30px; margin-bottom:10px; }
}
@media (prefers-reduced-motion:reduce){
  .end-destaque__icone{ transition:none; }
}

/* ==========================================================================
   30. Ajustes do hero
   ========================================================================== */

/* --- linha "Aptos de 2 e 3 dorms (suíte)" ---
   Tres pesos na mesma linha: o chapeu bem miudo, a informacao principal
   grande, e "(suíte)" no meio do caminho. */
.end-attrs__lead{
  display:block;
  font-size:1.9em;
  line-height:1.15;
  margin:0 0 .7em;
  text-transform:none;
}
.end-attrs__chapeu{
  font-size:.38em;
  font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  vertical-align:middle;
  opacity:.85;
}
.end-attrs__forte{
  font-weight:600;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.end-attrs__suite{
  font-size:.62em;
  font-weight:300;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* em tela estreita o chapeu vira bloco e a linha quebra em duas:
   "Aptos de" em cima, "2 e 3 dorms (suíte)" embaixo */
@media (max-width:900px){
  .end-attrs__lead{ font-size:1.7em; }
  .end-attrs__chapeu{
    display:block;
    margin-bottom:.35em;
  }
}

/* --- logo do hero, 25% menor --- */
.elementor-1489 .elementor-element.elementor-element-5d9bb47 img{ width:37.5%; }
@media (max-width:1024px){
  .elementor-1489 .elementor-element.elementor-element-5d9bb47 img{ width:60%; }
}

/* --- botoes de tour: depois do formulario ---
   Eles ficam FORA da linha que tem os atributos e o formulario, como irmaos
   dela dentro da coluna do hero. Duas tentativas antes desta falharam:
   entrar como terceira coluna espremia os botoes, e por wrap no pai fazia as
   duas colunas se separarem - era o que estava esticando a caixa bege. */
.end-tours--hero{
  width:100%;
  max-width:34rem;
  margin:22px auto 0;
}
@media (max-width:1024px){
  .end-tours--hero{ max-width:30rem; }
}