/* Tipos de letra alojados localmente. Sem pedido ao Google.
   Manrope e Inter, subsets latin e latin-ext, geradas do Google Fonts. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.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;
}

/* Fonte do mozi, para a ligação ao mozi.pt. Também local. */
@font-face {
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/museomoderno-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/museomoderno-latin.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;
}

/* ==========================================================================
   Moz — moz.pt
   ========================================================================== */

:root {
  --laranja  : #FF4500;   /* orangered */
  --azul     : #008080;   /* teal */
  --amarelo  : #DAA520;   /* goldenrod */

  /* Versões para TEXTO sobre fundos claros. Nenhum laranja ou amarelo
     legível chega aos 4.5:1 sobre branco, por isso os textos pequenos
     usam estas e nunca as de cima. */
  --laranja-texto : #A0522D;   /* sienna        5.62:1 sobre branco */
  --amarelo-texto : #B8860B;   /* darkgoldenrod 3.25:1, só texto grande */

  /* Turquesas do mozi, do brand book do mozi. Só no cartão que liga ao mozi.pt. */
  --mozi-turquesa : #04A9AA;
  --mozi-profundo : #017273;

  --tinta    : #111013;
  --tinta-2  : #1c1c24;
  --papel    : #e6e4e1;
  --papel-2  : #f2f1ef;
  --branco   : #ffffff;
  --suave    : #6a6a72;
  --linha    : #d6d3ce;

  --titulo   : "Manrope", system-ui, sans-serif;
  --corpo    : "Inter", system-ui, sans-serif;

  --gap      : 10px;
  --raio     : 8px;
  --raio-lg  : 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--titulo); margin: 0; line-height: .92; letter-spacing: -0.035em; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.envolve { width: calc(100% - 2 * var(--gap)); max-width: 1560px; margin: 0 auto; }

/* --- grelha modular ------------------------------------------------------ */
.grelha { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }

.bloco { background: var(--branco); border-radius: var(--raio); padding: 2rem; }
.bloco--vazio { background: transparent; }
.bloco--tinta { background: var(--tinta); color: var(--branco); }
.bloco--laranja { background: var(--laranja); color: var(--branco); }
.bloco--azul { background: var(--azul); color: var(--branco); }

/* --- topo ---------------------------------------------------------------- */
/* Alinhado com a margem interna do cartão do topo, não com o limite do ecrã. */
.topo {
  position: fixed;
  top: calc(var(--gap) + 2rem - 20px);
  right: calc(var(--gap) + 3rem - 20px);
  z-index: 60;
}
.menu-botao {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--tinta);
  color: var(--branco);
  border: none;
  border-radius: 999px;
  padding: .95rem 1.5rem;
  font-family: var(--corpo);
  font-size: .95rem;
  cursor: pointer;
}
.menu-botao__barras { display: flex; flex-direction: column; gap: 3px; }
.menu-botao__barras span { display: block; width: 20px; height: 2px; background: var(--branco); transition: transform .3s ease, opacity .3s ease; }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.painel-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--tinta);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.painel-menu.aberto { opacity: 1; visibility: visible; }
.painel-menu ul { text-align: center; }
.painel-menu li { margin: .4rem 0; }
.painel-menu a {
  font-family: var(--titulo);
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  transition: color .2s ease;
}
.painel-menu a:hover { color: var(--laranja); }

/* --- hero ---------------------------------------------------------------- */
.hero { padding-top: var(--gap); padding-bottom: var(--gap); }

/* Coluna da marca: quatro blocos, não um cartão só.
   1 laranja com o ícone · 2 branco com o logótipo · 3 preto com a assinatura · 4 laranja vazio. */
.marca-cartao {
  grid-column: span 3;
  min-height: 320px;
  display: grid;
  grid-template-columns: minmax(52px, 23%) 1fr;
  grid-template-rows: auto auto 1fr;
  gap: var(--gap);
}
.bloco { border-radius: var(--raio); display: flex; align-items: center; justify-content: center; }

.bloco--icone {
  grid-column: 1; grid-row: 1;
  aspect-ratio: 1;
  background: var(--laranja);
  color: var(--branco);
  padding: 18%;
}
.bloco--icone svg { width: 100%; height: 100%; }

.bloco--logo {
  grid-column: 2; grid-row: 1;
  background: var(--branco);
  padding: .7rem 1.2rem;
}
.bloco--logo img { width: 100%; max-width: 118px; height: auto; }

