/* ==========================================================================
   FEW · sistema CHAPA
   Três recursos: CHAPA (plano cheio), CORTE (abertura por onde a foto aparece,
   sempre sangrando por uma borda), DOBRA (degrau de valor entre duas faces do
   mesmo material). Raio 0 em tudo. Zero sombra. Zero véu sobre fotografia.
   ========================================================================== */

/* ---------- Fonte da marca: variável (wght 200-900, ital 0-1) ---------- */
@font-face{font-family:'Condor';src:url('../assets/fonts/CondorVariable.woff2') format('woff2-variations');
  font-weight:200 900;font-style:normal;font-display:swap;font-variation-settings:'ital' 0}
@font-face{font-family:'Condor';src:url('../assets/fonts/CondorVariable.woff2') format('woff2-variations');
  font-weight:200 900;font-style:italic;font-display:swap;font-variation-settings:'ital' 1}
@supports not (font-variation-settings: normal){
  @font-face{font-family:'Condor';src:url('../assets/fonts/Condor-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:'Condor';src:url('../assets/fonts/Condor-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:'Condor';src:url('../assets/fonts/Condor-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
}

/* ---------- Tokens: seis hexadecimais, papéis fechados ---------- */
:root{
  --ink:#231F20;        /* tinta escura e face escura da chapa. Único preto.   */
  --paper:#FDFCF7;      /* face clara da chapa e tinta sobre escuro            */
  --sand:#E2DDC9;       /* segunda face da chapa clara                        */
  --navy:#14395C;       /* segunda face da chapa escura; campo do lightbox     */
  --terra:#C14128;      /* AÇÃO, e só ação                                    */
  --green:#466E42;      /* MARCADOR: o único círculo verdadeiro da página      */
  --ink-72:color-mix(in srgb,var(--ink) 72%,transparent);
  --ink-54:color-mix(in srgb,var(--ink) 54%,transparent);
  --ink-20:color-mix(in srgb,var(--ink) 20%,transparent);
  --paper-72:color-mix(in srgb,var(--paper) 72%,transparent);

  --font-display:'Condor','Arial Narrow',sans-serif;
  --font-body:Verdana,Geneva,Tahoma,sans-serif;

  --fs-h1:clamp(2.9rem,1.1rem + 6.4vw,6rem);
  --fs-h2:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  --fs-h3:clamp(.95rem,.88rem + .4vw,1.15rem);
  --fs-eyebrow:.72rem;
  --fs-body:clamp(.875rem,.82rem + .22vw,.9375rem);
  --fs-micro:.8125rem;

  --container:1240px;
  --gutter:clamp(20px,4.4vw,56px);
  --header-h:clamp(72px,6.2vw,96px);
  --wordmark-h:clamp(24px,2vw,32px);

  --x:calc(var(--fs-h2) * .738);       /* unidade de espaço = altura de caixa alta */
  --e:cubic-bezier(.16,.84,.28,1);
  --e2:cubic-bezier(.4,0,.2,1);
  --z-header:100; --z-lightbox:1000; --z-cookie:900;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.58;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:300;text-transform:uppercase}
p{margin:0}
:where(h1,h2,h3,.num){font-variant-numeric:tabular-nums}
::selection{background:var(--terra);color:var(--paper)}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px;border-radius:0}
.on-dark :focus-visible,.bg-ink :focus-visible,.bg-navy :focus-visible{outline-color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Lei de título: nasce em 300, UM termo em 700 ---------- */
h1,h2{line-height:.94;letter-spacing:-.014em}
h1{font-size:var(--fs-h1);line-height:.92;letter-spacing:-.015em}
h2{font-size:var(--fs-h2);line-height:.94;letter-spacing:-.012em}
.hv{font-weight:700;display:inline-block}          /* o termo pesado */
h1 span,h2 span{display:block}

/* ---------- Eyebrow: só texto ---------- */
.eyebrow{display:block;font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:var(--fs-eyebrow);letter-spacing:.26em;line-height:1;color:var(--ink);margin:0 0 calc(var(--x)*.5)}
.on-dark .eyebrow{color:var(--paper-72)}

/* ---------- Corpo ---------- */
.lead{max-width:62ch;color:var(--ink)}
.on-dark .lead,.on-dark p{color:var(--paper)}

/* ---------- Container ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- WW (massa preenchida, nunca contorno) ---------- */
.ww{display:block;fill:currentColor}

/* ---------- Botão: CTA único ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 28px;
  background:var(--terra);color:var(--paper);font-family:var(--font-display);font-weight:700;
  font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;border-radius:0;
  transition:background .22s var(--e2)}
.btn .ww{width:45px;height:14px;transition:width .22s var(--e2)}
.btn:hover .ww{width:58px}          /* estica só na horizontal: altura travada (p.13) */
.btn:hover{background:color-mix(in srgb,var(--terra) 88%,var(--ink))}
.btn--lg{height:60px;font-size:1rem}

/* ---------- Placa: toda legenda sobre foto é chapa sólida ---------- */
.placa{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:var(--paper);
  padding:14px 18px;max-width:min(86%,420px)}
.placa .pl1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-h3);letter-spacing:.06em;line-height:1.1}
.placa .pl1 i{font-style:normal;font-weight:300}
.placa .pl2{font-size:var(--fs-micro);line-height:1.5;color:var(--paper-72);margin-top:4px}

/* ---------- Par de filetes direcional (pesado desce, hairline sobe) ---------- */
.rule-top{border-top:3px solid var(--ink-54)}
.rule-bot{border-bottom:1px solid var(--ink-54)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);height:var(--header-h);
  display:flex;align-items:center;transition:background .3s var(--e2)}
