/* ==========================================================================
   mafeviolatti.com.br
   Marfim · tinta · areia. Sem cor de destaque — o contraste vem da
   tipografia e do espaço. Newsreader + Instrument Sans. Mobile-first.
   ========================================================================== */

:root{
  --ivory:#F5F1EA;
  --paper:#FBF8F2;
  --ink:#0E0E0E;
  --ink-2:#4A463F;
  --taupe:#6B6152;
  --sand:#C7BEAE;
  --sand-2:#DBD3C4;
  --line:#DCD5C7;
  --line-2:#EAE4D9;
  --serif:"Newsreader",'Iowan Old Style',Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --pad:clamp(20px,5.5vw,104px);
  --sec:clamp(64px,9vw,144px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--ink);color:var(--ivory)}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec--sm{padding-top:clamp(44px,6vw,88px);padding-bottom:clamp(44px,6vw,88px)}
.paper{background:var(--paper)}
.dark{background:var(--ink);color:#E4E1D8}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:#B0A692}
.dark .lede{color:#CFCABF}
.sandbg{background:var(--sand);color:var(--ink)}
.sandbg .eyebrow{color:#5B5346}
.sandbg .lede{color:#3E3931}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0 0 .5em;letter-spacing:-.018em;color:var(--ink)}
h1{font-size:clamp(37px,8.2vw,86px);line-height:1.05;letter-spacing:-.028em}
h2{font-size:clamp(28px,5vw,54px);line-height:1.1}
h3{font-size:clamp(19px,2.3vw,26px);line-height:1.24;font-weight:400}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
p{margin:0 0 1.1em}
.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);margin:0 0 16px}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.58;color:var(--ink-2);max-width:62ch}
.small{font-size:13px;line-height:1.55;color:var(--taupe)}
.rule{height:1px;background:var(--line);border:0;margin:clamp(32px,4vw,56px) 0}
.narrow{max-width:720px}
blockquote{margin:26px 0;padding-left:22px;border-left:1px solid var(--ink);
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(21px,2.7vw,32px);line-height:1.3}

/* ---------- cabeçalho ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(245,241,234,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px}
.mark{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.mark i{display:block;font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.18em;
  color:var(--taupe);margin-top:3px}
.mnav{display:none;align-items:center;gap:clamp(14px,1.8vw,28px)}
.mnav a{font-size:13px;font-weight:500;position:relative;padding:6px 0;white-space:nowrap}
.mnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .25s ease}
.mnav a:hover::after,.mnav a[aria-current]::after{right:0}
.hdr-cta{background:var(--ink);color:var(--ivory)!important;padding:12px 18px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.hdr-cta:hover{background:var(--taupe)}
.hdr-cta::after{display:none!important}
.burg{background:none;border:1px solid var(--line);padding:10px 12px;line-height:0}
.burg span{display:block;width:19px;height:1px;background:var(--ink);margin:5px 0}
.mob{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mob.on{display:block}
.mob a{display:block;padding:15px var(--pad);border-bottom:1px solid var(--line-2);font-size:16px}
.mob a:last-child{border:0;font-weight:600}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 20px;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid transparent;transition:background .2s,color .2s;
  width:100%;text-align:center}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:var(--taupe)}
.btn-light{background:var(--ivory);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-sand{background:var(--sand);color:var(--ink)}
.btn-sand:hover{background:var(--sand-2)}
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--ivory)}
.btn-out-l{border-color:rgba(255,255,255,.55);color:#fff}
.btn-out-l:hover{background:#fff;color:var(--ink)}
.acts{display:grid;gap:12px;margin:28px 0 0;grid-template-columns:1fr}
.tlink{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;padding:10px 0 8px;border-bottom:1px solid currentColor}
.tlink span{font-size:15px;line-height:1}

/* ---------- hero ---------- */
.hero{padding-top:clamp(42px,6vw,88px);padding-bottom:0}
.hero h1{margin-bottom:22px}
.creds{display:flex;flex-wrap:wrap;gap:6px 0;margin:32px 0 0;padding-top:26px;
  border-top:1px solid var(--line);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe)}