.bloco--assinatura {
  grid-column: 1 / -1; grid-row: 2;
  background: var(--tinta);
  color: var(--branco);
  padding: .65rem 1rem;
  text-align: center;
}
.bloco--assinatura span {
  font-family: var(--titulo);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.6;
}

.bloco--cheio {
  grid-column: 1 / -1; grid-row: 3;
  background: var(--laranja);
  min-height: 90px;
  position: relative;
  overflow: hidden;
}
/* Sai da caixa de propósito: só se vê o cimo da lâmpada, o resto é cortado.
   O branco a 22% deixa-a ler-se como textura e não como um segundo logótipo. */
.bloco--cheio svg {
  position: absolute;
  right: -4%;
  top: 20%;
  height: 200%;
  width: auto;
  color: #ffffff;
  opacity: .26;
}
/* O logótipo entra aqui.
   O ficheiro é o logo a cores, com fundo transparente. O filtro pinta-o todo de
   branco sem perder a forma: brightness(0) leva tudo a preto, invert(1) leva a branco.
   Quando houver um ficheiro do logo já em branco, troca-se o src e apaga-se o filter. */

.hero__titulo {
  grid-column: span 9;
  background: var(--branco);
  border-radius: var(--raio);
  padding: 3.5rem 3rem;
  display: flex;
  align-items: center;
  min-height: 320px;
}
.hero__titulo h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  font-weight: 500;
}
.hero__titulo em { font-style: normal; color: var(--laranja); }
.hero__linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__linha > span { display: block; }

.hero__frase {
  grid-column: span 5;
  padding: 2rem;
  display: flex;
  align-items: flex-end;
}
/* Mesma fonte e mesmo tamanho do "Vamos conversar?" do cartão ao lado. */
.hero__frase p {
  font-family: var(--titulo);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--suave);
  max-width: 32rem;
}

.hero__cta {
  grid-column: span 4;
  background: var(--tinta);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  transition: background-color .25s ease, color .25s ease;
}
/* Ao acender em orangered, o texto tem de virar escuro: a etiqueta em
   goldenrod dava 1.54:1 e o remate a branco 70% dava 1.99:1. Assim vai a 5.51:1. */
.hero__cta:hover { background: var(--laranja); color: var(--tinta); }
.hero__cta:hover .hero__cta__etiqueta { color: var(--tinta); }
.hero__cta:hover .hero__cta__remate { color: rgba(17,16,19,.75); }
.hero__cta__seta { align-self: flex-end; font-size: 2rem; line-height: 1; }
.hero__cta strong { font-family: var(--titulo); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }

/* Cartão do mozi. Liga para mozi.pt. A palavra "mozi" vai na fonte da marca mozi,
   MuseoModerno, como manda o brand book do mozi. */
.hero__local {
  grid-column: span 3;
  background: var(--mozi-profundo);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  transition: background-color .25s ease;
}
.hero__local:hover, .hero__local:focus-visible { background: var(--mozi-turquesa); }
.hero__local:hover .hero__local__etiqueta { color: rgba(255,255,255,.85); }
.hero__local__pergunta { font-family: var(--titulo); font-size: 1.05rem; font-weight: 500; }
/* --- faixa deslizante ---------------------------------------------------- */
.faixa {
  background: var(--tinta);
  color: var(--branco);
  border-radius: var(--raio);
  margin: var(--gap) 0;
  padding: 1.4rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.faixa__pista { display: inline-flex; gap: 3rem; animation: correr 34s linear infinite; }
.faixa span {
  font-family: var(--titulo);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.01em;
  padding-right: 3rem;
}
.faixa span::after { content: "·"; margin-left: 3rem; color: var(--laranja); }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- secções e cabeçalhos editoriais ------------------------------------ */
.seccao { padding: clamp(5rem, 9vw, 8rem) 0; }
.seccao__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 1.4rem;
}
.seccao__etiqueta::before {
  content: "";
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 3px;
  border-radius: 999px;
  background: var(--laranja);
}
.seccao__titulo { font-size: clamp(2.5rem, 5.5vw, 5.2rem); font-weight: 500; margin-bottom: 1.2rem; text-wrap: balance; }
.seccao__intro { font-size: 1.1rem; color: var(--suave); max-width: 40rem; }

