/* =========================================================
   TROCOS & IDEIAS — FOLHA DE ESTILOS PRINCIPAL
   Organizado por secções. Cores e fontes centralizadas em
   variáveis CSS no topo — para trocar fontes/cores no futuro,
   basta editar aqui.
   ========================================================= */

:root{
  /* Cores de marca */
  --c-cream:        #f8f4ef;
  --c-cream-dark:   #efe8df;
  --c-gray:         #e7e4e1;
  --c-terracota:    #a65437;
  --c-terracota-lt: #a5664f;
  --c-terracota-dk: #7e3f28;
  --c-text:         #2c2420;
  --c-text-soft:    #5c5049;
  --c-white:        #ffffff;

  /* Tipografia */
  --f-display: 'Cormorant Garamond', 'Georgia', serif;
  --f-serif:   'Libre Baskerville', 'Georgia', serif;
  --f-body:    'Open Sans', -apple-system, sans-serif;
  --f-script:  'Alex Brush', cursive;

  /* Espaçamentos */
  --space-section: clamp(48px, 6vw, 84px);
  --container-w: 1240px;
  --radius: 3px;
}

/* ---------- RESET BÁSICO ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-cream);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* O overflow-x:hidden estava no html/body para evitar scroll horizontal
   provocado por elementos decorativos (ex: a moldura do herói, que sai
   propositadamente para fora da imagem). Mas overflow-x:hidden no body
   é precisamente o que faz o Safari do iPhone/iPad "partir" elementos
   position:fixed (o menu mobile, a barra de cookies) — em vez de ficarem
   fixos ao ecrã, passam a mover-se com a página, e por isso o menu
   parecia ficar escondido atrás do herói ao abrir. Passa-se o
   overflow-x:hidden para este wrapper interno, que resolve o scroll
   horizontal sem quebrar os elementos fixos. */
.site-wrapper{ overflow-x: hidden; max-width: 100%; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
li{ list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--f-display); font-weight:600; margin:0 0 .5em; line-height:1.15; color: var(--c-text); }
p{ margin:0 0 1em; }

.container{ max-width: var(--container-w); margin:0 auto; padding: 0 32px; }
@media (max-width: 420px){ .container{ padding: 0 20px; } .site-logo img{ max-width: 200px !important; } }
.eyebrow{
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  color: var(--c-terracota);
  font-weight: 600;
  margin-bottom: 14px;
  display:block;
}
.section{ padding: var(--space-section) 0; }
.section-alt{ background: var(--c-cream-dark); }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 15px 34px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-primary{ background: var(--c-terracota); color: var(--c-white); }
.btn-primary:hover{ background: var(--c-terracota-dk); }
.btn-outline{ background: transparent; border-color: var(--c-terracota); color: var(--c-terracota); }
.btn-outline:hover{ background: var(--c-terracota); color: var(--c-white); }
.btn-white-outline{ border-color: rgba(255,255,255,.5); color:#fff; }
.btn-white-outline:hover{ background:#fff; color: var(--c-terracota); border-color:#fff; }

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top:0; z-index: 9999;
  background: rgba(248,244,239,.92);
  border-bottom: 1px solid rgba(44,36,32,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap: 32px;
  height: 100px;
}
.site-logo{ flex: none; margin-top: 5px; }
.site-logo-link{ display:flex; align-items:center; gap: 14px; }
.site-logo img{ height: auto; width:auto; max-width:420px; max-height:80px; object-fit:contain; }
@media (min-width: 901px){
  /* Ajuste pedido apenas para a versão web — não se aplica a mobile/tablet. */
  .site-logo img{ margin-top: 7px; }
}
.site-logo-text{
  font-family: var(--f-display); font-size: 1.5rem; font-weight:600;
  color: var(--c-text); letter-spacing: .01em; white-space: nowrap;
}
.site-logo-text span{ color: var(--c-terracota); font-style: italic; }
@media (max-width: 480px){ .site-logo-text{ display:none; } }
.header-right{ display:flex; align-items:center; gap: 20px; margin-left:auto; }
.main-nav ul{ display:flex; gap: 40px; }
.menu-close{ display:none; }
.main-nav a{
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing:.1em;
  font-weight:600;
  color: var(--c-text);
  position: relative;
  padding: 6px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--c-terracota); transition: width .25s ease;
}
.main-nav a:hover::after, .main-nav .current-menu-item a::after{ width:100%; }
.header-right{ position:relative; }
.menu-toggle{ display:none; background:none; border:none; z-index:210; }
.menu-toggle span{ display:block; width:26px; height:2px; background: var(--c-text); margin:6px 0; }

@media (max-width: 900px){
  .header-right{ order:-1; margin-left:0; }
  .site-logo img{ max-width: 260px; }
  .menu-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid rgba(44,36,32,.15); border-radius:6px; flex:none;
  }
  .main-nav{
    position: fixed; inset:0; background: var(--c-cream); z-index:99999;
    transform: translateX(-100%); transition: transform .3s ease; padding: 90px 32px 40px;
    overflow-y:auto;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap:26px; }
  .menu-close{
    position:absolute; top:24px; left:32px; width:40px; height:40px; display:flex;
    align-items:center; justify-content:center; border:1px solid rgba(44,36,32,.15); border-radius:6px;
    background:transparent; font-size:22px; line-height:1; color:var(--c-text); cursor:pointer;
  }
}

