/* =====================================================================
   CHOPP CETRO
   Linguagem visual: rótulo de cervejaria clássica.
   Papel creme, verde e ouro do brasão, ornamentos e gravuras.
   Mobile first. Quebras: 40em (640px), 60em (960px), 82em (1312px)
   ===================================================================== */

/* ---------- 1. PALETA E MEDIDAS ---------- */
:root{
  /* papel */
  --papel:    #F4EDDD;
  --papel-2:  #EDE3CD;
  --papel-3:  #E3D6BA;

  /* verde do selo */
  --verde:    #0C4F2C;
  --verde-esc:#06381F;
  --verde-cl: #14713F;

  /* ouro do brasão */
  --ouro:     #B58A2B;
  --ouro-cl:  #E3C173;
  --ouro-txt: #7A5810;

  /* tintas */
  --tinta:    #12281B;
  --tinta-75: rgba(18,40,27,.76);
  --tinta-55: rgba(18,40,27,.58);
  --creme-80: rgba(244,237,221,.82);
  --creme-60: rgba(244,237,221,.64);

  --vinho:    #7A1F35;

  --ff-orn: "Cinzel", "Trajan Pro", Georgia, serif;
  --ff-tit: "Zilla Slab", "Bookman Old Style", Georgia, serif;
  --ff-txt: "Karla", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --larg: 1200px;
  --pad: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --grao:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");

  /* espiga repetida, usada de marca d'água nas faixas verdes */
  --cevada:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cg fill='none' stroke='%23E3C173' stroke-width='2' stroke-linecap='round' opacity='.16'%3E%3Cpath d='M60 132V66'/%3E%3Cpath d='M60 118c-7 0-11-4-11-9 5-2 11 1 11 9zM60 118c7 0 11-4 11-9-5-2-11 1-11 9z'/%3E%3Cpath d='M60 105c-7 0-11-4-11-9 5-2 11 1 11 9zM60 105c7 0 11-4 11-9-5-2-11 1-11 9z'/%3E%3Cpath d='M60 92c-7 0-11-4-11-9 5-2 11 1 11 9zM60 92c7 0 11-4 11-9-5-2-11 1-11 9z'/%3E%3Cpath d='M60 67c-3-6-1-12 0-15 1 3 3 9 0 15z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width:40em){ :root{ --pad:34px } }
@media (min-width:60em){ :root{ --pad:48px } }

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0 }
ul,ol{ padding:0; list-style:none }
img,svg{ display:block; max-width:100% }
img{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; border-radius:2px }
hr{ border: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 }
}

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--ff-txt);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.travado{ overflow:hidden }

.sprite{ position:absolute; width:0; height:0; overflow:hidden }
sub{ font-size:.68em; line-height:0; position:relative; bottom:-.22em }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ouro); color:var(--verde-esc); padding:12px 20px; font-weight:700;
}
.skip:focus{ left:0 }

.wrap{ width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad) }

.ico{ width:1.15em; height:1.15em; flex:none }

/* ---------- 3. TIPOGRAFIA ---------- */
.sobre{
  font-family:var(--ff-orn); font-weight:600;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ouro-txt); margin-bottom:14px;
}
.h2{
  font-family:var(--ff-tit); font-weight:600;
  font-size:clamp(31px,7.4vw,52px); line-height:1.08; letter-spacing:-.015em;
}
.h2 em{ font-style:italic; font-weight:400; color:var(--ouro-txt) }
.lede{ margin-top:20px; font-size:clamp(15.5px,3.6vw,17.5px); color:var(--tinta-75); max-width:50ch }
.miudo{ margin-top:20px; font-size:13.5px; line-height:1.6; color:var(--tinta-55); max-width:44ch }

/* ---------- 4. ORNAMENTOS ---------- */
/* fio duplo com losango no meio */
.orn{
  position:relative; height:9px; margin:22px 0 0; max-width:280px;
  background:
    linear-gradient(var(--ouro),var(--ouro)) left 0/calc(50% - 15px) 1px no-repeat,
    linear-gradient(var(--ouro),var(--ouro)) right 0/calc(50% - 15px) 1px no-repeat,
    linear-gradient(var(--ouro),var(--ouro)) left 8px/calc(50% - 15px) 1px no-repeat,
    linear-gradient(var(--ouro),var(--ouro)) right 8px/calc(50% - 15px) 1px no-repeat;
}
.orn::before{
  content:""; position:absolute; left:50%; top:0; width:9px; height:9px; margin-left:-4.5px;
  background:var(--ouro); transform:rotate(45deg) scale(.82);
}
.orn::after{
  content:""; position:absolute; left:50%; top:3.4px; width:2.2px; height:2.2px; margin-left:-1.1px;
  background:var(--papel); border-radius:50%; z-index:2;
}
.orn--claro,
.hero .orn,
.sec--verde .orn{
  background-image:
    linear-gradient(var(--ouro-cl),var(--ouro-cl)),linear-gradient(var(--ouro-cl),var(--ouro-cl)),
    linear-gradient(var(--ouro-cl),var(--ouro-cl)),linear-gradient(var(--ouro-cl),var(--ouro-cl));
}
.sec--verde .orn::before,.orn--claro::before,.hero .orn::before{ background:var(--ouro-cl) }
.sec--verde .orn::after,.orn--claro::after,.hero .orn::after{ background:var(--verde) }
.sec--escura .orn::after{ background:var(--verde-esc) }
.orn--mini{ max-width:150px; margin-inline:auto }

/* cabeçalho de seção */
.cab{ max-width:640px; margin-bottom:40px }
.cab__trigo{ display:flex; gap:6px; color:var(--ouro); margin-bottom:16px }
.cab__trigo svg{ width:20px; height:48px }
.cab__trigo .esp{ transform:scaleX(-1) }
@media (min-width:60em){ .cab{ margin-bottom:60px } }

/* selo pequeno tipo etiqueta */
.selo-mini{
  display:inline-block; font-family:var(--ff-orn); font-weight:600;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--papel); background:var(--verde); padding:5px 11px 4px;
}
.selo-mini--v{ background:var(--vinho) }
.selo-mini--n{ background:transparent; color:var(--ouro-txt); box-shadow:inset 0 0 0 1px var(--ouro) }

/* medalha numerada */
.medalha{
  position:relative; display:grid; place-content:center; flex:none;
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid var(--ouro-cl);
}
.medalha::after{ content:""; position:absolute; inset:4px; border:1px solid var(--ouro-cl); border-radius:50%; opacity:.55 }
.medalha b{ font-family:var(--ff-orn); font-weight:700; font-size:16px; color:var(--ouro-cl); letter-spacing:.04em }

/* ---------- 5. BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:56px; padding:0 30px; border:0; cursor:pointer;
  font-family:var(--ff-orn); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn > *{ position:relative; z-index:2 }
/* brilho que atravessa o botão ao passar o mouse */
.btn::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::after{ animation:lustro .85s var(--ease) }
@keyframes lustro{ to{ transform:translateX(120%) } }
.btn:active{ transform:translateY(1px) scale(.99) }
.btn .ico{ width:19px; height:19px }

.btn--ouro{
  background:linear-gradient(168deg,#EFD693 0%,#D5AE4E 38%,var(--ouro) 68%,#9A7420 100%);
  color:var(--verde-esc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(88,64,10,.4),
    inset 0 0 0 1px rgba(120,90,20,.35),
    0 2px 4px rgba(24,16,4,.2), 0 10px 22px -12px rgba(122,88,16,.85);
}
.btn--ouro:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(88,64,10,.4),
    inset 0 0 0 1px rgba(120,90,20,.45),
    0 4px 8px rgba(24,16,4,.22), 0 18px 34px -14px rgba(122,88,16,.95);
}

.btn--verde{
  background:linear-gradient(168deg,#0F6337,var(--verde-esc) 78%);
  color:var(--papel);
  box-shadow:
    inset 0 0 0 1px rgba(227,193,115,.55), inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 24px -14px rgba(0,0,0,.9);
}
.btn--verde:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--ouro-cl), inset 0 1px 0 rgba(255,255,255,.16), 0 18px 34px -16px rgba(0,0,0,.95);
}
.btn--g{ min-height:60px; padding:0 26px; font-size:12px; letter-spacing:.1em }
@media (min-width:40em){ .btn--g{ min-height:64px; padding:0 40px; font-size:13.5px; letter-spacing:.14em } }

