/**
 * A folha da página do condomínio.
 *
 * ELA NÃO HERDA OS TOKENS DE `src/estilos/tokens.css`, e isso é decisão, não
 * esquecimento. Aquela paleta serve a um TERMINAL DE LOGÍSTICA (spec §6.3):
 * claro duro, canto reto, cor semântica gritando estado, porque o porteiro
 * está de pé com uma caixa na mão. Esta página é o endereço de um lugar onde
 * duas mil pessoas moram. O registro é outro — papel quente, verde-tinta,
 * serifa no display — e o único fio que liga as duas é o verde: o
 * `--verde` daqui é primo do `--cor-acao` de lá, não um verde qualquer.
 */

:root {
  color-scheme: light;

  /* Papel, não interface: o branco tem um grão quente que o cinza-azulado do
     sistema não tem. */
  --papel: oklch(97.5% 0.008 85);
  --papel-2: oklch(94.5% 0.012 85);
  --papel-3: oklch(91% 0.014 85);

  --tinta: oklch(23% 0.02 155);
  --tinta-fraca: oklch(45% 0.018 155);
  --borda: oklch(87% 0.014 85);
  --borda-forte: oklch(74% 0.02 85);
  --inverso: oklch(97.5% 0.008 85);

  /* O institucional. Primo do `--cor-acao: oklch(46% 0.14 150)` do sistema,
     puxado para mais escuro e menos saturado: assina, não chama. */
  --verde: oklch(34% 0.075 155);
  --verde-forte: oklch(27% 0.06 155);
  --verde-fraco: oklch(90% 0.035 155);

  /* Latão. Um acento só, e ele marca hierarquia — número, fio, marcador —
     nunca preenche área. */
  --latao: oklch(68% 0.1 78);

  --toque-minimo: 48px;

  --texto-micro: 0.78rem;
  --texto-base: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --texto-alto: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --texto-secao: clamp(2rem, 1.35rem + 2.8vw, 3.75rem);
  --texto-abertura: clamp(2.75rem, 1.2rem + 6.6vw, 6.5rem);
  --texto-numero: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);

  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-6: 1.5rem;
  --espaco-8: 2rem;
  --espaco-12: 3rem;
  --espaco-secao: clamp(4rem, 2.5rem + 7vw, 9rem);

  --raio: 3px;
  --raio-redondo: 999px;

  --duracao-rapida: 140ms;
  --duracao-entrada: 560ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  --fonte-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Geist', system-ui, -apple-system, sans-serif;

  --coluna: min(100% - 2.5rem, 74rem);
}

@media (min-width: 40rem) {
  :root {
    --coluna: min(100% - 5rem, 74rem);
  }
}

/* ------------------------------------------------------------------- base */

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

body,
body * {
  min-width: 0;
}

html {
  background: var(--papel);
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--latao);
  outline-offset: 3px;
}

.invisivel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  top: var(--espaco-2);
  left: var(--espaco-2);
  z-index: 10;
  border-radius: var(--raio);
  background: var(--verde);
  padding: var(--espaco-3) var(--espaco-4);
  color: var(--inverso);
  text-decoration: none;
  transform: translateY(-200%);
}

.pular:focus {
  transform: translateY(0);
}

.faixa-interna {
  width: var(--coluna);
  margin-inline: auto;
}

/* O rótulo é em Geist com entreletra aberta, e NÃO em monoespaçada: a mono é
   a voz do sistema de entregas, onde ela existe para alinhar dígito com
   dígito. Aqui não há dado tabular para alinhar — haveria só imitação. */
.rotulo {
  display: block;
  color: var(--tinta-fraca);
  font-size: var(--texto-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.display {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--borda);
  background: color-mix(in oklab, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
}

.barra > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: 4.5rem;
  padding-block: var(--espaco-3);
}

.marca {
  font-family: var(--fonte-display);
  font-size: var(--texto-alto);
  letter-spacing: -0.01em;
  line-height: 1;
}

.barra nav ul {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.barra nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  border-radius: var(--raio);
  padding-inline: var(--espaco-3);
  font-size: var(--texto-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--duracao-rapida) var(--curva);
}

.barra nav a:hover {
  background: var(--papel-3);
}

.barra nav .destaque {
  border: 1px solid var(--verde);
  color: var(--verde);
}

.barra nav .destaque:hover {
  background: var(--verde);
  color: var(--inverso);
}

/* Abaixo de 30rem a navegação some da barra: três alvos de 48px e a marca não
   cabem em 320px sem espremer o toque. Os mesmos destinos continuam no corpo
   da página e no rodapé — nada fica inalcançável. */
@media (max-width: 29.99rem) {
  .barra nav {
    display: none;
  }
}

/* --------------------------------------------------------------- abertura */

.abertura {
  padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) var(--espaco-secao);
}

