/* Páginas institucionais — A Definição / Investir / Contactos */

.page-hero{ min-height:78vh; }
.page-hero .hero-content{ padding-bottom:clamp(3.5rem,8vw,6rem); }

/* Method grid (A Definição — 5 cols on large) */
.method-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gutter); }
.method-card{ padding-top:1.4rem; border-top:1px solid rgba(38,74,90,.25); }
.method-card h3{ margin:1.4rem 0 .8rem; }
@media (max-width:1100px){ .method-grid{ grid-template-columns:repeat(3,1fr); row-gap:2.4rem; } }
@media (max-width:700px){ .method-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .method-grid{ grid-template-columns:1fr; } }

/* Process steps (horizontal numbered) */
.process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); }
.process-num{ display:block; font-size:clamp(2rem,4vw,3rem); color:var(--teal-300); margin-bottom:1.2rem; }
.process-step{ position:relative; padding-top:1.4rem; border-top:1px solid rgba(38,74,90,.25); }
.process-step h3{ margin-bottom:.7rem; }
@media (max-width:900px){ .process-steps{ grid-template-columns:1fr 1fr; row-gap:2.4rem; } }
@media (max-width:520px){ .process-steps{ grid-template-columns:1fr; } }

/* Disclaimer */
.disclaimer{ max-width:80ch; margin-inline:auto; text-align:center; padding:2rem 0; }
.disclaimer p{ font-size:.85rem; color:var(--graphite-600); }

/* ============================ CONTACTOS ============================ */
.contact-hero{ padding-top:clamp(8rem,14vw,11rem); }
.contact-hero-layout{ display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:var(--gutter); }
.contact-logo-anim{ justify-self:center; width:min(60%, 320px); }
.contact-logo-anim video{ width:100%; height:auto; mix-blend-mode:screen; } /* fundo preto do WebM some no fundo escuro, também no Safari */
@media (max-width:860px){ .contact-hero-layout{ grid-template-columns:1fr; } .contact-logo-anim{ width:min(50%,220px); margin-top:1.5rem; } }

.contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,6vw,5rem); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info{ display:flex; flex-direction:column; gap:2.2rem; }
.ci-block .type-label{ display:block; margin-bottom:.5rem; }
.ci-link{ display:inline-block; }
.ci-link:hover{ color:var(--teal-700); }

.contact-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.contact-form .field{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.contact-form label{ font-family:var(--font-sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--graphite-600); }
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:var(--font-sans); font-size:.95rem; padding:.85em 1em;
  border:1px solid rgba(38,74,90,.3); background:var(--stone-100); color:var(--ink);
  border-radius:1px; transition:border-color var(--dur-fast);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(94,207,180,.18);
}
.contact-form textarea{ resize:vertical; }
.form-note{ max-width:48ch; font-size:.82rem; }
@media (max-width:560px){ .contact-form .field-row{ grid-template-columns:1fr; } }

/* Validation states */
.field-error{
  display:none; font-size:.78rem; color:var(--terracotta-dim);
}
.contact-form input.has-error, .contact-form textarea.has-error{
  border-color:var(--terracotta-dim); box-shadow:0 0 0 3px rgba(185,96,62,.12);
}
.contact-form input.has-error ~ .field-error,
.contact-form textarea.has-error ~ .field-error{ display:block; }

/* Armadilha para robôs. Fora do ecrã em vez de display:none, porque há robôs
   que ignoram campos escondidos — mas com tabindex -1 e aria-hidden no HTML,
   para que teclado e leitor de ecrã nunca lhe cheguem. */
