:root{
  --castanho:#5A3217; --castanho-escuro:#3B1F0C; --castanho-texto:#3B1F0C;
  --laranja:#F49712; --laranja-vivo:#F88B30; --laranja-claro:#F9B55B;
  --amarelo:#F7E200; --verde:#6ABF8C; --azul:#69A4C4;
  --branco:#FFFCF6; --creme:#F8F6EF; --bege:#F8EBD8;
  --texto-suave:#6B4A33;
  --display:"Bricolage Grotesque", "Cook Gothic", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --corpo:"Bricolage Grotesque", "Calibri", "Segoe UI", system-ui, sans-serif;
  --mao:"Gochi Hand", "Chalkboard SE", "Chalkboard", "Comic Sans MS", cursive;
  --largura:1240px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--creme);color:var(--castanho-texto);font-family:var(--corpo);font-size:1.0625rem;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.02;margin:0;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{margin:0}
p,dd,li,figcaption{text-wrap:pretty}
.contentor{width:min(var(--largura),100% - 2.5rem);margin-inline:auto}
.contentor > *{min-width:0}
.saltar{position:absolute;left:-999px;top:0;background:var(--amarelo);color:var(--castanho-escuro);padding:.75rem 1rem;z-index:100;font-weight:700}
.saltar:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:6px}
.claro :focus-visible{outline-color:var(--castanho)}

/* Botões — pílula com preenchimento circular que se abre ao passar o rato
   (mecânica da primeira versão do site, com as cores da proposta) */
