/* Mesa Festiva: estilo das páginas do site (home). O cardápio (/cardapio) tem o próprio CSS, inline. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/fraunces-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3.woff2) format("woff2")}

/* mesmos tokens do cardápio */
:root{
  --roxo:#450955; --ouro:#c5a059; --desk:#e9e2d6; --paper:#fbf9f4; --paper-2:#f2ece1;
  --text:#2e0a38; --muted:#6d5a74; --label:#9a7a34; --line:#e3d9c8; --soft:#f1ebf3; --title:#450955;
  --cover:#fbf9f4; --cover-title:#450955; --cover-ink:#2e0a38; --cover-muted:#6d5a74; --cover-accent:#9a7a34;
  --shadow:rgba(46,10,56,.16); --bar:rgba(233,226,214,.86);
  --hero-bg:#f2ece1; --book:#fbf9f4; --book-title:#450955; --book-ink:#6d5a74; --book-accent:#9a7a34; --book-shade:rgba(46,10,56,.22); --soon-bg:rgba(251,249,244,.62); --soon-line:rgba(154,122,52,.5);
  --book-page:#f6f1e7; --flap-a:#ddd1bb; --flap-b:#fdfbf6; --flap-c:#ebe2d1;
  --font-display:"Fraunces",Georgia,serif; --font-body:"Source Sans 3","Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --desk:#110a14; --paper:#1e1323; --paper-2:#281a2e; --text:#efe6f1; --muted:#bfa9c6; --label:#d9b46c; --line:#3d2a45; --soft:#2c1b33; --title:#ecd4f3;
  --cover:#2a0636; --cover-title:#f9f7f2; --cover-ink:#f9f7f2; --cover-muted:#d9c3e0; --cover-accent:#c5a059; --shadow:rgba(0,0,0,.5); --bar:rgba(17,10,20,.86); --hero-bg:#2a0636; --book:#3a0c48; --book-title:#f9f7f2; --book-ink:#d9c3e0; --book-accent:#c5a059; --book-shade:rgba(0,0,0,.5); --soon-bg:rgba(30,19,35,.55); --soon-line:rgba(197,160,89,.4); --book-page:#1e1323; --flap-a:#3d2247; --flap-b:#6e4479; --flap-c:#52305d; color-scheme:dark}}
:root[data-theme="dark"]{
  --desk:#110a14; --paper:#1e1323; --paper-2:#281a2e; --text:#efe6f1; --muted:#bfa9c6; --label:#d9b46c; --line:#3d2a45; --soft:#2c1b33; --title:#ecd4f3;
  --cover:#2a0636; --cover-title:#f9f7f2; --cover-ink:#f9f7f2; --cover-muted:#d9c3e0; --cover-accent:#c5a059; --shadow:rgba(0,0,0,.5); --bar:rgba(17,10,20,.86); --hero-bg:#2a0636; --book:#3a0c48; --book-title:#f9f7f2; --book-ink:#d9c3e0; --book-accent:#c5a059; --book-shade:rgba(0,0,0,.5); --soon-bg:rgba(30,19,35,.55); --soon-line:rgba(197,160,89,.4); --book-page:#1e1323; --flap-a:#3d2247; --flap-b:#6e4479; --flap-c:#52305d; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--desk);color:var(--text);font-family:var(--font-body);font-size:16.5px;line-height:1.6;
  background-image:radial-gradient(ellipse at 50% 0%,rgba(197,160,89,.10),transparent 60%)}
@supports (min-height:100dvh){body{min-height:100dvh}}
main{flex:1}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;line-height:1.15;margin:0;color:var(--title)}
h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700}
h3{font-size:1.3rem;font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--label);margin:0}
.wrap{width:100%;max-width:1040px;margin-inline:auto;padding-inline:16px}
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--paper);padding:.5rem 1rem;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* botões (iguais aos do cardápio) */
.btn{font:600 .92rem var(--font-body);display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--ouro);background:var(--paper);color:var(--text);border-radius:999px;padding:.45rem .95rem;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--paper-2)}
.btn.icon{width:2.4rem;height:2.4rem;justify-content:center;padding:0;font-size:1.05rem}
.btn.gold{background:var(--ouro);color:#2e0a38;border-color:var(--ouro);font-size:1rem;padding:.7rem 1.4rem}
.btn.gold:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.ico{width:1.15em;height:1.15em;flex:none}

/* topo */
.topbar{position:sticky;top:0;z-index:10;background:var(--bar);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:.75rem;padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--title);white-space:nowrap;margin-right:auto}
.brand svg{width:30px;height:30px;flex:none}
.nav{display:flex;align-items:center;gap:.45rem}
.nav a:not(.btn){font-weight:600;font-size:.92rem;text-decoration:none;padding:.45rem .6rem;border-radius:999px;color:var(--text)}
.nav a:not(.btn):hover{background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--label)}
@media (max-width:520px){.nav .hide-sm{display:none}.brand{font-size:1rem}.btn.icon{width:2.2rem;height:2.2rem}}

