/* ═══════════════════════════════════════════════════════════════
   BASE — Reset global, tipografia, containers, animações reveal
   Carregado em todas as páginas via _Layout.cshtml
   ═══════════════════════════════════════════════════════════════ */


/* ─── RESET & NORMALIZE ─────────────────────────────────────────── */
/* Remove margens/padding default do browser e força box-sizing correcto */
*, *::before, *::after {
  box-sizing: border-box; /* padding e border incluídos na largura total */
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;                     /* base para unidades rem */
  scroll-behavior: smooth;             /* scroll animado ao clicar em âncoras */
  -webkit-font-smoothing: antialiased; /* suaviza fontes no macOS/iOS */
  -moz-osx-font-smoothing: grayscale;  /* suaviza fontes no Firefox/macOS */
}

body {
  font-family: var(--font-body);       /* DM Sans — texto corrido */
  background-color: var(--color-bg);   /* fundo bege claro */
  color: var(--color-text);            /* texto quase preto */
  line-height: 1.65;                   /* entrelinhamento confortável para leitura */
  overflow-x: hidden;                  /* evita scroll horizontal indesejado */
}

img    { max-width: 100%; height: auto; display: block; }   /* responsivo por defeito; block elimina espaço em baixo */
a      { color: inherit; text-decoration: none; }           /* herda cor do pai; sem sublinhado por defeito */
button { cursor: pointer; border: none; background: none; font-family: inherit; } /* reset completo de botão */
address { font-style: normal; }                             /* remove o itálico padrão do <address> */

ul[role="list"] { list-style: none; }                       /* remove bullets de listas semânticas */
input, textarea, select { font-family: inherit; }           /* herda fonte do body (browsers não fazem isto por defeito) */


/* ─── CONTAINER ────────────────────────────────────────────────── */
/* Classe base usada em quase todas as secções para centrar o conteúdo */
.container {
  width: 100%;
  max-width: var(--container-max);                        /* 1280px */
  margin-inline: auto;                                    /* centrado horizontalmente */
  padding-inline: clamp(1.25rem, 5vw, 3rem);             /* padding lateral responsivo: mín. 20px, máx. 48px */
}

/* variante estreita — para páginas de conteúdo (detalhe de caso, textos longos) */
.container--narrow   { max-width: 800px; }
/* variante de duas colunas iguais */
.container--split    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
/* variante de duas colunas assimétricas 40/60 — coluna direita maior */
.container--split-6040 { grid-template-columns: 1fr 1.4fr; }

/* em mobile os splits passam a coluna única */
@media (max-width: 768px) {
  .container--split,
  .container--split-6040 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }


/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
/* todos os títulos: Syne, negrito comprimido */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.1;                /* entrelinhamento apertado em títulos grandes */
  font-weight: 700;
  letter-spacing: -0.02em;        /* espaçamento negativo — estilo editorial moderno */
}


/* ─── SECTIONS ───────────────────────────────────────────────────── */
/* padding vertical padrão de todas as secções */
.section { padding-block: var(--space-3xl); } /* 144px em desktop */

/* em mobile reduz o padding */
@media (max-width: 768px) {
  .section { padding-block: var(--space-2xl); } /* 96px em mobile */
}

/* variantes de fundo para secções */
.section--dark    { background: var(--color-dark);   color: var(--color-white); } /* fundo preto */
.section--dark-2  { background: var(--color-dark-2); color: var(--color-white); } /* fundo cinza escuro */
.section--accent  { background: var(--color-bg-alt); }                            /* fundo bege alternado */
.section--cta     { background: var(--color-bg); text-align: center; }            /* fundo claro, centrado */

/* cabeçalho centrado da secção — eyebrow + título + subtítulo */
.section-header   { text-align: center; margin-bottom: var(--space-xl); }
.section__header  { margin-bottom: var(--space-xl); }          /* variante alinhada à esquerda */
.section__cta     { text-align: center; margin-top: var(--space-xl); } /* botão CTA centrado no fundo */