.btn--linha{ background:transparent; color:currentColor; box-shadow:inset 0 0 0 1.5px currentColor }
.btn--linha:hover{ background:rgba(181,138,43,.14) }
.sec--verde .btn--linha,.hero .btn--linha{ color:var(--ouro-cl) }
.hero .btn--linha:hover{ background:rgba(227,193,115,.14) }

.btn--p{ min-height:44px; padding:0 20px; font-size:11.5px }
.btn--bloco{ display:flex; width:100%; font-size:11.5px; letter-spacing:.09em }
@media (min-width:40em){ .btn--bloco{ font-size:12.5px; letter-spacing:.12em } }

/* ---------- 6. MARCA ---------- */
.logo{ display:inline-flex; align-items:center; gap:12px }
.marca{ display:block; width:46px; height:46px; flex:none; position:relative }
.marca img{ width:100%; height:100%; object-fit:contain }
.marca svg{ display:none; width:100%; height:100%; fill:var(--ouro-cl) }
.marca.sem-logo img{ display:none }
.marca.sem-logo svg{ display:block }
.marca--g{ width:88px; height:88px; margin:0 auto 14px }
.marca--m{ width:74px; height:74px; margin:0 auto 16px }
.logo__txt{ display:flex; flex-direction:column; line-height:1 }
.logo__sup{ font-family:var(--ff-orn); font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; opacity:.72; margin-bottom:4px }
.logo__main{ font-family:var(--ff-orn); font-weight:700; font-size:20px; letter-spacing:.09em; text-transform:uppercase }
@media (min-width:60em){
  .marca{ width:52px; height:52px }
  .logo__main{ font-size:22px }
}

/* ---------- 7. CABEÇALHO ---------- */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:90; color:var(--papel); transition:background .3s var(--ease), box-shadow .3s }
.hdr__in{ max-width:var(--larg); margin-inline:auto; padding:14px var(--pad); display:flex; align-items:center; gap:16px }
.hdr.fixo{ background:var(--verde-esc); box-shadow:0 1px 0 rgba(227,193,115,.34), 0 10px 30px -18px rgba(0,0,0,.6) }
.nav,.hdr__cta{ display:none }

.burger{ margin-left:auto; width:46px; height:46px; border:0; background:transparent; cursor:pointer; display:grid; place-content:center; gap:7px }
.burger span{ display:block; width:26px; height:2px; background:var(--papel); transition:transform .3s var(--ease) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.5px) rotate(-45deg) }

@media (min-width:60em){
  .burger{ display:none }
  .nav{ display:flex; gap:24px; margin-left:auto; font-size:13px; font-weight:600; letter-spacing:.02em }
  /* os itens do menu nunca quebram no meio da palavra */
  .nav a{ position:relative; padding:6px 0; color:var(--creme-80); white-space:nowrap; transition:color .2s }
  .nav a::after{ content:""; position:absolute; left:50%; right:50%; bottom:0; height:1px; background:var(--ouro-cl); transition:left .28s var(--ease), right .28s var(--ease) }
  .nav a:hover{ color:var(--papel) }
  .nav a:hover::after{ left:0; right:0 }
  .hdr__cta{ display:inline-flex; margin-left:20px; white-space:nowrap }
}
/* telas largas: menu com mais folga */
@media (min-width:82em){
  .nav{ gap:32px }
  .hdr__cta{ margin-left:28px }
}

/* ---------- 8. MENU DO CELULAR ---------- */
.menu{
  position:fixed; inset:0; z-index:88; background:var(--verde-esc); color:var(--papel);
  padding:92px var(--pad) calc(26px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity .28s var(--ease);
}
.menu::before{ content:""; position:absolute; inset:0; background:var(--cevada) center/150px auto repeat; opacity:.5; pointer-events:none }
.menu.aberto{ opacity:1 }
.menu__selo{ position:absolute; right:-46px; top:34%; width:230px; height:230px; opacity:.07; pointer-events:none }
.menu__selo svg{ width:100%; height:100%; fill:var(--ouro-cl) }
.menu__nav{ position:relative; display:flex; flex-direction:column }
.menu__nav a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--ff-tit); font-weight:500; font-size:clamp(25px,7.4vw,34px); line-height:1.6;
  padding:7px 0; border-bottom:1px solid rgba(227,193,115,.24);
  opacity:0; transform:translateY(12px);
}
.menu.aberto .menu__nav a{ animation:entraMenu .45s var(--ease) forwards }
.menu.aberto .menu__nav a:nth-child(1){ animation-delay:.05s }
.menu.aberto .menu__nav a:nth-child(2){ animation-delay:.1s }
.menu.aberto .menu__nav a:nth-child(3){ animation-delay:.15s }
.menu.aberto .menu__nav a:nth-child(4){ animation-delay:.2s }
.menu.aberto .menu__nav a:nth-child(5){ animation-delay:.25s }
.menu.aberto .menu__nav a:nth-child(6){ animation-delay:.3s }
@keyframes entraMenu{ to{ opacity:1; transform:none } }
.menu__nav i{ font-style:normal; font-family:var(--ff-orn); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--ouro-cl); min-width:26px }
.menu__pe{ position:relative; display:grid; gap:16px; justify-items:center }
.menu__ig{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--creme-60) }
.menu__ig span{ color:var(--ouro-cl) }
.menu__ig .ico{ fill:currentColor }

/* ---------- 9. ABERTURA ---------- */
.hero{
  position:relative; color:var(--papel);
  background:var(--verde);
  padding:104px 0 0;
  overflow:hidden;
}
.hero::before{ content:""; position:absolute; inset:0; background:var(--cevada) -30px 40px/118px auto repeat; opacity:.3; pointer-events:none }
.hero .sobre{ color:var(--ouro-cl) }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 78% 8%, rgba(227,193,115,.18), transparent 60%),
             radial-gradient(90% 60% at 0% 100%, rgba(0,0,0,.4), transparent 62%);
}
.hero__moldura{
  position:absolute; inset:13px; pointer-events:none; z-index:3;
  border:1px solid rgba(227,193,115,.55);
  outline:3px double rgba(227,193,115,.4); outline-offset:5px;
}
.cnt{ position:absolute; width:15px; height:15px; background:var(--ouro-cl); transform:rotate(45deg) scale(.6) }
.cnt--se{ left:-8px; top:-8px } .cnt--sd{ right:-8px; top:-8px }
.cnt--ie{ left:-8px; bottom:-8px } .cnt--id{ right:-8px; bottom:-8px }

.hero__in{ position:relative; z-index:4; padding-top:26px; padding-bottom:12px }
.hero__h1{
  font-family:var(--ff-tit); font-weight:600;
  font-size:clamp(38px,11.4vw,84px); line-height:1.02; letter-spacing:-.024em;
  text-wrap:balance;
}
.hero__h1 em{ font-style:italic; font-weight:400; color:var(--ouro-cl) }
.hero .orn{ margin-block:24px }
.hero__sub{ max-width:42ch; color:var(--creme-80); font-size:clamp(15.5px,3.9vw,18px) }
.hero__btns{ margin-top:30px; display:flex; flex-direction:column; gap:12px }

.hero__arte{ position:relative; margin:38px auto 0; width:min(80vw,320px); text-align:center }

/* disco: mostra o selo da marca; vira foto redonda quando existir hero-chopp.jpg */
.disco{ position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center }
.disco::before{
  content:""; position:absolute; inset:-14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(227,193,115,.24), transparent 62%);
}
.disco__anel,.disco__foto{ display:none }
.disco__selo{
  position:relative; z-index:2; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
}

