/* ============================================================
   ARCO FISCAL — HOME PAGE
   css/pages/home.css · Estilos específicos da homepage
   ============================================================ */


/* ------------------------------------------------------------
   1. HERO — split-screen
   ------------------------------------------------------------ */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* Painel esquerdo — cream, centrado vertical e horizontal */
.hero-left {
  background: var(--cream3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--space-8)) var(--gutter-mobile) var(--space-8);
  min-height: 100svh;   /* mobile: ocupa ecrã inteiro — pilares ficam abaixo do fold */
}

/* Painel direito — preto, pilares */
.hero-right {
  background: var(--black);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Corner mark decorativo no painel direito */
.hero-right::after {
  content: '';
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 28px;
  height: 28px;
  border-bottom: 1px solid rgba(236, 227, 220, 0.18);
  border-right: 1px solid rgba(236, 227, 220, 0.18);
  pointer-events: none;
}

/* Desktop: split lado a lado */
@media (min-width: 1024px) {
  .hero {
    flex-direction: row;
  }

  .hero-left {
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-height) + var(--space-8)) var(--gutter-desktop) var(--space-8);
    min-height: unset;
  }

  .hero-right {
    width: 42%;
    align-items: stretch;
  }
}


/* Conteúdo do hero esquerdo — centrado no painel */
.hero-content {
  max-width: 580px;
  width: 100%;
}

.hero-content .eyebrow {
  margin-bottom: var(--space-6);
}

.hero-content h1 {
  margin-bottom: var(--space-6);
}

.hero-sub {
  max-width: 460px;
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Grid de pilares 2×2 — ocupa todo o painel e centra-se */
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  align-self: stretch;
}

.pilar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid rgba(236, 227, 220, 0.08);
  border-bottom: 1px solid rgba(236, 227, 220, 0.08);
  overflow: hidden;  /* impede overflow da label para fora da célula */
}

.pilar:nth-child(even) {
  border-right: none;
}

.pilar:nth-child(3),
.pilar:nth-child(4) {
  border-bottom: none;
}

/*
 * Cinzel display em grid 2×2 no painel de 42% da viewport.
 * Cálculo: célula = (0.42 × vw) / 2, padding lateral = 24-40px.
 * "Proximidade" (11 chars) é a palavra mais larga — controla o clamp.
 * A 1024px: célula=215px, padding-x=48px → content=167px → max font ≈ 21px ≈ 1.3rem
 * A 1366px: célula=287px, padding-x=48px → content=239px → 1.6vw=21.8px ✓
 * A 1920px: célula=403px, padding-x=80px → content=323px → max=1.65rem=26.4px ✓
 */
.pilar-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.65rem);
  font-weight: var(--weight-regular);
  color: var(--cream);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  overflow-wrap: break-word;
}

.pilar-desc {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--taupe);
  opacity: 0.75;
  line-height: 1.6;
}

/* Desktop médio (1024–1439px): padding lateral reduzido */
@media (min-width: 1024px) {
  .pilar {
    padding: var(--space-10) var(--space-6);  /* 48px horizontal — cabe Proximidade a 1.6vw */
  }
  .pilares-grid {
    align-content: center;
  }
}

/* Desktop largo (1440px+): padding completo */
@media (min-width: 1440px) {
  .pilar {
    padding: var(--space-12) var(--space-10);  /* 80px horizontal — 1.65rem máx ok acima de 1440px */
  }
}


/* ------------------------------------------------------------
   2. APRESENTAÇÃO — secção de missão centrada
   ------------------------------------------------------------ */
.apresentacao {
  padding: clamp(5rem, 11vw, 10rem) 0;
  background: var(--cream);
  text-align: center;
  position: relative;
}

.apresentacao::before,
.apresentacao::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-light);
}
.apresentacao::before { top: 0; }
.apresentacao::after  { bottom: 0; }

.apresentacao-inner {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Eyebrow */
.apresentacao-inner .eyebrow {
  margin-bottom: var(--space-8);
  letter-spacing: var(--tracking-ultra);
}

/* Headline — o centro de gravidade da secção */
.apresentacao-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.5vw, 6.5rem);
  font-weight: var(--weight-light);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-12);
}