/* eyebrow: rótulo pequeno em maiúsculas laranja acima do título */
.section-eyebrow,
.section__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;        /* muito espaçado — estilo de legenda */
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-title         { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--space-sm); } /* título grande, fluido */
.section-title--light  { color: var(--color-white); }                                            /* variante branca para fundos escuros */
.section-subtitle      { font-size: 1.1rem; color: var(--color-text-muted); max-width: 600px; margin-inline: auto; } /* subtítulo centrado */
.section-body          { font-size: 1.05rem; color: var(--color-text-muted); margin-bottom: var(--space-md); max-width: 560px; }
.section-cta           { text-align: center; margin-top: var(--space-xl); }

/* secção de teaser de contacto: flex vertical centrado */
.section--contact-teaser .container { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.section--contact-teaser .section-subtitle { margin-bottom: var(--space-sm); }
.section--contact-teaser .btn { align-self: center; }         /* botão centrado mas não full-width */
.contact-teaser__title { line-height: 1.15; max-width: 700px; margin-bottom: 0; }


/* ─── REVEAL ANIMATIONS ──────────────────────────────────────────── */
/* Elementos com a classe "reveal" começam invisíveis e animam para cima
   quando entram no viewport. O JavaScript em site.js usa IntersectionObserver
   para adicionar a classe "is-visible" no momento certo.
   O atraso de cada elemento é controlado por data-delay="70" (em ms) no HTML */
.reveal {
  opacity: 0;                                              /* começa invisível */
  transform: translateY(32px);                             /* começa deslocado 32px para baixo */
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
/* quando o JS adiciona .is-visible, o elemento aparece na posição correcta */
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* modificadores de atraso — permitem escalonar elementos dentro do mesmo grupo */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }


/* ─── TAG ────────────────────────────────────────────────────────── */
/* Pequenas etiquetas laranja usadas para categorias e tecnologias */
.tag { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.65rem; background: #fed7aa; color: #92400e; border-radius: var(--radius-full); }
/* linha de tags em flex — wrap automático quando não cabe numa só linha */
.tag-list  { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }


/* ─── RICH TEXT ─────────────────────────────────────────────────── */
/* Estilos para HTML gerado pelo Umbraco (campos de texto rico) */
.rich-text h2  { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }
.rich-text h3  { font-size: 1.2rem; margin: 1.25rem 0 0.5rem; }
.rich-text p   { margin-bottom: 1rem; color: var(--color-text-muted); }
.rich-text ul,
.rich-text ol  { padding-left: 1.5rem; margin-bottom: 1rem; }
.rich-text li  { margin-bottom: 0.5rem; color: var(--color-text-muted); }
.rich-text a   { color: var(--color-accent); text-decoration: underline; }
.rich-text img { border-radius: var(--radius-lg); margin: 1.5rem 0; }


/* ─── PAGE HERO ──────────────────────────────────────────────────── */
/* Hero genérico usado nas páginas interiores (não homepage) */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-2xl)); /* compensa a nav fixa */
  padding-bottom: var(--space-2xl);
  overflow: hidden;                  /* corta o gradiente de fundo */
  background: var(--color-dark);
  color: var(--color-white);
}

/* gradiente radial decorativo — laranja subtil no canto superior direito */
.page-hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(232,119,34,0.12) 0%, transparent 70%);
}

.page-hero .container   { position: relative; z-index: 1; }      /* acima do gradiente */
.page-hero__title       { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; margin-bottom: 1.25rem; letter-spacing: -0.03em; }
.page-hero__subtitle,
.page-hero__desc        { font-size: 1.15rem; color: rgba(255,255,255,0.65); max-width: 560px; }
/* eyebrow laranja em maiúsculas acima do título */
.page-hero__tag         { display: inline-block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; }

.page-hero--media {
  /* modifier: page hero com imagens/vídeo de fundo — estilos adicionados inline ou via JS */
}

/* breadcrumb de navegação acima do título */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);       /* texto muito discreto */
  margin-bottom: 1.25rem;
}
.breadcrumb a        { color: rgba(255,255,255,0.6); transition: color var(--transition); }
.breadcrumb a:hover  { color: var(--color-accent); }


/* ─── MISC UTILITIES ─────────────────────────────────────────────── */
/* Estado vazio — quando não há resultados a mostrar */
.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);    /* fundo bege alternado */
  border-radius: var(--radius-md);
  margin-top: 2rem;
}