/* MundOn: o site. A parede de azulejos do Padrão, com os painéis de demonstração emoldurados por uma barra de azulejo (tema C). */

:root {
  --cal: #ECE9E1;            /* parede caiada, antes dos azulejos */
  --vidrado: #FBF9F3;        /* o branco do azulejo */
  --papel: #FFFFFF;          /* as cartelas onde está o texto */
  --tinta: #0F1733;
  --tinta-suave: #4A5578;
  --cobalto: #1F3DA6;
  --cobalto-escuro: #182F86;
  --aguada: #EEF2FB;
  --gema: #FFC53D;
  --ocre: #DE9F2C;
  --manganes: #74405F;
  --menta: #A9E5CB;
  --tomate: #E94B2F;
  --rejunte: 2px;
  --topo: 70px;
  --raio: 4px;
  --moldura: 16px;           /* a barra que emoldura os painéis */
  /* O friso de azulejo das barras entre secções e das molduras dos painéis: fundo amarelo-ocre e o desenho a cobalto
     (o "tema C" dos testes de cor, escolhido pelo Kikos a 2026-10-05). */
  --friso-fundo: #E9B23F;
  --friso-traco: #223E92;    /* as orlas, a onda, as pétalas e as contas */
  --friso-folha: #3654B4;    /* as folhas */
  --friso-filete: #3654B4;   /* os fios finos junto às orlas */
  --friso-miolo: #FBF9F3;    /* o miolo das flores */
  --friso-borda: #E9B23F;    /* a cor da moldura, se a imagem não carregar */
  --botao-aresta: rgba(0, 0, 0, .2);
  --f-titulo: "Alegreya", "Alegreya recurso", Georgia, "Times New Roman", serif;
  --f-texto: "Alegreya Sans", "Alegreya Sans recurso", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --margem: clamp(14px, 4vw, 48px);
  --colunas: 6;
  --faixa: 129px;
  color-scheme: light;
}
@media (min-width: 900px) {
  :root { --topo: 78px; }
}
@media (min-width: 960px) {
  :root { --moldura: 20px; }
}

/* ---------- base ---------- */

/* As letras do site, alojadas aqui e não na Google (Google Fonts, licença SIL OFL 1.1: ver fontes/OFL-*.txt).
   Só o alfabeto latino (todos os acentos do português e o €) e só os pesos usados: Alegreya 800 e itálico 700 a 800,
   Alegreya Sans 400 e 700. */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 800; font-display: swap; src: url("fontes/alegreya-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 700 800; font-display: swap; src: url("fontes/alegreya-italico.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/alegreya-sans-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/alegreya-sans-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Letras de recurso, ajustadas às medidas das letras do site (medidas no Chrome): enquanto as letras não chegam,
   o texto ocupa o mesmo espaço e a página não salta. */
@font-face { font-family: "Alegreya recurso"; src: local("Georgia"); size-adjust: 80%; ascent-override: 127%; descent-override: 44%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya recurso"; font-style: italic; src: local("Georgia Italic"), local("Georgia"); size-adjust: 72%; ascent-override: 142%; descent-override: 49%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Sans recurso"; src: local("Arial"), local("Roboto"), local("Helvetica"); size-adjust: 84%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cal); scroll-padding-top: calc(var(--topo) + 12px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-x: clip;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--cobalto); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cobalto); outline-offset: 3px; }
[id] { scroll-margin-top: 12px; }
main:focus { outline: none; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

.contentor { width: min(100% - 2 * var(--margem), 1280px); margin-inline: auto; }

/* ---------- a parede ---------- */

/* Caiada, com o grão e as manchas da cal, desenhados em SVG (sem ficheiros de imagem). */
.parede {
  position: absolute;
  z-index: 0;
  top: var(--topo);
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--cal);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .34 0 0 0 0 .31 0 0 0 0 .26 .22 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .011' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .49 0 0 0 0 .42 .42 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='720' height='720' filter='url(%23m)'/%3E%3C/svg%3E");
}
.pagina { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.pagina > main { flex: 1 0 auto; }

.faixa {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--rejunte);
  height: var(--faixa);
  margin-bottom: var(--rejunte);
  transition: opacity .9s ease;
}
/* Atrás do texto comprido a parede acalma: azulejos esbatidos, como se tivessem levado uma demão de cal. */
.faixa.meia { opacity: .5; }
.faixa.calma { opacity: .24; }

