/* ============================================================
   ENVADESIVO — v3 · estilo corporativo (ref. emons.de)
   ============================================================ */

:root {
  --blue:       #29A9E1;
  --blue-dark:  #1786B7;
  --ink:        #0F1C24;
  --ink-2:      #1C2B35;
  --text:       #3D4C55;
  --mute:       #7A8890;
  --line:       #E2E7EA;
  --bg:         #FFFFFF;
  --bg-soft:    #F4F6F7;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-brand: 'Montserrat', 'Inter', system-ui, sans-serif;
  --r: 5px;
  --wrap: 1440px;
  --wrap-wide: 1720px;
  --shadow: 0 10px 40px rgba(15,28,36,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.1; letter-spacing: -0.022em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
#header .wrap, #footer .wrap { max-width: 100%; padding: 0 clamp(28px, 4vw, 90px); }

/* Páginas de produto: body transparente para o crossfade fixo ficar visível
   através das secções. Suporta browsers com :has() e também body.pg-page. */
html:has(> body > .pg-bg) { background: var(--bg); }
body:has(> .pg-bg),
body.pg-page {
  background: transparent;
}

/* Reveal (só com JS ativo) */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .12s; }
.reveal-d2 { transition-delay: .24s; }

/* ============================================================
   Botões
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r);
  font-size: .95rem;
  font-weight: 600;
  border: none;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-blue { background: var(--blue); color: #fff; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn-blue:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(41,169,225,.35); }
.btn-cta { font-size: 1.1rem; padding: 18px 44px; }
.btn-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(41,169,225,.4); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--blue); color: #fff; }
.btn-line { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-line-dark { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-line-dark:hover { border-color: var(--blue); color: var(--blue); }

/* ── Botão "Plataforma de Pedidos" ───────────────────────────
   Secundário face a "Pedir orçamento": contorno em vez de azul cheio, para
   não competir com o CTA principal de quem chega ao site pela primeira vez.
   A cor acompanha o header (transparente sobre o hero, sólido após scroll),
   tal como já acontece com os links de navegação.
   Fica escondido enquanto js/plataforma.js tiver ACTIVO: false.          */
.btn-plataforma {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-plataforma:hover { border-color: var(--blue); color: var(--blue); }
.btn-plataforma[hidden] { display: none !important; }

/* Sobre hero escuro (header transparente) — contorno claro. */
body.hero-head #header:not(.scrolled) .btn-plataforma {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
body.hero-head #header:not(.scrolled) .btn-plataforma:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
}
/* Excepção: hero claro — volta ao contorno escuro. */
body.hero-head.hero-light-top #header:not(.scrolled) .btn-plataforma {
  color: var(--ink-2);
  border-color: var(--line);
}
body.hero-head.hero-light-top #header:not(.scrolled) .btn-plataforma:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: transparent;
}

/* Espaço entre os dois botões do header. */
#header .nav > .btn + .btn { margin-left: 10px; }

/* Layout do header em 3 zonas: marca à esquerda, navegação ao centro, botões
   agrupados à direita. As margens automáticas na lista de links repartem o
   espaço livre em partes iguais dos dois lados, deixando os dois botões
   encostados um ao outro em vez de espalhados pelo cabeçalho. */
#header .nav { position: relative; }

/* Abaixo dos 1040px não há folga para ancorar ao centro da página sem chocar
   com os botões: a navegação centra-se no espaço que sobra. */
#header .nav > .nav-links { margin-left: auto; margin-right: auto; }

/* Com largura suficiente, a navegação é ancorada ao centro REAL da página —
   a marca e os botões têm larguras diferentes e, centrada só no espaço livre,
   ficava visivelmente puxada para a esquerda. Os botões passam a encostar
   à direita com o `margin-left:auto` do primeiro. */
@media (min-width: 1040px) {
  #header .nav > .nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  #header .nav > .btn-blue { margin-left: auto; }
}

/* Header responsivo: com dois botões (orçamento + plataforma) o cabeçalho
   precisa de mais largura, por isso encolhe por etapas — primeiro os espaços,
   depois o texto da marca — antes de passar ao menu de hambúrguer aos 880px. */
@media (max-width: 1240px) {
  #header .nav-links { gap: 26px; }
  #header .nav > .btn { padding: 12px 18px; font-size: .87rem; }
}
@media (max-width: 1080px) {
  #header .brand-text { display: none; }
  #header .nav-links { gap: 20px; }
  #header .nav-links a { font-size: .88rem; }
  #header .nav > .btn { padding: 11px 15px; font-size: .82rem; }
}

/* ============================================================
   Header
   ============================================================ */
#header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: background .4s ease, border-color .4s ease;
}
/* Header transparente sobre o hero (até fazer scroll) */
body.hero-head #header:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
body.hero-head #header:not(.scrolled) .brand-name { color: #fff; }
body.hero-head #header:not(.scrolled) .brand-tagline { color: rgba(255,255,255,.75); }
body.hero-head #header:not(.scrolled) .nav-links a { color: #fff; }
body.hero-head #header:not(.scrolled) .menu-btn { color: #fff; }
/* Slide claro (ex.: etiquetas em fundo branco) — texto do header escuro */
body.hero-head.hero-light-top #header:not(.scrolled) .brand-name { color: var(--blue); }
body.hero-head.hero-light-top #header:not(.scrolled) .brand-tagline { color: var(--mute); }
body.hero-head.hero-light-top #header:not(.scrolled) .nav-links a { color: var(--ink-2); }
body.hero-head.hero-light-top #header:not(.scrolled) .menu-btn { color: var(--ink); }

/* Cabeçalho SEMPRE transparente em todo o site (definitivo).
   Mantém-se a animação de encolher do logo. Texto branco com sombra para legibilidade
   sobre o hero, mas restaurado a cor normal dentro do painel dropdown branco. */
body #header { background: transparent !important; border-bottom-color: transparent !important; }
body #header .brand-name,
body #header > .wrap .nav > .nav-links > li > a { color: #fff; text-shadow: 0 1px 3px rgba(9,18,24,.6), 0 1px 8px rgba(9,18,24,.35); }
body #header .brand-tagline { color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(9,18,24,.6); }
body #header .menu-btn { color: #fff; filter: drop-shadow(0 1px 3px rgba(9,18,24,.5)); }
body #header .btn.btn-blue { box-shadow: 0 6px 20px rgba(0,0,0,.35); }
/* Dentro do painel dropdown branco, mantém as cores originais dos itens */
body #header .drop-panel a,
body #header .drop-panel a b,
body #header .drop-panel a small,
body #header .drop-panel .dp-label { color: var(--ink); text-shadow: none; }
body #header .drop-panel small { color: var(--mute); }
body #header .drop-panel .dnum { color: var(--mute); text-shadow: none; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  flex-shrink: 0;
}
.brand img {
  flex-shrink: 0;
  display: block;
  /* Maior e ligeiramente para fora do cabeçalho */
  height: 64px !important;
  width: auto;
  transform: translateY(6px);
  transition: height .3s ease, transform .3s ease;
  filter: drop-shadow(0 6px 18px rgba(15,28,36,.18));
}
#header.scrolled .brand img {
  height: 46px !important;
  transform: translateY(0);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: opacity .35s ease, transform .35s ease;
}
.brand-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: .06em;
  color: var(--blue);
}
.brand-tagline {
  font-family: var(--font-brand);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--mute);
  text-transform: uppercase;
}
#header.scrolled .brand-text {
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
}
.brand svg { color: var(--blue); flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.nav-links a:hover::after { transform: scaleX(1); }

.menu-btn { display: none; background: none; border: none; color: var(--ink); padding: 6px; }

.m-nav {
  display: none;
  position: fixed;
  top: 78px; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 99;
  padding: 34px 30px;
  flex-direction: column;
}
.m-nav.open { display: flex; }
.m-nav a {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   Hero — foto full-bleed com overlay
   ============================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
}
.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity;
}
.hero-layer.active {
  opacity: 1;
  animation: kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.08) translateX(-1.5%); }
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(9,18,24,.88) 0%, rgba(9,18,24,.45) 45%, rgba(9,18,24,.25) 100%);
  transition: background .8s ease;
}
#hero.hero-light .hero-bg { background: #fff; }
#hero.hero-light .hero-bg::after {
  background: linear-gradient(to top, rgba(9,18,24,.82) 0%, rgba(9,18,24,.35) 40%, rgba(255,255,255,.15) 100%);
}
#hero.hero-light .hero-layer { object-fit: contain; }

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 90px;
}
.hero-kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  padding: 8px 16px;
  border-radius: 3px;
  margin-bottom: 26px;
}
.hero-content h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  max-width: 800px;
  margin-bottom: 20px;
}
.hero-content h1 span { color: var(--blue); }
.hero-content p {
  color: rgba(255,255,255,.82);
  font-size: 1.15rem;
  max-width: 560px;
  margin-bottom: 38px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Transição de texto entre slides */
.hero-txt { transition: opacity .45s ease, transform .45s ease; }
.hero-txt.swap { opacity: 0; transform: translateY(14px); }

/* Navegação de slides (barras com progresso) */
.hero-nav {
  display: flex;
  gap: 14px;
  margin-top: 52px;
  flex-wrap: wrap;
}
.hero-nav button {
  background: none;
  border: none;
  text-align: left;
  color: rgba(255,255,255,.65);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 0 0;
  width: 150px;
  position: relative;
  transition: color .25s;
}
.hero-nav button::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
}
.hero-nav button .bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--blue);
  border-radius: 2px;
}
.hero-nav button.active { color: #fff; }
.hero-nav button.active .bar { animation: heroProgress 5s linear forwards; }
@keyframes heroProgress { from { width: 0; } to { width: 100%; } }
#hero.paused .hero-nav button.active .bar { animation-play-state: paused; }

/* ============================================================
   Barra de produtos numerada (ref. Emons 01–05)
   ============================================================ */
#prodbar { background: #fff; border-bottom: 1px solid var(--line); }
.prodbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.prodbar-grid a {
  padding: 26px 22px 24px;
  border-left: 1px solid var(--line);
  position: relative;
  transition: background .2s;
}
.prodbar-grid a:first-child { border-left: none; }
.prodbar-grid a::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.prodbar-grid a:hover { background: var(--bg-soft); }
.prodbar-grid a:hover::before { transform: scaleX(1); }
.prodbar-grid .num {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .1em;
  margin-bottom: 5px;
}
.prodbar-grid .lbl {
  display: block;
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

/* ============================================================
   Secções de produto
   ============================================================ */
.p-section { padding: 108px 0; }
.p-section.alt { background: var(--bg-soft); }

.p-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.p-section.flip .p-photo-col { order: 2; }

.p-photo-col { position: relative; }
.p-photo-main {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #eef1f3;
  box-shadow: var(--shadow);
}
.p-photo-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.p-photo-col:hover .p-photo-main img { transform: scale(1.05); }

.p-photo-badge {
  position: absolute;
  bottom: -24px;
  right: -20px;
  width: 200px;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: var(--shadow);
}
.p-section.flip .p-photo-badge { right: auto; left: -20px; }
.p-photo-badge img { width: 100%; height: 100%; object-fit: cover; }

.p-index {
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
  opacity: .85;
  margin-bottom: 18px;
}
.p-info h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 18px; }
.p-info .lead { font-size: 1.04rem; margin-bottom: 30px; max-width: 480px; }

/* “Num relance” — tabela de factos */
.glance {
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  margin-bottom: 34px;
}
.glance-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.glance dl { display: block; }
.glance .row {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid #CDD4D9;
}
.glance dt { font-size: .9rem; color: var(--mute); }
.glance dd { font-size: .95rem; font-weight: 700; color: var(--ink); text-align: right; }

.p-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   Banda de estatísticas / secções neutras
   ============================================================ */
.stats-head { max-width: 640px; margin-bottom: 60px; }
.stats-head .kicker { margin-bottom: 12px; }
.stats-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 16px; }
.stats-head p { color: var(--mute); font-size: 1.05rem; }

