/* ==========================================================================
   Reset & Base
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

/* ==========================================================================
   Variáveis — modo CLARO (default)
   ========================================================================== */
:root {
  --color-primary:       #2563a8;
  --color-primary-dark:  #1e4d8c;
  --color-accent:        #1a7a4a;
  --color-accent-dark:   #145f39;

  --bg-body:             #dde4ee;
  --bg-section-alt:      #c8d3e8;
  --bg-card:             #eef1f8;
  --bg-card-hover:       #e2e8f4;

  --text-primary:        #0f1f3d;
  --text-secondary:      #2d3e5a;
  --text-muted:          #4b5e7a;

  --border-color:        #b8c8e0;
  --shadow-color:        rgba(30, 77, 140, 0.12);
}

/* ==========================================================================
   Variáveis — modo ESCURO
   ========================================================================== */
body.dark-mode {
  --bg-body:             #0d1b2e;
  --bg-section-alt:      #0a1525;
  --bg-card:             #112240;
  --bg-card-hover:       #163354;

  --text-primary:        #e8f0fe;
  --text-secondary:      #b0c4de;
  --text-muted:          #7a9bbf;

  --border-color:        #1e3a5f;
  --shadow-color:        rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Aplicar variáveis ao body e secções
   ========================================================================== */
body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

/* Textos Tailwind sobrescritos pelas variáveis */
.text-zinc-900, .text-zinc-800 { color: var(--text-primary) !important; }
.text-zinc-700, .text-zinc-600 { color: var(--text-secondary) !important; }
.text-zinc-500, .text-zinc-400 { color: var(--text-muted) !important; }

/* Fundos de secção */
#servicos  { background-color: var(--bg-body) !important; }
#sobre     { background-color: var(--bg-section-alt) !important; }
#portfolio { background-color: var(--bg-body) !important; }

/* Cards */
.servico-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.servico-card:hover {
  transform: translateY(-1.5rem) scale(1.02);
  box-shadow: 0 24px 48px var(--shadow-color);
  border-color: var(--color-primary);
  background-color: var(--bg-card-hover) !important;
}

/* Texto nos cards */
.servico-card h3 { color: var(--text-primary) !important; }
.servico-card p,
.servico-card ul,
.servico-card li { color: var(--text-secondary) !important; }

/* ==========================================================================
   Tipografia
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.1;
}
h1 { font-size: clamp(3.5rem, 8vw, 9rem); }
h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
h3 { font-size: 2.25rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  transition: all 0.4s ease;
  background: rgba(255,255,255,0.95) !important;
}
body.dark-mode .header {
  background: rgba(10, 21, 37, 0.97) !important;
  border-bottom: 1px solid var(--border-color);
}
.header.scrolled {
  box-shadow: 0 4px 20px var(--shadow-color) !important;
  backdrop-filter: blur(12px);
}

/* Nav links */
body.dark-mode nav a { color: var(--text-secondary) !important; }
body.dark-mode .text-zinc-900 { color: var(--text-primary) !important; }

/* Toggle Dark/Light */
#theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.3s ease;
}
#theme-toggle:hover {
  background: var(--bg-card);
  border-color: var(--color-primary);
}
#theme-toggle .toggle-icon { font-size: 16px; transition: transform 0.4s ease; }
body.dark-mode #theme-toggle .toggle-icon { transform: rotate(180deg); }


/* ==========================================================================
   Toggle Dark/Light — slider ☀️ 🌙
   ========================================================================== */
#theme-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 999px;
}

#theme-toggle .toggle-sun,
#theme-toggle .toggle-moon {
  font-size: 15px;
  line-height: 1;
  transition: opacity 0.3s ease;
}
/* Modo claro: sol activo, lua apagada */
#theme-toggle .toggle-sun  { opacity: 1; }
#theme-toggle .toggle-moon { opacity: 0.3; }
/* Modo escuro: lua activa, sol apagado */
body.dark-mode #theme-toggle .toggle-sun  { opacity: 0.3; }
body.dark-mode #theme-toggle .toggle-moon { opacity: 1; }

.toggle-track {
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: #c8d8ef;
  border: 1.5px solid #a0b8d8;
  position: relative;
  transition: background 0.35s ease, border-color 0.35s ease;
  flex-shrink: 0;
}
body.dark-mode .toggle-track {
  background: #2563a8;
  border-color: #1e4d8c;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.dark-mode .toggle-thumb {
  transform: translateX(22px);
}