.az {
  --acento: #93A9DF;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 2px;
  background: radial-gradient(130% 130% at 24% 18%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 55%) var(--vidrado);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(70, 58, 36, .08);
}
.az.posto { opacity: 1; }
.az.v1 { --vidrado: #F8F5EC; }
.az.v2 { --vidrado: #FDFCF8; }
.az.v3 { --vidrado: #F5F1E6; }
.az.am { --acento: var(--ocre); }
.az.mn { --acento: var(--manganes); }

/* ---------- cartelas: onde está o texto, sempre por cima da parede ---------- */

.cartela {
  position: relative;
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow:
    inset 0 0 0 2px var(--cobalto),
    inset 0 0 0 5px var(--papel),
    inset 0 0 0 6px rgba(31, 61, 166, .38),
    0 2px 4px rgba(15, 23, 51, .08),
    0 24px 44px -24px rgba(15, 23, 51, .5);
}

/* ---------- painéis: as demonstrações, emolduradas com uma barra de azulejo ---------- */

/* A moldura é a mesma barra, numa imagem (uma imagem não lê as variáveis da página, por isso as cores vão escritas nela). */
:root {
  --friso-moldura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 96 96'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cpath d='M0 0H100V4.4H0Z' fill='%23223E92'/%3E%3Cpath d='M0 45.6H100V50H0Z' fill='%23223E92'/%3E%3Cpath d='M0 7.4H100V9.2H0Z' fill='%233654B4'/%3E%3Cpath d='M0 40.8H100V42.6H0Z' fill='%233654B4'/%3E%3Cpath d='M0 25C15 9 35 9 50 25C65 41 85 41 100 25' fill='none' stroke='%23223E92' stroke-width='3.8'/%3E%3Cpath d='M24.9 13C28.8 16.4 35.7 12.2 39 5.5C31.6 4.5 24.3 7.9 24.9 13Z' fill='%233654B4'/%3E%3Cpath d='M23 13.3C22.7 9.8 18.2 9.2 14.2 11.4C16.9 15.1 21.3 16.4 23 13.3Z' fill='%233654B4'/%3E%3Cpath d='M74.9 37C74.3 42.1 81.6 45.5 89 44.5C85.7 37.8 78.8 33.6 74.9 37Z' fill='%233654B4'/%3E%3Cpath d='M73 36.7C71.3 33.6 66.9 34.9 64.2 38.6C68.2 40.8 72.7 40.2 73 36.7Z' fill='%233654B4'/%3E%3Cpath d='M24 31.5C26.9 30.8 26.7 27.8 24 25.5C21.3 27.8 21.1 30.8 24 31.5Z' fill='%23223E92'/%3E%3Cpath d='M25.3 33.8C24.5 36.7 27.2 37.9 30.5 36.8C29.9 33.3 27.4 31.6 25.3 33.8Z' fill='%23223E92'/%3E%3Cpath d='M22.7 33.8C20.6 31.6 18.1 33.3 17.5 36.8C20.8 37.9 23.5 36.7 22.7 33.8Z' fill='%23223E92'/%3E%3Ccircle cx='24' cy='33' r='2.2' fill='%23FBF9F3'/%3E%3Cpath d='M74 15.5C76.9 14.8 76.7 11.8 74 9.5C71.3 11.8 71.1 14.8 74 15.5Z' fill='%23223E92'/%3E%3Cpath d='M75.3 17.8C74.5 20.7 77.2 21.9 80.5 20.8C79.9 17.3 77.4 15.6 75.3 17.8Z' fill='%23223E92'/%3E%3Cpath d='M72.7 17.8C70.6 15.6 68.1 17.3 67.5 20.8C70.8 21.9 73.5 20.7 72.7 17.8Z' fill='%23223E92'/%3E%3Ccircle cx='74' cy='17' r='2.2' fill='%23FBF9F3'/%3E%3Ccircle cx='0' cy='25' r='3' fill='%23223E92'/%3E%3Ccircle cx='50' cy='25' r='3' fill='%23223E92'/%3E%3Ccircle cx='100' cy='25' r='3' fill='%23223E92'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath d='M0 0H24V2.11H2.11V24H0Z' fill='%23223E92'/%3E%3Cpath d='M3.55 3.55H24V4.42H4.42V24H3.55Z' fill='%233654B4'/%3E%3Cpath d='M19.58 19.58H24V20.45H20.45V24H19.58Z' fill='%233654B4'/%3E%3Cpath d='M21.89 21.89H24V24H21.89Z' fill='%23223E92'/%3E%3Cpath d='M4.42 4.42H19.58V19.58H4.42Z' fill='%23F4CF73'/%3E%3Cellipse cx='12' cy='8' rx='1.9' ry='2.9' fill='%233654B4'/%3E%3Cellipse cx='12' cy='16' rx='1.9' ry='2.9' fill='%233654B4'/%3E%3Cellipse cx='8' cy='12' rx='2.9' ry='1.9' fill='%233654B4'/%3E%3Cellipse cx='16' cy='12' rx='2.9' ry='1.9' fill='%233654B4'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23223E92'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23FBF9F3'/%3E%3Ccircle cx='7.6' cy='7.6' r='.85' fill='%23223E92'/%3E%3Ccircle cx='16.4' cy='7.6' r='.85' fill='%23223E92'/%3E%3Ccircle cx='7.6' cy='16.4' r='.85' fill='%23223E92'/%3E%3Ccircle cx='16.4' cy='16.4' r='.85' fill='%23223E92'/%3E%3C/g%3E%3C/defs%3E%3Crect width='96' height='96' fill='%23E9B23F'/%3E%3Cuse href='%23b' transform='matrix(0.48 0 0 0.48 24 0)'/%3E%3Cuse href='%23b' transform='matrix(0.48 0 0 -0.48 24 96)'/%3E%3Cuse href='%23b' transform='matrix(0 0.48 0.48 0 0 24)'/%3E%3Cuse href='%23b' transform='matrix(0 0.48 -0.48 0 96 24)'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 96 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 96)'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 -1 96 96)'/%3E%3C/svg%3E");
}
.painel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--moldura) solid var(--friso-borda);
  border-image: var(--friso-moldura) 25% / var(--moldura) round;
  background: var(--fundo, var(--vidrado));
  color: var(--frente, var(--tinta));
  box-shadow: 0 2px 4px rgba(15, 23, 51, .1), 0 26px 46px -24px rgba(15, 23, 51, .55);
  overflow: hidden;
  overflow: clip;
}
.painel__vivo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px 18px;
}
@media (min-width: 960px) {
  .painel__vivo { padding: 20px 22px 22px; }
}
.legenda {
  color: var(--cobalto);
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* ---------- cabeçalho ---------- */

/* Em baixo, o mesmo filete duplo das cartelas. */
.topo {
  /* Sempre à vista ao descer a página (pedido do Kikos, 2026-10-06). */
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--topo);
  background: var(--papel);
  box-shadow: inset 0 -2px 0 var(--cobalto), inset 0 -4px 0 var(--papel), inset 0 -5px 0 rgba(31, 61, 166, .45);
}
.topo__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 0;
  min-height: calc(var(--topo) - 6px);
  padding-bottom: 6px;
}
.topo ul { flex-wrap: wrap; row-gap: 0; }
.ligacao { overflow-wrap: anywhere; }
.marca {
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1;
  text-decoration: none;
}
.marca__on {
  margin-left: .04em;
  padding: .05em .14em .1em;
  border-radius: .2em;
  background: var(--gema);
}
.topo ul { display: flex; gap: clamp(14px, 2.6vw, 32px); margin: 0; padding: 0; list-style: none; }
.topo nav a {
  display: inline-block;
  padding-block: 10px;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}
