:root{
  --espresso:#241c15;
  --espresso-deep:#170f0a;
  --cream:#f3ecdd;
  --sand:#e7d9be;
  --brass:#b8843c;
  --brass-light:#e4c48c;
  --white:#ffffff;
  --ink:var(--cream);
  --ink-dark:var(--espresso);
  --muted:#b7a489;
  --muted-dark:#6b5b45;
  --line:rgba(243,236,221,0.14);
  --line-dark:rgba(36,28,21,0.14);
  --radius:2px;
  --ff-display:'Fraunces', 'Georgia', serif;
  --ff-body:'Archivo', 'Helvetica Neue', sans-serif;
  --ff-mono:'IBM Plex Mono', 'Courier New', monospace;
}

*,*::before,*::after{box-sizing:border-box;}
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink-dark);
  font-family:var(--ff-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{
  font-family:var(--ff-display);
  margin:0;
  letter-spacing:-0.015em;
  font-weight:600;
}
p{max-width:65ch;}

::selection{background:var(--ink-dark);color:var(--cream);}
.section-dark ::selection,
.hero ::selection,
.about-hero ::selection,
.page-hero ::selection{background:var(--cream);color:var(--ink-dark);}

:focus-visible{
  outline:2px solid var(--ink-dark);
  outline-offset:3px;
  border-radius:1px;
}
.section-dark :focus-visible,
.hero :focus-visible,
.about-hero :focus-visible,
.page-hero :focus-visible{
  outline-color:var(--cream);
}
.audience :focus-visible,
.cta-band :focus-visible{
  outline-color:var(--ink-dark);
}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  font-family:var(--ff-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dark);
}
.hero-kicker,
.section-dark .eyebrow,
.page-hero .eyebrow,
.about-hero .eyebrow{
  color:var(--muted);
}

/* ---------- header ---------- */
.header-stack{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
}
.topbar{
  height:34px;
  background:var(--espresso);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  overflow:hidden;
  transition:height .35s ease, opacity .3s ease, border-color .35s ease;
}
.topbar-inner{
  width:100%;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--muted);
}
.topbar-note{display:inline-flex;align-items:center;gap:.6em;}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#8a9c6f;flex:none;}
/* As redes desceram do header pro topbar quando o logo foi pro centro: o header
   virou grade de 3 colunas e não sobrou ponta livre pra elas. */
.topbar-social{display:inline-flex;align-items:center;gap:14px;}
.topbar-social a{
  display:flex;
  color:var(--muted);
  transition:color .2s ease;
}
.topbar-social a:hover{color:var(--brass-light);}
.topbar-social svg{width:13px;height:13px;fill:currentColor;display:block;}
.topbar-right{display:inline-flex;align-items:center;gap:22px;}
.topbar-phone{
  display:inline-flex;
  align-items:baseline;
  gap:.7em;
}
.topbar-phone .label{
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.topbar-phone .num{
  font-family:var(--ff-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--brass-light);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.topbar-phone:hover .num{border-bottom-color:var(--brass);}
.header-stack.is-scrolled .topbar{height:0;opacity:0;border-bottom-color:transparent;}

/* ---------- swup page transition ---------- */
html.is-changing .transition-swup{
  transition:opacity .4s ease, transform .4s ease;
}
html.is-animating .transition-swup{
  opacity:0;
  transform:translateY(16px);
}
/* Grade 1fr auto 1fr: o logo fica no centro MATEMÁTICO da tela, não no meio do
   espaço que sobra. É por isso que 3 itens de um lado e 2 do outro não entortam
   nada — as duas colunas laterais têm a mesma largura por definição. */
.site-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:22px 32px;
  background:linear-gradient(to bottom, rgba(23,15,10,.82), transparent);
  color:var(--cream);
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
}
.site-header.is-light,
.header-stack.is-scrolled .site-header{
  background:rgba(23,15,10,.96);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding-top:16px;
  padding-bottom:16px;
}
/* .nav-panel é só uma casca: no desktop ela desaparece da árvore de layout
   (display:contents) e as duas navs viram colunas da grade do header. No mobile
   ela volta a ser uma caixa de verdade e é ela o painel que desliza — assim os
   5 links existem uma vez só no HTML, sem menu mobile duplicado. */
.nav-panel{display:contents;}
.site-header .nav-left{order:1;justify-self:start;}
.site-header .logo{order:2;}
.site-header .nav-right{order:3;justify-self:end;}
.site-header .nav-toggle{order:4;justify-self:end;}

.logo{
  display:flex;
  align-items:center;
}
.logo-img{
  height:22px;
  width:auto;
  filter:brightness(0) invert(1);
}
.footer-grid .logo-img{height:24px;}
.main-nav ul{
  display:flex;
  gap:clamp(18px, 2.4vw, 36px);
}
.main-nav a{
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--brass);
  transition:width .25s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after{width:100%;}
.footer-social svg{
  width:14px;
  height:14px;
  fill:currentColor;
  display:block;
}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--cream);
  font-size:1.5rem;
  cursor:pointer;
}

