@charset "UTF-8";
/* =========================================================================
   PADARIA BONNA MASSA / landing page
   -------------------------------------------------------------------------
   A logo tem três cores e uma forma. As três cores: preto, laranja #FE7E01
   (extraído do arquivo original) e o branco do lettering. A forma é a elipse.
   O site inteiro sai daí: base creme de papel de pão, laranja só onde algo
   pode ser tocado, preto nas âncoras, e a elipse aparecendo no croissant que
   percorre a linha do dia e no formato dos botões.

   Tipografia: Bauhaus 93 (a fonte da logo) nos títulos e nos nomes de
   produto; Hanken Grotesk carrega todo o resto.
   ========================================================================= */

/* A fonte da marca, recortada para o alfabeto português — 9 KB.
   Sobre licença: ver ONDE-PAREI.md antes de publicar. */
@font-face{
  font-family:'Bauhaus 93 Web';
  src:url('../assets/fonts/bauhaus93.woff2') format('woff2'),
      url('../assets/fonts/bauhaus93.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* --- marca --- */
  --laranja:     #FE7E01;   /* cor oficial da logo: não alterar */
  --laranja-esc: #B04E00;   /* laranja legível como texto sobre creme */
  --dourado:     #E5971B;   /* crosta de pão, também da logo */
  --carvao:      #17120C;   /* o preto da elipse, puxado para o quente */

  /* --- superfícies --- */
  --creme:   #FBF2E2;
  --creme-2: #F5E7CD;
  --creme-3: #EEDBB9;
  --papel:   #FFFBF3;
  --linha:   #E2CFAE;

  /* --- texto --- */
  --tinta:   #241C13;
  --tinta-2: #6E5B44;

  /* --- métricas --- */
  --max:      1280px;
  --pad:      clamp(1.15rem, 4vw, 3rem);
  --r:        16px;
  --r-lg:     28px;
  --topo-h:   72px;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --f-display:'Bauhaus 93 Web','Bauhaus 93','Trebuchet MS',system-ui,sans-serif;
  --f-body:   'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--topo-h) + 12px)}
body{
  margin:0; background:var(--creme); color:var(--tinta);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--laranja); color:var(--carvao)}

h1,h2,h3,.display,.tipo__h{
  font-family:var(--f-display); font-weight:400; line-height:.94;
  letter-spacing:-.005em; margin:0;
}
h1{font-size:clamp(2.9rem,7.4vw,5.3rem)}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h3,.tipo__h{font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.04}
.tipo__h{display:block}
p{margin:0}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--carvao); color:var(--creme); padding:.7rem 1.1rem; border-radius:0 0 var(--r) 0;
}
.pular:focus{left:0}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--laranja); outline-offset:3px; border-radius:6px;
}

/* rótulo de seção: o itálico da assinatura da logo, "Padaria & Confeitaria",
   em caixa mista. Caixa alta espaçada dava cara de painel de sistema. */
.sobrancelha{
  font-size:1.02rem; font-weight:700; font-style:italic; letter-spacing:.005em;
  color:var(--laranja-esc); margin:0 0 .7rem;
}

/* =======================================================================
   BOTÕES E LINKS — a elipse da logo vira a forma de tudo que se clica
   ======================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--laranja); color:var(--carvao);
  font-weight:700; font-size:1rem; line-height:1;
  padding:1.05rem 1.9rem; border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 2px 0 rgba(23,18,12,.9);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 4px 0 rgba(23,18,12,.9); background:#FF8C1A}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(23,18,12,.9)}
.btn--bloco{width:100%}

.link-seta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; color:var(--tinta);
  border-bottom:2px solid var(--laranja); padding-bottom:.2rem;
  transition:gap .18s var(--ease), color .18s var(--ease);
}
.link-seta::after{content:'→'; color:var(--laranja-esc); font-weight:700}
.link-seta:hover{gap:.85rem; color:var(--laranja-esc)}

/* =======================================================================
   TOPO
   ======================================================================= */
.topo{
  position:sticky; top:0; z-index:100; height:var(--topo-h);
  background:rgba(251,242,226,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.topo.rolou{border-bottom-color:var(--linha); background:rgba(251,242,226,.95)}
.topo__in{height:100%; display:flex; align-items:center; gap:1.5rem}
.topo__logo{flex:0 0 auto}
.topo__logo picture{display:block}
.topo__logo img{width:auto; height:56px}
.topo__nav{margin-left:auto; display:flex; gap:1.9rem; font-weight:600; font-size:.98rem}
.topo__nav a{position:relative; padding:.3rem 0}
.topo__nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--laranja); transition:right .25s var(--ease);
}
.topo__nav a:hover::after{right:0}
.topo__cta{padding:.72rem 1.4rem; font-size:.95rem}

