/* =========================================================
   Doce Afeto — folha de estilo única
   Mobile-first. Sem dependências além das fontes Google.
   ========================================================= */

:root{
  /* Cor */
  --porcelana:#F4F2ED;
  --glace:#FCFBF9;
  --cacau:#2A1E22;
  --cacau-suave:#5B4C51;
  --amora:#6B2C3E;
  --amora-escuro:#571F30;
  --rose:#E3CFCD;
  --rose-claro:#EFE2E0;

  /* Tipografia */
  --display:"Bodoni Moda", "Times New Roman", serif;
  --texto:"Jost", "Helvetica Neue", Arial, sans-serif;

  /* Ritmo */
  --secao:clamp(4.25rem, 11vw, 7.5rem);
  --margem:clamp(1.25rem, 6vw, 4rem);
  --largura:1200px;
  --leitura:62ch;
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--porcelana);
  color:var(--cacau);
  font-family:var(--texto);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0 0 1.1em; max-width:var(--leitura)}
p:last-child{margin-bottom:0}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}

a{color:inherit}

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

.pular{
  position:absolute; left:-9999px; top:0;
  background:var(--cacau); color:var(--porcelana);
  padding:.75rem 1rem; z-index:100;
}
.pular:focus{left:0}

/* ---------- Estruturas comuns ---------- */

main > section{
  padding-inline:var(--margem);
  padding-block:var(--secao);
}
main > section.hero{padding-top:clamp(2rem, 7vw, 4rem)}

.titulo-secao{
  font-size:clamp(2rem, 8vw, 3.25rem);
  margin-bottom:1.25rem;
  max-width:16ch;
}

/* ---------- Botões e links ---------- */

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:.9rem 1.75rem;
  background:var(--amora);
  color:var(--glace);
  font-family:var(--texto);
  font-size:1rem;
  font-weight:400;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid var(--amora);
  border-radius:2px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.botao:hover{background:var(--amora-escuro); border-color:var(--amora-escuro)}

.botao--contorno{
  background:transparent;
  color:var(--amora);
  border-color:var(--rose);
}
.botao--contorno:hover{background:var(--amora); color:var(--glace); border-color:var(--amora)}

.botao--claro{
  background:var(--glace);
  color:var(--amora);
  border-color:var(--glace);
}
.botao--claro:hover{background:transparent; color:var(--glace); border-color:var(--glace)}

.link-suave{
  display:inline-block;
  min-height:44px;
  line-height:44px;
  color:var(--amora);
  text-decoration:none;
  border-bottom:1px solid var(--rose);
  transition:border-color .3s ease;
}
.link-suave:hover{border-color:var(--amora)}

/* ---------- Cabeçalho ---------- */

.topo{
  position:sticky; top:0; z-index:50;
  background:var(--porcelana);
  transition:box-shadow .35s ease, background .35s ease;
}
.topo--fixo{
  background:color-mix(in srgb, var(--porcelana) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--rose);
}

.topo__interno{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem var(--margem);
  max-width:var(--largura);
  margin-inline:auto;
}

.marca{position:relative; z-index:45; text-decoration:none; display:block}
.marca__nome{
  display:block;
  font-family:var(--display);
  font-size:1.4rem;
  line-height:1.1;
  letter-spacing:.01em;
}
.marca__assinatura{
  display:block;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--cacau-suave);
  margin-top:.15rem;
}

/* Navegação — mobile: painel sobreposto */
.nav{
  position:fixed;
  inset:0;
  background:var(--porcelana);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
  padding:6rem var(--margem) 3rem;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  z-index:40;
}
.nav--aberto{transform:translateY(0)}
.nav a{
  font-family:var(--display);
  font-size:2rem;
  text-decoration:none;
  padding:.5rem 0;
  border-bottom:1px solid var(--rose);
}
.nav a:last-child{border-bottom:0}
.nav__whats{color:var(--amora); font-style:italic}

.menu-botao{
  position:relative; z-index:45;
  display:flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.25rem .25rem .25rem .5rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--texto); font-size:.9rem; color:var(--cacau);
}
.menu-botao__traco{
  position:relative; display:block; width:22px; height:1px; background:var(--cacau);
  transition:background .3s ease;
}
.menu-botao__traco::before,
.menu-botao__traco::after{
  content:""; position:absolute; left:0; width:22px; height:1px; background:var(--cacau);
  transition:transform .35s ease;
}
.menu-botao__traco::before{top:-6px}
.menu-botao__traco::after{top:6px}
.menu-botao[aria-expanded="true"] .menu-botao__traco{background:transparent}
.menu-botao[aria-expanded="true"] .menu-botao__traco::before{transform:translateY(6px) rotate(45deg)}
.menu-botao[aria-expanded="true"] .menu-botao__traco::after{transform:translateY(-6px) rotate(-45deg)}