.disco.com-foto .disco__foto{
  display:block; position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.disco.com-foto .disco__anel{
  display:block; position:absolute; inset:-9px; z-index:3; border-radius:50%;
  border:2px solid var(--ouro-cl); pointer-events:none;
  box-shadow:0 0 0 7px var(--verde), 0 0 0 8px rgba(227,193,115,.6), 0 22px 40px -20px rgba(0,0,0,.7);
}
.disco.com-foto .disco__selo{
  position:absolute; right:-4%; bottom:-2%; z-index:4;
  width:38%; height:auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

.hero__fita{
  position:relative; display:inline-block; margin-top:16px; padding:8px 26px;
  background:var(--ouro); color:var(--verde-esc);
  font-family:var(--ff-orn); font-weight:700; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 50%,100% 100%,0 100%,11px 50%);
}

.hero__pe{
  position:relative; z-index:4; margin-top:30px;
  border-top:1px solid rgba(227,193,115,.3);
  display:grid; padding:6px var(--pad) 26px; max-width:var(--larg); margin-inline:auto;
}
.hero__pe li{
  display:flex; align-items:center; gap:11px; padding:13px 0;
  font-size:13px; letter-spacing:.02em; color:var(--creme-80);
  border-bottom:1px solid rgba(227,193,115,.16);
}
.hero__pe li:last-child{ border-bottom:0 }
.hero__pe svg{ width:26px; height:26px; color:var(--ouro-cl); flex:none }

@media (min-width:40em){
  .hero__btns{ flex-direction:row; flex-wrap:wrap }
  .hero__pe{ grid-template-columns:repeat(3,1fr); gap:0 26px }
  .hero__pe li{ border-bottom:0 }
}
@media (min-width:60em){
  .hero{ padding-top:132px }
  .hero__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-bottom:26px }
  .hero__arte{ margin:0; width:100%; max-width:340px; justify-self:center }
  .hero__moldura{ inset:20px }
  .hero__pe li{ font-size:13.5px }
}

/* ---------- 10. FAIXA CORRIDA ---------- */
.fita{ overflow:hidden; background:var(--ouro); padding:11px 0; border-block:2px solid var(--verde-esc) }
.fita__linha{ display:flex; width:max-content; animation:corre 36s linear infinite }
.fita__grupo{ display:flex; align-items:center; gap:22px; padding-right:22px }
.fita__grupo span{
  font-family:var(--ff-orn); font-weight:600; font-size:clamp(11px,2.9vw,13px);
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; color:var(--verde-esc);
}
.fita__grupo b{ width:7px; height:7px; background:var(--verde-esc); transform:rotate(45deg); flex:none }
@keyframes corre{ to{ transform:translateX(-50%) } }
.fita:hover .fita__linha{ animation-play-state:paused }

/* ---------- 11. SEÇÕES ---------- */
.sec{ position:relative; padding:64px 0 }
@media (min-width:60em){ .sec{ padding:104px 0 } }

.sec--creme{ background:var(--papel) }
.sec--creme::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:var(--grao);
}
.sec--verde{ background:var(--verde); color:var(--papel) }
.sec--escura{ background:var(--verde-esc) }
.sec--verde::before{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--cevada) 20px 0/118px auto repeat; opacity:.26 }
.sec--verde .sobre{ color:var(--ouro-cl) }
.sec--verde .h2 em{ color:var(--ouro-cl) }
.sec--verde .lede{ color:var(--creme-80) }
.sec--verde .wrap{ position:relative; z-index:2 }
.sec--creme .wrap{ position:relative; z-index:2 }

/* ---------- 12. CARDÁPIO ---------- */
.carta{ border-top:2px solid var(--tinta) }
.item{
  position:relative; display:grid; grid-template-columns:76px 1fr; gap:18px;
  padding:26px 0; border-bottom:1px solid rgba(18,40,27,.2);
}
.item__n{
  position:absolute; right:0; top:20px;
  font-family:var(--ff-orn); font-weight:700; font-size:44px; line-height:1;
  color:var(--ouro); opacity:.24; pointer-events:none;
}
.item__arte{ width:76px }
/* retrato redondo do chopp, com anel dourado duplo */
.retrato{
  display:block; position:relative; width:100%; aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  box-shadow:
    0 0 0 1px var(--ouro), 0 0 0 4px var(--papel), 0 0 0 5px rgba(181,138,43,.45),
    0 12px 24px -14px rgba(18,40,27,.85);
}
.retrato img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease), filter .5s;
}
.item:hover .retrato img{ transform:scale(1.09) }
.retrato::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(150deg,rgba(255,244,214,.28),transparent 46%);
}

.item__topo{ margin-bottom:9px }
.item__nome{ font-family:var(--ff-tit); font-weight:600; font-size:clamp(21px,5.2vw,27px); line-height:1.16; letter-spacing:-.01em }
.item__desc{ margin-top:8px; color:var(--tinta-75); font-size:15.5px; max-width:56ch }
.ficha{ margin-top:16px; display:grid; gap:5px; max-width:420px }
.ficha > div{ display:flex; align-items:baseline }
.ficha dt{ font-family:var(--ff-orn); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-55) }
.ficha i{ flex:1; border-bottom:1.5px dotted rgba(18,40,27,.34); margin:0 9px; transform:translateY(-3px) }
.ficha dd{ font-size:13.5px; font-weight:700; letter-spacing:.01em }

@media (min-width:60em){
  .item{ grid-template-columns:150px 1fr; gap:40px; padding:40px 0; align-items:center }
  .item__arte{ width:150px }
  .item__n{ font-size:64px; top:30px }
  .item__desc{ font-size:16px }
  .ficha{ grid-template-columns:repeat(3,1fr); gap:0 30px; max-width:none; margin-top:20px }
}

/* ---------- 12b. FICHA TÉCNICA (faixa de números) ---------- */
.ficha-band{
  position:relative; background:var(--verde-esc); color:var(--papel);
  padding:34px 0; overflow:hidden;
  border-block:1px solid rgba(227,193,115,.28);
}
.ficha-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--cevada) 0 0/108px auto repeat; opacity:.2;
}
.ficha-band__tit{
  position:relative; z-index:2; text-align:center; color:var(--ouro-cl);
  margin-bottom:26px;
}
.numeros{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:26px 14px; text-align:center;
}
.numeros li{ position:relative }
.numeros li + li::before{
  content:""; position:absolute; left:-7px; top:12%; bottom:12%; width:1px;
  background:linear-gradient(rgba(227,193,115,0),rgba(227,193,115,.4),rgba(227,193,115,0));
}
.numeros li:nth-child(3)::before{ display:none }
.numeros b{
  display:flex; align-items:baseline; justify-content:center; gap:3px;
  font-family:var(--ff-tit); font-weight:700; font-size:clamp(34px,9vw,46px); line-height:1;
  color:var(--ouro-cl); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.numeros b i{ font-style:normal; font-family:var(--ff-orn); font-weight:600; font-size:.42em; letter-spacing:.06em }
.numeros li > span{
  display:block; margin-top:9px;
  font-family:var(--ff-orn); font-weight:600; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--creme-60);
}
@media (min-width:60em){
  .ficha-band{ padding:46px 0 }
  .numeros{ grid-template-columns:repeat(4,1fr); gap:0 20px }
  .numeros li:nth-child(3)::before{ display:block }
}

