/* ==========================================================================
   ESMERALDA — sistema visual do projeto
   Gramática: a lapidação. As diagonais da fachada tornam-se o corte das
   secções, o bisel das imagens e o traço dos separadores.
   Acento: verde esmeralda, contido, sobre a base grafite/pedra da marca.
   ========================================================================== */

.page-esmeralda{
  --esm-900:#04211b;
  --esm-800:#073a2e;
  --esm-600:#0f7a5c;
  --esm-500:#17a377;
  --esm-400:#31c895;   /* acento principal */
  --esm-300:#9aeacd;   /* highlight sobre fundo escuro */

  /* Profundidade do corte diagonal, derivada da inclinação da fachada */
  --facet: clamp(26px, 4.5vw, 76px);
}

/* Acento: substitui o teal da marca apenas dentro desta página ---------- */
.page-esmeralda .section-tag{ color:var(--esm-600); }
.page-esmeralda .section-dark .section-tag,
.page-esmeralda .section-graphite .section-tag,
.page-esmeralda .on-dark .section-tag{ color:var(--esm-400); }
.page-esmeralda .pill{ border-color:rgba(49,200,149,.42); color:var(--esm-400); }
.page-esmeralda .coord{ color:var(--esm-400); }
.page-esmeralda .btn-teal{ background:var(--esm-400); border-color:var(--esm-400); }
.page-esmeralda .btn-teal:hover{ background:var(--esm-300); border-color:var(--esm-300); }
.page-esmeralda ::selection{ background:var(--esm-400); color:var(--ink); }

/* --------------------------------------------------------------------------
   Corte de secção — a secção "entra" na anterior com a inclinação da fachada
   -------------------------------------------------------------------------- */
.esm-facet{
  margin-top:calc(var(--facet) * -1);
  padding-top:calc(var(--section-pad) + var(--facet));
  clip-path:polygon(0 var(--facet), 100% 0, 100% 100%, 0 100%);
}
/* Espelhado — em ziguezague, como as diagonais do alçado */
.esm-facet--rev{ clip-path:polygon(0 0, 100% var(--facet), 100% 100%, 0 100%); }

/* Traço diagonal fino, usado como separador ou sublinhado */
.esm-rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--esm-500) 22%, var(--esm-500) 78%, transparent);
  opacity:.45; transform:skewY(-.9deg);
}