/* =======================================================================
   HERO
   ======================================================================= */
.hero{padding:clamp(2.6rem,7vw,5.2rem) 0 clamp(2.4rem,5vw,4rem); position:relative; overflow:hidden}
/* migalha de farinha: brilho quente atrás do título, quase imperceptível */
.hero::before{
  content:''; position:absolute; inset:-30% 40% 30% -20%;
  background:radial-gradient(closest-side,rgba(254,126,1,.13),transparent 72%);
  pointer-events:none;
}
.hero__in{
  position:relative; display:grid; gap:clamp(2.4rem,5vw,4.2rem);
  grid-template-columns:1fr .94fr; align-items:center;
}
.hero__texto h1{margin-bottom:1.4rem}
.grifo{color:var(--laranja-esc)}

.hero__sub{font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--tinta-2); max-width:34rem}

/* as três garantias, separadas por ponto como uma linha de cardápio —
   nada de etiqueta redonda, que dá cara de painel de sistema */
.hero__provas{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem;
  font-size:.95rem; font-weight:600; color:var(--tinta-2);
}
.hero__provas li{display:inline-flex; align-items:center; gap:.85rem}
.hero__provas li:not(:last-child)::after{content:'·'; color:var(--laranja); font-weight:800}

.hero__ctas{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.9rem}
/* no desktop o formulário está do lado; o botão só serve onde ele desce */
.so-mobile{display:none}

/* =======================================================================
   O PEDIDO
   O formulário mora na primeira tela, porque encomendar é o único objetivo
   da página. Visual de ficha de balcão: papel, borda fina e a elipse da
   logo nos botões e nas opções de unidade.
   ======================================================================= */
.pedido{scroll-margin-top:calc(var(--topo-h) + 18px)}

.form{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.8vw,2.3rem);
  box-shadow:0 22px 44px -30px rgba(36,28,19,.5);
  transition:border-color .3s var(--ease);
}
.form__sobre{
  font-size:1rem; font-weight:700; font-style:italic;
  color:var(--laranja-esc); margin-bottom:.3rem;
}
.form__titulo{font-size:clamp(1.9rem,2.8vw,2.4rem); margin-bottom:.55rem}
.form__intro{color:var(--tinta-2); font-size:.97rem; margin-bottom:1.7rem; line-height:1.5}