/* ---------- 13. PASSOS ---------- */
.como{ display:grid; gap:38px }
@media (min-width:60em){
  .como{ grid-template-columns:.82fr 1.18fr; gap:64px; align-items:center }
}
/* foto emoldurada, estilo chapa antiga */
.chapa{
  position:relative; margin:0; background:var(--verde-esc); padding:11px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.95);
}
.chapa::after{
  content:""; position:absolute; inset:5px; border:1px solid rgba(227,193,115,.6);
  pointer-events:none; z-index:3;
}
.chapa img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1s var(--ease);
}
.chapa:hover img{ transform:scale(1.05) }
.chapa figcaption{
  position:absolute; left:11px; right:11px; bottom:11px; z-index:2;
  padding:38px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(3,20,11,.9));
}
.chapa figcaption span{
  font-family:var(--ff-orn); font-weight:600; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-cl);
}
.passos{ display:grid; gap:0 }
.passo{
  position:relative; display:grid;
  grid-template-columns:56px 1fr; column-gap:18px; align-items:start;
  padding:0 0 30px 0;
}
.passo::before{
  content:""; position:absolute; left:27.5px; top:62px; bottom:-2px; width:1px;
  background:repeating-linear-gradient(var(--ouro-cl) 0 4px,transparent 4px 9px); opacity:.5;
}
.passo:last-child{ padding-bottom:0 }
.passo:last-child::before{ display:none }
.medalha{ grid-column:1; grid-row:1 }
.passo__ico{ display:none }
.passo h3{ grid-column:2; grid-row:1; font-family:var(--ff-tit); font-weight:600; font-size:20px; line-height:1.2; padding-top:13px }
.passo p{ grid-column:2; grid-row:2; margin-top:7px; color:var(--creme-80); font-size:15px }

@media (min-width:60em){
  .passo{ grid-template-columns:64px 1fr; column-gap:24px; padding-bottom:34px }
  .passo::before{ left:31.5px; top:70px }
  .medalha{ width:64px; height:64px }
  .medalha b{ font-size:17px }
  .passo h3{ font-size:21px; padding-top:17px }
  .passo p{ font-size:15px; max-width:52ch }
}

/* ---------- 14. A CONTA (calculadora) ---------- */
.conta{ display:grid; gap:38px }
@media (min-width:60em){ .conta{ grid-template-columns:.94fr 1.06fr; gap:64px; align-items:center } }

.ficha-calc{
  position:relative; background:var(--papel-2); padding:30px 22px 28px;
  box-shadow:inset 0 0 0 1px var(--papel-3), 0 18px 40px -30px rgba(18,40,27,.7);
}
.ficha-calc::before{
  content:""; position:absolute; inset:8px; pointer-events:none;
  border:1px solid rgba(181,138,43,.42);
}
/* borda serrilhada no topo, tipo comanda destacada */
.ficha-calc__topo{
  position:absolute; left:0; right:0; top:-9px; height:10px;
  background:radial-gradient(circle at 7px 10px, transparent 7px, var(--papel-2) 7.5px) 0 0/14px 10px repeat-x;
}
@media (min-width:40em){ .ficha-calc{ padding:38px 34px 34px } }

.campo{ position:relative; margin-bottom:24px }
.campo > label,.campo__lbl{
  display:block; font-family:var(--ff-orn); font-weight:600;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta); margin-bottom:14px;
}
.campo > label,.campo__lbl,.slider__pts,.slider__val,.opc span{ -webkit-user-select:none; user-select:none }

.slider{ display:flex; align-items:center; gap:16px }
.slider__val{
  font-family:var(--ff-tit); font-weight:700; font-size:32px; line-height:1;
  min-width:70px; text-align:right; color:var(--verde); font-variant-numeric:tabular-nums;
}
.slider__pts{ display:flex; justify-content:space-between; font-size:11px; color:var(--tinta-55); margin-top:6px; padding-right:86px }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:pointer; margin:0 }
input[type=range]::-webkit-slider-runnable-track{
  height:6px; background:linear-gradient(90deg,var(--ouro) var(--pct,30%),rgba(18,40,27,.16) var(--pct,30%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#EED08C,var(--ouro) 70%);
  border:2px solid var(--verde-esc); box-shadow:0 2px 0 rgba(18,40,27,.3);
  transition:transform .18s var(--ease);
}
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.12) }
input[type=range]::-moz-range-track{ height:6px; background:rgba(18,40,27,.16) }
input[type=range]::-moz-range-progress{ height:6px; background:var(--ouro) }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--ouro); border:2px solid var(--verde-esc) }

.opcoes{ display:flex; flex-wrap:wrap; gap:8px }
.opcoes--l{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.opc{ position:relative; flex:0 0 auto }
.opc input{ position:absolute; opacity:0; width:0; height:0 }
.opc span{
  display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 16px;
  cursor:pointer; white-space:nowrap;
  font-family:var(--ff-orn); font-weight:600; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-75); background:var(--papel);
  box-shadow:inset 0 0 0 1px rgba(18,40,27,.22);
  transition:color .18s, background .18s, box-shadow .18s, transform .16s var(--ease);
}
.opc:hover span{ box-shadow:inset 0 0 0 1px var(--ouro); color:var(--tinta) }
.opc input:checked + span{ background:var(--verde); color:var(--ouro-cl); box-shadow:inset 0 0 0 1px var(--verde-esc) }
.opc input:focus-visible + span{ outline:2px solid var(--ouro); outline-offset:3px }
.opc:active span{ transform:translateY(1px) }
.opcoes--l .opc span{ padding:0 6px; font-size:10.5px; letter-spacing:.08em }
@media (min-width:24em){ .opcoes--l .opc span{ font-size:11px; letter-spacing:.1em } }
@media (min-width:40em){ .opcoes--l .opc span{ padding:0 14px; font-size:11.5px; letter-spacing:.12em } }

.resultado{ margin:28px 0 22px; text-align:center }
.carimbo{ position:relative; width:186px; aspect-ratio:1; margin:0 auto; transform:rotate(-5deg) }
.carimbo__anel{ width:100%; height:100% }
.carimbo__anel circle{ fill:none; stroke:var(--ouro-txt); stroke-width:3.4; opacity:.85 }
.carimbo__anel .fino{ stroke-width:1.2 }
.carimbo__anel text{
  font-family:var(--ff-orn); font-weight:600; font-size:13.4px; letter-spacing:.2em;
  fill:var(--ouro-txt); opacity:.9; text-anchor:middle;
}
.carimbo__val{ position:absolute; inset:0; display:grid; place-content:center; align-content:center; text-align:center }
.carimbo__val b{
  display:block; font-family:var(--ff-tit); font-weight:700; font-size:50px; line-height:.9;
  color:var(--verde); font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.carimbo__val i{
  display:block; font-style:normal; font-family:var(--ff-orn); font-weight:600;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ouro-txt); margin-top:5px;
}
.resultado__barris{ margin-top:16px; font-size:15.5px; font-weight:700 }
.resultado__mais{ margin-top:6px; display:grid; gap:2px; font-size:13.5px; color:var(--tinta-55) }
.resultado__mais b{ color:var(--tinta) }

/* ---------- 15. O KIT ---------- */
.kit{ display:grid; gap:0 }
.kit__i{
  display:grid; grid-template-columns:52px 1fr; column-gap:16px; align-items:start;
  padding:22px 0; border-bottom:1px solid rgba(227,193,115,.22);
}
.kit__i:first-child{ border-top:1px solid rgba(227,193,115,.22) }
.kit__i svg{ grid-column:1; grid-row:1; width:42px; height:42px; color:var(--ouro-cl) }
.kit__i h3{ grid-column:2; grid-row:1; font-family:var(--ff-tit); font-weight:600; font-size:19px; line-height:1.25; padding-top:6px }
.kit__i h3 span{ font-family:var(--ff-txt); font-weight:400; font-size:13px; color:var(--creme-60) }
.kit__i p{ grid-column:2; grid-row:2; margin-top:4px; color:var(--creme-80); font-size:14.5px }
@media (min-width:40em){
  .kit{ grid-template-columns:1fr 1fr; column-gap:44px }
  .kit__i:nth-child(2){ border-top:1px solid rgba(227,193,115,.22) }
}
@media (min-width:60em){
  .kit{ grid-template-columns:repeat(3,1fr); column-gap:48px }
  .kit__i:nth-child(3){ border-top:1px solid rgba(227,193,115,.22) }
  .kit__i{ padding:26px 0 }
}