.creds span:not(:last-child)::after{content:"·";margin:0 12px;color:var(--sand)}
.hero-fig{margin:36px 0 0;background:var(--ink);position:relative}
.hero-fig .ph{margin:22px 22px 0 0}
.hero-fig img{width:100%;display:block}
.figbox{margin:0}
.figbox img{width:100%;display:block}
.figbox figcaption{margin-top:12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe)}
.hero-fig figcaption{display:flex;justify-content:space-between;gap:14px;
  padding:18px 22px 22px;color:#B0A692;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- placeholder ---------- */
.ph{border:1px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.05);
  padding:22px 16px;text-align:center;color:#CFC8BB;display:flex;flex-direction:column;
  justify-content:center;min-height:260px}
.ph b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:8px;font-weight:600}
.ph span{font-size:13px;line-height:1.5}
.ph--l{border-color:var(--line);background:var(--line-2);color:var(--ink-2)}
.ph--l b{color:var(--ink)}
.ph--43{aspect-ratio:4/3;min-height:0}
.ph--11{aspect-ratio:1/1;min-height:0}
.ph--169{aspect-ratio:16/9;min-height:0}
.ph--45{aspect-ratio:4/5;min-height:0}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,34px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
.split{display:grid;gap:clamp(26px,4vw,56px)}

/* ---------- autoridade ---------- */
.authority{display:grid;gap:20px}
.authority article{padding-left:16px;border-left:1px solid var(--ink)}
.authority strong{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.4vw,42px);line-height:1}
.authority span{display:block;margin-top:8px;font-size:10.5px;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.dark .authority article{border-color:var(--sand)}
.dark .authority strong{color:#fff}
.dark .authority span{color:#B0A692}

/* ---------- logos ---------- */
.outlets{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 24px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.outlets span{font-family:var(--serif);font-weight:400;font-size:clamp(15px,2.1vw,26px);
  letter-spacing:-.01em;color:var(--taupe)}

/* ---------- cards ---------- */
.card{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column}
.card h3{margin:10px 0 8px}
.card p{font-size:15px;color:var(--ink-2);margin-bottom:14px;flex:1}
.card .meta{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);font-weight:600;margin-top:auto}
.art{aspect-ratio:1.55;background:var(--ink);display:flex;align-items:center;
  justify-content:center;color:#CFC8BB;font-family:var(--serif);font-weight:300;font-size:34px}
.art--2{background:var(--sand);color:var(--ink)}
.art--3{background:var(--taupe);color:#F0EBE1}

.tile{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column}
.tile .n{font-family:var(--serif);font-weight:300;font-size:34px;color:var(--taupe);line-height:1;margin-bottom:12px}
.tile h3{margin-bottom:8px}
.tile p{font-size:15px;color:var(--ink-2);margin:0;flex:1}
.tile .tlink{margin-top:18px;align-self:flex-start}

/* ---------- trilhas ---------- */
.paths{border-top:1px solid var(--line)}
.paths a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .2s}
.paths a:hover{padding-left:10px}
.paths em{font-style:normal;font-family:var(--serif);font-weight:300;font-size:20px;color:var(--taupe)}
.paths strong{font-weight:500;font-size:clamp(16px,2vw,21px)}
.paths i{font-style:normal;color:var(--taupe);font-size:18px}

/* ---------- listas ---------- */
.ul{list-style:none;margin:0 0 26px;padding:0}
.ul li{position:relative;padding:0 0 13px 26px;font-size:16px}
.ul li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--ink)}
.ul--no li::before{border-radius:0;width:11px;height:1px;top:.9em;background:var(--taupe)}
.dark .ul li::before{background:var(--sand)}

/* ---------- caixas e formulários ---------- */
.box{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,40px)}
.f{margin:0 0 18px}
.f label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:8px}
.f input,.f select,.f textarea{width:100%;padding:15px 14px;font-size:16px;
  background:var(--ivory);border:1px solid var(--line);border-radius:0}
.f textarea{min-height:100px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.f .hint{font-size:12.5px;color:var(--taupe);margin:7px 0 0}
.res{margin-top:26px;border-top:1px solid var(--line);padding-top:26px;display:none}
.res.on{display:block}
.res-lead{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);
  font-weight:600;margin-bottom:16px}