/* ---------- hero ---------- */
/* HERO — duas variantes em teste (01/10).
   hero-split : texto numa coluna sólida, foto num painel ao lado. É a língua do
                resto do site (foto numa caixa, texto numa coluna) e a única que
                funciona com fotografia de retrato de produto, que é a que existe.
   hero-bleed : foto a sangrar com véu direcional. Mantém a composição do Paulo.
   O véu antigo era radial com .14 no centro — quase transparente exatamente onde
   o título assenta. Era esse o bug, não a falta de contraste. */
.hero{
  position:relative;
  background:var(--espresso-deep);
  color:var(--cream);
  overflow:hidden;
  box-sizing:border-box;
  /* o header é fixo: sem isto o conteúdo nasce por baixo dele */
  padding:calc(34px + 68px) 0 0;
}
.hero-inner{
  position:relative;
  z-index:2;
  width:min(1180px, 100% - 64px);
  margin-inline:auto;
}
.hero-content{ position:relative; z-index:2; text-align:left; }
.hero-kicker{ display:block; margin-bottom:20px; }
.hero h1{ margin:0 0 22px; }
.hero p.lede{ max-width:52ch; }

.hero-figure{ position:relative; margin:0; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.9) sepia(0.08) hue-rotate(-6deg) contrast(1.05);
}
/* a foto chega desfocada e assenta — é a "entrada" do site */
html.js .hero-bg{
  filter:saturate(0.9) sepia(0.08) hue-rotate(-6deg) contrast(1.05) blur(14px);
  transform:scale(1.06);
  opacity:0;
  animation:hero-settle 1.1s cubic-bezier(.22,.61,.36,1) 60ms forwards;
}
@keyframes hero-settle{
  to{
    filter:saturate(0.9) sepia(0.08) hue-rotate(-6deg) contrast(1.05) blur(0);
    transform:scale(1);
    opacity:1;
  }
}

/* ---- A: duas colunas ---- */
.hero-split{ min-height:78vh; display:flex; align-items:center; padding-block:calc(34px + 68px) 72px; }
.hero-split .hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:clamp(32px, 5vw, 72px);
}
.hero-split .hero-figure{ aspect-ratio:4/3; border-radius:var(--radius); }

/* ---- B: foto a sangrar, véu direcional ---- */
.hero-bleed{ min-height:78vh; display:flex; align-items:center; }
.hero-bleed .hero-figure{ position:absolute; inset:0; z-index:0; aspect-ratio:auto; }
.hero-bleed .hero-inner{ display:block; }
.hero-bleed .hero-content{ max-width:620px; }
/* denso do lado do texto, aberto do lado da máquina — ao contrário do antigo,
   que era mais claro justamente onde o título assenta */
.hero-bleed::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(23,15,10,.94) 0%, rgba(23,15,10,.82) 38%, rgba(23,15,10,.35) 70%, rgba(23,15,10,.25) 100%),
    linear-gradient(180deg, rgba(23,15,10,.55) 0%, rgba(23,15,10,.15) 30%, rgba(23,15,10,.6) 100%);
}

/* ---- C: máquina recortada, vazio construído ----
   Em vez de procurar uma foto com espaço negativo (não existe no acervo),
   constrói-se o espaço: o recorte com alfa vai para a direita e o texto ocupa
   o vazio à esquerda. É a estrutura da La Marzocco, feita em CSS — continua
   responsiva, em vez de uma imagem achatada.

   As três máquinas têm proporções diferentes (compacta 928x796, 2 grupos
   1185x736, 3 grupos 1236x777). Por isso a figura manda na ALTURA e a imagem
   faz contain: assim a Compacta não entra com outro tamanho ao rodar. */
.hero-object{ min-height:82vh; display:flex; align-items:center; position:relative; }
/* static de propósito: a figura é absolute e tem de ancorar na SECÇÃO, não
   aqui. Com o inner relative, o bottom:0 caía no fundo do inner (452px) em vez
   do fundo da hero (812px) e a máquina aterrava a meio, por cima do texto.
   O z-index da coluna de texto vive no .hero-content, que já é relative. */
.hero-object .hero-inner{ display:block; position:static; }
.hero-object .hero-content{ max-width:540px; }
.hero-object .hero-figure{
  position:absolute;
  right:clamp(-40px, -2vw, 0px);
  bottom:0;
  width:min(58%, 820px);
  height:min(66vh, 560px);
  aspect-ratio:auto;
  z-index:0;
  pointer-events:none;
}
.hero-object .hero-bg{
  position:static;
  width:100%; height:100%;
  object-fit:contain;
  object-position:right bottom;
  filter:none;
  /* assenta no escuro em vez de flutuar */
  -webkit-mask-image:linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 88%, transparent 100%);
}
@keyframes hero-object-settle{ to{ transform:none; opacity:1; } }
html.js .hero-object .hero-bg{
  filter:none;
  transform:translateY(18px); opacity:0;
  animation:hero-object-settle 1s cubic-bezier(.22,.61,.36,1) 120ms forwards;
}
.hero-object.is-settled .hero-bg{ opacity:1; transform:none; animation:none; }

