/* Studio Amisa — sistema da página
   Decisões em https://github.com/markx3/amisa/issues/8 */

/* ---- Fontes da marca ----
   Helvetica Bold nos títulos, Codec Pro no corpo. A licença de Isadora cobre
   uso na web nas duas. Os arquivos woff2 ainda não chegaram (issue #15).

   Até lá a página usa a pilha substituta abaixo. Quando os arquivos chegarem,
   ponha-os em assets/fonte/ e descomente este bloco. A regra é font-display:
   swap com size-adjust, para o texto aparecer na hora e a troca não saltar.
   Meça o size-adjust contra Arial e ajuste o número antes de publicar.

@font-face {
  font-family: 'Helvetica Marca';
  src: url('assets/fonte/helvetica-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Codec Pro';
  src: url('assets/fonte/codec-pro-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Codec Pro Substituta';
  src: local('Arial'), local('Helvetica');
  size-adjust: 100%;
}
*/

:root {
  /* Cores — valores dos vetores de Isadora */
  --vinho: #70141A;
  --offwhite: #F1F0ED;
  --preto: #161616;
  --azul: #96B2C8;

  /* Unidade de espaço. Toda distância vertical é múltiplo dela. */
  --u: clamp(1.6rem, 4vw, 3rem);
  --coluna: 1040px;

  /* Escala tipográfica — cinco degraus, razão 1,4, display salta 1,8
     O display escala por largura e por altura. Só vw estoura a tela em
     monitor largo e baixo: o título vem maior que o espaço vertical.
     Teto de 5,5rem porque a copy da abertura tem 73 caracteres — acima disso
     ela quebra em cinco linhas e passa da primeira tela. */
  --t-display: clamp(2.6rem, min(8.5vw, 12svh), 5.5rem);
  --t-titulo: clamp(2rem, 5vw, 3.2rem);
  --t-servico: clamp(1.4rem, 2.4vw, 1.75rem);
  --t-corpo: clamp(1.05rem, 1.6vw, 1.25rem);
  --t-apoio: clamp(0.8rem, 1vw, 0.9rem);

  --fonte-titulo: 'Helvetica Marca', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fonte-corpo: 'Codec Pro', 'Codec Pro Substituta', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vinho);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* ---- Seção ---- */

.secao {
  position: relative;
  padding: calc(var(--u) * 3.5) var(--u);
}

/* Cuidado: estas duas regras precisam continuar depois de .secao, ou com
   :not(.secao--faixa) nela. O cabeçalho e o rodapé são faixas finas; se uma
   regra de .secao vencer aqui, os dois ganham padding de seção inteira e o
   hero é empurrado para fora da primeira tela. */
.secao--faixa { padding-block: var(--u); }
footer.secao--faixa { padding-block: calc(var(--u) * 2); }

.interno {
  max-width: var(--coluna);
  margin-inline: auto;
}

/* Seção rotulada: rótulo na coluna estreita, conteúdo na larga. Empilhado
   numa coluna só, o lado direito da tela ficava morto nas sete seções. */
@media (min-width: 900px) {
  .interno:has(> .rotulo) {
    display: grid;
    grid-template-columns: 9rem 1fr;
    column-gap: calc(var(--u) * 1.5);
  }

  /* Cada filho na coluna larga, um por linha. O rótulo fica sozinho na
     estreita. `grid-row: 1 / -1` não serve aqui: o -1 aponta para a última
     linha explícita, e esta grade só tem linhas implícitas. */
  .interno:has(> .rotulo) > * { grid-column: 2; }

  .interno:has(> .rotulo) > .rotulo {
    grid-column: 1;
    grid-row: 1;
    padding-block-start: 0.5em;
  }
}

.secao--vinho { background: var(--vinho); color: var(--offwhite); }
.secao--claro { background: var(--offwhite); color: var(--preto); }

/* ---- Abertura em tela cheia ----
   A abertura desconta o cabeçalho da altura da tela: 80px do logo (180px de
   largura, na proporção 737x329) mais o padding dele. Sem o desconto, o hero
   soma uma tela ao logo e o título nasce abaixo da dobra. */

#abertura {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: calc(var(--u) * 1.5);
}

@media (min-height: 640px) {
  #abertura { min-height: calc(100svh - 80px - var(--u) * 2); }
}

/* Em janela baixa muda o respiro vertical, e só ele. Logo e tipografia ficam
   no tamanho de sempre: encolher os dois faz a página parecer de celular numa
   tela larga. O botão da abertura fica uma rolagem abaixo, e isso é aceito —
   a página tem outras três âncoras de WhatsApp. */