.cabecalho {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.cabecalho::before {
  content: attr(data-indice);
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
  align-self: start;
  font-family: var(--titulo);
  font-size: clamp(4.5rem, 8vw, 7.8rem);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.08em;
  color: var(--laranja);
}
.cabecalho .seccao__etiqueta { grid-column: 3 / span 4; margin: .35rem 0 0; }
.cabecalho .seccao__titulo { grid-column: 3 / -1; margin: 0; }
.cabecalho .seccao__intro { grid-column: 7 / -1; margin-top: 1.25rem; }

.cabecalho--painel {
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: var(--raio-lg);
  background: var(--tinta);
  color: var(--branco);
  overflow: hidden;
}
.cabecalho--painel::after { content: ""; position: absolute; top: 0; right: 0; width: 28%; height: 7px; background: linear-gradient(90deg, var(--laranja), var(--amarelo)); }
.cabecalho--painel .seccao__etiqueta { color: rgba(255,255,255,.72); }
.cabecalho--painel .seccao__titulo { position: relative; z-index: 1; max-width: 12ch; }
.cabecalho--painel .seccao__intro { position: relative; z-index: 1; color: rgba(255,255,255,.68); }

.cabecalho--linha { padding: 2.2rem 0; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--linha); }

.cabecalho--offset .seccao__titulo { max-width: 13ch; }

.cabecalho--compacto { align-items: end; padding-bottom: 1.8rem; border-bottom: 1px solid var(--tinta); }
.cabecalho--compacto .seccao__titulo { max-width: 12ch; font-size: clamp(2.5rem, 5vw, 4.6rem); }

/* --- serviços ------------------------------------------------------------ */
.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 2.5rem; }
.servico {
  --card-accent: var(--laranja);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(92px, 10vw, 145px);
  grid-template-rows: auto 1fr auto;
  gap: 1rem 1.5rem;
  align-items: start;
  width: 100%;
  min-height: 250px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid rgba(17,16,19,.06);
  border-radius: var(--raio-lg);
  background: var(--branco);
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 16px 45px rgba(17,16,19,.035);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.servico::before { content: ""; position: absolute; left: 0; top: 0; width: 42%; height: 6px; background: var(--card-accent); transform-origin: left; transition: width .4s cubic-bezier(.22,1,.36,1); }
.servico:hover, .servico:focus-visible { transform: translateY(-6px); border-color: color-mix(in srgb, var(--card-accent) 38%, transparent); box-shadow: 0 24px 65px rgba(17,16,19,.09); outline: none; }
.servico:hover::before, .servico:focus-visible::before { width: 100%; }
.servico__num { grid-column: 1; grid-row: 1; width: fit-content; padding: .32rem .62rem; border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent); border-radius: 999px; font-family: var(--titulo); font-size: .8rem; font-weight: 600; color: var(--tinta); }
.servico__mini { grid-column: 2; grid-row: 1 / 4; align-self: center; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: calc(var(--raio-lg) - 7px); overflow: hidden; background: var(--papel-2); }
.servico__mini img { width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1), filter .4s ease; }
.servico:hover .servico__mini img { transform: scale(1.06); filter: saturate(.82); }
.servico__nome { grid-column: 1; grid-row: 2; align-self: end; max-width: 14ch; font-family: var(--titulo); font-size: clamp(1.45rem, 2.25vw, 2.25rem); line-height: 1.02; font-weight: 500; letter-spacing: -.04em; color: var(--tinta); }

/* Cada título toma a cor dominante da imagem do próprio serviço.
   Amostrada das imagens: 01,04,07 laranja · 02,05,08 azul · 03,06 amarelo. */
.servico[data-modal="modal-s01"],
.servico[data-modal="modal-s04"],
.servico[data-modal="modal-s07"] { --card-accent: var(--laranja); }

.servico[data-modal="modal-s02"],
.servico[data-modal="modal-s05"],
.servico[data-modal="modal-s08"] { --card-accent: var(--azul); }

.servico[data-modal="modal-s03"],
.servico[data-modal="modal-s06"] { --card-accent: var(--amarelo); }
.servico__desc { grid-column: 1; grid-row: 3; max-width: 34ch; padding-right: 2.5rem; font-size: .95rem; color: var(--suave); }
.servico__seta { position: absolute; right: calc(clamp(1.4rem, 2.6vw, 2.2rem) + clamp(92px, 10vw, 145px) + 1.5rem); bottom: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--papel-2); color: var(--tinta); font-size: 1.05rem; opacity: 1; transition: color .25s ease, background .25s ease, transform .25s ease; }
.servico:hover .servico__seta, .servico:focus-visible .servico__seta { color: var(--branco); background: var(--card-accent); transform: rotate(12deg); }
/* O goldenrod é claro de mais para uma seta branca: 2.24:1, e um ícone precisa de 3. */
.servico[data-modal="modal-s06"]:hover .servico__seta,
.servico[data-modal="modal-s06"]:focus-visible .servico__seta { color: var(--tinta); }