/* ---- telemóvel: outra estratégia, não a mesma encolhida ----
   Antes era empilhar tudo e a máquina caía para fora do ecrã: via-se uma
   parede de texto e nenhum produto. Agora a máquina é ancorada em baixo e
   sangra pela direita, e a tipografia aperta para os dois caberem no mesmo
   ecrã — que é o que faz a versão de computador funcionar. */
@media (max-width:900px){
  .hero-object{
    min-height:100svh;
    display:flex;
    align-items:flex-start;
    padding-block:124px 0;
    overflow:hidden;
  }
  .hero-object .hero-content{ max-width:none; }
  .hero-object .hero-kicker{ margin-bottom:14px; font-size:.68rem; letter-spacing:.16em; }
  .hero-object h1{ font-size:clamp(2.1rem, 9.2vw, 3rem); line-height:1.04; margin-bottom:16px; }
  .hero-object p.lede{ font-size:1rem; line-height:1.5; max-width:30ch; }
  .hero-object .hero-cta{ margin-top:26px; gap:10px; flex-wrap:nowrap; }
  .hero-object .hero-cta .btn{ padding:14px 20px; font-size:.78rem; flex:0 1 auto; }

  .hero-object .hero-figure{
    position:absolute;
    right:-16%;
    bottom:0;
    width:124%;
    height:34svh;
    margin:0;
  }
  .hero-object .hero-bg{
    -webkit-mask-image:linear-gradient(180deg, #000 92%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 92%, transparent 100%);
  }
}

/* funde na cor exata da secção seguinte, para não haver linha de corte */
.hero::before{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  z-index:1;
  height:min(22vh,200px);
  background:linear-gradient(180deg, transparent 0%, var(--espresso-deep) 94%);
  pointer-events:none;
}

@media (max-width:900px){
  .hero-split .hero-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-split .hero-figure{ aspect-ratio:16/10; order:2; }
  .hero-split .hero-content{ order:1; }
  .hero-split, .hero-bleed{ min-height:auto; padding-block:140px 56px; }
  .hero-bleed{ min-height:76vh; }
  .hero-bleed .hero-content{ max-width:none; }
}

/* Cascata de entrada. Começa escondida só quando há JS (html.js): sem script a
   hero aparece inteira e parada, nunca presa em opacity:0. */
html.js .hero-content > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.js .hero.is-revealed .hero-content > *{ opacity:1; transform:translateY(0); }
html.js .hero.is-revealed .hero-content > *:nth-child(2){ transition-delay:.12s; }
html.js .hero.is-revealed .hero-content > *:nth-child(3){ transition-delay:.24s; }
html.js .hero.is-revealed .hero-content > *:nth-child(4){ transition-delay:.36s; }

/* Rede de segurança. Tudo acima depende de uma transição/animação correr até ao
   fim — e a linha do tempo do browser está parada enquanto o separador está
   oculto. Abrir um link do WhatsApp carrega a página em segundo plano: a
   transição nasce em currentTime 0 com fill backwards, segura o valor inicial e
   a hero fica em branco para sempre (o F5 resolvia porque aí já estava visível).
   Estas regras dão o estado final por declaração estática, sem depender de nada
   animar. O JS põe is-settled; a animação passa a ser bónus. */
html.js .hero.is-settled .hero-content > *{
  opacity:1; transform:none; transition:none;
}
html.js .hero.is-settled .hero-bg{
  opacity:1; transform:none; animation:none;
  filter:saturate(0.9) sepia(0.08) hue-rotate(-6deg) contrast(1.05);
}
html.js .hero.is-settled .hero-scroll{ opacity:1; transition:none; }

.hero-scroll{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(23,15,10,.32);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(243,236,221,.22);
  border-radius:50%;
  color:var(--cream);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.hero-scroll:hover{ border-color:var(--brass); color:var(--brass-light); }
.hero-scroll svg{ width:16px; height:16px; display:block; }
html.js .hero-scroll{ opacity:0; transition:opacity .7s ease .5s, border-color .2s ease, color .2s ease; }
html.js .hero.is-revealed .hero-scroll{ opacity:1; }
.hero-scroll svg{ animation:hero-cue 2.6s ease infinite; }
@keyframes hero-cue{ 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(4px);opacity:1} }
.hero h1{
  font-family:var(--ff-body);
  font-size:clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  text-wrap:balance;
  color:var(--cream);
}
.hero p.lede{
  margin-top:24px;
  max-width:460px;
  color:var(--muted);
  font-size:1.02rem;
}
.hero-cta{
  margin-top:36px;
  display:flex;
  align-items:center;
  /* alinha com o texto da coluna; era center e ganhava à regra da hero por vir
     depois no ficheiro, o que deixava os botões descolados do título */
  justify-content:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
/* Os dois botões têm o mesmo peso — é isso que faltava, não o formato. O raio
   continua sendo o --radius:2px do sistema (DESIGN_SYSTEM.md: "não pill"). */
.hero-cta .btn{ padding:17px 34px; }
.btn-glass{
  background:rgba(23,15,10,.34);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.hero-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--cream);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(243,236,221,.4);
  transition:color .2s ease, text-decoration-color .2s ease;
}
.hero-link:hover{ text-decoration-color:var(--brass); color:var(--brass-light); }

@media (prefers-reduced-motion: reduce){
  html.js .hero-bg{ animation:none; filter:saturate(0.9) sepia(0.08) hue-rotate(-6deg) contrast(1.05); transform:none; opacity:1; }
  html.js .hero-content > *{ transition:none; opacity:1; transform:none; }
  html.js .hero-scroll{ transition:none; opacity:1; }
  .hero-scroll svg{ animation:none; }
}
.bg-video,
.about-strip .cell,
.video-panel,
.workshop-block .photo img,
.process-panel img{
  filter: saturate(0.88) sepia(0.14) hue-rotate(-8deg) contrast(1.03);
}
.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.about-hero,
.page-hero,
.video-panel{ position:relative; overflow:hidden; }
.about-hero .bg-video,
.page-hero .bg-video{ object-position:center 35%; }
.about-hero > .container,
.page-hero > .container{ position:relative; z-index:2; }
.about-hero::after,
.page-hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(23,15,10,.35) 0%, rgba(23,15,10,.72) 75%, rgba(23,15,10,.9) 100%);
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius:var(--radius);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.btn:hover::before{ transform:scaleX(1); }
.btn-primary{
  background:var(--brass);
  color:var(--espresso-deep);
  transition:color .3s ease .05s, transform .25s ease;
}
.btn-primary::before{ background:var(--cream); }
.btn-primary:hover{ color:var(--espresso-deep); transform:translateY(-2px); }
.btn-ghost{
  border-color:rgba(243,236,221,.4);
  color:var(--cream);
  transition:color .3s ease .05s, border-color .2s ease;
}
.btn-ghost::before{ background:var(--brass); transform-origin:right; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--espresso-deep); }
/* ---------- sections ---------- */
section{padding:112px 0;}
.section-dark{
  background:var(--espresso);
  color:var(--cream);
}
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.section-head p{
  margin-top:18px;
  color:var(--muted);
  font-size:1.02rem;
}
.section-dark .section-head p{color:var(--muted);}
.section-light .section-head p{color:var(--muted-dark);}