/* Ornamento central — ─── · ─── */
.apresentacao-ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.apresentacao-ornament-line {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--taupe);
  opacity: 0.4;
}

.apresentacao-ornament-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--taupe);
  opacity: 0.5;
}

/* Sub-texto */
.apresentacao-sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: var(--weight-light);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  margin-bottom: var(--space-10);
}

/* CTA */
.apresentacao-cta {
  font-size: 0.58rem;
  letter-spacing: var(--tracking-ultra);
}


/* ------------------------------------------------------------
   3. SERVIÇOS — redesenhado
   ------------------------------------------------------------ */
.servicos-home {
  padding: var(--section-lg) 0;
  background: var(--cream3);
}

/* Section header com separador inferior */
.servicos-home .section-header {
  margin-bottom: 0;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--border-light);
}

.servicos-home .section-header h2 {
  font-size: clamp(1.8rem, 3vw, 3.5rem);
}

/* Grid */
.servicos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-light);
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .servicos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .servicos-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Linha 1 — Empresas: 4 × 3/12 */
  .servico-card:nth-child(-n+4)                { grid-column: span 3; }
  /* Linha 2 — Estrangeiros & Turismo: 3 × 4/12 */
  .servico-card:nth-child(n+5):nth-child(-n+7) { grid-column: span 4; }
  /* Linha 3 — Construção 5/12, ZFM 7/12 (mais destaque ao premium) */
  .servico-card:nth-child(8)                   { grid-column: span 5; }
  .servico-card:nth-child(9)                   { grid-column: span 7; }
}

/* Card */
.servico-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-10) var(--space-8);
  background: var(--cream3);
  border-left: 3px solid transparent;
  transition:
    background var(--transition-base),
    border-color var(--transition-fast);
  cursor: pointer;
  gap: 0;
}

.servico-card:hover {
  background: var(--cream);
  border-left-color: var(--taupe);
}

/* Topo: número + categoria em coluna */
.servico-card-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

/* Número — âncora visual forte */
.servico-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: var(--weight-regular);
  color: var(--taupe);
  opacity: 0.18;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Categoria — legível, logo abaixo do número */
.servico-cat {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--taupe);
  opacity: 0.5;
}

/* Título — o elemento dominante do card */
.servico-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: var(--weight-light);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

/* Descrição — secundária, empurra o link para o fundo */
.servico-desc {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin-bottom: var(--space-6);
}

/* Link — sempre presente mas discreto */
.servico-card .link-arrow {
  margin-top: auto;
  opacity: 0.5;
  font-size: 0.52rem;
  letter-spacing: var(--tracking-ultra);
  transition: opacity var(--transition-fast), gap var(--transition-fast);
}

.servico-card:hover .link-arrow {
  opacity: 1;
}

/* Featured — estrangeiros & turismo */
.servico-card--featured {
  background: var(--cream);
}

.servico-card--featured:hover {
  background: var(--cream2);
  border-left-color: var(--taupe);
}

/* ZFM — destaque máximo: mais padding, título maior */
.servico-card--zmf {
  background: var(--black);
}

.servico-card--zmf:hover {
  background: rgba(89, 73, 60, 0.35);
  border-left-color: rgba(155, 138, 120, 0.6);
}

.servico-card--zmf .servico-num,
.servico-card--zmf .servico-cat,
.servico-card--zmf .servico-title,
.servico-card--zmf .servico-desc,
.servico-card--zmf .link-arrow {
  color: var(--cream);
}

.servico-card--zmf .servico-num   { opacity: 0.15; }
.servico-card--zmf .servico-cat   { opacity: 0.3; }
.servico-card--zmf .servico-desc  { opacity: 0.55; }
.servico-card--zmf .link-arrow    { opacity: 0.4; }
.servico-card--zmf:hover .link-arrow { opacity: 1; }

/* ZFM: título ainda maior por ter card mais largo */
.servico-card--zmf .servico-title {
  font-size: clamp(1.6rem, 2.8vw, 3rem);
}