.campo{display:block; margin-bottom:1.15rem; border:0; padding:0}
.campo > span,.campo legend{
  display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-2); margin-bottom:.45rem; padding:0;
}
.campo em{font-style:normal; font-weight:500; text-transform:none; letter-spacing:0}
.campo input:not([type="radio"]),.campo select,.campo textarea{
  width:100%; background:var(--creme); border:1px solid var(--linha); border-radius:12px;
  padding:.85rem 1rem; font-size:1rem; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.campo textarea{resize:vertical; min-height:5rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{background:var(--papel); border-color:var(--laranja)}
.campo input::placeholder,.campo textarea::placeholder{color:#A69074}
.campo input[aria-invalid="true"]{border-color:#C0392B; background:#FDF0EE}

/* data e hora dividem a linha: quem encomenda pensa nas duas de uma vez */
.campo-par{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

.radios{display:flex; gap:.7rem; flex-wrap:wrap}
.radios label{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--creme); border:1px solid var(--linha); border-radius:999px;
  padding:.7rem 1.15rem; font-weight:600; font-size:.95rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.radios input{accent-color:var(--laranja); margin:0}
.radios label:has(input:checked){border-color:var(--laranja); background:#FFF3E2}

.form__nota{margin-top:.9rem; font-size:.86rem; color:var(--tinta-2); text-align:center}
.form__nota[data-erro="1"]{color:#C0392B; font-weight:600}

/* quando o pedido chega escolhido lá de baixo, o cartão pisca uma vez para
   a pessoa perceber que o formulário já mudou */
@keyframes aceso{
  from{box-shadow:0 0 0 0 rgba(254,126,1,.5), 0 22px 44px -30px rgba(36,28,19,.5)}
  to  {box-shadow:0 0 0 15px rgba(254,126,1,0), 0 22px 44px -30px rgba(36,28,19,.5)}
}
.pedido--aceso .form{border-color:var(--laranja); animation:aceso 1.1s var(--ease-out) 2}

/* =======================================================================
   SEÇÕES
   ======================================================================= */
.secao{padding-block:clamp(3.6rem,8vw,6.4rem)}
.secao--enc{background:var(--creme-2)}
.secao__cab{max-width:44rem; margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.secao__intro{margin-top:1.1rem; color:var(--tinta-2); font-size:1.06rem; max-width:36rem}

/* =======================================================================
   VITRINE
   Três ritmos numa grade de seis: a linha de cima em duas metades, o meio em
   três retratos, o rodapé numa faixa larga. As proporções são fixas por linha
   para que os nomes dos produtos fiquem alinhados entre si.
   ======================================================================= */
.vitrine{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,1.8vw,1.6rem)}
.vit{grid-column:span 2; display:flex; flex-direction:column}
.vit--meia{grid-column:span 3}
.vit--larga{grid-column:span 6}

.vit__foto{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r); background:var(--creme-2);
}
.vit--meia .vit__foto{aspect-ratio:16/11}
.vit--larga .vit__foto{aspect-ratio:21/8}

.vit__pe{padding-top:1rem}
.vit__pe h3{margin-bottom:.3rem}
.vit__pe p{color:var(--tinta-2); font-size:.95rem; line-height:1.45}

/* =======================================================================
   ENCOMENDAS
   Quatro tipos e o caminho do pedido. Clicar num tipo preenche o formulário
   do topo e sobe até ele — a página tem um formulário só.
   ======================================================================= */
.tipos{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.8vw,1.5rem)}
.tipo{
  display:flex; flex-direction:column; gap:.4rem; text-align:left; cursor:pointer;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r);
  padding:1.5rem 1.35rem 1.3rem;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tipo p,.tipo__p{display:block; color:var(--tinta-2); font-size:.96rem; line-height:1.45}
.tipo__cta{
  margin-top:auto; padding-top:1.1rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:.92rem; color:var(--laranja-esc);
  transition:gap .18s var(--ease);
}
.tipo__cta::after{content:'→'}
/* especificidade acima de .rv.on, que zera transform depois desta regra */
.tipos .tipo:hover{
  border-color:var(--laranja); transform:translateY(-3px);
  box-shadow:0 18px 30px -22px rgba(36,28,19,.7);
}
.tipos .tipo:hover .tipo__cta{gap:.8rem}

/* --- o caminho do pedido, em três tempos --- */
.passos{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.passos__titulo{margin-bottom:1.5rem}
.passos__lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.3rem,2.6vw,2.6rem);
}
.passos__lista li{display:flex; gap:.9rem; align-items:baseline}
/* numeral sem bolinha em volta. Vai na fonte do corpo porque o 1 da
   Bauhaus é uma barra lisa, que ao lado do 2 e do 3 não se lê como número */
.passos__n{
  flex:0 0 auto; width:1.3rem; font-weight:800; font-size:1.5rem;
  line-height:1; color:var(--laranja); font-variant-numeric:tabular-nums;
}
.passos__lista p{color:var(--tinta-2); font-size:.98rem; line-height:1.5}
.passos__lista strong{color:var(--tinta); font-weight:700}
.passos__zap{
  margin-top:1.7rem; padding-top:1.3rem; border-top:1px solid var(--creme-2);
  color:var(--tinta-2); font-size:.96rem;
}
.passos__zap a{font-weight:700; color:var(--tinta); border-bottom:2px solid var(--laranja); padding-bottom:.1rem}
.passos__zap a:hover{color:var(--laranja-esc)}

/* =======================================================================
   DEPOIMENTO
   ======================================================================= */
.depo{background:var(--creme); padding-block:clamp(2.8rem,6vw,4.6rem); border-top:1px solid var(--linha)}
.depo__in{max-width:52rem; margin-inline:auto; text-align:center}
.depo blockquote{margin:0; position:relative}
/* a aspa fica na fonte do corpo: na Bauhaus ela vira duas bolotas */
.depo blockquote::before{
  content:'“'; display:block; font-family:var(--f-body); font-weight:800;
  font-size:4.2rem; line-height:.85; color:var(--laranja); margin-bottom:.2rem;
}
.depo blockquote p{font-family:var(--f-display); font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.05}
.depo cite{display:block; margin-top:1.2rem; font-style:normal; font-weight:700; font-size:.95rem}
.depo cite span{font-weight:500; color:var(--tinta-2)}

/* =======================================================================
   UNIDADES
   ======================================================================= */
.casas{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.4rem)}
.casa{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
}
.casa__foto{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--creme-2)}
.casa__corpo{padding:clamp(1.4rem,2.6vw,2rem); display:flex; flex-direction:column; flex:1}
.casa__corpo h3{margin-bottom:.5rem}
.casa__end{color:var(--tinta-2); margin-bottom:1.3rem; line-height:1.45}
.casa__dados{margin:0 0 1.6rem; display:grid; gap:.7rem}
.casa__dados > div{display:flex; gap:1rem; align-items:baseline; border-top:1px solid var(--linha); padding-top:.7rem}
.casa__dados dt{flex:0 0 5.8rem; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2)}
.casa__dados dd{margin:0; font-weight:600}
.casa__dados a:hover{color:var(--laranja-esc)}
.casa__ctas{margin-top:auto; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}

/* =======================================================================
   RODAPÉ
   ======================================================================= */
.rodape{background:var(--carvao); color:var(--creme); padding-top:clamp(3rem,6vw,4.6rem)}
.rodape__in{
  display:grid; grid-template-columns:1.6fr 1fr 1fr .8fr; gap:clamp(1.8rem,3.4vw,3rem);
  padding-bottom:clamp(2.4rem,4vw,3.4rem);
}
.rodape__marca picture{display:block}
.rodape__marca img{width:auto; height:74px; margin-bottom:1.1rem}
.rodape__marca p{color:rgba(251,242,226,.66); font-size:.95rem; max-width:26rem}
.rodape__col h4{
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--laranja); margin:0 0 .9rem;
}
.rodape__col p{color:rgba(251,242,226,.72); font-size:.94rem; line-height:1.6; margin-bottom:.9rem}
.rodape__col a{border-bottom:1px solid rgba(254,126,1,.5); padding-bottom:1px}
.rodape__col a:hover{color:var(--laranja); border-bottom-color:var(--laranja)}
.rodape__fim{
  border-top:1px solid rgba(251,242,226,.14); padding-block:1.4rem;
  font-size:.84rem; color:rgba(251,242,226,.5);
}