/* ---------- principles (was pillars — sem cards, ritmo editorial) ---------- */
.principles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
}
.principle{
  border-top:2px solid var(--brass);
  padding-top:26px;
}
.principle h3{
  font-size:1.35rem;
  letter-spacing:-0.01em;
  color:var(--cream);
}
.principle h3 span{display:block;color:var(--brass-light);font-size:.95rem;margin-top:2px;}
.principle p{
  margin-top:16px;
  color:var(--muted);
  font-size:.95rem;
}

/* footer */
.site-footer{
  background:var(--espresso-deep);
  color:var(--muted);
  padding:80px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
}
.footer-grid .logo{color:var(--cream);margin-bottom:18px;}
.footer-grid h4{
  color:var(--cream);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:18px;
  font-weight:600;
}
.footer-grid p{margin:0 0 8px;font-size:.92rem;}
.footer-grid a[href^="tel:"]{font-family:var(--ff-mono);}
.footer-grid a.email{color:var(--brass-light);font-family:var(--ff-mono);font-size:.88rem;}
.footer-grid a.email:hover{text-decoration:underline;text-underline-offset:3px;}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{
  width:36px;height:36px;
  border:1px solid rgba(243,236,221,.22);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.footer-social a:hover{border-color:var(--brass);background:var(--brass);color:var(--espresso-deep);}
.footer-bottom{
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:.8rem;
}
.footer-bottom a{color:var(--muted);}
.footer-bottom a:hover{color:var(--brass-light);}

/* ---------- productos ---------- */
.page-hero{
  background:var(--espresso);
  color:var(--cream);
  padding:170px 0 88px;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  z-index:1;
  right:-10%;
  top:-30%;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(184,132,60,.22), transparent 65%);
}
.page-hero h1{
  position:relative;
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing:-0.02em;
  line-height:1.1;
  text-wrap:balance;
  max-width:640px;
}
.page-hero p{
  position:relative;
  margin-top:22px;
  max-width:600px;
  color:var(--muted);
}