.header.solid{background:var(--ink)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:var(--wordmark-h);width:auto}
.brand .wm-dark{display:none}
.header.solid .brand .wm-light{display:none}
.header.solid .brand .wm-dark{display:block}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{font-family:var(--font-body);font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:.1em;font-weight:400;color:var(--ink);transition:font-weight .2s var(--e2)}
.header.solid .nav a{color:var(--paper)}
.nav a:hover,.nav a[aria-current="true"]{font-weight:700}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:24px;height:2px;background:var(--ink)}
.header.solid .burger span{background:var(--paper)}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.sec{position:relative;overflow:hidden}
.sec--full{height:100svh;max-height:100svh}
.bg-ink{background:var(--ink);color:var(--paper)}
.bg-navy{background:var(--navy);color:var(--paper)}
.bg-sand{background:var(--sand)}
.bg-paper{background:var(--paper)}

/* corte: abertura retangular sangrando por uma borda */
.corte{position:absolute;top:18%;height:64%;width:30vw;max-width:520px;overflow:hidden;z-index:1}
.corte--right{right:0}
.corte--left{left:0}
.corte img{width:100%;height:100%;object-fit:cover}

/* ---------- 01 HERO ---------- */
#inicio{background:linear-gradient(90deg,var(--paper) 0 40%,var(--sand) 40% 100%)}
#inicio .wrap{position:relative;height:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
#inicio .bloco{position:absolute;left:var(--gutter);bottom:18%;max-width:min(52ch,46vw);z-index:2}
#inicio h1{margin-bottom:var(--x)}
#inicio .lead{margin-bottom:calc(var(--x)*.5);max-width:60ch}

/* ---------- 02 CATÁLOGO ---------- */
#catalogo .wrap{height:100%;display:grid;grid-template-columns:26% 1fr;gap:clamp(24px,3vw,48px);
  align-items:center;max-width:var(--container);margin:0 auto;padding:var(--header-h) var(--gutter) calc(var(--x)*.8)}
#catalogo .col{align-self:center;padding-top:8%}
#catalogo h2{margin-bottom:calc(var(--x)*.6)}
#catalogo .lead{margin-bottom:calc(var(--x)*.7);max-width:40ch}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;height:100%;align-content:center;
  padding:calc(var(--x)*.5) 0}
.card{position:relative;overflow:hidden;background:var(--ink);text-align:left;padding:0;min-height:0}
.card img{width:100%;height:100%;object-fit:cover}
.card .placa{transition:padding-bottom .24s var(--e2)}
.card .pl2{opacity:0;transition:opacity .24s var(--e2)}
.card:hover .placa,.card:focus-visible .placa{padding-bottom:20px}
.card:hover .pl2,.card:focus-visible .pl2{opacity:1}