@media (max-height: 640px) {
  #abertura { padding-block: calc(var(--u) * 1.25); }
}

/* Asterisco em escala de marca-d'água, sangrando pela direita. Só na abertura. */
#abertura::before {
  content: "";
  position: absolute;
  right: -12vw;
  top: 50%;
  translate: 0 -50%;
  width: min(62vw, 90svh);
  height: min(62vw, 90svh);
  background-color: var(--offwhite);
  opacity: 0.12;
  -webkit-mask: url('assets/simbolo-offwhite.svg') center / contain no-repeat;
  mask: url('assets/simbolo-offwhite.svg') center / contain no-repeat;
  pointer-events: none;
}

#abertura .interno { position: relative; }

/* Asterisco: assinatura no canto inferior esquerdo, 34px fixos, recuo de 1u.
   Ele marca cada campo de cor. O cabeçalho e o rodapé não recebem um próprio,
   porque cada um continua o campo vinho da seção vizinha. */
.secao--assina::after {
  content: "";
  position: absolute;
  left: var(--u);
  bottom: var(--u);
  width: 34px;
  height: 34px;
  -webkit-mask: url('assets/simbolo-offwhite.svg') center / contain no-repeat;
  mask: url('assets/simbolo-offwhite.svg') center / contain no-repeat;
}

.secao--vinho.secao--assina::after { background-color: var(--offwhite); }
.secao--claro.secao--assina::after { background-color: var(--vinho); }

/* ---- Tipografia ---- */

.display, .titulo, .servico h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0;
}

/* 1.15 é o piso, não uma escolha de gosto. A caixa de fundo do .destaque tem
   a altura natural da fonte, cerca de 1,15em. Com line-height menor ela invade
   a linha de cima e cobre os descendentes — o "p" de "para" saía cortado. */
.display { font-size: var(--t-display); line-height: 1.15; letter-spacing: -0.05em; }
.titulo { font-size: var(--t-titulo); line-height: 0.95; }
.servico h3 { font-size: var(--t-servico); line-height: 1.05; }

.corpo { font-size: var(--t-corpo); }
.apoio { font-size: var(--t-apoio); }

.medida { max-width: 46ch; }

/* ---- Rótulo ----
   O terceiro papel tipográfico. Sem ele a página só tem display e corpo, e
   toda linha de apoio some. Caixa alta e tracking aberto: a voz de legenda. */

.rotulo {
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.4;
  margin: 0;
  opacity: 0.65;
}

/* ---- Destaque ----
   O asterisco da marca no lugar da caixa de fundo. A caixa lia como
   marca-texto, e a altura dela invadia a linha de cima. O asterisco é o mesmo
   símbolo do logo, e mantém o azul nos dois usos que #8 fixou. */

.destaque::after {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-inline-start: 0.06em;
  vertical-align: 0.52em;
  background-color: var(--azul);
  /* A máscara recorta a forma e a cor vem do background-color, então serve
     qualquer variante do símbolo. simbolo-azul.svg não está em assets/. */
  -webkit-mask: url('assets/simbolo-offwhite.svg') center / contain no-repeat;
  mask: url('assets/simbolo-offwhite.svg') center / contain no-repeat;
}

/* ---- Botão ---- */

.botao {
  display: inline-block;
  background: var(--azul);
  color: var(--vinho);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-corpo);
  letter-spacing: -0.02em;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background-color 0.25s, color 0.25s;
}

/* Off-white sobre vinho: o par de contraste já validado em #8. */
.botao:hover, .botao:focus-visible {
  transform: translateY(-3px);
  background: var(--offwhite);
  color: var(--vinho);
}

/* O hover ficou rico, então o teclado precisa acompanhar. */
:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

/* ---- Ritmo vertical ---- */

.display + .corpo,
.titulo + .corpo,
.titulo + .apoio,
.titulo + .botao,
.corpo + .botao { margin-block-start: var(--u); }

.apoio + .etapas,
.apoio + .grade { margin-block-start: calc(var(--u) * 1.25); }

/* ---- Etapas ---- */

.etapas {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}

.etapas li {
  counter-increment: etapa;
  max-width: 46ch;
}

.etapas li + li { margin-block-start: var(--u); }

/* Três colunas: as etapas são uma sequência real, e lado a lado elas ocupam
   a largura que sobrava à direita. */
@media (min-width: 900px) {
  .etapas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--u);
  }

  .etapas li { max-width: none; }
  .etapas li + li { margin-block-start: 0; }
}

