/* Blog da Nuestra Fiesta: tokens e componentes da /blog/ e da /politica-de-privacidade/ (25/10/2026)
   + o que só o blog usa (capa, fotos, FAQ, lista, filtros, paginação). Gerado pelo agente. */

/* ── Fontes (hospedadas na pasta da página de mesas e cadeiras) ── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/mesas-e-cadeiras/fonts/bricolage-grotesque-v9-latin-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/mesas-e-cadeiras/fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/mesas-e-cadeiras/fonts/instrument-sans-v4-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/mesas-e-cadeiras/fonts/instrument-sans-v4-latin-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/mesas-e-cadeiras/fonts/instrument-sans-v4-latin-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/mesas-e-cadeiras/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/mesas-e-cadeiras/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2')}

/* ── Tokens ── */
:root{
  --bg:#0E141A; --bg-alt:#151E27; --panel:#1A242E; --panel-2:#0A0F14;
  --accent:#C9A44C; --accent-hi:#DFBC69; --on-accent:#0E141A;
  --white:#FFFFFF; --muted:#93A0AD; --steel:#8A98A5;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --wrap:1180px; --gut:clamp(20px, 5vw, 56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0; background:var(--bg); color:var(--muted); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 18px}
.eyebrow a{text-decoration:none}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.02; margin:0; letter-spacing:-.02em; color:var(--white)}
h1{font-size:clamp(2.6rem, 7.5vw, 5.2rem)}
h2{font-size:clamp(2rem, 5vw, 3.3rem)}
h3{font-size:1.15rem; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,2.1vw,1.28rem); line-height:1.55; max-width:60ch; color:var(--muted)}
.section{padding:clamp(72px,10vw,132px) 0}
.on-base{background:var(--bg)}
.on-alt{background:var(--bg-alt)}

/* ── Botões ── */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:600; font-size:.97rem; padding:15px 26px; border-radius:2px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-ghost{border-color:var(--line-2); color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.06); border-color:var(--white)}

/* ── Menu ── */
.nav{position:sticky; top:0; z-index:60; background:rgba(14,20,26,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:70px}
.brand{font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:.01em; text-decoration:none; color:var(--white)}
.brand span{color:var(--accent)}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.nav-links a{font-size:.9rem; text-decoration:none; color:var(--muted); transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--white)}
.nav-cta{font-size:.88rem; padding:11px 20px}
@media(max-width:860px){ .nav-links{display:none} }

/* ── Rodapé ── */
.foot-cta{border-top:2px solid var(--accent); background:var(--bg-alt); padding:clamp(30px,4vw,44px) 0}
.foot-cta-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px}
.foot-cta h3{font-family:var(--display); font-size:clamp(1.3rem,3vw,1.9rem); font-weight:800; letter-spacing:-.02em; margin:0}
.foot-cta p{margin:6px 0 0; font-size:.95rem; color:var(--muted)}
.foot{background:var(--bg); padding:clamp(48px,6vw,72px) 0 0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:clamp(28px,4vw,52px); padding-bottom:clamp(36px,5vw,52px)}
@media(max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .foot-grid{grid-template-columns:1fr; gap:34px} }
.foot-brand .brand{font-size:1.15rem}
.foot-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:10px 0 14px}
.foot-desc{font-size:.92rem; color:var(--muted); max-width:34ch; margin:0 0 22px}
.foot-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.badge{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; border:1px solid var(--line-2); color:var(--white); padding:7px 11px; border-radius:2px; white-space:nowrap}
.badge b{color:var(--accent); font-weight:500}
.socials{display:flex; gap:9px}
.socials a{width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:2px; color:var(--muted); transition:all .2s ease}
.socials a:hover{border-color:var(--accent); color:var(--accent)}
.socials svg{width:16px; height:16px}
.foot-col .fh{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin:0 0 16px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:10px}
.foot-col a{font-size:.92rem; text-decoration:none; color:var(--muted); transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-contact address{font-style:normal; font-size:.92rem; color:var(--muted); line-height:1.75; margin:0 0 16px}
.foot-contact a{display:block; font-family:var(--mono); font-size:12.5px; color:var(--white); text-decoration:none; padding:3px 0}
.foot-contact a:hover{color:var(--accent)}
.foot-hours{font-family:var(--mono); font-size:11px; color:var(--steel); line-height:1.9; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.foot-cities{border-top:1px solid var(--line); padding:26px 0}
.foot-cities .fh{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin:0 0 12px}
.foot-cities p{font-size:.88rem; color:var(--muted); margin:0; line-height:1.9}
.foot-cities span{color:var(--steel)}
.foot-bar{border-top:1px solid var(--line); padding:22px 0 30px; display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center}
.foot-legal{font-family:var(--mono); font-size:10.5px; color:var(--steel); line-height:1.9; margin:0}
.foot-mini{display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0}
.foot-mini a{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--steel); text-decoration:none}
.foot-mini a:hover{color:var(--accent)}

/* ── Botão flutuante do WhatsApp ── */
.fab{position:fixed; right:18px; bottom:18px; z-index:70; display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:600; font-size:.92rem; padding:14px 20px; border-radius:100px; box-shadow:0 8px 28px rgba(0,0,0,.45)}
.fab:hover{background:var(--accent-hi)}
.fab svg{width:19px; height:19px; flex:0 0 auto}
@media(max-width:520px){ .fab span{display:none} .fab{padding:16px; border-radius:50%} }

/* ── Cabeçalho das páginas e cards (da /blog/) ── */
.ph{background:var(--bg); border-bottom:1px solid var(--line); padding:clamp(64px,9vw,112px) 0 clamp(40px,6vw,64px)}
.ph h1{font-size:clamp(2.4rem,6.5vw,4.4rem); max-width:18ch}
.ph h1 em{font-style:normal; color:var(--accent)}
.ph .lede{margin-top:22px}
.ph-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.h2s{font-size:clamp(1.6rem,3.6vw,2.4rem); margin:0 0 28px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{display:flex; flex-direction:column; gap:10px; text-decoration:none; border:1px solid var(--line); border-top:2px solid var(--accent); background:var(--panel); padding:26px 24px; transition:border-color .2s, background .2s}
.card:hover{background:#1F2B36; border-color:var(--line-2)}
.card .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0}
.card h3{font-size:1.25rem; line-height:1.2}
.card p{margin:0; font-size:.95rem}
.card .go{margin-top:auto; padding-top:8px; color:var(--accent); font-weight:600; font-size:.92rem}

/* ── Layout do artigo (da política) ── */
.pol{display:grid; grid-template-columns:250px 1fr; gap:clamp(28px,5vw,64px); align-items:start}
@media(max-width:900px){ .pol{grid-template-columns:1fr} }
.toc{position:sticky; top:96px; border:1px solid var(--line); background:var(--panel); padding:22px 22px 14px}
@media(max-width:900px){ .toc{position:static} }
.toc .fh{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin:0 0 14px}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t}
.toc li{counter-increment:t; margin-bottom:10px; display:flex; gap:10px}
.toc li::before{content:counter(t, decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--steel); padding-top:3px}
.toc a{font-size:.92rem; text-decoration:none; color:var(--muted); transition:color .2s}
.toc a:hover{color:var(--accent)}
.art{max-width:72ch}
.art h2{font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.1; margin:clamp(40px,5vw,56px) 0 18px; scroll-margin-top:96px}
.art h3{margin:22px 0 10px; scroll-margin-top:96px}
.art p, .art li{color:var(--muted)}
.art strong{color:var(--white); font-weight:600}
.art ul,.art ol{margin:0 0 1em; padding:0; list-style:none}
.art li{position:relative; padding-left:22px; margin-bottom:9px}
.art ul>li::before{content:""; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--accent)}
.art ol{counter-reset:n}
.art ol>li{counter-increment:n}
.art ol>li::before{content:counter(n) "."; position:absolute; left:0; font-family:var(--mono); font-size:12px; color:var(--accent); top:.25em}
.art a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(201,164,76,.35)}
.art a:hover{color:var(--accent-hi); border-color:var(--accent-hi)}
.note{border:1px solid var(--line-2); border-left:2px solid var(--accent); background:var(--panel); padding:18px 20px; margin:18px 0; color:var(--white)}
.note p{margin:0; color:var(--white)}
.note .k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}