/* ---------- 03 A DOBRA ---------- */
#dobra{background:var(--sand);padding-top:0}
#dobra .fig{position:relative;width:100%;max-height:76svh;overflow:hidden}
#dobra .fig img{width:100%;height:100%;max-height:76svh;object-fit:cover}
#dobra .pl1 em{font-style:italic;font-weight:700}
.serrilha{display:block;width:100%;height:clamp(34px,4.4vw,64px);color:var(--paper);
  margin-top:-1px;overflow:hidden}
.serrilha svg{display:block;width:200%;height:100%;fill:currentColor}

/* ---------- 04 MATERIAL ---------- */
#material .wrap{height:100%;display:grid;grid-template-columns:43.5% 56.5%;align-items:stretch}
#material .col{display:flex;flex-direction:column;justify-content:center;
  padding:var(--header-h) clamp(24px,3.4vw,56px) calc(var(--x)*.8) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))}
#material .macro{position:relative;overflow:hidden}
#material .macro img{width:100%;height:100%;object-fit:cover}
.oper{list-style:none;margin:calc(var(--x)*.7) 0 var(--x);padding:0}
.oper li{font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.05rem,.9rem + .75vw,1.5rem);letter-spacing:.01em;line-height:1.1;
  padding:calc(var(--x)*.32) 0}
.oper li + li{border-top:1px solid var(--ink-20)}

/* ---------- 05 OFÍCIO ---------- */
#oficio .foto{position:absolute;inset:0;z-index:0}
#oficio .foto img{width:100%;height:100%;object-fit:cover;object-position:34% 50%}
#oficio .chapa{position:absolute;top:0;right:0;bottom:0;width:40%;z-index:1;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--header-h) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter))) calc(var(--x)*.8) clamp(24px,3vw,52px)}
#oficio h2{margin-bottom:calc(var(--x)*.6)}
#oficio .lead{margin-bottom:var(--x);max-width:56ch}

/* ---------- 06 PARA QUEM ---------- */
#publico{background:linear-gradient(90deg,var(--navy) 0 33.3%,var(--ink) 33.3% 100%)}
#publico .wrap{position:relative;height:100%;max-width:var(--container);margin:0 auto;
  padding:var(--header-h) var(--gutter) calc(var(--x)*.8);display:flex;align-items:center}
.ww-rot{position:absolute;left:0;top:0;bottom:0;width:33%;z-index:0;color:var(--sand);
  display:flex;align-items:center;justify-content:flex-start;overflow:hidden;pointer-events:none}
.ww-rot svg{height:150%;width:auto;transform:rotate(90deg);transform-origin:center;fill:currentColor}
#publico .cols{position:relative;z-index:1;margin-left:36%;display:flex;flex-direction:column;gap:var(--x)}
#publico .bloco1{max-width:56ch}
#publico .bloco2{max-width:50ch}
#publico h3{font-size:var(--fs-h2);line-height:.9;text-transform:uppercase;margin-bottom:calc(var(--x)*.4)}
#publico .alcance{font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:var(--fs-eyebrow);color:var(--paper-72);margin-top:calc(var(--x)*.4)}

/* ---------- 07 FAIXA ---------- */
#escoras{height:clamp(180px,26svh,280px)}
#escoras .fig{position:absolute;inset:0;overflow:hidden}
#escoras img{width:100%;height:100%;object-fit:cover;will-change:transform}

/* ---------- 08 FECHO ---------- */
#contato{background:linear-gradient(90deg,var(--sand) 0 60%,var(--paper) 60% 100%)}
#contato .wrap{position:relative;height:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
#contato .bloco{position:absolute;right:var(--gutter);bottom:18%;max-width:min(52ch,44vw);z-index:2}
#contato h1{margin-bottom:var(--x)}
#contato .lead{margin-bottom:calc(var(--x)*.5)}

/* ---------- 09 RODAPÉ ---------- */
.rodape{position:relative;background:var(--sand);overflow:hidden;
  padding:calc(var(--x)*1.1) 0 calc(var(--x)*1.5)}
.rodape .ww-foot{position:absolute;right:0;bottom:0;width:30%;color:var(--ink);z-index:0;pointer-events:none}
.rodape .ww-foot svg{width:100%;height:auto;fill:currentColor}
.rodape .container{position:relative;z-index:1}
.rodape .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(20px,3vw,48px)}
.rodape h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-eyebrow);letter-spacing:.2em;margin:0 0 10px}
.rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rodape a:hover{font-weight:700}
.rodape .fim{display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(14px,2.4vw,36px);flex-wrap:wrap;
  margin-top:calc(var(--x)*.9);padding-top:14px;padding-right:34%}
