/* Identidade oficial SupraMark 2023 — azul #1F3847, azul claro #7FACC8, Montserrat.
   Layout: caderno de catálogo. Colunas assimétricas de 12, fotografia sangrando
   numa borda e tipografia na contra-coluna, alternando o lado a cada bloco. */
:root{
  --navy:#1F3847;
  --sky:#7FACC8;
  --sky-deep:#4E7F9E;
  --paper:#F2F2F0;
  --plate:#FFFFFF;
  --ink:#16272F;
  --muted:#667983;
  --rule:#D8D8D3;
  --on-navy:#F2F2F0;
  --on-navy-dim:#A9C3D4;
  --veil:rgba(242,242,240,.92);
  --flag:#B0352B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#152630; --sky:#7FACC8; --sky-deep:#9BC2DA;
    --paper:#101820; --plate:#F4F4F2; --ink:#E9EFF3; --muted:#94A6B1; --rule:#27343D;
    --on-navy:#E9EFF3; --on-navy-dim:#9BB4C6; --veil:rgba(16,24,32,.92); --flag:#E0796B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --navy:#152630; --sky:#7FACC8; --sky-deep:#9BC2DA;
  --paper:#101820; --plate:#F4F4F2; --ink:#E9EFF3; --muted:#94A6B1; --rule:#27343D;
  --on-navy:#E9EFF3; --on-navy-dim:#9BB4C6; --veil:rgba(16,24,32,.92); --flag:#E0796B;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}

.shell{
  max-width:84rem;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.sec{padding-block:7rem}
@media(max-width:860px){.sec{padding-block:4rem}}

/* grade de 12 */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
@media(max-width:860px){.g12{grid-template-columns:1fr;gap:2rem}}

.small{font-size:.8125rem;font-weight:500;color:var(--muted);letter-spacing:0}
.lede{font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;line-height:1.55;max-width:46ch}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--veil);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav__in{
  max-width:84rem;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-block:.85rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.nav [data-mark]{width:10.5rem;flex:none;color:var(--navy)}
:root[data-theme="dark"] .nav [data-mark],
:root:not([data-theme="light"]) .nav [data-mark]{color:var(--ink)}
.nav__links{display:flex;gap:1.5rem;flex-wrap:wrap;margin-left:auto}
.nav__links a{font-size:.875rem;font-weight:500;color:var(--muted);text-decoration:none;padding-block:.25rem;border-bottom:1.5px solid transparent}
.nav__links a:hover{color:var(--ink);border-color:var(--sky)}
.nav__links a:focus-visible,.lang button:focus-visible,.copy:focus-visible{outline:2px solid var(--sky-deep);outline-offset:3px}
.lang{display:flex;gap:.1rem;flex:none;align-items:center}
.lang button{font-family:inherit;font-size:.8125rem;font-weight:600;background:transparent;color:var(--muted);border:0;padding:.25rem .3rem;cursor:pointer}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--sky);text-decoration-thickness:2px}
.lang span{color:var(--rule)}
@media(max-width:860px){
  .nav__in{gap:.5rem 1rem;padding-block:.65rem}
  .nav [data-mark]{width:7rem}
  .nav__links{
    order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
    gap:1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:.15rem;
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap;font-size:.8125rem}
}

/* ---------- hero: tipo à esquerda, foto ocupando a borda direita ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44vw);
  align-items:center;gap:clamp(1.5rem,4vw,4rem);
}
.hero__type{
  display:grid;gap:1.5rem;justify-items:start;
  padding-block:clamp(3rem,7vw,6rem);
  padding-left:max(20px,env(safe-area-inset-left,0px),calc((100vw - 84rem) / 2 + 20px));
  padding-right:1rem;
}
.hero h1{font-size:clamp(1.8rem,3.1vw,2.65rem);max-width:15ch;font-weight:800}
.hero__sub{font-weight:300;font-size:clamp(.9375rem,1.2vw,1.0625rem);max-width:34ch;color:var(--muted)}
.hero__shot{position:relative;align-self:stretch;min-height:clamp(17rem,44vh,27rem)}
.hero__shot img{
  width:100%;height:100%;min-height:clamp(17rem,44vh,27rem);
  object-fit:cover;object-position:center 20%;background:var(--plate);
}
.reveal img{animation:unveil 1100ms cubic-bezier(.2,.75,.25,1) both}
@keyframes unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,42vw)}
  .hero h1{max-width:13ch}
}
@media(max-width:720px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero h1{max-width:18ch}
  .hero__type{padding-block:2.25rem 1.75rem;padding-right:max(20px,env(safe-area-inset-right,0px))}
  .hero__shot,.hero__shot img{min-height:17rem}
}

/* ---------- manifesto ---------- */
.manifesto{background:var(--navy);color:var(--on-navy)}
.manifesto .g12{align-items:start}
.manifesto__a{grid-column:2 / 8}
.manifesto__b{grid-column:8 / 12;align-self:end}
@media(max-width:860px){.manifesto__a,.manifesto__b{grid-column:auto}}
.manifesto p{font-weight:200;font-size:clamp(1.3rem,2.9vw,2.1rem);line-height:1.34;letter-spacing:-.02em}
.manifesto .second{font-size:clamp(1rem,1.4vw,1.1875rem);font-weight:300;color:var(--on-navy-dim);line-height:1.55}