/* ---------- 16. GALERIA ---------- */
.galeria{
  display:grid; grid-auto-flow:column; grid-auto-columns:73%;
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) 6px; scrollbar-width:none;
}
.galeria::-webkit-scrollbar{ display:none }
@media (min-width:60em){
  .galeria{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;
    overflow:visible; gap:26px; max-width:var(--larg); margin-inline:auto }
}
.foto{ scroll-snap-align:center; margin:0 }
.foto__q{
  display:block; position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--verde-esc); padding:10px;
  box-shadow:0 14px 30px -22px rgba(18,40,27,.9);
}
.foto__q::after{
  content:""; position:absolute; inset:4px; border:1px solid rgba(227,193,115,.66); pointer-events:none; z-index:2;
}
.foto img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.foto:hover img{ transform:scale(1.05) }
.foto.vazia img{ display:none }
.foto figcaption{
  margin-top:12px; text-align:center;
  font-family:var(--ff-orn); font-weight:600; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ouro-txt);
}
.arraste{
  margin-top:16px; padding-inline:var(--pad);
  font-family:var(--ff-orn); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-55);
  display:flex; align-items:center; gap:8px;
}
.arraste span{ color:var(--ouro-txt); animation:cutuca 1.8s var(--ease) infinite }
.arraste--claro{ color:var(--creme-60); position:relative; z-index:2 }
.arraste--claro span{ color:var(--ouro-cl) }
@keyframes cutuca{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(5px) } }
@media (min-width:60em){ .arraste{ display:none } }

/* ---------- 17. LIVRO DE VISITAS ---------- */
.visitas{
  display:grid; grid-auto-flow:column; grid-auto-columns:81%;
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) 6px; scrollbar-width:none; position:relative; z-index:2;
}
.visitas::-webkit-scrollbar{ display:none }
@media (min-width:60em){
  .visitas{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;
    overflow:visible; gap:24px; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad) }
}
.visita{
  position:relative; scroll-snap-align:center;
  background:var(--papel); color:var(--tinta); padding:40px 24px 24px;
  box-shadow:0 14px 30px -24px rgba(0,0,0,.9);
}
.visita::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(181,138,43,.4); pointer-events:none }
.visita__asp{
  position:absolute; left:22px; top:6px;
  font-family:var(--ff-tit); font-size:62px; line-height:1; color:var(--ouro); opacity:.55;
}
.visita p{ position:relative; font-size:16px; line-height:1.6 }
.visita footer{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(18,40,27,.18); display:grid; gap:2px }
.visita footer b{ font-family:var(--ff-tit); font-weight:600; font-size:15px }
.visita footer span{ font-size:12.5px; color:var(--tinta-55) }

/* ---------- 18. COMANDA (orçamento) ---------- */
.orc{ display:grid; gap:38px }
@media (min-width:60em){ .orc{ grid-template-columns:1fr 1.05fr; gap:64px; align-items:start } }
.orc__pontos{ margin-top:26px; display:grid; gap:10px }
.orc__pontos li{ position:relative; padding-left:26px; font-size:15px; color:var(--tinta-75) }
.orc__pontos li::before{
  content:""; position:absolute; left:2px; top:9px; width:11px; height:6px;
  border-left:2px solid var(--ouro); border-bottom:2px solid var(--ouro); transform:rotate(-45deg);
}
.orc__trigo{ display:none }
@media (min-width:60em){
  .orc__trigo{ display:flex; gap:8px; margin-top:38px; color:var(--ouro); opacity:.6 }
  .orc__trigo svg{ width:26px; height:64px }
  .orc__trigo .esp{ transform:scaleX(-1) }
}

.comanda{
  position:relative; background:var(--papel-2); padding:28px 22px 26px;
  box-shadow:inset 0 0 0 1px var(--papel-3), 0 18px 40px -30px rgba(18,40,27,.7);
}
.comanda__topo{
  position:absolute; left:0; right:0; top:-9px; height:10px;
  background:radial-gradient(circle at 7px 10px, transparent 7px, var(--papel-2) 7.5px) 0 0/14px 10px repeat-x;
}
.comanda__cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:14px; margin-bottom:20px; border-bottom:2px solid var(--tinta);
  font-family:var(--ff-orn); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.comanda__cab b{ color:var(--tinta-55); font-weight:600 }
@media (min-width:40em){ .comanda{ padding:34px 32px 32px } }

.dupla{ display:grid }
@media (min-width:40em){ .dupla{ grid-template-columns:1fr 1fr; gap:0 20px } }
.linha{ margin-bottom:18px; display:flex; flex-direction:column }
.linha label{
  font-family:var(--ff-orn); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-75); margin-bottom:7px;
}
.linha .opc-txt{ font-family:var(--ff-txt); letter-spacing:0; text-transform:none; color:var(--tinta-55) }
.linha input,.linha textarea{
  width:100%; min-height:48px; padding:11px 2px; border:0; border-bottom:1.5px solid rgba(18,40,27,.3);
  background:transparent; color:var(--tinta); font-size:16px; font-family:var(--ff-txt);
  transition:border-color .2s, background .2s;
}
.linha textarea{ min-height:84px; resize:vertical; line-height:1.5 }
.linha input::placeholder,.linha textarea::placeholder{ color:rgba(18,40,27,.4) }
.linha input:focus,.linha textarea:focus{ outline:0; border-bottom-color:var(--ouro); background:rgba(255,255,255,.4) }
.linha input[type=date]{ color-scheme:light }
.erro{ display:none; font-style:normal; font-size:12.5px; color:#9A2233; margin-top:6px }
.linha.ruim input,.linha.ruim textarea{ border-bottom-color:#9A2233 }
.linha.ruim .erro{ display:block }
.comanda__pe{ margin-top:14px; text-align:center; font-size:12.5px; color:var(--tinta-55) }

/* ---------- 19. DÚVIDAS ---------- */
.duvidas{ max-width:830px; position:relative; z-index:2; border-top:1px solid rgba(227,193,115,.28) }
.d{ border-bottom:1px solid rgba(227,193,115,.28) }
.d summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--ff-tit); font-weight:500; font-size:clamp(17px,4.3vw,20px); line-height:1.3;
  transition:color .2s;
}
.d summary::-webkit-details-marker{ display:none }
.d summary:hover{ color:var(--ouro-cl) }
.d summary i{ position:relative; flex:none; width:28px; height:28px; box-shadow:inset 0 0 0 1px rgba(227,193,115,.5); transition:background .25s, transform .3s var(--ease) }
.d summary i::before,.d summary i::after{ content:""; position:absolute; left:50%; top:50%; background:var(--ouro-cl); transform:translate(-50%,-50%); transition:opacity .2s }
.d summary i::before{ width:11px; height:1.6px }
.d summary i::after{ width:1.6px; height:11px }
.d[open] summary i{ background:rgba(227,193,115,.14); transform:rotate(180deg) }
.d[open] summary i::after{ opacity:0 }
.d__r{ padding:0 0 22px; max-width:64ch }
.d__r p{ color:var(--creme-80); font-size:15.5px }
.d__r b{ color:var(--papel) }
.d[open] .d__r{ animation:abre .35s var(--ease) }
@keyframes abre{ from{ opacity:0; transform:translateY(-5px) } }