/* faixa de abertura (acompanha o tema, como as capas do cardápio): texto à esquerda e a capa do cardápio à direita; no celular, empilhado e centralizado */
.hero{background:var(--hero-bg);border-bottom:1px solid var(--line);padding-block:clamp(2rem,6vw,4.5rem);overflow:hidden}
.hero-grid{display:grid;gap:1.6rem;align-items:center;justify-items:center;text-align:center}
.hero-text{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:40rem}
.hero .eyebrow{color:var(--cover-accent)}
.hero h1{font-size:clamp(2rem,6.4vw,3.4rem);font-weight:700;color:var(--cover-title)}
.hero .intro{color:var(--cover-ink);font-size:1.08rem;max-width:34rem}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.actions .btn.ghost{font-size:1rem;padding:.7rem 1.2rem}
.hero .btn.ghost{color:var(--cover-ink)}
.hero .btn.ghost:hover{background:rgba(197,160,89,.14)}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;color:var(--cover-ink);font-weight:600;font-size:.95rem}
.facts li{display:flex;align-items:center;gap:.5rem}
.facts li::before{content:"";width:6px;height:6px;flex:none;background:var(--ouro);transform:rotate(45deg)}
.hero .motto{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.05rem;color:var(--cover-accent)}
@media (min-width:880px){
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:3rem;justify-items:start;text-align:left}
  .hero-text{align-items:flex-start}
  .actions,.facts{justify-content:flex-start}
}

/* capa do cardápio como livro fechado: acompanha o tema como as capas do cardápio (clara no claro, roxa no escuro); o símbolo não gira nem distorce */
.book{--p:0px;display:block;width:min(300px,100%);justify-self:center;text-decoration:none;position:relative;container-type:inline-size;perspective:1600px;transition:transform .35s ease}
.book:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){.book{transition:none}.book:hover{transform:none}}
.book::after{content:"";position:absolute;top:2.5%;bottom:2.5%;right:-7px;width:7px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(to bottom,#f2ece1 0 2px,#d6ccbb 2px 3px);box-shadow:2px 4px 10px -4px rgba(0,0,0,.35)}
.book-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqi;aspect-ratio:3/4;padding:10cqi;text-align:center;
  background:var(--book);color:var(--book-title);border-radius:3px 8px 8px 3px;border:1px solid rgba(197,160,89,.55);position:relative;z-index:1;
  box-shadow:inset 9px 0 12px -7px var(--book-shade);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--p)),calc(100% - var(--p)) 100%,0 100%);transform-origin:left center;backface-visibility:hidden;transition:transform .7s cubic-bezier(.45,.05,.2,1)}