.abertura > div {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: end;
}

/* A coluna do texto é maior que a da imagem, e elas se alinham pela BASE e
   não pelo topo: é o que tira a página do par de blocos iguais. */
@media (min-width: 60rem) {
  .abertura > div {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

.abertura h1 {
  margin-block: var(--espaco-6) var(--espaco-6);
  font-size: var(--texto-abertura);
}

/* A segunda linha do nome recua e vira itálico: o nome próprio ganha peso
   editorial sem precisar de outra cor nem de outro tamanho. */
.abertura h1 em {
  display: block;
  margin-left: 0.08em;
  color: var(--verde);
  font-style: italic;
}

.abertura p {
  max-width: 48ch;
  color: var(--tinta-fraca);
  font-size: var(--texto-alto);
  line-height: 1.4;
  text-wrap: pretty;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin-top: var(--espaco-8);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 56px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: transparent;
  padding-inline: var(--espaco-6);
  font-family: inherit;
  font-size: var(--texto-base);
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--duracao-rapida) var(--curva),
    border-color var(--duracao-rapida) var(--curva),
    transform var(--duracao-rapida) var(--curva);
}

.botao:hover {
  border-color: var(--tinta);
  background: var(--papel-2);
}

.botao:active {
  transform: translateY(1px);
}

.botao--primario {
  border-color: var(--verde);
  background: var(--verde);
  color: var(--inverso);
}

.botao--primario:hover {
  border-color: var(--verde-forte);
  background: var(--verde-forte);
}

/* ---------------------------------------------------- a placa (vaga da foto) */

/*
 * O lugar da fachada, antes de a fachada existir.
 *
 * NÃO é um retângulo cinza com um ícone de imagem: isso anuncia página
 * inacabada. É uma placa tipográfica que se sustenta sozinha hoje e que a
 * foto substitui depois SEM tocar no layout — mesmo `aspect-ratio`, mesmo
 * lugar na grade. Trocar é apagar o conteúdo da placa e pôr a `<img>`.
 */
.placa {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--verde-forte);
  padding: var(--espaco-8);
  color: var(--inverso);
  text-align: center;
}

/* Grão. Duas tramas de gradiente cruzadas em opacidade baixa — sem imagem,
   sem requisição, e o verde chapado deixa de parecer plástico. */
.placa::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      oklch(100% 0 0 / 0.045) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      0deg,
      oklch(0% 0 0 / 0.05) 0 1px,
      transparent 1px 3px
    );
}

.placa > * {
  position: relative;
}

.placa .rotulo {
  color: oklch(85% 0.03 155);
}

.placa p {
  margin-top: var(--espaco-4);
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 1rem + 3.4vw, 3.25rem);
  line-height: 0.98;
}

.placa p em {
  display: block;
  color: var(--latao);
  font-style: italic;
}

/* O fio de latão sob a placa: assinatura, e a única linha de cor forte da
   abertura. */
.placa::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--latao);
}

/* ----------------------------------------------------------------- números */

.numeros {
  border-block: 1px solid var(--borda);
  background: var(--papel-2);
  padding-block: var(--espaco-12);
}

.numeros dl {
  display: grid;
  gap: var(--espaco-8) var(--espaco-6);
}

@media (min-width: 44rem) {
  .numeros dl {
    grid-template-columns: repeat(3, 1fr);
  }
}

.numeros div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--espaco-2);
}