/* ---------- 20. CHAMADA FINAL ---------- */
.final{
  position:relative; overflow:hidden; text-align:center;
  padding:78px 0 86px; color:var(--papel); background:var(--verde-esc);
}
.final__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.final__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,32,17,.9),rgba(4,32,17,.74) 45%,rgba(4,32,17,.93)),
    radial-gradient(70% 60% at 50% 42%, rgba(181,138,43,.28), transparent 70%);
}
.final::after{
  content:""; position:absolute; inset:14px; z-index:2; pointer-events:none;
  border:1px solid rgba(227,193,115,.5);
  outline:3px double rgba(227,193,115,.3); outline-offset:5px;
}
.final__in{ position:relative; z-index:3 }
.final__selo{ filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) }
.final__selo svg{ fill:var(--ouro-cl) }
.final .sobre{ color:var(--ouro-cl) }
.final__h{
  font-family:var(--ff-tit); font-weight:600; font-size:clamp(30px,8vw,54px);
  line-height:1.06; letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.final__h em{ font-style:italic; font-weight:400; color:var(--ouro-cl) }
.final__sub{
  margin:18px auto 30px; max-width:44ch; color:var(--creme-80); font-size:15.5px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
@media (min-width:60em){ .final{ padding:118px 0 126px } }

/* ---------- 21. RODAPÉ ---------- */
.rodape{ background:var(--verde-esc); color:var(--papel); padding-top:56px; position:relative }
.rodape::before{ content:""; position:absolute; inset:0; background:var(--cevada) 60px 0/128px auto repeat; opacity:.4; pointer-events:none }
.rodape__in{ position:relative; z-index:2; display:grid; gap:34px; padding-bottom:40px }
@media (min-width:60em){ .rodape__in{ grid-template-columns:1.6fr 1fr 1fr; gap:48px } }
.rodape__marca p{ margin-top:18px; color:var(--creme-60); font-size:14px; max-width:38ch }
.rodape h3{ font-family:var(--ff-orn); font-weight:600; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ouro-cl); margin-bottom:16px }
.rodape__nav{ display:flex; flex-direction:column; gap:10px; font-size:14.5px }
.rodape__nav a{ color:var(--creme-80); width:fit-content; transition:color .2s }
.rodape__nav a:hover{ color:var(--ouro-cl) }
.rodape__ct{ display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:var(--creme-60) }
.rodape__ct a{ display:inline-flex; align-items:center; gap:9px; color:var(--papel); width:fit-content; transition:color .2s }
.rodape__ct a:hover{ color:var(--ouro-cl) }
.rodape__ct .ico{ fill:var(--ouro-cl) }
.rodape__base{
  position:relative; z-index:2;
  border-top:1px solid rgba(227,193,115,.2);
  padding-block:20px calc(96px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--creme-60);
}
.rodape__legal{ color:rgba(244,237,221,.48); max-width:26ch }
@media (min-width:60em){
  .rodape__base{ flex-direction:row; justify-content:space-between; padding-bottom:28px }
  .rodape__legal{ max-width:none }
}

/* ---------- 22. BOTÃO FLUTUANTE ---------- */
.zap{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:80;
  width:58px; height:58px; border-radius:50%; display:grid; place-content:center;
  background:radial-gradient(circle at 34% 28%,#EED08C,var(--ouro) 72%);
  color:var(--verde-esc);
  box-shadow:inset 0 0 0 1.5px var(--verde-esc), 0 10px 22px -10px rgba(18,40,27,.9);
  opacity:0; transform:translateY(18px) scale(.85); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.zap svg{ width:30px; height:30px; fill:currentColor }
.zap.ligado{ opacity:1; transform:none; pointer-events:auto }
.zap::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(181,138,43,.6); animation:pulsa 2.8s infinite;
}
@keyframes pulsa{ 70%{ box-shadow:0 0 0 15px rgba(181,138,43,0) } 100%{ box-shadow:0 0 0 0 rgba(181,138,43,0) } }
@media (min-width:60em){ .zap{ right:26px; bottom:26px; width:62px; height:62px } }

/* ---------- 23. VERIFICAÇÃO DE IDADE ---------- */
.gate{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  padding:var(--pad); background:rgba(6,56,31,.94);
}
.gate__box{
  position:relative; width:100%; max-width:400px; text-align:center;
  padding:34px 26px 28px; background:var(--papel); color:var(--tinta);
  box-shadow:0 30px 70px -30px #000;
  animation:entraGate .45s var(--ease);
}
.gate__box::after{ content:""; position:absolute; inset:9px; border:1px solid rgba(181,138,43,.5); pointer-events:none }
@keyframes entraGate{ from{ opacity:0; transform:translateY(16px) scale(.97) } }
.gate__box h2{ font-family:var(--ff-tit); font-weight:600; font-size:29px; line-height:1.1; letter-spacing:-.015em }
.gate .orn{ margin:18px auto }
.gate__txt{ margin-top:6px; color:var(--tinta-75); font-size:14.5px }
.gate__btns{ margin-top:24px; display:grid; gap:10px }
.gate__box .btn--linha{ color:var(--tinta-55) }
.gate__legal{ margin-top:20px; font-size:11.5px; color:var(--tinta-55) }

/* ---------- 24. ENTRADA DOS BLOCOS ---------- */
/* So esconde para animar se o JavaScript estiver rodando.
   Sem JS, o conteudo aparece normalmente. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.js .reveal.dentro{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none } }

/* ---------- 25. ÂNCORAS ---------- */
section[id],div[id]{ scroll-margin-top:76px }

/* =====================================================================
   26. REFINAMENTOS
   ===================================================================== */

/* barra de leitura no topo */
.progresso{ position:fixed; inset:0 0 auto 0; height:3px; z-index:95; pointer-events:none }
.progresso i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--ouro),var(--ouro-cl));
  box-shadow:0 0 10px rgba(227,193,115,.65);
}

/* fio ornamental separando as faixas verdes das cremes */
.sec--verde::after,.ficha-band::after{
  content:""; position:absolute; left:0; right:0; top:0; height:10px; z-index:3;
  pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--ouro-cl),var(--ouro-cl)) 0 0/100% 1px no-repeat,
    radial-gradient(circle at 7px 4.5px, var(--ouro-cl) 1.7px, transparent 2.2px) 0 3px/14px 10px repeat-x;
}

/* o fio ornamental do cabeçalho de seção se desenha ao entrar */
.js .cab .orn{ transform:scaleX(.18); opacity:0; transform-origin:center;
  transition:transform .95s .12s var(--ease), opacity .5s .12s var(--ease) }
.js .cab.dentro .orn{ transform:none; opacity:1 }

/* ícones do kit dentro de medalhão */
.kit__i{ grid-template-columns:58px 1fr }
.kit__i svg{
  width:48px; height:48px; padding:9px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(227,193,115,.3);
  transition:box-shadow .3s var(--ease), background .3s var(--ease), transform .4s var(--ease);
}
.kit__i:hover svg{ box-shadow:inset 0 0 0 1px var(--ouro-cl); background:rgba(227,193,115,.09); transform:translateY(-2px) }

/* galeria: brilho dourado e legenda que sobe no hover */
.foto__q::before{
  content:""; position:absolute; inset:10px; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,40,22,.55));
  transition:opacity .45s var(--ease);
}
.foto:hover .foto__q::before{ opacity:1 }
.foto figcaption{ transition:color .3s var(--ease), letter-spacing .4s var(--ease) }
.foto:hover figcaption{ color:var(--tinta); letter-spacing:.28em }

/* livro de visitas: marca d'água e acabamento */
.visita{ overflow:hidden }
.visita::before{
  content:""; position:absolute; right:-30px; bottom:-30px; width:130px; height:130px;
  background:url("../img/logo.png") center/contain no-repeat;
  opacity:.06; pointer-events:none;
}
.visita p{ position:relative; z-index:2 }
.visita footer{ position:relative; z-index:2 }

/* abertura: o disco respira devagar */
@media (prefers-reduced-motion:no-preference){
  .disco{ animation:flutua 7.5s ease-in-out infinite }
  @keyframes flutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
}
.hero__arte{ will-change:transform }

/* dúvidas: linha dourada que corre ao abrir */
.d{ position:relative }
.d::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--ouro-cl); transition:width .5s var(--ease);
}
.d[open]::after{ width:100% }

/* cabeçalho: some ao descer, volta ao subir */
.hdr{ transform:translateY(0); transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease) }
.hdr.escondido{ transform:translateY(-100%) }

/* cartões do cardápio ganham leve destaque ao passar o mouse */
.item{ transition:background .4s var(--ease) }
.item:hover{ background:linear-gradient(90deg,rgba(181,138,43,.07),transparent 70%) }