/* --- modais -------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 1rem;
  background: rgba(17,16,19,.86);
  opacity: 0;
  transition: opacity .28s ease;
}
.modal[hidden] { display: none; }
.modal.aberto { opacity: 1; }

/* A caixa nunca passa a altura da janela: a imagem tem tecto e o texto ganha
   barra de deslocamento própria, para o botão de fechar ficar sempre à vista. */
/* Imagem à esquerda e texto à direita. Assim a altura do modal é a da maior
   das duas colunas, e não a soma, o que tira o scroll do texto. */
.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--branco);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transform: translateY(18px);
  transition: transform .28s ease;
}
.modal.aberto .modal__caixa { transform: none; }
.modal__caixa img { flex: 0 0 42%; align-self: center; width: 42%; aspect-ratio: 3/2; object-fit: contain; background: var(--papel); }
.modal__texto { flex: 1 1 auto; min-width: 0; padding: clamp(1.6rem, 3vw, 2.4rem); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: center; }
/* Em ecrã estreito volta a empilhar, com a imagem em cima. */
@media (max-width: 760px) {
  .modal__caixa { flex-direction: column; align-items: stretch; }
  .modal__caixa img { flex: 0 0 auto; width: 100%; align-self: auto; }
  .modal__texto { justify-content: flex-start; }
}
.modal__texto h3 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 1rem; }
.modal__texto p { color: var(--suave); font-size: 1.02rem; }
.modal__marcas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.modal__marcas li {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: .35rem .9rem;
}
.modal__fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(17,16,19,.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
.modal__fechar:hover { background: var(--laranja); }

body.modal-aberto { overflow: hidden; position: fixed; width: 100%; }

/* --- método -------------------------------------------------------------- */
.metodo { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 2.5rem; counter-reset: passo; }
.metodo__passo { position: relative; grid-column: span 4; min-height: 290px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--branco); border: 1px solid rgba(17,16,19,.06); border-radius: var(--raio-lg); padding: 2.2rem 2rem; overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease, color .35s ease; }
.metodo__passo::after { content: ""; position: absolute; top: -35%; right: -25%; width: 72%; aspect-ratio: 1; border: 1px solid var(--linha); border-radius: 50%; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.metodo__passo:hover { transform: translateY(-6px); background: var(--tinta); color: var(--branco); }
.metodo__passo:hover::after { transform: scale(1.18); border-color: rgba(255,255,255,.12); }
.metodo__num { position: absolute; top: 1.6rem; left: 1.8rem; z-index: 1; font-family: var(--titulo); font-size: 1rem; font-weight: 600; color: var(--laranja-texto); line-height: 1; letter-spacing: .08em; }
.metodo__passo h3 { position: relative; z-index: 1; max-width: 12ch; font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.02; margin-bottom: .8rem; }
.metodo__passo p { font-size: .98rem; color: var(--suave); }
.metodo__passo:hover p { color: rgba(255,255,255,.66); }

/* --- números ------------------------------------------------------------- */
.numeros { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.numeros--quatro .numero { grid-column: span 3; }
@media (max-width: 1000px) { .numeros--quatro .numero { grid-column: span 6; } }
@media (max-width: 600px)  { .numeros--quatro .numero { grid-column: span 12; } }
.numeros--quatro .numero { grid-column: span 3; }
@media (max-width: 1000px) { .numeros--quatro .numero { grid-column: span 6; } }
@media (max-width: 600px)  { .numeros--quatro .numero { grid-column: span 12; } }
.numero { position: relative; grid-column: span 4; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; background: var(--branco); border: 1px solid rgba(17,16,19,.06); border-radius: var(--raio-lg); padding: 2.4rem 2rem; overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.numero::after { content: ""; position: absolute; right: -42px; bottom: -42px; width: 110px; height: 110px; border: 1px solid currentColor; border-radius: 50%; opacity: .1; }
.numero:hover { transform: translateY(-6px); }
.numero--destaque { background: var(--tinta); color: var(--branco); }
.numero strong { display: block; font-family: var(--titulo); font-size: clamp(3.2rem, 6vw, 5rem); font-weight: 600; letter-spacing: -.06em; line-height: .9; margin-bottom: 2rem; }
/* Quando o destaque é uma palavra e não um número, precisa de menos corpo para caber. */
.numero--palavra { font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important; }
/* Uma cor Moz por cartão. */
.numero strong { color: var(--cor-numero, inherit); }
.numero--laranja { --cor-numero: var(--laranja); }
.numero--azul    { --cor-numero: var(--azul); }
.numero--amarelo { --cor-numero: var(--amarelo); }
.numero span { font-size: .98rem; color: var(--suave); }
.numero--destaque span { color: rgba(255,255,255,.72); }

/* --- contactos ----------------------------------------------------------- */
/* --- o que costuma acontecer -------------------------------------------- */
.dor__grelha { margin-top: .5rem; }
.dor__cartoes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
.sintoma {
  position: relative;
  border-radius: var(--raio-lg);
  padding: 1.3rem 1.4rem;
  min-height: 7.5rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.sintoma__num-removido { position: absolute; top: .9rem; right: 1rem; font-family: var(--titulo); font-size: .72rem; font-weight: 600; letter-spacing: .15em; opacity: .5; }
/* Os números dos cartões foram retirados a 13-08-2026. */
.sintoma:hover { transform: translateY(-5px) rotate(-.35deg); }
.sintoma span { position: relative; z-index: 1; font-family: var(--titulo); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
/* Uma cor da Moz por cartão, mais o preto. */
.sintoma:nth-child(1) { background: var(--laranja); }
.sintoma:nth-child(2) { background: var(--azul); }
.sintoma:nth-child(3) { background: var(--amarelo); }
.sintoma:nth-child(4) { background: var(--tinta); }
.sintoma:nth-child(1) span,
.sintoma:nth-child(2) span,
.sintoma:nth-child(4) span { color: var(--branco); }
.sintoma:nth-child(3) span { color: var(--tinta); }
@media (max-width: 900px) {
  .dor__cartoes { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .dor__cartoes { grid-template-columns: 1fr; }
  .sintoma { min-height: 0; }
}

/* --- cartão do Raio-X ------------------------------------------------------ */
.hero__cta__texto { display: flex; flex-direction: column; gap: .35rem; }
.hero__cta__etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo); }
.hero__cta__remate { font-family: var(--titulo); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: rgba(255,255,255,.7); }

/* --- cartão do mozi -------------------------------------------------------- */
/* Mesma arrumação do cartão do diagnóstico: seta no topo à direita,
   e em baixo a etiqueta por cima da frase. */
.hero__local__seta { align-self: flex-end; font-size: 2rem; line-height: 1; }
.hero__local__fundo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.hero__local__texto { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
/* Sobre o turquesa profundo do mozi, o branco cheio dá 5.74:1 e passa.
   O amarelo aqui dava 2.28:1 e o laranja 1.22:1, nenhum se lia. */
.hero__local__etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--branco); line-height: 1.4; }
.hero__local__texto strong { font-family: var(--titulo); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.hero__local__marca { font-size: 1.5em; }
.hero__local__mascote {
  flex: 0 0 auto;
  width: clamp(64px, 5.6vw, 88px);
  aspect-ratio: 1;
  background: var(--branco);
  border-radius: var(--raio);
  padding: 5px;
  display: flex;
}
.hero__local__mascote img { width: 100%; height: 100%; object-fit: contain; }
/* A palavra do mozi é só uma troca de tipo de letra, herda o tamanho da frase. */
.hero__local__marca { font-family: "MuseoModerno", var(--titulo), sans-serif; font-weight: 700; }

.contacto__nota { color: rgba(255,255,255,.5); font-size: .92rem; }

/* --- promessa: três frentes ---------------------------------------------- */
.frentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin-top: 2.5rem; counter-reset: frente; }
.frente { position: relative; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--branco); border: 1px solid rgba(17,16,19,.06); border-radius: var(--raio-lg); padding: 2rem; overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; counter-increment: frente; }
.frente__num-removido { position: absolute; top: 1.3rem; left: 1.7rem; font-family: var(--titulo); font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--suave); }
.frente::after { content: ""; position: absolute; top: 0; right: 0; width: 34%; height: 7px; background: var(--cor-frente, var(--laranja)); }
.frente:hover { transform: translateY(-6px); box-shadow: 0 24px 65px rgba(17,16,19,.08); }
.frente__rotulo { font-family: var(--titulo); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 500; letter-spacing: -.04em; margin-bottom: .7rem; }
.frente:nth-child(1) { --cor-frente: var(--laranja); }.frente:nth-child(1) .frente__rotulo { color: var(--laranja); }
.frente:nth-child(2) { --cor-frente: var(--azul); }.frente:nth-child(2) .frente__rotulo { color: var(--azul); }
.frente:nth-child(3) { --cor-frente: var(--amarelo); }.frente:nth-child(3) .frente__rotulo { color: var(--amarelo-texto); }
.frente p { font-size: .98rem; color: var(--suave); }
.frentes__remate { font-family: var(--titulo); font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; margin-top: 1.6rem; }

/* --- tipos de negócio ------------------------------------------------------
   Mesmo tratamento dos cartões brancos de "O que muda com a Moz", mas na
   vertical: cinco colunas, cartão mais alto que largo, título a cor. */
.tipos { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap); margin-top: var(--gap); }
.tipo {
  position: relative;
  background: var(--branco);
  border: 1px solid rgba(17,16,19,.06);
  border-radius: var(--raio-lg);
  padding: 2rem;
  min-height: 6.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.tipo::after { content: ""; position: absolute; left: 2rem; bottom: 1rem; width: 0; height: 2px; background: var(--laranja); transition: width .35s cubic-bezier(.22,1,.36,1); }
.tipo:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(17,16,19,.06); }
.tipo:hover::after { width: 2.5rem; }
.tipo strong {
  display: block;
  font-family: var(--titulo);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .6rem;
}
.tipo span { font-size: .98rem; color: var(--suave); }
.tipo:nth-of-type(3n+1) strong { color: var(--laranja); }
.tipo:nth-of-type(3n+2) strong { color: var(--azul); }
.tipo:nth-of-type(3n+3) strong { color: var(--amarelo-texto); }