/* ---------- máquinas no catálogo (sem card, composição editorial) ---------- */
.machine-list{
  display:flex;
  flex-direction:column;
  gap:clamp(76px, 9vw, 132px);
}
.machine{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:clamp(28px, 5vw, 76px);
  align-items:center;
  scroll-margin-top:120px;
}
.machine:nth-child(even),
.machine.is-flipped{ grid-template-columns:.82fr 1.18fr; }
.machine:nth-child(even) .machine-art,
.machine.is-flipped .machine-art{ order:2; }
.machine-art{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.machine-art::after{
  content:"";
  position:absolute;
  left:10%; right:10%;
  bottom:-2%;
  height:26px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(36,28,21,.20), transparent 72%);
}
.machine-art img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  filter:drop-shadow(0 22px 26px rgba(20,14,8,.14));
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.machine:hover .machine-art img{ transform:translateY(-8px); }
.machine-info .eyebrow{ display:block; margin-bottom:10px; }
.machine-info h3{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing:-0.02em;
  line-height:1.05;
  color:var(--ink-dark);
}
.spec-list{
  margin-top:26px;
  display:grid;
  gap:0;
  border-top:1px solid var(--line-dark);
}
.spec-list li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:.85rem;
  color:var(--muted-dark);
  padding:11px 0;
  border-bottom:1px solid var(--line-dark);
}
.spec-list li span,
.zig-specs li span{
  font-weight:500;
  text-align:right;
  font-family:var(--ff-mono);
  font-variant-numeric:tabular-nums;
}
.spec-list li span{ color:var(--ink-dark); }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.feature-item{
  background:var(--cream);
  color:var(--ink-dark);
  padding:34px 28px;
}
.feature-item h3{ color:var(--ink-dark); }
.feature-item .icon{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--espresso);
  color:var(--brass-light);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);
  font-size:.9rem;
  font-weight:500;
  margin-bottom:18px;
}
/* O markup usa h3; estas regras estavam escritas para h4 e nunca chegaram a
   aplicar-se — os titulos caiam no h3 global (Fraunces, sem caixa alta). */
.feature-item h3{
  font-family:var(--ff-body);
  font-size:.92rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:600;
}
.feature-item p{
  margin-top:10px;
  font-size:.86rem;
  color:var(--muted-dark);
}

.video-panel{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/7;
  background-color:var(--espresso-deep);
  background-size:cover;
  background-position:center 25%;
}
.video-panel::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,15,10,.2), rgba(23,15,10,.5));
}

/* ---------- nosotros ---------- */
.about-hero{
  background:var(--espresso);
  color:var(--cream);
  padding:170px 0 72px;
}
.about-hero h1{
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing:-0.01em;
  line-height:1.35;
  text-wrap:balance;
  max-width:640px;
}
.about-hero p{
  margin-top:24px;
  max-width:680px;
  color:var(--muted);
  font-size:1.05rem;
}
.about-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  padding:0 0 96px;
}
.about-strip .cell{
  aspect-ratio:3/4;
  border-radius:var(--radius);
  background-color:var(--espresso);
  background-size:cover;
  background-position:center;
  border:1px solid var(--line);
}

.audience{
  background:var(--sand);
  color:var(--ink-dark);
  padding:96px 0;
}
.audience h2{
  font-size:clamp(1.7rem, 2.8vw, 2.2rem);
  letter-spacing:-0.02em;
  text-wrap:balance;
  max-width:600px;
}
.audience-list{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 40px;
}
.audience-list li{
  font-size:1.02rem;
  font-weight:500;
  padding-left:28px;
  position:relative;
}
.audience-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--brass);
}

/* ---------- stat strip ---------- */
/* scroll-margin: o header é fixo, sem isso a seta da hero para com a primeira
   linha da barra escondida atrás dele. */
.stat-strip{ background:var(--cream); color:var(--ink-dark); padding:0; scroll-margin-top:78px; }
.stat-strip .container{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.stat-item{
  padding:30px 24px;
  border-left:1px solid var(--line-dark);
}
.stat-item:first-child{ border-left:none; }
.stat-item .value{
  display:block;
  font-family:var(--ff-mono);
  font-size:clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight:500;
  letter-spacing:-0.01em;
}
.stat-item .label{
  display:block;
  margin-top:8px;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-dark);
}