.book-in::before{content:"";position:absolute;inset:5cqi 5cqi 5cqi 7cqi;border:1px solid rgba(197,160,89,.55);border-radius:3px;pointer-events:none}
.book-in::after{content:"";position:absolute;left:4cqi;top:0;bottom:0;width:1px;background:rgba(197,160,89,.35)}
.book-sym{width:36cqi;height:auto}
.book-eyebrow{font-size:clamp(.5rem,4.4cqi,.8rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--book-accent)}
.book-title{font-family:var(--font-display);font-weight:700;font-size:12cqi;line-height:1.05;color:var(--book-title)}
.book-rule{display:flex;align-items:center;gap:3cqi;width:50%;color:var(--ouro)}
.book-rule::before,.book-rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.7}
.book-rule i{width:2.4cqi;height:2.4cqi;min-width:4px;min-height:4px;background:currentColor;transform:rotate(45deg)}
.book-sub{font-size:clamp(.5rem,4.6cqi,.85rem);color:var(--book-ink)}
@media (max-width:879px){.book{order:-1;width:min(170px,46vw)}}
/* folha de baixo (a página do sumário) e ponta da capa que levanta no computador, como no folheio do cardápio */
.book-page{position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:var(--book-page);border:1px solid rgba(197,160,89,.45);box-shadow:0 28px 50px -24px rgba(20,4,26,.55)}
.book-page-in{position:absolute;inset:10cqi 9cqi;display:flex;flex-direction:column;gap:5cqi}
.book-page-title{font-size:clamp(.5rem,4.4cqi,.8rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-bottom:2cqi}
.book-page-in i{height:2px;background:radial-gradient(circle,var(--book-ink) 1px,transparent 1.3px) left center/6px 2px repeat-x;opacity:.45}
.peel{position:absolute;right:0;bottom:0;width:var(--p);height:var(--p);z-index:2;pointer-events:none;filter:drop-shadow(-3px -3px 4px rgba(20,4,26,.3))}
.peel i{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(315deg,transparent 50%,var(--flap-a) 50%,var(--flap-b) 72%,var(--flap-c) 100%)}
.book.opening{transform:none}
.book.opening .book-in{transform:rotateY(-180deg)}
.book.opening .peel{opacity:0}
@media (prefers-reduced-motion: reduce){.book-in{transition:none}}

/* seções */
.section{padding-block:clamp(2.5rem,6vw,4rem)}
.section-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.6rem;max-width:62ch}
.section-head p{color:var(--muted)}

/* cartões de cardápio */
.menus{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.menus{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.menus .natal{grid-column:1/-1}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 10px 30px -18px var(--shadow);position:relative}
.card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(197,160,89,.35);border-radius:10px;pointer-events:none}
.card p{color:var(--muted)}
.card .btn{align-self:flex-start;margin-top:auto}
.card.soon{background:var(--soon-bg);box-shadow:none;border:1px dashed var(--soon-line)}
.card.soon::before{display:none}
.card.soon .soon-mark{margin-top:auto;display:flex;align-items:center;gap:.6rem;width:7rem;max-width:60%;color:var(--ouro);opacity:.8}
.card.soon .soon-mark::before,.card.soon .soon-mark::after{content:"";flex:1;height:1px;background:currentColor}
.card.soon .soon-mark i{width:7px;height:7px;flex:none;background:currentColor;transform:rotate(45deg)}
.tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:.2rem .65rem;border:1px solid var(--ouro);color:var(--label)}
.tag.on{background:var(--roxo);border-color:var(--roxo);color:#f9f7f2}
:root[data-theme="dark"] .tag.on{background:var(--ouro);border-color:var(--ouro);color:#2e0a38}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag.on{background:var(--ouro);border-color:var(--ouro);color:#2e0a38}}
.more{margin-top:1.4rem;color:var(--muted);display:flex;align-items:center;gap:.6rem}
.more::before{content:"";width:7px;height:7px;flex:none;background:var(--ouro);transform:rotate(45deg)}


/* cartão do Natal com os três kits (sem preço: o preço fica só no cardápio) */
.card.natal{gap:1.2rem}
.natal-text{display:flex;flex-direction:column;gap:.7rem}
.natal-text .actions{justify-content:flex-start;margin-top:.3rem}
.card.natal .btn{margin-top:0}
.kits{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.kits{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.card.natal{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);align-items:center;gap:2rem}}
.kit{height:100%;display:flex;flex-direction:column;gap:.25rem;padding:1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);text-decoration:none;color:var(--text);position:relative;transition:border-color .2s ease,transform .2s ease}
.kit:hover{border-color:var(--ouro);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.kit{transition:none}.kit:hover{transform:none}}
.kit.rec{border-color:var(--ouro)}
.kit-badge{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ouro);color:#2e0a38;border-radius:999px;padding:.15rem .55rem;margin-bottom:.3rem}
.kit-brand{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.kit-name{font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.15;color:var(--title)}
.kit-desc{color:var(--muted);font-size:.95rem;line-height:1.45}
.kit-go{margin-top:auto;padding-top:.5rem;font-weight:700;font-size:.9rem;color:var(--title)}

/* como funciona */
.section.how{background:var(--paper);border-bottom:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);counter-reset:none}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps li{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.steps .n{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--ouro);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--label)}
.steps p{color:var(--text);padding-top:.35rem}
.steps .step-soon{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.55rem;padding-top:0;color:var(--muted);font-size:.92rem}
.steps .step-soon .tag{font-size:.66rem;padding:.12rem .55rem}
.how .more{margin-top:1.2rem;align-items:flex-start}
.how .more::before{margin-top:.55rem}
.how-cta{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem}
.how-cta .btn.ghost{font-size:1rem;padding:.7rem 1.2rem}
.faq .more a{color:var(--title);font-weight:600;text-underline-offset:2px}