/* As duas mensagens ocupam duas colunas e têm fundo de marca.
   Ficam aqui, depois de .tipo, senão o branco de .tipo ganhava-lhes. */
.tipo--desafio, .tipo--casos { grid-column: span 2; justify-content: flex-end; }
.tipo--desafio { background: var(--laranja); text-decoration: none; transition: background-color .2s ease; }
.tipo--desafio:hover { background: #D2691E; }
.tipo--casos { background: var(--azul); }
.tipo--desafio strong, .tipo--casos strong { font-size: 1.6rem; }
.tipo--desafio span, .tipo--casos span { font-size: 1.02rem; }
/* Cartão laranja: texto escuro. O branco a 85% dava 2.82:1 e mesmo a 100% só
   chegava a 3.44:1. Com a tinta vai a 5.51:1 e cumpre texto pequeno. */
.tipo--desafio strong { color: var(--tinta) !important; }
.tipo--desafio span   { color: rgba(17,16,19,.85); }
.tipo--desafio em     { font-style: normal; font-weight: 600; color: var(--tinta); }
.tipo--desafio:hover strong, .tipo--desafio:hover em { color: var(--tinta) !important; }
/* Cartão teal: branco cheio dá 4.77:1 e passa. A 85% ficava em 3.90:1. */
.tipo--casos strong { color: var(--branco) !important; }
.tipo--casos span   { color: var(--branco); }
.tipo__seta { color: var(--branco); }

@media (max-width: 1200px) { .tipos { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .tipos { grid-template-columns: repeat(2, minmax(0,1fr)); }
                             .tipo { min-height: 12rem; padding: 1.5rem; } }
@media (max-width: 560px)  { .tipos { grid-template-columns: 1fr; }
                             .tipo { min-height: 0; }
                             .tipo--desafio, .tipo--casos { grid-column: span 1; } }

/* --- perguntas frequentes ------------------------------------------------- */
.perguntas { margin-top: 2.5rem; border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem .5rem;
  font-family: var(--titulo);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--laranja);
  transition: transform .25s ease;
}
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta summary:hover, .pergunta summary:focus-visible { color: var(--laranja); }
.pergunta p { padding: 0 3rem 1.6rem .5rem; font-size: 1rem; color: var(--suave); max-width: 46rem; }

/* --- formulário de contacto ----------------------------------------------- */
.contactos__convite { font-size: 1.05rem; color: rgba(255,255,255,.72); max-width: 34rem; margin: -1.5rem 0 2.5rem; }
.formulario { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.2rem; padding-bottom: 2.5rem; }
.campo { grid-column: span 4; display: flex; flex-direction: column; gap: .45rem; }
.campo--largo { grid-column: 1 / -1; }
/* Armadilha para robôs: fora do ecrã, sem foco, invisível para leitores. */
.campo--armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo label { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.campo__opcional { letter-spacing: normal; text-transform: none; font-weight: 400; }
.campo input, .campo select, .campo textarea {
  font-family: var(--corpo);
  font-size: 1rem;
  color: var(--branco);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
}
.campo input, .campo select { min-height: 3.2rem; }
.campo textarea { resize: vertical; min-height: 8rem; }
.campo select option { color: var(--tinta); }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(255,255,255,.35); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--laranja);
  background: rgba(255,255,255,.1);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: #ff8a6b; }
.formulario__fundo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.formulario__enviar {
  font-family: var(--titulo);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.02em;
  /* Texto escuro: branco sobre orangered dá 3.44:1 e chumba. A tinta dá 5.51:1. */
  color: var(--tinta);
  background: var(--laranja);
  border: none;
  border-radius: 999px;
  padding: .95rem 1.8rem;
  cursor: pointer;
  transition: background-color .2s ease;
}
.formulario__enviar:hover { background: #D2691E; }
.formulario__enviar:disabled { opacity: .55; cursor: default; }
.formulario__nota { font-size: .92rem; color: rgba(255,255,255,.6); }
.formulario__nota a { color: var(--laranja); text-decoration: underline; text-underline-offset: 3px; }
.formulario__nota[data-estado="erro"] { color: #ff8a6b; }
.formulario__nota[data-estado="ok"] { color: var(--branco); }

.contactos { background: var(--tinta); color: var(--branco); border-radius: var(--raio-lg); padding: clamp(2.5rem, 6vw, 5rem); margin-bottom: var(--gap); }
.contactos h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 500; margin-bottom: 2.5rem; }
.contactos h2 em { font-style: normal; color: var(--laranja); }
.contactos__grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.15); }
.contacto__rotulo { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .6rem; }
.contacto__valor { font-family: var(--titulo); font-size: 1.08rem; font-weight: 500; }
.contacto__valor a:hover { color: var(--laranja); }
/* Ícones das redes, da biblioteca Lucide, desenhados à mão no HTML para não
   trazer uma biblioteca inteira por causa de três símbolos. */