body.menu-aberto{overflow:hidden}

/* ---------- Fotografia ---------- */

.foto{position:relative; overflow:hidden; background:var(--glace)}
.foto--arco{border-radius:999px 999px 4px 4px / 40% 40% 4px 4px}
.foto--retrato{border-radius:4px}

.foto__reserva{
  position:relative;
  aspect-ratio:4/5;
  display:flex;
  align-items:flex-end;
  padding:1.25rem;
  background:
    radial-gradient(120% 80% at 50% 12%, var(--rose-claro) 0%, transparent 62%),
    linear-gradient(180deg, var(--glace) 0%, #F2EDEA 100%);
  box-shadow:inset 0 0 0 1px var(--rose);
}
.foto--arco .foto__reserva{box-shadow:none; outline:1px solid var(--rose); outline-offset:-1px}

.foto__reserva::before{
  content:"Doce Afeto";
  position:absolute;
  left:0; right:0; top:44%;
  text-align:center;
  font-family:var(--display);
  font-style:italic;
  font-size:1.15rem;
  color:#D8BDBA;
}
.foto__spec{
  position:relative;
  margin:0;
  font-size:.72rem;
  line-height:1.55;
  letter-spacing:.01em;
  color:var(--cacau-suave);
  max-width:34ch;
}
.foto__spec strong{
  display:block;
  font-weight:500;
  color:var(--amora);
  margin-bottom:.25rem;
  letter-spacing:.06em;
  font-size:.66rem;
}

/* revelação discreta das imagens (só quando há JS) */
.js .foto{opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1)}
.js .foto.visivel{opacity:1; transform:none}

/* ---------- Hero ---------- */

.hero{
  max-width:var(--largura);
  margin-inline:auto;
  padding-bottom:var(--secao);
}

.hero__titulo{
  font-size:clamp(2.5rem, 11vw, 4.5rem);
  line-height:1.02;
  margin-bottom:1.75rem;
}
.hero__titulo span{display:block; overflow:hidden}
.hero__titulo .italico{font-style:italic}

.hero__linha{
  font-size:1.075rem;
  color:var(--cacau-suave);
  max-width:46ch;
  margin-bottom:2rem;
}

.hero__acoes{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom:3rem;
}
.hero__acoes .botao{width:100%; max-width:22rem}

.hero__foto{width:100%}

/* ---------- Pilares ---------- */

.pilares{
  background:var(--glace);
  border-block:1px solid var(--rose);
}
.pilares__lista{
  max-width:var(--largura);
  margin-inline:auto;
  display:grid;
  gap:2.5rem;
}
.pilares__lista h2{
  font-size:1.6rem;
  margin-bottom:.5rem;
}
.pilares__lista p{
  color:var(--cacau-suave);
  font-size:1rem;
  max-width:34ch;
  margin:0;
}

/* ---------- Ateliê ---------- */

.atelie{
  max-width:var(--largura);
  margin-inline:auto;
  display:grid;
  gap:2.5rem;
}
.atelie__texto p{color:var(--cacau-suave)}
.atelie__nota{
  padding-top:1.25rem;
  border-top:1px solid var(--rose);
  color:var(--cacau) !important;
  font-size:.95rem;
}

/* ---------- Criações ---------- */

.criacoes{max-width:var(--largura); margin-inline:auto}
.criacoes__cabecalho{margin-bottom:2.5rem}
.criacoes__cabecalho p{color:var(--cacau-suave)}

.criacoes__lista{
  display:flex;
  gap:1.25rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* sangra até as bordas da tela no mobile */
  margin-inline:calc(var(--margem) * -1);
  padding-inline:var(--margem);
  padding-bottom:.5rem;
}
.criacoes__lista::-webkit-scrollbar{display:none}
.criacao{
  flex:0 0 74%;
  max-width:20rem;
  scroll-snap-align:start;
}
.criacao h3{
  font-size:1.45rem;
  margin:1.25rem 0 .4rem;
}
.criacao p{
  color:var(--cacau-suave);
  font-size:.98rem;
  max-width:34ch;
}
.criacoes__cta{margin-top:3rem}

/* ---------- Possibilidades ---------- */

.possibilidades{background:var(--rose-claro)}
.possibilidades__interno{
  max-width:var(--largura);
  margin-inline:auto;
}
.possibilidades p{color:var(--cacau-suave)}
.aviso{
  font-size:.85rem;
  line-height:1.65;
  padding-top:1.25rem;
  border-top:1px solid var(--rose);
  margin-bottom:1.5rem;
}

/* ---------- Nilda ---------- */

