/* ═══════════════════════════════════════════════════════════════════
   IDENTIDADE VISUAL ORLY (ORLY_IDENTIDADE.pdf)
   Cores: Amarelo Bom Dia #E8B826 · Marrom Café Coado #6E4026 · Bege Massa Artesanal #E5D4BC
          Laranja Forno Aceso #FB783E · Caramelo Casadinho #AF7659 · Creme Farinha #ECE5D5
   Fontes: Program Narrow OT (títulos) → equivalente livre Barlow Condensed
           Proxima Nova (texto)        → equivalente livre Figtree
   Formas: a mancha orgânica amarela atrás das ilustrações. Carregado depois de orly.css.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --amarelo:#E8B826;--marrom:#6E4026;--bege:#E5D4BC;--laranja:#FB783E;--caramelo:#AF7659;--farinha:#ECE5D5;
  --destaque:#E0561A;            /* laranja um pouco mais fundo para destaque de texto em fundo claro (contraste) */
  --tinta:#3A2012;--tinta-suave:#6B4A38;
  --papel:#FBF8F1;--creme:#ECE5D5;--champagne:#E5D4BC;--areia:#E5D4BC;
  --choco:#6E4026;--choco-fundo:#3F2415;
  --caramelo-claro:#E8B826;
  --sage:#6E4026;--sage-escuro:#6E4026;--sage-claro:#E5D4BC;
  --serif:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --sans:'Figtree','Proxima Nova','Segoe UI',system-ui,sans-serif;
}
body{font-family:var(--sans);background:var(--farinha);color:var(--tinta)}
::selection{background:var(--amarelo);color:var(--tinta)}
:focus-visible{outline-color:var(--laranja)}

/* títulos: condensada, caixa alta, como na marca */
.h1,.h2,.h3,.pagina h1{text-transform:uppercase;font-weight:700;letter-spacing:.004em}
.h1{font-weight:800;font-size:clamp(3.6rem,7.2vw,7.2rem);line-height:.9;letter-spacing:-.005em;max-width:none;text-wrap:pretty;color:var(--marrom)}
.h2{font-size:clamp(2.9rem,5.4vw,5.2rem);line-height:.92;color:var(--marrom);font-weight:800}
.h3{font-size:clamp(1.7rem,2.3vw,2.2rem);line-height:1;color:var(--marrom)}
.h1 em,.h2 em{font-style:normal;color:var(--destaque)}
.txt{color:var(--tinta-suave)}
.sublinha{stroke:var(--amarelo);stroke-width:5}
.polaroid figcaption,.cinquenta b,.dif__num,.provas b,.selo__miolo,.logo b{font-style:normal}