/* ============================================================
   Clientes — logotipos em carrossel
   ============================================================ */
#clientes {
  padding: 96px 0 72px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.logo-strip {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 96px;
  padding: 32px 0;
  width: max-content;
  animation: logoScroll 48s linear infinite;
}
.logo-strip:hover .logo-track { animation-play-state: paused; }
.logo-item {
  flex: 0 0 auto;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-item img {
  max-height: 100%;
  max-width: 230px;
  width: auto;
  object-fit: contain;
  /* mix-blend-mode multiply "elimina" fundos brancos dos PNGs */
  mix-blend-mode: multiply;
  transition: transform .3s ease;
}
.logo-item:hover img { transform: scale(1.08); }
@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Benefícios — 5 pilares
   ============================================================ */
#beneficios {
  padding: 96px 0 108px;
  background: var(--bg-soft);
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.benefit-cell {
  position: relative;
  padding: 44px 26px 30px;
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.benefit-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(15,28,36,.10);
  border-color: transparent;
}
.benefit-num {
  position: absolute;
  top: -10px;
  right: 14px;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 6.2rem;
  line-height: 1;
  color: var(--line);
  letter-spacing: -.04em;
  pointer-events: none;
  transition: color .3s ease;
}
.benefit-cell:hover .benefit-num { color: rgba(41,169,225,.14); }
.benefit-ic {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(41,169,225,.10);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.benefit-cell h3 {
  position: relative;
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--ink);
}
.benefit-cell p {
  position: relative;
  font-size: .9rem;
  color: var(--mute);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Redes sociais
   ============================================================ */
.social-row {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.social-btn {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.social-btn svg { position: relative; z-index: 2; }
.social-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  transform: scale(1);
  z-index: 1;
}
.social-btn.linkedin::before { background: linear-gradient(135deg, #0077B5 0%, #00A0DC 100%); }
.social-btn.facebook::before { background: linear-gradient(135deg, #1877F2 0%, #3B5998 100%); }
.social-btn.instagram::before { background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%); }
.social-btn:hover {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow: 0 14px 30px rgba(15,28,36,.20);
}
.social-btn:hover::before { transform: scale(1.15); }
.social-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(25deg) translateX(-200%);
  transition: transform .7s ease;
  z-index: 2;
}
.social-btn:hover::after { transform: rotate(25deg) translateX(400%); }

/* ============================================================
   Sobre
   ============================================================ */
#sobre { padding: 108px 0; }
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.kicker {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.sobre-grid h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 20px; }
.sobre-grid p { margin-bottom: 16px; }

.sobre-list { margin-top: 28px; border-top: 2px solid var(--ink); }
.sobre-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
}
.sobre-list svg { color: var(--blue); flex-shrink: 0; }

.sobre-photo {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
}
.sobre-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Slideshow de fotos no "Sobre" */
.sobre-photo.slideshow { position: relative; }
.sobre-photo.slideshow img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.sobre-photo.slideshow img.active { opacity: 1; }

/* ============================================================
   Orçamento
   ============================================================ */
#orcamento {
  position: relative;
  padding: 108px 0;
  background: var(--ink);
}
#orcamento::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/images/ENVADESIVO-26.jpg') center/cover;
  opacity: .07;
  pointer-events: none;
}
.quote-grid {
  position: relative;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: stretch;
}
.quote-intro { display: flex; flex-direction: column; justify-content: center; }
.quote-intro h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 18px; }
.quote-intro p { color: rgba(255,255,255,.7); margin-bottom: 36px; }

.q-list { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.q-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: start;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.q-list b { color: rgba(255,255,255,.55); font-size: .85rem; font-weight: 600; }
.q-list span { color: #fff; font-weight: 700; font-size: .95rem; }

.q-form {
  position: relative;
  border-radius: var(--r);
  padding: 44px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  background: #fff;
  overflow: hidden;
}
.q-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orc-bg, none) center/cover no-repeat;
  opacity: .08;
  pointer-events: none;
  border-radius: var(--r);
}
.q-form > * { position: relative; }
.q-form h3 { font-size: 1.3rem; margin-bottom: 24px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: .84rem; font-weight: 700; color: var(--ink); }
.f-field label i { color: var(--blue); font-style: normal; }
.f-field input, .f-field select, .f-field textarea {
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-size: .93rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(41,169,225,.14);
}
.f-field textarea { resize: vertical; min-height: 110px; }
.f-field[hidden] { display: none; }

.drop {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: var(--bg-soft);
  padding: 24px;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.drop:hover, .drop.over { border-color: var(--blue); background: #EAF6FC; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop p { font-size: .88rem; }
.drop p b { color: var(--blue); }
.drop small { font-size: .74rem; color: var(--mute); }

.f-files { margin-top: 10px; display: grid; gap: 6px; }
.f-file {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: var(--r);
}
.f-file svg { color: var(--blue); }
.f-file button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--mute);
  line-height: 1;
}
.f-file button:hover { color: #C33; }

.f-alert {
  display: none;
  padding: 14px 18px;
  border-radius: var(--r);
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.f-alert.ok  { display: block; background: #E5F8EF; color: #127347; border: 1px solid #B5EAD2; }
.f-alert.err { display: block; background: #FDEBEB; color: #A32626; border: 1px solid #F5C6C6; }

.f-submit { margin-top: 24px; }
.f-note { text-align: center; font-size: .78rem; color: var(--mute); margin-top: 12px; }

/* ============================================================
   Footer
   ============================================================ */
#footer { background: #0B151C; color: rgba(255,255,255,.55); padding: 70px 0 36px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 54px;
  margin-bottom: 54px;
}
.foot-grid .brand { color: #fff; margin-bottom: 18px; }
.foot-grid .brand-name { color: #fff; }
.foot-grid .brand-tagline { color: rgba(255,255,255,.4); }
.foot-grid p { font-size: .9rem; max-width: 300px; }
.foot-call-cost {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  margin-top: 5px;
  line-height: 1.4;
  font-style: normal;
}
.q-call-cost {
  display: block;
  font-size: .72rem;
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.4;
  font-style: normal;
}
.foot-col h4 {
  color: #fff;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.foot-col li { margin-bottom: 12px; }
.foot-col a { font-size: .9rem; transition: color .2s; }
.foot-col a:hover { color: var(--blue); }
.foot-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 22px 0;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}
.foot-social-label {
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-right: 6px;
}
.foot-social .social-btn { width: 44px; height: 44px; border-radius: 12px; }

.foot-base {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
}

/* ============================================================
   Scroll top
   ============================================================ */
#toTop {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 48px; height: 48px;
  border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: .25s;
  z-index: 90;
}
#toTop.show { opacity: 1; pointer-events: auto; transform: none; }
#toTop:hover { background: var(--blue-dark); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .p-grid, .sobre-grid, .quote-grid { gap: 50px; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .stat-cell:nth-child(-n+2) { margin-bottom: 10px; }
  .benefit-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-item { height: 46px; }
  .logo-track { gap: 44px; }
}
@media (max-width: 480px) {
  .benefit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .nav-links, .nav > .btn-blue, .nav > .btn-plataforma { display: none; }
  .menu-btn { display: block; }

  #hero { min-height: 74vh; }
  .hero-content { padding-bottom: 60px; }

  .prodbar-grid { grid-template-columns: 1fr 1fr; }
  .prodbar-grid a { border-top: 1px solid var(--line); }

  .p-section { padding: 72px 0; }
  .p-grid { grid-template-columns: 1fr; gap: 56px; }
  .p-section.flip .p-photo-col { order: 0; }
  .p-photo-badge { width: 150px; bottom: -18px; right: 0; }
  .p-section.flip .p-photo-badge { left: 0; }
  .p-index { font-size: 3.4rem; }

  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-photo { aspect-ratio: 4/3; }

  .quote-grid { grid-template-columns: 1fr; gap: 46px; }
  .q-form { padding: 30px; }
  .f-grid { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-cell { padding: 8px 20px 4px; }

  .foot-grid { grid-template-columns: 1fr; gap: 38px; }
  .foot-base { flex-direction: column; gap: 10px; }
}

/* ============================================================
   Dropdown de produtos (mega menu)
   ============================================================ */
.has-drop { position: relative; }
.drop-trigger { display: inline-flex; align-items: center; gap: 7px; }
.drop-trigger svg { transition: transform .25s; }
.has-drop:hover .drop-trigger svg,
.has-drop.open .drop-trigger svg { transform: rotate(180deg); }

/* ponte invisível para o rato não "cair" no espaço entre o menu e o painel */
.has-drop::before {
  content: '';
  position: absolute;
  top: 100%; left: -60px; right: -60px;
  height: 26px;
}

.drop-panel {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 660px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(15,28,36,.20);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  z-index: 200;
}
.has-drop:hover .drop-panel,
.has-drop.open .drop-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.drop-list { padding: 14px; display: flex; flex-direction: column; }
.drop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 6px;
  transition: background .2s;
}
.has-drop:hover .drop-item,
.has-drop.open .drop-item { animation: dropIn .45s cubic-bezier(.16,1,.3,1) both; }
.has-drop:hover .drop-item:nth-child(2), .has-drop.open .drop-item:nth-child(2) { animation-delay: .06s; }
.has-drop:hover .drop-item:nth-child(3), .has-drop.open .drop-item:nth-child(3) { animation-delay: .12s; }
.has-drop:hover .drop-item:nth-child(4), .has-drop.open .drop-item:nth-child(4) { animation-delay: .18s; }
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.drop-item .dnum {
  font-size: .72rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: .08em;
  width: 26px;
  flex-shrink: 0;
}
.drop-item b { display: block; font-size: .93rem; color: var(--ink); line-height: 1.3; }
.drop-item small { display: block; font-size: .78rem; color: var(--mute); font-weight: 400; }
.drop-item .darr {
  margin-left: auto;
  color: var(--blue);
  opacity: 0;
  transform: translateX(-8px);
  transition: .22s;
  flex-shrink: 0;
}
.drop-item:hover { background: var(--bg-soft); }
.drop-item:hover .darr { opacity: 1; transform: none; }

.drop-preview { position: relative; background: var(--bg-soft); min-height: 280px; }
.drop-preview img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.drop-preview img.show { opacity: 1; }
.drop-preview .dp-label {
  position: absolute;
  bottom: 12px; left: 12px;
  z-index: 2;
  background: rgba(255,255,255,.94);
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

@media (max-width: 880px) {
  .drop-panel { display: none; }
}

/* ============================================================
   Homepage — modo apresentação
   ============================================================ */
.p-info .lead-short { font-size: 1.05rem; margin-bottom: 30px; max-width: 460px; }

/* ============================================================
   Páginas de produto
   ============================================================ */
.pg-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--pg-bg-color, var(--ink));
}
.pg-bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}
.pg-bg img.active { opacity: 1; }
/* Sem overlay — a imagem de fundo fica limpa. A leitura do hero é
   garantida pelo gradiente local em .pg-hero. */

.pg-hero {
  padding: 168px 0 80px;
  color: #fff;
  position: relative;
  /* Sem overlay — a foto de fundo fica limpa. A leitura do texto é
     garantida por text-shadow em vez de escurecer a imagem toda. */
}
.pg-hero .crumb { text-shadow: 0 1px 10px rgba(9,18,24,.75); }
.pg-hero .p-index { text-shadow: 0 2px 24px rgba(9,18,24,.55); }
.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-bottom: 22px;
}
.crumb a:hover { color: var(--blue); }
.crumb .sep { opacity: .5; }
.pg-hero .p-index { -webkit-text-stroke-color: var(--blue); opacity: 1; }
.pg-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 18px; max-width: 700px; text-shadow: 0 2px 22px rgba(9,18,24,.6), 0 1px 4px rgba(9,18,24,.5); }
.pg-hero p { color: #fff; font-size: 1.12rem; max-width: 560px; margin-bottom: 34px; text-shadow: 0 1px 14px rgba(9,18,24,.7), 0 1px 3px rgba(9,18,24,.55); }

.pg-section { padding: 26px 0; position: relative; }
.pg-spacer { height: 20vh; }

.pg-card {
  background: #fff;
  border-radius: 8px;
  padding: 54px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}
.pg-card > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.pg-card > .sub { color: var(--mute); font-size: .95rem; margin-bottom: 14px; }

/* Tabela de medidas */
.size-table { width: 100%; border-collapse: collapse; }
.size-table th {
  text-align: left;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 2px solid var(--ink);
  padding: 12px 14px;
}
.size-table td { padding: 15px 14px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.size-table td b { color: var(--ink); }
.size-table tbody tr { transition: background .15s; }
.size-table tbody tr:hover { background: var(--bg-soft); }
.table-note { font-size: .8rem; color: var(--mute); margin-top: 14px; }
.table-scroll { overflow-x: auto; }

/* Aplicações */
.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.app {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color .2s, transform .2s;
}
.app:hover { border-color: var(--blue); transform: translateY(-2px); }
.app svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.app b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 3px; }
.app p { font-size: .86rem; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px 0;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.faq-q:hover { color: var(--blue); }
.faq-q svg { transition: transform .3s; color: var(--blue); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 0 20px; font-size: .93rem; max-width: 640px; }

/* Galeria */
.gal-main {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #eef1f3;
}
.gal-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.gal-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.gal-thumbs button {
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  background: #eef1f3;
  aspect-ratio: 4/3;
  transition: border-color .2s, opacity .2s;
  opacity: .75;
}
.gal-thumbs button:hover { opacity: 1; }
.gal-thumbs button.active { border-color: var(--blue); opacity: 1; }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Relacionados */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rel-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.rel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.rel-card .rel-img { aspect-ratio: 16/10; overflow: hidden; background: #eef1f3; }
.rel-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.rel-card:hover img { transform: scale(1.06); }
.rel-body { padding: 20px 22px 22px; }
.rel-body .num { font-size: .72rem; font-weight: 800; color: var(--blue); letter-spacing: .1em; }
.rel-body b { display: block; color: var(--ink); font-size: 1rem; margin: 4px 0 8px; }
.rel-body span { font-size: .85rem; font-weight: 700; color: var(--blue); }

/* ============================================================
   Páginas simples (Sobre, Contactos, Orçamento)
   ============================================================ */
.page-hero {
  background:
    linear-gradient(180deg, rgba(15,28,36,.55) 0%, rgba(15,28,36,.85) 100%),
    var(--ph-bg, none) center/cover no-repeat,
    var(--ink);
  padding: 150px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero .wrap { position: relative; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 14px; }
.page-hero p { color: rgba(255,255,255,.75); font-size: 1.08rem; max-width: 620px; }

.page-body { padding: 72px 0 90px; }

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 54px;
  align-items: start;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 28px;
  margin-bottom: 18px;
  display: flex;
  gap: 18px;
  box-shadow: 0 12px 32px rgba(15,28,36,.08);
  align-items: flex-start;
  transition: border-color .2s, transform .2s;
}
.contact-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.contact-card svg { color: var(--blue); flex-shrink: 0; margin-top: 3px; }
.contact-card b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.contact-card p, .contact-card a { font-size: .95rem; color: var(--text); }
.contact-card a:hover { color: var(--blue); }
.contact-card small { display: block; font-size: .76rem; color: var(--mute); margin-top: 4px; }
.map-embed {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #eef1f3;
}
.map-embed iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .map-embed iframe { min-height: 340px; }
  .page-hero { padding: 130px 0 48px; }
}

/* Orçamento com background do produto */
.pg-orcamento {
  position: relative;
  padding: 60px 0;
}
.pg-orcamento .pg-card {
  position: relative;
}
/* Nas páginas de produto, a secção de orçamento é transparente para
   deixar passar o fundo fixo da página (o #orcamento genérico, usado na
   homepage, mantém o seu fundo escuro). O fundo interior do formulário
   (.q-form::before) não é afetado. */
#orcamento.pg-orcamento { background: transparent; padding: 60px 0; }
#orcamento.pg-orcamento::before { display: none; }

/* Responsive páginas de produto */
@media (max-width: 880px) {
  .pg-card { padding: 28px; }
  .apps-grid { grid-template-columns: 1fr; }
  .rel-grid { grid-template-columns: 1fr; }
  .gal-thumbs { grid-template-columns: repeat(3, 1fr); }
  .pg-spacer { height: 14vh; }
}

/* ============================================================
   Marca de água (logótipo) por trás das tabelas de informação
   ============================================================ */
.pg-card.wm { position: relative; overflow: hidden; }
.pg-card.wm::before {
  content: '';
  position: absolute;
  /* Bem maior que a carta para que a rotação não deixe cantos por preencher */
  inset: -40%;
  /* Uma só camada, logótipo inclinado — leve e sem sobreposições. */
  background-image: url('../assets/images/logo-cube.png');
  background-repeat: repeat;
  background-position: center;
  background-size: 74px;
  opacity: .022;
  transform: rotate(-13deg);
  pointer-events: none;
  z-index: 0;
}
.pg-card.wm > * { position: relative; z-index: 1; }

/* ============================================================
   Personalização — texto + ícones
   ============================================================ */
.perso-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.perso-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(41,169,225,.12); color: var(--blue-dark);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.perso-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px;
}
.perso-cell {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.perso-cell:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,28,36,.08); }
.perso-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
}
.perso-cell b { display: block; color: var(--ink); font-size: .96rem; margin-bottom: 3px; }
.perso-cell p { font-size: .86rem; color: var(--text); }
.perso-foot {
  margin-top: 22px; padding: 16px 20px; border-radius: 8px;
  background: var(--bg-soft); border: 1px dashed var(--line);
  font-size: .88rem; color: var(--text);
}
.perso-foot b { color: var(--ink); }