.redes { display: flex; gap: .85rem; align-items: center; }
.rede {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  color: var(--branco);
  transition: border-color .22s ease, color .22s ease;
}
.rede svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Só muda de cor, sem preenchimento. É o mesmo gesto dos outros links da página,
   e o traço laranja sobre escuro dá 5.94:1, muito mais nítido do que o inverso. */
.rede:hover, .rede:focus-visible { border-color: var(--laranja); color: var(--laranja); }

/* Copyright à esquerda, os dois links encostados à direita. */
.rodape { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: 1.5rem .5rem 2.5rem; font-size: .9rem; color: var(--suave); }
.rodape__horario { color: var(--suave); }
.rodape__horario em { font-style: normal; color: var(--tinta); }
@media (max-width: 720px) { .rodape__horario { width: 100%; order: 3; } }
.rodape__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: flex-end; }
/* Os dois são interativos, por isso levam a mesma formatação: sublinhado em ambos. */
.rodape__links a, .rodape__links button { text-decoration: underline; text-underline-offset: 3px; }
.rodape a:hover { color: var(--laranja); }

/* --- revelar ------------------------------------------------------------- */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visivel { opacity: 1; transform: none; }

/* O JavaScript activa esta classe apenas quando GSAP está disponível. */
.gsap-pronto .revelar { opacity: 1; transform: none; transition: none; }
.gsap-pronto .servico__mini { overflow: hidden; }