.field-trap{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* Consentimento RGPD */
.field-consent{ margin-top:.4rem; }
.consent-label{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  text-transform:none; letter-spacing:0; font-size:.86rem; line-height:1.5;
  color:var(--graphite-600); cursor:pointer;
}
.consent-label input[type="checkbox"]{
  width:1.05em; height:1.05em; margin-top:.15em; padding:0;
  accent-color:var(--teal-600); cursor:pointer;
}
.consent-label input[type="checkbox"]:focus-visible{
  outline:2px solid var(--teal-500); outline-offset:2px;
}
.field-consent input.has-error{ outline:2px solid var(--terracotta-dim); outline-offset:2px; }
.field-consent:has(input.has-error) .field-error{ display:block; }

/* Success confirmation */
.form-success{
  display:none;
  margin-top:1.6rem; padding:1.4rem 1.6rem;
  background:var(--stone-200); border-left:2px solid var(--teal-500);
}
.form-success.is-visible{ display:block; animation:fadeUp .5s var(--ease-out); }

/* Falha no envio: o visitante nunca fica sem caminho para nos chegar. */
.form-fallback{
  display:none;
  margin-top:1.6rem; padding:1.4rem 1.6rem;
  background:var(--stone-200); border-left:2px solid var(--terracotta-dim);
}
.form-fallback.is-visible{ display:block; animation:fadeUp .5s var(--ease-out); }
.form-fallback-acoes{ display:flex; flex-wrap:wrap; gap:.8rem; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Mapa (partilhado: Oliveira Plaza + Contactos) */
.map-block{ display:grid; grid-template-columns:1.3fr .7fr; gap:var(--gutter); align-items:center; }
.map-embed{ aspect-ratio:4/3; overflow:hidden; filter:grayscale(.25) contrast(1.05); }
.map-embed iframe{ width:100%; height:100%; border:0; }
@media (max-width:900px){ .map-block{ grid-template-columns:1fr; } }

/* A banda tem o aspeto exato da imagem: sem recorte, o marcador do lote
   assenta sempre no mesmo ponto da fotografia. */
.location-strip{ position:relative; aspect-ratio:1350/600; overflow:hidden; background:var(--ink); --accent:var(--teal-400); }
.ls-media{ position:absolute; inset:0; margin:0; }
.ls-media img{ width:100%; height:100%; object-fit:cover; }

/* Em ecrãs estreitos a fotografia não é recortada nem sobreposta: o texto
   desce para baixo dela, onde há espaço para o ler. */
@media (max-width:700px){
  .location-strip{ aspect-ratio:auto; }
  .ls-media{ position:relative; }
  .ls-media img{ height:auto; aspect-ratio:1350/600; }
  .ls-scrim{ display:none; }
  .ls-content{ height:auto; padding-top:2rem; }
}
.ls-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,18,20,.85), rgba(12,18,20,.25)); }
.ls-content{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:3rem; }
.ls-content .type-editorial{ margin-top:.6rem; max-width:32ch; }

/* ============================ ÍNDICE DE PROJETOS ============================
   Dois projetos, tratamento idêntico: mesma grelha, mesmo peso, mesmo formato.
   O que os distingue é o estado e a cor de acento, não a hierarquia.
   ========================================================================= */

/* Hero em díptico — a página dos projetos mostra os dois, não um deles */
.proj-hero-split{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.proj-hero-split img{ width:100%; height:100%; object-fit:cover; }

.proj-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,3.5vw,3.2rem);
}
@media (max-width:860px){ .proj-grid{ grid-template-columns:1fr; row-gap:clamp(3rem,7vw,4.5rem); } }

.proj-card{ --accent:var(--teal-400); display:flex; flex-direction:column; }
.proj-card--esmeralda{ --accent:#31c895; }

.proj-media{ position:relative; display:block; overflow:hidden; background:var(--graphite-900); }
.proj-media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .9s var(--ease-out); }
.proj-card:hover .proj-media img{ transform:scale(1.045); }
@media (hover:none){ .proj-card:hover .proj-media img{ transform:none; } }

.proj-state{
  position:absolute; left:0; bottom:0; z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1.1em;
  background:rgba(12,18,20,.82); backdrop-filter:blur(8px);
  font-family:var(--font-sans); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--stone-100);
}
.proj-state::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }

.proj-body{ padding-top:1.6rem; display:flex; flex-direction:column; flex:1; }
.proj-body h2{ margin-bottom:.7rem; }
.proj-tagline{ color:var(--accent); max-width:26ch; }
.section-dark .proj-tagline, .section-graphite .proj-tagline{ color:var(--accent); }

.proj-facts{ margin:clamp(1.4rem,3vw,2rem) 0 0; display:flex; flex-wrap:wrap; gap:.5rem .7rem; }
.proj-facts li{
  font-family:var(--font-sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.11em;
  padding:.45em .9em; border:1px solid rgba(246,243,236,.18); color:rgba(246,243,236,.72);
}
.proj-link{
  margin-top:auto; padding-top:clamp(1.6rem,3vw,2.2rem);
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-sans); font-size:.76rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent);
}
.proj-link svg{ width:20px; height:10px; transition:transform var(--dur-fast) var(--ease-out); }
.proj-card:hover .proj-link svg{ transform:translateX(5px); }

/* --------------------------------------------------------------------------
   Projetos — dois modos de fazer cidade
   -------------------------------------------------------------------------- */
.modos-head{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(1.8rem,5vw,4rem); align-items:end;
}
.modos-head .type-body{ max-width:48ch; padding-bottom:.35rem; }
@media (max-width:900px){
  .modos-head{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
  .modos-head .type-body{ max-width:none; padding-bottom:0; }
}
.modos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.modo{ padding-top:1.4rem; border-top:1px solid rgba(38,74,90,.25); }
.modo-num{ display:block; color:var(--teal-700); font-size:.8rem; margin-bottom:1.2rem; }
.modo h3{ margin-bottom:.9rem; }
.modo .proj-link{ margin-top:1.4rem; }
@media (max-width:760px){ .modos{ grid-template-columns:1fr; row-gap:2.4rem; } }