/* Desktop — padding generoso */
@media (min-width: 1024px) {
  .servico-card {
    padding: var(--space-12) var(--space-10);
  }
}

/* Footer da secção */
.servicos-footer {
  display: flex;
  justify-content: center;
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-light);
  margin-top: 1px;
}


/* ------------------------------------------------------------
   4. PACOTES
   ------------------------------------------------------------ */
.pacotes-home {
  padding: var(--section-lg) 0;
  background: var(--black);
  position: relative;
  overflow: hidden;
}

/* Grain texture subtil no fundo escuro */
.pacotes-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(236, 227, 220, 0.012) 2px,
      rgba(236, 227, 220, 0.012) 4px
    );
  pointer-events: none;
}


/* ------------------------------------------------------------
   5. SOBRE (preview)
   ------------------------------------------------------------ */
.sobre-preview {
  padding: var(--section-lg) 0;
  background: var(--cream);
}

.sobre-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 640px) {
  .sobre-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .sobre-grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-20);
  }
}

/* Placeholder visual enquanto não há foto real */
.sobre-img-placeholder {
  aspect-ratio: 4 / 5;
  background: var(--brown);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sobre-monogram-img {
  width: 55%;
  height: auto;
  opacity: 0.18;
  user-select: none;
}

/* Conteúdo textual */
.sobre-content .eyebrow {
  margin-bottom: var(--space-5);
}

.sobre-content h2 {
  margin-bottom: var(--space-6);
}

.sobre-content p {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.sobre-nums {
  display: flex;
  gap: var(--space-10);
  margin: var(--space-8) 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-light);
}

.sobre-num {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.num-value {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: var(--weight-light);
  color: var(--text-primary);
  line-height: 1;
}

.num-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
}


/* ------------------------------------------------------------
   6. TESTEMUNHOS
   ------------------------------------------------------------ */
.testemunhos {
  padding: var(--section-lg) 0;
  background: var(--cream2);
}

.testemunhos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-light);
}

@media (min-width: 640px) {
  .testemunhos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testemunhos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testemunho-card {
  background: var(--cream2);
  padding: var(--space-10) var(--space-8);
  transition: background var(--transition-fast);
}

.testemunho-card:hover {
  background: var(--cream);
}

.testemunho-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: var(--weight-light);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.testemunho-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.testemunho-nome {
  font-family: var(--font-serif);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.testemunho-cargo {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.65;
}

@media (min-width: 1024px) {
  .testemunho-card {
    padding: var(--space-12) var(--space-10);
  }
}


/* ------------------------------------------------------------
   7. INSIGHTS
   ------------------------------------------------------------ */
.insights-home {
  padding: var(--section-lg) 0;
  background: var(--cream3);
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-light);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .insights-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.insight-card {
  display: flex;
  flex-direction: column;
  background: var(--cream3);
  transition: background var(--transition-fast);
}

.insight-card:hover {
  background: var(--cream2);
}

/* Placeholder de imagem enquanto não há foto */
.insight-img {
  height: 200px;
  flex-shrink: 0;
}

.insight-img--1 {
  background-image: url('../../images/insights/construcao.jpg');
  background-size: cover;
  background-position: center;
}

.insight-img--2 {
  background-image: url('../../images/insights/al-holiday-let.jpg');
  background-size: cover;
  background-position: center;
}

.insight-img--3 {
  background-image: url('../../images/insights/fiscal-tax.jpg');
  background-size: cover;
  background-position: center;
}

.insight-img--4 {
  background-image: url('../../images/insights/ice.jpg');
  background-size: cover;
  background-position: center;
}

.insight-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  flex: 1;
}

.insight-body .tag {
  color: var(--taupe);
}

.insight-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  flex: 1;
}

.insight-date {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.5;
}

.insight-card .link-arrow {
  margin-top: auto;
}

.insights-footer {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .insight-body {
    padding: var(--space-10);
  }
  .insight-img {
    height: 240px;
  }
}


/* 8. CTA FINAL — estilos base em components.css */