.scn{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:20px}
.scn > div{background:var(--paper);padding:18px 16px}
.scn .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);
  font-weight:600;margin-bottom:8px}
.scn .val{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,38px);line-height:1}
.scn .val small{font-family:var(--sans);font-size:13px;color:var(--taupe);letter-spacing:0}
.scn .base{background:var(--ink)}
.scn .base .lbl{color:#B0A692}
.scn .base .val{color:#fff}
.scn .base .val small{color:#B0A692}
.gap{background:var(--sand);padding:16px 18px;margin-bottom:20px;font-size:15px}
.prem{font-size:12.5px;color:var(--taupe);line-height:1.55;border-top:1px solid var(--line-2);padding-top:14px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:0 0 20px;font-size:13.5px;color:var(--ink-2)}
.consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--ink)}
.err{color:#8C2F2F;font-size:14px;margin:0 0 14px;display:none}
.err.on{display:block}
.ok{background:var(--sand);padding:20px;margin-top:18px;display:none}
.ok.on{display:block}
.branch{display:none}
.branch.on{display:block}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.pick button{background:var(--ivory);border:1px solid var(--line);padding:16px 10px;
  font-size:14px;font-weight:500;transition:.15s}
.pick button.sel{background:var(--ink);color:var(--ivory);border-color:var(--ink)}

/* ---------- entrega / downloads ---------- */
.dl{display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);
  padding:18px;margin:0 0 12px}
.dl:hover{border-color:var(--ink)}
.dl .ic{flex:0 0 46px;height:46px;background:var(--ink);color:var(--ivory);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.1em}
.dl b{display:block;font-family:var(--serif);font-weight:400;font-size:17px}
.dl span{display:block;font-size:13.5px;color:var(--taupe)}

/* ---------- newsletter / rodapé ---------- */
.news{display:grid;gap:clamp(24px,3vw,56px)}
.head2{display:grid;gap:clamp(20px,2.6vw,44px)}
.ft{background:var(--ink);color:#A8A196;padding:clamp(48px,6vw,88px) 0 32px;font-size:14px}
.ft h4{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.ft a{display:block;padding:5px 0;color:#D3CDC2}
.ft a:hover{color:#fff}
.ft-cols{display:grid;gap:30px}
.ft-legal{border-top:1px solid rgba(255,255,255,.13);margin-top:34px;padding-top:22px;
  font-size:12px;line-height:1.6;color:#847E74}

/* ---------- barra flutuante ---------- */
.fab{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);
  transform:translateY(110%);transition:transform .3s ease}
.fab.on{transform:none}
.fab a{display:flex;align-items:center;justify-content:center;min-height:56px;
  color:var(--ivory);font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
body.has-fab{padding-bottom:56px}

.tb{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 20px}
.tb th{background:var(--ink);color:#fff;text-align:left;padding:12px;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.tb td{border:1px solid var(--line);padding:12px;background:var(--paper);vertical-align:top}

@media(min-width:900px){
  body{font-size:17px}
  .mnav{display:flex}
  .burg{display:none}
  .fab{display:none}
  body.has-fab{padding-bottom:0}
  .acts--one{max-width:300px}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1fr 1fr;align-items:center}
  .split--rev{grid-template-columns:1fr 1fr}
  .split--top{align-items:start}
  .authority{grid-template-columns:repeat(4,1fr)}
  .scn{grid-template-columns:repeat(3,1fr)}
  .ft-cols{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .news{grid-template-columns:1fr 1fr;align-items:center}
  .head2{grid-template-columns:1fr 1fr;align-items:end}
  .hero-fig{margin-top:0}
  .hero{padding-bottom:clamp(40px,5vw,80px)}
}
@media(min-width:1180px){
  .acts{grid-template-columns:repeat(2,1fr);gap:16px;max-width:560px;align-items:stretch}
  .acts--one{grid-template-columns:1fr;max-width:300px}
}
@media(min-width:1300px){h1{font-size:90px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}