/* ---------- linha de produtos: mosaico assimétrico ---------- */
.lines__head{grid-column:1 / 8}
@media(max-width:860px){.lines__head{grid-column:auto}}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;margin-top:3.5rem}
@media(max-width:860px){.mosaic{grid-template-columns:1fr;gap:2.25rem;margin-top:2.25rem}}
.plate{min-width:0;display:grid;gap:.85rem;align-content:start}
.plate figure{margin:0;background:var(--plate);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
.p6 img{object-position:center 22%}
.plate__meta{display:grid;gap:.25rem}
.plate__n{font-size:.75rem;font-weight:700;color:var(--sky-deep);font-variant-numeric:tabular-nums}
.plate p{font-size:.9375rem;color:var(--muted);line-height:1.5;max-width:34ch}

@media(min-width:861px){
  .p1{grid-column:1 / 5}      .p1 figure{aspect-ratio:4/5}
  .p2{grid-column:5 / 8}      .p2 figure{aspect-ratio:3/4}
  .p3{grid-column:9 / 13;align-self:end;padding-bottom:.5rem}
  .p4{grid-column:1 / 4}      .p4 figure{aspect-ratio:3/4}
  .p5{grid-column:4 / 8}      .p5 figure{aspect-ratio:1/1}
  .p6{grid-column:8 / 12}     .p6 figure{aspect-ratio:1/1}
  .p7{grid-column:2 / 6}      .p7 figure{aspect-ratio:5/4}
  .p8{grid-column:6 / 9}      .p8 figure{aspect-ratio:4/5}
}
@media(max-width:860px){
  .mosaic{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .plate figure{aspect-ratio:3/4}
  .p3{grid-column:1 / -1}
}

/* ---------- processo ---------- */
.flow{background:var(--navy);color:var(--on-navy)}
.flow__head{grid-column:1 / 7}
@media(max-width:860px){.flow__head{grid-column:auto}}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:3.5rem;border-top:1px solid rgba(169,195,212,.3)}
@media(max-width:860px){.steps{grid-template-columns:1fr;margin-top:2rem}}
.step{padding:1.6rem 1.4rem 2rem 0;border-right:1px solid rgba(169,195,212,.18);display:grid;gap:.5rem;align-content:start;min-width:0}
.step:last-child{border-right:0}
@media(max-width:860px){.step{border-right:0;border-bottom:1px solid rgba(169,195,212,.18);padding:1.25rem 0}}
.step__n{font-size:.75rem;font-weight:700;color:var(--sky);font-variant-numeric:tabular-nums}
.step h3{color:var(--on-navy)}
.step p{font-size:.875rem;font-weight:300;color:var(--on-navy-dim);line-height:1.55}

/* ---------- clientes ---------- */
.clients__head{grid-column:1 / 7}
@media(max-width:860px){.clients__head{grid-column:auto}}
.wall{display:flex;flex-wrap:wrap;gap:.5rem 2.25rem;margin-top:3rem;max-width:62rem}
.wall span{font-size:clamp(1rem,1.9vw,1.5rem);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.wall span:nth-child(3n){color:var(--sky-deep)}
.wall span:nth-child(5n){font-weight:700}

/* ---------- contato ---------- */
.contact{background:var(--navy);color:var(--on-navy)}
.contact__a{grid-column:1 / 7}
.contact__b{grid-column:8 / 13;display:grid;gap:1.75rem;align-content:start}
@media(max-width:860px){.contact__a,.contact__b{grid-column:auto}}
.cline{display:grid;gap:.2rem;border-top:1px solid rgba(169,195,212,.3);padding-top:.9rem;min-width:0}
.cline__k{font-size:.8125rem;font-weight:500;color:var(--sky)}
.cline__v{font-size:1.0625rem;font-weight:600;word-break:break-word}
.copy{justify-self:start;font-family:inherit;font-size:.75rem;font-weight:600;background:transparent;color:var(--on-navy-dim);border:0;border-bottom:1px solid rgba(169,195,212,.5);padding:.1rem 0;margin-top:.35rem;cursor:pointer}
.copy:hover{color:var(--on-navy);border-color:var(--on-navy)}

/* ---------- quem somos ---------- */
.about__a{grid-column:1 / 6}
.about__b{grid-column:7 / 13}
@media(max-width:860px){.about__a,.about__b{grid-column:auto}}
.facts{display:grid;gap:0}
.fact{display:grid;grid-template-columns:1fr auto;gap:1.25rem;padding:.95rem 0;border-top:1px solid var(--rule);align-items:baseline}
.fact__k{font-size:.875rem;font-weight:400;color:var(--muted)}
.fact__v{font-size:.9375rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.flag{font-size:.6875rem;font-weight:700;color:var(--flag);border:1px dashed var(--flag);padding:.1rem .4rem;white-space:nowrap}

/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--rule)}
.foot{display:flex;flex-wrap:wrap;gap:1.5rem 3.5rem;justify-content:space-between;align-items:flex-start;padding-block:2.75rem;font-size:.8125rem;color:var(--muted)}
.foot__col{display:grid;gap:.35rem;min-width:0}
.foot [data-mark]{width:7.5rem;color:var(--navy);margin-bottom:.5rem}
:root[data-theme="dark"] .foot [data-mark],
:root:not([data-theme="light"]) .foot [data-mark]{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .reveal img{animation:none}
  *{transition:none!important}
}
/* ---------- páginas de produto ---------- */
.phero{padding-block:3rem 2.5rem}
.back{
  display:inline-block;font-size:.8125rem;font-weight:600;color:var(--sky-deep);
  text-decoration:none;border-bottom:1px solid transparent;margin-bottom:2rem;
}
.back::before{content:"\2190\00a0"}
.back:hover{border-color:var(--sky-deep)}
.phero__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:end}
@media(max-width:860px){.phero__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start}}
.phero h1{font-size:clamp(2rem,4.4vw,3.1rem);margin-top:.4rem;max-width:14ch}
.psub{font-size:1.0625rem;font-weight:300;color:var(--muted);margin-top:.75rem}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);gap:1rem}}
.gshot{margin:0;background:#FFFFFF;overflow:hidden;aspect-ratio:3/4;display:grid;place-items:center;padding:.5rem}
.gshot img{width:100%;height:100%;object-fit:contain}

.pager{display:flex;justify-content:space-between;gap:1.5rem;border-top:1px solid var(--rule);padding-top:1.75rem}
.pager a{display:grid;gap:.25rem;text-decoration:none;min-width:0}
.pager__k{font-size:.75rem;font-weight:600;color:var(--muted)}
.pager__v{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.pager a:hover .pager__v{color:var(--sky-deep)}

.plate__link{display:grid;gap:.25rem;text-decoration:none;color:inherit}
.plate__link h3{transition:color .15s ease}
.plate__link:hover h3{color:var(--sky-deep)}
.plate__link:focus-visible{outline:2px solid var(--sky-deep);outline-offset:4px}
.plate__link::after{content:"";display:block}

/* --- correções pós-publicação --- */
/* título de produtos ocupa a largura e divide em duas colunas: acaba o vazio à direita */
.lines__head{grid-column:1 / -1}
.lines__t{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:start}
.lines__t .lede{margin-top:.35rem!important}
@media(max-width:860px){.lines__t{grid-template-columns:1fr;gap:1rem}}

/* a peça inteira é clicável, foto incluída */
.plate__link{display:grid;gap:.85rem;text-decoration:none;color:inherit}
.plate__link figure{margin:0;background:var(--plate);overflow:hidden}
.plate__link img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.plate__link:hover img{transform:scale(1.03)}
.plate__link:focus-visible{outline:2px solid var(--sky-deep);outline-offset:4px}

/* fotos mais baixas, mas sempre na largura cheia da coluna */
@media(min-width:861px){
  .p1 figure{aspect-ratio:1/1}
  .p2 figure{aspect-ratio:1/1}
  .p4 figure{aspect-ratio:1/1}
  .p5 figure{aspect-ratio:4/3}
  .p6 figure{aspect-ratio:4/3}
  .p7 figure{aspect-ratio:4/3}
  .p8 figure{aspect-ratio:1/1}
}
@media(max-width:860px){.plate figure{aspect-ratio:1/1}}
.mosaic{align-items:start}