.numeros dt {
  color: var(--tinta-fraca);
  font-size: var(--texto-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.numeros dd {
  font-family: var(--fonte-display);
  font-size: var(--texto-numero);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------- serviços */

.servicos {
  padding-block: var(--espaco-secao);
}

.cabeca-secao {
  margin-bottom: var(--espaco-12);
}

.cabeca-secao h2 {
  /* O `ch` resolve contra a fonte DO PRÓPRIO elemento, então 16ch aqui, a
     60px de serifa, é largura de manchete — e não os ~190px que dariam 30ch
     medidos no corpo do texto, que quebravam o título em cinco linhas. */
  max-width: 16ch;
  margin-top: var(--espaco-4);
  font-size: var(--texto-secao);
}

/* A CLASSE É NECESSÁRIA, e a lição custou um layout: `.servicos > div > div`
   parecia designar os dois cartões, mas `.cabeca-secao` também é um `div`
   filho da faixa — e virava grade de duas colunas, com o rótulo numa e o
   título espremido na outra. Seletor por posição casa com o que ainda não
   existe. */
.grade-servicos {
  display: grid;
  gap: var(--espaco-6);
  align-items: start;
}

/* Assimétrico: entregas é o serviço que já existe e tem para onde levar, e
   ocupa mais largura que o quadro de telefones. */
@media (min-width: 58rem) {
  .grade-servicos {
    grid-template-columns: 1fr 1.15fr;
  }
}

/* O cartão de encomendas ficou com título, uma linha e um botão. Centrado na
   vertical ele lê como ação; alinhado ao topo, leria como cartão cortado pela
   metade ao lado de um vizinho mais alto. */
.cartao--destaque {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.cartao {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel-2);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.cartao h3 {
  margin-bottom: var(--espaco-4);
  font-family: var(--fonte-display);
  font-size: var(--texto-secao);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cartao > p {
  max-width: 52ch;
  color: var(--tinta-fraca);
  text-wrap: pretty;
}

.cartao--destaque {
  border-color: var(--verde);
  background: var(--verde-fraco);
}

.cartao--destaque .botao {
  margin-top: var(--espaco-6);
}

/* --------------------------------------------------------------- contatos */

.contatos {
  display: grid;
  gap: var(--espaco-4);
  margin-top: var(--espaco-6);
}

.contatos > div {
  display: grid;
  gap: var(--espaco-1);
  border-top: 1px solid var(--borda);
  padding-top: var(--espaco-4);
}

.contatos dt {
  font-size: var(--texto-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contatos dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
}

/* O telefone é um alvo de toque de verdade no celular, e não um texto que se
   espera que a pessoa selecione e copie. */
.contatos a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  font-family: var(--fonte-display);
  font-size: var(--texto-alto);
  letter-spacing: -0.01em;
  text-decoration-color: var(--borda-forte);
  text-underline-offset: 0.2em;
}

.contatos a:hover {
  color: var(--verde);
  text-decoration-color: var(--verde);
}

.contatos small {
  color: var(--tinta-fraca);
  font-size: var(--texto-micro);
}

/* ------------------------------------------------------------ localização */

.local {
  border-top: 1px solid var(--borda);
  background: var(--papel-2);
  padding-block: var(--espaco-secao);
}

.local > div {
  display: grid;
  gap: var(--espaco-8);
  align-items: start;
}

@media (min-width: 52rem) {
  .local > div {
    grid-template-columns: 1fr 1fr;
  }
}

.local address {
  font-family: var(--fonte-display);
  font-size: var(--texto-secao);
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.local .rotulo {
  margin-bottom: var(--espaco-4);
}

.local .botao {
  margin-top: var(--espaco-6);
}

/* ----------------------------------------------------------------- rodapé */

.rodape {
  background: var(--verde-forte);
  color: oklch(84% 0.025 155);
  padding-block: var(--espaco-12);
  font-size: var(--texto-micro);
}

.rodape > div {
  display: grid;
  gap: var(--espaco-8);
}

@media (min-width: 48rem) {
  .rodape > div {
    grid-template-columns: 1.4fr 1fr;
  }
}

.rodape .marca {
  display: block;
  margin-bottom: var(--espaco-3);
  color: var(--inverso);
}

.rodape p {
  max-width: 56ch;
  line-height: 1.7;
}

.rodape ul {
  display: grid;
}

/* MEDIDO a 320px: estes três links saíam com 17px de altura. São a única
   navegação que sobra no celular, já que a barra esconde a dela abaixo de
   30rem — os menores alvos da página eram justamente os únicos. */
.rodape ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
}

.rodape a {
  text-underline-offset: 0.25em;
}

.rodape a:hover {
  color: var(--latao);
}

/* ----------------------------------------------------------------- entrada */

[data-entra] {
  transition:
    opacity var(--duracao-entrada) var(--curva),
    transform var(--duracao-entrada) var(--curva);
}

/* O SELETOR É `='oculto'`, e não `[data-entra]`: o atributo já vem no HTML,
   então esconder por ele deixaria a página invisível justamente quando o
   script não roda. Quem escreve `oculto` é o script, depois de existir. */
[data-entra='oculto'] {
  opacity: 0;
  transform: translateY(1.25rem);
}

[data-entra='visivel'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-entra],
  [data-entra='oculto'],
  [data-entra='visivel'] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* A impressão é o outro caminho que nunca rola: sem esta regra, a folha sai
   com abertura e rodapé e o miolo em branco. */
@media print {
  [data-entra],
  [data-entra='oculto'] {
    opacity: 1;
    transform: none;
  }

  .barra {
    position: static;
  }
}