/* ---------- workshop block ---------- */
.workshop-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.workshop-block .photo{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.workshop-block .photo img{
  width:100%; height:100%; object-fit:cover;
}
.workshop-block .text .eyebrow{ display:block; margin-bottom:14px; }
.workshop-block .text h2{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing:-0.02em;
  text-wrap:balance;
  color:var(--cream);
}
.workshop-block .text p{
  margin-top:20px;
  color:var(--muted);
  font-size:1.02rem;
}

/* ---------- product zigzag ---------- */
.product-zigzag{
  display:flex;
  flex-direction:column;
  gap:88px;
}
.zigzag-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.zigzag-item:nth-child(even) .art{ order:2; }
.zigzag-item .art{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}
.zigzag-item .art::after{
  content:"";
  position:absolute;
  left:10%; right:10%;
  bottom:-2%;
  height:22px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(36,28,21,.18), transparent 72%);
}
.zigzag-item .art img{
  position:relative;
  z-index:1;
  width:100%; height:auto;
  filter:drop-shadow(0 20px 24px rgba(20,14,8,.14));
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.zigzag-item:hover .art img{ transform:translateY(-6px); }
.zigzag-item .info h3{
  margin-top:6px;
  font-size:clamp(1.6rem, 2.8vw, 2.1rem);
  letter-spacing:-0.01em;
  color:var(--ink-dark);
}
.zig-specs{
  margin-top:22px;
  display:grid;
  gap:10px;
  max-width:360px;
}
.zig-specs li{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.85rem;
  color:var(--muted-dark);
  padding-bottom:10px;
  border-bottom:1px solid var(--line-dark);
}
.zig-specs li span{ color:var(--ink-dark); }
.link-more{
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-dark);
  border-bottom:1px solid var(--brass);
  padding-bottom:2px;
  transition:opacity .2s ease;
}
.link-more:hover{ opacity:.6; }

/* ---------- process panel ---------- */
.process-panel{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/8;
}
.process-panel img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(0.88) sepia(0.14) hue-rotate(-8deg) contrast(1.03);
}
.process-panel-wrap{ margin:0; }
.process-panel-wrap figcaption{
  margin-top:20px;
  max-width:640px;
  font-size:.92rem;
  color:var(--muted-dark);
}

/* ---------- testimonial ---------- */
.testimonial{ max-width:720px; }
.testimonial .stars{
  display:block;
  margin-bottom:22px;
  color:var(--brass);
  letter-spacing:.2em;
  font-size:.9rem;
}
.testimonial blockquote{
  margin:0;
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  line-height:1.4;
  letter-spacing:-0.005em;
  text-wrap:balance;
}
.testimonial cite{
  display:block;
  margin-top:22px;
  font-style:normal;
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--muted);
  font-weight:600;
}

/* ---------- cta band ---------- */
.cta-band{
  background:var(--sand);
  color:var(--ink-dark);
}
.cta-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-band .eyebrow{ color:var(--muted-dark); }
.cta-band h2{
  font-size:clamp(1.6rem, 2.8vw, 2.1rem);
  letter-spacing:-0.02em;
  text-wrap:balance;
  max-width:460px;
}
.cta-band p{
  margin-top:10px;
  color:var(--muted-dark);
  max-width:420px;
}

.channels{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  min-width:320px;
}
.channel{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(243,236,221,.4);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.channel:hover{ border-color:var(--brass); transform:translateY(-2px); background:rgba(243,236,221,.7); }
.channel svg{ width:20px; height:20px; color:var(--ink-dark); }
.channel small{ display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-dark); }
.channel strong{ display:block; font-size:.92rem; font-weight:600; color:var(--ink-dark); }
.channel[href^="tel:"] strong{ font-family:var(--ff-mono); font-weight:500; }

@media (max-width:700px){
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .channels{ grid-template-columns:1fr; min-width:0; width:100%; }
}

