/* ==========================================================================
   Ricardo Pina Arquitetos
   Sistema visual aprovado (medido no site Divi original) + tema claro/escuro
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:        #ffffff;
  --titulo:    #333333;
  --texto:     #666666;
  --menu:      rgba(0, 0, 0, .6);
  --link:      #0c77c0;   /* azul do Divi escurecido: 2,75:1 -> 4,76:1, passa WCAG AA */
  --linha:     rgba(0, 0, 0, .13);
  --sobrepor:  rgba(255, 255, 255, .9);
  --campo-bg:  #ffffff;

  --linha-max:  1080px;   /* .et_pb_row max-width */
  --linha-larg: 80%;      /* .et_pb_row width     */
  --goteira:    5.5%;     /* gutter Divi 3        */
  --sec-pad:    54px;     /* .et_pb_section padding vertical */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0c0c0c;
  --titulo:    #ebebeb;
  --texto:     #a8a8a8;
  --menu:      rgba(255, 255, 255, .66);
  --link:      #6cbcf7;
  --linha:     rgba(255, 255, 255, .14);
  --sobrepor:  rgba(12, 12, 12, .9);
  --campo-bg:  #141414;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        #0c0c0c;
    --titulo:    #ebebeb;
    --texto:     #a8a8a8;
    --menu:      rgba(255, 255, 255, .66);
    --link:      #6cbcf7;
    --linha:     rgba(255, 255, 255, .14);
    --sobrepor:  rgba(12, 12, 12, .9);
    --campo-bg:  #141414;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7em;
  color: var(--texto);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0; padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding-bottom: 10px;
  color: var(--titulo);
  font-weight: 500;
  line-height: 1em;
}
h3 { font-size: 22px; line-height: 22px; }
/* h1/h2 mantêm o tamanho visual aprovado (18px) — a mudança é só semântica */
h1, h2, h4 { font-size: 18px; line-height: 18px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- grelha (section / row / column do Divi) --------------------------- */
.seccao { position: relative; padding: var(--sec-pad) 0; background-color: var(--bg); }

.linha {
  width: var(--linha-larg);
  max-width: var(--linha-max);
  margin: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.coluna { position: relative; }

/* larguras Divi com gutter 3 */
.col-1-1 { width: 100%; }
.col-1-2 { width: 47.25%; }
.col-1-3 { width: 29.6667%; }
.col-2-5 { width: 36.75%; }
.col-3-5 { width: 57.75%; }

.coluna + .coluna { margin-left: var(--goteira); }

/* --- cabeçalho: logótipo + menu ---------------------------------------- */
/* 60px medidos no original entre a linha do logo e a do menu */
.logo-linha { margin-bottom: 60px; }
.logo img { display: block; width: 100%; height: auto; }
/* duas versões do logótipo (tinta preta e tinta branca), trocadas pelo tema */
.logo img.logo-escuro { display: none; }
:root[data-theme="dark"] .logo img.logo-claro  { display: none; }
:root[data-theme="dark"] .logo img.logo-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img.logo-claro  { display: none; }
  :root:not([data-theme="light"]) .logo img.logo-escuro { display: block; }
}

.menu {
  background-color: var(--bg);
  width: 100%;
  padding-top: 8px;   /* medido no original: o link assenta 8px abaixo do topo da linha */
}
.menu-interior { display: flex; justify-content: center; align-items: center; position: relative; }

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  line-height: 14px;
}
.menu li { padding-right: 22px; }
.menu li:last-child { padding-right: 0; }
.menu a {
  color: var(--menu);
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  padding-bottom: 8px;
  display: block;
  text-decoration: none;
}
.menu a:hover { opacity: .7; text-decoration: none; }
.menu a[aria-current="page"] { color: var(--titulo); }

/* botão de tema — encostado à direita, fora do fluxo do menu centrado */
.tema-btn {
  position: absolute;
  right: 0;
  top: -4px;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--menu);
  line-height: 0;
}
.tema-btn:hover { color: var(--link); }
.tema-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
:root[data-theme="dark"] .tema-sol { display: none; }
.tema-lua { display: none; }
:root[data-theme="dark"] .tema-lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-sol { display: none; }
  :root:not([data-theme="light"]) .tema-lua { display: block; }
}

/* hambúrguer — escondido em desktop */
.menu-mobile-btn {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--link);
  font-size: 32px;
  line-height: 1;
}

/* --- cartões da home ---------------------------------------------------- */
.cartao { display: block; color: inherit; text-decoration: none; }
.cartao:hover { text-decoration: none; }
.cartao-img { margin-bottom: 30px; line-height: 0; }
.cartao-img img { width: 100%; display: block; transition: opacity .3s ease; }
.cartao:hover .cartao-img img { opacity: .85; }
.cartao h2 { font-family: "Open Sans", Arial, sans-serif; }
.cartao p { padding-bottom: 0; }

/* --- linha de navegação (migalhas) -------------------------------------- */
.migalhas {
  margin-bottom: 30px;
  font-size: 12px;
  color: var(--texto);
}
.migalhas a { color: var(--texto); }
.migalhas a:hover { color: var(--link); }
.migalhas .sep { padding: 0 6px; opacity: .55; }
.migalhas [aria-current="page"] { color: var(--titulo); }


/* --- página de projecto -------------------------------------------------- */
.projeto-hero { margin-bottom: 30px; line-height: 0; }
.projeto-hero img { width: 100%; display: block; }

.bloco-texto { margin-bottom: 30px; }
.bloco-texto h1,
.bloco-texto h2 { font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif; }
.bloco-texto sup { font-size: .7em; vertical-align: super; line-height: 0; }

.contexto { font-style: italic; }