/* foco visível mais elegante */
:focus-visible{ outline:2px solid var(--ouro); outline-offset:4px }

/* =====================================================================
   27. GROWLERS (a prateleira)
   ===================================================================== */

:root{
  --rubi: #9E1B2A;   /* vermelho do rótulo IPA */
  --uva:  #5A2C7B;   /* roxo do rótulo Vinho */
}

/* faixa própria: papel um tom mais escuro, como uma tabuleta de preços */
.sec--tabuleta{ background:var(--papel-2) }
.sec--tabuleta::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; mix-blend-mode:multiply;
  background-image:var(--grao);
}
.sec--tabuleta::after{
  content:""; position:absolute; left:0; right:0; top:0; height:10px; z-index:3;
  pointer-events:none; opacity:.42;
  background:
    linear-gradient(var(--ouro),var(--ouro)) 0 0/100% 1px no-repeat,
    radial-gradient(circle at 7px 4.5px, var(--ouro) 1.7px, transparent 2.2px) 0 3px/14px 10px repeat-x;
}
.sec--tabuleta .wrap{ position:relative; z-index:2 }
.sec--tabuleta .retrato{
  box-shadow:
    0 0 0 1px var(--ouro), 0 0 0 4px var(--papel-2), 0 0 0 5px rgba(181,138,43,.45),
    0 12px 24px -14px rgba(18,40,27,.85);
}

/* ---- cabeçalho da seção, com a foto do balde ao lado ---- */
.prat__cab{ display:grid; gap:34px }
.cab--esq{ margin-bottom:0 }
@media (min-width:60em){
  .prat__cab{ grid-template-columns:1.12fr .88fr; gap:64px; align-items:center; margin-bottom:64px }
}

.prat__pontos{ margin-top:26px; display:grid; gap:12px }
.prat__pontos li{ display:grid; grid-template-columns:26px 1fr; align-items:start; gap:12px; font-size:15px; color:var(--tinta-75) }
.prat__pontos svg{ width:22px; height:22px; color:var(--ouro-txt); margin-top:1px }
.prat__pontos b{ font-weight:600; color:var(--tinta) }

.prat__foto{ margin:0 }
.prat__moldura{
  display:block; position:relative; overflow:hidden;
  box-shadow:0 0 0 1px var(--ouro), 0 0 0 7px var(--papel-2), 0 0 0 8px rgba(181,138,43,.4),
             0 26px 50px -32px rgba(18,40,27,.9);
}
.prat__moldura img{ display:block; width:100%; height:auto; aspect-ratio:820/980; object-fit:cover }
.prat__moldura::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,244,214,.16),transparent 42%);
}
.prat__foto figcaption{
  margin-top:14px; text-align:center;
  font-family:var(--ff-orn); font-weight:600; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-55);
}
@media (min-width:60em){ .prat__moldura{ transform:rotate(-1.4deg) } }

/* ---- a lista de sabores + a sacola ---- */
.prat{ display:grid; gap:40px; margin-top:40px }
@media (min-width:60em){
  .prat{ grid-template-columns:1fr 330px; gap:56px; align-items:start; margin-top:0 }
}
@media (min-width:82em){ .prat{ grid-template-columns:1fr 360px; gap:70px } }

.prat__lista{ border-top:2px solid var(--tinta) }

.growler{
  position:relative;
  display:grid; grid-template-columns:66px 1fr; gap:6px 16px;
  padding:22px 0; border-bottom:1px solid rgba(18,40,27,.2);
  transition:background .4s var(--ease);
}
.growler:hover{ background:linear-gradient(90deg,rgba(181,138,43,.08),transparent 72%) }
.growler__n{
  position:absolute; right:0; top:16px;
  font-family:var(--ff-orn); font-weight:700; font-size:38px; line-height:1;
  color:var(--ouro); opacity:.2; pointer-events:none;
}
.growler__foto{ grid-column:1; grid-row:1 / span 2; width:66px }
.growler__txt{ grid-column:2; grid-row:1 }
.growler__lado{ grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:12px }

.growler__nome{
  font-family:var(--ff-tit); font-weight:600;
  font-size:clamp(19px,4.8vw,23px); line-height:1.16; letter-spacing:-.01em;
  padding-right:44px;
}
/* fio na cor do rótulo, logo abaixo do nome */
.growler__nome::after{
  content:""; display:block; width:44px; height:3px; margin-top:8px;
  background:var(--fio,var(--ouro));
}
.growler--verde{ --fio:var(--verde) }
.growler--ouro { --fio:var(--ouro) }
.growler--rubi { --fio:var(--rubi) }
.growler--uva  { --fio:var(--uva) }

.growler__nota{ margin-top:9px; font-size:14.5px; line-height:1.5; color:var(--tinta-75); max-width:46ch }
.growler__pack{
  margin-top:10px; display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--tinta-55);
}
.growler__pack svg{ width:17px; height:17px; color:var(--ouro-txt); flex:none }
.growler__pack span{ min-width:0 }
.growler__pack b{ color:var(--tinta); font-weight:700 }

.growler__preco{ display:flex; align-items:baseline; gap:7px }
.growler__preco b{
  font-family:var(--ff-tit); font-weight:700; font-size:24px; line-height:1;
  color:var(--verde); font-variant-numeric:tabular-nums;
}
.growler__preco i{ font-style:normal; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-55) }

/* contador de garrafas */
.passador{
  display:inline-flex; align-items:center;
  background:var(--papel); box-shadow:inset 0 0 0 1px rgba(181,138,43,.55);
}
.passador__b{
  width:42px; height:42px; display:grid; place-content:center;
  border:0; background:transparent; cursor:pointer;
  font-family:var(--ff-txt); font-size:21px; line-height:1; color:var(--verde);
  transition:background .22s, color .22s;
  -webkit-user-select:none; user-select:none;
}
.passador__b:hover{ background:rgba(181,138,43,.16) }
.passador__b:disabled{ color:rgba(18,40,27,.24); cursor:default; background:transparent }
.passador__v{
  min-width:44px; text-align:center;
  font-family:var(--ff-tit); font-weight:700; font-size:19px;
  color:var(--tinta); font-variant-numeric:tabular-nums;
  border-inline:1px solid rgba(181,138,43,.35);
  align-self:stretch; display:grid; place-content:center;
}
.growler.cheio .passador__v{ color:var(--verde) }

.growler__seis{
  border:0; background:transparent; cursor:pointer; padding:12px 0 11px;
  font-family:var(--ff-orn); font-weight:600; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ouro-txt);
  border-bottom:1px solid rgba(181,138,43,.5); transition:color .22s, border-color .22s;
}
.growler__seis:hover{ color:var(--tinta); border-color:var(--tinta) }

@media (min-width:40em){
  .growler{ grid-template-columns:96px 1fr; gap:8px 24px; padding:26px 0 }
  .growler__foto{ width:96px }
  .growler__n{ font-size:46px }
}
@media (min-width:60em){
  .growler{ grid-template-columns:104px 1fr auto; align-items:center; padding:24px 0 }
  .growler__foto{ width:104px; grid-column:1; grid-row:1 }
  .growler__txt{ grid-column:2; grid-row:1 }
  .growler__lado{ grid-column:3; grid-row:1; margin-top:0; flex-direction:column; align-items:flex-end; gap:12px; padding-left:24px }
  .growler__n{ display:none }
  .growler__nome{ padding-right:0 }
  .growler__preco{ justify-content:flex-end }
}

/* ---- a sacola (resumo do pedido) ---- */
.sacola{
  position:relative; background:var(--papel); padding:26px 22px 24px;
  box-shadow:inset 0 0 0 1px var(--papel-3), 0 18px 40px -30px rgba(18,40,27,.7);
}
.sacola__topo{
  position:absolute; left:0; right:0; top:-9px; height:10px;
  background:radial-gradient(circle at 7px 10px, transparent 7px, var(--papel) 7.5px) 0 0/14px 10px repeat-x;
}
.sacola__cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:13px; margin-bottom:16px; border-bottom:2px solid var(--tinta);
  font-family:var(--ff-orn); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.sacola__cab b{ color:var(--tinta-55); font-weight:600 }