.rodape .fim img{height:var(--wordmark-h)}
.rodape .micro{font-size:var(--fs-micro);color:var(--ink)}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{position:fixed;inset:0;z-index:var(--z-lightbox);background:color-mix(in srgb,var(--navy) 98.5%,transparent);
  display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:92svh;width:auto;height:auto;object-fit:contain}
.lb-close{position:absolute;top:20px;right:22px;width:48px;height:48px;color:var(--paper);
  border:1px solid var(--paper-72);display:grid;place-items:center;font-size:1.1rem}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;color:var(--paper);
  border:1px solid var(--paper-72);display:grid;place-items:center;font-size:1.4rem}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-close:focus-visible,.lb-nav:focus-visible{outline-color:var(--paper)}
.lb .placa{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:16px}
.lb .dot{width:11px;height:11px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 1.5px var(--paper-72)}  /* o único círculo verdadeiro da página */
.lb .cnt{font-family:var(--font-display);font-weight:300;font-variant-numeric:tabular-nums;
  font-size:var(--fs-h3);letter-spacing:.08em}
.lb .cnt b{font-weight:700}

/* ==========================================================================
   COOKIE
   ========================================================================== */
.cookie{position:fixed;inset:auto 0 0 0;z-index:var(--z-cookie);background:var(--ink);color:var(--paper);
  transform:translateY(110%);transition:transform .4s var(--e);max-height:64px}
