:root{
  --cream:#F6EEDC;--green:#2F4A36;--orange:#E0592A;--mustard:#F2A900;--brown:#3A2418;--ink:#1E1410;--pink:#F0A1C8;--brick:#8A2E22;
  --serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  --pad:clamp(20px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
img,video{display:block;max-width:100%}

/* topo */
.top{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);color:var(--cream);transition:color .3s}
.top.dark{color:var(--ink)}
.logo{font-family:var(--serif);font-weight:800;font-size:26px;font-variation-settings:'SOFT' 100,'WONK' 1}
.logo span{color:var(--mustard);font-weight:600}
.top.dark .logo span{color:var(--orange)}
.top nav{display:flex;align-items:center;gap:26px;font-weight:500;font-size:15px}
.top nav a:hover{opacity:.7}
.pill{background:var(--mustard);color:var(--ink);padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px}

/* capa */
.hero{padding:150px var(--pad) 70px;min-height:70vh;display:flex;flex-direction:column;justify-content:flex-end}
.c-orange{background:var(--orange);color:var(--cream)}
.c-mustard{background:var(--mustard);color:var(--ink)}
.c-green{background:var(--green);color:var(--cream)}
.c-pink{background:var(--pink);color:var(--ink)}
.c-brown{background:var(--brown);color:var(--cream)}
.kicker{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;opacity:.85}
h1{font-family:var(--serif);font-weight:900;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:clamp(46px,9vw,150px);line-height:.92;margin:16px 0 18px;max-width:14ch}
.sub{font-size:clamp(18px,1.8vw,26px);line-height:1.35;max-width:46ch;opacity:.9}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px 40px;margin-top:44px;padding-top:26px;border-top:2px solid currentColor;max-width:900px}
.nota{margin-top:22px;max-width:62ch;font-size:14px;line-height:1.5;opacity:.75;font-style:italic}
.meta dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.meta dd{font-size:17px;font-weight:500}

/* capa em imagem */
.cover{padding:0 var(--pad);margin-top:-1px}
.cover img{width:100%;border-radius:0 0 28px 28px;object-fit:cover;max-height:90vh}