/* ============================================================
   Tabela de medidas — botão lupa + linha clicável
   ============================================================ */
.size-table th.th-info, .size-table td.td-info { text-align: right; width: 64px; }
.sz-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--blue-dark);
  cursor: pointer; transition: all .18s;
}
.sz-info:hover { border-color: var(--blue); background: var(--blue); color: #fff; transform: scale(1.08); }
.sz-info:focus-visible { outline: 3px solid rgba(41,169,225,.4); outline-offset: 2px; }
.size-table tbody tr { cursor: pointer; }

/* ============================================================
   Modal de medidas + animação SVG (folha A4 a dobrar)
   ============================================================ */
.size-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9,18,24,.62);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.size-modal.open { opacity: 1; visibility: visible; }
.size-modal-card {
  position: relative; width: 100%; max-width: 620px;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
  transform: translateY(18px) scale(.97); opacity: 0;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s;
}
.size-modal.open .size-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.sm-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(15,28,36,.06); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  transition: background .18s;
}
.sm-close:hover { background: rgba(15,28,36,.14); }
.sm-anim {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #EAF6FC 0%, #F4F6F7 100%);
  padding: 38px 24px 28px; display: grid; place-items: center;
  border-bottom: 1px solid var(--line); min-height: 360px;
}
.sm-anim::before {
  content: '';
  position: absolute; inset: -40%;
  background: url('../assets/images/logo-cube.png') repeat center;
  background-size: 62px;
  opacity: .05;
  transform: rotate(-13deg);
  pointer-events: none;
  z-index: 0;
}
.sm-anim > * { position: relative; z-index: 1; }
.sm-anim svg { width: 100%; max-width: 340px; height: auto; }
.sm-body { padding: 24px 28px 28px; }
.sm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sm-badge {
  display: inline-grid; place-items: center; min-width: 46px; height: 30px; padding: 0 12px;
  background: var(--ink); color: #fff; border-radius: 6px; font-weight: 800; font-size: .95rem;
}
.sm-head h3 { font-size: 1.12rem; color: var(--ink); }
.sm-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.sm-specs > div { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.sm-specs dt { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.sm-specs dd { font-size: .98rem; font-weight: 700; color: var(--ink); }
.sm-desc { font-size: .9rem; color: var(--text); line-height: 1.6; }

/* --- Animação HTML/CSS 3D: a folha dobra mesmo e entra no envelope --- */
.fold-stage {
  --pw: 76px; --ph: 108px;
  position: relative; width: 100%; max-width: 440px; height: 340px;
  margin: 0 auto; perspective: 1200px;
}
/* Envelope: traseira + frente da bolsa (a folha entra entre as duas) */
.env-back, .env-front {
  position: absolute; left: 50%; bottom: 36px;
  width: var(--envW); transform: translateX(-50%);
  background: #fff; border: 2.2px solid var(--ink); box-sizing: border-box; opacity: 0;
}
.fold-stage.play .env-back, .fold-stage.play .env-front { animation: cf .5s ease forwards .2s; }
.env-back, .env-front { background: #E7EEF3; }
.env-back  { height: var(--envH); border-radius: 5px; z-index: 1; }
.env-front { height: calc(var(--envH) * .78); border-radius: 0 0 5px 5px; border-top-width: 2px; z-index: 3; box-shadow: inset 0 3px 6px rgba(15,28,36,.06); }

/* Cotas */
.cote { position: absolute; opacity: 0; }
.fold-stage.play .cote { animation: cf .5s ease forwards .7s; }
.cote-w { left: 50%; transform: translateX(-50%); bottom: 20px; width: var(--envW); border-top: 1.2px solid var(--mute); }
.cote-w::before, .cote-w::after { content: ''; position: absolute; top: -4px; width: 1.2px; height: 8px; background: var(--mute); }
.cote-w::before { left: 0; } .cote-w::after { right: 0; }
.cote span { position: absolute; font: 700 12px var(--font); color: var(--ink); white-space: nowrap; }
.cote-w span { left: 50%; top: 3px; transform: translateX(-50%); }
.cote-h { bottom: 36px; left: calc(50% + var(--envW) / 2 + 12px); height: var(--envH); border-left: 1.2px solid var(--mute); }
.cote-h::before, .cote-h::after { content: ''; position: absolute; left: -4px; width: 8px; height: 1.2px; background: var(--mute); }
.cote-h::before { top: 0; } .cote-h::after { bottom: 0; }
.cote-h span { left: 6px; top: 50%; transform: translateY(-50%); }

/* Folha */
.paper {
  position: absolute; left: 50%; bottom: calc(36px + var(--envH) + 8px);
  width: var(--pw); height: var(--ph); z-index: 2;
  transform: translateX(calc(-50% + var(--px, 0px)));
  opacity: 0;
}
.paper, .pf, .pf-half, .pf-upper3 { transform-style: preserve-3d; }
.fold-stage.play .paper { animation: paperIn .45s ease forwards .95s, paperEnter 1.05s cubic-bezier(.4,0,.25,1) forwards 3.65s; }
.pf { position: absolute; background: #fff; border: 1.5px solid var(--ink); box-sizing: border-box; box-shadow: 0 1px 5px rgba(15,28,36,.16); }

/* Geometria das faces / dobras */
.pf-full  { inset: 0; }
.pf-base  { left: 0; bottom: 0; width: var(--pw); height: calc(var(--ph) / 2); }
.pf-top   { left: 0; top: 0; width: var(--pw); height: calc(var(--ph) / 2); transform-origin: bottom; }
/* Quarto (C6): meio + perpendicular */
.pf-half  { position: absolute; left: 0; width: var(--pw); height: calc(var(--ph) / 2); }
.pf-half.lower { bottom: 0; }
.pf-half.upper { top: 0; transform-origin: bottom; }
.pf-col   { top: 0; height: 100%; width: 50%; }
.pf-col.l { left: 0; }
.pf-col.r { right: 0; transform-origin: left; }
/* Terços (DL): roll fold */
.pf-lower3 { left: 0; bottom: 0; width: var(--pw); height: calc(var(--ph) / 3); }
.pf-upper3 { position: absolute; left: 0; top: 0; width: var(--pw); height: calc(var(--ph) * 2 / 3); transform-origin: bottom; }
.pf-mid3   { left: 0; bottom: 0; width: var(--pw); height: 50%; }
.pf-toptop3{ left: 0; top: 0; width: var(--pw); height: 50%; transform-origin: bottom; }

/* Disparo das dobras (atraso individual via --d) */
.fold-stage.play .foldX { animation: foldX .7s cubic-bezier(.5,0,.3,1) forwards var(--d, 1.8s); }
.fold-stage.play .foldY { animation: foldY .7s cubic-bezier(.5,0,.3,1) forwards var(--d, 1.8s); }

@keyframes cf { to { opacity: 1; } }
@keyframes paperIn { to { opacity: 1; } }
@keyframes paperEnter { to { transform: translateX(calc(-50% + var(--px, 0px))) translateY(var(--slideY, 80px)); } }
@keyframes foldX { to { transform: rotateX(-172deg); } }
@keyframes foldY { to { transform: rotateY(-172deg); } }
@media (prefers-reduced-motion: reduce) {
  .fold-stage .env-back, .fold-stage .env-front, .fold-stage .cote, .fold-stage .paper { opacity: 1; }
  .fold-stage .foldX, .fold-stage .foldY, .fold-stage .paper { animation: none !important; }
}

/* ============================================================
   Formulário de orçamento — segmentos, stepper, personalização
   ============================================================ */
.q-block {
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 18px 18px 20px; margin-bottom: 20px; background: rgba(244,246,247,.55);
}
.q-block > .q-legend {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 12px;
}
.seg { display: inline-flex; flex-wrap: wrap; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt span {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 999px;
  font-size: .9rem; font-weight: 700; color: var(--text); cursor: pointer; transition: all .18s; white-space: nowrap;
}
.seg-opt input:checked + span { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(41,169,225,.32); }
.seg-opt input:focus-visible + span { outline: 3px solid rgba(41,169,225,.4); outline-offset: 2px; }
.seg-opt span svg { width: 16px; height: 16px; }

.q-panel[hidden] { display: none; }
.q-panel { margin-top: 22px; animation: q-panel-in .3s ease; }
@keyframes q-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.q-hint { font-size: .78rem; color: var(--mute); margin-top: 7px; }

/* Stepper de quantidade */
.qty { display: flex; align-items: stretch; max-width: 260px; }
.qty button {
  width: 46px; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer; transition: all .15s;
}
.qty button:first-child { border-radius: var(--r) 0 0 var(--r); border-right: none; }
.qty button:last-child { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.qty button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.qty input { width: 100%; text-align: center; border-radius: 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-unit { font-size: .82rem; color: var(--mute); align-self: center; margin-left: 12px; }

/* Cores (0–6) */
.color-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot { position: relative; }
.color-dot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.color-dot span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; font-weight: 700; color: var(--text); cursor: pointer; transition: all .16s;
}
.color-dot input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }

/* Popup de sucesso */
.sent-modal {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(9,18,24,.6); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sent-modal.show { opacity: 1; visibility: visible; }
.sent-card {
  background: #fff; border-radius: 16px; padding: 40px 36px 34px; max-width: 400px; text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,.4); transform: scale(.9); transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
.sent-modal.show .sent-card { transform: scale(1); }
.sent-check { width: 84px; height: 84px; margin: 0 auto 20px; }
.sent-check circle { stroke: var(--blue); stroke-width: 4; fill: none; stroke-dasharray: 251; stroke-dashoffset: 251; }
.sent-check path { stroke: var(--blue); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.sent-modal.show .sent-check circle { animation: sc-ring .5s ease forwards; }
.sent-modal.show .sent-check path { animation: sc-tick .35s ease forwards .45s; }
@keyframes sc-ring { to { stroke-dashoffset: 0; } }
@keyframes sc-tick { to { stroke-dashoffset: 0; } }
.sent-card h3 { font-size: 1.35rem; color: var(--ink); margin-bottom: 10px; }
.sent-card p { font-size: .95rem; color: var(--text); margin-bottom: 22px; }
.sent-card .btn { width: 100%; }

/* Botão a enviar */
.btn.sending { pointer-events: none; opacity: .85; }
.btn .btn-spin {
  display: none; width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: btn-spin .6s linear infinite; margin-right: 9px; vertical-align: -3px;
}
.btn.sending .btn-spin { display: inline-block; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .perso-grid { grid-template-columns: 1fr; }
  .sm-specs { grid-template-columns: 1fr; }
  .size-modal-card { max-width: 100%; }
}

/* ============================================================
   Rolos — dois rolos a desenrolar (comum pára, o nosso continua) + contador
   ============================================================ */
.roll-stage { position: relative; width: 100%; max-width: 330px; height: 256px; margin: 0 auto; }
.roll-stage .rl-counter { position: absolute; top: 0; left: 0; right: 0; text-align: center; opacity: 0; z-index: 4; }
.roll-stage.play .rl-counter { animation: cf .4s ease forwards .3s; }
.rl-num { font: 800 32px var(--font); color: var(--blue-dark); line-height: 1; }
.rl-unit { font: 700 12px var(--font); color: var(--mute); margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }

.rl-cols { position: absolute; top: 46px; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-start; gap: 58px; }
.rl-col { display: flex; flex-direction: column; align-items: center; width: 44px; }
/* Rolo (bobina) visto de topo — anéis concêntricos + sombra = aspeto 3D */
.rl-coil {
  width: 40px; height: 40px; border-radius: 50%; border: 2.2px solid var(--ink);
  background: repeating-radial-gradient(circle at 50% 50%, #fff 0 3px, #DDE6EB 3px 5px);
  box-shadow: 0 3px 7px rgba(15,28,36,.2); z-index: 2;
}
.rl-col.ours .rl-coil { border-color: var(--blue-dark); box-shadow: 0 3px 9px rgba(41,169,225,.28); }
/* Tira de papel a desenrolar (cresce em altura) */
.rl-tape {
  width: 24px; height: 0; margin-top: -2px;
  border: 1.6px solid var(--ink); border-top: none;
  background: repeating-linear-gradient(180deg, #fff 0 5px, #EDF2F5 5px 7px);
}
.rl-tape.ours { border-color: var(--blue-dark); background: repeating-linear-gradient(180deg, #EAF6FC 0 5px, #CFE9F8 5px 7px); }
.roll-stage.play .rl-tape.common { animation: rl-unroll 1s ease forwards .8s; }
.roll-stage.play .rl-tape.ours   { animation: rl-unroll 1.8s cubic-bezier(.3,0,.2,1) forwards .8s; }
@keyframes rl-unroll { to { height: var(--len); } }
.rl-tag { margin-top: 7px; font: 800 13px var(--font); color: var(--ink); white-space: nowrap; opacity: 0; }
.rl-col.ours .rl-tag { color: var(--blue-dark); }
.rl-name { margin-top: 2px; font: 700 9px var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); opacity: 0; }
.roll-stage.play .rl-col .rl-tag  { animation: cf .4s ease forwards 1.9s; }
.roll-stage.play .rl-col .rl-name { animation: cf .4s ease forwards 2s; }
.roll-stage.play .rl-col.ours .rl-tag  { animation: cf .4s ease forwards 2.7s; }
.roll-stage.play .rl-col.ours .rl-name { animation: cf .4s ease forwards 2.8s; }
@media (prefers-reduced-motion: reduce) {
  .roll-stage .rl-counter, .roll-stage .rl-tag, .roll-stage .rl-name { opacity: 1; }
  .roll-stage .rl-tape { height: var(--len); }
}

/* Comparação de rolos — o rolo é EMPURRADO para a direita e deixa o rasto do papel */
.rollcmp { display: grid; gap: 22px; }
.rc-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 14px; }
.rc-name { font-size: .84rem; font-weight: 700; color: var(--ink); }
/* --w (inline no track) = distância que o rolo percorre / comprimento do rasto */
.rc-track { position: relative; height: 46px; --coil: 42px; }
/* Rasto de papel que fica para trás (cresce da esquerda) */
.rc-tape {
  position: absolute; left: 0; top: 10px; height: 26px; width: 0; z-index: 1;
  border: 1.6px solid var(--ink); border-left: none; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(90deg, #fff 0 5px, #EDF2F5 5px 7px);
  overflow: hidden;
}
.rc-tape.ours { border-color: var(--blue-dark); background: repeating-linear-gradient(90deg, #EAF6FC 0 5px, #CFE9F8 5px 7px); }
/* Frase centrada no papel Envadesivo */
.rc-tape.ours::after {
  content: 'O rolo com mais metros de Portugal';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 800 .68rem/1 var(--font); color: var(--blue-dark); opacity: .8;
  white-space: nowrap; pointer-events: none; letter-spacing: .015em;
}
@media (max-width: 620px) { .rc-tape.ours::after { font-size: .5rem; letter-spacing: 0; } }
/* Rolo visto de lado — círculo com furo central; viaja para a direita à frente do rasto */
.rc-coil {
  position: absolute; left: 0; top: 2px; z-index: 3;
  width: var(--coil); height: var(--coil); border-radius: 50%; border: 2.5px solid var(--ink);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 5px, transparent 5px 6px),
    repeating-radial-gradient(circle at 50% 50%, #fff 0 2px, #DDE6EB 2px 3.2px);
  box-shadow: 0 3px 8px rgba(15,28,36,.22); transform-origin: center;
}
.rc-coil::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(15,28,36,.14); pointer-events: none; }
.rc-row.ours .rc-coil { border-color: var(--blue-dark); box-shadow: 0 3px 10px rgba(41,169,225,.32); }
/* Loop ~10 s: o rasto cresce e o rolo avança à frente dele, encolhendo e rodando.
   Corre na secção "metros" da página (.reveal.in) e também dentro do popup de
   detalhe de cada medida (.pr-stage.play), onde os metros são os da linha. */
.reveal.in .rc-track .rc-tape.common,
.pr-stage.play .rc-track .rc-tape.common { animation: rc-tape-c 10s ease .2s infinite; }
.reveal.in .rc-track .rc-tape.ours,
.pr-stage.play .rc-track .rc-tape.ours   { animation: rc-tape-o 10s ease .2s infinite; }
.reveal.in .rc-row .rc-coil,
.pr-stage.play .rc-row .rc-coil          { animation: rc-roll-c 10s ease .2s infinite; }
.reveal.in .rc-row.ours .rc-coil,
.pr-stage.play .rc-row.ours .rc-coil     { animation: rc-roll-o 10s ease .2s infinite; }
@keyframes rc-tape-c { 0%,100% { width: 0; } 30% { width: var(--w); } 72% { width: var(--w); } 82% { width: 0; } }
@keyframes rc-tape-o { 0%,100% { width: 0; } 46% { width: var(--w); } 72% { width: var(--w); } 82% { width: 0; } }
@keyframes rc-roll-c {
  0%   { left: 0; transform: scale(1) rotate(0deg); }
  30%  { left: calc(var(--w) - var(--coil)); transform: scale(.52) rotate(540deg); }
  72%  { left: calc(var(--w) - var(--coil)); transform: scale(.52) rotate(540deg); }
  82%  { left: 0; transform: scale(1) rotate(0deg); }
  100% { left: 0; transform: scale(1) rotate(0deg); }
}
@keyframes rc-roll-o {
  0%   { left: 0; transform: scale(1) rotate(0deg); }
  46%  { left: calc(var(--w) - var(--coil)); transform: scale(.52) rotate(720deg); }
  72%  { left: calc(var(--w) - var(--coil)); transform: scale(.52) rotate(720deg); }
  82%  { left: 0; transform: scale(1) rotate(0deg); }
  100% { left: 0; transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-tape { width: var(--w); }
  .rc-coil { left: calc(var(--w) - var(--coil)); transform: scale(.6); }
}
.rc-tag { font-size: .95rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.rc-tag.ours { color: var(--blue-dark); }

/* ============================================================
   Selos (BPA-free / Metragem garantida)
   ============================================================ */
.seal {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: .82rem;
}
.seal svg { flex-shrink: 0; }
.seal-bpa { background: #E8F7EE; border: 1.5px solid #B5E4C6; color: #1B7A44; }
.seal-bpa svg { color: #1B944F; }
.seal-meters { background: rgba(41,169,225,.1); border: 1.5px solid rgba(41,169,225,.35); color: var(--blue-dark); }
.seal-meters svg { color: var(--blue); }
.seal-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ============================================================
   Secção "mais metros" (marketing dos metros por rolo)
   ============================================================ */
.metros-eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-dark); margin-bottom: 10px;
}
.metros-card h2 span { color: var(--blue); }
.metros-hero { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; margin: 26px 0 8px; }
.metros-big {
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff;
  border-radius: 14px; padding: 26px 24px; text-align: center;
}
.mb-num { display: block; font: 800 3.1rem/1 var(--font); color: #fff; }
.mb-num span { color: var(--blue); }
.mb-lbl { display: block; font-size: .82rem; color: rgba(255,255,255,.7); margin-top: 10px; }
.metros-compare { display: grid; gap: 14px; }
.mc-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 14px; }
.mc-name { font-size: .84rem; font-weight: 700; color: var(--ink); }
.mc-track { height: 24px; background: var(--bg-soft); border-radius: 6px; overflow: hidden; }
.mc-fill { height: 100%; border-radius: 6px; width: var(--w, 60%); }
.mc-fill.normal { background: #C9D4DB; }
.mc-fill.ours { background: linear-gradient(90deg, var(--blue), var(--blue-dark)); }
.reveal.in .mc-fill { animation: mc-grow 1.1s cubic-bezier(.3,0,.2,1); }
@keyframes mc-grow { from { width: 0; } }
.mc-val { font-size: .9rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.mc-val.ours { color: var(--blue-dark); }

.metros-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.metros-cell { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.metros-cell svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.metros-cell b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 3px; }
.metros-cell p { font-size: .84rem; color: var(--text); }
.metros-note { font-size: .76rem; color: var(--mute); margin-top: 14px; }

@media (max-width: 880px) {
  .metros-hero { grid-template-columns: 1fr; gap: 20px; }
  .metros-benefits { grid-template-columns: 1fr; }
  .mc-row { grid-template-columns: 78px 1fr auto; gap: 10px; }
}

/* ============================================================
   Popup rolos — papel em fita contínua a sair da máquina e a formar um monte
   ============================================================ */
.pr-stage {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 4px; gap: 6px;
}

/* Comparação de rolos dentro do popup de detalhe — mesma animação da página,
   com as colunas encolhidas para caber na largura do cartão. */
.rc-modal { width: 100%; }
.rc-modal .rc-row { grid-template-columns: 72px 1fr auto; gap: 9px; }
.rc-modal .rc-name { font-size: .74rem; }
.rc-modal .rc-tag { font-size: .78rem; }
.rc-modal .rc-track { height: 40px; --coil: 36px; }
.rc-modal .rc-tape { top: 8px; height: 23px; }
.rc-modal .rc-tape.ours::after { content: none; }   /* sem espaço para a frase */
.rc-modal-note {
  font-size: .78rem; line-height: 1.5; color: var(--mute);
  text-align: center; margin-top: 4px;
}
.rc-modal-note b { color: var(--ink); font-weight: 700; }
.pr-stage .rl-counter { text-align: center; opacity: 0; margin-bottom: 2px; flex-shrink: 0; }
.pr-stage.play .rl-counter { animation: cf .4s ease forwards .3s; }

.pr-svg { width: 100%; max-width: 300px; height: auto; flex: 1; overflow: visible; }

/* Sombra do monte no "chão" */
.pr-heap-sh { fill: rgba(15,28,36,.16); opacity: 0; }
.pr-stage.play .pr-heap-sh { animation: cf .7s ease forwards 1.6s; }

/* Fita de papel — dois traços: bordo (atrás) + papel (à frente) para dar espessura */
/* Fita de papel: 3 traços empilhados = bordas laterais visíveis + papel interior claro */
.pr-ribbon, .pr-ribbon-edge, .pr-ribbon-outline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pr-ribbon-outline { stroke: #7c8b96; stroke-width: 22; opacity: .55; }   /* contorno escuro fino */
.pr-ribbon-edge    { stroke: #dbe2e8; stroke-width: 19; }                  /* borda mais clara */
.pr-ribbon         { stroke: url(#prRib); stroke-width: 15; }              /* papel interior */
.pr-stage.play .pr-ribbon,
.pr-stage.play .pr-ribbon-edge,
.pr-stage.play .pr-ribbon-outline {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pr-draw 3s cubic-bezier(.45,.05,.3,1) forwards .5s;
}
@keyframes pr-draw { to { stroke-dashoffset: 0; } }

/* Máquina (impressora ou terminal) desenhada por cima da saída do papel */
.pr-body   { fill: #182838; }
.pr-screen { fill: #0c1a26; }
.pr-led    { fill: var(--blue); }
.pr-knob   { fill: #4a5f6d; }
.pr-key    { fill: #35485a; }
.pr-slot   { fill: #060e17; }
.pr-stage.play .pr-led { animation: pr-blink .7s ease infinite; }
@keyframes pr-blink { 0%,100%{opacity:1} 50%{opacity:.15} }

@media (prefers-reduced-motion: reduce) {
  .pr-stage .rl-counter, .pr-heap-sh { opacity: 1; }
  .pr-ribbon, .pr-ribbon-edge { stroke-dashoffset: 0; }
}

/* ============================================================
   Popup etiquetas — a etiqueta sai da impressora, destaca-se pelo picotado
   e assenta na caixa. Rest final centrado na caixa via calc(--lw/--lh).
   ============================================================ */
.label-stage { position: relative; width: 300px; height: 250px; margin: 0 auto; }

/* Impressora de etiquetas (secretária) */
.lb-printer {
  position: absolute; left: 90px; top: 6px; width: 120px; height: 50px; z-index: 4; opacity: 0;
  background: linear-gradient(168deg, #2f4256 0%, #14212e 100%);
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
.lb-printer::before {                     /* topo/tampa da impressora */
  content: ''; position: absolute; left: 12px; right: 12px; top: 9px; height: 10px;
  background: rgba(255,255,255,.06); border-radius: 4px;
}
.lb-p-led { position: absolute; right: 14px; top: 12px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 7px rgba(41,169,225,.9); }
.lb-p-slot {                              /* ranhura de saída na frente */
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 84px; height: 5px; background: #060e17; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.label-stage.play .lb-printer { animation: cf .5s ease forwards .2s; }
.label-stage.play .lb-p-led { animation: pr-blink .7s ease infinite .6s; }

/* Caixa / encomenda onde a etiqueta vai assentar */
.lb-box {
  position: absolute; left: 176px; top: 120px; width: 108px; height: 92px; z-index: 1; opacity: 0;
  background: linear-gradient(158deg, #e0c294 0%, #c69f6c 100%);
  border: 1.6px solid #a9895f; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px rgba(15,28,36,.2);
}
.lb-flap { position: absolute; left: 0; right: 0; top: 33%; height: 0; border-top: 1.5px dashed rgba(120,90,55,.55); }
.lb-tape { position: absolute; left: 50%; top: 0; width: 22px; height: 100%; transform: translateX(-50%);
  background: rgba(210,175,125,.5); border-left: 1px solid rgba(120,90,55,.3); border-right: 1px solid rgba(120,90,55,.3); }
.label-stage.play .lb-box { animation: cf .5s ease forwards .45s; }

/* Sombra da etiqueta ao assentar (segue o centro da caixa) */
.lb-shadow {
  position: absolute; left: calc(230px - var(--lw) / 2); top: calc(166px + var(--lh) / 2);
  width: var(--lw); height: 8px; border-radius: 50%; z-index: 1; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(15,28,36,.3) 0%, transparent 70%);
}
.label-stage.play .lb-shadow { animation: cf .7s ease forwards 2.5s; }

/* A etiqueta — sai da impressora (scaleY de cima), destaca-se e voa para a caixa */
.lb-label {
  position: absolute; width: var(--lw); height: var(--lh); z-index: 3; opacity: 0;
  left: calc(150px - var(--lw) / 2); top: 52px;         /* alinhada com a ranhura */
  transform-origin: top center;
  background: #fff; border: 1.4px solid #c4cfd7; border-radius: 3px; overflow: hidden;
  box-shadow: 0 3px 9px rgba(15,28,36,.2);
}
/* Bordo picotado no topo da etiqueta (linha de destaque) */
.lb-label::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: repeating-linear-gradient(90deg, #b9c4cc 0 2px, transparent 2px 4px);
}
.lb-bars { position: absolute; left: 9%; right: 9%; top: 16%; height: 40%;
  background: repeating-linear-gradient(90deg, #12212c 0 2px, #12212c 2px 3px, #fff 3px 6px); }
.lb-txt { position: absolute; left: 12%; right: 12%; bottom: 14%; height: 22%;
  background: repeating-linear-gradient(180deg, #96a9b4 0 2px, transparent 2px 6px); }
.label-stage.play .lb-label { animation: lb-print 3s cubic-bezier(.4,0,.25,1) forwards .9s; }
@keyframes lb-print {
  0%   { top: 52px; left: calc(150px - var(--lw) / 2); transform: scaleY(0); opacity: 0; }
  5%   { opacity: 1; }
  24%  { top: 52px; left: calc(150px - var(--lw) / 2); transform: scaleY(1) rotate(0); }   /* impressa/saída completa */
  32%  { transform: scaleY(1) translateY(-4px) rotate(-2deg); }                            /* puxa (início do destaque) */
  40%  { top: 66px; transform: scaleY(1) rotate(3deg) scale(1.02); }                       /* SNAP — destaca-se no picotado */
  64%  { left: 150px; top: 40px; transform: rotate(-7deg) scale(1.05); }                   /* arco no ar */
  86%  { left: calc(230px - var(--lw) / 2); top: calc(158px - var(--lh) / 2); transform: rotate(5deg) scale(1); }  /* desce à caixa */
  93%  { left: calc(230px - var(--lw) / 2); top: calc(158px - var(--lh) / 2); transform: rotate(0) scale(1.05); }  /* pressiona / cola */
  100% { left: calc(230px - var(--lw) / 2); top: calc(158px - var(--lh) / 2); transform: rotate(0) scale(1); opacity: 1; }
}

/* Cotas da medida (ancoram na etiqueta já colada) */
.lb-dim { position: absolute; opacity: 0; font: 700 11px var(--font); color: var(--ink); z-index: 4; }
.lb-dim b { background: #fff; padding: 1px 5px; border-radius: 4px; box-shadow: 0 1px 3px rgba(15,28,36,.16); }
.lb-dim-w { left: 230px; top: calc(158px + var(--lh) / 2 + 8px); transform: translateX(-50%); }
.lb-dim-h { left: calc(230px + var(--lw) / 2 + 8px); top: 158px; transform: translateY(-50%); }
.label-stage.play .lb-dim { animation: cf .5s ease forwards 2.65s; }

@media (prefers-reduced-motion: reduce) {
  .lb-printer, .lb-box, .lb-dim { opacity: 1; }
  .lb-label { opacity: 1; left: calc(230px - var(--lw) / 2); top: calc(158px - var(--lh) / 2); transform: none; }
  .lb-shadow { opacity: .6; }
}

/* ============================================================
   Popup COEX — o artigo entra no envelope, tira-se o liner e fecha-se
   ============================================================ */
/* A perspetiva vive no palco; o saco é que roda dentro dela. Assim o envelope
   pode ganhar uma ligeira inclinação e continuar a projetar bem em 3D. */
.coex-stage { position: relative; width: 300px; height: 250px; margin: 0 auto; perspective: 900px; }

/* Sombra no "chão", fora do espaço 3D para ficar sempre deitada. */
.cx-shadow {
  position: absolute; left: 50%; bottom: 16px;
  width: calc(var(--bw) * 1.15); height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(15,28,36,.34) 0%, rgba(15,28,36,0) 72%);
  opacity: 0;
}
.coex-stage.play .cx-shadow { animation: cf .6s ease forwards .35s; }

/* O saco é o espaço 3D: cada painel tem a sua profundidade em translateZ,
   por isso o artigo fica mesmo atrás da frente e a pala assenta por cima. */
.cx-bag {
  position: absolute; left: 50%; bottom: 26px;
  width: var(--bw); height: var(--bh);
  transform: translateX(-50%) rotateX(6deg) rotateY(-13deg);
  transform-style: preserve-3d;
}

/* Traseira / interior do saco (o mais fundo). A faixa que fica à vista por
   cima da frente é a BOCA do saco, não um painel: por isso escurece muito
   junto ao topo, como uma cavidade. Sem isto lia-se como uma segunda pala. */
.cx-back {
  position: absolute; inset: 0; opacity: 0;
  transform: translateZ(0);
  background: linear-gradient(180deg, #2f3a43 0%, #55636d 55%, #6f7d87 100%);
  border-radius: 4px 4px 6px 6px;
  box-shadow: inset 0 5px 10px rgba(0,0,0,.55);
}
.coex-stage.play .cx-back { animation: cf .5s ease forwards .2s; }

/* Frente branca — deixa a abertura no topo. Fica 7px à frente da traseira,
   o que dá espessura real ao envelope. */
.cx-front {
  position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 11px); opacity: 0;
  transform: translateZ(7px);
  background: linear-gradient(163deg, #ffffff 0%, #e9eef2 55%, #dbe3e9 100%);
  border: 1.4px solid #cfd9e0; border-radius: 3px 3px 6px 6px;
  box-shadow: 0 14px 26px rgba(15,28,36,.22);
}
/* Brilho suave a atravessar a frente — reforça o volume. */
.cx-front::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 42%);
}
.coex-stage.play .cx-front { animation: cf .5s ease forwards .3s; }

/* Artigo: cai a meia profundidade, entre a traseira e a frente. Quando desce
   abaixo da abertura é a própria frente que o tapa — sem truques de z-index. */
/* O artigo desce À FRENTE de tudo (z alto) — é assim que se segura a peça
   antes de a enfiar, e evita que a pala aberta o tape durante a queda. Só ao
   entrar é que recua para o interior (z=3), ficando atrás da frente. */
.cx-item {
  position: absolute; left: 50%; top: 2px;
  width: calc(var(--bw) * .7); height: calc(var(--bw) * .7);
  opacity: 0;
  transform: translate3d(-50%, -160px, 42px);
}
.cx-item svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 8px rgba(15,28,36,.4)); }
.coex-stage.play .cx-item { animation: cx-drop 1.35s cubic-bezier(.38,0,.28,1) forwards .55s; }
@keyframes cx-drop {
  0%   { transform: translate3d(-50%, -160px, 42px); opacity: 0; }
  14%  { opacity: 1; }
  50%  { transform: translate3d(-50%, -14px, 42px); opacity: 1; }   /* suspenso sobre a boca */
  72%  { transform: translate3d(-50%, calc(var(--bh) * .18), 3px); opacity: 1; }  /* desliza p/ dentro */
  100% { transform: translate3d(-50%, calc(var(--bh) - var(--bw) * .7 - 10px), 3px); opacity: 1; }  /* já lá dentro */
}

/* ── Pala de duas faces ────────────────────────────────────────────────────
   Dobradiça no topo do saco. Aberta (150°) fica virada para trás a mostrar o
   INTERIOR com a faixa de cola; ao fechar passa os 90°, troca para a face
   exterior e avança em Z para assentar por cima da frente — como um envelope
   a sério. O sinal do ângulo importa: a negativo fica a face errada à vista. */
.cx-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 30px; opacity: 0;
  transform-origin: top center;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateX(150deg);
}
/* Quem manda na face à vista é a opacidade, trocada a meio da dobra (aos ~29%,
   quando a pala passa os 90° e fica de perfil). O `backface-visibility` deixa
   de ser fiável assim que o `transform` da pala está a ser animado — o
   compositor achata o espaço 3D e chega a mostrar a face errada. */
.cx-face {
  position: absolute; inset: 0;
  border-radius: 0 0 5px 5px;
}
.cx-out {                                   /* face exterior — só depois de fechar */
  opacity: 0;
  transform: translateZ(.5px);
  background: linear-gradient(168deg, #ffffff 0%, #e4eaee 100%);
  border: 1.4px solid #cfd9e0;
  box-shadow: 0 5px 10px rgba(15,28,36,.2);
}
.cx-in {                                    /* face interior (com a cola) — aberta */
  opacity: 1;
  transform: rotateX(180deg) translateZ(.5px);
  background: linear-gradient(168deg, #cfdae2 0%, #aebdc9 100%);
  border: 1.4px solid #9aa9b6;
  box-shadow: inset 0 2px 5px rgba(15,28,36,.18);
}
.coex-stage.play .cx-out { animation: cx-face-out .85s linear forwards 3.0s; }
.coex-stage.play .cx-in  { animation: cx-face-in  .85s linear forwards 3.0s; }
@keyframes cx-face-out { 0%, 28.9% { opacity: 0; } 29%, 100% { opacity: 1; } }
@keyframes cx-face-in  { 0%, 28.9% { opacity: 1; } 29%, 100% { opacity: 0; } }
.cx-adh {                                   /* faixa de cola, revelada com o liner fora */
  position: absolute; left: 7%; right: 7%; top: 7px; height: 9px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(41,169,225,.42) 0 4px, rgba(41,169,225,.16) 4px 8px);
  box-shadow: inset 0 0 3px rgba(41,169,225,.4);
  opacity: 0;
}
.coex-stage.play .cx-flap {
  animation: cf .4s ease forwards .3s,
             cx-fold .85s cubic-bezier(.5,0,.25,1) forwards 3.0s;
}
.coex-stage.play .cx-adh { animation: cf .3s ease forwards 2.75s; }
@keyframes cx-fold {
  0%   { transform: translateZ(0)   rotateX(150deg); }
  70%  { transform: translateZ(8px) rotateX(11deg); }
  86%  { transform: translateZ(8px) rotateX(-5deg); }  /* pequeno bater ao colar */
  100% { transform: translateZ(8px) rotateX(0deg); }
}

/* Liner do adesivo: está colado à faixa de cola, na face interior da pala,
   e é puxado para fora antes de a pala fechar. */
/* Papel siliconado: branco-creme com riscas, bem destacado do cinzento da pala
   para se perceber que é uma folha à parte que se puxa. */
.cx-liner {
  position: absolute; left: 5%; right: 5%; top: 6px; height: 12px;
  border-radius: 2px; opacity: 0;
  background:
    repeating-linear-gradient(58deg, rgba(190,205,218,.55) 0 3px, rgba(190,205,218,0) 3px 7px),
    linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  border: 1.2px solid #6f8697;
  box-shadow: 0 3px 6px rgba(15,28,36,.4);
}
.cx-liner::after {                          /* pega para puxar, à direita */
  content: ''; position: absolute; right: -12px; top: 50%;
  width: 16px; height: 21px; transform: translateY(-50%) rotate(-7deg);
  background: linear-gradient(180deg, #ffffff, #e6edf3);
  border: 1.2px solid #6f8697; border-radius: 3px 8px 8px 3px;
  box-shadow: 3px 3px 6px rgba(15,28,36,.3);
}
.coex-stage.play .cx-liner {
  animation: cf .3s ease forwards 1.85s,
             cx-peel .85s cubic-bezier(.42,0,.3,1) forwards 2.25s;
}
@keyframes cx-peel {
  0%   { transform: translateX(0) rotate(0); opacity: 1; }
  55%  { transform: translateX(62%) rotate(5deg); opacity: 1; }
  100% { transform: translateX(150%) rotate(11deg); opacity: 0; }
}

/* Selo "fechado/inviolável" — à frente da pala já fechada. */
.cx-seal {
  position: absolute; left: 50%; top: 46%; width: 30px; height: 30px; opacity: 0;
  transform: translate3d(-50%, -50%, 14px) scale(0);
  background: var(--blue); color: #fff; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(41,169,225,.5);
}
.cx-seal svg { width: 17px; height: 17px; }
.coex-stage.play .cx-seal { animation: cx-pop .5s cubic-bezier(.3,1.4,.5,1) forwards 3.95s; }
@keyframes cx-pop { to { transform: translate3d(-50%, -50%, 14px) scale(1); opacity: 1; } }

/* Cotas da medida (fora do espaço 3D, sempre a direito). */
.cx-dim { position: absolute; opacity: 0; font: 700 11px var(--font); color: var(--ink); z-index: 4; }
.cx-dim b { background: #fff; padding: 1px 5px; border-radius: 4px; box-shadow: 0 1px 3px rgba(15,28,36,.16); }
.cx-dim-w { left: 50%; bottom: 8px; transform: translateX(-50%); }
.cx-dim-h { left: calc(50% + var(--bw) / 2 + 14px); bottom: calc(26px + var(--bh) / 2); transform: translateY(50%); }
.coex-stage.play .cx-dim { animation: cf .5s ease forwards 4.15s; }

@media (prefers-reduced-motion: reduce) {
  .cx-back, .cx-front, .cx-item, .cx-seal, .cx-dim, .cx-shadow { opacity: 1; }
  .cx-item { transform: translate3d(-50%, calc(var(--bh) - var(--bw) * .7 - 10px), 3px) !important; }
  .cx-flap { opacity: 1; transform: translateZ(8px) rotateX(0deg) !important; }
  .cx-out { opacity: 1; }
  .cx-in { opacity: 0; }
  .cx-liner { display: none; }
  .cx-seal { transform: translate3d(-50%, -50%, 14px) scale(1); }
}

/* ============================================================
   Secção qualidade (etiquetas) — aderência + impressão
   ============================================================ */
.qual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 10px; }
.qual-cell { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: rgba(244,246,247,.5); }
.qual-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(41,169,225,.12); color: var(--blue-dark); margin-bottom: 14px; }
.qual-cell h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 12px; }
.qual-cell ul { list-style: none; display: grid; gap: 10px; }
.qual-cell li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--text); line-height: 1.5; }
.qual-cell li svg { color: var(--blue); flex-shrink: 0; margin-top: 3px; }
.qual-cell > p { font-size: .9rem; color: var(--text); line-height: 1.55; }
/* COEX — 4 pilares mais compactos (h3 e ícone com menos margem) */
.coex-pillars .qual-cell h3 { margin-bottom: 8px; }
.coex-pillars .qual-ic { margin-bottom: 12px; }
@media (max-width: 880px) { .qual-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Página Sobre — premium, interativa (contadores, valores, timeline)
   ============================================================ */

/* Contadores animados */
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin: 6px 0 8px;
}
.about-stat {
  position: relative; padding: 30px 24px; border-radius: 14px;
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; overflow: hidden; text-align: center;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.about-stat:hover { transform: translateY(-4px); box-shadow: 0 26px 48px rgba(41,169,225,.24); }
.about-stat::before {                                   /* logo watermark subtil */
  content: ''; position: absolute; inset: -20%;
  background: url('../assets/images/logo-cube.png') repeat center; background-size: 88px;
  opacity: .05; transform: rotate(-13deg); pointer-events: none;
}
.about-stat > * { position: relative; z-index: 1; }
.as-num {
  display: block; font: 800 clamp(2.4rem, 5vw, 3.4rem)/1 var(--font);
  color: var(--blue); letter-spacing: -.02em;
}
.as-num .as-suffix { font-size: .55em; color: rgba(41,169,225,.75); margin-left: 2px; }
.as-label { display: block; margin-top: 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* Missão — bloco premium com aspa gigante e assinatura */
.about-mission {
  position: relative; padding: 50px 60px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.10);
  overflow: hidden;
}
.about-mission::before {
  content: '\201C'; position: absolute; top: -30px; left: 30px;
  font: 800 220px/.9 Georgia, serif; color: var(--blue); opacity: .12;
  pointer-events: none;
}
.about-mission .eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-dark); margin-bottom: 14px;
}
.about-mission h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; margin-bottom: 14px; }
.about-mission h2 span { color: var(--blue); }
.about-mission p { color: var(--text); line-height: 1.7; margin-bottom: 12px; max-width: 780px; }
.about-mission .m-sign {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  padding: 10px 16px; background: rgba(41,169,225,.09); border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--blue-dark);
}

/* Valores / pilares — grelha 3×2, hover interactivo */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px;
}
.value-card {
  position: relative; padding: 28px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  cursor: default;
}
.value-card::before {                          /* linha decorativa que expande no hover */
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  transition: width .5s cubic-bezier(.4,0,.25,1);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(41,169,225,.18); border-color: rgba(41,169,225,.35); }
.value-card:hover::before { width: 100%; }
.value-card:hover .v-ic { background: var(--blue); color: #fff; }
.v-ic {
  width: 52px; height: 52px; border-radius: 13px;
  background: rgba(41,169,225,.12); color: var(--blue-dark);
  display: grid; place-items: center; margin-bottom: 18px;
  transition: background .35s, color .35s;
}
.value-card h3 { font-size: 1.08rem; color: var(--ink); margin-bottom: 10px; }
.value-card p { font-size: .92rem; color: var(--text); line-height: 1.6; }

/* Timeline vertical central com marcos animados */
.timeline {
  position: relative; max-width: 780px; margin: 40px auto 0;
  padding: 20px 0;
}
.timeline::before {                            /* linha vertical central */
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--blue) 15%, var(--blue) 85%, transparent 100%);
  transform: translateX(-50%);
}
.tl-item {
  position: relative; width: 50%; padding: 26px 40px 26px 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.tl-item.in { opacity: 1; transform: translateY(0); }
.tl-item.right { margin-left: 50%; padding: 26px 0 26px 40px; }
.tl-dot {
  position: absolute; top: 34px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); z-index: 2;
  box-shadow: 0 0 0 6px rgba(41,169,225,.14);
}
.tl-item:not(.right) .tl-dot { right: -10px; }
.tl-item.right .tl-dot { left: -10px; }
.tl-year {
  display: inline-block; font: 800 1.35rem var(--font); color: var(--blue-dark);
  padding: 4px 12px; background: rgba(41,169,225,.12); border-radius: 8px; margin-bottom: 10px;
}
.tl-card {
  padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,28,36,.08);
}
.tl-card h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 6px; }
.tl-card p { font-size: .9rem; color: var(--text); line-height: 1.6; }

/* Como trabalhamos — 4 passos ligados */
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 26px;
}
.step-card {
  position: relative; padding: 24px 20px; border-radius: 12px;
  background: rgba(244,246,247,.6); border: 1px solid var(--line);
  text-align: center; transition: all .3s;
}
.step-card:hover { background: #fff; border-color: rgba(41,169,225,.4); transform: translateY(-3px); }
.step-num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 800; margin-bottom: 12px;
}
.step-card h4 { font-size: .98rem; color: var(--ink); margin-bottom: 6px; }
.step-card p { font-size: .82rem; color: var(--text); line-height: 1.5; }
/* Ligações entre os passos (setas) */
.step-card:not(:last-child)::after {
  content: '→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--blue); font-weight: 800; z-index: 2;
}

/* CTA final da Sobre */
.about-cta {
  padding: 46px; border-radius: 14px; text-align: center;
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.about-cta::before {
  content: ''; position: absolute; inset: -20%;
  background: url('../assets/images/logo-cube.png') repeat center; background-size: 90px;
  opacity: .05; transform: rotate(-13deg); pointer-events: none;
}
.about-cta > * { position: relative; z-index: 1; }
.about-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }
.about-cta p { color: rgba(255,255,255,.78); max-width: 600px; margin: 0 auto 22px; line-height: 1.6; }
.about-cta .btn-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.about-cta .btn.btn-line { border-color: rgba(255,255,255,.4); color: #fff; }
.about-cta .btn.btn-line:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Responsivo */
@media (max-width: 880px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; gap: 8px; }
  .step-card:not(:last-child)::after { display: none; }
  .about-mission { padding: 36px 26px; }
  .about-mission::before { font-size: 140px; top: -18px; left: 14px; }
  .timeline::before { left: 12px; }
  .tl-item, .tl-item.right { width: 100%; margin-left: 0; padding: 20px 0 20px 36px; }
  .tl-item:not(.right) .tl-dot, .tl-item.right .tl-dot { left: 4px; right: auto; }
  .about-cta { padding: 30px 22px; }
}

/* ============================================================
   CONTACTOS
   ============================================================ */

/* 4 cartões de info no topo */
.ct-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ct-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 22px 20px;
  transition: box-shadow .2s, border-color .2s;
}
.ct-card:hover { border-color: var(--blue); box-shadow: 0 6px 24px rgba(41,169,225,.12); }
.ct-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.ct-body { display: flex; flex-direction: column; gap: 3px; }
.ct-body b { font-weight: 700; color: var(--ink); font-size: .9rem; }
.ct-body a, .ct-body p { color: var(--text); font-size: .9rem; }
.ct-body a:hover { color: var(--blue); }
.ct-body small { color: var(--mute); font-size: .8rem; }

/* Grid principal: formulário + mapa */
.ct-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Mapa */
.ct-map {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1.5px solid var(--line);
  height: 100%;
  min-height: 500px;
}
.ct-map iframe { display: block; }
.ct-map-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-soft);
  font-size: .82rem;
  color: var(--mute);
  border-top: 1px solid var(--line);
}
.ct-map-caption svg { color: var(--blue); flex-shrink: 0; }

/* Formulário */
.ct-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { display: flex; flex-direction: column; gap: 5px; }
.ct-field label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.ct-field input,
.ct-field textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
  resize: none;
}
.ct-field input:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(41,169,225,.14);
}
.ct-form-note { font-size: .78rem; color: var(--mute); text-align: center; }
/* ============================================================
   Aviso de cookies
   ============================================================ */
.ck-aviso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 780px; margin: 0 auto;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--ink); color: rgba(255,255,255,.86);
  border-radius: 8px;
  box-shadow: 0 16px 50px rgba(15,28,36,.4);
  font-size: .9rem; line-height: 1.6;
  transform: translateY(130%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.ck-aviso.mostrar { transform: none; opacity: 1; }
.ck-texto { flex: 1 1 320px; }
.ck-texto b { color: #fff; font-weight: 700; }
.ck-texto a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.ck-texto a:hover { color: #7fd0f2; }

.ck-botoes { display: flex; gap: 10px; flex-shrink: 0; }
/* Os dois botões têm o mesmo tamanho e peso de propósito: a lei não deixa
   tornar o "aceitar" mais fácil do que o "recusar". */
.ck-btn {
  padding: 11px 24px;
  border-radius: var(--r);
  font: 600 .9rem var(--font);
  border: 1.5px solid transparent;
  transition: background .2s, border-color .2s, transform .15s;
}
.ck-btn:hover { transform: translateY(-1px); }
.ck-aceitar { background: var(--blue); color: #fff; }
.ck-aceitar:hover { background: var(--blue-dark); }
.ck-recusar { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.ck-recusar:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

@media (max-width: 620px) {
  .ck-aviso { left: 10px; right: 10px; bottom: 10px; padding: 18px; gap: 16px; }
  .ck-botoes { width: 100%; }
  .ck-btn { flex: 1; padding: 12px 10px; }
}

/* Cartaz que substitui o mapa enquanto não houver consentimento. */
.ck-cartaz {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 30px 24px; text-align: center;
  background: var(--bg-soft);
  border-radius: var(--r);
}
.ck-cartaz svg { color: var(--blue); }
.ck-cartaz p { color: var(--text); font-size: .9rem; max-width: 330px; line-height: 1.6; }
.ck-cartaz small { color: var(--mute); font-size: .78rem; }
.ck-cartaz[hidden] { display: none; }

/* Campo-armadilha: fora do ecrã, invisível para pessoas e para leitores de
   ecrã, mas preenchido pelos robots que preenchem tudo. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-form-success[hidden] { display: none; }
.ct-form-success.erro {
  background: #fdeced;
  border-color: #e0707a;
  color: #a12630;
}
.ct-form-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #eafaf1;
  border: 1.5px solid #6fcf97;
  border-radius: var(--r);
  color: #1a7a42;
  font-weight: 600;
  font-size: .9rem;
}

@media (max-width: 1024px) {
  .ct-info-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-main-grid { grid-template-columns: 1fr; }
  .ct-map { min-height: 360px; }
}
@media (max-width: 560px) {
  .ct-info-grid { grid-template-columns: 1fr; }
  .ct-form-row { grid-template-columns: 1fr; }
}

/* Parágrafo com os nomes alternativos do produto (apanha quem procura por
   "bobines" ou "papel de multibanco"). Texto normal, visível, sem truques. */
.p-nomes {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text);
  margin: 14px 0 4px;
  padding-left: 14px;
  border-left: 3px solid var(--line);
}
.p-nomes strong { color: var(--ink); font-weight: 700; }

/* Aviso de quantidade ajustada ao múltiplo do pack (ex.: 998 → 1000). */
.qty-fix {
  display: block;
  margin: 8px 0 0;
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-left: 3px solid var(--blue);
  background: rgba(41, 169, 225, .08);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .82rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--blue-dark);
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.qty-fix.show { max-height: 90px; opacity: 1; padding: 9px 12px; }

/* ============================================================
   RESPONSIVO GLOBAL — tablet, telemóvel e ecrãs muito pequenos
   Complementa os breakpoints por secção acima. Ordem: do maior para o
   menor, para que cada nível herde os ajustes do anterior.
   ============================================================ */

/* ── Tablet / portátil pequeno ─────────────────────────────── */
@media (max-width: 1024px) {
  .pg-hero { padding: 148px 0 64px; }
  .pg-card { padding: 40px; }
  .gal-grid, .apps-grid { gap: 16px; }
}

/* ── Telemóvel grande / tablet vertical ────────────────────── */
@media (max-width: 700px) {
  /* Hero: menos altura morta e texto legível sobre a foto. Em ecrãs
     estreitos o texto ocupa quase toda a imagem, por isso ganha um
     gradiente local (só aqui) além do text-shadow. */
  .pg-hero {
    padding: 116px 0 52px;
    isolation: isolate;
  }
  .pg-hero::before {
    content: '';
    position: absolute;
    inset: -80px 0 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(9,18,24,.58) 0%, rgba(9,18,24,.34) 55%, rgba(9,18,24,0) 100%);
    pointer-events: none;
  }
  .pg-hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); margin-bottom: 14px; }
  .pg-hero p { font-size: 1rem; margin-bottom: 26px; }
  .pg-hero .crumb { margin-bottom: 16px; font-size: .76rem; }

  /* Os dois botões do hero partilham a mesma linha em vez de empilhar. */
  .hero-cta { gap: 10px; }
  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 12px;
    font-size: .88rem;
  }

  /* Hero da homepage: o conteúdo é alinhado ao fundo, por isso precisa de
     folga em cima para não passar por baixo do logótipo do cabeçalho. */
  #hero { min-height: 86vh; }
  .hero-content { padding: 104px 0 44px; }
  .hero-content h1 { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 14px; }
  .hero-content p { font-size: 1rem; margin-bottom: 26px; }
  .hero-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 30px;
  }
  .hero-nav button { width: 100%; font-size: .68rem; letter-spacing: .04em; }

  .pg-section { padding: 18px 0; }
  .pg-spacer { height: 10vh; }
  .pg-card { padding: 26px 20px; }
  .pg-card > h2 { font-size: 1.35rem; }

  /* Tabelas de medidas: rolam na horizontal com aviso visual. */
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table-scroll::after {
    content: 'Deslize para ver toda a tabela →';
    display: block;
    font-size: .72rem;
    color: var(--mute);
    padding: 8px 2px 0;
  }
  .size-table { font-size: .86rem; }
  .size-table th, .size-table td { padding: 10px 8px; }

  /* "Num relance": rótulo em cima, valor por baixo — em duas colunas o
     valor ficava espremido e partia a meio dos formatos. */
  .glance .row { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; }
  .glance dd { text-align: left; }

  /* Popup de detalhe ocupa o ecrã quase todo. */
  .size-modal-card { max-width: 100%; margin: 0 10px; }
  .rc-modal .rc-row { grid-template-columns: 62px 1fr auto; gap: 7px; }
  .rc-modal .rc-name { font-size: .68rem; }
  .rc-modal .rc-tag { font-size: .72rem; }
}

/* ── Telemóvel ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  #header .wrap { padding: 0 18px; }

  .pg-card { padding: 22px 16px; }
  .about-mission { padding: 28px 18px; }
  .about-stat { padding: 18px 12px; }
  .as-num { font-size: 2rem; }

  .ct-card { padding: 18px 16px; }
  .ct-map { min-height: 300px; }

  .foot-social { flex-wrap: wrap; gap: 10px; }
  .gal-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* ── Ecrãs muito pequenos (iPhone SE e afins) ──────────────── */
@media (max-width: 360px) {
  .wrap { padding: 0 14px; }
  #header .wrap { padding: 0 14px; }
  .brand img { height: 48px !important; }

  .pg-hero { padding: 100px 0 44px; }
  .pg-hero h1 { font-size: 1.72rem; }
  .pg-hero p { font-size: .94rem; }
  .p-index { font-size: 2.6rem; }

  /* Sem espaço para dois botões lado a lado — voltam a empilhar. */
  .hero-cta .btn { flex: 1 1 100%; }

  .pg-card { padding: 18px 14px; }
  .pg-card > h2 { font-size: 1.2rem; }
  .size-table { font-size: .8rem; }
}

/* ── Ecrãs grandes ─────────────────────────────────────────── */
@media (min-width: 1800px) {
  .pg-hero { padding: 200px 0 100px; }
  .pg-hero h1 { font-size: 4rem; }
  .pg-hero p { font-size: 1.2rem; max-width: 640px; }
}