/* ---------- HERO ---------- */
.hero{ padding: 40px 0 46px; }
.hero .container{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;
}
.hero-title{ font-size: clamp(2.4rem, 4.2vw, 3.6rem); margin-bottom: 26px; }
.hero-text{ font-size: 1.08rem; color: var(--c-text-soft); max-width: 480px; margin-bottom: 34px; }
.hero-media{ position:relative; }
.hero-media img{ width:100%; height: 560px; object-fit: cover; border-radius: var(--radius); }
.hero-media::before{
  content:''; position:absolute; top:22px; left:-22px; width:100%; height:100%;
  border: 1px solid var(--c-terracota); border-radius: var(--radius); z-index:-1;
}
@media (max-width: 900px){
  /* Herói em versão "banner editorial" compacta para mobile/tablet —
     a versão desktop (duas colunas) mantém-se inteiramente intacta;
     estas regras só se aplicam abaixo dos 900px. */
  .hero{ padding: 0 0 40px; }
  .hero .container{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    position:relative; min-height: 460px;
    padding: 0 20px;
  }
  .hero-media{
    position:absolute; inset:0;
    border-radius: var(--radius); overflow:hidden;
  }
  .hero-media::before{ display:none; }
  .hero-media img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius); }
  .hero-media::after{
    content:''; position:absolute; inset:0;
    background: rgba(166,84,55,.78);
  }
  .hero-content{
    position:relative; z-index:1;
    padding: 28px 4px;
    text-align: center;
  }
  .hero-content .eyebrow{ color: rgba(255,255,255,.85); }
  .hero-content .hero-title{ color:#fff; font-size: clamp(1.7rem, 6.5vw, 2.3rem); margin-bottom:14px; }
  .hero-content .hero-text{ color: rgba(255,255,255,.92); max-width:none; font-size:.98rem; margin-bottom:22px; }
  .hero-content .btn-primary{ background: transparent; border-color: rgba(255,255,255,.6); color:#fff; }
  .hero-content .btn-primary:hover{ background:#fff; color: var(--c-terracota); border-color:#fff; }
}

/* ---------- ABOUT (bloco único) ---------- */
.about-single{ max-width: 980px; margin: 0 auto; text-align:center; }
.about-title{ font-size: clamp(2rem, 3vw, 2.7rem); }
.about-title-oneline{ white-space: nowrap; font-size: clamp(1.5rem, 2.7vw, 2.5rem); margin-bottom: 50px; }
@media (max-width: 860px){ .about-title-oneline{ white-space: normal; } }
.about-values{ display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; text-align:left; }
.about-values-featured{ gap: 26px; text-align:center; }
.value-item{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.about-values-featured .value-item{
  align-items:center; background: var(--c-white); border-radius: var(--radius);
  border: 1px solid rgba(44,36,32,.08); padding: 44px 30px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-values-featured .value-item:hover{ transform: translateY(-8px); box-shadow: 0 28px 50px -24px rgba(44,36,32,.22); }
.value-icon{
  width:56px; height:56px; border-radius:50%; background: var(--c-cream-dark);
  color: var(--c-terracota); display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.about-values-featured .value-icon{
  width:84px; height:84px; background: var(--c-terracota); color:#fff; margin-bottom:22px;
}
.about-values-featured .value-icon svg{ width:34px; height:34px; }
.value-item h4{ font-size:1.05rem; margin-bottom:2px; }
.about-values-featured .value-item h4{ font-size:1.2rem; }
.value-item p{ color: var(--c-text-soft); font-size:.9rem; margin:0; }
.about-values-featured .value-item p{ font-size:.96rem; }
@media (max-width: 640px){ .about-values{ grid-template-columns: 1fr; } }

/* ---------- SERVICES (ícone + título + descrição, versão compacta) ---------- */
.services-head{ text-align:center; max-width: 640px; margin: 0 auto 40px; }
.services-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; position:relative; }
.service-row{
  position:relative; padding: 6px 26px 18px; text-align:center;
  border-right: 1px solid rgba(44,36,32,.12);
  display:flex; flex-direction:column; align-items:center;
}
.services-list .service-row:nth-child(3n){ border-right:none; }
.services-list .service-row:nth-child(-n+3){ border-bottom: 1px solid rgba(44,36,32,.12); padding-bottom:22px; }
.services-list .service-row:nth-child(n+4){ padding-top:22px; }
.service-icon{
  position:relative; z-index:1; flex:none; width:54px; height:54px; border-radius:50%;
  background: var(--c-terracota); color:#fff; display:flex; align-items:center; justify-content:center;
  margin: 14px 0 14px;
}
.service-icon svg{ width:24px; height:24px; }
.service-row-content{ position:relative; z-index:1; }
.service-row-content h3{ font-size:1.05rem; margin-bottom:6px; }
.service-row-content p{ color: var(--c-text-soft); font-size:.86rem; line-height:1.5; margin:0; }
.services-cta{ text-align:center; margin-top: 30px; }
@media (max-width: 900px){
  .services-list{ grid-template-columns: 1fr; }
  .service-row{ border-right:none; border-bottom: 1px solid rgba(44,36,32,.12); padding: 22px 20px; }
  .services-list .service-row:last-child{ border-bottom:none; }
}

/* ---------- STATS ---------- */
.stats{ background: var(--c-terracota); color: var(--c-white); padding: var(--space-section) 0; position:relative; overflow:hidden; }
.stats-motion{
  /* Riscas fixas (sem animação) por omissão — é o comportamento usado
     em mobile/tablet, onde a versão animada tinha o bug das linhas a
     desaparecer. A partir de 901px (versão web) a regra mais abaixo
     volta a ligar a animação original. */
  position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 40px, transparent 40px 80px);
  pointer-events:none;
}
@media (min-width: 901px){
  /* Animação original reposta apenas para a versão web, a pedido —
     é a mesma técnica que já estava em produção antes destas correções. */
  .stats-motion{
    inset:-50% -20% auto -20%; height:220%;
    animation: statsDrift 16s linear infinite;
    will-change: transform;
  }
}
@keyframes statsDrift{ from{ transform: translateX(0); } to{ transform: translateX(-160px); } }
.stats-head{ position:relative; text-align:center; max-width: 560px; margin: 0 auto 54px; }
.stats-head h2{ color:#fff; }
.stats-grid{ position:relative; display:grid; grid-template-columns: repeat(3, 1fr); max-width: 700px; margin: 0 auto; justify-items:center; text-align:center; }
.stat-item{ text-align:center; padding: 0 20px; opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.stat-item.in-view{ opacity:1; transform:translateY(0); }
.stat-item:nth-child(2){ transition-delay:.1s; }
.stat-item:nth-child(3){ transition-delay:.2s; }
.stat-num{ font-family: var(--f-display); font-size: clamp(2.4rem,4vw,3.2rem); display:block; }
.stat-label{ font-size:.85rem; opacity:.85; margin-top:8px; }
@media (max-width: 900px){
  .stats-grid{ grid-template-columns: 1fr; row-gap: 36px; width:100%; box-sizing:border-box; }
}
.stats + .site-footer{ box-shadow: 0 -12px 30px -18px rgba(0,0,0,.35); }

/* ---------- NÚMEROS + TEXTO (página Sobre Nós) — quadrado à direita ---------- */
.stats-side-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.stats-side-text{ margin:0; max-width:none; }
.stats-side-box{
  position:relative; overflow:hidden; aspect-ratio: 5 / 4; max-width:560px; width:100%; margin-left:auto;
  background: var(--c-terracota); border-radius: var(--radius); color:#fff;
  padding: 44px; display:flex; flex-direction:column; justify-content:center;
}
.stats-side-box .stats-motion{
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.1) 0 44px, transparent 44px 88px);
}
@media (min-width: 901px){
  .stats-side-box .stats-motion{ inset: -50% -60% auto -60%; height:220%; }
}
.stats-side-head{ position:relative; text-align:center; margin-bottom:34px; }
.stats-side-head .eyebrow{ color: rgba(255,255,255,.75); justify-content:center; display:flex; }
.stats-side-head h2{ color:#fff; font-size:1.7rem; line-height:1.25; }
.stats-side-numbers{ position:relative; display:grid; grid-template-columns: repeat(3, 1fr); gap:32px 24px; justify-items:center; width:100%; box-sizing:border-box; }
.stats-side-numbers .stat-item{
  text-align:center; padding: 0 16px;
  opacity:0; transform:translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.stats-side-numbers .stat-item.in-view{ opacity:1; transform:translateY(0); }
.stats-side-numbers .stat-num{ font-family: var(--f-display); font-size:2.9rem; color:#fff; display:block; line-height:1; }
.stats-side-numbers .stat-label{ font-size:.86rem; color: rgba(255,255,255,.85); margin-top:8px; display:block; line-height:1.3; font-weight:600; }
@media (max-width: 480px){
  .stats-side-numbers{ grid-template-columns:1fr; gap:20px; width:100%; box-sizing:border-box; justify-items:center; }
  .stats-side-numbers .stat-item{ padding:0; }
  /* Com os números em 1 coluna a caixa fica mais alta — a aspect-ratio
     fixa (pensada para 3 colunas) deixava-a curta e, como tem
     overflow:hidden, cortava o 2º/3º número. Deixa a altura ajustar-se
     ao conteúdo. */
  .stats-side-box{ aspect-ratio: auto; padding: 36px 30px; }
}
@media (max-width: 860px){
  .stats-side-grid{ grid-template-columns:1fr; gap:36px; }
  .stats-side-box{ margin:0 auto; max-width:480px; }
}

/* ---------- CLIENTS CAROUSEL ---------- */
.clients-head{ text-align:center; margin-bottom: 50px; }
.clients-carousel{ display:flex; align-items:center; gap: 24px; }
.clients-track-wrap{ overflow:hidden; flex:1; }
.clients-track{ display:flex; gap: 40px; transition: transform .4s ease; align-items:center; }
.clients-track > *{ flex: none; width: 190px; height:130px; display:flex; align-items:center; justify-content:center; cursor:default; }
.clients-track a{ cursor:pointer; width:190px; height:130px; }
.clients-track img{ max-height: 120px; max-width:190px; width:auto; height:auto; object-fit:contain; filter: grayscale(1); opacity:.7; transition:.25s; }
/* Estes ajustes por logótipo (ficheiros com proporções muito diferentes
   entre si) só fazem sentido para o tamanho usado no desktop — como
   levam !important, estavam a vencer sempre as regras de mobile mais
   abaixo, e por isso a "a-renova"/"curated living" apareciam enormes
   nos ecrãs pequenos em vez de seguirem o tamanho uniforme do mobile. */
@media (min-width: 601px){
  .clients-track img[src*="a-renova"]{ max-height: 150px !important; max-width: 220px !important; }
  .clients-track img[src*="curated-living"]{ max-height: 60px !important; max-width: 150px !important; }
  .clients-track img[src*="fitness-bodys-realm"]{ max-height: 85px !important; max-width: 150px !important; }
  .clients-track img[src*="gestona"]{ max-height: 80px !important; max-width: 130px !important; }
  .clients-track img[src*="ht-energy"]{ max-height: 85px !important; max-width: 150px !important; }
  .clients-track img[src*="jb-adventure"]{ max-height: 80px !important; max-width: 140px !important; }
  .clients-track img[src*="luxen-global"]{ max-height: 80px !important; max-width: 140px !important; }
}
.clients-track img:hover{ filter:none; opacity:1; transform: scale(1.05); }
.clients-nav{ background: var(--c-white); border:1px solid var(--c-gray); width:48px; height:48px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }

@media (max-width: 600px){
  .clients-carousel{ gap: 8px; }
  .clients-nav{ width:32px; height:32px; flex-shrink:0; }
  .clients-track{ gap: 20px; }
  .clients-track > *{ width: 130px; height: 90px; }
  .clients-track a{ width: 130px; height: 90px; }
  .clients-track img{ max-height: 80px; max-width: 130px; }
}
@media (max-width: 420px){
  .clients-track > *{ width: 110px; height: 80px; }
  .clients-track a{ width: 110px; height: 80px; }
  .clients-track img{ max-height: 70px; max-width: 110px; }
}


/* ---------- CTA FINAL ---------- */
.cta-final{
  background: var(--c-terracota); color: var(--c-white);
  padding: 70px 0; position:relative; overflow:hidden;
}
.cta-motion{
  position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 44px, transparent 44px 88px);
  pointer-events:none;
}
@media (min-width: 901px){
  .cta-motion{ inset:-30% -20%; height:160%; animation: statsDrift 16s linear infinite; }
}
.cta-final .container{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-final h2{ color:#fff; font-size: clamp(1.2rem,2.6vw,2.1rem); margin:0; max-width:640px; white-space:nowrap; }
@media (max-width: 760px){ .cta-final h2{ white-space:normal; font-size:1.5rem; } }
.cta-final + .site-footer{ box-shadow: 0 -12px 30px -18px rgba(0,0,0,.35); }
.cta-final .btn{ flex:none; }
@media (max-width: 700px){ .cta-final .container{ justify-content:center; text-align:center; } }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--c-terracota-dk); color: rgba(255,255,255,.85); }
.footer-top{ padding-top: 76px; padding-bottom: 56px; display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; }
.footer-logo img{ height:auto; max-height:54px; max-width:280px; width:auto; margin-bottom: 12px; margin-left: -8px; }
.footer-about{ font-size:.92rem; line-height:1.7; max-width:320px; color: rgba(255,255,255,.7); }
.footer-social{ display:flex; gap:14px; margin-top:22px; }
.footer-social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:#fff; color: var(--c-terracota-dk); }
.footer-heading{ font-family: var(--f-body); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:#fff; margin-bottom:22px; font-weight:700; }
.footer-nav li{ margin-bottom:13px; }
.footer-nav a{ font-size:.94rem; color: rgba(255,255,255,.75); }
.footer-nav a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:12px; margin-bottom:16px; font-size:.92rem; color: rgba(255,255,255,.8); align-items:flex-start; }
.footer-contact li svg{ margin-top:3px; }
.footer-contact svg{ flex:none; margin-top:2px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top: 26px; padding-bottom: 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.82rem; color: rgba(255,255,255,.6); }
/* O ponto separador era um ::before com position:absolute colado à
   margem esquerda do próprio item — quando esse item calhava a ser o
   primeiro de uma linha (depois de quebrar em ecrãs estreitos), o
   ponto ficava sem qualquer folga em relação ao bordo do ecrã e
   parecia cortado. Passa a ser um separador normal, com margem sua
   própria, que nunca depende de onde a linha quebra. */
.footer-legal{ display:flex; flex-wrap:wrap; row-gap: 10px; column-gap: 0; }
.footer-legal li:not(:first-child)::before{ content:"•"; display:inline-block; margin: 0 14px; opacity:.6; }
.footer-legal a:hover{ color:#fff; }
@media (max-width: 900px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:520px;
  background: var(--c-white); border:1px solid var(--c-gray); border-radius: var(--radius);
  padding: 26px; box-shadow: 0 30px 60px -20px rgba(44,36,32,.3); z-index:999;
  transform: translateY(140%); transition: transform .5s ease;
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size:.88rem; color: var(--c-text-soft); margin-bottom:16px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions button{ padding:10px 18px; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; border-radius:var(--radius); border:1px solid var(--c-terracota); font-weight:600; }
.cookie-accept{ background:var(--c-terracota); color:#fff; border:none; }
.cookie-reject{ background:transparent; color:var(--c-terracota); }
.cookie-prefs{ background:transparent; color:var(--c-text-soft); border-color:var(--c-gray); }
.cookie-panel{ display:none; margin-top:16px; border-top:1px solid var(--c-gray); padding-top:16px; }
.cookie-panel.is-open{ display:block; }
.cookie-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:.85rem; }

/* ---------- PAGE HEADER (páginas internas) ---------- */
.page-header{ padding: 56px 0 10px; text-align:center; }
.page-header h1{ font-size: clamp(2.2rem,4vw,3rem); }
.page-header .eyebrow{ justify-content:center; display:flex; }
.breadcrumb{ font-size:.82rem; color: var(--c-text-soft); margin-top:10px; }
.page-header + .section{ padding-top: 14px; }
.page-header-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; text-align:left; }
.page-header-row h1{ margin:0; }
.newsletter-compact{
  display:flex; align-items:center; gap:3px; color: var(--c-terracota); font-size:.85rem; font-weight:600;
  flex:none;
}
.newsletter-compact-inner{ display:flex; align-items:center; gap:10px; }
.newsletter-compact-text{ color: var(--c-text-soft); font-weight:400; max-width:220px; line-height:1.3; }
.btn-sm{ padding:9px 16px; font-size:.72rem; }
@media (max-width: 700px){
  .page-header-row{ flex-direction:column; align-items:flex-start; text-align:left; }
  .page-header-row h1{ text-align:left; }
}

/* ---------- CONTENT GENERIC ---------- */
.entry-content{ max-width: 780px; margin:0 auto; font-size:1.05rem; }
.entry-content p, .about-page-text p, .stats-side-text p{ text-align: justify; text-align-last: left; }
@media (max-width: 600px){
  .entry-content p{ text-align: left; }
  /* .about-page-text e .stats-side-text (página Sobre Nós) têm sempre
     as classes .entry-content também — a regra acima apanhava-as e
     anulava o justificado. Reforça-se aqui para ficarem justificadas
     em mobile e tablet, tal como no desktop. */
  .about-page-text p, .stats-side-text p{ text-align: justify; text-align-last: left; }
  /* Dentro dos artigos de Notícias (.single-post, classe que o
     WordPress já adiciona automaticamente ao <body> nessas páginas),
     texto justificado também em mobile/tablet, a pedido — só aqui,
     as restantes páginas (Sobre Nós, Serviços, etc.) mantêm-se como
     estavam (alinhadas à esquerda em ecrãs pequenos). */
  .single-post .entry-content p{ text-align: justify; text-align-last: left; }
}
.entry-content p, .entry-content span, .entry-content li, .entry-content div,
.entry-content strong, .entry-content em, .entry-content a{ font-family: var(--f-body) !important; }
.about-page-text p, .about-page-text span, .about-page-text div{ font-family: var(--f-body) !important; }
.entry-content h2{ margin-top:1.6em; }
.entry-content a{ color: var(--c-terracota); text-decoration: underline; }
.entry-content p, .entry-content li, .entry-content span, .entry-content div, .entry-content strong, .entry-content em{
  font-family: var(--f-body) !important; font-size: inherit !important; color: inherit !important;
}
.page-media{ max-width: 960px; margin: 0 auto 50px; border-radius: var(--radius); overflow:hidden; }
.page-media img{ width:100%; display:block; }
.about-intro-section{ padding-bottom: 20px; }
.about-page-intro{ display:grid; grid-template-columns: 1fr 1.1fr; gap:60px; align-items:stretch; margin-bottom:20px; }
.about-page-media{
  position:relative; overflow:hidden; min-height: 100%;
}
.about-page-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-page-text-col{ display:flex; flex-direction:column; justify-content:center; }
.page-media-note{
  position:absolute; bottom:14px; left:14px; background:rgba(44,36,32,.75); color:#fff;
  font-size:.7rem; padding:5px 12px; border-radius: var(--radius);
}
.about-page-text{ margin:0; max-width:none; }
.about-values-section{ padding-top: 42px; padding-bottom: 10px; }
.about-values-section + .stats-side{ padding-top: 52px; }
.about-values-centered{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 900px; margin: 0 auto; text-align:center; }
.about-values-centered .value-item{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
.about-values-centered .value-icon{ flex:none; width:56px; height:56px; margin:0 auto; }
.about-values-centered .value-icon svg{ width:26px; height:26px; }
.about-values-centered h4{ font-size:1.05rem; margin-bottom:4px; }
.about-values-centered p{ font-size:.9rem; color: var(--c-text-soft); }
@media (max-width: 700px){ .about-values-centered{ grid-template-columns:1fr; gap:34px; } }
@media (max-width: 860px){ .about-page-intro{ grid-template-columns:1fr; gap:30px; } .about-page-media{ min-height:280px; } }

/* ---------- FORM CONTACTO ---------- */
.contact-wrap{ max-width: 720px; margin:0 auto; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-bottom:22px; }
@media (max-width: 560px){ .form-row{ grid-template-columns:1fr; gap:0; } }
.form-group{ margin-bottom:22px; }
.form-group label{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; font-weight:600; color: var(--c-text-soft); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:14px 16px; border:1px solid var(--c-gray); border-radius: var(--radius);
  font-family: var(--f-body); font-size:.95rem; background: var(--c-white);
}
.form-group textarea{ min-height:150px; resize:vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color: var(--c-terracota); }
.hp-field{ position:absolute !important; left:-9999px !important; top:-9999px !important; }
.form-note{ font-size:.82rem; color: var(--c-text-soft); margin-top:16px; }
.form-success{ background:#eef6ee; border:1px solid #bcdcbc; color:#2c5c2c; padding:18px 22px; border-radius:var(--radius); margin-bottom:24px; }
.form-error{ background:#fbeceb; border:1px solid #eebcb9; color:#7a2b26; padding:18px 22px; border-radius:var(--radius); margin-bottom:24px; }

/* ---------- BLOG — cartão com imagem e título sobrepostos, no mesmo
   estilo do destaque de Notícias da homepage: só se coloca a imagem,
   a data e o título aparecem sempre por cima, sem preparação extra. ---------- */
.posts-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
.post-card{ position:relative; display:block; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4 / 3; }
.post-card-img{ position:absolute; inset:0; }
.post-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.post-card:hover .post-card-img img{ transform: scale(1.06); }
.post-card-overlay{
  position:absolute; left:0; right:0; bottom:0; padding: 26px 24px;
  background: linear-gradient(to top, rgba(18,14,11,.92) 0%, rgba(18,14,11,.72) 45%, rgba(18,14,11,0) 100%);
}
.post-card-overlay .post-date{ color: rgba(255,255,255,.85); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:8px; }
/* Mesma fonte do título do artigo (Libre Baskerville) — consistência
   entre o título dentro da notícia e onde essa notícia é anunciada
   (esta listagem, e o destaque da homepage, mais abaixo). */
.post-card-overlay h3{ font-family: var(--f-serif); font-weight:700; color:#fff; font-size:1.15rem; line-height:1.3; margin-bottom:10px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.post-card-overlay .news-highlight-link{ color:#fff; }
@media (max-width: 900px){ .posts-grid{ grid-template-columns:1fr; } }

/* ---------- CABEÇALHO DO ARTIGO (página de uma notícia) — imagem a toda
   a largura do ecrã, com o título sobreposto por cima, tal como os
   cartões acima e o destaque da homepage. Sem imagem definida (nem
   Imagem do Artigo, nem Imagem Destacada), cai num cabeçalho simples,
   só com o título. ---------- */
.article-hero{ position:relative; overflow:hidden; }
.article-hero:not(.has-image){ padding: 56px 0 10px; text-align:center; }
.article-hero.has-image{
  height: 480px; display:flex; align-items:center;
}
.article-hero-media{ position:absolute; inset:0; }
.article-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-hero.has-image::before{
  /* Duas camadas: um véu uniforme em toda a foto (para nunca deixar
     zonas sem proteção nenhuma) mais uma faixa central mais escura,
     onde o título fica centrado verticalmente — é aí que o texto
     mais precisa de contraste, seja qual for o número de linhas.
     Uma foto real como a desta notícia tem sempre zonas claras E
     escuras ao mesmo tempo (aqui: o portátil escuro à esquerda, o
     caderno claro à direita) — por isso a solução tem de funcionar
     em toda a largura da imagem, não só optar entre letras brancas
     ou pretas consoante "a imagem" no seu todo. */
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,14,11,.45) 0%,
      rgba(18,14,11,.68) 30%,
      rgba(18,14,11,.68) 70%,
      rgba(18,14,11,.45) 100%
    );
}
.article-hero .container{ position:relative; z-index:1; width:100%; }
.article-hero-content{ max-width:780px; margin:0 auto; text-align:center; }
/* Título do artigo em Libre Baskerville (não a fonte de título geral do
   site, Cormorant Garamond) — os números dessa fonte ficam com um
   aspeto estranho ao lado de maiúsculas grandes (ex.: "10 perguntas").
   A Libre Baskerville tem números com a mesma altura das maiúsculas,
   por isso fica sólida em qualquer título, com ou sem números. É uma
   fonte oficial da marca (ver guia de marca), só que ainda não estava
   a ser usada em lado nenhum do site. */
.article-hero-content h1{ font-family: var(--f-serif); font-weight:700; font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin:0; line-height:1.15; text-transform: uppercase; letter-spacing:.01em; }
/* Sombra em três camadas: um contorno apertado e quase opaco mesmo
   junto às letras (a defesa principal — garante contraste em
   qualquer ponto da foto, por mais clara que essa zona exata seja),
   uma camada intermédia, e um brilho mais largo e suave por trás a
   dar profundidade ao conjunto. Isto mantém o título legível seja
   qual for a foto de fundo, incluindo fotos com zonas muito claras
   e muito escuras lado a lado, como acontece nesta notícia. */
.article-hero.has-image .article-hero-content h1{
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 3px rgba(0,0,0,.8),
    0 2px 6px rgba(0,0,0,.7),
    0 6px 22px rgba(0,0,0,.6);
}
/* Menos espaço até ao texto do artigo — a secção seguinte já tem o seu
   próprio espaçamento generoso (var(--space-section)), por isso aqui
   basta um respiro mais curto. */
.article-hero + .section{ padding-top: 30px; }
@media (max-width: 700px){
  .article-hero.has-image{ height: 360px; }
  .article-hero + .section{ padding-top: 22px; }
}

/* ---------- NOTÍCIAS EM DESTAQUE (homepage) — layout assimétrico ---------- */
.news-highlight-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items:stretch; }
.news-feature-card{
  position:relative; display:block; border-radius: var(--radius); overflow:hidden;
  min-height: 460px;
}
.news-feature-img{ position:absolute; inset:0; }
.news-feature-img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.news-feature-card:hover .news-feature-img img{ transform: scale(1.06); }
.news-feature-overlay{
  position:absolute; left:0; right:0; bottom:0; padding: 40px;
  background: linear-gradient(to top, rgba(18,14,11,.96) 0%, rgba(18,14,11,.82) 45%, rgba(18,14,11,.2) 100%);
}
.news-feature-overlay .post-date{ color: rgba(255,255,255,.85); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:10px; }
.news-feature-overlay h3{ font-family: var(--f-serif); font-weight:700; color:#fff; font-size:1.7rem; max-width:480px; margin-bottom:16px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.news-feature-overlay .news-highlight-link{ color:#fff; }

.news-side-list{ display:flex; flex-direction:column; gap: 22px; height:100%; }
.news-side-card{
  display:flex; gap:16px; align-items:center; background: var(--c-cream-dark);
  border-radius: var(--radius); overflow:hidden; padding: 16px; flex:1;
}
/* Proporção aproximada às outras duas listagens (cartão de Notícias e
   destaque da homepage, ambos ~1.5-1.7:1) — era quase quadrada (110x100,
   1.1:1), o que recortava muito mais do que as outras duas, tornando
   difícil uma imagem ficar bem nas três ao mesmo tempo. */
.news-side-img{ flex:none; width: 130px; height: 88px; border-radius: var(--radius); overflow:hidden; }
.news-side-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.news-side-card:hover .news-side-img img{ transform: scale(1.08); }
.news-side-body{ flex:1; min-width:0; }
.news-side-card .post-date{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--c-terracota); margin-bottom:6px; display:block; }
.news-side-card h3{ font-family: var(--f-serif); font-weight:700; font-size:1.02rem; margin-bottom:8px; line-height:1.3; }
.news-highlight-link{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color: var(--c-terracota); }
.news-highlight-link svg{ transition: transform .25s ease; }
.news-feature-card:hover .news-highlight-link svg, .news-side-card:hover .news-highlight-link svg{ transform: translateX(4px); }
@media (max-width: 800px){
  .news-highlight-grid{ grid-template-columns:1fr; }
  .news-feature-card{ min-height:340px; }
}

/* ---------- SERVIÇOS (página interna — editorial, com imagem, alternado) ---------- */
.service-feature{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; padding: 60px 0; border-bottom: 1px solid rgba(44,36,32,.1); }
.service-feature:last-child{ border-bottom:none; }
.service-feature:nth-child(even) .service-feature-media{ order:2; }
.service-feature-media img{ width:100%; border-radius: var(--radius); }
.service-feature.reveal-left, .service-feature.reveal-right{ opacity:0; transition: opacity .8s ease, transform .8s ease; }
.service-feature.reveal-left{ transform: translateX(-70px); }
.service-feature.reveal-right{ transform: translateX(70px); }
.service-feature.is-visible{ opacity:1; transform: translateX(0); }
.service-feature-icon{
  width:64px; height:64px; border-radius:50%; background: var(--c-terracota); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.service-feature h3{ font-size:1.7rem; margin-bottom:16px; }
.service-feature p{ color: var(--c-text-soft); font-size:1.02rem; text-align: justify; text-align-last: left; }
@media (max-width: 800px){
  .service-feature{ grid-template-columns:1fr; gap:26px; padding:40px 0; }
  .service-feature:nth-child(even) .service-feature-media{ order:0; }
}

/* ---------- NEWSLETTER ---------- */
.al-newsletter-footer{ margin-top:26px; }
.footer-newsletter-link{
  display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:.9rem; font-weight:600;
}
.footer-newsletter-btn{ padding:9px 16px; font-size:.78rem; margin-left:6px; }

.newsletter-cta{
  background: var(--c-terracota); border-radius: var(--radius); padding: 34px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.newsletter-cta-text{ display:flex; flex-direction:column; gap:4px; }
.newsletter-cta-big{ font-family: var(--f-display); font-size: clamp(1.8rem,3vw,2.4rem); color:#fff; line-height:1; letter-spacing:.01em; }
.newsletter-cta-small{ font-size:.92rem; color: rgba(255,255,255,.85); }
.newsletter-cta .btn-primary{ background:#fff; color: var(--c-terracota); flex:none; }
.newsletter-cta .btn-primary:hover{ background: var(--c-cream-dark); }
@media (max-width: 600px){ .newsletter-cta{ flex-direction:column; align-items:flex-start; text-align:left; } }

/* ---------- PAGINAÇÃO ---------- */
.pagination{ margin-top:10px; }
ul.page-numbers{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; padding:0; margin:0; gap:18px; }
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--f-body); font-size:.92rem; font-weight:600;
  color: var(--c-terracota); background:none; border:none; text-decoration:none; transition:.2s;
}
.page-numbers:hover{ text-decoration:underline; }
.page-numbers.current{ color: var(--c-text-soft) !important; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.page-numbers.dots{ color: var(--c-text-soft); }

/* ---------- UTIL ---------- */
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; }