/* textos */
.blocks{max-width:1100px;margin:0 auto;padding:80px var(--pad) 20px;display:grid;gap:56px}
.block{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:20px 50px}
.block h2{font-family:var(--serif);font-weight:800;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:clamp(26px,2.6vw,38px)}
.block p{font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.block p+p{margin-top:14px}

/* decisões */
.decisions{display:grid;gap:22px}
.decision{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:4px}
.decision .dn{grid-row:1/3;font-family:var(--serif);font-weight:900;font-size:22px;color:var(--orange)}
.decision h3{font-family:var(--serif);font-weight:800;font-size:clamp(19px,1.6vw,24px);line-height:1.2}
.decision p{margin:0!important}

/* galeria */
.gallery{padding:60px var(--pad) 40px;display:grid;gap:28px;max-width:1500px;margin:0 auto}
.gallery figure{margin:0}
.gallery img,.gallery video{width:100%;border-radius:22px;background:rgba(0,0,0,.06)}
.gallery figcaption{font-size:14px;opacity:.7;margin-top:10px}
.gallery .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,400px));gap:36px;justify-content:center;margin:20px 0}
.gallery .g-title{margin:46px 0 4px;padding-top:26px;border-top:2px solid var(--ink)}
.gallery .g-title h3{font-family:var(--serif);font-weight:800;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:clamp(24px,2.6vw,36px)}
.gallery .g-title p{margin-top:6px;font-size:16px;line-height:1.5;opacity:.75;max-width:62ch}
.gallery .row.cols{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:18px;margin:6px 0}
.gallery .row.cols figure img,.gallery .row.cols figure video{border-radius:14px}
.gallery img.zoom{cursor:zoom-in;transition:transform .25s}
.gallery img.zoom:hover{transform:scale(1.01)}
@media (max-width:720px){.gallery .row.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,14,10,.92);display:flex;align-items:center;justify-content:center;padding:0;cursor:zoom-out}
.lightbox img{width:auto;height:auto;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:24px;width:44px;height:44px;border:0;border-radius:50%;background:var(--cream);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.gallery .phone{max-height:78vh;overflow-y:auto;border-radius:34px;border:8px solid var(--ink);background:#fff;scrollbar-width:thin}
.gallery .phone img{border-radius:0;width:100%}
.gallery .phone.vid{max-height:none;overflow:hidden;aspect-ratio:9/16;background:#000}
.gallery .phone.vid video{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}

/* protótipos vivos */
.proto{margin:10px 0 30px}
.proto-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.proto-bar strong{font-family:var(--serif);font-weight:800;font-size:clamp(20px,2vw,28px);margin-right:auto}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button{font:inherit;font-weight:700;font-size:14px;padding:8px 18px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--cream)}
.proto-bar .open{font-weight:700;font-size:14px;border-bottom:2px solid var(--orange);padding-bottom:2px}
.variants{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.variants button{font:inherit;font-weight:600;font-size:13px;padding:6px 15px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.variants button.on{background:var(--orange);border-color:var(--orange);color:var(--cream)}
.proto-stage{margin:0 auto;border:3px solid var(--ink);border-radius:20px;overflow:hidden;background:#fff;transition:max-width .45s ease,border-radius .45s ease,border-width .3s;box-shadow:8px 8px 0 var(--ink)}
.proto-stage.desktop{max-width:100%}
.proto-stage.mobile{max-width:410px;border-width:9px;border-radius:40px}
.proto-stage .chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#EDE5D2;border-bottom:2px solid var(--ink)}
.proto-stage .chrome i{width:11px;height:11px;border-radius:50%;background:var(--ink);opacity:.35}
.proto-stage .chrome span{margin-left:12px;flex:1;max-width:420px;background:#fff;border-radius:999px;padding:4px 14px;font-size:13px;opacity:.75}
.proto-stage.mobile .chrome{display:none}
.proto-stage iframe{display:block;width:100%;height:min(78vh,820px);min-height:520px;border:0;background:#fff}

/* próximo e rodapé */
.next{margin:60px var(--pad) 0;border-radius:32px;padding:clamp(34px,5vw,70px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;transition:transform .25s}
.next:hover{transform:translateY(-4px)}
.next small{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.next strong{font-family:var(--serif);font-weight:900;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:clamp(32px,5vw,72px);line-height:1}
.next .arrow{font-size:clamp(40px,5vw,70px);font-weight:700}
.foot{padding:60px var(--pad) 70px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:15px}
.foot a{border-bottom:2px solid var(--orange);padding-bottom:2px}

.notfound{min-height:100vh;display:grid;place-content:center;text-align:center;gap:18px;padding:var(--pad)}
.notfound h1{max-width:none;font-size:clamp(40px,7vw,96px);margin:0}
.notfound a{justify-self:center;background:var(--mustard);padding:12px 26px;border-radius:999px;font-weight:700}

@media (max-width:720px){
  .block{grid-template-columns:1fr}
  .top nav a:not(.pill){display:none}
  .hero{min-height:60vh;padding-top:120px}
}

/* ================= revisão mobile e tablet ================= */
.proto-stage{position:relative}
.proto-lock{position:absolute;inset:0;z-index:5;border:0;background:rgba(30,20,16,.05);display:grid;place-items:center;cursor:pointer}
.proto-lock span{background:var(--ink);color:var(--cream);font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.proto-stage:not(.locked) .proto-lock{display:none}
.proto-exit{position:absolute;top:10px;right:10px;z-index:6;border:0;border-radius:999px;background:var(--ink);color:var(--cream);font:inherit;font-weight:700;font-size:13px;padding:10px 16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.proto-stage.locked .proto-exit{display:none}
@media (max-width:559px){.seg{display:none}.proto-bar strong{flex:1 0 100%}}
@media (pointer:coarse){
  .top nav a{padding:12px 4px;display:inline-flex;align-items:center}
  .pill{min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .seg button{min-height:44px}
  .variants button{min-height:44px;padding-left:16px;padding-right:16px}
  .proto-bar .open{display:inline-flex;align-items:center;min-height:44px}
  .foot a{display:inline-flex;align-items:center;min-height:44px}
  .proto-exit{min-height:44px}
}