/* ---------- faq accordion ---------- */
.faq-list{
  border-top:1px solid var(--line-dark);
  max-width:820px;
}
.faq-item{
  border-bottom:1px solid var(--line-dark);
  padding:22px 0;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:var(--ff-display);
  font-weight:500;
  font-size:1.08rem;
  color:var(--ink-dark);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  color:var(--ink-dark);
  transition:transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.faq-item summary:hover::after{ border-color:var(--ink-dark); }
.faq-item[open] summary::after{
  content:"+";
  transform:rotate(45deg);
  background:var(--brass);
  color:var(--espresso-deep);
  border-color:var(--brass);
}
.faq-item p{
  margin:16px 0 0;
  max-width:640px;
  color:var(--muted-dark);
  font-size:.95rem;
  line-height:1.7;
  animation:faq-open .25s ease;
}
@keyframes faq-open{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- intro gate ---------- */
/* Sem JS a intro nunca aparece — o site tem que abrir mesmo se o script falhar. */
.intro-gate{ display:none; }
html.js .intro-gate{
  display:block;
  position:fixed;
  inset:0;
  z-index:1000;
}
html.intro-active{ overflow:hidden; height:100%; }
.intro-gate[hidden]{ display:none !important; }

.intro-veil{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(ellipse at 50% 55%, rgba(23,15,10,.35), var(--espresso) 78%),
    url('../assets/real/intro-texture.jpg');
  background-size:cover;
  background-position:center;
  transform-origin:top center;
  transition:transform .62s cubic-bezier(.76,0,.24,1);
}
.intro-gate.is-closing .intro-veil{ transform:translateY(-101%); }

.intro-core{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 24px;
  text-align:center;
  pointer-events:none;
}
.intro-eyebrow{
  font-family:var(--ff-body); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  opacity:0;
  animation:intro-line-in .5s ease .12s forwards;
}
.intro-gate.is-closing .intro-eyebrow{ opacity:0; }
.intro-mark{
  display:block;
  height:clamp(30px, 5.4vw, 52px);
  width:clamp(170px,28vw,300px);
  background:var(--brass-light);
  -webkit-mask-image:url('../assets/real/logo-lanorma.png');
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-image:url('../assets/real/logo-lanorma.png');
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  /* clip-path revela o wordmark da esquerda pra direita */
  clip-path:inset(0 100% 0 0);
  animation:intro-reveal .72s cubic-bezier(.22,.8,.2,1) .3s forwards;
  transition:transform .62s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
@keyframes intro-reveal{
  from{ clip-path:inset(0 100% 0 0); }
  to{ clip-path:inset(0 0 0 0); }
}
/* Segundo gesto: uma régua brass atravessa por baixo do wordmark depois que ele
   termina de aparecer. Sem ela a intro é um elemento só no escuro — foi o que
   o RC Arcade resolveu com a régua vermelha dele. Posicionada por JS, porque a
   largura do wordmark vem de um clamp() e só existe em pixel em tempo de tela. */
.intro-rule{
  position:absolute;
  height:2px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.8,.2,1), opacity .35s ease;
}
.intro-rule.is-drawn{ transform:scaleX(1); }
.intro-gate.is-closing .intro-rule{ opacity:0; }
@keyframes intro-line-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.intro-skip{
  position:absolute;
  top:24px; right:26px;
  z-index:3;
  background:none;
  border:1px solid rgba(243,236,221,.26);
  color:var(--muted);
  font-family:var(--ff-body);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  opacity:0;
  animation:intro-line-in .4s ease .5s forwards;
  transition:border-color .2s ease, color .2s ease;
}
.intro-skip:hover{ border-color:var(--brass-light); color:var(--brass-light); }
.intro-gate.is-closing .intro-skip{ opacity:0; animation:none; }

@media (prefers-reduced-motion: reduce){
  .intro-mark{ animation:none; clip-path:none; }
  .intro-rule{ transition:none; transform:scaleX(1); }
  .intro-eyebrow, .intro-skip{ animation:none; opacity:1; }
  .intro-veil{ transition:opacity .3s ease; }
  .intro-gate.is-closing .intro-veil{ transform:none; opacity:0; }
  .intro-gate.is-closing .intro-mark{ transition:opacity .3s ease; opacity:0; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr;}
  .machine,
  .machine:nth-child(even),
  .machine.is-flipped{grid-template-columns:1fr; gap:24px;}
  .machine:nth-child(even) .machine-art,
  .machine.is-flipped .machine-art{order:initial;}
  .machine-list{gap:72px;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .about-strip{grid-template-columns:repeat(3,1fr);}
  .audience-list{grid-template-columns:1fr;}
  .principles{grid-template-columns:1fr; gap:32px;}
  .hero-content{padding-bottom:64px;}
  .workshop-block{grid-template-columns:1fr; gap:32px;}
  .zigzag-item{grid-template-columns:1fr;}
  .zigzag-item:nth-child(even) .art{order:initial;}
  .product-zigzag{gap:56px;}
  .stat-strip .container{grid-template-columns:repeat(2,1fr);}
  .stat-item:nth-child(2n+1){border-left:none;}
  .stat-item:nth-child(n+3){border-top:1px solid var(--line-dark);}
  /* A casca volta a ser caixa e vira ela mesma o painel: as duas navs ficam
     empilhadas dentro, e o header sobra com logo ao centro + botão. */
  /* O painel é position:fixed, então sai da grade. Sem fixar as colunas, o logo
     cairia na coluna 1 e deixaria de estar no centro. */
  .site-header .logo{grid-column:2;}
  .site-header .nav-toggle{grid-column:3;}
  /* O topbar tem 34px fixos e overflow:hidden. Com as redes dentro, o aviso e o
     telefone quebravam em duas linhas e ficavam cortados. As redes saem aqui —
     continuam no rodapé, que no celular é onde se procura por elas. */
  .topbar-social{display:none;}
  .nav-panel{
    display:block;
    position:fixed;
    inset:0 0 0 auto;
    width:78%;
    max-width:340px;
    background:var(--espresso);
    padding:120px 32px 32px;
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
  }
  .nav-panel.open{transform:translateX(0);}
  /* O justify-self que centra o logo no desktop continua valendo aqui dentro e
     empurrava Formación/Contacto pra direita do painel. */
  .site-header .nav-left,
  .site-header .nav-right{justify-self:stretch;}
  .main-nav ul{flex-direction:column;gap:26px;align-items:flex-start;}
  .site-header .nav-right ul{margin-top:26px;}
  .nav-toggle{display:block;}
}
@media (max-width:600px){
  .about-strip{grid-template-columns:repeat(2,1fr);}
  section{padding:80px 0;}
  .hero-bg{ object-position:62% 40%; }
  .hero-content{padding:0 24px 56px;}
  .topbar-phone .label{display:none;}
  .machine-list{gap:60px;}
  .whatsapp-fab{ width:52px; height:52px; right:16px; bottom:16px; }
  .whatsapp-fab svg{ width:26px; height:26px; }
}

/* ---------- whatsapp fab ---------- */
.whatsapp-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:500;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25d366;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(23,15,10,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-fab:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(23,15,10,0.4);
}
.whatsapp-fab svg{
  width:30px;
  height:30px;
  fill:#fff;
}

/* ---------- impressao / PDF ----------
   O site e feito para ecra; isto existe so para o PDF de recurso, quando nao ha
   servidor a correr. Nao toca em nada do que se ve no browser.
   Fica no FIM da folha de proposito: declarado antes, perdia para os @media de
   largura por ordem de origem (a pagina impressa e estreita em px e dispararia
   o layout de movel). */
/* ---- Entrada ao rolar ----
   Só existe com html.js: sem script nada fica escondido. E o JS tem failsafe,
   porque já nos aconteceu uma hero ficar permanentemente em branco por depender
   de uma animação correr. A regra desta casa: visibilidade nunca depende de
   movimento. */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
html.js [data-reveal].is-in{ opacity:1; transform:none; }
/* Estado terminal estático, igual ao is-settled da hero. Sem isto, is-in só
   chega ao destino se a transição correr -- e com o separador oculto a linha
   do tempo está parada, a transição nasce em currentTime 0 com fill backwards
   e segura o opacity:0 para sempre. Aconteceu na hero e repetiu-se aqui. */
html.js [data-reveal].reveal-done{ opacity:1; transform:none; transition:none; }
html.js [data-reveal]:nth-child(2){ transition-delay:.08s; }
html.js [data-reveal]:nth-child(3){ transition-delay:.16s; }
html.js [data-reveal]:nth-child(4){ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{ transition:none; opacity:1; transform:none; }
}

@media print{
  @page{ size:A4; margin:12mm 10mm; }

  html,body{ background:#fff; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* tudo o que so faz sentido com rato: sai */
  .intro-gate,.whatsapp-fab,.hero-scroll,.nav-toggle,.topbar{ display:none !important; }
  html.intro-active{ overflow:visible; height:auto; }

  /* o cabecalho e position:fixed — em papel passa a correr com o texto,
     senao repete-se por cima de todas as paginas */
  .header-stack,.header{ position:static !important; height:auto; }

  /* a hero comeca em opacity:0 e so o JS a revela; em papel aparece sempre */
  html.js .hero-content > *{ opacity:1 !important; transform:none !important; }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }

  section{ padding:26px 0; }
  .container{ padding:0 4px; }
  .hero{ min-height:228mm; page-break-after:always; }

  /* A folha impressa tem ~720px de largura em CSS, o que dispara o layout de
     movel e deixa tudo em coluna unica com meia pagina em branco. Aqui as
     grades voltam a ser de varias colunas na marra. */
  .stat-strip .container{ grid-template-columns:repeat(4,1fr) !important; }
  .stat-item:nth-child(n+3){ border-top:none !important; }
  .stat-item:nth-child(2n+1){ border-left:1px solid var(--line-dark) !important; }
  .stat-item:first-child{ border-left:none !important; }
  .machine{ grid-template-columns:1.18fr .82fr !important; gap:34px !important; }
  .machine:nth-child(even),
  .machine.is-flipped{ grid-template-columns:.82fr 1.18fr !important; }
  .machine:nth-child(even) .machine-art,
  .machine.is-flipped .machine-art{ order:2 !important; }
  .zigzag-item{ grid-template-columns:1fr 1fr !important; }
  .zigzag-item:nth-child(even) .art{ order:2 !important; }
  .feature-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .principles,.workshop-block,.footer-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .about-strip{ grid-template-columns:repeat(4,1fr) !important; }
  .audience-list{ grid-template-columns:repeat(2,1fr) !important; }

  /* nada de cortar uma maquina ou um bloco a meio da folha */
  .machine,.zigzag-item,.feature-item,.principle,.workshop-block,
  .stat-item,.shop-note,.article-cover{ page-break-inside:avoid; break-inside:avoid; }
  .machine-list,.product-zigzag{ gap:34px; }
  h2,h3{ page-break-after:avoid; break-after:avoid; }

  /* o URL a seguir a cada link so serve para sujar a folha */
  a[href]::after{ content:none !important; }
}