.botao{position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0 1.5rem;padding-right:3.75rem;border-radius:999px;font-family:var(--display);font-weight:700;font-size:1.0625rem;text-decoration:none;white-space:nowrap;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--creme)}
.botao__texto{position:relative;z-index:2}
.botao__texto-preenchido{position:absolute;inset:0;display:flex;align-items:center;padding:0 1.5rem;padding-right:3.75rem;color:var(--preenchido-texto);clip-path:inset(4px 4px 4px calc(100% - 48px) round 999px);transition:clip-path .45s cubic-bezier(.785,.135,.15,.86);z-index:3;pointer-events:none}
.botao__preenchimento{position:absolute;top:4px;bottom:4px;left:calc(100% - 48px);right:4px;border-radius:999px;background:var(--preenchido-fundo);transition:left .45s cubic-bezier(.785,.135,.15,.86);z-index:1}
.botao__seta{position:absolute;top:4px;bottom:4px;right:4px;width:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--preenchido-texto);z-index:4;pointer-events:none}
.botao__seta svg{width:18px;height:18px;flex-shrink:0}
@media (hover:hover){
  .botao:hover .botao__texto-preenchido{clip-path:inset(0 0 0 0 round 999px)}
  .botao:hover .botao__preenchimento{left:4px}
}
.b-amarelo{background:var(--amarelo);color:var(--castanho-escuro);--preenchido-fundo:var(--castanho-escuro);--preenchido-texto:var(--amarelo)}
.b-contorno-claro{background:transparent;border-color:var(--branco);color:var(--branco);--preenchido-fundo:var(--amarelo);--preenchido-texto:var(--castanho-escuro)}
.b-castanho{background:var(--castanho);color:var(--branco);--preenchido-fundo:var(--amarelo);--preenchido-texto:var(--castanho-escuro)}
.b-contorno{background:var(--branco);border-color:var(--castanho);color:var(--castanho);--preenchido-fundo:var(--castanho);--preenchido-texto:var(--branco)}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:50;background:var(--castanho);color:var(--branco);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid rgba(255,252,246,.12)}
.topo .contentor{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.topo .marca{display:inline-flex;align-items:center}
.topo .marca img{height:60px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.6rem .85rem;border-radius:999px;text-decoration:none;font-weight:500}
.menu a:hover{background:rgba(255,252,246,.12)}
.topo .botao{padding-left:1.15rem;font-size:1rem}
.abrir-menu{display:none;background:none;border:2px solid rgba(255,252,246,.5);color:var(--branco);border-radius:12px;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}

/* Hero */
.hero{background:var(--castanho);color:var(--branco);position:relative;overflow:hidden;isolation:isolate;min-height:100vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 78% 45%, rgba(248,139,48,.45), transparent 42%);}
.hero .contentor{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:2rem;padding-block:clamp(3rem,6vw,5.5rem) clamp(4rem,7vw,6rem)}
.hero h1{font-size:clamp(3.4rem,8.4vw,7.6rem);line-height:.9;letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.hero h1 span{display:block}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:34ch;margin-top:1.6rem;color:#F6E7D5;text-wrap:balance}
.hero .acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.prato{position:relative;aspect-ratio:1;width:min(100%,600px);justify-self:end}
.prato .foto{position:absolute;inset:6%;border-radius:50%;overflow:hidden;background:var(--laranja);box-shadow:0 0 0 14px rgba(255,252,246,.08),0 0 0 28px rgba(255,252,246,.05),0 40px 80px rgba(0,0,0,.35)}
.prato .foto img,.prato .foto video{width:100%;height:100%;object-fit:cover}
.selo{position:absolute;top:0;left:-2%;width:31%;aspect-ratio:1;background:var(--amarelo);border-radius:50%;color:var(--castanho-escuro);display:grid;place-items:center}
.selo svg.anel{position:absolute;inset:0;width:100%;height:100%;animation:girar 22s linear infinite}
.selo .ano{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:.9;text-align:center}
.selo .ano small{display:block;font-size:.42em;font-weight:700;letter-spacing:.02em}
@keyframes girar{to{transform:rotate(360deg)}}
.nota-mao{position:absolute;right:-1%;bottom:4%;font-family:var(--mao);font-size:clamp(1.35rem,2.3vw,1.9rem);color:var(--amarelo);transform:rotate(-6deg);line-height:1.05;text-align:right}
.nota-mao svg{width:70px;height:56px;margin-left:auto;margin-bottom:.25rem}

/* Secções */
section{position:relative}
.seccao{padding-block:clamp(4rem,8vw,7rem)}
.cabeca{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.cabeca h2{font-size:clamp(2.4rem,5vw,4.2rem);max-width:16ch}
.cabeca p{max-width:46ch;color:var(--texto-suave);font-size:1.125rem;text-wrap:balance}
.mao{font-family:var(--mao);font-size:1.6rem;color:var(--laranja-vivo);display:block;margin-bottom:.5rem;line-height:1}

/* Promoções — três cartões iguais (tratamento da primeira versão), com a
   paleta da proposta */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.promo{background:#f98a30;border:2px solid var(--castanho-escuro);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.promo .img{aspect-ratio:4/3;overflow:hidden}
.promo .img img{width:100%;height:100%;object-fit:cover}
.promo .corpo{padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;gap:.75rem}
.promo h3{font-size:1.4rem;color:#3B1F0C}
.promo p{color:#3B1F0C;font-size:1rem;line-height:1.55}
.promo .nota{font-size:.9rem}
.promo .nota em{color:#3B1F0C}
.js .promo:nth-child(1){transition-delay:0s}
.js .promo:nth-child(2){transition-delay:.15s}
.js .promo:nth-child(3){transition-delay:.3s}

/* Francesinha */
.francesinha{background:var(--laranja-vivo);overflow:hidden}
.francesinha .contentor{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.francesinha h2{font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:.92;color:var(--castanho-escuro)}
.francesinha p{font-size:1.2rem;margin-top:1.4rem;max-width:36ch;text-wrap:balance}
.francesinha .acoes{margin-top:2rem;display:flex;gap:.85rem;flex-wrap:wrap}
.francesinha figure{margin:0;position:relative}
.francesinha figure .moldura{border-radius:36px;overflow:hidden;background:var(--laranja);transform:rotate(2.5deg);border:3px solid var(--castanho-escuro);box-shadow:14px 14px 0 var(--castanho-escuro)}
.francesinha figure .moldura{aspect-ratio:5/4}
.francesinha figure img{width:100%;height:100%;object-fit:cover}
.francesinha figcaption{position:absolute;left:-.5rem;bottom:-1.4rem;background:var(--amarelo);color:var(--castanho-escuro);font-family:var(--mao);font-size:1.6rem;padding:.4rem 1.1rem;border-radius:14px;transform:rotate(-4deg);border:2px solid var(--castanho-escuro)}

/* Sabores — carrossel contínuo (mecânica da primeira versão) */
.sabores-viewport{overflow:hidden;width:100%}
.sabores-pista{display:flex;gap:1.25rem;width:max-content;list-style:none;margin:0;padding:0;animation:sabores-deslizar 32s linear infinite;will-change:transform}
.sabores-pista.pausado{animation-play-state:paused}
@keyframes sabores-deslizar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sabores-item{width:220px;text-align:center;flex:none}
.sabores-item img{width:220px;height:220px;object-fit:cover;object-position:center 18%;border-radius:20px;margin-bottom:.85rem}
.sabores-item span{font-family:var(--display);font-weight:700;color:var(--castanho-escuro);font-size:1.05rem}

/* História */
.historia{background:var(--castanho);color:var(--branco);overflow:hidden}
.historia .contentor{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.historia h2{font-size:clamp(2.4rem,5vw,4rem)}
.historia .texto p{margin-top:1.2rem;color:#F6E7D5;max-width:52ch;font-size:1.125rem;text-wrap:balance}
.historia .mao{color:var(--amarelo)}
.citacao{margin:2.25rem 0 0;padding:1.6rem 1.75rem;background:var(--castanho-escuro);border-radius:24px;font-family:var(--display);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;font-weight:500}
.citacao footer{font-family:var(--mao);color:var(--laranja-claro);font-size:1.3rem;margin-top:.75rem}
.fotos-historia{position:relative;min-height:520px}
.fotos-historia .f{position:absolute;border-radius:28px;overflow:hidden;background:var(--laranja);border:3px solid var(--branco)}
.fotos-historia .f img{width:100%;height:100%;object-fit:cover}
.fotos-historia .f1{inset:0 18% 22% 0;transform:rotate(-2deg)}
.fotos-historia .f2{width:52%;height:46%;right:0;bottom:0;transform:rotate(3deg)}
.fotos-historia .carimbo{position:absolute;left:4%;bottom:6%;background:var(--amarelo);color:var(--castanho-escuro);font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.1;padding:1rem 1.2rem;border-radius:20px;transform:rotate(-3deg);max-width:13ch}

/* Restaurantes — mantém a nossa apresentação (fotos + carrossel), com a nova paleta */
.restaurantes{background:var(--bege)}
.restaurantes-corpo{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:start}
.lojas{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.loja{background:transparent;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;padding:.85rem 1rem;margin:0;text-decoration:none;transition:background-color .2s ease}
.loja:hover{background:var(--creme)}
.loja .foto-loja{height:120px;border-radius:10px;overflow:hidden;background:var(--laranja-claro);margin-bottom:.75rem}
.loja .foto-loja img{width:100%;height:100%;object-fit:cover}
.loja .corpo-loja{padding:0;display:flex;flex-direction:column;gap:.55rem;flex:1}
.loja .linha{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.loja h3{font-size:1rem;min-width:0}
.estado{flex:none;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.8rem;white-space:nowrap;color:#6B5A48}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:#9a8b7d}
.estado.aberto{color:#1F5A36}
.estado.aberto::before{background:#2E8B57}
.estado.fechado{color:#7A2E12}
.estado.fechado::before{background:#B5481E}
.dados{display:grid;gap:.4rem;margin:0}
.dados div{display:flex;align-items:flex-start;gap:.5rem}
.dados dt svg{width:15px;height:15px;color:var(--laranja-vivo);margin-top:.2rem;flex:none}
.dados dd{margin:0;font-size:.85rem;color:var(--texto-suave);line-height:1.4}
.btn--link{display:inline-block;margin-top:.1rem;color:var(--laranja);font-weight:700;text-decoration:none}
.btn--link:hover{text-decoration:underline}
.aviso-horario{margin-top:1.5rem;color:var(--texto-suave);font-size:.95rem;text-align:center}

.pre-visualizacao{position:relative;background:var(--branco);border-radius:28px;border:3px solid var(--castanho-escuro);overflow:hidden;aspect-ratio:7/8;align-self:start}
.pre-visualizacao img{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,252,246,.92);color:var(--castanho-escuro);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.pv-nav:hover{background:var(--amarelo)}
.pv-nav--prev{left:1rem}
.pv-nav--next{right:1rem}
.pv-pontos{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.4rem}
.pv-pontos span{width:8px;height:8px;border-radius:50%;background:rgba(59,31,12,.35)}
.pv-pontos span.is-active{background:var(--amarelo)}

/* Delivery */
.delivery{background:var(--castanho-escuro);color:var(--branco);overflow:hidden}
.delivery .contentor{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.delivery h2{font-size:clamp(2.8rem,6vw,5.2rem);line-height:.92}
.delivery h2 span{display:block;color:var(--laranja-claro)}
.delivery p{margin-top:1.4rem;font-size:1.2rem;color:#F6E7D5;max-width:38ch;text-wrap:balance}
.delivery .botao{margin-top:2rem}
.delivery .colagem{position:relative;min-height:440px}
.delivery .colagem .f{position:absolute;border-radius:50%;overflow:hidden;background:var(--laranja);border:4px solid var(--amarelo)}
.delivery .colagem .f img{width:100%;height:100%;object-fit:cover}
.delivery .colagem .f1{width:72%;aspect-ratio:1;top:0;right:0}
.delivery .colagem .f2{width:44%;aspect-ratio:1;bottom:0;left:4%;border-color:var(--laranja-vivo)}
.delivery .colagem .bolha{position:absolute;right:4%;bottom:8%;background:var(--amarelo);color:var(--castanho-escuro);font-family:var(--mao);font-size:1.6rem;padding:.6rem 1.1rem;border-radius:20px 20px 4px 20px;transform:rotate(-3deg)}

/* Contacto */
.contacto .contentor{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.contacto h2{font-size:clamp(2.4rem,5vw,4rem)}
.contacto .intro{margin-top:1.2rem;font-size:1.125rem;color:var(--texto-suave);max-width:40ch;text-wrap:balance}
.cartao-info{margin-top:2rem;background:var(--bege);border-radius:24px;padding:1.5rem}
.cartao-info h3{font-size:1.3rem;margin-bottom:.5rem}
.cartao-info + .cartao-info{margin-top:1rem}
.cartao-info a{font-weight:700}
.redes{display:flex;gap:.6rem;margin-top:.75rem}
.redes a{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:.5rem 1rem;border-radius:999px;background:var(--branco);text-decoration:none;font-weight:600}
.redes svg{width:20px;height:20px}
form.formulario{background:var(--branco);border:2px solid var(--castanho-escuro);border-radius:28px;padding:clamp(1.5rem,3vw,2.5rem);display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo.largo{grid-column:1/-1}
.campo label{font-weight:700;font-size:1rem}
.campo label span{font-weight:400;color:var(--texto-suave)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1.05rem;color:var(--castanho-texto);background:var(--creme);border:2px solid #CDBBA9;border-radius:14px;padding:.8rem 1rem;min-height:52px;width:100%}
.campo textarea{min-height:150px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--castanho);background:var(--branco);box-shadow:0 0 0 4px rgba(248,139,48,.35)}
.form-rodape{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem}
.form-rodape p{font-size:.95rem;color:var(--texto-suave);max-width:40ch;text-wrap:balance}
.estado-envio{grid-column:1/-1;font-weight:600;padding:.85rem 1rem;border-radius:14px;background:#DDF1E4;color:#1F5A36}
.estado-envio[hidden]{display:none}

/* Rodapé */
.rodape{background:var(--castanho);color:#F6E7D5;padding-block:4rem 2rem}
.rodape .grelha{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.rodape-marca{display:inline-flex;align-items:center}
.rodape img{height:64px;width:auto;display:block}
.rodape .slogan{font-family:var(--mao);font-size:1.5rem;color:var(--branco);margin-top:1rem;line-height:1.15}
.rodape h4{font-size:1.15rem;color:var(--branco);margin-bottom:.9rem}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.rodape a{text-decoration:none}
.rodape a:hover{text-decoration:underline;color:var(--branco)}
.rodape .legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,252,246,.18);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.92rem}
.rodape .legal nav{display:flex;gap:1.25rem;flex-wrap:wrap}

img[data-falhou]{opacity:0}

/* Entrada ao rolar (mecânica da primeira versão): esconde até entrar no
   ecrã e sobe com fade; .js só é adicionado pelo script, por isso sem JS
   (ou com JS desligado) o conteúdo fica sempre visível. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(28px) scale(.96);transition:opacity .7s ease,transform .7s ease}
.js .reveal.visivel{opacity:1;transform:translateY(0) scale(1)}
.js .reveal-esq{transform:translateX(-40px) scale(.96)}
.js .reveal-dir{transform:translateX(40px) scale(.96)}
.js .reveal-esq.visivel,.js .reveal-dir.visivel{transform:translateX(0) scale(1)}

/* Responsivo */
@media (max-width:1020px){
  .abrir-menu{display:inline-flex}
  .topo .contentor{flex-wrap:wrap}
  .menu{position:absolute;top:100%;left:0;right:0;background:var(--castanho);flex-direction:column;align-items:stretch;width:100%;max-height:0;opacity:0;visibility:hidden;overflow:hidden;box-shadow:0 16px 32px rgba(0,0,0,.25);transition:max-height .35s ease,opacity .3s ease,visibility 0s linear .35s}
  .menu.aberto{max-height:420px;opacity:1;visibility:visible;padding-bottom:1rem;transition:max-height .35s ease,opacity .3s ease,visibility 0s linear 0s}
  .menu a{padding:.85rem 1rem;font-size:1.15rem}
  .topo .cta-topo{display:none}
  .hero .contentor,.francesinha .contentor,.historia .contentor,.delivery .contentor,.contacto .contentor{grid-template-columns:1fr}
  .prato{justify-self:center;width:min(100%,520px);order:-1;margin-bottom:1rem}
  .francesinha figure{order:-1;margin-bottom:1rem}
  .delivery .colagem{order:-1;margin-bottom:1rem}
  .promos{grid-template-columns:repeat(2,1fr)}
  .sabores{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .sabores li:nth-child(6){grid-column:auto}
  .sabores li:last-child{grid-column:span 2}
  .fotos-historia{min-height:440px}
  .restaurantes-corpo{grid-template-columns:1fr}
  .pre-visualizacao{display:none}
  .loja .foto-loja{aspect-ratio:16/13}
  .rodape .grelha{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .lojas{grid-template-columns:1fr}
  .promos{grid-template-columns:1fr}
  form.formulario{grid-template-columns:1fr}
  .sabores li:first-child{grid-row:span 1}
  .hero .acoes .botao,.francesinha .acoes .botao{flex:1 1 100%;justify-content:center}
  .delivery .colagem{min-height:340px}
  .rodape .grelha{grid-template-columns:1fr}
  .nota-mao{right:0;bottom:-2%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}