/* --- responsivo ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .marca-cartao, .hero__titulo, .hero__frase, .hero__cta, .hero__local,
  .metodo__passo, .numero { grid-column: span 12; }
  /* Em ecrã estreito: ícone e logótipo lado a lado, assinatura por baixo.
     O bloco 4 é decorativo e só gastaria altura, por isso sai. */
  .marca-cartao { min-height: 0; grid-template-rows: auto auto; }
  .bloco--cheio { display: none; }
  /* O menu é fixo no canto e, com tudo empilhado, cairia em cima do logótipo.
     Abre-se espaço no topo para ele. */
  .hero { padding-top: calc(var(--gap) + 76px); }
  .topo { top: var(--gap); right: var(--gap); }
  .hero__titulo { min-height: auto; padding: 2.2rem 1.6rem; }

  .cabecalho .seccao__etiqueta { grid-column: 3 / span 5; }
  .cabecalho .seccao__titulo { grid-column: 3 / -1; }
  .cabecalho .seccao__intro { grid-column: 5 / -1; }

  .campo { grid-column: span 6; }
  .campo--largo { grid-column: 1 / -1; }

  .servicos { grid-template-columns: 1fr; margin-top: 1.6rem; }
  .servico { min-height: 235px; }
  .servico__mini { grid-column: 2; grid-row: 1 / 4; }
  .servico__num, .servico__nome, .servico__desc, .servico__seta { display: initial; }
  .servico__num { display: inline-block; }
  .servico__seta { display: grid; }
}