/* --- galeria ------------------------------------------------------------ */
.galeria {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: 30px;
}
.galeria a { display: block; position: relative; line-height: 0; }
.galeria img { width: 100%; display: block; }

.galeria .sobreposicao {
  position: absolute;
  inset: 0;
  background: var(--sobrepor);
  border: 1px solid var(--linha);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.galeria a:hover .sobreposicao,
.galeria a:focus-visible .sobreposicao { opacity: 1; }

/* --- desenhos e esquiços empilhados ------------------------------------- */
.desenho { margin-bottom: 30px; line-height: 0; }
.desenho img { width: 100%; display: block; }
.desenho:last-child { margin-bottom: 0; }

/* --- gabinete ----------------------------------------------------------- */
.gabinete-fotos img { width: 100%; display: block; margin-bottom: 30px; }
.gabinete-fotos img:last-child { margin-bottom: 0; }

/* --- listas de projectos ------------------------------------------------
   Cada bloco corresponde a um módulo de texto do Divi: 30px de margem em baixo. */
.lista-titulo,
.lista-projetos { margin-bottom: 30px; }

/* --- contactos ---------------------------------------------------------- */
.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linha);
  color: var(--texto);
  padding: 10px 18px;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .3s, color .3s;
}
.botao-whatsapp:hover { border-color: var(--link); color: var(--link); text-decoration: none; }
.botao-whatsapp svg { width: 18px; height: 18px; fill: currentColor; }

.form-contacto label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--texto);
}
.form-contacto input,
.form-contacto textarea {
  width: 100%;
  border: 1px solid var(--linha);
  background: var(--campo-bg);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  margin-bottom: 20px;
  border-radius: 0;
}
.form-contacto input:focus,
.form-contacto textarea:focus { outline: none; border-color: var(--link); }
.form-contacto textarea { min-height: 160px; resize: vertical; }
.form-contacto button {
  border: 1px solid var(--linha);
  background: var(--campo-bg);
  color: var(--texto);
  padding: 10px 24px;
  font-family: inherit;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.form-contacto button:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.form-contacto button:disabled { opacity: .5; cursor: default; }

/* honeypot — invisível para pessoas, apetecível para robôs */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-estado { margin-top: 14px; min-height: 1.7em; }
.form-estado.erro { color: #d14545; }
:root[data-theme="dark"] .form-estado.erro { color: #ef7676; }
.form-estado.ok { color: #2e8b57; }
:root[data-theme="dark"] .form-estado.ok { color: #6ac48e; }

.nota-form { font-size: 12px; opacity: .75; }

.mapa { margin-top: 30px; line-height: 0; }
.mapa iframe { width: 100%; height: 360px; border: 0; display: block; }

/* --- rodapé ------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 30px 0 54px;
  font-size: 12px;
  line-height: 1.9;
}
.rodape p { padding-bottom: .6em; }
.rodape p:last-child { padding-bottom: 0; }

.rodape-social { display: flex; gap: 14px; align-items: center; }
.rodape-social a { color: var(--texto); line-height: 0; }
.rodape-social a:hover { color: var(--link); }
.rodape-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* --- lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, .94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox.aberto { display: flex; }
.lightbox picture { display: block; }
.lightbox img { max-width: 90vw; max-height: 88vh; display: block; }
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  padding: 10px 18px;
}
.lightbox button:hover { opacity: 1; }
.lb-fechar { top: 8px; right: 10px; }
.lb-ant { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-seg { right: 6px; top: 50%; transform: translateY(-50%); }
.lb-contador {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  color: #fff; font-size: 13px; opacity: .7;
}

/* ==========================================================================
   Tablet — breakpoint do Divi: 980px
   ========================================================================== */
@media (max-width: 980px) {
  /* O cabeçalho encolhe: os 54/60px do desktop deixam demasiado ar num ecrã
     estreito. O padding de baixo do cabeçalho sai, senão soma-se ao de cima
     do conteúdo e o vão fica a dobrar. */
  .seccao { padding: 34px 0; }
  .seccao-cabecalho { padding-bottom: 0; }
  .logo-linha { margin-bottom: 26px; }
  .migalhas { margin-bottom: 20px; }

  /* hambúrguer e botão de tema centrados, como o logótipo */
  .menu-interior { justify-content: center; }
  .menu-mobile-btn { display: block; font-size: 26px; }
  .tema-btn { position: static; margin-left: 18px; }

  /* o conteúdo arranca logo a seguir ao menu */
  main.seccao { padding-top: 22px; }

  .menu nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-top: 3px solid var(--link);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    z-index: 100;
  }
  .menu { position: relative; }
  .menu nav.aberto { display: block; }
  .menu nav ul { display: block; padding: 5% 0; }
  .menu nav li { padding: 0 5%; text-align: left; }
  .menu nav a { padding: 10px 0; }

  .galeria { grid-template-columns: repeat(3, 1fr); }

  .col-3-5, .col-2-5 { width: 100%; }
  .col-3-5 + .coluna, .col-2-5 + .coluna { margin-left: 0; margin-top: 30px; }
}

/* ==========================================================================
   Telemóvel — breakpoint do Divi: 767px
   ========================================================================== */
@media (max-width: 767px) {
  .seccao { padding: 26px 0; }
  .seccao-cabecalho { padding-bottom: 0; }
  main.seccao { padding-top: 14px; }
  .logo-linha { margin-bottom: 18px; }
  .migalhas { margin-bottom: 14px; }
  .menu-mobile-btn { font-size: 22px; }
  .tema-btn { margin-left: 14px; }

  .galeria { grid-template-columns: 1fr; }
  .coluna { width: 100%; }
  .coluna + .coluna { margin-left: 0; margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}