/* ==========================================================================
   Hero — ondas azuis escuras
   ========================================================================== */
#hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(15, 35, 80, 0.75) 0%, rgba(5, 15, 40, 0.85) 100%),
    url('assets/bg-waves-dark.jpg') center center / cover no-repeat !important;
}
#hero h1 { font-weight: 900; letter-spacing: -0.05em; }
#hero button { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
#hero .bg-white { color: #0f2d5a !important; }

/* ==========================================================================
   Secção Sobre — fundo com ondas cinza
   ========================================================================== */
#sobre {
  background:
    linear-gradient(135deg, rgba(200, 215, 235, 0.88) 0%, rgba(180, 200, 225, 0.92) 100%),
    url('assets/bg-waves-light.jpg') center center / cover no-repeat !important;
}
body.dark-mode #sobre {
  background:
    linear-gradient(135deg, rgba(8, 18, 35, 0.90) 0%, rgba(5, 12, 25, 0.95) 100%),
    url('assets/bg-waves-dark.jpg') center center / cover no-repeat !important;
}

/* Texto na secção sobre */
#sobre h2 { color: var(--text-primary) !important; }
#sobre p  { color: var(--text-secondary) !important; }

/* Números estatísticos */
#sobre .text-green-700 { color: var(--color-accent) !important; }
#sobre .text-zinc-600  { color: var(--text-muted) !important; }

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio-item {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.portfolio-item:hover { transform: translateY(-1.5rem) scale(1.02); }
.portfolio-item img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 15, 45, 0.92) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.portfolio-item:hover::after { opacity: 1; }

/* ==========================================================================
   CTA — ondas azuis escuras
   ========================================================================== */
#cta {
  background:
    linear-gradient(135deg, rgba(20, 55, 120, 0.88) 0%, rgba(8, 20, 55, 0.94) 100%),
    url('assets/bg-waves-dark.jpg') center center / cover no-repeat !important;
}
#cta input, #cta textarea { transition: all 0.3s ease; }
#cta input:focus, #cta textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
#cta button[type="submit"] {
  background: var(--color-accent) !important;
  color: white !important;
}
#cta button[type="submit"]:hover {
  background: var(--color-accent-dark) !important;
}

/* ==========================================================================
   Footer — ondas escuras
   ========================================================================== */
footer {
  background:
    linear-gradient(135deg, rgba(8, 18, 40, 0.96) 0%, rgba(4, 10, 25, 0.98) 100%),
    url('assets/bg-waves-dark.jpg') center bottom / cover no-repeat !important;
}
footer .border-t { border-color: rgba(255,255,255,0.08) !important; }

/* ==========================================================================
   Responsividade
   ========================================================================== */
@media (max-width: 768px) {
  h1 { font-size: clamp(3rem, 10vw, 5.5rem); }
  h2 { font-size: clamp(2.25rem, 7vw, 4rem); }
  .grid { grid-template-columns: 1fr; }
  nav { display: none; }
  #theme-toggle span.toggle-label { display: none; }
}

/* ==========================================================================
   Animações
   ========================================================================== */
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.animate-pulse-slow { animation: pulse 4s infinite ease-in-out; }

/* ==========================================================================
   RESPONSIVIDADE COMPLETA — Mobile, Tablet, Laptop, Desktop
   ========================================================================== */

/* ── Base mobile-first ── */
html { font-size: 16px; }

/* Prevenir overflow horizontal em todos os ecrãs */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; width: 100%; }
img  { max-width: 100%; height: auto; }

/* ── Header responsivo ── */
.header { padding: 0; }
.header .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }

/* ── Hero responsivo ── */
#hero h1,
.article-hero h1 {
    font-size: clamp(1.8rem, 6vw, 4rem) !important;
}
#hero p,
.article-hero p {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
}

/* ── Secções — padding adaptativo ── */
section, .py-24 { padding-top: clamp(2.5rem, 6vw, 6rem); padding-bottom: clamp(2.5rem, 6vw, 6rem); }
.py-16 { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }

/* ── Grid de serviços ── */
#servicos .grid,
#portfolio .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* ── Sidebar notícias — colapsa em mobile ── */
.flex-col.lg\\:flex-row { flex-direction: column; }

/* ── Notícias cards ── */
.noticia-card img { width: 60px; height: 60px; }

