/* Humberto Bergamini, link na bio
   Paleta amostrada da foto: o céu da janela vira o fundo e a moldura de madeira
   vira a ação de agendar. A madeira aparece só onde se marca uma conversa. */

:root {
  --ceu: #E8F0F5;
  --ceu-press: #D8E4EB;
  --tinta: #16242F;
  --tinta-suave: #4A5B69;
  --madeira: #703E24;
  --madeira-press: #5A311C;
  --linha: #C6D3DC;
  --branco: #FFFFFF;
  --parede: #A18970;

  --f-voz: "Literata", Georgia, "Times New Roman", serif;
  --f-texto: "Hanken Grotesk", "Segoe UI", Roboto, Arial, sans-serif;

  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-foco: 700ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  --maxw: 480px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ceu);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--ceu);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, address { margin: 0; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--branco);
  font-weight: 600;
}
.pular:focus { top: calc(12px + var(--safe-top)); }

.pagina {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

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

.foto {
  position: relative;
  overflow: hidden;
  background: var(--parede);
}

.foto img {
  width: 100%;
  height: 52vh;
  height: 52svh;
  min-height: 280px;
  max-height: 560px;
  object-fit: cover;
  object-position: 62% 34%;
}

/* Assinatura: ajuste de foco. Uma miniatura desfocada cobre a foto enquanto ela
   carrega e sai em fade quando a imagem nítida está pronta. O desfoque é estático;
   só opacity e transform animam. Sem JavaScript, nada disso acontece. */
.foto::after {
  content: "";
  position: absolute;
  inset: -32px;
  opacity: 0;
  filter: blur(18px);
  pointer-events: none;
}

.foto.is-focando::after {
  opacity: 1;
  background: var(--parede) url("foto-foco.webp") 62% 34% / cover no-repeat;
}

.foto.is-focando img { transform: scale(1.035); }

.foto.is-nitida::after {
  opacity: 0;
  transition: opacity var(--motion-foco) var(--ease-enter);
}

.foto.is-nitida img {
  transform: none;
  transition: transform var(--motion-foco) var(--ease-enter);
}

.abertura__texto { padding: 24px var(--gutter) 0; }

.frase {
  max-width: 14em;
  font-family: var(--f-voz);
  font-size: clamp(30px, 8.6vw, 36px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.nome {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.papel {
  margin-top: 2px;
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.45;
}

.crp { display: block; }

.btn-agendar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  padding: 14px 20px;
  border-radius: 8px;
  background: var(--madeira);
  color: var(--branco);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.btn-agendar .fa-whatsapp { font-size: 22px; }

.btn-agendar:active {
  transform: scale(var(--press-scale));
  background: var(--madeira-press);
}

/* --------------------------------------------------------------- seções */

.comecar,
.formatos,
.local,
.redes { padding: 0 var(--gutter); }

.comecar { margin-top: 56px; }
.formatos { margin-top: 52px; }
.local { margin-top: 52px; }
.redes { margin-top: 44px; }

.sec-titulo {
  font-family: var(--f-voz);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ------------------------------------------------------------ passos */

.passos {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.passo {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: baseline;
}

.passo__num {
  font-family: var(--f-voz);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--tinta-suave);
}

.passo__titulo {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.passo__texto {
  max-width: 34ch;
  margin-top: 3px;
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.5;
}

/* ------------------------------------------------------------- linhas */

.linhas {
  margin-top: 14px;
  border-top: 1px solid var(--linha);
}

.linhas li,
.redes { border-bottom: 1px solid var(--linha); }

.redes { border-top: 1px solid var(--linha); padding: 0; margin-inline: var(--gutter); }

/* A linha ocupa a largura toda para o toque; o recuo volta no padding. */
.linha {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 12px var(--gutter);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-instant) var(--ease-standard);
}

.linha:active { background: var(--ceu-press); }
.linha:focus-visible { outline-offset: -3px; }

.linha__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linha__titulo {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.linha__texto {
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.4;
}

.linha__icone {
  flex: 0 0 auto;
  color: var(--madeira);
  font-size: 24px;
}

.linha__marca {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--linha);
  font-size: 22px;
}

.nota {
  margin-top: 12px;
  color: var(--tinta-suave);
  font-size: 14px;
}

/* ------------------------------------------------------------ local */

.local__endereco {
  margin-top: 10px;
  font-size: 16px;
}

.btn-rota {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--tinta);
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.btn-rota:active {
  transform: scale(var(--press-scale));
  background: var(--ceu-press);
}

/* ------------------------------------------------------ apoio e rodapé */

.apoio {
  margin-top: 36px;
  padding: 0 var(--gutter);
  color: var(--tinta-suave);
  font-size: 14px;
  line-height: 1.5;
}

.apoio a {
  display: inline-block;
  margin: -12px 0;
  padding: 12px 0;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gutter) calc(32px + var(--safe-bottom));
  color: var(--tinta-suave);
  font-size: 13px;
}

/* ------------------------------------------------------ interação fina */

@media (hover: hover) and (pointer: fine) {
  .btn-agendar:hover { background: var(--madeira-press); }
  .linha:hover { background: var(--ceu-press); }
  .btn-rota:hover { background: var(--ceu-press); }
}

/* Telas baixas: a foto cede espaço para o botão continuar na primeira tela. */
@media (max-height: 640px) {
  .foto img {
    height: 42vh;
    height: 42svh;
    min-height: 220px;
  }
}

@media (min-width: 520px) {
  .foto {
    margin: calc(32px + var(--safe-top)) var(--gutter) 0;
    border-radius: 10px;
  }
  .foto img {
    height: 58vh;
    height: 58svh;
    min-height: 320px;
    max-height: 540px;
  }
  .abertura__texto { padding-top: 28px; }
}

/* ---------------------------------------------------------- reduced motion
   A foto já nasce nítida, sem véu nem escala. O toque muda cor, sem encolher.
   Nenhuma informação depende de movimento. */
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; }
  .foto.is-focando::after { display: none; }
  .foto.is-focando img { transform: none; }
}