/* ===== base.css ===== */
/* MENTA CONECTA — BASE: fichas de desenho, letra, tipografia, botões.
   As cores vêm do M do logótipo (medidas no ficheiro): menta #209478, amarelo
   #FFEC08, magenta #D81C5C, laranja #F48020, vermelho #E43C30, roxo #9C2060.
   Os contrastes estão medidos em scripts/contrastes.mjs (a auditoria falha abaixo
   do mínimo). Não mudar uma cor aqui sem a mudar lá. */
@font-face {
  font-family: "Bricolage";
  src: url("../fontes/bricolage-var.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fontes/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
:root {
  --papel: #F4FAF7; --papel-2: #E8F3EE; --papel-3: #DAECE4; --branco: #FFFFFF;
  --linha: #D3E5DC; --linha-forte: #B5D0C4;
  --tinta: #14211D; --tinta-2: #45524D; --tinta-3: #56635E;
  --menta: #209478; --menta-escuro: #137A60; --menta-claro: #6FD8B9;
  --magenta: #D81C5C; --magenta-escuro: #AF1249; --magenta-claro: #FF80AA;
  --amarelo: #FFEC08; --amarelo-claro: #FFF6A1;
  --laranja: #F48020; --vermelho: #E43C30; --roxo: #9C2060;
  --verde-vivo: #25D366;
  --fundo-escuro: #0E2A22; --escuro-texto: #C5D3CD;
  /* Os papéis das cores. A proposta «Menta» (escolhida a 9 nov 2026): o verde do
     nome nos botões e nos destaques, o traço em magenta. */
  --realce: var(--menta-escuro); --realce-escuro: var(--menta-claro);
  --botao: var(--menta-escuro); --botao-escuro: #0D5C48; --botao-sombra: rgba(19, 122, 96, .5);
  --traco: var(--magenta); --traco-escuro: var(--magenta-claro);
  --foco: var(--menta-escuro);
  --acento: var(--menta);
  --letra-titulo: "Bricolage", ui-rounded, system-ui, sans-serif;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-1: 12px; --r-2: 18px; --r-3: 26px; --r-pilula: 999px;
  --sombra-1: 0 1px 2px rgba(20, 33, 29, .06), 0 2px 8px rgba(20, 33, 29, .05);
  --sombra-2: 0 2px 6px rgba(20, 33, 29, .06), 0 12px 32px -8px rgba(20, 33, 29, .16);
  --sombra-3: 0 4px 12px rgba(20, 33, 29, .08), 0 30px 60px -20px rgba(20, 33, 29, .3);
  --largura: 1200px; --margem: clamp(16px, 4vw, 40px);
  --cabecalho: 72px;
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecalho) + 16px); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--letra); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: var(--r-pilula); text-decoration: none; font-weight: 600; transition: top .2s; }
.saltar:focus { top: 12px; }
.contentor { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }

/* ——— Tipografia ——— */
h1, h2, h3, h4 { font-family: var(--letra-titulo); font-weight: 750; line-height: 1.06; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.4rem + 4.4vw, 4.6rem); font-weight: 780; }
h2 { font-size: clamp(1.95rem, 1.3rem + 2.8vw, 3.35rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); letter-spacing: -.01em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem); color: var(--tinta-2); line-height: 1.55; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; font: 650 .8rem/1 var(--letra); letter-spacing: .12em; text-transform: uppercase; color: var(--realce);
}
/* As cinco cores do M numa barra curta. */
.etiqueta::before { content: ""; width: 30px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--menta) 0 20%, var(--amarelo) 0 40%, var(--magenta) 0 60%, var(--laranja) 0 80%, var(--vermelho) 0); }
.escuro .etiqueta { color: var(--amarelo); }
.preco-num { font-variant-numeric: tabular-nums; }