/* =======================================================================
   BOTÃO FLUTUANTE
   ======================================================================= */
.zap{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--laranja); color:var(--carvao);
  padding:.9rem 1.4rem; border-radius:999px; font-weight:700; font-size:.98rem;
  box-shadow:0 3px 0 rgba(23,18,12,.9), 0 16px 30px -14px rgba(36,28,19,.7);
  transform:translateY(120%); opacity:0;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease);
}
.zap.aparece{transform:translateY(0); opacity:1}
.zap:hover{background:#FF8C1A}

/* =======================================================================
   REVELAÇÃO NO SCROLL
   ======================================================================= */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.rv.on{opacity:1; transform:none}

/* =======================================================================
   RESPONSIVO
   ======================================================================= */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr; gap:2.6rem}
  .pedido{max-width:34rem}
  .so-mobile{display:inline-flex}
  .tipos{grid-template-columns:1fr 1fr}
  .rodape__in{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:span 2}
}
@media (max-width:880px){
  .topo__nav{display:none}
  .topo__cta{margin-left:auto}
  .vitrine{grid-template-columns:repeat(4,1fr)}
  .vit{grid-column:span 2}
  .vit--meia,.vit--larga{grid-column:span 4}
  .passos__lista{grid-template-columns:1fr}
  .casas{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .vitrine{grid-template-columns:1fr}
  .vit,.vit--meia,.vit--larga{grid-column:span 1}
  .vit__foto{aspect-ratio:4/3}
  .vit--larga .vit__foto{aspect-ratio:16/9}
  .rodape__in{grid-template-columns:1fr}
  .rodape__marca{grid-column:span 1}
  .hero__ctas{gap:1.2rem}
  .hero__ctas .btn{width:100%}
  .zap span{display:none}
  .zap{padding:1rem}
  .casa__ctas .btn{width:100%}
  .tipos{grid-template-columns:1fr}
  .campo-par{grid-template-columns:1fr; gap:0}
}

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

@media print{
  .topo,.zap{display:none}
  body{background:#fff}
}