/* Bisel de gema no canto inferior direito das imagens */
.esm-cut{
  --cut:clamp(1.6rem, 4vw, 3.4rem);
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.esm-cut--tl{
  clip-path:polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}

/* Marca da gema (o mesmo símbolo do letreiro da entrada) */
.esm-gem{ width:auto; height:clamp(30px,3.4vw,44px); color:var(--esm-400); }
.esm-gem path{ vector-effect:non-scaling-stroke; }

/* --------------------------------------------------------------------------
   HERO (motion aprovado — Centro da Cidade)
   -------------------------------------------------------------------------- */
/* Ecrã inteiro, como o do Oliveira Plaza. `svh` e não `vh`: no telemóvel o
   `vh` conta com a barra do browser recolhida e o herói fica a transbordar. */
.esm-hero{ min-height:100svh; background:#000; }
.esm-hero-bg{ position:absolute; inset:0; z-index:0; background:#000; overflow:hidden; }
.esm-hero-bg img{
  width:100%; height:100%; object-fit:cover;
  /* o edifício ocupa o terço superior do render; puxar o enquadramento para
     cima deixa o asfalto em baixo, que é onde assenta o texto */
  object-position:50% 38%;
  animation:esm-aproximar 18s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes esm-aproximar{ from{ transform:scale(1.1); } to{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .esm-hero-bg img{ animation:none; } }
/* O render é claro e o texto é branco: além do véu de baixo, é preciso um véu
   lateral, porque o título assenta à esquerda, em cima do edifício. */
.esm-hero .hero-scrim{
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 36%, rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.4) 46%, rgba(0,0,0,.5) 100%);
}

.esm-status{ margin-top:1.6rem; }
.esm-status .pill{ border-color:rgba(49,200,149,.42); }

/* --------------------------------------------------------------------------
   01 — O LUGAR  (aérea real com o volume implantado + marcações)
   -------------------------------------------------------------------------- */
.esm-place{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:960px){ .esm-place{ grid-template-columns:1fr; } }

.esm-site{ --accent:var(--esm-400); }
.esm-site img{ width:100%; height:auto; }
.esm-site figcaption{
  margin-top:1rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:rgba(246,243,236,.45);
}

/* Coluna de leitura ao lado da aérea */
.esm-place-copy{ position:sticky; top:clamp(5rem,10vw,7rem); }
@media (max-width:960px){ .esm-place-copy{ position:static; } }

.esm-facts{ margin-top:clamp(2rem,4vw,3rem); }
.esm-facts li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding:1.05rem 0; border-top:1px solid rgba(246,243,236,.13);
}
.esm-facts li .k{
  font-family:var(--font-sans); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--esm-400); min-width:6.5ch;
}
.esm-facts li .v{ color:rgba(246,243,236,.82); font-size:.95rem; line-height:1.5; }

/* --------------------------------------------------------------------------
   02 — A FACHADA
   -------------------------------------------------------------------------- */
.esm-facade{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.5vw,2rem);
  align-items:end;
}
.esm-facade figure{ margin:0; }
.esm-facade img{ width:100%; height:100%; object-fit:cover; }
.esm-fa-lead{ grid-column:span 5; }
.esm-fa-lead img{ aspect-ratio:4/5; }
.esm-fa-side{ grid-column:span 4; }
.esm-fa-side img{ aspect-ratio:4/5; }
.esm-fa-note{ grid-column:span 3; padding-bottom:.4rem; }
@media (max-width:960px){
  .esm-facade{ grid-template-columns:repeat(2,1fr); }
  .esm-fa-lead, .esm-fa-side{ grid-column:span 1; }
  .esm-fa-note{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .esm-facade{ grid-template-columns:1fr; }
  .esm-fa-lead, .esm-fa-side{ grid-column:auto; }
}

.esm-cap{
  margin-top:.9rem; display:flex; gap:.7rem; align-items:baseline;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:rgba(246,243,236,.5);
}
.esm-cap .n{ color:var(--esm-400); }

/* Banda de detalhe — a entrada e o letreiro */
.esm-band{ margin:clamp(3rem,7vw,6rem) 0 0; position:relative; }
.esm-band img{ width:100%; height:auto; aspect-ratio:21/6; object-fit:cover; object-position:50% 68%; }
@media (max-width:700px){ .esm-band img{ height:auto; aspect-ratio:16/9; } }

/* Bloco de identidade: gema + leitura da assinatura */
.esm-identity{
  margin-top:clamp(2.4rem,5vw,4rem);
  display:grid; grid-template-columns:auto minmax(0,62ch); gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start; justify-content:start;
}
@media (max-width:700px){ .esm-identity{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   PROXIMIDADE — grelha dos 6 motions aprovados
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Proximidade — lista de ícone e tempo
   Substituiu seis iframes com animações: a esta escala o que se lê é o nome e
   os minutos, e o ícone serve só para distinguir à vista.
   -------------------------------------------------------------------------- */
.prox-lista{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(1.5rem,4vw,3.5rem);
}
.prox-item{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.3rem 0;
  border-top:1px solid rgba(137,227,210,.16);
}
.prox-ico{
  flex:none; width:30px; height:30px;
  color:var(--esm-400);
  opacity:.9;
}
.prox-ico svg{ width:100%; height:100%; }
.prox-txt{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.prox-item .name{
  font-family:var(--font-sans); text-transform:uppercase;
  letter-spacing:.11em; font-size:.68rem; line-height:1.4;
  color:rgba(246,243,236,.7);
}
.prox-item .time{
  font-family:var(--font-sans); font-weight:600; font-size:1.25rem;
  line-height:1; color:var(--stone-100);
}
.prox-item .time .modo{
  font-weight:400; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--esm-300); margin-left:.45rem;
}
@media (max-width:900px){ .prox-lista{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .prox-lista{ grid-template-columns:1fr; } }


.esm-note{
  max-width:64ch; margin-top:1.6rem;
  padding:1.2rem 1.5rem; background:var(--stone-200); border-left:2px solid var(--esm-500);
}
.section-dark .esm-note, .section-graphite .esm-note{
  background:rgba(246,243,236,.05); border-left-color:var(--esm-400);
  color:rgba(246,243,236,.72);
}

/* Nota legal — imagens ilustrativas */
.esm-disclaimer{
  margin-top:1.4rem; max-width:70ch;
  font-size:.72rem; line-height:1.6; letter-spacing:.02em;
  color:rgba(246,243,236,.42);
}

/* Reaproveita o padrão de CTA final já usado nas outras páginas */
.esm-cta{ position:relative; min-height:50vh; display:flex; align-items:center; overflow:hidden; }

/* Duo de imagens — lateral + cobertura */
.esm-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2.4rem,5vw,4rem); }
.esm-duo figure{ margin:0; }
.esm-duo img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:700px){ .esm-duo{ grid-template-columns:1fr; } }

/* A nav marca a página ativa com o verde do projeto, não com o teal da marca */
.page-esmeralda .nav-links a.is-active{ color:var(--esm-400); }
.page-esmeralda .nav-links a.is-active::after{ background:var(--esm-400); }
.page-esmeralda .nav-sub a.is-active .p-name{ color:var(--esm-400); }
.page-esmeralda .nav-sub .p-state{ color:var(--esm-400); }

/* --------------------------------------------------------------------------
   02.1 — PLANTAS
   Desenhos de linha sobre folha branca, numa secção clara: o traço é preto e
   fino, e sobre os fundos escuros da página não se leria.
   -------------------------------------------------------------------------- */
.esm-pl-head{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.8rem,5vw,4rem); align-items:end;
}
.esm-pl-head .type-body{ max-width:46ch; padding-bottom:.35rem; }
@media (max-width:900px){
  .esm-pl-head{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
  .esm-pl-head .type-body{ max-width:none; padding-bottom:0; }
}

.esm-pl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.esm-pl{ margin:0; }
.esm-pl-folha{
  /* o mesmo creme que o SVG traz dentro, senão via-se a moldura branca */
  background:#f7f4ee;
  border:1px solid rgba(38,74,90,.16);
  padding:clamp(.9rem,2vw,1.6rem);
  transition:box-shadow .5s var(--ease-out);
}
.esm-pl:hover .esm-pl-folha{ box-shadow:0 20px 44px -26px rgba(12,18,20,.4); }
@media (hover:none){ .esm-pl:hover .esm-pl-folha{ box-shadow:none; } }
.esm-pl-folha img{ display:block; width:100%; height:auto; }
.esm-pl figcaption{
  margin-top:.9rem;
  display:flex; align-items:baseline; gap:.7rem;
  font-family:var(--font-sans); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--graphite-700);
}
.esm-pl figcaption .n{ color:var(--teal-700); }
.esm-plantas .esm-disclaimer{ color:var(--graphite-600); }