/* ——— Botões ——— */
.botao {
  --b-fundo: var(--tinta); --b-texto: #fff; --b-borda: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-pilula); border: 2px solid var(--b-borda);
  background: var(--b-fundo); color: var(--b-texto); font: 650 1rem/1 var(--letra); letter-spacing: -.005em; text-decoration: none;
  isolation: isolate; overflow: hidden; white-space: nowrap;
  transition: transform .35s var(--mola), background-color .25s, box-shadow .3s, color .25s;
}
.botao svg { width: 20px; height: 20px; flex: none; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }
.botao--principal { --b-fundo: var(--botao); box-shadow: 0 10px 24px -10px var(--botao-sombra); }
.botao--principal:hover { --b-fundo: var(--botao-escuro); }
.botao--claro { --b-fundo: transparent; --b-texto: var(--tinta); --b-borda: var(--tinta); }
.botao--claro:hover { --b-fundo: var(--tinta); --b-texto: #fff; }
.escuro .botao--claro { --b-texto: #fff; --b-borda: rgba(255, 255, 255, .7); }
.escuro .botao--claro:hover { --b-fundo: #fff; --b-texto: var(--tinta); }
.botao--whatsapp { --b-fundo: var(--verde-vivo); --b-texto: var(--tinta); }
.botao--whatsapp:hover { --b-fundo: #1fc35d; }
.botao--amarelo { --b-fundo: var(--amarelo); --b-texto: var(--tinta); }
.botao--pequeno { min-height: 42px; padding: 0 18px; font-size: .94rem; }
.botao--bloco { width: 100%; }
/* O brilho que atravessa o botão ao passar o rato (e de vez em quando no principal). */
.botao::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 66%);
  transform: translateX(-120%);
}
.botao:hover::after { animation: brilho .9s var(--suave); }
.botao--principal.vivo::after { animation: brilho 1.1s var(--suave) 2.2s, brilho 1.1s var(--suave) 9s; }
@keyframes brilho { to { transform: translateX(120%); } }
.botao .seta { transition: transform .35s var(--mola); }
.botao:hover .seta { transform: translateX(4px); }
.ligacao { color: var(--realce); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--suave); }
.ligacao:hover, .ligacao:focus-visible { background-size: 100% 2px; }
.escuro .ligacao { color: var(--amarelo); }

/* ===== desenhos.css ===== */
/* OS DESENHOS DOS PRODUTOS (scripts/desenhos.mjs).
   Tudo parte de --cor, posta no elemento que contém o desenho; os tons derivados
   misturam-na com preto, branco ou cinzento. Mudar de cor anima-se sozinho. */
/* O sprite não pode ser display:none (os gradientes morriam): fica com 0×0. */
.sprite-desenhos { position: absolute; width: 0; height: 0; overflow: hidden; }
.desenho { display: block; width: 100%; height: auto; overflow: visible; }
.d-cor, .d-esc, .d-esc2, .d-cla, .d-costura, .d-botao, .d-cordao, .d-fecho, .d-alca, .d-asa, .d-dentro-caneca, .d-bordo { transition: fill .3s ease, stroke .3s ease; }
.d-cor { fill: var(--cor, #c9ccd6); }
.d-esc { fill: color-mix(in oklab, var(--cor, #c9ccd6) 84%, #000); }
.d-esc2 { fill: color-mix(in oklab, var(--cor, #c9ccd6) 62%, #000); }
.d-cla { fill: color-mix(in oklab, var(--cor, #c9ccd6) 70%, #fff); }
.d-sombra-lados { fill: url(#dg-lados); }
.d-luz { fill: url(#dg-luz); }
.d-cil { fill: url(#dg-cilindro); }
.d-chao { fill: url(#dg-chao); }
.d-metal { fill: url(#dg-metal); }
.d-metal-v { fill: url(#dg-metal-v); }
.d-bambu { fill: url(#dg-bambu); }
.d-papel { fill: url(#dg-papel); stroke: rgba(21, 26, 51, .14); stroke-width: 1.4; }
.d-papel-autocolante { fill: #fff; stroke: rgba(21, 26, 51, .12); stroke-width: 1.4; }
.d-contorno { fill: none; stroke: rgba(21, 26, 51, .18); stroke-width: 1.6; stroke-linejoin: round; }
.d-costura { fill: none; stroke: color-mix(in oklab, var(--cor, #c9ccd6) 66%, #8a8a8a); stroke-width: 1.5; stroke-dasharray: 3.5 3.5; stroke-linecap: round; opacity: .9; }
.d-costura--metal { stroke: rgba(21, 26, 51, .25); stroke-dasharray: none; }
.d-vinco { fill: none; stroke: #000; stroke-opacity: .07; stroke-width: 3; stroke-linecap: round; }
.d-vinco--largo { stroke-width: 9; stroke-opacity: .045; }
.d-canelado { fill: url(#dp-canelado); }
.d-textura-polar { fill: url(#dp-polar); }
.d-botao { fill: color-mix(in oklab, var(--cor, #c9ccd6) 55%, #fff); stroke: rgba(21, 26, 51, .3); stroke-width: 1; }
.d-cordao { fill: none; stroke: color-mix(in oklab, var(--cor, #c9ccd6) 50%, #fff); stroke-width: 4; stroke-linecap: round; }
.d-cordao--grosso { stroke-width: 5; stroke: color-mix(in oklab, var(--cor, #c9ccd6) 70%, #000); }
.d-ponteira { fill: #D9DCE2; stroke: rgba(21, 26, 51, .25); }
.d-fecho { fill: none; stroke: color-mix(in oklab, var(--cor, #c9ccd6) 55%, #000); stroke-width: 6; }
.d-dentes { fill: none; stroke: #C8CCD4; stroke-width: 4; stroke-dasharray: 1.4 1.6; }
.d-puxador { fill: #2A2E3D; }
.d-fecho-bolso { fill: none; stroke: #2A2E3D; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.d-alca { fill: none; stroke: color-mix(in oklab, var(--cor, #c9ccd6) 88%, #000); stroke-width: 15; stroke-linecap: round; }
.d-mosquetao { fill: none; stroke: #A7ADB7; stroke-width: 5; stroke-linecap: round; }
.d-mosquetao--grosso { stroke-width: 7; }
.d-cartao { fill: #fff; stroke: rgba(21, 26, 51, .2); stroke-width: 1.5; }
.d-cartao-furo { fill: rgba(21, 26, 51, .18); }
.d-brilho { fill: none; stroke: #fff; stroke-opacity: .35; stroke-width: 6; stroke-linecap: round; }
.d-tampa { fill: #2A2E3D; }
.d-tampa-topo { fill: #3A3F51; }
.d-tampa-furo { fill: #10131F; }
.d-asa { fill: none; stroke: var(--cor-asa, var(--cor, #c9ccd6)); stroke-width: 20; stroke-linecap: round; }
.d-asa--fina { stroke-width: 11; }
.d-asa-luz { fill: none; stroke: #000; stroke-opacity: .12; stroke-width: 20; stroke-linecap: round; }
.d-dentro-caneca { fill: var(--cor-dentro, color-mix(in oklab, var(--cor, #c9ccd6) 60%, #000)); }
.d-bordo { fill: none; stroke: color-mix(in oklab, var(--cor, #c9ccd6) 75%, #fff); stroke-width: 4; }
.d-aro { fill: none; stroke: #23283A; stroke-width: 5; }
.d-aro-baixo { fill: none; stroke: #23283A; stroke-width: 4; }
.d-borracha { fill: #3A3F51; }
.d-ponta { fill: #3A3F51; }
.d-clip { fill: url(#dg-metal-v); stroke: rgba(21, 26, 51, .25); stroke-width: .8; }
.d-no-bambu { fill: none; stroke: #7A5428; stroke-width: 1.4; opacity: .7; }
.d-linha-texto { fill: none; stroke: rgba(21, 26, 51, .22); stroke-width: 6; stroke-linecap: round; }
.d-folhas { fill: #FBF8F2; stroke: rgba(21, 26, 51, .16); stroke-width: 1.2; }
.d-linhas-folhas { fill: none; stroke: rgba(21, 26, 51, .14); stroke-width: 1; }
.d-fita { fill: #FFC83D; }
.d-elastico { fill: #23283A; }
.d-pe { fill: none; stroke: #8E949E; stroke-width: 4; stroke-linecap: round; }
.d-area { fill: none; stroke: var(--area, transparent); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* O logótipo do cliente: as duas versões estão sempre lá; cada desenho mostra uma
   (--usa-claro: 1 na gravação a laser), e só quando há logótipo (html.tem-logo). */
.d-logo, .d-logo-claro { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
html.tem-logo .desenho { --logo-cor: calc(1 - var(--usa-claro, 0)); --logo-claro: var(--usa-claro, 0); }
.d-logo { opacity: var(--logo-cor, 0); }
.d-logo-claro { opacity: var(--logo-claro, 0); }
.mostrar-area { --area: rgba(21, 26, 51, .45); }

/* ===== componentes.css ===== */
/* MENTA CONECTA — COMPONENTES: o que aparece em várias páginas. */
:root { --linha-campo: #6F7C76; }

/* ——— Faixa da pré-visualização (não fixa, não se fecha) ——— */
.faixa-demo { margin: 0; padding: 7px var(--margem); background: var(--papel-3); color: var(--tinta-2); font: 500 .8rem/1.4 var(--letra); text-align: center; border-bottom: 1px solid var(--linha); }

/* ——— Cabeçalho ——— */
.cabecalho { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .3s; }
.cabecalho.rolou { box-shadow: 0 1px 0 var(--linha), 0 10px 30px -18px rgba(21, 26, 51, .25); }
.cabecalho__barra { display: flex; align-items: center; gap: 24px; height: var(--cabecalho); transition: height .3s var(--suave); }
.cabecalho.rolou .cabecalho__barra { height: 62px; }
.cabecalho__marca { display: inline-flex; color: var(--tinta); flex: none; border-radius: 10px; text-decoration: none; }
/* O logótipo: o M deles (imagem, nunca redesenhado) e o nome ao lado, «Menta» fino e «Conecta» forte. */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__m { display: block; height: 38px; width: auto; transition: height .3s var(--suave); }
.logo__nome { font: 400 1.34rem/1 var(--letra-titulo); letter-spacing: -.025em; white-space: nowrap; }
.logo__fino { font-weight: 300; }
.logo__forte { font-weight: 800; margin-left: .2em; }
.cabecalho.rolou .logo__m { height: 31px; }
.cabecalho__nav { margin-left: auto; }
.cabecalho__nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cabecalho__nav a, .nav-produtos {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-pilula);
  font: 600 .98rem/1 var(--letra); color: var(--tinta); text-decoration: none; background: none; border: 0;
}
.nav-produtos .icone { width: 16px; height: 16px; transition: transform .3s var(--suave); }
.nav-produtos[aria-expanded="true"] .icone { transform: rotate(180deg); }
.cabecalho__nav a::after, .nav-produtos::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--realce);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--suave);
}
.cabecalho__nav a:hover::after, .cabecalho__nav a[aria-current]::after, .nav-produtos:hover::after, .nav-produtos[data-actual]::after { transform: scaleX(1); }
.cabecalho__accoes { display: flex; align-items: center; gap: 10px; }
.botao-redondo {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linha-forte);
  background: var(--branco); color: var(--tinta); transition: transform .3s var(--mola), background-color .2s, border-color .2s;
}
.botao-redondo .icone { width: 22px; height: 22px; }
.botao-redondo:hover { transform: translateY(-2px); border-color: var(--tinta); }
.botao-redondo--whatsapp { background: var(--verde-vivo); border-color: transparent; color: var(--tinta); }
.botao-redondo--whatsapp:hover { border-color: transparent; background: #1fc35d; }
.escuro .botao-redondo { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.escuro .botao-redondo--whatsapp { background: var(--verde-vivo); color: var(--tinta); border-color: transparent; }
.botao-orcamento {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: var(--r-pilula);
  border: 1.5px solid var(--tinta); background: var(--tinta); color: #fff; font: 650 .95rem/1 var(--letra); transition: transform .3s var(--mola);
}
.botao-orcamento .icone { width: 20px; height: 20px; }
.botao-orcamento:hover { transform: translateY(-2px); }
.contador {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--amarelo); color: var(--tinta); font: 750 .78rem/1 var(--letra); font-variant-numeric: tabular-nums;
}
.contador.bateu { animation: bater .5s var(--mola); }
@keyframes bater { 30% { transform: scale(1.35); } }
.chip-logo {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: var(--r-pilula); border: 1.5px solid var(--linha-forte);
  background: var(--branco); color: var(--tinta); font: 600 .9rem/1 var(--letra);
}
.chip-logo .icone { width: 18px; }
.chip-logo img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: var(--papel-2); padding: 3px; }
.chip-logo[hidden] { display: none; }
.botao-menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--tinta); }
.botao-menu .icone { width: 26px; height: 26px; }
@media (max-width: 1023px) {
  .cabecalho__nav, .chip-logo, .cabecalho__accoes .botao-redondo--whatsapp { display: none; }
  .botao-menu { display: inline-grid; place-items: center; }
  .cabecalho__accoes { margin-left: auto; gap: 6px; }
}
@media (max-width: 520px) {
  .botao-orcamento__texto { display: none; }
  .botao-orcamento { padding: 0 12px; }
  .logo__m { height: 32px; } .logo__nome { font-size: 1.16rem; }
}
@media (max-width: 360px) { .cabecalho .logo__nome { display: none; } }

/* ——— Painel dos produtos (divulgação) ——— */
.painel-produtos { position: absolute; left: 0; right: 0; top: 100%; padding: 4px 0 24px; }
.painel-produtos[hidden] { display: none; }
.painel-produtos__caixa {
  position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-3);
  padding: 22px 24px 18px; transform-origin: top center; animation: painel-entra .35s var(--suave);
}
@keyframes painel-entra { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.painel-produtos__titulo { margin: 0 0 14px; }
.painel-produtos__grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.painel-produtos__grelha li { animation: sobe .45s var(--suave) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }
.tile-familia {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: var(--r-2); text-decoration: none; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha); overflow: hidden; transition: transform .3s var(--mola), border-color .2s, background-color .2s;
}
.tile-familia::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cor); }
.tile-familia:hover { transform: translateY(-2px); border-color: var(--linha-forte); background: var(--branco); }
.tile-familia b { display: block; font: 700 1.02rem/1.2 var(--letra-titulo); }
.tile-familia small { color: var(--tinta-3); font-size: .84rem; }
.painel-produtos__pe { display: flex; gap: 24px; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--linha); font-size: .95rem; }

/* O ícone de família: três cores do M desalinhadas que acertam ao passar o rato. */
.icone-familia { width: 44px; height: 44px; flex: none; padding: 9px; border-radius: 14px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); overflow: visible; }
.icone-familia g { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--mola), opacity .3s; }
.icone-familia .if-c { stroke: var(--menta); opacity: .9; mix-blend-mode: multiply; }
.icone-familia .if-m { stroke: var(--magenta); opacity: .9; mix-blend-mode: multiply; }
.icone-familia .if-a { stroke: var(--amarelo); opacity: 1; mix-blend-mode: multiply; }
.icone-familia .if-k { stroke: var(--tinta); opacity: 0; }
.icone-familia .if-c { transform: translate(-1.6px, -1px); }
.icone-familia .if-m { transform: translate(1.4px, .6px); }
.icone-familia .if-a { transform: translate(-.4px, 1.6px); }
a:hover .icone-familia g, a:focus-visible .icone-familia g, .acertado .icone-familia g { transform: none; }
a:hover .icone-familia .if-k, a:focus-visible .icone-familia .if-k, .acertado .icone-familia .if-k { opacity: 1; transition-delay: .2s; }

/* ——— Menu do telemóvel (ecrã inteiro) ——— */
.menu-telemovel {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; padding: 14px var(--margem) calc(20px + env(safe-area-inset-bottom));
  background: var(--papel); overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(150% at calc(100% - 38px) 38px);
}
.menu-telemovel[hidden] { display: none; }
.menu-telemovel.a-abrir { animation: menu-abre .55s var(--suave); }
.menu-telemovel.a-fechar { animation: menu-abre .35s var(--suave) reverse forwards; }
@keyframes menu-abre { from { clip-path: circle(0 at calc(100% - 38px) 38px); } }
.menu-telemovel__topo { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 18px; }
.menu-telemovel__nav .etiqueta { margin-bottom: 12px; }
.menu-telemovel__familias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.menu-telemovel__familias a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: var(--r-2);
  background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font: 650 .88rem/1.15 var(--letra); text-align: center; overflow: hidden;
}
.menu-telemovel__familias a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cor); }
.menu-telemovel__paginas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
.menu-telemovel__paginas a { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--linha); font: 700 1.35rem/1.1 var(--letra-titulo); color: var(--tinta); text-decoration: none; }
.menu-telemovel__paginas a[aria-current]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.menu-telemovel__pe { margin-top: auto; padding-top: 22px; }
.menu-telemovel.a-abrir .menu-telemovel__familias li, .menu-telemovel.a-abrir .menu-telemovel__paginas li { animation: sobe .5s var(--suave) both; animation-delay: calc(120ms + var(--i) * 30ms); }
.menu-telemovel.a-abrir .icone-familia g { animation: acerta .7s var(--mola) both; animation-delay: calc(250ms + var(--i) * 40ms); }
.menu-telemovel.a-abrir .icone-familia .if-k { animation: aparece .3s ease both; animation-delay: calc(450ms + var(--i) * 40ms); }
@keyframes acerta { from { transform: translate(var(--dx, 2px), var(--dy, -2px)); } to { transform: none; } }
@keyframes aparece { to { opacity: 1; } }
html.menu-aberto { overflow: hidden; }

/* ——— Etiquetas pequenas ——— */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pilula); background: var(--papel-2);
  color: var(--tinta-2); font: 600 .78rem/1.1 var(--letra); white-space: nowrap;
}
.chip .icone { width: 14px; height: 14px; }
.chip--tinta.chip--azul .icone { color: #1E4FB8; }
.chip--tinta.chip--preta .icone { color: var(--tinta); }
.por-indicar { color: var(--tinta-3); font-style: italic; }

/* ——— Preço com e sem IVA, lado a lado e do mesmo tamanho ——— */
.preco-par { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.preco-par > span { display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap; }
.preco-par b { font-weight: 750; }
.preco-par small { color: var(--tinta-2); font-size: .82em; font-weight: 500; }

/* ——— Fichas de amostra das famílias ——— */
.amostras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .amostras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .amostras { grid-template-columns: minmax(0, 1fr); } }
.amostra__ligacao {
  display: flex; flex-direction: column; height: 100%; border-radius: var(--r-3); overflow: hidden; text-decoration: none; color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-1); transition: transform .45s var(--mola), box-shadow .35s;
}
.amostra__ligacao:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--sombra-2); }
.amostra__cor { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--cor); overflow: hidden; }
.amostra__cor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 20%, rgba(255, 255, 255, .28), transparent 55%); pointer-events: none; }
.amostra__desenho { position: absolute; width: 62%; left: 50%; top: 52%; transform: translate(-50%, -50%); transition: transform .6s var(--mola); }
.amostra__ligacao:hover .amostra__desenho { transform: translate(-50%, -54%) rotate(-4deg) scale(1.06); }
.amostra__nome-cor { display: none; position: absolute; left: 16px; bottom: 12px; z-index: 1; font: 650 .74rem/1 var(--letra); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-amostra); opacity: .85; }
.amostra__corpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.amostra__titulo { display: flex; align-items: center; gap: 10px; font: 750 1.3rem/1.1 var(--letra-titulo); letter-spacing: -.01em; }
.amostra__titulo .icone-familia { width: 36px; height: 36px; padding: 7px; border-radius: 11px; }
.amostra__frase { color: var(--tinta-2); font-size: .95rem; line-height: 1.45; }
.amostra__preco { margin-top: auto; padding-top: 8px; font-size: .92rem; color: var(--tinta-2); }
.amostra__preco b { color: var(--tinta); }
.amostra__n { display: inline-flex; align-items: center; gap: 6px; font: 650 .92rem/1 var(--letra); color: var(--realce); }
.amostra__n .icone { width: 16px; height: 16px; transition: transform .35s var(--mola); }
.amostra__ligacao:hover .amostra__n .icone { transform: translateX(4px); }

/* ——— Cartões de produto ——— */
.grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.grelha--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cartao { position: relative; content-visibility: auto; contain-intrinsic-size: auto 470px; }
.cartao__ligacao {
  display: flex; flex-direction: column; height: 100%; border-radius: var(--r-3); background: var(--branco); border: 1px solid var(--linha); color: var(--tinta);
  text-decoration: none; overflow: hidden; box-shadow: var(--sombra-1); transition: transform .45s var(--mola), box-shadow .35s, border-color .3s;
}
.cartao__ligacao:hover { transform: translateY(-5px); box-shadow: var(--sombra-2); border-color: var(--linha-forte); }
.cartao__desenho { position: relative; display: block; aspect-ratio: 1; background: linear-gradient(160deg, var(--papel) 0%, var(--papel-2) 100%); }
.cartao__desenho::before { content: ""; position: absolute; inset: 18% 18% 22%; border-radius: 50%; background: var(--cor); opacity: .1; filter: blur(30px); transition: background-color .35s; }
.cartao__desenho .desenho { position: absolute; inset: 7%; width: 86%; transition: transform .6s var(--mola); }
.cartao__ligacao:hover .desenho { transform: scale(1.05) rotate(-2deg); }
.cartao__corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 18px; flex: 1; }
.cartao__tipo { font: 650 .72rem/1 var(--letra); letter-spacing: .14em; text-transform: uppercase; color: var(--realce); }
.cartao__nome { font: 750 1.32rem/1.1 var(--letra-titulo); letter-spacing: -.01em; }
.cartao__frase { color: var(--tinta-2); font-size: .93rem; line-height: 1.4; }
.cartao__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cartao__cores { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--tinta-2); margin-top: 4px; }
.pontos { display: inline-flex; }
.pontos i { width: 16px; height: 16px; border-radius: 50%; background: var(--p); margin-right: -5px; box-shadow: 0 0 0 2px var(--branco), inset 0 0 0 1px rgba(21, 26, 51, .2); transition: transform .25s var(--mola); }
.pontos i:hover { transform: translateY(-3px) scale(1.15); }
.cartao__preco { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--linha); font-size: .92rem; color: var(--tinta-2); }
.cartao__preco .preco-par { font-size: 1.02rem; color: var(--tinta); gap: 0 10px; }
.cartao__q { display: block; color: var(--tinta-3); font-size: .8rem; margin-top: 2px; }

/* ——— Kits (cartões) ——— */
.kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.kit { display: flex; flex-direction: column; border-radius: var(--r-3); background: var(--branco); border: 1px solid var(--linha); overflow: hidden; box-shadow: var(--sombra-1); }
.kit--destaque { border-color: var(--tinta); }
.kit__pecas { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 168px; padding: 16px 12px 6px; background: var(--papel-2); }
.kit__peca { width: 108px; margin: 0 -18px; transition: transform .5s var(--mola); }
.kit__peca:nth-child(2) { transform: translateY(-10px); z-index: 1; }
.kit:hover .kit__peca { transform: translateY(-6px) rotate(calc((var(--i) - 1) * 4deg)); }
.kit__corpo { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.kit__nome { font: 750 1.35rem/1.1 var(--letra-titulo); }
.kit__frase { color: var(--tinta-2); font-size: .95rem; }
.kit__lista { margin: 0; padding: 0; list-style: none; font-size: .92rem; color: var(--tinta-2); }
.kit__lista b { color: var(--realce); font-variant-numeric: tabular-nums; }
.kit__preco { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--linha); }
.kit__preco .preco-par { font-size: 1.08rem; }
.kit__preco small { display: block; color: var(--tinta-3); font-size: .8rem; }
.kit .botao { align-self: flex-start; margin-top: 6px; }

/* ——— Secções ——— */
.seccao { padding-block: clamp(56px, 8vw, 112px); }
.seccao + .seccao { padding-top: 0; }
.seccao__topo { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.seccao__topo--lado { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; flex-wrap: wrap; }
.seccao__topo--lado > div { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contentor--estreito { width: min(100% - 2 * var(--margem), 820px); margin-inline: auto; }
.titulo--pequeno { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }

/* ——— Os passos ——— */
.passos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passos::before { content: ""; position: absolute; left: 16%; right: 16%; top: 31px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--menta), var(--amarelo), var(--magenta), var(--laranja)); transform-origin: left; transform: scaleX(var(--progresso, 1)); }
.passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.passo__n { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tinta); color: #fff; font: 750 1.5rem/1 var(--letra-titulo); box-shadow: 0 0 0 8px var(--papel); }
.passo__icone { position: absolute; top: 34px; left: calc(50% + 14px); }
.passo__icone .icone-familia { width: 40px; height: 40px; padding: 8px; box-shadow: var(--sombra-1); }
.passo h3 { margin-top: 10px; }
.passo p { color: var(--tinta-2); max-width: 30ch; }
@media (max-width: 760px) {
  .passos { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .passos::before { left: 31px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; transform-origin: top; transform: scaleY(var(--progresso, 1)); background: linear-gradient(180deg, var(--menta), var(--amarelo), var(--magenta), var(--laranja)); }
  .passo { display: grid; grid-template-columns: 64px 1fr; align-items: start; text-align: left; column-gap: 18px; }
  .passo__n { grid-row: span 2; }
  .passo h3 { margin-top: 4px; }
  .passo__icone { display: none; }
}

/* ——— Dúvidas ——— */
.duvidas { display: flex; flex-direction: column; gap: 10px; }
.duvida { border-radius: var(--r-2); background: var(--branco); border: 1px solid var(--linha); transition: border-color .25s, box-shadow .3s; }
.duvida[open] { border-color: var(--linha-forte); box-shadow: var(--sombra-1); }
.duvida summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font: 650 1.05rem/1.35 var(--letra); }
.duvida summary::-webkit-details-marker { display: none; }
.duvida__ponto { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--linha-forte); transition: background-color .3s, transform .4s var(--mola); }
.duvida[open] .duvida__ponto { background: var(--realce); transform: scale(1.35); }
.duvida__mais { width: 22px; height: 22px; margin-left: auto; flex: none; stroke: currentColor; transition: transform .35s var(--mola); }
.duvida[open] .duvida__mais { transform: rotate(135deg); }
.duvida__r { padding: 0 20px 20px 46px; color: var(--tinta-2); }

/* ——— Fecho ——— */
.fecho { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 24px; overflow: hidden; border-radius: calc(var(--r-3) + 6px); padding: clamp(32px, 6vw, 72px); background: var(--fundo-escuro); color: #fff; }
.fecho .lead { color: var(--escuro-texto); margin: 14px 0 26px; max-width: 46ch; }
.fecho__texto { position: relative; z-index: 1; }
/* As facetas do fecho: triângulos com as cores do M, a desvanecer para o lado do texto. */
.fecho__facetas { position: absolute; inset: 0 0 0 38%; background: url("../img/facetas-cor.svg") center / cover no-repeat;
  -webkit-mask: linear-gradient(105deg, transparent 6%, #000 72%); mask: linear-gradient(105deg, transparent 6%, #000 72%); opacity: .85; }
.accoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .fecho { grid-template-columns: 1fr; } .fecho__facetas { inset: 52% 0 0 0; -webkit-mask: linear-gradient(180deg, transparent, #000 70%); mask: linear-gradient(180deg, transparent, #000 70%); } }

/* ——— Migalhas e vizinhos ——— */
.migalhas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .88rem; color: var(--tinta-3); }
.migalhas li + li::before { content: "/"; margin-right: 6px; color: var(--linha-forte); }
.migalhas a { color: var(--tinta-2); text-decoration: none; }
.migalhas a:hover { color: var(--realce); }

/* ——— Passador (− 25 +) ——— */
.passador { display: inline-flex; align-items: center; border: 1.5px solid var(--linha-campo); border-radius: var(--r-pilula); background: var(--branco); overflow: hidden; }
.passador button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--tinta); }
.passador button:hover { background: var(--papel-2); }
.passador .icone { width: 18px; height: 18px; }
.passador input { width: 72px; height: 44px; border: 0; text-align: center; font: 650 1rem/1 var(--letra); font-variant-numeric: tabular-nums; background: none; -moz-appearance: textfield; }
.passador input::-webkit-outer-spin-button, .passador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ——— Amostras de cor (rádios) ——— */
.cor { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.cor::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--p); box-shadow: inset 0 0 0 1px rgba(21, 26, 51, .25); transition: transform .3s var(--mola); }
.cor::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s, transform .3s var(--mola); }
.cor:hover::before { transform: scale(1.1); }
.cor input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cor:has(input:checked)::after { border-color: var(--tinta); }
.cor:has(input:checked)::before { transform: scale(.82); }
.cor:has(input:focus-visible)::after { border-color: var(--foco); box-shadow: 0 0 0 2px var(--foco); }
.cor--pequena { width: 34px; height: 34px; }
.cor--pequena::before { width: 24px; height: 24px; }

/* ——— Rodapé ——— */
.escuro { color: #fff; }
.rodape { position: relative; margin-top: clamp(40px, 6vw, 80px); background: var(--tinta); padding: 0 0 calc(18px + env(safe-area-inset-bottom)); }
.rodape__cores { display: grid; grid-template-columns: repeat(5, 1fr); height: 6px; }
.rodape__cores i:nth-child(1) { background: var(--menta); }
.rodape__cores i:nth-child(2) { background: var(--amarelo); }
.rodape__cores i:nth-child(3) { background: var(--realce); }
.rodape__cores i:nth-child(4) { background: var(--laranja); }
.rodape__cores i:nth-child(5) { background: var(--vermelho); }
.rodape__grelha { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: clamp(40px, 6vw, 64px) 32px; }
.rodape__logo { display: inline-flex; color: #fff; text-decoration: none; }
.rodape__logo .logo__m { height: 46px; } .rodape__logo .logo__nome { font-size: 1.5rem; }
.rodape__marca p { margin: 14px 0 18px; color: var(--escuro-texto); max-width: 34ch; }
.rodape__redes { display: flex; gap: 10px; }
.rodape__titulo { margin: 0 0 12px; font: 650 .78rem/1 var(--letra); letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo); }
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape__grelha li { margin-bottom: 8px; }
.rodape a { color: #fff; text-decoration: none; }
.rodape__grelha a:hover { color: var(--amarelo); }
.rodape__contactos li { display: flex; gap: 10px; align-items: flex-start; color: var(--escuro-texto); }
.rodape__contactos .icone { width: 18px; height: 18px; flex: none; margin-top: 3px; stroke: var(--menta-claro); fill: none; stroke-width: 1.8; }
.rodape__contactos a, .rodape__contactos span { min-width: 0; overflow-wrap: anywhere; }
.rodape .por-indicar { color: var(--escuro-texto); }
.chamada { font-size: .8em; color: inherit; opacity: .85; }
.rodape__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; color: var(--escuro-texto); }
.rodape__legal p { margin: 0; }
.rodape__legal ul { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.rodape__legal a, .botao-movimento { color: var(--escuro-texto); }
.rodape__legal a:hover { color: #fff; }
.botao-movimento { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; }
.botao-movimento .icone { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.botao-movimento:hover { color: #fff; }
.rodape .rodape__livro { color: var(--escuro-texto); }
@media (max-width: 900px) { .rodape__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape__marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rodape__legal { flex-direction: column; } }

/* Os ícones de interface: traço. */
.icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ——— Gaveta do orçamento ——— */
.gaveta-orcamento { position: fixed; inset: 0; z-index: 95; }
.gaveta-orcamento[hidden] { display: none; }
.gaveta__fundo { position: absolute; inset: 0; background: rgba(21, 26, 51, .42); animation: aparece-fundo .3s ease both; }
@keyframes aparece-fundo { from { opacity: 0; } }
.gaveta { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--papel); box-shadow: var(--sombra-3); animation: gaveta-entra .45s var(--suave) both; }
@keyframes gaveta-entra { from { transform: translateX(100%); } }
.gaveta-orcamento.a-fechar .gaveta { animation: gaveta-entra .3s var(--suave) reverse forwards; }
.gaveta-orcamento.a-fechar .gaveta__fundo { animation: aparece-fundo .3s ease reverse forwards; }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--linha); }
.gaveta__topo h2 { font-size: 1.5rem; }
.gaveta__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; }
.gaveta__pe { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: var(--branco); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
  .gaveta { top: auto; left: 0; width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; animation-name: gaveta-sobe; }
  @keyframes gaveta-sobe { from { transform: translateY(100%); } }
  .gaveta__topo::before { content: ""; position: absolute; left: 50%; top: 7px; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--linha-forte); }
}
.linha-orc { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px 14px; padding: 14px 0; border-bottom: 1px dashed var(--linha); }
.linha-orc__desenho { width: 76px; height: 76px; border-radius: 16px; background: var(--papel-2); padding: 6px; }
.linha-orc__nome { font: 700 1.05rem/1.2 var(--letra-titulo); }
.linha-orc__detalhe { color: var(--tinta-2); font-size: .88rem; }
.linha-orc__fundo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linha-orc__fundo .passador button, .linha-orc__fundo .passador input { height: 38px; }
.linha-orc__fundo .passador button { width: 38px; }
.linha-orc__fundo .passador input { width: 64px; }
.linha-orc__preco { text-align: right; font-size: .95rem; }
.linha-orc__tirar { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--tinta-3); font-size: .85rem; padding: 6px; }
.linha-orc__tirar .icone { width: 16px; height: 16px; }
.linha-orc__tirar:hover { color: var(--realce); }
.orc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 650; }
.orc-total .preco-par { font-size: 1.15rem; justify-content: flex-end; }
.orc-nota { font-size: .8rem; color: var(--tinta-3); line-height: 1.45; }
.orc-campos { display: grid; gap: 10px; margin: 14px 0 4px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
.campo input, .campo textarea { border: 1.5px solid var(--linha-campo); border-radius: 14px; padding: 10px 12px; background: var(--branco); font-weight: 400; }
.campo textarea { min-height: 64px; resize: vertical; }
.orcamento-vazio { padding: 28px 0; color: var(--tinta-2); text-align: center; }
.orcamento-vazio .botao { margin-top: 14px; }
.orc-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.orc-botoes .botao { min-height: 48px; padding: 0 14px; font-size: .95rem; }
.orc-botoes .botao--bloco { grid-column: 1 / -1; }
@media (min-width: 641px) { .orc-botoes { grid-template-columns: 1fr 1fr; } }
.botao--branco { --b-fundo: var(--branco); --b-texto: var(--tinta); --b-borda: var(--linha-forte); }
.botao--branco:hover { --b-borda: var(--tinta); }
.botao--ghost { --b-fundo: transparent; --b-texto: var(--tinta-2); --b-borda: transparent; min-height: 40px; padding: 0 10px; }

/* ——— Aviso (toast) ——— */
.aviso { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 120; transform: translate(-50%, 140%); visibility: hidden; padding: 12px 18px; border-radius: var(--r-pilula); background: var(--tinta); color: #fff; font-weight: 600; font-size: .95rem; box-shadow: var(--sombra-3); transition: transform .45s var(--mola); pointer-events: none; max-width: calc(100% - 32px); }
.aviso.visivel { transform: translate(-50%, 0); visibility: visible; }

/* ——— Estado do atendimento ——— */
.atendimento { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .9rem; color: var(--tinta-2); }
.atendimento i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); }
.atendimento.aberto i { background: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(37, 211, 102, .2); }
.atendimento[hidden] { display: none; }

/* ——— Janela do logótipo ——— */
.janela-logo { width: min(520px, calc(100% - 32px)); border: 0; border-radius: var(--r-3); padding: 0; background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-3); }
.janela-logo::backdrop { background: rgba(21, 26, 51, .45); }
.janela-logo__corpo { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.janela-logo__topo { display: flex; justify-content: space-between; align-items: center; }
.janela-logo__topo h2 { font-size: 1.45rem; }
.janela-logo__previa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.janela-logo__previa .desenho { background: var(--branco); border-radius: 16px; padding: 6px; }
.janela-logo__nota { font-size: .85rem; color: var(--tinta-3); }
.janela-logo__opcoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; cursor: pointer; }
.interruptor input { appearance: none; width: 42px; height: 26px; border-radius: 13px; background: var(--linha-campo); position: relative; margin: 0; cursor: pointer; transition: background-color .25s; }
.interruptor input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s var(--mola); }
.interruptor input:checked { background: var(--realce); }
.interruptor input:checked::after { transform: translateX(16px); }
.zona-largar { display: grid; place-items: center; gap: 6px; padding: 26px; border: 2px dashed var(--linha-campo); border-radius: var(--r-2); text-align: center; color: var(--tinta-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.zona-largar:hover, .zona-largar.por-cima { border-color: var(--realce); background: color-mix(in srgb, var(--realce) 6%, transparent); }
.zona-largar .icone { width: 30px; height: 30px; color: var(--realce); }

/* ===== paginas.css ===== */
/* MENTA CONECTA — PÁGINAS. */

/* ——— Títulos com destaque ——— */
.titulo .destaque { position: relative; display: inline-block; color: var(--realce); white-space: nowrap; padding-bottom: .06em; }
.escuro .titulo .destaque { color: var(--realce-escuro); }
.traco { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.traco path { fill: none; stroke: var(--traco); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.escuro .traco path { stroke: var(--traco-escuro); }
/* A faceta: um triângulo como os do M, no fim do traço. */
.traco-faceta { position: absolute; right: -.36em; bottom: -.02em; width: .24em; height: .22em; background: var(--amarelo); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (max-width: 420px) { .titulo .destaque { white-space: normal; } .traco { display: none; } .traco-faceta { display: none; } }

/* ——— Herói do início ——— */
.heroi { position: relative; padding-block: clamp(28px, 5vw, 64px) clamp(48px, 7vw, 96px); overflow: hidden; }
.heroi__fundo { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--menta) 22%, transparent), transparent 42%),
  radial-gradient(circle at 6% 92%, color-mix(in srgb, var(--amarelo) 16%, transparent), transparent 40%);
  /* Sem aresta no fim do herói: o fundo desvanece para o papel (um só fundo na página). */
  -webkit-mask: linear-gradient(180deg, #000 62%, transparent); mask: linear-gradient(180deg, #000 62%, transparent); }
.heroi__grelha { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.heroi__texto { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.titulo--heroi { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); line-height: 1; }
.titulo--heroi .destaque { display: inline-block; margin-top: .06em; }
.heroi__lead { max-width: 34ch; }
@media (max-width: 900px) { .heroi__grelha { grid-template-columns: minmax(0, 1fr); } .palco { max-width: 520px; margin-inline: auto; width: 100%; } }

/* O palco: as peças à volta de um círculo facetado (triângulos de luz e sombra,
   como o M), com a cor a mudar no ciclo; à volta, facetas soltas nas cores do M. */
.palco { position: relative; aspect-ratio: 1; }
.palco__fundo { position: absolute; inset: 13%; border-radius: 50%; overflow: hidden; background: var(--acento); transition: background-color .8s ease; }
.palco__fundo::after { content: ""; position: absolute; inset: 0; background: url("../img/facetas-luz.svg") center / cover no-repeat; }
.palco__facetas i { position: absolute; width: 30px; height: 26px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.palco__facetas i:nth-child(1) { left: 4%; top: 9%; background: var(--amarelo); rotate: -12deg; }
.palco__facetas i:nth-child(2) { right: 7%; top: 4%; width: 22px; height: 19px; background: var(--magenta); rotate: 18deg; }
.palco__facetas i:nth-child(3) { left: 9%; bottom: 7%; width: 24px; height: 21px; background: var(--menta); rotate: 200deg; }
.palco__facetas i:nth-child(4) { right: 3%; bottom: 13%; background: var(--laranja); rotate: 160deg; }
.palco__peca { position: absolute; filter: drop-shadow(0 18px 22px rgba(21, 26, 51, .16)); }
.palco__peca .desenho { width: 100%; }
.palco__peca--tshirt { width: 52%; left: 24%; top: 14%; z-index: 2; }
.palco__peca--polo { width: 30%; left: 0; top: 52%; z-index: 3; }
.palco__peca--garrafa { width: 30%; right: -1%; top: 40%; z-index: 3; }
.palco__peca--bone { width: 30%; right: 4%; top: 2%; z-index: 1; }
.palco__peca--caneta { width: 34%; left: 33%; bottom: -1%; z-index: 4; }
.palco__accoes { position: absolute; left: 50%; bottom: -6px; z-index: 5; display: flex; gap: 8px; align-items: center; transform: translate(-50%, 100%); white-space: nowrap; }
.palco__pausa .i-tocar { display: none; }
.palco__pausa[aria-pressed="true"] .i-pausa { display: none; }
.palco__pausa[aria-pressed="true"] .i-tocar { display: block; }
@media (max-width: 900px) { .palco__accoes { position: static; transform: none; justify-content: center; margin-top: 18px; } .palco { margin-bottom: 70px; } .palco__accoes { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); } }
/* Num ecrã de 320 px, o botão do logótipo encolhe para caber com o da pausa. */
@media (max-width: 380px) { .palco__accoes .botao { padding: 0 14px; font-size: .86rem; gap: 6px; } }

/* ——— Topo das páginas e das famílias ——— */
.pagina-topo { padding-block: clamp(24px, 4vw, 48px) clamp(28px, 4vw, 52px); }
.pagina-topo .titulo { margin: 12px 0 14px; }
.pagina-topo .lead { max-width: 60ch; }
.familia-topo { position: relative; padding-block: clamp(18px, 3vw, 36px) clamp(26px, 3.5vw, 40px); overflow: hidden; }
.familia-topo::before { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -180px; border-radius: 50%; background: var(--cor); opacity: .14; filter: blur(6px); }
.familia-topo__grelha { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 24px; }
.familia-topo .titulo { margin: 10px 0 12px; }
.familia-topo__preco { margin: 14px 0 0; font-size: 1.02rem; color: var(--tinta-2); }
.familia-topo__preco .preco-par { font-size: 1.12rem; color: var(--tinta); }
.incluidos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .93rem; color: var(--tinta-2); }
.incluidos li { display: inline-flex; gap: 6px; align-items: center; }
.incluidos .icone { width: 18px; height: 18px; color: var(--verde); stroke-width: 2.4; }
.familia-topo__desenhos { position: relative; height: clamp(160px, 22vw, 260px); }
.familia-topo__peca { position: absolute; width: 46%; bottom: 0; filter: drop-shadow(0 14px 18px rgba(21, 26, 51, .14)); }
.familia-topo__peca:nth-child(1) { left: 0; z-index: 1; transform: rotate(-7deg); }
.familia-topo__peca:nth-child(2) { left: 27%; z-index: 2; bottom: 12%; }
.familia-topo__peca:nth-child(3) { right: 0; z-index: 1; transform: rotate(7deg); }
@media (max-width: 760px) { .familia-topo__grelha { grid-template-columns: 1fr; } .familia-topo__desenhos { display: none; } }

/* ——— Filtros ——— */
.catalogo { padding-bottom: clamp(48px, 7vw, 96px); scroll-margin-top: calc(var(--cabecalho) + 10px); }
.filtros { position: sticky; top: calc(62px + 8px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; padding: 10px; border-radius: var(--r-3); background: color-mix(in srgb, var(--branco) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--linha); box-shadow: var(--sombra-1); }
/* Um fieldset tem min-width: min-content por omissão: sem o 0 alargava a página. */
.filtros__cores { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; max-width: 100%; scroll-snap-type: x proximity; }
.filtros__cores::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .filtros__cores { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 899px) { .filtros__cores { -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; } }
.filtro-cor { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r-pilula); border: 1.5px solid var(--linha); background: var(--branco); font: 600 .88rem/1 var(--letra); cursor: pointer; scroll-snap-align: center; transition: border-color .2s, background-color .2s, color .2s; }
.filtro-cor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.filtro-cor em { font-style: normal; font-size: .76rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.filtro-cor__amostra { width: 22px; height: 22px; border-radius: 50%; background: var(--p); box-shadow: inset 0 0 0 1px rgba(21, 26, 51, .25); }
.filtro-cor__amostra--todas { background: conic-gradient(var(--menta), var(--amarelo), var(--realce), var(--laranja), var(--vermelho), var(--menta)); }
.filtro-cor:hover { border-color: var(--linha-forte); }
.filtro-cor:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro-cor:has(input:checked) em { color: var(--escuro-texto); }
.filtro-cor:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.filtros__resto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-left: auto; }
.seletor { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tinta-3); }
.seletor select { height: 40px; padding: 0 34px 0 12px; border-radius: var(--r-pilula); border: 1.5px solid var(--linha-campo); background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23151A33' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; font: 600 .9rem/1 var(--letra); color: var(--tinta); appearance: none; }
.filtros__conta { margin: 0; font-size: .88rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .filtros { top: calc(62px + 4px); border-radius: 22px; } .filtros__resto { margin-left: 0; } }
.vazio { padding: 40px 0; text-align: center; color: var(--tinta-2); }
.vazio[hidden] { display: none; }
/* O filtro de cor: sem JS por cartão. O cabeca.js põe html[data-cor] antes da
   primeira pintura; cada cartão traz --cor-<grupo>. */
.cartao { --cor: var(--cor-base); }
html[data-cor="brancos"] .cartao { --cor: var(--cor-brancos); }
html[data-cor="pretos"] .cartao { --cor: var(--cor-pretos); }
html[data-cor="azuis"] .cartao { --cor: var(--cor-azuis); }
html[data-cor="verdes"] .cartao { --cor: var(--cor-verdes); }
html[data-cor="vermelhos"] .cartao { --cor: var(--cor-vermelhos); }
html[data-cor="amarelos"] .cartao { --cor: var(--cor-amarelos); }
html[data-cor="castanhos"] .cartao { --cor: var(--cor-castanhos); }
html[data-cor="roxos"] .cartao { --cor: var(--cor-roxos); }
html[data-cor="brancos"] .p-familia .cartao:not([data-grupos~="brancos"]), html[data-cor="pretos"] .p-familia .cartao:not([data-grupos~="pretos"]),
html[data-cor="azuis"] .p-familia .cartao:not([data-grupos~="azuis"]), html[data-cor="verdes"] .p-familia .cartao:not([data-grupos~="verdes"]),
html[data-cor="vermelhos"] .p-familia .cartao:not([data-grupos~="vermelhos"]), html[data-cor="amarelos"] .p-familia .cartao:not([data-grupos~="amarelos"]),
html[data-cor="castanhos"] .p-familia .cartao:not([data-grupos~="castanhos"]), html[data-cor="roxos"] .p-familia .cartao:not([data-grupos~="roxos"]) { display: none; }
/* Caneca «Duo»: a cor escolhida vai para dentro e para a asa; por fora, branca. */
[data-alvo="dentro"] { --cor-dentro: var(--cor); --cor-asa: var(--cor); }
.desenho--dentro { --cor: #FFFFFF; }
.cartao[hidden] { display: none; }

/* ——— Procura outra coisa ——— */
.outra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-3); background: var(--papel-2); border: 1px dashed var(--linha-forte); }
.outra__titulo { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 6px; }
.outra p { color: var(--tinta-2); }
.outra__registo .icone-familia { width: 64px; height: 64px; padding: 13px; border-radius: 20px; }
@media (max-width: 700px) { .outra { grid-template-columns: 1fr; } }

/* ——— Página do produto ——— */
.produto-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding-top: clamp(16px, 2.5vw, 28px); }
.produto-topo .migalhas ol { margin: 0; }
.vizinhos { display: flex; gap: 8px; }
.vizinho { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: var(--r-pilula); border: 1.5px solid var(--linha); background: var(--branco); color: var(--tinta); text-decoration: none; font-weight: 650; font-size: .92rem; transition: border-color .2s, transform .3s var(--mola); }
.vizinho--seg { padding: 6px 8px 6px 14px; }
.vizinho small { display: block; font-size: .72rem; font-weight: 500; color: var(--tinta-3); line-height: 1.1; }
.vizinho .icone { width: 20px; height: 20px; }
.vizinho:hover { border-color: var(--tinta); transform: translateY(-2px); }
.produto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: 18px clamp(48px, 7vw, 96px); }
@media (max-width: 900px) { .produto { grid-template-columns: minmax(0, 1fr); } }
.produto__visual { position: sticky; top: calc(62px + 16px); }
@media (max-width: 900px) { .produto__visual { position: relative; top: 0; } }
.produto__palco { position: relative; aspect-ratio: 1; border-radius: calc(var(--r-3) + 8px); background: linear-gradient(165deg, var(--branco), var(--papel-2)); border: 1px solid var(--linha); overflow: hidden; }
.produto__fundo { position: absolute; inset: 14%; border-radius: 50%; background: var(--cor); opacity: .16; filter: blur(40px); transition: background-color .4s ease; }
.produto__palco .desenho { position: absolute; inset: 7%; width: 86%; view-transition-name: desenho; }
.produto__logo { position: absolute; right: 14px; bottom: 14px; }
.nota-desenho { margin-top: 10px; font-size: .84rem; color: var(--tinta-3); text-align: center; }
.configurador { display: flex; flex-direction: column; gap: 22px; }
.produto__nome { position: relative; display: inline-block; align-self: flex-start; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); margin: 6px 0 4px; }
.traco--nome { bottom: -.12em; height: .28em; }
.produto__descricao { color: var(--tinta-2); font-size: 1.05rem; max-width: 56ch; }
.atributos { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 0; padding: 0; list-style: none; }
.escolha { margin: 0; padding: 0; border: 0; min-width: 0; }
.escolha legend { display: flex; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 12px; padding: 0; font: 700 1.05rem/1.2 var(--letra-titulo); }
.escolha__valor { font: 500 .95rem/1 var(--letra); color: var(--tinta-2); }
.escolha__nota { margin-left: auto; font: 500 .85rem/1 var(--letra); color: var(--tinta-3); }
.cores { display: flex; flex-wrap: wrap; gap: 4px; }

/* Os escalões: linhas com o indicador a deslizar para a escolhida. */
.escaloes { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--linha-campo); border-radius: var(--r-2); overflow: hidden; background: var(--branco); }
.escalao { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; cursor: pointer; font-variant-numeric: tabular-nums; transition: color .25s; }
.escalao + .escalao { border-top: 1px solid var(--linha); }
.escalao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.escalao__q b { font-weight: 750; font-size: 1.05rem; }
.escalao__un { color: var(--tinta-3); font-size: .9rem; }
.escalao__total { font-weight: 700; min-width: 86px; text-align: right; }
.escalao:has(input:checked) { color: #fff; }
.escalao:has(input:checked) .escalao__un { color: var(--escuro-texto); }
.escalao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: -3px; }
.escaloes__indicador { position: absolute; left: 0; right: 0; top: 0; height: var(--h, 54px); background: var(--tinta); transform: translateY(var(--y, 0)); transition: transform .45s var(--mola), height .3s; border-radius: 0; }
.escaloes.sem-escalao .escaloes__indicador { opacity: 0; }
html:not(.js) .escalao:has(input:checked) { background: var(--tinta); }
.outra-qtd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.outra-qtd__rotulo { font-weight: 600; font-size: .95rem; }
.outra-qtd__nota { flex-basis: 100%; margin: 0; font-size: .88rem; color: var(--tinta-2); min-height: 1.3em; }
.outra-qtd__nota b { color: var(--realce); }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 16px; border: 1.5px solid var(--linha-campo); background: var(--branco); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcao__nome { font-weight: 650; }
.opcao__mais { font-size: .8rem; color: var(--tinta-3); }
.opcao:has(input:checked) { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.opcao:has(input:checked) .opcao__mais { color: var(--escuro-texto); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

/* A ficha do preço: como uma folha de um leque de cores. */
.ficha-preco { border-radius: var(--r-3); overflow: hidden; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-2); }
.ficha-preco__cor { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; min-height: 76px; padding: 14px 18px; background: var(--cor); color: var(--texto-cor, #fff); font: 700 1.05rem/1.1 var(--letra-titulo); transition: background-color .35s ease, color .35s; }
.ficha-preco__hex { font: 500 .78rem/1 var(--letra); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ficha-preco__corpo { padding: 16px 18px 18px; }
.ficha-preco__rotulo { margin: 0 0 6px; font-size: .88rem; color: var(--tinta-2); }
.ficha-preco__rotulo em { font-style: normal; color: var(--realce); font-weight: 600; }
.ficha-preco__valores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ficha-preco__valores span { display: flex; flex-direction: column; gap: 2px; }
.ficha-preco__valores b { font: 750 clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem)/1 var(--letra-titulo); letter-spacing: -.02em; }
.ficha-preco__valores small { font-size: .85rem; color: var(--tinta-2); font-weight: 600; }
.ficha-preco__un { margin: 10px 0 0; font-size: .9rem; color: var(--tinta-2); }
.ficha-preco__inclui { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--linha); font-size: .86rem; color: var(--tinta-2); }
.ficha-preco__inclui li { display: inline-flex; align-items: center; gap: 5px; }
.ficha-preco__inclui .icone { width: 16px; height: 16px; color: var(--verde); stroke-width: 2.4; }
.configurador__accoes { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.configurador__duvida { font-size: .95rem; }
.nota-legal { font-size: .8rem; color: var(--tinta-3); line-height: 1.5; }
.nota-legal a { color: var(--tinta-2); }

/* A barra fixa do telemóvel (aparece quando o botão principal sai do ecrã). */
.barra-produto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margem) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--branco) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--linha); transform: translateY(110%); transition: transform .4s var(--suave); }
.barra-produto__preco { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; font-size: .95rem; }
.barra-produto__preco small { color: var(--tinta-2); font-size: .78rem; }
@media (max-width: 900px) { .barra-produto { display: flex; } .barra-produto.visivel { transform: none; } }

/* Especificações */
.specs { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 24px; padding-top: 28px; border-top: 1px solid var(--linha); }
.specs__titulo { font-size: 1.6rem; }
.specs__lista { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.specs__lista div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--linha); }
.specs__lista dt { color: var(--tinta-3); }
.specs__lista dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 760px) { .specs, .specs__lista { grid-template-columns: 1fr; } }

/* ——— Kits (página) ——— */
.kits-config { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.kit-config { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; border-radius: calc(var(--r-3) + 4px); overflow: hidden; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-1); scroll-margin-top: calc(var(--cabecalho) + 20px); }
.kit-config--destaque { border-color: var(--tinta); }
.kit-config__pecas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; padding: 18px; background: var(--papel-2); }
.kit-peca { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-2); background: var(--branco); }
.kit-peca__desenho { aspect-ratio: 1; }
.kit-peca__nome { font-size: .92rem; } .kit-peca__nome b { color: var(--realce); }
.kit-peca__cores { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 0; }
.kit-peca__cor { font-size: .82rem; color: var(--tinta-3); }
.kit-config__lado { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 3vw, 30px); }
.kit-config__nome { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); }
.kit-config__frase { color: var(--tinta-2); }
.kit-config__pessoas { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-weight: 650; }
.kit-config__pessoas small { color: var(--tinta-3); font-weight: 500; }
.kit-config__por { font-size: .95rem; color: var(--tinta-2); }
.kit-config__total { font-size: 1.15rem; font-weight: 650; margin-bottom: 4px; }
.kit-config__total em { font-style: normal; color: var(--realce); font-size: .85rem; }
.kit-config .botao { margin-top: auto; }
@media (max-width: 860px) { .kit-config { grid-template-columns: 1fr; } }

/* ——— Sobre ——— */
.sobre-topo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: center; }
.leque { position: relative; height: 280px; }
.leque__folha { position: absolute; left: 30%; bottom: 0; width: 34%; height: 92%; border-radius: 14px; background: var(--cor); box-shadow: 0 0 0 1px rgba(21, 26, 51, .08), var(--sombra-2); transform-origin: 50% 92%; transform: rotate(calc((var(--i) - 2) * 15deg)); }
.leque__folha::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 10%; height: 22%; border-radius: 8px; background: rgba(255, 255, 255, .92); }
@media (max-width: 760px) { .sobre-topo { grid-template-columns: 1fr; } .leque { height: 200px; } }
.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.valor { padding: 24px; border-radius: var(--r-3); background: var(--branco); border: 1px solid var(--linha); }
.valor h2 { font-size: 1.3rem; margin: 14px 0 8px; }
.valor p { color: var(--tinta-2); }
.valor__icone .icone-familia { width: 52px; height: 52px; padding: 11px; }

/* ——— Contactos ——— */
.contactos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contacto, .contacto p, .texto-legal { min-width: 0; overflow-wrap: anywhere; }
.contacto { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r-3); background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; transition: transform .4s var(--mola), box-shadow .3s; }
a.contacto:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.contacto h2 { font-size: 1.35rem; margin-top: 8px; }
.contacto p { color: var(--tinta-2); }
.contacto__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--papel-2); }
.contacto--whatsapp .contacto__icone { background: var(--verde-vivo); }
.contactos-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.horario { padding: 24px; border-radius: var(--r-3); background: var(--papel-2); }
.horario h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 12px; }
.horario dl { margin: 0 0 10px; }
.horario dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--linha-forte); }
.horario dd { margin: 0; font-weight: 600; }
.horario p { color: var(--tinta-2); }
@media (max-width: 860px) { .contactos, .contactos-info { grid-template-columns: 1fr; } }

/* ——— Ligações (bio) ——— */
.p-ligacoes .cabecalho, .p-ligacoes .rodape__grelha { display: none; }
.ligacoes { min-height: 70vh; display: grid; place-items: center; padding: 36px var(--margem); }
.ligacoes__caixa { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ligacoes__logo { color: var(--tinta); text-decoration: none; } .ligacoes__logo .logo { flex-direction: column; gap: 12px; } .ligacoes__logo .logo__m { height: 72px; } .ligacoes__logo .logo__nome { font-size: 1.6rem; }
.ligacoes__frase { color: var(--tinta-2); margin-bottom: 8px; font: 500 1.05rem/1.4 var(--letra); letter-spacing: 0; }
.ligacoes__lista { width: 100%; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ligacoes__lista a { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: var(--r-2); background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-weight: 650; overflow: hidden; transition: transform .3s var(--mola); }
.ligacoes__lista a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cor); }
.ligacoes__lista a:hover { transform: translateX(4px); }
.ligacoes__lista .icone:last-child { margin-left: auto; width: 20px; height: 20px; color: var(--realce); }

/* ——— Texto legal ——— */
.texto-legal h2 { font-size: 1.45rem; margin: 34px 0 12px; }
.texto-legal p, .texto-legal li { color: var(--tinta-2); margin-bottom: 10px; }
.texto-legal ul, .texto-legal ol { padding-left: 1.2em; }
.identificacao { margin: 0; display: grid; gap: 0; border-top: 1px dashed var(--linha); }
.identificacao div { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--linha); }
.identificacao dt { color: var(--tinta-3); }
.identificacao dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ral { color: var(--tinta-2); }
.ral a { color: var(--realce); }

/* ——— 404 ——— */
.lista-404 { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; padding: 0; list-style: none; }
.lista-404 a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pilula); background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-weight: 600; }
.lista-404 .icone-familia { width: 34px; height: 34px; padding: 6px; border-radius: 50%; }

/* ——— Orçamento (página) ——— */
.seccao--orcamento .linha-orc { grid-template-columns: 96px minmax(0, 1fr); }
.seccao--orcamento .linha-orc__desenho { width: 96px; height: 96px; }
.orc-pagina-pe { margin-top: 22px; padding: 20px; border-radius: var(--r-3); background: var(--branco); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 12px; }

/* ===== movimento.css ===== */
/* MENTA CONECTA — MOVIMENTO. Tudo o que mexe está aqui, para se poder ler, parar e
   desligar num sítio só:
   · `prefers-reduced-motion: reduce` desliga tudo (no fim do ficheiro);
   · `html[data-movimento="parado"]` («Pausar movimento», WCAG 2.2.2) pára o que
     se repete; as entradas (menos de 1 s, uma vez) continuam;
   · `.fora` (fora do ecrã, posto pelo site.js) pausa o que se repete. */

/* ——— Títulos: as palavras sobem, o destaque acerta o registo, o traço desenha-se ——— */
.js .titulo .p { display: inline-block; }
.js .titulo:not(.visivel) .p { transform: translateY(.5em) rotate(2.5deg); opacity: 0; }
.js .titulo.visivel .p { animation: palavra .75s var(--mola) both; animation-delay: calc(.05s + var(--i) * .06s); }
@keyframes palavra { from { transform: translateY(.5em) rotate(2.5deg); opacity: 0; } }
/* O H1 do início não espera pelo scroll e só se mexe (nunca começa invisível: é o
   maior elemento do primeiro ecrã, o LCP). Nasce `.visivel` (paginas.mjs): sem isso
   ficava até 2,5 s no estado escondido — descido e rodado, com o traço a riscá-lo. */
.js .titulo--heroi .p { opacity: 1 !important; animation: palavra-so-mexe .8s var(--mola) both !important; animation-delay: calc(.08s + var(--i) * .07s) !important; }
@keyframes palavra-so-mexe { from { transform: translateY(.42em) rotate(2deg); } }
.js .titulo.visivel .destaque, .js .titulo--heroi .destaque { animation: registo 1.2s var(--suave) both; animation-delay: .35s; }
@keyframes registo {
  from { text-shadow: -.05em -.02em 0 rgba(32, 148, 120, .75), .045em .025em 0 rgba(255, 236, 8, .95); }
  to { text-shadow: 0 0 0 rgba(32, 148, 120, 0), 0 0 0 rgba(255, 236, 8, 0); }
}
/* O traço desenha-se com um recorte (clip-path), não com o tracejado: com
   `vector-effect: non-scaling-stroke` o comprimento do traço deixa de bater
   com o `pathLength` e ficava a meio. */
.js .titulo:not(.visivel) .traco, .js .produto__nome:not(.visivel) .traco { clip-path: inset(0 100% 0 0); }
.js .titulo.visivel .traco, .js .titulo--heroi .traco, .js .produto__nome.visivel .traco {
  animation: traco-desenha .9s var(--suave) .55s both, traco-tinta 8s ease-in-out 3.5s infinite;
}
@keyframes traco-desenha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* De vez em quando o traço volta a passar a tinta: sai pela direita e volta a
   entrar pela esquerda (o «sublinhado em movimento»). */
@keyframes traco-tinta { 0%, 84% { clip-path: inset(0 0 0 0); } 91% { clip-path: inset(0 0 0 100%); } 91.01% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.js .titulo:not(.visivel) .traco-faceta { transform: scale(0); }
.js .titulo.visivel .traco-faceta, .js .titulo--heroi .traco-faceta { animation: faceta-cai .55s var(--mola) 1.35s both, faceta-bate 8s ease-in-out 3.5s infinite; }
@keyframes faceta-cai { from { transform: translateY(-.6em) scale(0); } }
@keyframes faceta-bate { 0%, 96% { transform: none; } 98% { transform: scale(1.5); } }
.produto__nome .traco path { stroke: var(--amarelo); stroke-width: 7; }

/* ——— Entradas ao aparecer (uma vez) ——— */
.js .revelar:not(.visivel) { opacity: 0; transform: translateY(26px); }
.js .revelar.visivel { animation: entra .7s var(--suave) both; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes entra { from { opacity: 0; transform: translateY(26px); } }
.js .cartao.revelar:not(.visivel) { transform: translateY(18px) scale(.98); }
.visivel .icone-familia g, .icone-familia.visivel g { animation: acerta .8s var(--mola) .25s both; }
.icone-familia .if-c { --dx: -1.6px; --dy: -1px; } .icone-familia .if-m { --dx: 1.4px; --dy: .6px; } .icone-familia .if-a { --dx: -.4px; --dy: 1.6px; }

/* ——— O palco do início ——— */
.palco__peca { animation: flutua 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.palco__peca--caneta { animation-name: flutua-caneta; }
@keyframes flutua-caneta { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -3deg; } }
.js .palco__peca { opacity: 1; }
.palco.entra .palco__peca { animation: chega .9s var(--mola) both, flutua 6.5s ease-in-out infinite; animation-delay: calc(.2s + var(--i) * .1s), calc(var(--i) * -1.3s); }
@keyframes chega { from { opacity: 0; transform: scale(.6) translateY(30px); } }
.palco.entra .palco__fundo { animation: fundo-cresce 1s var(--mola) both; }
@keyframes fundo-cresce { from { transform: scale(.2); } }
.palco__facetas i { animation: faceta-gira 1.2s var(--suave) .4s both, faceta-flutua 7s ease-in-out 1.6s infinite; }
.palco__facetas i:nth-child(2n) { animation-delay: .55s, 2.4s; }
@keyframes faceta-gira { from { transform: scale(.4) rotate(-120deg); opacity: 0; } }
@keyframes faceta-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ——— Os passos: a linha enche com o scroll ——— */
@supports (animation-timeline: view()) {
  .passos::before { animation: linha-enche linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  @keyframes linha-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (max-width: 760px) { @keyframes linha-enche { from { transform: scaleY(0); } to { transform: scaleY(1); } } }
}

/* ——— Pausas ——— */
.fora, .fora *, .fora *::before, .fora *::after { animation-play-state: paused !important; }
html[data-movimento="parado"] .palco__peca,
html[data-movimento="parado"] .botao--principal.vivo::after { animation: none !important; }
html[data-movimento="parado"] .traco { animation: traco-desenha .9s var(--suave) .55s both !important; }
html[data-movimento="parado"] .traco-faceta { animation: faceta-cai .55s var(--mola) 1.35s both !important; }
html[data-movimento="parado"] .botao-movimento { color: var(--amarelo); }

/* ——— Transições entre páginas ——— */
@view-transition { navigation: auto; }
.cabecalho { view-transition-name: cabecalho; }
::view-transition-group(desenho) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(desenho), ::view-transition-new(desenho) { height: 100%; object-fit: contain; }
::view-transition-old(desenho) { animation: vt-cede .55s linear both; }
::view-transition-new(desenho) { animation: none; }
@keyframes vt-cede { 0%, 40% { opacity: 1; } 80%, 100% { opacity: 0; } }
::view-transition-old(root) { animation: vt-sai .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-entra .45s .08s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* ——— Sem movimento (preferência do sistema) ——— */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .titulo:not(.visivel) .p, .js .revelar:not(.visivel) { opacity: 1; transform: none; }
  .js .titulo:not(.visivel) .traco, .js .produto__nome:not(.visivel) .traco { clip-path: none; }
  .js .titulo:not(.visivel) .traco-faceta { transform: none; }
  .palco__peca { animation: none !important; }
}