/* mandar no grupo da família */
.share{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.share p{color:var(--muted);max-width:44rem}
.share strong{color:var(--title)}

/* perguntas frequentes */
.section.faq{background:var(--paper);border-top:1px solid var(--line)}
.faq-list{display:grid;gap:.6rem;max-width:52rem}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--paper-2)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;font-weight:600;color:var(--title)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--ouro);border-bottom:2px solid var(--ouro);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}}
.faq details p{padding:0 1.1rem 1rem;color:var(--muted)}

/* barra fixa no celular: aparece quando a abertura sai da tela */
.mbar{display:none}
@media (max-width:759px){
  .mbar{display:flex;gap:.5rem;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:.6rem 16px calc(.6rem + env(safe-area-inset-bottom));
    background:var(--bar);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--line);
    transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility .3s}
  .mbar.show{transform:none;visibility:visible}
  .mbar .btn.gold{flex:1;justify-content:center}
  .mbar .btn.icon{width:2.9rem;height:2.9rem;flex:none}
  body .footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}
@media (max-width:759px) and (prefers-reduced-motion: reduce){.mbar{transition:none}}

/* rodapé */
.footer{border-top:1px solid var(--line);background:var(--cover);color:var(--cover-ink);text-align:center;padding-block:2rem calc(2rem + env(safe-area-inset-bottom))}
.footer .wrap{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.footer svg{width:44px;height:44px}
.footer .motto{font-family:var(--font-display);font-style:italic;color:var(--cover-accent)}
.footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.2rem;font-weight:600}
.footer nav a{text-decoration:none}
.footer nav a:hover{text-decoration:underline}
.footer .contact .ico{width:1.15em;height:1.15em}
.footer .contact a{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none}
.footer .contact a:hover{text-decoration:underline}
.footer .credit{font-size:.85rem;color:var(--cover-muted)}

/* onda da troca de tema (mesma do cardápio) */
.theme-wave{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;overflow:visible}
html.wave-on::view-transition-old(root),html.wave-on::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.wave-on::view-transition-new(root){clip-path:var(--wave);animation:mf-hold var(--wave-dur,900ms) linear}
@keyframes mf-hold{from{opacity:1}to{opacity:1}}
html.theme-fade,html.theme-fade *{transition:background-color .5s ease,color .5s ease,border-color .5s ease!important}
.btn.icon.theme-toggle.spin{animation:mf-spin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes mf-spin{from{transform:rotate(-120deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.btn.icon.theme-toggle.spin{animation:none}}

/* página de erro 404 */
.hero.notfound{display:grid;place-items:center;min-height:60vh;text-align:center}
.notfound .hero-text{align-items:center;margin-inline:auto}
.notfound .actions{justify-content:center}