/* ── Filtros trabalhos — scroll horizontal em mobile ── */
#works-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* ── Footer columns ── */
footer .grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* ── Artigo notícias ── */
.article-body { padding: 0 0.5rem; }
.article-body p { font-size: clamp(0.9rem, 2.2vw, 1.05rem); }
.img-grid.cols-2,
.img-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ══════════════════════════════════
   TELEMÓVEL (< 640px)
══════════════════════════════════ */
@media (max-width: 639px) {
    html { font-size: 14px; }

    .header .max-w-7xl { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Header — esconder Ligue Já e Orçamento, manter toggle e menu */
    .header button.hidden,
    .header a.hidden { display: none !important; }

    /* Hero */
    #hero { min-height: 55vh !important; }
    #hero h1 { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }
    #hero .flex-col { gap: 0.75rem; }
    #hero .px-10 { padding-left: 1.5rem; padding-right: 1.5rem; }
    #hero .py-5  { padding-top: 0.75rem; padding-bottom: 0.75rem; }

    /* Artigo hero */
    .article-hero { min-height: 45vh !important; }
    .article-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
    .article-hero .pb-14 { padding-bottom: 2rem; }

    /* Serviços — 1 coluna */
    #servicos .grid { grid-template-columns: 1fr !important; }
    .servico-card .h-44 { height: 10rem; }

    /* Portfolio — 1 coluna */
    #portfolio .grid { grid-template-columns: 1fr !important; }
    .portfolio-item img { height: 13rem; }

    /* Sidebar notícias — abaixo do conteúdo */
    aside.lg\\:w-72 { width: 100% !important; }
    .noticia-card { flex-direction: row; }

    /* Trabalhos grid — 1 coluna */
    #works-grid { grid-template-columns: 1fr !important; }
    .work-item img { height: 200px !important; }

    /* Filtros — scroll horizontal */
    .filter-btn { font-size: 0.72rem; padding: 0.35rem 0.9rem; white-space: nowrap; }
    div.py-5.sticky > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; justify-content: flex-start; }
    div.py-5.sticky > div::-webkit-scrollbar { height: 3px; }
    div.py-5.sticky > div::-webkit-scrollbar-thumb { background: #2563a8; border-radius: 99px; }

    /* Footer */
    footer .grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
    .footer-bar { font-size: 0.65rem; padding: 0.5rem 0.75rem; }

    /* Imagens artigo */
    .img-grid.cols-2,
    .img-grid.cols-3 { grid-template-columns: 1fr !important; }

    /* Video thumb */
    .video-play-btn { width: 56px !important; height: 56px !important; }
    .video-play-btn svg { width: 48px !important; height: 32px !important; }
}

/* ══════════════════════════════════
   TABLET (640px – 1023px)
══════════════════════════════════ */
@media (min-width: 640px) and (max-width: 1023px) {
    html { font-size: 15px; }

    /* Header — mostrar só toggle e botões pequenos */
    .header button.hidden.sm\\:inline-flex { display: inline-flex !important; }

    /* Hero */
    #hero { min-height: 52vh !important; }

    /* Serviços — 2 colunas */
    #servicos .grid { grid-template-columns: 1fr 1fr !important; }

    /* Portfolio — 2 colunas */
    #portfolio .grid { grid-template-columns: 1fr 1fr !important; }

    /* Trabalhos — 2 colunas */
    #works-grid { grid-template-columns: 1fr 1fr !important; }

    /* Sidebar — full width abaixo */
    aside.lg\\:w-72 { width: 100% !important; }
    #noticias .sticky { position: static !important; }

    /* Filtros wrap normal */
    div.py-5.sticky > div { flex-wrap: wrap; overflow-x: visible; justify-content: center; }

    /* Footer — 2 colunas */
    footer .grid { grid-template-columns: 1fr 1fr !important; }

    /* Imagens artigo */
    .img-grid.cols-3 { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════
   LAPTOP PEQUENO (1024px – 1279px)
══════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
    .max-w-7xl { max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }

    /* Sidebar */
    aside.lg\\:w-72 { width: 16rem !important; }

    /* Trabalhos — 3 colunas */
    #works-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ══════════════════════════════════
   DESKTOP GRANDE (≥ 1280px)
══════════════════════════════════ */
@media (min-width: 1280px) {
    .max-w-7xl { max-width: 80rem; }

    /* Trabalhos — 4 colunas */
    #works-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ══════════════════════════════════
   ECRÃ MUITO GRANDE (≥ 1600px)
══════════════════════════════════ */
@media (min-width: 1600px) {
    html { font-size: 17px; }
    .max-w-7xl { max-width: 90rem; }
}