.nilda{
  max-width:var(--largura);
  margin-inline:auto;
  display:grid;
  gap:2.5rem;
}
.nilda__papel{
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--amora);
  margin-bottom:1.5rem;
}
.nilda__texto p{color:var(--cacau-suave)}
.nilda__registro{
  font-size:.85rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rose);
}

/* ---------- Encomenda ---------- */

.encomenda{
  max-width:var(--largura);
  margin-inline:auto;
}
.passos{
  counter-reset:passo;
  display:grid;
  gap:0;
  margin:2.5rem 0 3rem;
}
.passos li{
  counter-increment:passo;
  display:grid;
  grid-template-columns:2.5rem 1fr;
  gap:0 1rem;
  padding:1.5rem 0;
  border-top:1px solid var(--rose);
}
.passos li:last-child{border-bottom:1px solid var(--rose)}
.passos li::before{
  content:counter(passo, decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--display);
  font-size:1rem;
  color:var(--amora);
  padding-top:.2rem;
}
.passos h3{font-size:1.35rem; margin-bottom:.35rem}
.passos p{color:var(--cacau-suave); font-size:.98rem; margin:0}

.encomenda__info{
  display:grid;
  gap:2rem;
  padding-top:2rem;
  border-top:1px solid var(--rose);
}
.encomenda__info h3{
  font-size:1.15rem;
  margin-bottom:.35rem;
}
.encomenda__info p{color:var(--cacau-suave); font-size:.98rem; margin:0}

/* ---------- Perguntas ---------- */

.perguntas{
  max-width:var(--largura);
  margin-inline:auto;
}
.acordeao{margin-top:2rem; border-top:1px solid var(--rose)}
.acordeao__item{border-bottom:1px solid var(--rose)}
.acordeao__item h3{margin:0; font-family:var(--texto)}
.acordeao__botao{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:64px;
  padding:1rem 0;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:var(--texto);
  font-size:1.02rem;
  font-weight:400;
  line-height:1.5;
  color:var(--cacau);
}
.acordeao__sinal{
  position:relative;
  flex:0 0 auto;
  width:14px; height:14px;
}
.acordeao__sinal::before,
.acordeao__sinal::after{
  content:""; position:absolute; background:var(--amora);
  transition:transform .35s ease, opacity .35s ease;
}
.acordeao__sinal::before{top:6px; left:0; width:14px; height:1px}
.acordeao__sinal::after{top:0; left:6px; width:1px; height:14px}
.acordeao__botao[aria-expanded="true"] .acordeao__sinal::after{transform:scaleY(0)}

/* sem JS os painéis permanecem abertos e legíveis */
.acordeao__painel{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .4s ease;
}
.acordeao__painel > p{
  overflow:hidden;
  margin:0;
  padding-bottom:1.5rem;
  color:var(--cacau-suave);
  font-size:.98rem;
}
.js .acordeao__painel{grid-template-rows:0fr}
.js .acordeao__painel > p{padding-bottom:0}
.js .acordeao__item--aberto .acordeao__painel{grid-template-rows:1fr}
.js .acordeao__item--aberto .acordeao__painel > p{padding-bottom:1.5rem}

/* ---------- Fechamento ---------- */

.fechamento{
  background:var(--cacau);
  color:var(--porcelana);
  text-align:center;
}
.fechamento h2{
  font-size:clamp(2.1rem, 9vw, 3.75rem);
  max-width:14ch;
  margin:0 auto 1rem;
}
.fechamento p{
  color:color-mix(in srgb, var(--porcelana) 78%, transparent);
  margin:0 auto 2rem;
  max-width:40ch;
}

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

.rodape{
  background:var(--cacau);
  color:var(--porcelana);
  padding:0 var(--margem) 2.5rem;
}
.rodape__interno{
  max-width:var(--largura);
  margin-inline:auto;
  display:grid;
  gap:2rem;
  padding-top:2.5rem;
  border-top:1px solid color-mix(in srgb, var(--porcelana) 22%, transparent);
}
.rodape p{
  font-size:.92rem;
  color:color-mix(in srgb, var(--porcelana) 78%, transparent);
  margin:0 0 .35rem;
}
.rodape .marca__nome{
  font-size:1.3rem;
  color:var(--porcelana);
  margin-bottom:.6rem;
}
.rodape a{color:var(--porcelana); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--porcelana) 35%, transparent)}
.rodape__fim{
  max-width:var(--largura);
  margin:2.5rem auto 0;
  font-size:.78rem;
  color:color-mix(in srgb, var(--porcelana) 55%, transparent);
}

/* ---------- Barra fixa de contato (mobile) ---------- */

.barra-fixa{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:45;
  padding:.6rem var(--margem) calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--porcelana) 94%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--rose);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.barra-fixa--visivel{transform:translateY(0)}