.sacola__vazia{
  display:grid; justify-items:center; gap:12px; text-align:center;
  padding:18px 6px 22px; font-size:13.5px; line-height:1.55; color:var(--tinta-55);
}
.sacola__vazia svg{ width:40px; height:40px; color:var(--ouro); opacity:.55 }

.sacola__lista{ display:grid; gap:0 }
.sacola__lista li{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 12px;
  padding:11px 0; border-bottom:1px dotted rgba(18,40,27,.3);
  font-size:14.5px; animation:entraItem .3s var(--ease);
}
@keyframes entraItem{ from{ opacity:0; transform:translateY(-5px) } }
.sacola__lista b{ font-weight:700; font-variant-numeric:tabular-nums }
.sacola__lista span{ color:var(--tinta-75) }
.sacola__lista i{ display:block; font-style:normal; font-size:11.5px; color:var(--tinta-55); margin-top:2px }

.sacola__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:16px; padding-top:14px; border-top:2px solid var(--tinta);
  font-family:var(--ff-orn); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.sacola__total b{
  font-family:var(--ff-tit); font-weight:700; font-size:29px; letter-spacing:0;
  color:var(--verde); text-transform:none; font-variant-numeric:tabular-nums;
}
.sacola__total b i{ font-style:normal; font-size:15px; color:var(--tinta-55) }
.sacola__obs{ margin-top:8px; font-size:12.5px; color:var(--tinta-55) }
.sacola__campo{ margin:18px 0 16px }
.sacola__pe{ margin-top:13px; text-align:center; font-size:12px; line-height:1.5; color:var(--tinta-55) }
.sacola .btn[disabled]{ opacity:.42; cursor:default; pointer-events:none }

@media (min-width:60em){
  .sacola{ position:sticky; top:96px; padding:30px 26px 26px }
}

/* ponte para a calculadora, no fim da seção */
.prat__ponte{
  margin-top:42px; padding-top:26px; border-top:1px solid rgba(18,40,27,.18);
  text-align:center; font-size:15px; color:var(--tinta-75);
}
.prat__ponte a{
  display:inline-block; margin-left:6px;
  font-family:var(--ff-orn); font-weight:600; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ouro-txt);
  border-bottom:1px solid var(--ouro); padding-bottom:2px; transition:color .22s, border-color .22s;
}
.prat__ponte a:hover{ color:var(--tinta); border-color:var(--tinta) }

/* links dentro do texto corrido (dúvidas e comanda) */
.d__r a{
  color:var(--ouro-cl); border-bottom:1px solid rgba(227,193,115,.5);
  transition:color .22s, border-color .22s;
}
.d__r a:hover{ color:var(--papel); border-color:var(--papel) }
.orc__pontos a{
  color:var(--ouro-txt); border-bottom:1px solid rgba(181,138,43,.55);
  transition:color .22s, border-color .22s;
}
.orc__pontos a:hover{ color:var(--tinta); border-color:var(--tinta) }


/* =====================================================================
   28. A HISTÓRIA, O CARRINHO E A OPÇÃO DA COMANDA
   ===================================================================== */

/* ---- frase da missão, na abertura do "O Chopp" ---- */
.missao{
  margin-top:32px; max-width:56ch;
  display:grid; grid-template-columns:44px 1fr; gap:0 18px; align-items:center;
  padding:20px 22px; border-left:2px solid var(--ouro);
  background:linear-gradient(90deg,rgba(181,138,43,.12),rgba(181,138,43,0) 80%);
}
.missao__selo{ grid-column:1; color:var(--ouro); line-height:0 }
.missao__selo svg{ width:40px; height:40px }
.missao > span{
  grid-column:2;
  font-family:var(--ff-tit); font-weight:500; font-style:italic;
  font-size:clamp(16.5px,3.9vw,19px); line-height:1.44; color:var(--tinta);
}

/* ---- etiqueta que abre a lista dos chopps ---- */
.carta__tit{
  display:flex; align-items:center; gap:16px; margin:0 0 16px;
  font-family:var(--ff-orn); font-weight:600; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ouro-txt);
}
.carta__tit::after{ content:""; flex:1; height:1px; background:rgba(181,138,43,.42) }

/* ---- seção do carrinho de chopp ---- */
.carroca{ display:grid; gap:38px }
@media (min-width:60em){
  .carroca{ grid-template-columns:1.06fr .94fr; gap:64px; align-items:center }
  .carroca__txt{ grid-column:1; grid-row:1 }
  .carroca__lado{ grid-column:2; grid-row:1 }
}
.carroca .cab{ margin-bottom:0 }

.carroca__pontos{ margin-top:28px; display:grid; gap:13px; max-width:46ch }
.carroca__pontos li{
  display:grid; grid-template-columns:28px 1fr; align-items:start; gap:14px;
  font-size:15px; color:var(--creme-80);
}
.carroca__pontos svg{ width:24px; height:24px; color:var(--ouro-cl); margin-top:1px }

.carroca__pe{
  margin-top:32px; padding-top:24px; border-top:1px solid rgba(227,193,115,.28);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}
.carroca__preco{ display:grid; gap:4px }
.carroca__preco i{
  font-style:normal; font-family:var(--ff-orn); font-weight:600;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-cl);
}
.carroca__preco b{
  font-family:var(--ff-tit); font-weight:600; line-height:1.1;
  font-size:clamp(21px,5vw,26px); color:var(--papel);
}
@media (min-width:60em){ .carroca__lado .chapa{ transform:rotate(1.2deg) } }

/* ---- opção do carrinho dentro da comanda ---- */
.extra{
  margin:2px 0 20px; padding:15px 16px;
  background:rgba(255,255,255,.42); box-shadow:inset 0 0 0 1px var(--papel-3);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.opcao{
  position:relative; display:grid; grid-template-columns:24px 1fr;
  gap:0 13px; align-items:start; cursor:pointer;
}
.opcao input{
  position:absolute; left:0; top:0; width:24px; height:24px;
  margin:0; opacity:0; cursor:pointer;
}
.opcao__cx{
  grid-column:1; width:24px; height:24px; margin-top:1px;
  display:grid; place-content:center;
  background:var(--papel); border:1.5px solid rgba(18,40,27,.4);
  transition:background .2s, border-color .2s;
}
.opcao__cx::after{
  content:""; width:12px; height:7px; opacity:0;
  border-left:2.2px solid var(--papel); border-bottom:2.2px solid var(--papel);
  transform:translateY(-2px) rotate(-45deg) scale(.5);
  transition:opacity .18s, transform .18s var(--ease);
}
.opcao input:checked + .opcao__cx{ background:var(--verde); border-color:var(--verde) }
.opcao input:checked + .opcao__cx::after{ opacity:1; transform:translateY(-2px) rotate(-45deg) scale(1) }
.opcao input:focus-visible + .opcao__cx{ outline:2px solid var(--ouro); outline-offset:2px }
.opcao__txt{ grid-column:2; font-size:15px; line-height:1.45; color:var(--tinta-75) }
.opcao__txt b{ font-weight:600; color:var(--tinta) }
.opcao__txt i{ font-style:normal; font-size:13.5px; color:var(--tinta-55) }

/* piscada de confirmação quando a pessoa vem pelo botão da seção do carrinho */
.extra--piscou{ background:rgba(227,193,115,.32); box-shadow:inset 0 0 0 1.5px var(--ouro) }

/* rodape do depoimento sempre encostado na base, mesmo com textos de tamanhos
   diferentes: assim os nomes ficam alinhados entre os tres cartoes */
.visita{ display:flex; flex-direction:column }
.visita p{ margin-bottom:18px }          /* garante o respiro minimo */
.visita footer{ margin-top:auto }        /* o resto do espaco vai pra cima do rodape */