/* ================================================================
   LAYOUT.CSS — Estrutura de página do LNK-SINGUS
   Nav, Hero, Seções, Grids, Footer e Media Queries
   ================================================================ */

/* Importa os tokens do design system */
@import './tokens.css';

/* ════════════════════════════════════════════
   NAVEGAÇÃO PRINCIPAL
   ════════════════════════════════════════════ */

/* Barra de navegação fixada no topo */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-altura);
  display: flex;
  align-items: center;
  padding: 0 var(--espaco-xl);
  transition: background var(--transicao-media), border-color var(--transicao-media);
  border-bottom: 1px solid transparent;
}

/* Estado ao rolar — fundo fosco com blur */
.nav.rolada {
  background: rgba(7, 7, 10, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--cor-borda);
}

/* Logo em monospace */
.nav__logo {
  font-family: var(--fonte-mono);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--cor-texto);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
}

/* Ponto decorativo do logo na cor do acento */
.nav__logo-ponto { color: var(--cor-acento); }

/* Lista de links da nav (à direita) */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--espaco-xl);
  margin-left: auto;
  list-style: none;
}

/* Link padrão da nav */
.nav__link {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  transition: color var(--transicao-rapida);
}

.nav__link:hover { color: var(--cor-acento); }

/* Link em destaque — com borda */
.nav__link--destaque {
  color: var(--cor-acento);
  border: 1px solid rgba(200, 169, 110, 0.3);
  padding: 0.4rem 1rem;
  border-radius: var(--raio-md);
}

.nav__link--destaque:hover {
  background: rgba(200, 169, 110, 0.08);
  color: var(--cor-acento-hover);
}

/* ── Botão hambúrguer (mobile) ── */
.nav__hamburguer {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  z-index: 110;
}

.nav__hamburguer-linha {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--cor-texto);
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Animação X quando aberto */
.nav__hamburguer.ativo .nav__hamburguer-linha:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburguer.ativo .nav__hamburguer-linha:nth-child(2) {
  opacity: 0;
}

.nav__hamburguer.ativo .nav__hamburguer-linha:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ════════════════════════════════════════════
   HERO — Seção principal de entrada
   ════════════════════════════════════════════ */

/* Hero ocupa 100vh com conteúdo centralizado verticalmente */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-altura);
  position: relative;
  overflow: hidden;
}

/* Gradiente radial decorativo no canto superior direito */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Grid de 2 colunas: texto | demo visual */
.hero__conteudo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-4xl);
  align-items: center;
  width: 100%;
  padding: var(--espaco-4xl) 0;
}

/* Eyebrow — rótulo pequeno acima do título */
.hero__eyebrow {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: var(--espaco-lg);
}

/* Espaçamento do título */
.hero__titulo { margin-bottom: var(--espaco-lg); }

/* Subtítulo descritivo */
.hero__subtitulo {
  font-size: 1.1rem;
  color: var(--cor-texto-suave);
  line-height: 1.8;
  margin-bottom: var(--espaco-2xl);
  max-width: 480px;
}

/* Linha de CTAs do hero */
.hero__acoes {
  display: flex;
  gap: var(--espaco-md);
  flex-wrap: wrap;
}

/* Indicador de scroll centralizado na base do hero */
.hero__scroll {
  position: absolute;
  bottom: var(--espaco-xl);
  left: 50%;
  transform: translateX(-50%);
}

/* ════════════════════════════════════════════
   SEÇÃO DE ENCURTAMENTO (principal CTA)
   ════════════════════════════════════════════ */

.secao-encurtar {
  padding: var(--espaco-4xl) 0;
  position: relative;
}

/* Gradiente de fundo sutil */
.secao-encurtar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200, 169, 110, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* Número da seção no topo */
.secao-encurtar__numero {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: var(--espaco-sm);
  opacity: 0.7;
}

/* Título da seção */
.secao-encurtar__titulo { margin-bottom: var(--espaco-sm); }

/* Subtítulo da seção */
.secao-encurtar__subtitulo {
  color: var(--cor-texto-suave);
  margin-bottom: var(--espaco-2xl);
  max-width: 560px;
}

/* Card que contém o formulário de encurtamento */
.secao-encurtar__card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--espaco-2xl);
  max-width: 680px;
}

/* ════════════════════════════════════════════
   SEÇÃO GENÉRICA (padrão para todas as seções)
   ════════════════════════════════════════════ */

.secao {
  padding: var(--espaco-4xl) 0;
  position: relative;
}

/* Número da seção (01, 02, 03...) */
.secao__numero {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-acento);
  opacity: 0.7;
  margin-bottom: var(--espaco-sm);
}

/* Título principal da seção */
.secao__titulo { margin-bottom: var(--espaco-sm); }

/* Subtítulo da seção */
.secao__subtitulo {
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 600px;
  margin-bottom: var(--espaco-3xl);
}

/* Wrapper do cabeçalho da seção */
.secao__cabecalho { margin-bottom: var(--espaco-3xl); }

/* Variante com fundo levemente elevado */
.secao--escura { background: var(--cor-fundo-elevado); }

/* Variante com borda no topo */
.secao--borda-topo { border-top: 1px solid var(--cor-borda); }

/* ════════════════════════════════════════════
   GRID DE RECURSOS (features)
   ════════════════════════════════════════════ */