@media (max-width: 699px) {
  .topo__extra { display: none; }
}
/* O WhatsApp do Kikos no cabeçalho: com o número no computador, só o símbolo no telemóvel (não cabe mais). */
.topo nav a.topo__wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 2px solid var(--cobalto); border-radius: 99px;
  color: var(--cobalto); white-space: nowrap;
}
.topo__wa svg { width: 20px; height: 20px; flex: none; color: #1DA851; }   /* o verde do WhatsApp, escurecido para ter contraste 3:1 no branco */
.topo__wa:hover svg { color: inherit; }
.topo__wa:hover { background: var(--cobalto); color: var(--papel) !important; }
@media (max-width: 899px) {
  .topo nav a.topo__wa { padding: 7px; }
  .topo__wa-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.topo nav ul { align-items: center; }
/* O WhatsApp a flutuar no canto de baixo, à direita, só no telemóvel e no tablet; aí sai do cabeçalho, que volta a ter
   o "Contacto" (pedido do Kikos, 2026-10-07). */
.wa-flutuante { display: none; }
@media (max-width: 899px) {
  .topo__wa-item { display: none; }
  .wa-flutuante {
    position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid; place-items: center; width: 56px; height: 56px;
    /* Verde com o símbolo branco (Kikos, 2026-10-07): um verde do WhatsApp um pouco mais escuro, para o branco ter
       contraste de 3:1 (o verde original dá 2:1). */
    border: 0; border-radius: 50%;
    background: #1DA851; color: #FFFFFF;
    box-shadow: 0 6px 18px -6px rgba(15, 23, 51, .45);
  }
  .wa-flutuante svg { width: 30px; height: 30px; }
}
@media print { .wa-flutuante { display: none !important; } }
@media (max-width: 480px) {
  .marca { font-size: 1.45rem; }
  .topo ul { gap: 12px; }
  .topo nav a { font-size: 1.0625rem; }
}
/* Depois da regra de 480 px, para valer nos telemóveis mais estreitos. */
@media (max-width: 359px) {
  .marca { font-size: 1.25rem; }
  .topo ul { gap: 9px; }
  .topo nav a { font-size: .9375rem; }
}

/* ---------- abertura ---------- */

/* No telemóvel, a primeira faixa da parede fica à vista por cima do texto. */
.abertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: calc(var(--faixa) + var(--rejunte)) 64px;
}
.abertura__cabeca { display: grid; gap: 14px; }
h1 {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.h1__a, .h1__b { display: block; }
/* Palavras com hífen que não se partem no fim da linha ("procuram-/te"). */
.inteiro { white-space: nowrap; }
.h1__b { color: var(--cobalto); font-style: italic; font-weight: 700; text-wrap: balance; }
.abertura__sub {
  /* Toda a largura da caixa (com 44ch sobrava um espaço vazio à direita, 2026-10-06). */
  color: var(--tinta-suave);
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
  line-height: 1.45;
}

/* escolha do negócio */
.setores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.setores__rotulo {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}
.setor {
  min-height: 40px;
  padding: 8px 13px;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.setor[aria-pressed="true"] { border-color: var(--cobalto); background: var(--cobalto); color: var(--papel); }
@media (max-width: 480px) {
  .setores { gap: 8px 6px; }
  .setor { padding: 8px 9px; font-size: .9375rem; }   /* os seis negócios em duas linhas num telemóvel de 390 px */
}
@media (max-width: 389px) {
  .setores { gap: 7px 5px; }
  .setor { padding: 7px 7px; font-size: .875rem; }   /* e também nos de 360 e 375 px */
}

.setores__resultado { margin-top: 12px; font-weight: 700; }
.setores__outro { margin-top: 2px; color: var(--cobalto); font-weight: 700; }
.setores__resultado a { display: inline-block; padding-block: 8px; }
@media (min-width: 960px) {
  .setores__resultado { display: none !important; }
}

.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
/* Título, subtítulo e escolha do negócio numa só caixa (pedido do Kikos, 2026-10-06). */
.abertura__cabeca .setores { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--linha, rgba(31, 61, 166, .18)); }
.abertura__cabeca .abertura__acoes { margin-top: 8px; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--cobalto);
  color: var(--papel);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--botao-aresta);
}
.ligacao { display: inline-block; padding-block: 8px; color: var(--cobalto); font-weight: 700; }

@media (hover: hover) and (pointer: fine) {
  .topo nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .setor:hover { background: var(--aguada); }
  .setor[aria-pressed="true"]:hover { background: var(--cobalto-escuro); }
  .botao:hover { background: var(--cobalto-escuro); }
  .ligacao:hover { text-decoration-thickness: 3px; }
}

/* ---------- os painéis de demonstração da abertura ---------- */

.demos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }

/* o site de exemplo, num telemóvel que desce com a página */
.painel--telemovel {
  /* No branco do vidrado, como os outros painéis (o Kikos achou o azul cheio pesado, 2026-10-06). */
  --fundo: var(--vidrado);
  --frente: var(--tinta);
  --tel: 232px;
  justify-self: center;
  width: min(100%, 296px);
  height: 520px;
}
.painel--telemovel .legenda { color: var(--cobalto); }
.painel--telemovel .painel__vivo { padding-bottom: 0; }
.telemovel-caixa { position: relative; flex: 1 1 auto; min-height: 0; }
.telemovel-caixa .telemovel { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); }
.telemovel {
  width: min(var(--tel, 232px), 100%);
  aspect-ratio: 9 / 19;
  padding: 7px;
  border-radius: 36px;
  background: var(--tinta);
  box-shadow: 0 24px 48px -12px rgba(5, 12, 40, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .1);
}
.telemovel__ecra {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 29px;
  background: var(--papel);
  container-type: size;
}
.telemovel__ecra::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 3cqi; left: 50%;
  width: 26cqi; height: 6.5cqi;
  border-radius: 99px;
  background: var(--tinta);
  transform: translateX(-50%);
}

