/* artesaná. — landing em formato de vitrine de loja.
   Tokens de cor vêm de app/css/variables.css. */
:root {
  --font-title: 'Lexend Exa', 'Poppins', system-ui, sans-serif;
  --largura: 1180px;
  --canto: 4px;
  --borda: #ECE4DE;
  --cinza: #6B5A5D;
  --ouro-claro: #F4E3B5;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55;
  color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.wrap { width: min(100% - 40px, var(--largura)); margin-inline: auto; }
.pular { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white); padding: 10px 16px; z-index: 50; }
.pular:focus { left: 8px; top: 8px; }

.wordmark { font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--peach-d); white-space: nowrap; }
.wordmark b { font-weight: 700; }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border: 1px solid var(--moss); border-radius: var(--canto);
  background: var(--moss); color: var(--white); font-weight: 600; font-size: 14.5px;
  text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s;
}
.botao:hover { background: var(--moss-d); border-color: var(--moss-d); }
.botao.claro { background: var(--white); color: var(--ink); border-color: var(--ink); }
.botao.claro:hover { background: var(--cream); }
.botao.cheio { width: 100%; }
.botao.inativo { color: var(--cinza); border-color: var(--borda); cursor: default; }
.botao.inativo:hover { background: var(--white); }

/* faixa de aviso e cabeçalho */
.aviso { background: var(--moss-d); color: var(--cream); text-align: center; font-size: 13px; padding: 7px 16px; }
.topo { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--borda); }
.topo-linha { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.marca { font-size: 32px; text-decoration: none; }
.menu { display: flex; gap: 28px; margin-inline: auto; font-family: var(--font-title); font-size: 12.5px; letter-spacing: 0.02em; }
.menu a { text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover { border-bottom-color: var(--peach-d); }

/* banner */
.banner { background: var(--peach); overflow: hidden; }
.banner-grade { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 32px; padding-block: 44px; }
.banner h1 { font-size: clamp(32px, 4.3vw, 54px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; max-width: 15ch; }
.banner .sub { font-size: 17px; max-width: 46ch; margin: 18px 0 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

.cena { position: relative; height: 490px; }
.fone {
  position: absolute; right: 8%; top: 0; width: 218px; aspect-ratio: 375 / 812;
  border: 8px solid var(--ink); border-radius: 32px; background: var(--white); overflow: hidden;
  box-shadow: 0 30px 44px -22px rgba(44, 26, 30, 0.55);
}
.fone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.selo {
  position: absolute; left: 4%; top: 34px; width: 200px; aspect-ratio: 1; border-radius: 50%;
  background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px; transform: rotate(-9deg);
  box-shadow: 0 16px 28px -14px rgba(44, 26, 30, 0.5);
}
.selo-marca { font-size: 23px; letter-spacing: -0.03em; line-height: 1; }
.selo-marca b, .tag-marca b { font-weight: 700; }
.selo-produto { font-weight: 600; font-size: 14.5px; line-height: 1.15; margin-top: 6px; }
.selo-frase { font-style: italic; font-size: 11.5px; margin-top: 4px; }
.selo-peso { font-weight: 600; font-size: 11.5px; margin-top: 4px; }
.tag {
  position: absolute; right: calc(8% + 168px); bottom: 26px; width: 128px; height: 204px; border-radius: 6px;
  background: var(--moss); color: var(--cream); padding: 46px 14px 14px; transform: rotate(-11deg);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 16px 28px -14px rgba(44, 26, 30, 0.55);
}
.tag-furo { position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--peach); }
.tag-furo::after { content: ''; position: absolute; left: 5px; bottom: 6px; width: 54px; height: 40px; border: 2px solid var(--cream); border-color: transparent transparent transparent var(--cream); border-radius: 50%; transform: rotate(32deg); opacity: 0.8; }
.tag-marca { font-size: 17px; letter-spacing: -0.03em; text-align: center; margin-bottom: 6px; white-space: nowrap; }
.tag-texto { font-size: 11.5px; display: flex; align-items: flex-end; gap: 6px; }
.tag-texto i { flex: 1; border-bottom: 1px solid rgba(255, 245, 239, 0.6); height: 14px; }

/* faixa de vantagens */
.vantagens { border-bottom: 1px solid var(--borda); }
.vantagens ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 30px; }
.vantagens li { display: flex; align-items: center; justify-content: center; gap: 14px; }
.vantagens svg { width: 38px; height: 38px; flex-shrink: 0; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vantagens b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 13.5px; letter-spacing: 0.02em; }
.vantagens span { display: block; font-size: 12.5px; color: var(--cinza); }

/* seções de vitrine */
.vitrine { padding-block: 60px 28px; }
.cabeca { text-align: center; margin-bottom: 36px; }
.cabeca h2 { font-family: var(--font-title); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.06em; }
.cabeca p { font-weight: 300; font-size: clamp(15px, 1.9vw, 20px); margin: 4px 0 16px; }
.cabeca::after { content: ''; display: block; width: 30px; height: 3px; margin-inline: auto; background: var(--peach-d); }

.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
.grade.tres { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.grade.duas { grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 860px; margin-inline: auto; }

.produto { display: flex; flex-direction: column; text-align: center; }
.foto {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--cream); border: 1px solid var(--borda); border-radius: var(--canto);
}
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.produto h3 { font-size: 15px; font-weight: 500; margin: 16px 0 4px; }
.produto .desc { font-size: 13px; color: var(--cinza); min-height: 40px; }
.preco { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 10px 0 14px; }
.preco span { display: block; font-size: 12px; font-weight: 400; color: var(--cinza); }
.preco.pequeno { font-size: 13.5px; font-weight: 500; color: var(--cinza); }
.produto .botao { margin-top: auto; min-height: 40px; }

.fita {
  position: absolute; left: 0; top: 14px; z-index: 1; padding: 4px 12px 4px 10px;
  background: var(--ink); color: var(--cream); font-size: 11.5px; font-weight: 500; border-radius: 0 3px 3px 0;
}
.ilustra { display: flex; align-items: center; justify-content: center; }
.ilustra svg { width: 46%; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ilustra svg .cheio { fill: var(--ink); stroke: none; }
.tom-creme { background: var(--cream); }
.tom-pessego { background: var(--peach-l); }
.tom-musgo { background: var(--moss-l); }
.tom-ouro { background: var(--ouro-claro); }

/* estampas: o universo de tecido em CSS */
.estampa.poa {
  background-color: var(--cream);
  background-image: radial-gradient(var(--peach-d) 21%, transparent 22%), radial-gradient(var(--peach-d) 21%, transparent 22%);
  background-size: 38px 38px; background-position: 0 0, 19px 19px;
}
.estampa.listras {
  background: repeating-linear-gradient(90deg, var(--moss) 0 16px, var(--cream) 16px 24px, var(--gold) 24px 28px, var(--cream) 28px 36px);
}
.estampa.vichy {
  background-color: var(--white);
  background-image: linear-gradient(90deg, rgba(222, 144, 96, 0.55) 50%, transparent 50%), linear-gradient(rgba(222, 144, 96, 0.55) 50%, transparent 50%);
  background-size: 44px 44px;
}
.estampa.losango {
  background-color: var(--moss-l);
  background-image:
    linear-gradient(135deg, var(--moss) 25%, transparent 25%), linear-gradient(225deg, var(--moss) 25%, transparent 25%),
    linear-gradient(45deg, var(--moss) 25%, transparent 25%), linear-gradient(315deg, var(--moss) 25%, transparent 25%);
  background-position: 22px 0, 22px 0, 0 0, 0 0; background-size: 44px 44px;
}

/* guias, no lugar do blog */
.post { display: flex; flex-direction: column; }
.capa {
  display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 22px; text-decoration: none;
  border-radius: var(--canto); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.12; letter-spacing: -0.02em;
}
.capa span { max-width: 12ch; }
.post h3 { font-family: var(--font-title); font-weight: 400; font-size: 15px; letter-spacing: 0.02em; margin: 18px 0 6px; }
.post .desc { font-size: 13.5px; color: var(--cinza); }
.post-pe { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 12.5px; }
.post-pe a { font-weight: 600; }
.post-pe span { color: var(--cinza); }

/* instalar */
.passos { border: 1px solid var(--borda); border-radius: var(--canto); padding: 26px; }
.passos h3 { font-family: var(--font-title); font-weight: 400; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 14px; }
.passos ol { counter-reset: passo; display: grid; gap: 12px; }
.passos li { counter-increment: passo; display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; }
.passos li::before {
  content: counter(passo); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--peach); font-weight: 600; font-size: 13px;
}

/* planos */
.plano { display: flex; flex-direction: column; text-align: center; border: 1px solid var(--borda); border-radius: var(--canto); padding: 30px 26px; }
.plano.destaque { border: 2px solid var(--gold); }
.plano h3 { font-family: var(--font-title); font-weight: 400; font-size: 16px; letter-spacing: 0.04em; }
.plano-preco { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 10px 0 18px; }
.plano-preco span { display: block; font-size: 12.5px; font-weight: 400; color: var(--cinza); }
.plano ul { display: grid; gap: 8px; margin-bottom: 24px; font-size: 14px; color: var(--cinza); }
.plano .botao { margin-top: auto; }

/* chamada final */
.chamada { margin-top: 44px; background: var(--cream); border-block: 1px solid var(--borda); }
.chamada-linha { display: flex; align-items: center; gap: 18px; padding-block: 26px; }
.chamada svg { width: 38px; height: 38px; flex-shrink: 0; fill: none; stroke: var(--peach-d); stroke-width: 1.6; }
.chamada p { font-family: var(--font-title); font-size: 14.5px; letter-spacing: 0.02em; margin-right: auto; }

/* rodapé */
.rodape { padding-top: 48px; }
.rodape-grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 36px; padding-bottom: 40px; }
.rodape .wordmark { font-size: 36px; display: inline-block; margin-bottom: 10px; }
.rodape h2 { font-family: var(--font-title); font-weight: 400; font-size: 13.5px; letter-spacing: 0.04em; margin-bottom: 14px; }
.rodape p { font-size: 13.5px; color: var(--cinza); max-width: 34ch; }
.rodape .rede { margin-top: 12px; }
.rodape .rede a { color: var(--ink); font-weight: 600; }
.rodape ul { display: grid; gap: 9px; font-size: 13.5px; }
.rodape ul a { text-decoration: none; }
.rodape ul a:hover { text-decoration: underline; }
.rodape .botao { margin-top: 16px; }
.rodape-fim { border-top: 1px solid var(--borda); padding-block: 18px; font-size: 12.5px; color: var(--cinza); max-width: none; }

/* telas médias */
@media (max-width: 1020px) {
  .menu { gap: 20px; }
  .cena { height: 420px; }
  .fone { width: 196px; right: 2%; }
  .selo { width: 176px; left: 0; }
  .tag { right: calc(2% + 150px); }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .vantagens ul { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .vantagens li { justify-content: flex-start; }
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
}

/* celular */
@media (max-width: 760px) {
  .topo-linha { flex-wrap: wrap; gap: 0 16px; min-height: 0; padding-top: 10px; }
  .marca { font-size: 28px; margin-right: auto; }
  .topo .botao { min-height: 40px; padding: 0 16px; }
  .menu {
    order: 3; width: calc(100% + 40px); margin: 8px -20px 0; padding: 0 20px;
    overflow-x: auto; gap: 22px; scrollbar-width: none; border-top: 1px solid var(--borda);
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: 12px 0 10px; }

  .banner-grade { grid-template-columns: 1fr; gap: 28px; padding-block: 34px 0; }
  .banner .sub { font-size: 15.5px; }
  .cena { height: 392px; max-width: 360px; width: 100%; margin-inline: auto; }
  .fone { width: 190px; right: 0; top: 10px; }
  .selo { width: 160px; left: 0; top: 0; padding: 20px; }
  .selo-marca { font-size: 19px; }
  .selo-produto { font-size: 12.5px; }
  .tag { width: 112px; height: 178px; left: auto; right: 132px; bottom: 14px; padding: 42px 12px 12px; }
  .tag-marca { font-size: 14.5px; }

  .vitrine { padding-block: 46px 16px; }
  .grade { gap: 30px 14px; }
  .grade.tres, .grade.duas { grid-template-columns: 1fr; }
  .produto .desc { min-height: 0; }
  .produto .botao { padding: 0 10px; font-size: 13.5px; }
  .chamada-linha { flex-wrap: wrap; }
  .chamada p { flex: 1; margin-right: 0; }
  .chamada .botao { width: 100%; }
  .rodape-grade { grid-template-columns: 1fr; gap: 28px; }
}