/* ==========================================================================
   Lucas Fernandes Arquitetos — Página de manutenção
   Direção: institucional, minimalista e equilibrada. Sem imagens.
   Bloco de largura controlada, centrado na página, conteúdo centralizado.
   Fonte local: Quadran (familia unica) · Oliva #6F6646 · Off-white #F4EDEA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes locais (nenhuma fonte externa / sem Google Fonts)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Quadran";
  src: url("../../fonts/Quadran-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quadran";
  src: url("../../fonts/Quadran-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quadran";
  src: url("../../fonts/Quadran-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Paleta e variáveis
   -------------------------------------------------------------------------- */

:root {
  /* Identidade */
  --oliva:     #6F6646;   /* verde da marca — detalhe pontual */
  --off-white: #F4EDEA;   /* fundo institucional */

  /* Texto */
  --grafite:   #22201C;   /* título */
  --texto:     #565046;   /* corpo */
  --discreto:  rgba(34, 32, 28, 0.46);

  /* Linha fina */
  --linha: rgba(34, 32, 28, 0.11);

  /* Largura do bloco de conteúdo */
  --coluna: 36rem;   /* 576px — folga para a linha de fecho não quebrar */

  /* Tipografia */
  --fonte-titulo: "Quadran", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto:  "Quadran", "Helvetica Neue", Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;

  display: grid;
  grid-template-rows: 1fr auto;

  background-color: var(--off-white);
  color: var(--texto);
  font-family: var(--fonte-texto);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* --------------------------------------------------------------------------
   4. Conteúdo — bloco centrado, leitura alinhada à esquerda
   -------------------------------------------------------------------------- */

.palco {
  display: grid;
  align-content: center;
  align-content: safe center;
  justify-items: center;

  padding: clamp(3rem, 9vh, 6rem) clamp(1.5rem, 6vw, 3rem);
}

.conteudo {
  width: 100%;
  max-width: var(--coluna);
  text-align: center;
}


/* Logo ------------------------------------------------------------------- */

.marca {
  display: block;
  width: clamp(8.75rem, 16vw, 10.625rem);   /* 140px → 170px */
  height: auto;
  margin-inline: auto;
}


/* Detalhe verde: linha fina ----------------------------------------------- */

.tracinho {
  display: block;
  width: 3rem;
  height: 1px;
  background-color: var(--oliva);
  margin: clamp(2.25rem, 5.5vh, 3.25rem) auto clamp(1.5rem, 3.4vh, 2rem);
}


/* Título — escala moderada ------------------------------------------------ */

.titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.375rem);   /* 32px → 54px */
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--grafite);
}


/* Textos ------------------------------------------------------------------ */

.texto {
  margin: clamp(1.25rem, 2.8vh, 1.75rem) auto 0;
  max-width: 30rem;
  font-weight: 400;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);   /* 16px → 19px */
  line-height: 1.75;
  letter-spacing: 0.004em;
  color: var(--texto);
  text-wrap: pretty;
}

.nota {
  margin: clamp(1rem, 2.2vh, 1.5rem) auto 0;
  max-width: 100%;
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.88rem + 0.15vw, 1.0625rem);   /* 15px → 17px */
  line-height: 1.65;
  letter-spacing: 0.006em;
  color: var(--oliva);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   5. Contato (opcional)
   Estilos prontos: basta descomentar o bloco correspondente no index.html.
   -------------------------------------------------------------------------- */

.contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 30rem;
  margin-inline: auto;
  margin-top: clamp(2rem, 4.5vh, 2.75rem);
  padding-top: clamp(1.5rem, 3.4vh, 2rem);
  border-top: 1px solid var(--linha);
}

.contato__rotulo {
  margin-bottom: 0.3rem;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--oliva);
}

.contato__link {
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--texto);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.contato__link:hover,
.contato__link:focus-visible {
  color: var(--oliva);
  border-bottom-color: rgba(111, 102, 70, 0.42);
}


/* --------------------------------------------------------------------------
   6. Rodapé discreto
   -------------------------------------------------------------------------- */

.rodape {
  display: grid;
  justify-items: center;
  padding: 0 clamp(1.5rem, 6vw, 3rem) clamp(1.75rem, 4vh, 2.5rem);
}

.rodape__interno {
  width: 100%;
  max-width: var(--coluna);
  padding-top: clamp(1.25rem, 2.6vh, 1.75rem);
  border-top: 1px solid var(--linha);
}

.rodape__interno { text-align: center; }

.rodape p {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-indent: 0.22em;   /* compensa o tracking no texto centrado */
  color: var(--discreto);
}


/* --------------------------------------------------------------------------
   7. Entrada suave e discreta
   -------------------------------------------------------------------------- */

@keyframes surgir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Só opacidade: o rodapé encosta no fim do 100dvh e um translate
   empurraria a área de rolagem, piscando a barra durante o carregamento. */
@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes crescer {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

.marca    { animation: surgir 0.7s ease-out 0.05s both; }
.tracinho { animation: crescer 0.7s ease-out 0.18s both; transform-origin: center; }
.titulo   { animation: surgir 0.7s ease-out 0.26s both; }
.texto    { animation: surgir 0.7s ease-out 0.36s both; }
.nota     { animation: surgir 0.7s ease-out 0.46s both; }
.contato  { animation: surgir 0.7s ease-out 0.54s both; }
.rodape   { animation: aparecer 0.7s ease-out 0.62s both; }

@media (prefers-reduced-motion: reduce) {
  .marca, .tracinho, .titulo, .texto, .nota, .contato, .rodape {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   8. Responsivo
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 768px) {
  .texto { max-width: 28rem; }
}

/* Mobile */
@media (max-width: 480px) {
  .texto    { max-width: none; }
  .nota     { max-width: none; }
  .tracinho { width: 2.5rem; }
  .rodape p { font-size: 0.5625rem; letter-spacing: 0.18em; }
}

/* Telas de pouca altura — comprime o respiro vertical */
@media (max-height: 620px) {
  .palco    { padding-top: clamp(2rem, 5vh, 3rem); padding-bottom: clamp(2rem, 5vh, 3rem); }
  .tracinho { margin: 1.5rem 0 1.25rem; }
  .texto    { margin-top: 1rem; }
  .nota     { margin-top: 0.875rem; }
}