/* 3 colunas para os cards de funcionalidade */
.recursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-lg);
}

/* ════════════════════════════════════════════
   LAYOUT DA SEÇÃO DE API
   ════════════════════════════════════════════ */

/* 2 colunas: texto explicativo | bloco de código */
.api-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--espaco-3xl);
  align-items: start;
}

/* ════════════════════════════════════════════
   GRID DE SISTEMAS INTEGRADOS
   ════════════════════════════════════════════ */

/* 3 colunas para os cards de sistemas */
.sistemas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-lg);
}

/* ════════════════════════════════════════════
   FAIXA DE ESTATÍSTICAS
   ════════════════════════════════════════════ */

/* Faixa com bordas superior e inferior */
.faixa-stats {
  padding: var(--espaco-3xl) 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

/* 4 colunas para os números */
.faixa-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-2xl);
  text-align: center;
}

/* ════════════════════════════════════════════
   DIVISOR DECORATIVO
   ════════════════════════════════════════════ */

/* Linha com gradiente que desvanece nas extremidades */
.divisor {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cor-acento), transparent);
  opacity: 0.3;
  margin: 0;
}

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */

/* Container principal do footer */
.footer {
  padding: var(--espaco-3xl) 0 var(--espaco-2xl);
  border-top: 1px solid var(--cor-borda);
}

/* Grid de 3 colunas: marca | coluna | coluna */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--espaco-3xl);
  margin-bottom: var(--espaco-2xl);
}

/* Logo do footer */
.footer__logo {
  font-family: var(--fonte-mono);
  font-size: 1.1rem;
  color: var(--cor-texto);
  margin-bottom: var(--espaco-md);
  display: block;
}

/* Texto de descrição da marca */
.footer__descricao {
  font-size: 0.9rem;
  color: var(--cor-texto-fraco);
  line-height: 1.7;
}

/* Título dos grupos de links */
.footer__titulo-grupo {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin-bottom: var(--espaco-md);
}

/* Lista de links do footer */
.footer__links         { list-style: none; }
.footer__links li      { margin-bottom: var(--espaco-sm); }

.footer__links a {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  transition: color var(--transicao-rapida);
}

.footer__links a:hover { color: var(--cor-acento); }

/* Rodapé inferior (copyright + domínio) */
.footer__rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--espaco-lg);
  border-top: 1px solid var(--cor-borda-suave);
}

/* Texto de copyright */
.footer__copyright {
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
}

/* Domínio em destaque monospace */
.footer__dominio {
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  color: var(--cor-acento);
}

/* ════════════════════════════════════════════
   MEDIA QUERIES — RESPONSIVIDADE
   ════════════════════════════════════════════ */

/* ── Tablet paisagem e desktop médio (≤ 1024px) ── */
@media (max-width: 1024px) {
  /* Recursos em 2 colunas */
  .recursos-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sistemas em 2 colunas */
  .sistemas-grid { grid-template-columns: repeat(2, 1fr); }

  /* API em coluna única */
  .api-layout { grid-template-columns: 1fr; }

  /* Hero em coluna única */
  .hero__conteudo {
    grid-template-columns: 1fr;
    gap: var(--espaco-2xl);
  }

  /* Footer em 2 colunas */
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ── Tablet retrato e mobile largo (≤ 768px) ── */
@media (max-width: 768px) {
  /* Reduz padding do container */
  .container { padding: 0 var(--espaco-lg); }

  /* Recursos em coluna única */
  .recursos-grid { grid-template-columns: 1fr; }

  /* Sistemas em 2 colunas */
  .sistemas-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats em 2 colunas com espaço reduzido */
  .faixa-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-xl);
  }

  /* Mostra botão hambúrguer */
  .nav__hamburguer { display: flex; }

  /* Menu mobile: oculto por padrão, slide-down ao abrir */
  .nav__links {
    display: none;
    position: absolute;
    top: var(--nav-altura);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--espaco-sm) 0;
    background: rgba(7, 7, 10, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--cor-borda);
  }

  .nav__links.aberto { display: flex; }

  .nav__links li { text-align: center; }

  .nav__link {
    display: block;
    padding: 0.9rem var(--espaco-xl);
    border-bottom: 1px solid var(--cor-borda-suave);
  }

  .nav__link--destaque {
    border: none;
    border-radius: 0;
    padding: 0.9rem var(--espaco-xl);
    background: rgba(200, 169, 110, 0.06);
  }

  /* Hero: CTAs em coluna */
  .hero__acoes { flex-direction: column; }

  /* Padding reduzido no card de encurtamento */
  .secao-encurtar__card { padding: var(--espaco-lg); }

  /* Footer em coluna única */
  .footer__grid { grid-template-columns: 1fr; }

  /* Rodapé em coluna centralizada */
  .footer__rodape {
    flex-direction: column;
    gap: var(--espaco-sm);
    text-align: center;
  }

  /* Formulário: input e botão em coluna */
  .form-encurtar__grupo { flex-direction: column; }
}

/* ── Mobile pequeno (≤ 480px) ── */
@media (max-width: 480px) {
  /* Sistemas em coluna única */
  .sistemas-grid { grid-template-columns: 1fr; }

  /* Stats mantém 2 colunas mesmo em mobile pequeno */
  .faixa-stats__grid { grid-template-columns: 1fr 1fr; }
}