@media (max-width:1000px){ .esm-pl-grid{ grid-template-columns:1fr 1fr; row-gap:2.2rem; } }
@media (max-width:620px){ .esm-pl-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Estrutura alinhada com o Oliveira Plaza: narrativa, argumentos, tipologias,
   explorador de apartamentos, vistas isoladas, faixa de vídeo e mapa.
   ========================================================================== */
.page-esmeralda .text-esm{ color:var(--esm-600); }
.page-esmeralda .section-dark .text-esm,
.page-esmeralda .section-graphite .text-esm,
.page-esmeralda .on-dark .text-esm{ color:var(--esm-300); }
.page-esmeralda .usp-num,
.page-esmeralda .typ-tag,
.page-esmeralda .n-num{ color:var(--esm-500); }
.page-esmeralda .stage-rail li.is-on .b,
.page-esmeralda .stage-rail li.is-now .b{ background:var(--esm-400); }
.page-esmeralda .marquee{ background:var(--esm-900); color:var(--stone-100); border-color:rgba(49,200,149,.25); }
.page-esmeralda .marquee span::after{ color:var(--esm-400); opacity:.7; }

/* Octógono pequeno: botões e miniaturas com o talhe da gema */
.esm-cut-sm{ --f:11px; clip-path:polygon(var(--f) 0,calc(100% - var(--f)) 0,100% var(--f),100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,var(--f) 100%,0 calc(100% - var(--f)),0 var(--f)); }

/* ---- 04.1 · Onde vai viver --------------------------------------------- */
.esm-apt{ background:radial-gradient(ellipse 60% 70% at 72% 52%, #0f3a30 0%, #0a1d19 50%, var(--ink) 80%); }
.esm-apt-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:center; margin-top:2rem; }
.esm-floors{ list-style:none; margin:0; padding:0; }
.esm-floors li{ position:relative; display:grid; grid-template-columns:9.5rem 1fr; align-items:center; padding:.7rem 0 .7rem 1.1rem; border-top:1px solid rgba(154,234,205,.12); transition:background .5s var(--ease-out); }
.esm-floors li:last-child{ border-bottom:1px solid rgba(154,234,205,.12); }
.esm-floors li::before{ content:""; position:absolute; left:0; top:50%; width:2px; height:0; background:var(--esm-400); transition:height .5s var(--ease-out), top .5s var(--ease-out); }
.esm-floors li.cur{ background:linear-gradient(90deg, rgba(49,200,149,.12), rgba(49,200,149,0) 80%); }
.esm-floors li.cur::before{ top:0; height:100%; }
.esm-floors .fn{ display:flex; align-items:baseline; gap:.6rem; font:500 .72rem/1 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(246,243,236,.5); }
.esm-floors .fn i{ font:400 1.6rem/1 var(--font-serif); font-style:normal; letter-spacing:0; color:rgba(246,243,236,.8); }
.esm-floors li.cur .fn{ color:var(--esm-300); }
.esm-floors .ch{ display:flex; flex-wrap:wrap; gap:.5rem; }
.esm-floors button{ width:2.9rem; height:2.9rem; border:0; padding:0; cursor:pointer; font:400 1.15rem/1 var(--font-serif); color:var(--esm-300); background:rgba(154,234,205,.09); transition:background .35s, color .35s, transform .35s var(--ease-out); }
.esm-floors button:hover{ background:rgba(154,234,205,.22); color:var(--stone-100); transform:translateY(-2px); }
.esm-floors button.on{ background:linear-gradient(135deg, #7ff0c8 0%, var(--esm-400) 60%, var(--esm-500) 100%); color:var(--ink); }
.esm-floors button:focus-visible{ outline:2px solid var(--esm-300); outline-offset:3px; }
.esm-apt-view{ position:relative; }
.esm-apt-stage{ position:relative; aspect-ratio:1100/1214; }
.esm-apt-stage::before{ content:""; position:absolute; left:6%; right:6%; top:14%; bottom:2%; border-radius:50%; background:radial-gradient(closest-side, rgba(49,200,149,.16), rgba(49,200,149,0)); }
.esm-apt-stage .fl{ position:absolute; inset:0; opacity:0; transform:scale(.97) translateY(10px); transition:opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.esm-apt-stage .fl.on{ opacity:1; transform:none; }
.esm-apt-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.esm-apt-stage .a,.esm-apt-stage .ln{ opacity:0; transition:opacity .5s var(--ease-out), transform .8s var(--ease-out); }
.esm-apt-stage .a{ transform:translateY(10px); }
.esm-apt-stage .a.on,.esm-apt-stage .ln.on{ opacity:1; transform:none; }
.esm-apt-name{ margin-top:1rem; padding-top:1.1rem; border-top:1px solid rgba(154,234,205,.22); }
.esm-apt-name .type-label{ display:block; color:var(--esm-400); margin-bottom:.6rem; }
.esm-apt-name b{ font:400 clamp(1.6rem,2.6vw,2.4rem)/1.05 var(--font-serif); font-weight:400; color:var(--stone-100); }
.esm-apt-name b em{ color:var(--esm-300); }
.esm-apt .esm-disclaimer{ margin-top:2.5rem; }

/* ---- 04.2 · Cada casa, por inteiro ------------------------------------- */
.esm-vis{ background:radial-gradient(ellipse 60% 70% at 55% 45%, #12352d 0%, var(--graphite-800) 70%); }
.esm-vis-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.esm-vis-head .type-body{ max-width:38ch; color:rgba(246,243,236,.75); }
.esm-vis-hero{ position:relative; aspect-ratio:16/9.4; margin-top:1.5rem; }
.esm-vis-hero::before{ content:""; position:absolute; left:10%; right:10%; top:22%; bottom:0; border-radius:50%; background:radial-gradient(closest-side, rgba(49,200,149,.14), rgba(49,200,149,0)); }
.esm-vis-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:translateY(12px) scale(.985); transition:opacity .7s var(--ease-out), transform .9s var(--ease-out); filter:drop-shadow(0 28px 36px rgba(0,0,0,.4)); }
.esm-vis-hero img.on{ opacity:1; transform:none; }
.esm-vis-now{ margin-top:.5rem; }
.esm-vis-now .type-label{ display:block; color:var(--esm-400); margin-bottom:.5rem; }
.esm-vis-now b{ font:400 clamp(1.5rem,2.4vw,2.2rem)/1.05 var(--font-serif); color:var(--stone-100); }
.esm-vis-now b em{ color:var(--esm-300); }
.esm-vis-thumbs{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1rem; margin-top:1.6rem; }
.esm-vis-thumbs button{ position:relative; aspect-ratio:16/10; border:0; padding:0; cursor:pointer; background:rgba(154,234,205,.07); transition:background .4s, transform .4s var(--ease-out); }
.esm-vis-thumbs button:hover{ background:rgba(154,234,205,.15); transform:translateY(-3px); }
.esm-vis-thumbs button.on{ background:rgba(49,200,149,.22); }
.esm-vis-thumbs button.on::after{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:2px; background:var(--esm-400); }
.esm-vis-thumbs img{ position:absolute; left:8%; right:8%; top:6%; width:84%; height:66%; object-fit:contain; }
.esm-vis-thumbs .type-label{ position:absolute; left:0; right:0; bottom:.8rem; text-align:center; color:rgba(246,243,236,.7); font-size:.62rem; }
.esm-vis-thumbs button.on .type-label{ color:var(--esm-300); }
.esm-vis-thumbs button:focus-visible{ outline:2px solid var(--esm-300); outline-offset:3px; }

/* ---- Telemóvel --------------------------------------------------------- */
@media (max-width:900px){
  /* título, texto, maquete e só depois os pisos: quem toca num botão vê a
     maquete logo acima a mudar */
  .esm-apt-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .esm-apt-side{ display:contents; }
  .esm-apt-side h2{ order:1; }
  .esm-apt-side > p{ order:2; margin-top:0; }
  .esm-apt-view{ order:3; }
  .esm-floors{ order:4; margin-top:0; }
  .esm-apt-stage{ max-width:520px; margin:0 auto; }
}
@media (max-width:760px){
  .esm-floors li{ grid-template-columns:6.5rem 1fr; padding-left:.8rem; }
  .esm-floors button{ width:2.6rem; height:2.6rem; }
  .esm-vis-hero{ aspect-ratio:4/3.4; }
  .esm-vis-thumbs{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:.75rem; padding-bottom:.4rem; }
  .esm-vis-thumbs button{ flex:0 0 42%; scroll-snap-align:start; }
}

/* A narrativa da Esmeralda tem quatro etapas, não seis */
@media (max-width:760px){
  .page-esmeralda .n-num::after{ content:' / 04'; }
}