.barra-fixa__link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  background:var(--amora);
  color:var(--glace);
  text-decoration:none;
  border-radius:2px;
  font-size:1rem;
  letter-spacing:.02em;
}
body.menu-aberto .barra-fixa{transform:translateY(100%)}

/* ---------- Entrada da página ---------- */

.hero__titulo span > *,
.hero__titulo span{will-change:transform}

@media (prefers-reduced-motion:no-preference){
  .js .hero__titulo span{transform:translateY(105%); transition:transform 1s cubic-bezier(.22,1,.36,1)}
  .js.carregado .hero__titulo span{transform:translateY(0)}
  .js .hero__titulo span:nth-child(2){transition-delay:.08s}
  .js .hero__titulo span:nth-child(3){transition-delay:.16s}
  .js .hero__titulo span:nth-child(4){transition-delay:.24s}

  .js .hero__linha,
  .js .hero__acoes{opacity:0; transition:opacity .9s ease .45s}
  .js.carregado .hero__linha,
  .js.carregado .hero__acoes{opacity:1}

  .js .hero__foto{clip-path:inset(0 0 100% 0); transition:clip-path 1.2s cubic-bezier(.22,1,.36,1) .3s, opacity .6s ease .3s}
  .js.carregado .hero__foto{clip-path:inset(0 0 0 0)}
}

/* espaço para a barra fixa não cobrir o rodapé */
@media (max-width:899px){
  .rodape{padding-bottom:6rem}
}

/* ---------- Tablet ---------- */

@media (min-width:640px){
  body{font-size:1.075rem}

  .hero__acoes{flex-direction:row; align-items:center; gap:1.5rem}
  .hero__acoes .botao{width:auto}

  .pilares__lista{grid-template-columns:repeat(3,1fr); gap:2rem}
  .criacoes__lista{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:3rem 2rem;
    overflow:visible;
    margin-inline:0;
    padding-inline:0;
  }
  .criacao{flex:initial; max-width:none}
  .encomenda__info{grid-template-columns:repeat(3,1fr)}
  .rodape__interno{grid-template-columns:1fr auto}
  .passos{grid-template-columns:repeat(2,1fr); column-gap:2.5rem}
  .passos li:nth-child(2){border-top:1px solid var(--rose)}
  .passos li:last-child{border-bottom:1px solid var(--rose)}
}

/* ---------- Desktop ---------- */

@media (min-width:900px){
  .menu-botao{display:none}

  .nav{
    position:static;
    flex-direction:row;
    align-items:center;
    gap:2rem;
    padding:0;
    transform:none;
    background:none;
    inset:auto;
  }
  .nav a{
    font-family:var(--texto);
    font-size:.95rem;
    padding:.25rem 0;
    border-bottom:1px solid transparent;
    transition:border-color .3s ease;
  }
  .nav a:hover{border-color:var(--rose)}
  .nav__whats{font-style:normal; border-bottom-color:var(--rose) !important}
  .nav__whats:hover{border-bottom-color:var(--amora) !important}

  .barra-fixa{display:none}

  .hero{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:clamp(2rem,5vw,5rem);
    min-height:min(86vh, 820px);
  }
  main > section.hero{padding-top:clamp(3rem,6vw,6rem)}
  .hero__acoes{margin-bottom:0}
  .hero__foto{max-width:480px; margin-left:auto}

  .atelie,
  .nilda{
    grid-template-columns:.85fr 1fr;
    align-items:center;
    gap:clamp(3rem,7vw,6rem);
  }
  .atelie__foto,
  .nilda__foto{max-width:420px}
  .nilda{grid-template-columns:1fr .85fr}
  .nilda__foto{order:2}

  .criacoes__lista{grid-template-columns:repeat(4,1fr); gap:2.5rem 2rem}
  .criacoes__cabecalho{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:3rem;
  }
  .criacoes__cabecalho p{max-width:32ch; margin:0 0 .5rem}

  .possibilidades__interno{
    display:grid;
    grid-template-columns:.9fr 1fr;
    gap:clamp(2rem,6vw,5rem);
    align-items:start;
  }
  .possibilidades .titulo-secao{margin-bottom:0}

  .perguntas{display:grid; grid-template-columns:.8fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start}
  .acordeao{margin-top:0}

  .encomenda .titulo-secao{max-width:20ch}
}

@media (min-width:1100px){
  .passos{grid-template-columns:repeat(4,1fr); column-gap:2rem}
  .passos li,
  .passos li:nth-child(2),
  .passos li:last-child{border-bottom:0}
  .passos li{border-top:1px solid var(--rose)}
}

/* ---------- Preferência por menos movimento ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .js .foto{opacity:1; transform:none}
}