.etapas li::before {
  content: counter(etapa);
  display: block;
  margin-block-end: 0.15em;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-titulo);
  line-height: 1;
  color: var(--vinho);
  opacity: 0.35;
}

/* ---- Serviços ----
   Grade de duas colunas. Empilhados, os cinco blocos viravam uma coluna longa
   e monótona. Na grade a borda entre blocos perde o sentido. */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: calc(var(--u) * 2);
}

.servico ul {
  margin: var(--u) 0 0;
  padding: 0;
  list-style: none;
}

.servico h3 { transition: color 0.25s; }
.servico:hover h3 { color: var(--vinho); }

.servico li + li { margin-block-start: 0.4em; }

.preco {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: var(--t-corpo);
  letter-spacing: 0;
}

/* ---- Revelação ----
   O título sobe palavra a palavra de dentro de uma máscara. O JS envolve cada
   palavra em .p > .pi sem tocar nos elementos, então o .destaque sobrevive.
   Os blocos de texto entram com um fade curto. */

.p {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Folga em cima e embaixo. A máscara recorta o próprio conteúdo: sem folga
     no topo ela corta os acentos (é, ê, á), e sem folga embaixo corta os
     descendentes (ç, p, g). A margem negativa devolve o espaço ao fluxo, para
     a caixa de linha não crescer. */
  padding-block: 0.2em 0.22em;
  margin-block: -0.2em -0.22em;
}

.pi {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.75s cubic-bezier(.2,.85,.25,1);
}

.dentro .pi { transform: none; }

[data-revela] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-revela].dentro {
  opacity: 1;
  transform: none;
}

/* ---- Cursor ----
   A bolinha substitui o cursor do sistema. Duas travas, porque esconder o
   cursor nativo tira de quem configurou cursor grande ou de alto contraste
   essa configuração:
   1. só onde existe mouse fino, nunca no toque;
   2. só com a classe que o JavaScript põe — se o script falhar, o cursor do
      sistema continua lá, em vez de a página ficar sem cursor nenhum. */

@media (hover: hover) and (pointer: fine) {
  html.cursor-proprio,
  html.cursor-proprio * { cursor: none; }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--offwhite);
  mix-blend-mode: difference;
  pointer-events: none;
  translate: -50% -50%;
  transition: scale 0.25s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
  opacity: 0;
}

/* Só aparece depois do primeiro movimento: sem isso ela nasce no canto
   superior esquerdo, onde o ponteiro não está. */
.cursor.ativo { opacity: 1; }

.cursor.perto { scale: 2.6; }

/* Some quando o ponteiro sai da janela, para o sistema reassumir. */
.cursor.fora { opacity: 0; }

/* Rastro: pontos que seguem a bolinha em cadeia, cada um menor e mais fraco
   que o anterior. O JavaScript cria e posiciona; o CSS só descreve a forma. */
.rastro span {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  border-radius: 999px;
  background: var(--offwhite);
  mix-blend-mode: difference;
  pointer-events: none;
  translate: -50% -50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.rastro.ativo span { opacity: 1; }
.rastro.fora span { opacity: 0; }

/* Sem rastro para quem pediu menos movimento. A bolinha principal fica. */
@media (prefers-reduced-motion: reduce) {
  .rastro { display: none; }
}

@media (hover: none) {
  .cursor { display: none; }
}

/* ---- Rodapé ---- */

/* Os vetores em assets/ têm a viewBox recortada no desenho. Os originais de
   docs/marca/svg/ usam uma prancheta quadrada de 1080, com folga em volta. */
.logo { width: 180px; height: auto; display: block; }
.logo--pequeno { width: 120px; }

.rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u); }

.rodape .apoio {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--u);
}

.rodape a { color: inherit; position: relative; text-decoration: none; }

/* Sublinhado que cresce da esquerda e sai pela direita. */
.rodape a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.rodape a:hover::after,
.rodape a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Botão flutuante, só no celular ---- */

.flutuante { display: none; }

@media (max-width: 640px) {
  .flutuante {
    display: block;
    position: fixed;
    left: var(--u);
    right: var(--u);
    bottom: var(--u);
    z-index: 10;
    background: var(--azul);
    color: var(--vinho);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--t-corpo);
    text-align: center;
    text-decoration: none;
    padding: 0.85em 1.5em;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }

  .flutuante.visivel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flutuante { transition: none; }
  [data-revela] { opacity: 1; transform: none; transition: none; }
  .pi { transform: none; transition: none; }
  .botao, .rodape a::after, .servico h3, .cursor { transition: none; }
}