/* botões: marrom é o principal; amarelo sobre fundos escuros e laranja */
.btn{background:var(--marrom);color:var(--farinha);box-shadow:0 14px 26px -14px rgba(58,32,18,.75),inset 0 1px 0 rgba(255,255,255,.18);font-weight:700;letter-spacing:.12em}
.btn:hover{background:#7e4a2d;box-shadow:0 20px 32px -14px rgba(58,32,18,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--linha{background:transparent;color:var(--marrom);box-shadow:inset 0 0 0 2px var(--marrom)}
.btn--linha:hover{background:var(--marrom);color:var(--farinha)}
.btn--ouro{background:var(--amarelo);color:var(--tinta);box-shadow:0 14px 26px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--ouro:hover{background:#f2c53f}

/* cabeçalho + toldo nas cores da marca */
.topo{background:rgba(251,248,241,.98)}
.logo img{height:66px;width:auto}
.logo{flex-direction:row}
.nav a{color:var(--tinta-suave);font-weight:700}
.nav a:hover,.nav a[aria-current]{color:var(--marrom)}
.nav a::after{background:var(--laranja)}
.toldo{background:repeating-linear-gradient(90deg,var(--amarelo) 0 40px,#F7EBC6 40px 80px)}
.progresso{background:linear-gradient(90deg,var(--amarelo),var(--laranja))}
.burger i{background:var(--marrom)}
.menu{background:rgba(236,229,213,.97)}
.menu a{color:var(--marrom);text-transform:uppercase;font-weight:800}

/* ───────── TOPO ───────── */
.hero{background:radial-gradient(60% 70% at 100% 0%,#F3DFA0 0%,transparent 60%),radial-gradient(50% 60% at 0% 100%,#F4C9A8 0%,transparent 66%),var(--farinha)}
.hero .txt{color:var(--tinta)}
.provas li{border-left-color:var(--amarelo)}
.provas b{color:var(--marrom);font-size:2.2rem;font-weight:800;text-transform:uppercase}
.arte{aspect-ratio:1/1.02;max-width:620px}
.par--a{left:6%;top:0;width:94%;height:auto;aspect-ratio:auto;filter:none}
.mascote{display:block;width:100%;height:auto}
.par--b{left:-5%;bottom:-2%;width:44%;aspect-ratio:1;height:auto;filter:drop-shadow(0 20px 18px rgba(58,32,18,.35))}
.blobfoto{position:relative;width:100%;height:100%}
.blobfoto__fundo{position:absolute;inset:-6%;background:var(--amarelo);clip-path:url(#blob-b);transform:rotate(16deg) translate(4%,3%)}
.blobfoto__img{position:absolute;inset:0;overflow:hidden;clip-path:url(#blob-a);background:var(--bege)}
.blobfoto__img img{width:100%;height:100%;object-fit:cover}
.js .mascote{opacity:0;transform:translateY(24px) scale(.96);transition:opacity 1s var(--mola) .25s,transform 1.4s var(--mola) .25s}
.js .on .mascote{opacity:1;transform:none}
.js .blobfoto{opacity:0;transform:scale(.7) rotate(-10deg);transition:opacity .9s var(--mola) .7s,transform 1.4s var(--mola) .7s}
.js .on .blobfoto{opacity:1;transform:none}
.par--selo{right:-1%;bottom:6%;width:clamp(110px,10.5vw,148px)}
.selo{background:var(--marrom)}
.selo text{fill:var(--amarelo);font-family:var(--sans)}
.selo__miolo{color:var(--farinha);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.5vw,1.45rem)}
.selo__miolo small{color:var(--amarelo)}

/* faixa que corre: laranja Forno Aceso */
.faixa{background:var(--laranja)}
.faixa__trilha span{font-style:normal;text-transform:uppercase;font-weight:800;color:var(--tinta);font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:.01em}
.faixa__trilha svg{fill:var(--farinha)}

/* diferenciais */
.difs{background:var(--farinha)}
.difs__grade{border-top:3px double rgba(110,64,38,.5);border-bottom:3px double rgba(110,64,38,.5)}
.dif+.dif::before{border-left-color:rgba(110,64,38,.35)}
.dif__num{color:var(--marrom);font-weight:800;text-transform:uppercase;font-size:clamp(3.2rem,4.8vw,4.8rem)}
.dif p{color:var(--tinta-suave)}
.dif__foto{border-color:var(--amarelo);width:84px;height:84px}
.estrelas svg{fill:var(--amarelo)}
.dia li{font-weight:800;text-transform:uppercase;font-size:1.45rem;color:var(--marrom)}
.dia li::before{background:var(--laranja)}

/* preferidos */
.pref{background:var(--papel)}
.item{border-top-color:rgba(110,64,38,.4)}
.item:last-child{border-bottom-color:rgba(110,64,38,.4)}
.item .h3{font-size:clamp(2.2rem,3.2vw,3.2rem)}
.item__fio{border-bottom-color:var(--amarelo)}
.item__marca{color:var(--destaque);font-family:var(--sans);font-style:normal;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.14em}
.item.ativo .h3{color:var(--destaque)}
.polaroid{background:#fff}
.polaroid figcaption{font-family:var(--serif);font-style:normal;font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,2.4vw,2.2rem);color:var(--marrom)}
.polaroid::before{background:rgba(232,184,38,.85)}

/* segredos: marrom Café Coado */
.segredos{background:radial-gradient(70% 60% at 100% 0%,rgba(232,184,38,.2),transparent 62%),radial-gradient(60% 60% at 0% 100%,rgba(251,120,62,.14),transparent 60%),#6E4026}
.segredos .h2{color:var(--farinha)}.segredos .h2 em{color:var(--amarelo)}
.segredos .txt{color:rgba(236,229,213,.9)}
.linhas{border-top-color:rgba(232,184,38,.55)}
.linha{border-bottom-color:rgba(232,184,38,.55)}
.linha .h3{color:var(--amarelo)}
.linha p{color:rgba(236,229,213,.92)}
.linha::before{background:var(--amarelo)}
.cinquenta b{color:var(--farinha);font-weight:800;font-size:clamp(4rem,6vw,6rem)}

/* delivery: amarelo Bom Dia */
.delivery{background:radial-gradient(60% 70% at 100% 0%,rgba(251,120,62,.25),transparent 60%),var(--amarelo);color:var(--tinta)}
.delivery .h1{color:var(--marrom);font-size:clamp(3.6rem,7vw,7rem);max-width:none;line-height:.88}
.delivery .h2{color:var(--tinta);font-weight:700;font-family:var(--sans);text-transform:none;font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.2;max-width:24ch;letter-spacing:0}
.delivery .txt{color:var(--tinta)}
.ponto{border-left-color:var(--marrom)}
.ponto .h3{color:var(--marrom)}
.ponto p{color:var(--tinta)}
.delivery .btn--ouro{background:var(--marrom);color:var(--farinha)}
.delivery .btn--ouro:hover{background:#7e4a2d}
.comanda{box-shadow:0 40px 60px -26px rgba(58,32,18,.55)}
.delivery__foto{left:-12%;bottom:-10%;width:36%}
.delivery__foto .ilu{width:100%;aspect-ratio:1;border-radius:50%;background:#fff;border:6px solid var(--amarelo);box-shadow:0 22px 34px -14px rgba(58,32,18,.55);display:grid;place-items:center;overflow:hidden}
.delivery__foto .ilu img{width:88%;height:auto}

/* datas especiais: bege Massa Artesanal */
.datas{background:var(--bege)}
.datas .h1{max-width:13ch;font-size:clamp(3.4rem,6.6vw,6.6rem)}
.etq__papel::before{background:var(--bege)}
.etq__papel::after{border-color:var(--amarelo)}
.cartao p{color:var(--tinta)}

/* depoimentos */
.vozes{background:var(--papel)}
.nota{background:#fff}
.nota::before{background:rgba(232,184,38,.85)}
.nota blockquote{font-family:var(--sans);font-style:normal;font-weight:500;font-size:1.18rem;line-height:1.5;color:var(--tinta)}
.nota .h3{font-size:1.7rem}
.vozes__topo .ilu-cafe{display:none}

/* como chegar: laranja Forno Aceso */
.final{background:radial-gradient(60% 70% at 0% 0%,rgba(232,184,38,.35),transparent 60%),var(--laranja);color:var(--tinta)}
.final .h2{color:var(--tinta);max-width:12ch}
.final .h2 em,.entrega .h2 em{font-style:normal;color:var(--tinta);background:linear-gradient(transparent 58%,var(--amarelo) 58%);padding:0 .08em}
.final .txt,.final__end{color:var(--tinta)}
.final__end{font-weight:600}
.horarios b{color:var(--marrom);font-family:var(--serif);font-weight:800;text-transform:uppercase;font-size:1.5rem}
.horarios i{border-bottom-color:rgba(58,32,18,.55)}
.horarios span{font-weight:600}
.final .btn--ouro{background:var(--marrom);color:var(--farinha)}
.final .btn--ouro:hover{background:#7e4a2d}
.entrega{border-top-color:rgba(58,32,18,.4)}
.entrega .h2{font-size:clamp(2.4rem,4vw,3.8rem);max-width:none}

/* rodapé marrom escuro */
.rodape{background:var(--choco-fundo);color:rgba(236,229,213,.85)}
.rodape .logo img{filter:none;height:84px}
.rodape a{text-decoration-color:rgba(232,184,38,.6)}

/* botão flutuante e texto */
.fab{background:var(--marrom)}
.pagina h1{color:var(--marrom)}

.topo__in{min-height:78px}
@media (max-width:980px){.h1{max-width:none}.arte{max-width:480px}}
@media (max-width:560px){.logo img{height:54px}.par--b{width:46%;left:-3%}}
@media (prefers-reduced-motion:reduce){.js .mascote,.js .blobfoto{opacity:1!important;transform:none!important}}