@media (max-width: 680px) {
  .seccao { padding: 4.5rem 0; }
  .cabecalho { display: block; padding-top: 4.2rem; }
  .cabecalho::before { position: absolute; top: 0; left: 0; font-size: 3.7rem; line-height: 1; }
  .cabecalho .seccao__etiqueta { margin: 0 0 1rem 5.2rem; }
  .cabecalho .seccao__titulo { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .cabecalho .seccao__intro { margin-top: 1.2rem; }
  .cabecalho--painel { padding: 6.2rem 1.5rem 2rem; }
  .cabecalho--painel::before { top: 1.2rem; left: 1.5rem; }
  .cabecalho--linha { padding: 5rem 0 2rem; }
  .cabecalho--compacto { padding: 4.8rem 0 1.7rem; }

  .servico { grid-template-columns: minmax(0, 1fr) 92px; min-height: 210px; padding: 1.35rem; gap: .85rem 1rem; }
  .servico__nome { font-size: 1.48rem; }
  .servico__desc { padding-right: 0; font-size: .88rem; }
  .servico__seta { display: none; }

  .campo { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .servico { grid-template-columns: minmax(0, 1fr) 76px; }
  .servico__nome { font-size: 1.3rem; }
  .servico__desc { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .revelar { opacity: 1; transform: none; }
  .faixa__pista { animation: none; }
}
/* ==========================================================================
   Consentimento de cookies
   ========================================================================== */

.consentimento {
  position: fixed;
  z-index: 9000;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 660px;
  margin: 0 auto;
  padding: 1.25rem 1.4rem;
  background: var(--tinta);
  color: var(--papel-2);
  border-radius: var(--raio-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  font-family: var(--corpo);
  font-size: .95rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  transform: translateY(140%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.consentimento[hidden] { display: none; }
.consentimento.visivel { transform: translateY(0); }

.consentimento__icone {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  color: var(--laranja);
  display: flex;
  align-items: center;
  justify-content: center;
}
.consentimento__icone svg { width: 22px; height: 22px; }
.consentimento__texto { flex: 1 1 260px; margin: 0; font-size: .92rem; line-height: 1.45; }

.consentimento__texto strong {
  display: block;
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--branco);
}

.consentimento__texto a { color: var(--laranja); text-decoration: underline; }

.consentimento__botoes { display: flex; flex-wrap: wrap; gap: .6rem; }

.consentimento__botoes button {
  font-family: var(--corpo);
  font-size: .92rem;
  font-weight: 500;
  padding: .65rem 1.25rem;
  border-radius: var(--raio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.consentimento__sim { background: var(--laranja); color: var(--tinta); }
.consentimento__sim:hover { background: #D2691E; }

.consentimento__nao { background: transparent; color: var(--papel-2); border-color: rgba(255, 255, 255, .35); }
.consentimento__nao:hover { border-color: var(--papel-2); background: rgba(255, 255, 255, .08); }

.consentimento__botoes button:focus-visible,
.definicoes-cookies:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

.definicoes-cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.definicoes-cookies:hover { color: var(--laranja); }

@media (max-width: 600px) {
  .consentimento { padding: 1.1rem; }
  .consentimento__botoes { width: 100%; }
  .consentimento__botoes button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .consentimento { transition: none; }
}