/* ── Só do blog ── */
.capa{margin:0; background:var(--bg); padding:0 0 clamp(32px,5vw,56px)}
.capa img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--line)}
.foto{margin:26px 0}
.foto img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line)}
.foto figcaption{font-family:var(--mono); font-size:11px; color:var(--steel); margin-top:8px}
.art a.card{color:inherit; border:1px solid var(--line); border-top:2px solid var(--accent); margin:26px 0}
.art a.card:hover{border-color:var(--line-2); border-top-color:var(--accent)}
.art .card h3{margin:0}
.art .card p{color:var(--muted)}
.art table{width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:.95rem}
.art th,.art td{border-bottom:1px solid var(--line); padding:10px 12px; text-align:left}
.art th{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--steel)}
.art td{color:var(--muted)}
.depo{border:1px solid var(--line); border-left:2px solid var(--accent); background:var(--panel); padding:20px 22px; margin:26px 0}
.depo p{color:var(--white); margin:0 0 10px}
.depo .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.faq details{border-bottom:1px solid var(--line); padding:16px 0}
.faq summary{cursor:pointer; color:var(--white); font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; font-family:var(--mono); color:var(--accent); margin-right:12px}
.faq details[open] summary::before{content:"−"}
.faq details p{margin:12px 0 0 26px}
.leia{margin-top:clamp(40px,5vw,56px)}
.leia .cards{margin-top:18px}
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(28px,4vw,40px)}
.filtros a{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--muted); border:1px solid var(--line-2); padding:8px 12px; border-radius:2px}
.filtros a:hover,.filtros a[aria-current]{color:var(--on-accent); background:var(--accent); border-color:var(--accent)}
.destaque{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(22px,4vw,44px); align-items:center; text-decoration:none; border:1px solid var(--line); border-top:2px solid var(--accent); background:var(--panel); margin:0 0 clamp(28px,4vw,40px)}
@media(max-width:860px){ .destaque{grid-template-columns:1fr} }
.destaque img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}
.destaque .txt{padding:clamp(22px,3vw,34px)}
.destaque h2{font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.08; margin:10px 0 14px}
.destaque .k,.post .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0}
.post{padding:0; overflow:hidden}
.post img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.cards-posts{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post .txt{display:flex; flex-direction:column; gap:10px; padding:20px 22px 24px; flex:1}
.data{font-family:var(--mono); font-size:11px; color:var(--steel)}
.paginacao{display:flex; justify-content:space-between; gap:12px; margin-top:clamp(32px,4vw,48px)}
.paginacao .vazio{visibility:hidden}