.cookie.show{transform:translateY(0)}
.cookie .container{display:flex;align-items:center;gap:20px;height:64px}
.cookie p{font-size:var(--fs-micro);color:var(--paper);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cookie a{text-decoration:underline}
.cookie .btns{display:flex;gap:10px;flex:none}
.cookie .btn{height:36px;padding:0 16px;font-size:.78rem;letter-spacing:.1em}
.cookie .btn-out{background:transparent;border:1px solid var(--paper-72);color:var(--paper)}
.cookie .btn-out:hover{background:color-mix(in srgb,var(--paper) 12%,transparent)}

/* ==========================================================================
   MOVIMENTO (gate data-motion; conteúdo 100% legível sem JS)
   ========================================================================== */
html[data-motion] [data-anim]{will-change:transform,clip-path,opacity}
/* CORTE: guilhotina em um eixo só */
html[data-motion] [data-anim="corte-r"]{clip-path:inset(0 0 0 100%)}
html[data-motion] [data-anim="corte-l"]{clip-path:inset(0 100% 0 0)}
html[data-motion] [data-anim="assentar"]{clip-path:inset(0 0 100% 0)}
html[data-motion] [data-anim="corte-r"],
html[data-motion] [data-anim="corte-l"],
html[data-motion] [data-anim="assentar"]{transition:clip-path .62s var(--e)}
html[data-motion] [data-anim="corte-r"].in,
html[data-motion] [data-anim="corte-l"].in,
html[data-motion] [data-anim="assentar"].in{clip-path:inset(0)}
/* CHAPA: o plano desliza da própria borda por 1x */
html[data-motion] [data-anim="chapa-r"]{transform:translateX(var(--x));opacity:0}
html[data-motion] [data-anim="chapa-l"]{transform:translateX(calc(var(--x) * -2));opacity:1}
html[data-motion] [data-anim="chapa-r"],
html[data-motion] [data-anim="chapa-l"]{transition:transform .52s var(--e),opacity .52s var(--e)}
html[data-motion] [data-anim="chapa-r"].in,
html[data-motion] [data-anim="chapa-l"].in{transform:none;opacity:1}
/* HASTE: 18px em Y + 4,5px em X (tangente de ~15 graus) */
html[data-motion] [data-anim="haste"]{opacity:0;transform:translate(4.5px,18px);
  transition:opacity .46s var(--e),transform .46s var(--e)}
html[data-motion] [data-anim="haste"].in{opacity:1;transform:none}
/* PLACA: só opacidade, depois da imagem */
html[data-motion] [data-anim="placa"]{opacity:0;transition:opacity .3s var(--e2) .24s}
html[data-motion] [data-anim="placa"].in{opacity:1}
/* DOBRA: o traço engrossa */
html[data-motion] .hv{font-variation-settings:'wght' 300;transition:font-variation-settings .7s var(--e)}
html[data-motion] .in .hv,html[data-motion] .hv.in{font-variation-settings:'wght' 700}
@supports not (font-variation-settings: normal){
  html[data-motion] .hv{font-weight:700}
}

@media (prefers-reduced-motion:reduce){
  html[data-motion] [data-anim]{clip-path:none!important;transform:none!important;opacity:1!important;
    transition:none!important}
  html[data-motion] .hv{font-variation-settings:'wght' 700!important;transition:none!important}
  .btn .ww{transition:none}
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:900px){
  .btn--nav{height:40px;padding:0 14px;font-size:.76rem;gap:9px;letter-spacing:.1em}
  .btn--nav .ww{width:32px;height:10px}
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;
    align-items:flex-start;gap:4px;padding:0 var(--gutter);transform:translateX(100%);
    transition:transform .36s var(--e);z-index:96}
  .nav.open{transform:none}
  .nav a{color:var(--paper);font-family:var(--font-display);font-size:1.6rem;font-weight:300;
    letter-spacing:.04em;padding:10px 0}
  .burger{display:flex;z-index:97}
  .header.menu-open .burger span{background:var(--paper)}

  #inicio{background:linear-gradient(180deg,var(--paper) 0 40%,var(--sand) 40% 100%)}
  #inicio .bloco{position:static;max-width:none;padding-top:calc(var(--header-h) + var(--x));
    padding-bottom:calc(var(--x)*.6)}
  #inicio .wrap{display:flex;flex-direction:column;height:100%}
  .corte{position:relative;top:auto;height:auto;width:auto;max-width:none;flex:1;min-height:0;
    margin-right:calc(var(--gutter) * -1)}
  #contato .corte{margin-right:0;margin-left:calc(var(--gutter) * -1)}

  #catalogo .wrap{grid-template-columns:1fr;gap:var(--x);
    padding-top:calc(var(--header-h) + var(--x)*.6)}
  #catalogo .col{padding-top:0}
  #catalogo .lead{max-width:60ch}
  .grade{grid-template-columns:repeat(2,1fr);gap:14px}

  #material .wrap{grid-template-columns:1fr;grid-template-rows:42svh 1fr}
  #material .col{padding:var(--x) var(--gutter)}
  #material .macro{order:-1}

  #oficio .foto{inset:0 0 45% 0}
  #oficio .chapa{top:55%;left:0;width:100%;padding:var(--x) var(--gutter)}

  #publico{background:linear-gradient(180deg,var(--navy) 0 18%,var(--ink) 18% 100%)}
  #publico .cols{margin-left:30%}
  .ww-rot{width:28%}

  #contato{background:linear-gradient(180deg,var(--sand) 0 60%,var(--paper) 60% 100%)}
  #contato .wrap{display:flex;flex-direction:column-reverse}
  #contato .bloco{position:static;max-width:none;padding-top:calc(var(--x)*.6);padding-bottom:var(--x)}

  .rodape .cols{grid-template-columns:1fr 1fr}
  .rodape .ww-foot{width:40%}
  .lb img{max-height:88svh}
}

@media (max-width:560px){
  .btn--nav .lbl-long{display:none}
  .btn--nav{padding:0 12px}
  :root{--fs-body:.875rem}
  .grade{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;height:56svh;align-content:stretch;
    padding-bottom:6px;scrollbar-width:none}
  .grade::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start}
  #catalogo .wrap{padding-bottom:var(--x)}
  main .btn{width:100%;justify-content:space-between;height:48px}
  main .btn--lg{height:56px}
  #publico .cols{margin-left:0;padding-top:16%}
  .ww-rot{width:22%}
  .rodape .cols{grid-template-columns:1fr;gap:var(--x)}
  .rodape .ww-foot{width:52%;bottom:0}
  .rodape .fim{padding-right:0;padding-bottom:calc(var(--x)*1.6)}
  .cookie{max-height:72px}
  .cookie .container{height:auto;padding-top:10px;padding-bottom:10px;gap:10px}
  .cookie p{white-space:normal;font-size:.75rem}
  .lb img{max-height:82svh}
  .lb-close,.lb-nav{width:48px;height:48px}
  #material .wrap{grid-template-rows:34svh 1fr}
  #oficio .foto{inset:0 0 48% 0}
  #oficio .chapa{top:52%}
}