/* Ateliê Ata Atunbi | paleta tirada da estampa wax print das fotos */
:root {
  --anil: #1D2B6B;
  --anil-escuro: #121B47;
  --urucum: #C8361D;
  --urucum-escuro: #A42A15;
  --acafrao: #F4B41A;
  --folha: #2E7D5B;
  --algodao: #FFFBF4;
  --linho: #F3E9DA;
  --tinta: #1E1C2B;
  --tinta-suave: #4A4658;

  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-texto: "Source Serif 4", Georgia, serif;

  --gutter: clamp(1rem, 4vw, 2rem);
  --max: 72rem;
  --raio: 1.25rem;
  --topo-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--algodao);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, dt { font-family: var(--f-display); line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acafrao); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--anil); color: #fff; padding: .6rem 1rem; border-radius: 8px; }
.pular:focus { left: .5rem; }

.contem { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.centro { text-align: center; margin-top: clamp(2rem, 5vw, 3rem); }
.ico { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.titulo-secao {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  font-weight: 800;
  color: var(--anil);
  max-width: 18ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: .8rem 1.2rem; min-height: 2.75rem;
  border-radius: 999px; text-decoration: none; border: 2px solid transparent;
  transition: background-color .2s, color .2s, transform .2s;
}
.botao:active { transform: translateY(1px); }
.botao--grande { font-size: 1.0625rem; padding: 1.05rem 1.6rem; min-height: 3.5rem; }
.botao--urucum { background: var(--urucum); color: #fff; }
.botao--urucum:hover { background: var(--urucum-escuro); }
.botao--anil { background: var(--anil); color: #fff; }
.botao--anil:hover { background: var(--anil-escuro); }
.botao--acafrao { background: var(--acafrao); color: var(--tinta); }
.botao--acafrao:hover { background: #FFC83D; }
.botao--linha { border-color: var(--anil); color: var(--anil); }
.botao--linha:hover { background: var(--anil); color: #fff; }

/* Moldura com pesponto: a costura é o elemento gráfico do ateliê */
.moldura { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--linho); }
.moldura::after {
  content: ""; position: absolute; inset: .6rem;
  border: 2px dashed rgba(255, 251, 244, .85);
  border-radius: calc(var(--raio) - .5rem);
  pointer-events: none;
}
.moldura img { width: 100%; height: 100%; object-fit: cover; }

/* Cabeçalho */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 251, 244, .92);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .25s;
}
.topo.rolou { box-shadow: 0 1px 0 rgba(29, 43, 107, .12), 0 8px 24px -16px rgba(29, 43, 107, .4); }
.topo__nav { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; height: var(--topo-h); display: flex; align-items: center; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marca__foto { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--algodao), 0 0 0 4px var(--urucum); }
.marca__nome { font-family: var(--f-display); font-weight: 800; font-size: 1.125rem; color: var(--anil); letter-spacing: -0.01em; }
.topo__links { display: none; }
.topo__cta { display: none; }

.topo__menu {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .65rem;
  background: var(--anil); border: 0; border-radius: 50%; cursor: pointer;
}
.topo__menu span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
.menu-aberto .topo__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-aberto .topo__menu span:nth-child(2) { opacity: 0; }
.menu-aberto .topo__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .menu-aberto { overflow: hidden; }
  .menu-aberto .topo { background: var(--algodao); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-aberto .topo__links {
    display: flex; flex-direction: column; gap: .25rem;
    position: fixed; inset: var(--topo-h) 0 0 0;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--algodao);
    animation: abre .25s ease-out;
  }
  .topo__links a:not(.botao) {
    display: block; padding: .9rem 0; text-decoration: none;
    font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; color: var(--anil);
    border-bottom: 2px dashed rgba(29, 43, 107, .18);
  }
  .topo__cta-mobile { margin-top: 1.5rem; }
  .topo__cta-mobile .botao { width: 100%; min-height: 3.5rem; font-size: 1.0625rem; }
}
@keyframes abre { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 900px) {
  .topo__links { display: flex; gap: 1.75rem; margin-right: 1rem; }
  .topo__links a { font-family: var(--f-display); font-weight: 500; text-decoration: none; color: var(--tinta); padding: .25rem 0; background: linear-gradient(var(--urucum), var(--urucum)) 0 100% / 0 2px no-repeat; transition: background-size .25s; }
  .topo__links a:hover { background-size: 100% 2px; }
  .topo__cta-mobile, .topo__menu { display: none; }
  .topo__cta { display: inline-flex; }
}

/* Hero */
.hero { padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.hero__grade {
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center;
}
.selo {
  display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: .9375rem;
  color: var(--folha); padding: .35rem .9rem; border: 2px dashed currentColor; border-radius: 999px;
}
.hero h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.6rem, 1.4rem + 6vw, 5rem);
  font-weight: 800; color: var(--anil); letter-spacing: -0.035em; line-height: .98;
  max-width: 13ch;
  text-wrap: balance;
}
.hero__sub { margin-top: 1.25rem; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); color: var(--tinta-suave); max-width: 34ch; }
.hero__acoes { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.hero__acoes .botao { width: 100%; }

.hero__foto { position: relative; margin: 0; padding: 0 .75rem 1.5rem 0; }
.hero__foto::before {
  content: ""; position: absolute; inset: 1.5rem 0 0 1.5rem; border-radius: var(--raio);
  background: var(--acafrao);
}
.hero__foto .moldura { aspect-ratio: 1; }
.etiqueta {
  position: absolute; left: -.25rem; bottom: 0;
  font-family: var(--f-display); font-weight: 700; font-size: .9375rem; line-height: 1.25;
  background: var(--urucum); color: #fff; padding: .75rem 1rem; border-radius: .75rem;
  transform: rotate(-3deg);
  box-shadow: 0 10px 24px -12px rgba(30, 28, 43, .6);
}

@media (min-width: 560px) {
  .hero__acoes { flex-direction: row; flex-wrap: wrap; }
  .hero__acoes .botao { width: auto; }
}
@media (min-width: 900px) {
  .hero__grade { grid-template-columns: 1.1fr .9fr; }
  .hero__foto { padding: 0 1.25rem 2rem 0; }
  .hero__foto::before { inset: 2rem 0 0 2rem; }
  .etiqueta { left: -2rem; bottom: 2.5rem; font-size: 1.0625rem; padding: 1rem 1.25rem; }
}

/* Uma única sequência de entrada, só no hero */
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * { animation: sobe .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__texto > :nth-child(2) { animation-delay: .08s; }
  .hero__texto > :nth-child(3) { animation-delay: .16s; }
  .hero__texto > :nth-child(4) { animation-delay: .24s; }
  .hero__foto { animation: sobe .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .etiqueta { animation: pousa .6s .7s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes pousa { from { opacity: 0; transform: rotate(-12deg) scale(.8); } }

/* Faixa de estampa */
.faixa { height: clamp(2.5rem, 6vw, 4rem); }
.faixa svg { display: block; }

/* Sobre */
.sobre { background: var(--anil); color: #fff; padding: clamp(3.5rem, 9vw, 7rem) 0; }
.sobre__grade { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.sobre__foto { aspect-ratio: 1; max-width: 28rem; }
@media (min-width: 900px) { .sobre__foto { aspect-ratio: 4 / 5; } }
.sobre__foto img { object-position: 50% 30%; }
.sobre h2 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem); font-weight: 800; max-width: 16ch; text-wrap: balance; }
.sobre p { margin-top: 1.25rem; font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.7; color: rgba(255, 255, 255, .85); max-width: 40ch; }
.sobre p:first-of-type { margin-top: 1.75rem; padding-left: 1.25rem; border-left: 4px solid var(--acafrao); color: #fff; }
@media (min-width: 900px) { .sobre__grade { grid-template-columns: .85fr 1.15fr; } }

/* Catálogo */
.pecas { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.pecas .titulo-secao { margin-bottom: .75rem; }
.pecas__intro { color: var(--tinta-suave); max-width: 46ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.catalogo { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem) 1.25rem; }
.produto { display: flex; flex-direction: column; gap: 1rem; }
.produto__foto { aspect-ratio: 4 / 5; }
.produto__info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.produto h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; color: var(--anil); flex: 1 1 12rem; text-wrap: balance; }
.produto .botao { flex-shrink: 0; }
@media (min-width: 560px) {
  .catalogo { grid-template-columns: repeat(2, 1fr); }
  .catalogo .g5 { grid-column: span 2; }
  .catalogo .g5 .produto__foto { aspect-ratio: 16 / 10; }
  .catalogo .g5 .produto__foto img { object-position: 50% 35%; }
}
@media (min-width: 900px) {
  .catalogo { grid-template-columns: repeat(6, 1fr); }
  .catalogo .g1, .catalogo .g2 { grid-column: span 3; }
  .catalogo .g3, .catalogo .g4, .catalogo .g5 { grid-column: span 2; }
  .catalogo .g1 .produto__foto, .catalogo .g2 .produto__foto { aspect-ratio: 5 / 4; }
  .catalogo .g5 .produto__foto { aspect-ratio: 4 / 5; }
  .catalogo .g2 .produto__foto img { object-position: 50% 12%; }
}

/* Para quem é */
.para-quem { background: var(--acafrao); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.para-quem__grade { display: grid; gap: 2rem; }
.para-quem h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); font-weight: 800; color: var(--anil); max-width: 14ch; text-wrap: balance; }
.para-quem ul { display: grid; gap: .75rem; }
.para-quem li {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.3;
  background: var(--algodao); color: var(--tinta);
  padding: 1rem 1.25rem 1rem 3.25rem; border-radius: 1rem; position: relative;
}
.para-quem li::before {
  content: ""; position: absolute; left: 1.1rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -.625rem;
  border-radius: 50%; background: radial-gradient(circle, var(--acafrao) 0 30%, var(--urucum) 31% 62%, var(--anil) 63%);
}
@media (min-width: 900px) {
  .para-quem__grade { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4rem; }
  .para-quem ul { grid-template-columns: 1fr 1fr; }
}

/* Passos */
.passos { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.passos__lista { display: grid; gap: 1.25rem; counter-reset: p; position: relative; }
.passos__lista li { display: flex; align-items: center; gap: 1.25rem; position: relative; }
.passos__num {
  flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 1.75rem;
  background: var(--urucum); color: #fff; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--algodao);
}
.passos__lista li p { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.2; color: var(--anil); }
/* linha costurada ligando os passos */
.passos__lista::before {
  content: ""; position: absolute; left: 2rem; top: 2rem; bottom: 2rem;
  border-left: 3px dashed rgba(200, 54, 29, .45);
}
@media (min-width: 900px) {
  .passos__lista { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .passos__lista li { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .passos__lista li p { max-width: 14ch; }
  .passos__lista::before { left: 2rem; right: 2rem; top: 2rem; bottom: auto; border-left: 0; border-top: 3px dashed rgba(200, 54, 29, .45); }
  .passos .centro { text-align: left; }
}

/* Diferenciais */
.diferenciais { background: var(--linho); padding: clamp(4rem, 10vw, 7rem) 0; }
.diferenciais__grade { display: grid; gap: 0; }
.diferenciais__grade > div { padding: 1.5rem 0; border-top: 2px dashed rgba(29, 43, 107, .25); }
.diferenciais dt { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: 700; color: var(--urucum); }
.diferenciais dd { margin-top: .5rem; color: var(--tinta-suave); max-width: 36ch; }
@media (min-width: 720px) {
  .diferenciais__grade { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
}

/* Galeria */
.galeria { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.galeria .titulo-secao { margin-bottom: .75rem; }
.galeria__dica { color: var(--tinta-suave); margin-bottom: 2rem; }
.galeria__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; grid-auto-flow: dense; }
.galeria__grade li { aspect-ratio: 1; }
.galeria__grade .g-alta { grid-column: span 2; }
.galeria__grade .g-larga { grid-column: span 2; aspect-ratio: 2 / 1; }
.galeria__grade button {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in;
  border-radius: 1rem; overflow: hidden; background: var(--linho);
}
.galeria__grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.galeria__grade button:hover img { transform: scale(1.04); }
@media (min-width: 720px) {
  .galeria__grade { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .galeria__grade .g-alta { grid-column: span 2; grid-row: span 2; }
  .galeria__grade .g-larga { grid-column: auto; aspect-ratio: 1; }
}
.link-forte { font-family: var(--f-display); font-weight: 700; color: var(--anil); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link-forte:hover { color: var(--urucum); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 56rem); max-height: 90vh; }
.lightbox::backdrop { background: rgba(18, 27, 71, .88); }
.lightbox img { max-height: 86vh; width: auto; margin: auto; border-radius: 1rem; }
.lightbox form { position: fixed; top: 1rem; right: 1rem; }
.lightbox__fechar { width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--algodao); color: var(--anil); font-size: 1.75rem; line-height: 1; cursor: pointer; }

/* Chamada final */
.final { position: relative; padding: clamp(3rem, 8vw, 6rem) var(--gutter); overflow: hidden; }
.final__padrao { position: absolute; inset: 0; }
.final__padrao svg { display: block; }
.final__caixa {
  position: relative; max-width: 46rem; margin-inline: auto; text-align: center;
  background: var(--urucum); color: #fff;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: 1.75rem;
  box-shadow: 0 0 0 .6rem var(--urucum), inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.final__caixa::before { content: ""; position: absolute; inset: .75rem; border: 2px dashed rgba(255, 255, 255, .55); border-radius: 1.25rem; pointer-events: none; }
.final h2 { font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.5rem); font-weight: 800; text-wrap: balance; }
.final .botao { margin-top: 2rem; position: relative; }
@media (max-width: 559px) { .final .botao, .passos .botao { width: 100%; } }

/* Rodapé */
.rodape { background: var(--anil-escuro); color: rgba(255, 255, 255, .78); padding: 3rem 0 6rem; font-size: 1rem; }
.rodape__grade { display: grid; gap: 1.5rem; }
.rodape__nome { font-family: var(--f-display); font-weight: 800; font-size: 1.375rem; color: #fff; margin-bottom: .25rem; }
.rodape__links { display: flex; gap: 1.5rem; }
.rodape__links a { font-family: var(--f-display); font-weight: 700; color: var(--acafrao); text-underline-offset: 4px; }
.rodape__copy { font-size: .9375rem; }
@media (min-width: 900px) {
  .rodape { padding-bottom: 3rem; }
  .rodape__grade { grid-template-columns: 1fr auto auto; align-items: center; gap: 3rem; }
}

/* WhatsApp flutuante */
.flutuante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center; background: #25D366; color: #fff;
  box-shadow: 0 10px 24px -8px rgba(18, 27, 71, .55);
  transition: transform .2s;
}
.flutuante:hover { transform: scale(1.08); }
.flutuante .ico { width: 1.75rem; height: 1.75rem; }
.menu-aberto .flutuante { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}