.site {
  --a: var(--gema);
  --at: var(--tinta);
  --f: #FFF6E6;
  --t: #2B1A0F;
  --c: #FFFFFF;
  min-height: 100%;
  padding-bottom: 12cqi;
  background: var(--f);
  color: var(--t);
  font-family: var(--f-texto);
}
.site--beleza { --a: var(--tomate); --f: #FFF0EB; --t: #3A1A14; }
.site--restaurante { --a: var(--cobalto); --at: var(--papel); --f: #F1F4FC; --t: var(--tinta); }
.site--alojamento { --a: #1E7A56; --at: var(--papel); --f: #EDF8F3; --t: #0E2A20; }
.site--fotografia { --a: var(--gema); --f: #121A33; --t: #F2F4FA; --c: #222C52; }
.site--animais { --a: var(--tomate); --f: #FFF6DD; --t: #2A1A0C; }

.site__barra { display: flex; align-items: center; justify-content: space-between; padding: 15cqi 6cqi 4cqi; }
.site__logo { display: flex; align-items: center; gap: 2.5cqi; font-family: var(--f-titulo); font-weight: 800; font-size: 6.4cqi; line-height: 1; }
.site__logo::before { content: ""; width: 5.5cqi; height: 5.5cqi; border-radius: 1.6cqi; background: var(--a); }
.site__menu {
  width: 7cqi; height: 5cqi;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 100% .9cqi no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 100% .9cqi no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 100% .9cqi no-repeat;
}
.site__ilustra { display: block; width: 88cqi; height: auto; margin: 2cqi auto 0; border-radius: 5cqi; }
.site__titulo { margin: 6cqi 6cqi 2.5cqi; font-family: var(--f-titulo); font-weight: 800; font-size: 9.4cqi; line-height: 1.04; }
.site__texto { margin: 0 6cqi 5cqi; font-size: 4.9cqi; line-height: 1.4; opacity: .85; }
.site__botao { display: inline-block; margin: 0 6cqi; padding: 3.4cqi 5.5cqi; border-radius: 99px; background: var(--a); color: var(--at); font-weight: 700; font-size: 4.6cqi; line-height: 1; }
.site__faixa { display: flex; justify-content: space-between; margin: 7cqi 6cqi 0; padding: 3.5cqi 4.5cqi; border-radius: 3cqi; background: var(--c); font-weight: 700; font-size: 4.4cqi; line-height: 1.2; }
.site__faixa span:first-child::before { content: ""; display: inline-block; width: 2.6cqi; height: 2.6cqi; margin-right: 1.8cqi; border-radius: 50%; background: #2DB37A; vertical-align: .2em; }
.site__h { margin: 8cqi 6cqi 3cqi; font-family: var(--f-titulo); font-weight: 800; font-size: 6.6cqi; line-height: 1.1; }
.site__lista { display: grid; gap: 2.2cqi; margin: 0 6cqi; padding: 0; list-style: none; }
.site__lista li { display: flex; align-items: center; gap: 3cqi; padding: 3.4cqi 4cqi; border-radius: 3cqi; background: var(--c); font-size: 4.6cqi; }
.site__lista li::before { content: ""; flex: none; width: 3cqi; height: 3cqi; border-radius: .8cqi; background: var(--a); transform: rotate(45deg); }
.site__mapa {
  position: relative;
  margin: 0 6cqi;
  aspect-ratio: 16 / 10;
  border-radius: 4cqi;
  background-color: #E4EAF2;
  background-image:
    linear-gradient(90deg, transparent 46%, #FFFFFF 46% 52%, transparent 52%),
    linear-gradient(0deg, transparent 60%, #FFFFFF 60% 65%, transparent 65%),
    linear-gradient(35deg, transparent 22%, #CFE6D6 22% 40%, transparent 40%);
}
.site__mapa::after {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 7cqi; height: 7cqi;
  border-radius: 50% 50% 50% 0;
  background: var(--tomate);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.site__equipa { display: flex; gap: 3cqi; margin: 0 6cqi; }
.site__equipa i {
  width: 18cqi; height: 18cqi;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #F3C3A0 0 21%, transparent 22%),
    radial-gradient(circle at 50% 104%, var(--a) 0 47%, transparent 48%),
    #F9DED5;
}
.site__equipa i:nth-child(2) { background: radial-gradient(circle at 50% 36%, #C98B60 0 21%, transparent 22%), radial-gradient(circle at 50% 104%, var(--tinta) 0 47%, transparent 48%), #F9DED5; }
.site__galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; margin: 0 6cqi; }
.site__galeria i { aspect-ratio: 1; border-radius: 2cqi; background: linear-gradient(160deg, transparent 55%, rgba(0, 0, 0, .25) 55%), var(--cobalto); }
.site__galeria i:nth-child(2) { background-color: var(--gema); }
.site__galeria i:nth-child(3) { background-color: var(--tomate); }
.site__galeria i:nth-child(4) { background-color: var(--menta); }
.site__galeria i:nth-child(5) { background-color: #3A4675; }
.site__galeria i:nth-child(6) { background-color: #E9EDF5; }
.site__rodape { margin: 8cqi 6cqi 0; font-size: 3.8cqi; opacity: .75; }

/* A página de exemplo desce enquanto o visitante desce (só se mexe quando ele mexe).
   No telemóvel, enquanto o painel passa pelo ecrã; no computador, desde o primeiro movimento. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .painel--telemovel { view-timeline: --telemovel block; }
    .site {
      animation: site-descer linear both;
      animation-timeline: --telemovel;
      animation-range: entry 80% exit 30%;
    }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  @supports (animation-timeline: view()) {
    .site { animation-timeline: scroll(root block); animation-range: 0px 75vh; }
  }
}
@keyframes site-descer { to { transform: translateY(calc(100cqh - 100%)); } }

/* A montra: a captura real de um exemplo de OnePage (ferramentas/montra.py), no lugar do site desenhado. */
.montra-ex { display: contents; }
/* Sem legenda à vista (pedido do Kikos, 2026-10-06: ocupava muito espaço). O nome do exemplo já se vê no próprio site e
   o aviso "Este negócio não existe" está no topo do ecrã; a legenda fica para os leitores de ecrã. */
.montra-ex > .legenda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site--captura { display: block; width: 100%; height: auto; min-height: 0; padding: 0; background: none; }
.montra-ex__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin: 0 0 12px; font-size: .9375rem; font-weight: 700; }
.montra-ex__acoes a { color: var(--cobalto); text-underline-offset: 3px; }
.montra-ex__seta {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 2px solid var(--cobalto); border-radius: 6px;
  background: transparent; color: var(--cobalto);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.montra-ex__conta { margin-inline: -8px; color: var(--cobalto); font-weight: 400; }
/* Com dois ou mais exemplos: as setas de cada lado, e as duas ligações ao meio, uma por baixo da outra
   (pedido do Kikos, 2026-10-06; numa linha só não cabiam). O "1 de 2" fica só para os leitores de ecrã. */
.montra-ex__acoes:has(.montra-ex__seta) {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  grid-template-areas: "ant ver seg" "ant quero seg";
  align-items: center; justify-items: center;
  gap: 4px 10px;
}
.montra-ex__acoes [data-ex-ant] { grid-area: ant; }
.montra-ex__acoes [data-ex-seg] { grid-area: seg; }
.montra-ex__acoes [data-ex-ver] { grid-area: ver; }
.montra-ex__acoes [data-ex-quero] { grid-area: quero; }
.montra-ex__acoes:has(.montra-ex__seta) .montra-ex__conta {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.painel--telemovel:has(.montra-ex) { height: 570px; }
/* No telemóvel e no tablet, a caixa mede-se pelo telemóvel de exemplo, com uma margem por baixo, para ele não ficar
   cortado (pedido do Kikos, 2026-10-06). */
@media (max-width: 959px) {
  .painel--telemovel:has(.montra-ex) { height: auto; }
  /* A conversa no WhatsApp com a mesma largura da caixa do telemóvel (pedido do Kikos, 2026-10-06). */
  .painel--conversa { justify-self: center; width: min(100%, 296px); }
  .montra-ex .telemovel-caixa { flex: none; height: calc(var(--tel) * 19 / 9 + 20px); }
}
.montra-ex :focus-visible { outline-color: var(--cobalto); }

/* o pedido pelo WhatsApp, que se escreve sozinho */
.painel--conversa .painel__vivo { min-height: 0; }
/* As mensagens logo por baixo do título (com margin-top: auto ficava um vazio entre os dois, 2026-10-06);
   as bolhas já guardam o lugar enquanto não aparecem, por isso o painel não muda de altura. */
.conversa { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.conversa__linha { position: relative; display: flex; }
.conversa__linha--negocio { justify-content: flex-end; }
.msg { max-width: 92%; padding: 9px 12px 10px; border-radius: 16px; font-size: 1rem; line-height: 1.35; }
.msg--cliente { border-bottom-left-radius: 5px; background: var(--papel); box-shadow: 0 1px 2px rgba(15, 23, 51, .16); }
.msg--negocio { border-bottom-right-radius: 5px; background: var(--menta); box-shadow: 0 1px 2px rgba(15, 23, 51, .12); }
.msg__quem { display: block; margin-bottom: 2px; color: var(--tinta-suave); font-size: .8125rem; font-weight: 700; }
.msg--negocio .msg__quem { color: #2B4A41; }
.escrever {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 13px;
  border-radius: 16px;
  background: var(--papel);
  box-shadow: 0 1px 2px rgba(15, 23, 51, .16);
  opacity: 0;
  pointer-events: none;
}
.conversa__linha--cliente .escrever { left: 0; border-bottom-left-radius: 5px; }
.conversa__linha--negocio .escrever { right: 0; border-bottom-right-radius: 5px; background: var(--menta); }
.escrever i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); opacity: .6; }

/* três pontinhos a escrever, duas vezes, e depois a mensagem; só com a classe .toca, posta pelo JS */
.conversa.espera .msg { opacity: 0; }
.conversa.toca .conversa__linha--cliente .escrever { animation: escrever-mostrar 1.25s ease both; }
.conversa.toca .conversa__linha--cliente .escrever i { animation: ponto .6s ease-in-out 2; }
.conversa.toca .conversa__linha--cliente .escrever i:nth-child(2) { animation-delay: .12s; }
.conversa.toca .conversa__linha--cliente .escrever i:nth-child(3) { animation-delay: .24s; }
.conversa.toca .msg--cliente { animation: msg-entrar .32s ease-out 1.15s both; }
.conversa.toca .conversa__linha--negocio .escrever { animation: escrever-mostrar 1.15s ease 1.75s both; }
.conversa.toca .conversa__linha--negocio .escrever i { animation: ponto .55s ease-in-out 1.85s 2; }
.conversa.toca .conversa__linha--negocio .escrever i:nth-child(2) { animation-delay: 1.97s; }
.conversa.toca .conversa__linha--negocio .escrever i:nth-child(3) { animation-delay: 2.09s; }
.conversa.toca .msg--negocio { animation: msg-entrar .32s ease-out 2.8s both; }
@keyframes escrever-mostrar {
  0% { opacity: 0; transform: translateY(4px); }
  12%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes ponto {
  0%, 100% { opacity: .45; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@keyframes msg-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* o pacote recomendado: no branco do vidrado, como os outros painéis (o Kikos não quer caixas cheias de amarelo,
   2026-10-06: ficava muito pesado) */
.painel--pacote .painel__vivo { gap: 8px; }
.painel--pacote .legenda { color: var(--tinta); }
.pacote-rec__nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.9rem; line-height: 1.02; }
.pacote-rec__lista { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; line-height: 1.35; }
.pacote-rec__lista li { display: flex; gap: 10px; }
.pacote-rec__lista li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 1px; background: var(--tinta); transform: rotate(45deg); }
.painel--pacote .ligacao { align-self: flex-start; margin-top: auto; color: var(--tinta); }
.painel--pacote :focus-visible { outline-color: var(--tinta); }

/* a rapidez: o número pintado no azulejo, como os números das portas */
.painel--rapidez { justify-self: center; width: min(100%, 296px); }
.painel--rapidez .painel__vivo { min-height: 0; }
.rapidez { margin-top: 14px; font-size: 1.0625rem; line-height: 1.4; }
.rapidez__antes { display: block; }
.rapidez__numero {
  display: block;
  margin: 0 0 2px;
  color: var(--cobalto);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(3.6rem, 3rem + 2vw, 4.75rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.rapidez__nota { display: block; color: var(--tinta-suave); }

/* ---------- a montra: duas faixas de parede à vista, entre barras, onde se monta o painel do negócio escolhido ---------- */

/* A altura e a margem da barra de cima afinam-se no script.js, para a montra coincidir com duas faixas da parede. */
.montra { height: calc(2 * var(--faixa) + var(--rejunte)); }

/* ---------- barra (o friso de azulejos entre secções) ---------- */

.barra {
  position: relative;
  height: 48px;
  background: var(--friso-fundo);
  box-shadow: 0 12px 24px -18px rgba(15, 23, 51, .5), 0 -12px 24px -18px rgba(15, 23, 51, .35);
}
.barra svg { display: block; width: 100%; height: 100%; }

/* ---------- o que fazemos ---------- */

.pacotes, .trabalhos, .processo { padding-block: 88px 72px; }
.secao__cabeca { display: grid; gap: 10px; margin-bottom: 44px; }
/* a casa online, antes dos pacotes */
.casa { display: grid; gap: 12px; align-content: start; }
.casa > p:not(.legenda) { color: var(--tinta-suave); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); }
.casa .legenda { margin-bottom: -4px; }
.secao__cabeca h2, .perguntas h2, .sobre h2, .casa h2 {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1;
}
.secao__cabeca p { color: var(--tinta-suave); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); }

.pacotes__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .pacotes__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

.pacote { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pacote__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.pacote__azulejos {
  /* A montra de loja que se completa de pacote em pacote (Kikos, 2026-10-07); o acento a dourado no toldo e na tabuleta. */
  --acento: var(--ocre);
  --vidrado: #FBF9F3;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 3px;
}
.pacote__azulejos--ocre { --acento: var(--ocre); }
/* Cada pacote enche mais um azulejo do mesmo quadrado: Uma página 1, Site completo 2, Loja ou marcações 3, Ligações e
   automações os 4 (pedido do Kikos, 2026-10-06). */
.pacote__etiqueta {
  padding: 5px 11px;
  border: 2px solid var(--ocre);   /* contorno amarelo e letra azul-escura (Kikos, 2026-10-07) */
  border-radius: 999px;
  color: var(--tinta);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.1;
}
.pacote h3 {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem);
  line-height: 1.02;
}
.pacote__para { font-size: 1rem; font-weight: 700; }
.pacote__abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: 12px 0 0;
  border: 0;
  border-top: 2px solid rgba(31, 61, 166, .25);
  background: none;
  color: var(--cobalto);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: left;
}
.pacote__abrir::after {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  background:
    linear-gradient(currentColor 0 0) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 2.5px 100% no-repeat;
  transition: transform .25s ease;
}
.pacote__abrir[aria-expanded="true"]::after { transform: rotate(45deg); }
html:not(.js) .pacote__abrir { display: none; }

.pacote__inclui { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.3, .7, .2, 1); }
.pacote__inclui > div { min-height: 0; overflow: hidden; }
.pacote.fechado .pacote__inclui { grid-template-rows: 0fr; }
.pacote.fechado .pacote__inclui > div { visibility: hidden; transition: visibility 0s linear .32s; }
.pacote__lista { display: grid; gap: 9px; margin: 0; padding: 4px 0 0; list-style: none; font-size: 1.0625rem; line-height: 1.45; }
.pacote__lista li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; }
.pacote__lista li::before {
  content: "";
  /* Ao meio da coluna: rodado, o losango alarga quase 2 px para cada lado e, encostado à esquerda, a lista que abre
     e fecha (overflow escondido) cortava-lhe a ponta (Kikos, 2026-10-07). */
  justify-self: center;
  width: 8px; height: 8px;
  margin-top: .55em;
  border-radius: 1px;
  background: var(--cobalto);
  transform: rotate(45deg);
}

.pacotes__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 44px;
}
.pacotes__fim p { max-width: 52ch; color: var(--tinta-suave); }

.kikos { display: grid; gap: 12px; align-content: start; }
.kikos__cabeca { display: flex; align-items: center; gap: 12px; }
.kikos__avatar {
  display: block;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cobalto);
  box-shadow: 0 0 0 2px var(--gema);
}
.kikos__nome { font-weight: 700; font-size: 1.1875rem; line-height: 1.2; }
.kikos__marca { display: block; color: var(--tinta-suave); font-weight: 400; font-size: 1rem; }
.kikos__msg {
  padding: 10px 14px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--aguada);
  line-height: 1.4;
}
.kikos .botao { justify-self: start; gap: 10px; padding-left: 16px; }
.botao__wa { width: 26px; height: 26px; flex: none; }   /* o símbolo do WhatsApp, verde com o telefone branco */

/* ---------- tablet ---------- */

@media (min-width: 640px) {
  .abertura > .cartela { width: min(100%, 640px); }
  .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .painel--rapidez { justify-self: start; }
}

/* ---------- no computador: o texto à esquerda, o telemóvel por cima da parede à direita ---------- */

@media (min-width: 960px) {
  .abertura {
    /* As mesmas duas colunas da casa online e da conversa, por baixo: as caixas ficam alinhadas (Kikos, 2026-10-06). */
    /* Espaço entre as colunas (Kikos, 2026-10-06): a da esquerda vai até 680 px, o mínimo para "O teu site é a tua casa
       online" caber numa linha (590 px de título + 80 de margens); o resto fica de intervalo (180 px a 1440 px de
       largura; nunca menos de 56 px). */
    grid-template-columns: minmax(0, 680px) 340px;
    justify-content: space-between;
    /* À esquerda, o título e logo por baixo a casa online; à direita, o telemóvel e por baixo a conversa.
       Assim não fica um vazio entre o título e a casa online à espera de o telemóvel acabar. */
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "cabeca tel" "casa tel" "casa conv";
    gap: 28px 56px;
    align-items: start;
    padding-block: 56px 88px;
  }
  .abertura > .cartela { width: auto; }
  .abertura__cabeca { grid-area: cabeca; }
  /* 340 px (era 420 enquanto havia duas ligações; agora só o "Ver este exemplo", entre as setas: Kikos, 2026-10-07). */
  .painel--telemovel { grid-area: tel; --tel: 256px; width: 340px; height: 600px; }
  .montra-ex__acoes:has(.montra-ex__seta) { grid-template-columns: 34px auto 34px; grid-template-areas: "ant ver seg"; justify-content: space-between; }
  /* Inteiro no ecrã do computador (pedido do Kikos, 2026-10-06): nunca mais alto do que o que sobra por baixo do cabeçalho. */
  .painel--telemovel:has(.montra-ex) { height: min(650px, calc(100vh - var(--topo) - 88px)); min-height: 480px; }
  /* Em ecrãs baixos a caixa encolhe: o telemóvel acompanha-a pela altura, com margem por baixo, sem ficar cortado. */
  .painel--telemovel:has(.montra-ex) .telemovel { width: auto; height: calc(100% - 20px); max-width: var(--tel); }
  .demos { display: contents; }
  .demos > .casa { grid-area: casa; }
  .demos > .painel--conversa { grid-area: conv; }
  .pacotes > *, .processo > * { max-width: 790px; }
  /* Os três pacotes de site lado a lado (pedido do Kikos, 2026-10-06); as ligações e automações por baixo, a toda a
     largura; depois, "Incluído na anuidade" (duas colunas) e "Quando quiseres mais" (uma). */
  .pacotes > .pacotes__grelha { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pacote-automacoes { grid-column: 1 / -1; }
  /* Os três pacotes de site partilham as linhas (subgrid): o preço, o prazo, o botão "Ver o que inclui" e a lista ficam
     à mesma altura nos três, abertos ou fechados. */
  @supports (grid-template-rows: subgrid) {
    #pacote-uma, #pacote-completo, #pacote-loja { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 12px; }
    #pacote-uma .pacote__abrir, #pacote-completo .pacote__abrir, #pacote-loja .pacote__abrir { align-self: end; }
  }
  #pacote-automacoes .pacote__lista { columns: 2; column-gap: 40px; display: block; }
  #pacote-automacoes .pacote__lista li { break-inside: avoid; margin-bottom: 9px; }
  .pacotes__sub + .pacote--pequeno { grid-column: span 2; }
  /* A caixa do "Pedir orçamento" com a mesma largura da caixa da anuidade, por cima dela (duas das três colunas). */
  /* Os três títulos com o mesmo tamanho e numa linha a partir de 1280 px ("Loja ou marcações pagas" é o mais comprido). */
  #pacote-uma h3, #pacote-completo h3, #pacote-loja h3 { font-size: clamp(1.6rem, 2.15vw, 1.95rem); }
  .pacotes > .pacotes__fim { max-width: none; width: calc((100% - 56px) * 2 / 3 + 28px); }
}

/* ---------- trabalhos: os sites no ar, no computador e no telemóvel ---------- */

.exemplos { padding-block: 88px 72px; }
/* Os exemplos: no telemóvel deslizam para o lado (um e um bocado do seguinte à vista); no computador, em grelha. */
.exemplos__grelha {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 340px); gap: 14px;
  margin: 0 calc(-1 * var(--margem)); padding: 4px var(--margem) 18px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); overscroll-behavior-x: contain;
}
.exemplo {
  /* Com o mesmo aspeto das outras caixas (.cartela: cor, moldura e margem interna); o position da .cartela também
     mantém os textos só para leitores de ecrã dentro do cartão. */
  display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start;
  padding: clamp(22px, 3.4vw, 28px);
}
.exemplo__captura { display: block; margin-bottom: 10px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 5px var(--tinta); }
.exemplo__captura img { display: block; width: 100%; height: auto; }
.exemplo__nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.exemplo__acoes .botao { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.exemplo__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: auto; padding-top: 8px; }
@media (min-width: 960px) {
  .exemplos > .exemplos__grelha { max-width: none; }
  .exemplos__grelha { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}
.trabalhos__grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }
.painel--trabalho .painel__vivo { gap: 8px; }
.trabalho__aparelhos { position: relative; aspect-ratio: 16 / 11; margin: 2px 0 14px; }
.trabalho__navegador {
  position: absolute;
  left: 0; top: 0;
  width: 84%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--papel);
  box-shadow: 0 1px 2px rgba(15, 23, 51, .22), 0 18px 34px -18px rgba(15, 23, 51, .5);
}
/* a barra do navegador, com os três botões */
.trabalho__navegador::before {
  content: "";
  display: block;
  height: 16px;
  background:
    radial-gradient(circle at 11px 50%, #E5776A 0 3.2px, transparent 3.7px),
    radial-gradient(circle at 22px 50%, #E9B23F 0 3.2px, transparent 3.7px),
    radial-gradient(circle at 33px 50%, #67B88E 0 3.2px, transparent 3.7px),
    #E4E7EF;
}
.trabalho__navegador img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.telemovel--trabalho {
  position: absolute;
  right: 0; bottom: 0;
  width: 27%;
  padding: 4px;
  border-radius: 17px;
}
.telemovel--trabalho .telemovel__ecra { border-radius: 13px; }
.telemovel--trabalho .telemovel__ecra::before { top: 3.5cqi; width: 30cqi; height: 8cqi; }
.trabalho__longa { display: block; width: 100%; height: auto; }
.trabalho__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.trabalho__anos { display: flex; flex-wrap: wrap; gap: 6px; }
.trabalho__ano {
  padding: 3px 10px;
  border: 1.5px solid var(--cobalto);
  border-radius: 999px;
  color: var(--cobalto);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
}
.trabalho__nome { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.6rem, 1.4rem + .8vw, 1.9rem); line-height: 1.05; }
.trabalho__desc { color: var(--tinta-suave); }
.trabalho__pontos { font-size: 1rem; }
.painel--trabalho .ligacao { align-self: flex-start; margin-top: auto; }

/* A página do telemóvel desce enquanto o painel passa pelo ecrã (só se mexe quando o visitante mexe). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .painel--trabalho { view-timeline: --trabalho block; }
    .trabalho__longa {
      animation: site-descer linear both;
      animation-timeline: --trabalho;
      animation-range: entry 75% exit 25%;
    }
  }
}

/* ---------- como funciona: quatro passos, com o número pintado num azulejo ---------- */

.passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.passo { display: grid; gap: 10px; align-content: start; }
.passo__numero {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  border-radius: 3px;
  /* azulejo branco com contorno azul (o Kikos não quer amarelo cheio, 2026-10-06) */
  background: var(--vidrado);
  box-shadow: inset 0 0 0 2px var(--friso-traco), inset 0 0 0 5px var(--vidrado), inset 0 0 0 6px var(--friso-folha), 0 1px 2px rgba(15, 23, 51, .2);
  color: var(--friso-traco);
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.passo h3 { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.6rem, 1.4rem + .8vw, 1.9rem); line-height: 1.05; }

/* perguntas: abrem e fecham sem JavaScript */
.perguntas { display: grid; gap: 18px; margin-top: 44px; }
.pergunta { border-top: 2px solid rgba(31, 61, 166, .22); }
.pergunta:last-child { border-bottom: 2px solid rgba(31, 61, 166, .22); }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  color: var(--cobalto);
  background:
    linear-gradient(currentColor 0 0) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 2.5px 100% no-repeat;
  transition: transform .25s ease;
}
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { max-width: 62ch; padding-bottom: 18px; }

/* ---------- quem faz e contacto ---------- */

.fecho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 64px 96px; }
.sobre { display: grid; gap: 20px; align-content: start; }
/* O retrato do Kikos (branco com fundo transparente) sobre o cobalto, como um azulejo pintado, com a moldura dos painéis. */
.sobre__retrato {
  width: 150px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 12px solid var(--friso-borda);
  border-image: var(--friso-moldura) 25% / 12px round;
  background: var(--cobalto);
  box-shadow: 0 2px 4px rgba(15, 23, 51, .12), 0 18px 34px -18px rgba(15, 23, 51, .5);
}
.sobre__retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sobre__texto { display: grid; gap: 14px; }
.sobre__texto p { max-width: 60ch; }
.kikos__email { color: var(--tinta-suave); font-size: 1rem; }
@media (min-width: 640px) {
  .trabalhos__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre:has(.sobre__retrato) { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; align-items: start; }
  .sobre__retrato { width: 180px; }
  .fecho > * { max-width: 640px; }
}
@media (min-width: 960px) {
  .fecho { grid-template-columns: minmax(0, 790px) minmax(320px, 1fr); align-items: start; }
  #trabalhos .secao__cabeca { max-width: 790px; }
  .painel--telemovel { justify-self: end; }
  .fecho > * { max-width: none; }
}

/* ---------- rodapé ---------- */

.rodape {
  /* Por baixo do friso amarelo, a parede caiada sem azulejos, como nas fachadas onde o azulejo começa a uma certa
     altura (pedido do Kikos, 2026-10-07): o mesmo grão da cal da parede, e uma sombra suave por
     baixo do friso, como se ele tivesse relevo. */
  position: relative;
  padding-block: 40px 44px;
  background-color: var(--cal);
  background-image:
    linear-gradient(rgba(15, 23, 51, .14), rgba(15, 23, 51, 0) 18px),
    radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .34 0 0 0 0 .31 0 0 0 0 .26 .22 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--tinta);
  font-size: 1rem;
}
.rodape__grelha { display: grid; gap: 22px; }
.rodape__marca { display: grid; gap: 2px; justify-items: start; }
.rodape__marca .marca { padding-block: 0 8px; font-size: 1.5rem; }
.rodape__ligacoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.rodape__ligacoes a { display: inline-block; padding-block: 8px; font-weight: 700; }
/* o Livro de Reclamações, em destaque (DL 156/2005) */
.rodape__ligacoes .livro { padding: 8px 14px; border: 2px solid var(--cobalto); border-radius: 6px; text-decoration: none; }
.rodape__legal { display: grid; gap: 8px; max-width: 78ch; font-size: .9375rem; }
.rodape__fim { font-size: .9375rem; }
@media (min-width: 900px) {
  .rodape__grelha { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 40px; }
  .rodape__legal, .rodape__fim { grid-column: 1 / -1; }
}
@media (hover: hover) and (pointer: fine) {
  .rodape__ligacoes .livro:hover { background: var(--aguada); }
}

/* dados ainda por preencher: bem à vista na pré-visualização */
mark.por-preencher { padding: 0 .2em; border-radius: 2px; background: #FFE9A8; color: var(--tinta); outline: 1px dashed #A06C00; }

/* ---------- páginas de texto: política de privacidade e 404 ---------- */

.texto-pagina { padding-block: calc(var(--faixa) + var(--rejunte)) 88px; }
@media (min-width: 960px) {
  .texto-pagina { padding-block: 56px 96px; }
}
.texto-pagina .cartela { max-width: 820px; }
.texto-pagina h1 { margin-bottom: 18px; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); }
.legal__corpo { display: grid; gap: 14px; }
.legal__corpo h2 { margin-top: 22px; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.5rem, 1.35rem + .6vw, 1.8rem); line-height: 1.1; }
.legal__corpo h3 { margin-top: 8px; font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.legal__corpo ul { display: grid; gap: 6px; margin: 0; padding-left: 1.25em; }
.legal__corpo p, .legal__corpo li { max-width: 68ch; }
.erro .abertura__acoes { margin-top: 26px; }


/* ---------- afinações da revisão de 2026-10-05 ---------- */

/* [des12] a palavra do menu por cima do título da secção */
.secao__cabeca .legenda { margin-bottom: -4px; }
.secao__cabeca p.pacotes__iva { color: var(--tinta); font-size: 1rem; font-weight: 700; }
/* As etiquetas por cima dos títulos das secções com letra amarela (pedido do Kikos, 2026-10-06). O amarelo do logótipo
   não se lê sobre branco (1,5:1); este dourado escuro, com a letra um pouco maior, chega aos 3,3:1 que a regra de
   acessibilidade pede para texto grande. */
.secao__cabeca > .legenda, .casa > .legenda, .perguntas > .legenda, .sobre__texto > .legenda { color: #B97D00; font-size: 1.2rem; }
.sobre__texto > .legenda { margin-bottom: -8px; }
.perguntas > .legenda { margin-bottom: -10px; }

/* [des2] o que vem depois de o site estar no ar: secundário, para não parecerem mais dois pacotes */
.pacotes__sub { grid-column: 1 / -1; margin-top: 10px; }
.pacotes__sub h3 {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: inset 0 0 0 2px var(--cobalto), 0 2px 4px rgba(15, 23, 51, .08), 0 18px 34px -22px rgba(15, 23, 51, .45);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
  line-height: 1.1;
}
.pacote--pequeno {
  /* Com o mesmo fundo e moldura das outras caixas (.cartela); antes tinham um fundo azulado (Kikos, 2026-10-07). */
  gap: 8px;
  padding: clamp(18px, 2.6vw, 28px);
}
.pacote--pequeno h4 { margin: 0; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.3rem, 1.2rem + .4vw, 1.5rem); line-height: 1.1; }
.pacote--pequeno .pacote__lista { font-size: 1rem; }
.pacote--pequeno .pacote__resumo { font-size: 1.0625rem; }
.pacote__incluido { color: var(--tinta); font-weight: 700; }
/* O preço de cada pacote ("a partir de"), logo por baixo do nome. */
.pacote__preco { color: var(--tinta-suave); font-size: 1rem; }
.pacote__preco strong { color: var(--cobalto); font-family: var(--f-titulo); font-weight: 800; font-size: 1.5rem; }
.pacote--pequeno .pacote__preco strong { font-size: 1.25rem; }
/* O prazo na mesma linha do preço, separado por um traço vertical fino (Kikos, 2026-10-07). */
.pacote__prazo { display: inline-block; margin-left: .45em; padding-left: .6em; border-left: 1.5px solid rgba(31, 61, 166, .3); color: var(--tinta-suave); font-size: .9375rem; font-weight: 700; white-space: nowrap; }
/* Nos telemóveis estreitos não cabe tudo numa linha: o prazo passa para baixo, sem o traço. */
@media (max-width: 359px) {
  .pacote__prazo { display: block; margin: 2px 0 0; padding: 0; border: 0; }
}
/* Lado a lado, cada caixa fica com a altura do seu texto ("Quando quiseres mais" tem uma linha só). */
.pacote--pequeno { align-self: start; }

/* [ace4] o nome do trabalho vem primeiro no código (para quem ouve), mas o aspeto fica igual */
.trabalho__aparelhos { order: -2; }
.trabalho__meta { order: -1; }

/* [des1] o contacto com a moldura de azulejo, como os painéis da abertura; também o pedido de orçamento no fim dos pacotes
   (Kikos, 2026-10-07): a moldura amarela marca as caixas onde se fala comigo */
.kikos, .pacotes__fim {
  border: var(--moldura) solid var(--friso-borda);
  border-image: var(--friso-moldura) 25% / var(--moldura) round;
  background: var(--vidrado);
  box-shadow: 0 2px 4px rgba(15, 23, 51, .1), 0 26px 46px -24px rgba(15, 23, 51, .55);
}

/* [des8] páginas legais: índice no topo e listas com o losango do resto do site */
.legal__indice { margin: 2px 0 6px; padding: 14px 18px 16px; border-radius: var(--raio); background: var(--aguada); }
.legal__indice ol { display: grid; gap: 2px; margin: 6px 0 0; padding-left: 1.4em; }
.legal__indice a { display: inline-block; padding-block: 4px; font-weight: 700; }
.legal__corpo ul { list-style: none; padding-left: 0; }
.legal__corpo ul > li { position: relative; padding-left: 22px; }
.legal__corpo ul > li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 8px; height: 8px;
  border-radius: 1px;
  background: var(--cobalto);
  transform: rotate(45deg);
}

/* [ace7] áreas de toque maiores no rodapé */
.rodape__ligacoes a { padding-block: 10px; }
.rodape__marca p a { display: inline-block; padding-block: 10px; }

/* [des10] e [des11] o painel da rapidez sem zigue-zague no telemóvel e sem meia linha vazia no tablet */
@media (max-width: 639px) {
  .painel--rapidez { width: 100%; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .painel--rapidez { grid-column: 1 / -1; justify-self: stretch; width: auto; }
}

/* [des5] e [des13] no telemóvel: menos parede entre blocos, passos com o número ao lado, telemóvel dos trabalhos maior */
@media (max-width: 639px) {
  .pacotes, .trabalhos, .processo { padding-block: 56px 48px; }
  .secao__cabeca { margin-bottom: 28px; }
  .pacotes__grelha, .passos { gap: 20px; }
  .trabalhos__grelha { gap: 28px; }
  .passo { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .passo__numero { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; font-size: 1.9rem; }
  .passo > :not(.passo__numero) { grid-column: 2; }
  .perguntas { margin-top: 28px; }
  .telemovel--trabalho { width: 34%; }
  .trabalho__navegador { width: 80%; }
  .trabalho__aparelhos { aspect-ratio: 16 / 12; }
}

/* [ace8] alto contraste do Windows: o negócio escolhido e os sinais + e x continuam a ver-se */
@media (forced-colors: active) {
  .setor[aria-pressed="true"] { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  .pacote__abrir::after, .pergunta summary::after { content: "+"; width: auto; height: auto; background: none; font-weight: 800; }
  .pacote__abrir[aria-expanded="true"]::after, .pergunta[open] summary::after { content: "\2212"; transform: none; }
}

/* ---------- movimento reduzido: nada se mexe sozinho ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}