/*
 * turna.pt — «Mar e laranja», a partir da linguagem da Surfrider: fotografia de mar a toda a largura, blocos azul-mar que
 * saem pela borda com a foto encaixada, rótulos de secção na vertical, títulos grandes, botões retos em caixa alta e um
 * realce por baixo das frases que importam. O laranja da marca fica para as ações, os destaques e a marca.
 * Letras alojadas aqui (Archivo e Big Shoulders): o site não carrega nada de terceiros.
 */

@font-face {
  font-family: 'Big Shoulders';
  src: url('/fonts/big-shoulders.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-italico.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Mar */
  --tinta: #0e2433; /* texto e fundos escuros (azul-noite) */
  --tinta-2: #4a5d69; /* texto secundário sobre branco e fundo (6,9:1) */
  --tinta-mar: #33505f; /* texto secundário sobre o azul-mar (4,8:1) */
  --mar: #a9c6d8; /* os blocos da Surfrider */
  --mar-claro: #dce9f0;
  --fundo: #f3f6f7;
  --branco: #ffffff;
  --linha: #d3dde3;
  --espuma: #c9d8e1; /* texto secundário sobre a tinta (10,9:1) */
  /* Marca */
  --laranja: #e8451f;
  --laranja-forte: #cc3d18; /* botões com texto branco (4,94:1) */
  --laranja-texto: #c2410c; /* ligações (5,18:1) */
  --laranja-suave: #fbd5c6; /* o realce por baixo das frases */
  /* Estados (só onde a app os usa) */
  --verde: #1f8048;
  --verde-suave: #e2f1e8;
  --vermelha: #c8261b;
  --vermelha-suave: #fbe3e0;
  --amarela: #f5c518;
  --estrela: #e8a800;
  /* Forma */
  --raio: 4px;
  --largura: 1240px;
  --topo: 76px;
  --placa: 'Big Shoulders', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 64px);
  scrollbar-color: var(--tinta-2) var(--fundo);
}

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--laranja-forte);
}

::selection {
  background: var(--laranja-suave);
  color: var(--tinta);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--laranja-texto);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--tinta);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font: 900 clamp(3.4rem, 9.5vw, 6rem) / 0.92 var(--placa);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2.3rem, 4.8vw, 4rem);
}

h3 {
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--tinta);
  color: var(--branco);
  font-weight: 700;
}

.saltar:focus {
  top: 12px;
}

.wrap {
  width: min(var(--largura), 100% - 32px);
  margin-inline: auto;
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--tinta-2);
}

.nota {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--tinta-2);
  max-width: 70ch;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* O realce da Surfrider: uma faixa por baixo da metade inferior das letras. */
.realce {
  background: linear-gradient(transparent 58%, var(--laranja-suave) 58%, var(--laranja-suave) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------------- Secções e fundos */

.seccao {
  position: relative;
  padding-block: clamp(80px, 11vw, 140px);
}

.seccao-curta {
  padding-block: clamp(48px, 7vw, 80px);
}

.fundo-areia,
.fundo-claro {
  background: var(--fundo);
}

.fundo-mar {
  background: var(--mar);
}

.fundo-mar .lead,
.fundo-mar .nota {
  color: var(--tinta-mar);
}

.fundo-tinta {
  background: var(--tinta);
  color: var(--branco);
}

.fundo-tinta .lead,
.fundo-tinta p {
  color: var(--espuma);
}

.fundo-tinta a:not(.btn) {
  color: var(--laranja-suave);
}

.fundo-tinta .nota {
  color: var(--espuma);
}

.fundo-laranja {
  background: var(--laranja-forte);
  color: var(--branco);
}

.fundo-laranja p {
  color: var(--branco);
}

/* Rótulo vertical na margem esquerda (como na Surfrider): só no computador, e só decorativo. */
.rotulo-lado {
  position: absolute;
  left: max(14px, calc((100vw - var(--largura)) / 2 - 56px));
  top: clamp(80px, 11vw, 140px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 700 0.72rem/1 var(--texto);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
}

.rotulo-lado::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: 12px;
  border-radius: 50%;
  background: var(--laranja);
}

.fundo-tinta .rotulo-lado {
  color: var(--branco);
}

@media (max-width: 1200px) {
  .rotulo-lado {
    display: none;
  }
}

.titulo-seccao {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 860px;
}

.titulo-centro {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* ---------------------------------------------------------------- Botões: retos, caixa alta, como na Surfrider */

.btn {
  --btn-fundo: var(--tinta);
  --btn-texto: var(--branco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 2px solid var(--btn-fundo);
  border-radius: 0;
  background: var(--btn-fundo);
  color: var(--btn-texto);
  font: 700 0.8rem/1 var(--texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms var(--saida), color 180ms var(--saida), border-color 180ms var(--saida);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn:hover {
  background: transparent;
  color: var(--btn-fundo);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.btn-laranja {
  --btn-fundo: var(--laranja-forte);
}

.btn-branco {
  --btn-fundo: var(--branco);
  --btn-texto: var(--tinta);
}

.btn-contorno {
  background: transparent;
  color: var(--btn-fundo);
}

.btn-contorno:hover {
  background: var(--btn-fundo);
  color: var(--btn-texto);
}

.fundo-tinta .btn-contorno,
.rodape .btn-contorno,
.heroi .btn-contorno {
  --btn-fundo: var(--branco);
  --btn-texto: var(--tinta);
}

.btn-grande {
  min-height: 58px;
  padding: 0 32px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta);
  font: 700 0.8rem/1 var(--texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.mais::after {
  content: '→';
  color: var(--laranja-forte);
  transition: transform 200ms var(--saida);
}

.mais:hover {
  color: var(--laranja-texto);
}

.mais:hover::after {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------- Topo: logótipo ao centro (como na Too Good To Go) */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.topo .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: var(--topo);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  font: 900 1.9rem/1 var(--placa);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.marca img {
  width: 34px;
  height: 34px;
}

.marca b {
  color: var(--laranja);
}

.nav-lado {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-direita {
  justify-content: flex-end;
}

.nav-lado a,
.nav-movel a {
  padding: 10px 12px;
  color: var(--tinta);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
}

.nav-lado a:hover {
  color: var(--laranja-texto);
}

.nav-lado a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--laranja);
}

.nav-lado .btn {
  margin-left: 8px;
  padding: 0 18px;
  min-height: 44px;
  color: var(--branco);
  font-size: 0.74rem;
}

.nav-lado .btn:hover {
  color: var(--btn-fundo);
}

.painel {
  position: relative;
}

.painel summary {
  list-style: none;
  white-space: nowrap;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
}

.painel summary::-webkit-details-marker {
  display: none;
}

.painel summary::after {
  content: ' ▾';
  color: var(--tinta-2);
}

.painel-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  padding: 8px;
  border: 1px solid var(--linha);
  background: var(--branco);
  box-shadow: 0 18px 40px -18px rgb(14 36 51 / 0.35);
}

.painel-menu a {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  padding: 12px;
  color: var(--tinta);
  text-decoration: none;
}

.painel-menu a:hover {
  background: var(--fundo);
}

.painel-menu .ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--mar-claro);
  color: var(--tinta);
}

.painel-menu .ico svg {
  width: 20px;
  height: 20px;
}

.painel-menu small {
  color: var(--tinta-2);
}

.menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.menu-botao svg {
  width: 26px;
  height: 26px;
}

.nav-movel {
  display: none;
}

@media (max-width: 1020px) {
  .topo .wrap {
    grid-template-columns: auto 1fr;
  }
  .nav-lado {
    display: none;
  }
  .menu-botao {
    display: grid;
  }
  .menu-aberto .nav-movel {
    display: grid;
    gap: 2px;
    padding: 8px 16px 22px;
    border-top: 1px solid var(--linha);
    background: var(--branco);
  }
  .nav-movel a {
    padding: 14px 4px;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--linha);
  }
  .nav-movel a[aria-current='page'] {
    color: var(--laranja-texto);
  }
  .nav-movel .btn {
    margin-top: 14px;
    color: var(--branco);
  }
}

/* ---------------------------------------------------------------- Fotografias (estatico/img/fotos/<nome>.webp) */

.foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------- Herói: fotografia a toda a largura */

.heroi {
  position: relative;
  display: grid;
  min-height: min(calc(100svh - var(--topo)), 880px);
  color: var(--branco);
  isolation: isolate;
}

.heroi > .foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.heroi::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(14 36 51 / 0.72) 0%, rgb(14 36 51 / 0.35) 55%, rgb(14 36 51 / 0.1) 100%),
    linear-gradient(0deg, rgb(14 36 51 / 0.55), transparent 45%);
}

.heroi .wrap {
  display: grid;
  align-content: end;
  gap: 26px;
  padding-block: clamp(64px, 10vw, 120px);
}

.heroi h1 {
  max-width: 11ch;
  font-size: clamp(3.6rem, 10vw, 6rem);
  text-shadow: 0 2px 30px rgb(14 36 51 / 0.35);
}

.heroi .lead {
  color: var(--branco);
  font-weight: 500;
  max-width: 54ch;
}

.heroi-nota {
  font-size: 0.92rem;
  color: var(--espuma);
}

/* ---------------------------------------------------------------- Porquê usar (como a Too Good To Go) */

.porque {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px) 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.porque-lado {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
}

.porque-lado:first-child {
  text-align: right;
  justify-items: end;
}

.porque-item {
  display: grid;
  gap: 12px;
  max-width: 300px;
}

.porque-lado:first-child .porque-item {
  justify-items: end;
}

.porque-item .ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
}

.porque-item .ico svg {
  width: 22px;
  height: 22px;
}

.porque-item h3 {
  font: 800 1.3rem/1.1 var(--texto);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.porque-item p {
  color: var(--tinta-2);
}

.porque-centro {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px 0;
}

.porque-centro::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mar-claro);
  z-index: -1;
}

@media (max-width: 900px) {
  .porque {
    grid-template-columns: 1fr 1fr;
  }
  .porque-centro {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .porque-lado:first-child {
    text-align: left;
    justify-items: start;
  }
  .porque-lado:first-child .porque-item {
    justify-items: start;
  }
}

@media (max-width: 560px) {
  .porque {
    grid-template-columns: 1fr;
  }
  .porque-lado {
    gap: 36px;
  }
}

/* Faixa a correr (como a das categorias da Too Good To Go). */
.faixa-corre {
  overflow: hidden;
  background: var(--laranja-forte);
  color: var(--branco);
  border-block: 1px solid var(--tinta);
}

.faixa-corre-trilho {
  display: flex;
  width: max-content;
  animation: correr 38s linear infinite;
}

.faixa-corre span {
  padding: 18px 26px;
  font: 900 clamp(1.5rem, 3vw, 2.3rem) / 1 var(--placa);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.faixa-corre span::after {
  content: '•';
  margin-left: 52px;
  color: var(--laranja-suave);
}

@keyframes correr {
  to {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------- O telemóvel (a app desenhada aqui, enquanto não há capturas) */

.telemovel {
  position: relative;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 9 / 18.5;
  padding: 11px;
  border-radius: 42px;
  background: var(--tinta);
  box-shadow: 0 40px 70px -40px rgb(14 36 51 / 0.65);
}

.telemovel-pequeno {
  width: 232px;
}

.ecra {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: 34px 14px 14px;
  border-radius: 32px;
  background: #f7f5f2;
  color: #2b2118;
  overflow: hidden;
  font-size: 0.78rem;
}

.ecra-topo {
  margin: -34px -14px 4px;
  padding: 40px 16px 16px;
  background: #cc3d18;
  color: #ffffff;
}

.ecra-topo small {
  display: block;
  opacity: 0.9;
}

.ecra-topo strong {
  display: block;
  font: 800 1.35rem/1.05 var(--texto);
}

.ecra-cartao {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);
}

.ecra-cartao b {
  font-size: 0.86rem;
}

.ecra-cartao span {
  color: #6b5e55;
}

.ecra-linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ecra-chip {
  display: inline-block;
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e2f1e8;
  color: #1f8048;
  font-size: 0.7rem;
  font-weight: 700;
}

.ecra-chip-amarelo {
  background: #fff3c4;
  color: #8a5a00;
}

.ecra-botao {
  padding: 10px;
  border-radius: 10px;
  background: #cc3d18;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
}

.ecra-pessoa {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
}

.ecra-pessoa i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mar);
}

.ecra-grelha {
  display: grid;
  grid-template-columns: 34px repeat(5, 1fr);
  gap: 3px;
  font-size: 0.62rem;
  text-align: center;
}

.ecra-grelha b {
  text-align: left;
}

.ecra-grelha i {
  height: 18px;
  border-radius: 4px;
  background: #e2f1e8;
}

.ecra-grelha i.f {
  background: #2e9e5b;
}

.ecra-grelha i.p {
  background: #f5c518;
}

/* ---------------------------------------------------------------- Como funciona: 3 passos (como a Uber) */

.passos3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passo {
  display: grid;
  align-content: start;
  gap: 16px;
  counter-increment: passo;
}

.passo-visual {
  display: grid;
  place-items: center;
  padding: 36px 16px 0;
  background: var(--mar);
  overflow: hidden;
  height: 360px;
}

.passo-visual .telemovel {
  align-self: start;
}

.fundo-claro .passo-visual {
  background: var(--branco);
}

.passo h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 6px;
  font-size: 1.5rem;
}

.passo h3::before {
  content: counter(passo);
  font: 900 3rem/0.8 var(--placa);
  color: var(--laranja);
}

.passo p {
  color: var(--tinta-2);
}

@media (max-width: 860px) {
  .passos3 {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .passo-visual {
    height: 320px;
  }
}

/* ---------------------------------------------------------------- Tira o máximo do Turna: 4 cartões (como a Monzo) */

.carrossel-cabeca {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.carrossel-setas {
  display: flex;
  gap: 8px;
}

.carrossel-setas button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: var(--branco);
  color: var(--tinta);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 160ms var(--saida), color 160ms var(--saida);
}

.carrossel-setas button:hover:not(:disabled) {
  background: var(--tinta);
  color: var(--branco);
}

.carrossel-setas button:disabled {
  opacity: 0.3;
  cursor: default;
}

.carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, calc((100% - 3 * 24px) / 4));
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.carrossel::-webkit-scrollbar {
  display: none;
}

.papel {
  display: grid;
  align-content: start;
  gap: 14px;
  scroll-snap-align: start;
}

.papel-imagem {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3.4;
  padding: 22px;
  border-radius: 18px;
  overflow: hidden;
}

.papel-imagem .ecra-cartao {
  width: min(250px, 100%);
}

.papel-pilha {
  display: grid;
  gap: 8px;
  width: min(250px, 100%);
}

.papel-titular {
  background: var(--laranja);
}

.papel-folguista {
  background: var(--mar);
}

.papel-chefe {
  background: var(--tinta);
}

.papel-empresa {
  background: var(--mar-claro);
}

.papel h3 {
  font-size: 1.5rem;
  margin-top: 6px;
}

.papel p {
  color: var(--tinta-2);
}

.papel .btn {
  justify-self: start;
  min-height: 42px;
  padding: 0 18px;
}

@media (max-width: 700px) {
  .carrossel {
    grid-auto-columns: 82%;
  }
  .carrossel-setas {
    display: none;
  }
}

/* ---------------------------------------------------------------- Manifesto (a frase grande da Surfrider) */

.manifesto {
  max-width: 980px;
  font: 600 clamp(1.9rem, 4.2vw, 3.3rem) / 1.14 var(--texto);
  letter-spacing: -0.025em;
  color: var(--tinta);
}

/* ---------------------------------------------------------------- Bloco dividido: texto num lado, foto num bloco azul que sai pela borda */

.dividido-mar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  min-height: 620px;
}

.dividido-mar-texto {
  display: grid;
  align-content: center;
  gap: 22px;
  padding: clamp(64px, 9vw, 120px) clamp(64px, 9vw, 140px) clamp(64px, 9vw, 120px) max(16px, calc((100vw - var(--largura)) / 2));
}

.dividido-mar-bloco {
  position: relative;
  align-self: stretch;
  display: grid;
  align-items: center;
  padding: clamp(40px, 6vw, 80px) max(16px, calc((100vw - var(--largura)) / 2)) clamp(40px, 6vw, 80px) 0;
  background: var(--mar);
}

.dividido-mar-bloco > .foto,
.dividido-mar-bloco > .moldura {
  margin-left: clamp(-80px, -5vw, -32px);
  width: calc(100% + clamp(32px, 5vw, 80px));
  aspect-ratio: 4 / 3;
  height: auto;
}

.moldura {
  position: relative;
}

.moldura > .foto {
  position: absolute;
  inset: 0;
}

.moldura > .sobre-foto {
  position: absolute;
  right: 6%;
  bottom: -28px;
  width: min(380px, 80%);
}

.dividido-mar-inverso .dividido-mar-texto {
  order: 2;
  padding-left: clamp(64px, 9vw, 140px);
  padding-right: max(16px, calc((100vw - var(--largura)) / 2));
}

.dividido-mar-inverso .dividido-mar-bloco {
  padding-left: max(16px, calc((100vw - var(--largura)) / 2));
  padding-right: 0;
}

.dividido-mar-inverso .dividido-mar-bloco > .foto,
.dividido-mar-inverso .dividido-mar-bloco > .moldura {
  margin-left: 0;
  margin-right: clamp(-80px, -5vw, -32px);
}

@media (max-width: 900px) {
  .dividido-mar {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .dividido-mar-texto,
  .dividido-mar-inverso .dividido-mar-texto {
    order: 0;
    padding: 64px 16px 40px;
  }
  .dividido-mar-bloco,
  .dividido-mar-inverso .dividido-mar-bloco {
    padding: 32px 16px 56px;
  }
  .dividido-mar-bloco > .foto,
  .dividido-mar-bloco > .moldura,
  .dividido-mar-inverso .dividido-mar-bloco > .foto,
  .dividido-mar-inverso .dividido-mar-bloco > .moldura {
    margin: 0;
    width: 100%;
  }
}

/* ---------------------------------------------------------------- O mar */

.mar-cartao {
  background: var(--tinta);
  color: var(--branco);
  box-shadow: 0 30px 60px -30px rgb(14 36 51 / 0.6);
}

.mar-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgb(201 216 225 / 0.2);
}

.mar-cabeca strong {
  font: 800 1.5rem/1 var(--placa);
  text-transform: uppercase;
}

.mar-cabeca small {
  color: var(--espuma);
}

.mar-linhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.mar-linhas div {
  padding: 14px 18px;
  border-top: 1px solid rgb(201 216 225 / 0.16);
}

.mar-linhas dt {
  font-size: 0.78rem;
  color: var(--espuma);
}

.mar-linhas dd {
  margin: 2px 0 0;
  font: 800 1.9rem/1 var(--placa);
  font-variant-numeric: tabular-nums;
}

.mar-linhas dd small {
  font: 600 0.8rem var(--texto);
  color: var(--espuma);
}

.mar-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid rgb(201 216 225 / 0.16);
  font-size: 0.88rem;
}

.mar-aviso i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amarela);
}

/* ---------------------------------------------------------------- Regras (justo de propósito) */

.regras {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tinta);
}

.regras li {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--tinta);
}

.regras strong {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.regras p {
  color: var(--tinta-2);
  max-width: 54ch;
}

.fundo-tinta .regras,
.fundo-tinta .regras li {
  border-color: rgb(201 216 225 / 0.35);
}

@media (max-width: 760px) {
  .regras li {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---------------------------------------------------------------- Causas (como o ativismo da Patagonia) */

.causas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, calc((100% - 3 * 16px) / 4));
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.causa {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 340px;
  padding: 22px;
  scroll-snap-align: start;
}

.causa .etiqueta {
  justify-self: start;
  background: var(--branco);
  color: var(--tinta);
}

.causa h3 {
  font-size: 1.55rem;
}

.causa p {
  font-size: 0.95rem;
}

.causa-tinta {
  background: var(--tinta);
  color: var(--branco);
}

.causa-tinta p {
  color: var(--espuma);
}

.causa-laranja {
  background: var(--laranja-forte);
  color: var(--branco);
}

.causa-mar {
  background: var(--mar);
}

.causa-mar p {
  color: var(--tinta-mar);
}

.causa-claro {
  background: var(--mar-claro);
}

.causa-claro p {
  color: var(--tinta-2);
}

@media (max-width: 700px) {
  .causas {
    grid-auto-columns: 82%;
  }
}

/* ---------------------------------------------------------------- Ziguezague (como o «Sobre nós» da Too Good To Go) */

.zigue {
  display: grid;
  gap: clamp(72px, 10vw, 128px);
}

.zigue-item {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.zigue-item:nth-child(even) .zigue-imagem {
  order: 2;
}

.zigue-imagem {
  position: relative;
  aspect-ratio: 5 / 4;
}

.zigue-imagem > .foto {
  position: absolute;
  inset: 0;
}

.zigue-imagem::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -22px;
  bottom: -22px;
  width: 60%;
  height: 60%;
  background: var(--mar);
}

.zigue-item:nth-child(even) .zigue-imagem::after {
  right: auto;
  left: -22px;
  background: var(--laranja-suave);
}

.zigue-texto {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.zigue-texto h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}

.zigue-texto > p {
  color: var(--tinta-2);
  font-size: 1.08rem;
}

@media (max-width: 860px) {
  .zigue-item {
    grid-template-columns: 1fr;
  }
  .zigue-item:nth-child(even) .zigue-imagem {
    order: 0;
  }
}

/* ---------------------------------------------------------------- Herói central (Projetos e Sobre) */

.heroi-centro {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(calc(100svh - var(--topo)), 760px);
  color: var(--branco);
  text-align: center;
  isolation: isolate;
}

.heroi-centro > .foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.heroi-centro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(14 36 51 / 0.5);
}

.heroi-centro .wrap {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding-block: 96px;
}

.heroi-centro h1 {
  max-width: 14ch;
}

.heroi-centro .lead {
  color: var(--branco);
  font-weight: 500;
  max-width: 62ch;
}

.topo-centro {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
  padding-block: clamp(72px, 10vw, 120px) clamp(40px, 6vw, 64px);
}

.topo-centro h1 {
  color: var(--tinta);
  max-width: 16ch;
}

.topo-centro .lead {
  margin-inline: auto;
}

.foto-larga {
  aspect-ratio: 21 / 9;
  max-height: 560px;
}

.foto-larga .foto,
.foto-larga.foto {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- Cabeçalho das outras páginas */

.cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  background: var(--mar);
  min-height: 460px;
}

.cabecalho-texto {
  display: grid;
  align-content: end;
  gap: 22px;
  padding: clamp(64px, 9vw, 112px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 72px) max(16px, calc((100vw - var(--largura)) / 2));
}

.cabecalho h1 {
  font-size: clamp(3rem, 7vw, 5.2rem);
}

.cabecalho .lead {
  color: var(--tinta-mar);
  font-weight: 500;
}

.cabecalho > .foto {
  height: 100%;
}

.cabecalho-simples {
  grid-template-columns: 1fr;
  min-height: 0;
}

@media (max-width: 760px) {
  .cabecalho {
    grid-template-columns: 1fr;
  }
  .cabecalho > .foto {
    min-height: 220px;
  }
  .cabecalho-texto {
    padding: 56px 16px 40px;
  }
}

.subnav {
  position: sticky;
  top: var(--topo);
  z-index: 40;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.subnav .wrap {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav a {
  flex: none;
  padding: 16px 14px;
  color: var(--tinta);
  font: 700 0.78rem/1 var(--texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.subnav a:hover {
  box-shadow: inset 0 -2px 0 var(--laranja);
}

/* ---------------------------------------------------------------- Lista com visto */

.lista-check {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-check li {
  position: relative;
  padding-left: 30px;
}

.lista-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--laranja-forte)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

/* ---------------------------------------------------------------- Colunas de texto */

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.colunas > div {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--tinta);
}

.colunas h3 {
  font-size: 1.35rem;
}

.colunas p {
  color: var(--tinta-2);
}

.fundo-tinta .colunas > div {
  border-top-color: rgb(201 216 225 / 0.4);
}

.fundo-tinta .colunas p {
  color: var(--espuma);
}

.dividido {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.colar {
  position: sticky;
  top: calc(var(--topo) + 84px);
}

@media (max-width: 900px) {
  .dividido {
    grid-template-columns: 1fr;
  }
  .colar {
    position: static;
  }
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--fundo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.em-breve {
  background: var(--laranja-forte);
  color: var(--branco);
}

.etiqueta-verde {
  background: var(--verde-suave);
  color: var(--verde);
}

/* ---------------------------------------------------------------- Funcionalidades (A App) */

.funcoes {
  display: grid;
  gap: clamp(64px, 9vw, 112px);
}

.funcao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.funcao:nth-child(even) .funcao-visual {
  order: -1;
}

.funcao-texto {
  display: grid;
  gap: 18px;
}

.funcao-texto h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.funcao-texto > p {
  color: var(--tinta-2);
  font-size: 1.08rem;
  max-width: 56ch;
}

.funcao-visual {
  display: grid;
  justify-items: center;
  padding: 40px 20px;
  background: var(--mar);
}

.funcao:nth-child(even) .funcao-visual {
  background: var(--mar-claro);
}

@media (max-width: 860px) {
  .funcao {
    grid-template-columns: 1fr;
  }
  .funcao:nth-child(even) .funcao-visual {
    order: 0;
  }
}

.telefone {
  width: min(270px, 74vw);
  aspect-ratio: 1080 / 2340;
  margin: 0;
  padding: 10px;
  border-radius: 40px;
  background: var(--tinta);
  box-shadow: 0 40px 60px -40px rgb(14 36 51 / 0.6);
}

.captura {
  display: grid;
  place-content: center;
  gap: 6px;
  height: 100%;
  border-radius: 30px;
  background: var(--fundo);
  text-align: center;
  color: var(--tinta-2);
}

.captura strong {
  font: 800 1.2rem/1 var(--placa);
  text-transform: uppercase;
  color: var(--tinta);
}

.telefone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

/* ---------------------------------------------------------------- Planos */

.planos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--tinta);
  background: var(--branco);
}

.plano {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border-left: 1px solid var(--tinta);
}

.plano:first-child {
  border-left: 0;
  background: var(--tinta);
  color: var(--branco);
}

.plano h3 {
  font-size: 1.5rem;
}

.plano-preco {
  font: 800 1.9rem/1 var(--placa);
}

.plano-preco small {
  display: block;
  margin-top: 6px;
  font: 600 0.85rem/1.3 var(--texto);
  color: var(--tinta-2);
}

.plano:first-child .plano-preco small {
  color: var(--espuma);
}

.plano .lista-check {
  font-size: 0.95rem;
}

@media (max-width: 1020px) {
  .planos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plano:nth-child(3) {
    border-left: 0;
  }
  .plano:nth-child(n + 3) {
    border-top: 1px solid var(--tinta);
  }
}

@media (max-width: 600px) {
  .planos {
    grid-template-columns: 1fr;
  }
  .plano {
    border-left: 0;
  }
  .plano + .plano {
    border-top: 1px solid var(--tinta);
  }
}

.faixas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.faixa {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  background: var(--branco);
}

.fundo-areia .faixa,
.fundo-claro .faixa {
  background: var(--branco);
}

.faixa h3 {
  font-size: 1.3rem;
}

.faixa p {
  color: var(--tinta-2);
}

@media (max-width: 860px) {
  .faixas {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- Duas colunas */

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.duo > div {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--mar-claro);
}

.duo > div + div {
  background: var(--mar);
}

.duo > div + div p {
  color: var(--tinta-mar);
}

.duo h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
}

.duo p {
  color: var(--tinta-2);
}

@media (max-width: 760px) {
  .duo {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- Passos numerados (páginas Equipas e Projetos) */

.passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  border-top: 1px solid var(--tinta);
}

.passos li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px 22px 0 0;
  counter-increment: passo;
}

.passos li::before {
  content: counter(passo);
  font: 900 3.2rem/0.9 var(--placa);
  color: var(--laranja);
}

.passos h3 {
  font-size: 1.3rem;
}

.passos p {
  color: var(--tinta-2);
}

.fundo-tinta .passos {
  border-top-color: rgb(201 216 225 / 0.4);
}

.fundo-tinta .passos p {
  color: var(--espuma);
}

.passos-coluna {
  grid-template-columns: 1fr;
}

.passos-coluna li {
  grid-template-columns: 56px 1fr;
  column-gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linha);
}

.passos-coluna li::before {
  grid-row: span 2;
}

@media (max-width: 860px) {
  .passos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }
}

@media (max-width: 520px) {
  .passos {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- Perguntas */

.faq {
  display: grid;
  gap: 40px;
}

.faq-grupo h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.faq details {
  border-bottom: 1px solid var(--linha);
}

.faq summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-weight: 700;
  font-size: 1.08rem;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.8rem/1 var(--texto);
  color: var(--laranja-forte);
  transition: transform 200ms var(--saida);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq details p {
  padding: 0 44px 22px 0;
  color: var(--tinta-2);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- Formulários */

.formulario {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--branco);
  color: var(--tinta);
  box-shadow: 0 30px 60px -40px rgb(14 36 51 / 0.45);
}

.formulario h3 {
  font-size: 1.7rem;
}

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 560px) {
  .campos {
    grid-template-columns: 1fr;
  }
}

.campo {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.campo > span,
.campo legend {
  padding: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

.opcional {
  font-weight: 500;
  color: var(--tinta-2);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid var(--linha);
  border-radius: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 1rem/1.4 var(--texto);
  transition: border-color 160ms var(--saida), background-color 160ms var(--saida);
}

.campo textarea {
  min-height: 132px;
  resize: vertical;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-bottom-color: var(--tinta-2);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--laranja-forte);
  background: var(--mar-claro);
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcoes label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  font-weight: 600;
  cursor: pointer;
}

.opcoes label:has(input:checked) {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--branco);
}

.opcoes input {
  accent-color: var(--laranja-forte);
}

.isco {
  position: absolute;
  left: -9999px;
}

.form-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 6px;
}

.form-privacidade {
  font-size: 0.88rem;
  color: var(--tinta-2);
  max-width: 40ch;
}

.form-estado:empty {
  display: none;
}

.form-estado[data-tom='erro'] {
  padding: 12px 14px;
  background: var(--vermelha-suave);
  color: var(--vermelha);
  font-weight: 600;
}

.form-sucesso {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--verde-suave);
}

.form-sucesso h3 {
  font-size: 1.7rem;
}

/* ---------------------------------------------------------------- Lojas */

.lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.loja {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 20px 0 16px;
  border: 1px solid rgb(255 255 255 / 0.5);
  background: var(--tinta);
  color: var(--branco);
}

.loja svg {
  width: 26px;
  height: 26px;
}

.loja small {
  display: block;
  font-size: 0.72rem;
  color: var(--espuma);
}

.loja strong {
  font: 800 1.3rem/1 var(--placa);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- Textos legais */

.legal {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.legal-indice {
  position: sticky;
  top: calc(var(--topo) + 24px);
  display: grid;
  gap: 2px;
  max-height: calc(100vh - var(--topo) - 48px);
  overflow-y: auto;
  font-size: 0.92rem;
}

.legal-indice strong {
  margin-bottom: 10px;
  font: 700 0.78rem/1 var(--texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-indice a {
  padding: 6px 10px;
  border-left: 2px solid var(--linha);
  color: var(--tinta-2);
  text-decoration: none;
}

.legal-indice a:hover {
  border-left-color: var(--laranja);
  color: var(--tinta);
}

.texto-legal {
  max-width: 72ch;
}

.texto-legal > * + * {
  margin-top: 16px;
}

.texto-legal h2 {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--tinta);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}

.texto-legal h2:first-child {
  margin-top: 0;
}

.texto-legal h3 {
  margin-top: 30px;
  font-size: 1.25rem;
}

.texto-legal ul,
.texto-legal ol {
  padding-left: 1.3em;
}

.texto-legal li + li {
  margin-top: 6px;
}

.resumo-legal {
  padding: 22px 24px;
  background: var(--mar-claro);
}

.resumo-legal ul {
  margin: 10px 0 0;
}

.tabela-envolta {
  overflow-x: auto;
  border: 1px solid var(--tinta);
}

.tabela-legal {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.tabela-legal th,
.tabela-legal td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  vertical-align: top;
}

.tabela-legal thead th {
  background: var(--tinta);
  color: var(--branco);
  font: 700 0.76rem/1.2 var(--texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tabela-legal tbody th {
  font-weight: 700;
  min-width: 150px;
}

.tabela-legal tbody tr:last-child > * {
  border-bottom: 0;
}

/* O que falta preencher: marcado a amarelo. */
.preencher {
  padding: 1px 6px;
  background: var(--amarela);
  color: var(--tinta);
  font-weight: 700;
}

@media (max-width: 900px) {
  .legal {
    grid-template-columns: 1fr;
  }
  .legal-indice {
    position: static;
    max-height: none;
    padding: 18px;
    background: var(--fundo);
  }
}

/* ---------------------------------------------------------------- Perfil partilhado e perfil profissional */

.perfil-cartao {
  display: grid;
  gap: 22px;
  max-width: 660px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  background: var(--branco);
  color: var(--tinta);
  box-shadow: 0 40px 80px -40px rgb(14 36 51 / 0.6);
}

.perfil-cartao h1 {
  font-size: clamp(2.6rem, 7vw, 4rem);
  color: var(--tinta);
}

.perfil-cartao .lead {
  color: var(--tinta-2);
}

.ns-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ns-foto {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}

.ns-iniciais {
  display: grid;
  place-items: center;
  background: var(--mar);
  color: var(--tinta);
  font: 900 2.6rem/1 var(--placa);
}

.ns-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ns-bio {
  font-size: 1.1rem;
  max-width: 60ch;
}

.ns-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ns-num {
  display: grid;
  gap: 2px;
  min-width: 140px;
  padding: 14px 16px;
  background: var(--mar-claro);
}

.ns-num strong {
  font: 900 2.2rem/1 var(--placa);
  font-variant-numeric: tabular-nums;
}

.ns-num span {
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.ns-titulo {
  font-size: 1.3rem;
}

.estrelas {
  display: inline-flex;
  gap: 2px;
  vertical-align: -3px;
}

.estrelas svg {
  width: 20px;
  height: 20px;
}

.perfil-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------------------------------------------------------- Rodapé */

.rodape {
  background: var(--tinta);
  color: var(--branco);
  padding-block: clamp(64px, 8vw, 96px) 28px;
}

.rodape .marca {
  color: var(--branco);
}

.rodape-grelha {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
}

.rodape h2 {
  margin-bottom: 16px;
  font: 700 0.76rem/1 var(--texto);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--espuma);
}

.rodape ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape a {
  color: var(--branco);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--laranja-suave);
  text-decoration: underline;
}

.rodape p {
  color: var(--espuma);
}

.rodape-fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgb(201 216 225 / 0.25);
  font-size: 0.9rem;
  color: var(--espuma);
}

.rodape-fim nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 860px) {
  .rodape-grelha {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .rodape-grelha {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- 404 */

.erro-404 {
  display: grid;
  justify-items: start;
  gap: 24px;
  max-width: 720px;
}

.titulo-fecho {
  font: 900 clamp(3rem, 8vw, 5.4rem) / 0.95 var(--placa);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 14ch;
}

.causa-tinta .mais,
.causa-laranja .mais,
.causa-laranja .mais::after {
  color: var(--branco);
}

/* Doc 10, ronda 3: glossário, centro de confiança e o mar público. */
.glossario dt {
  font-weight: 700;
  margin-top: 18px;
}
.glossario dd {
  margin: 4px 0 0;
}
.mar-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.mar-lista dt {
  font-size: 0.85em;
  opacity: 0.8;
}
.mar-lista dd {
  margin: 0;
  font-size: 1.4em;
  font-weight: 700;
}

/* ================================================================================================================
 * Movimento — tudo o que se mexe no site (com js/mov-cedo.js e js/movimento.js). Só vale com <html class="mov">, que
 * nunca é posto com «reduzir movimento»: aí o site fica parado, como antes. As curvas são as da app (--saida, --mola).
 * ================================================================================================================ */

@property --rev {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --s {
  syntax: '<number>';
  inherits: false;
  initial-value: 1.2;
}

:root {
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  interpolate-size: allow-keywords;
}

/* ---------------------------------------------------------------- Transição entre páginas (View Transitions) */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.topo {
  view-transition-name: topo;
}

::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 1, 1) both pagina-sai;
}

::view-transition-new(root) {
  animation: 720ms var(--saida) both pagina-entra;
}

::view-transition-group(topo) {
  animation-duration: 420ms;
  animation-timing-function: var(--saida);
}

@keyframes pagina-sai {
  to {
    opacity: 0;
    transform: translateY(-28px) scale(0.985);
    filter: blur(4px);
  }
}

@keyframes pagina-entra {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

/* ---------------------------------------------------------------- Scroll com inércia: o JS faz o deslize */

html.mov.inercia {
  scroll-behavior: auto;
}

/* O que entra de lado (ou a foto ampliada) não pode alargar a página no telemóvel enquanto está fora do sítio. «clip» não
 * cria uma caixa de scroll, por isso o sub-menu continua colado ao topo. */
.mov main {
  overflow-x: clip;
}

/* ---------------------------------------------------------------- Entradas ao fazer scroll */

.mov [data-rev] {
  transition:
    opacity 900ms var(--saida),
    translate 1100ms var(--saida),
    scale 1100ms var(--saida),
    filter 900ms var(--saida);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms));
}

.mov [data-rev='subir'],
.mov [data-rev='esq'],
.mov [data-rev='dir'],
.mov [data-rev='escala'],
.mov [data-rev='apagar'],
.mov [data-rev='borda'] {
  opacity: 0;
}

.mov [data-rev='subir'] {
  translate: 0 56px;
}

.mov [data-rev='esq'] {
  translate: -72px 0;
}

.mov [data-rev='dir'] {
  translate: 72px 0;
}

.mov [data-rev='escala'] {
  translate: 0 40px;
  scale: 0.9;
}

.mov [data-rev='apagar'] {
  filter: blur(8px);
}

.mov [data-rev='borda'] {
  translate: 18% 0;
  transition-duration: 700ms, 1400ms, 1400ms, 700ms;
}

.mov .dividido-mar-inverso [data-rev='borda'] {
  translate: -18% 0;
}

.mov [data-rev].visivel {
  opacity: 1;
  translate: none;
  scale: none;
  filter: none;
}

.mov .sem-transicao,
.mov .sem-transicao * {
  transition: none !important;
}

/* Títulos: palavra a palavra, cada uma sobe de dentro de uma máscara. */
.mov .pal {
  display: inline-block;
  overflow: clip;
  padding: 0.12em 0.04em 0.1em;
  margin: -0.12em -0.04em -0.1em;
  vertical-align: top;
}

.mov .pal > span {
  display: inline-block;
  translate: 0 108%;
  rotate: 5deg;
  transform-origin: 0 100%;
  transition:
    translate 1050ms var(--saida),
    rotate 1050ms var(--saida);
  transition-delay: calc(var(--i, 0) * 65ms + var(--d, 0ms));
}

.mov .visivel .pal > span {
  translate: none;
  rotate: none;
}

/* O título do herói da Home: letra a letra, com um pouco de mola. */
.mov .pal .letra {
  translate: 0 115%;
  rotate: 0deg;
  scale: 1 1.25;
  transition:
    translate 1000ms var(--saida),
    scale 1200ms var(--saida);
  transition-delay: calc(var(--i, 0) * 38ms + 150ms);
}

.mov .visivel .pal .letra {
  scale: none;
}

/* Quando acabam de entrar, a máscara sai, para não cortar a sombra do título nem os acentos. */
.mov .texto-fim .pal {
  overflow: visible;
}

/* A sombra do título do herói só chega depois (dentro da máscara ficava cortada aos quadrados). */
.mov .heroi h1 {
  transition: text-shadow 900ms ease;
}

.mov .heroi h1:not(.texto-fim) {
  text-shadow: none;
}

/* O realce laranja desenha-se da esquerda para a direita, depois de as palavras entrarem. */
.mov .realce {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1300ms var(--saida) 650ms;
}

.mov .realce.visivel,
.mov .visivel .realce {
  background-size: 100% 100%;
}

/* ---------------------------------------------------------------- Fotografias: parallax e cortina */
/* O JS dá --py (quanto a foto desliza). A foto fica ampliada --s vezes e o clip-path recorta-a de volta ao tamanho da
 * moldura, por isso pode deslizar sem nunca mostrar a borda nem passar por cima do que está ao lado. */

.mov .foto[data-par] {
  --py: 0px;
  --b: calc(50% * (1 - 1 / var(--s)));
  scale: var(--s);
  translate: 0 var(--py);
  clip-path: inset(
    calc(var(--b) - var(--py) / var(--s) + (1 - var(--rev)) * (100% - 2 * var(--b))) var(--b)
      calc(var(--b) + var(--py) / var(--s))
  );
  transition:
    --rev 1500ms var(--saida),
    --s 1100ms var(--saida);
  will-change: translate, clip-path;
}

/* A foto ampliada não pode alargar a página (dava scroll para o lado): corta-se na horizontal à volta dela. */
.mov :has(> .foto[data-par]) {
  overflow-x: clip;
}

.mov .foto[data-rev='foto'] {
  --rev: 0;
  opacity: 1;
}

.mov .foto[data-rev='foto'].visivel {
  --rev: 1;
}

/* As fotos que já estão à vista quando a página abre aproximam-se devagar (como num início de vídeo). */
.mov .foto.foto-entra {
  animation: foto-entra 2600ms var(--saida) backwards;
}

@keyframes foto-entra {
  from {
    --s: 1.55;
    filter: brightness(0.6) saturate(0.7);
  }
}

/* Ao passar o rato, a foto aproxima-se. */
.mov .zigue-item:hover .foto[data-par],
.mov .moldura:hover .foto[data-par],
.mov .foto-larga:hover .foto[data-par],
.mov .causa:hover .foto[data-par] {
  --s: 1.3;
}

/* A camada escura dos heróis abre aos poucos. */
.mov .heroi::before,
.mov .heroi-centro::before {
  animation: veu 1800ms var(--saida) backwards;
}

@keyframes veu {
  from {
    opacity: 0.2;
  }
}

/* ---------------------------------------------------------------- Os telemóveis de exemplo, «vivos» */

.mov .telemovel .ecra > * {
  opacity: 0;
  translate: 0 22px;
  scale: 0.96;
  transition:
    opacity 300ms ease,
    translate 300ms ease,
    scale 300ms ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.mov .telemovel.vivo .ecra > * {
  opacity: 1;
  translate: none;
  scale: none;
  transition:
    opacity 600ms var(--saida),
    translate 800ms var(--mola),
    scale 800ms var(--mola);
  transition-delay: calc(var(--i, 0) * 140ms + 200ms);
}

.mov .telemovel .ecra > .ecra-topo {
  translate: 0 -100%;
}

.mov .telemovel .ecra-chip {
  opacity: 0;
  scale: 0.5;
  transition:
    opacity 200ms ease,
    scale 200ms ease;
}

.mov .telemovel.vivo .ecra-chip {
  opacity: 1;
  scale: none;
  transition:
    opacity 300ms ease,
    scale 600ms var(--mola);
  transition-delay: calc(var(--i, 0) * 140ms + 750ms);
}

.mov .telemovel .ecra-chip.trocou {
  animation: chip-troca 650ms var(--mola);
}

@keyframes chip-troca {
  0% {
    scale: 0.6;
    opacity: 0.2;
  }
}

.mov .telemovel .ecra-grelha i {
  scale: 0;
  transition: scale 200ms ease;
}

.mov .telemovel.vivo .ecra-grelha i {
  scale: none;
  transition: scale 500ms var(--mola);
  transition-delay: calc(var(--j, 0) * 45ms + 650ms);
}

.mov .telemovel .ecra-pessoa i {
  scale: 0;
  transition: scale 200ms ease;
}

.mov .telemovel.vivo .ecra-pessoa i {
  scale: none;
  transition: scale 600ms var(--mola);
  transition-delay: calc(var(--i, 0) * 140ms + 450ms);
}

/* O botão do ecrã é «carregado» no fim da sequência. */
.mov .telemovel.vivo .ecra-botao {
  animation: ecra-carregar 900ms ease 2400ms;
}

@keyframes ecra-carregar {
  35% {
    scale: 0.93;
    filter: brightness(0.85);
    box-shadow: 0 0 0 0 rgb(204 61 24 / 0.5);
  }
  100% {
    box-shadow: 0 0 0 14px rgb(204 61 24 / 0);
  }
}

/* O telemóvel do «Porquê usar» flutua e inclina-se para o rato. */
.mov .porque-centro .telemovel {
  animation: flutuar 6s ease-in-out infinite;
  transition: transform 700ms var(--saida);
}

.mov .telemovel.inclinado,
.mov .papel-imagem.inclinado {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

@keyframes flutuar {
  50% {
    translate: 0 -14px;
  }
}

/* Os cartões dos 4 papéis: inclinam-se e a pilha abre ao passar o rato. */
.mov .papel-imagem {
  transition: transform 600ms var(--saida);
}

.mov .papel-pilha .ecra-cartao {
  transition:
    translate 600ms var(--mola),
    rotate 600ms var(--mola),
    box-shadow 400ms ease;
}

.mov .papel:hover .papel-pilha .ecra-cartao:first-child {
  translate: -10px -10px;
  rotate: -3deg;
  box-shadow: 0 18px 30px -16px rgb(14 36 51 / 0.45);
}

.mov .papel:hover .papel-pilha .ecra-cartao:last-child {
  translate: 12px 8px;
  rotate: 2.5deg;
  box-shadow: 0 18px 30px -16px rgb(14 36 51 / 0.45);
}

/* O cartão do mar: o aviso pisca como uma luz. */
.mov .mar-aviso i {
  animation: luz 2.2s ease-in-out infinite;
}

@keyframes luz {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(245 197 24 / 0.6);
  }
  50% {
    box-shadow: 0 0 0 7px rgb(245 197 24 / 0);
    scale: 1.25;
  }
}

/* «Em breve»: um brilho que passa. */
.mov .etiqueta.em-breve,
.mov .loja {
  position: relative;
  overflow: hidden;
}

.mov .etiqueta.em-breve::after,
.mov .loja::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%);
  translate: -120% 0;
  animation: brilho 3.6s ease-in-out infinite 1.2s;
  pointer-events: none;
}

@keyframes brilho {
  45%,
  100% {
    translate: 120% 0;
  }
}

.mov .loja {
  transition:
    translate 400ms var(--mola),
    box-shadow 400ms var(--saida);
}

.mov .loja:hover {
  translate: 0 -4px;
  box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.6);
}

/* ---------------------------------------------------------------- Cabeçalho, barra de leitura, sub-menu */

.mov .topo {
  transition:
    translate 450ms var(--saida),
    box-shadow 300ms ease;
}

.mov .topo.rolado {
  box-shadow: 0 10px 30px -22px rgb(14 36 51 / 0.55);
}

.mov.topo-escondido .topo {
  translate: 0 -100%;
}

.mov .subnav {
  transition: top 450ms var(--saida);
}

.mov.topo-escondido .subnav {
  top: 0;
}

.mov .subnav a {
  position: relative;
  transition: color 250ms ease;
}

.mov .subnav a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--laranja);
  scale: 0 1;
  transform-origin: left;
  transition: scale 450ms var(--saida);
}

.mov .subnav a.ativa,
.mov .subnav a:hover {
  color: var(--laranja-texto);
}

.mov .subnav a.ativa::after,
.mov .subnav a:hover::after {
  scale: 1 1;
}

.progresso {
  display: none;
}

.mov .progresso {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  background: linear-gradient(90deg, var(--laranja-forte), var(--laranja));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Ligações do menu: um traço que cresce por baixo. */
.mov .nav-lado a:not(.btn) {
  position: relative;
  transition: color 200ms ease;
}

.mov .nav-lado a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--laranja);
  scale: 0 1;
  transform-origin: right;
  transition: scale 450ms var(--saida);
}

.mov .nav-lado a:not(.btn):hover::after {
  scale: 1 1;
  transform-origin: left;
}

.mov .nav-lado a[aria-current='page'] {
  box-shadow: none;
}

.mov .nav-lado a[aria-current='page']::after {
  scale: 1 1;
}

.mov .marca img {
  transition: rotate 700ms var(--mola);
}

.mov .marca:hover img {
  rotate: -14deg;
}

/* «Painéis»: o menu cai com mola e as opções entram em fila. */
.mov .painel summary::after {
  display: inline-block;
  margin-left: 4px;
  transition: rotate 350ms var(--saida);
}

.mov .painel[open] summary::after {
  rotate: 180deg;
}

.mov .painel[open] .painel-menu {
  animation: cair 450ms var(--saida);
  transform-origin: top right;
}

.mov .painel[open] .painel-menu a {
  animation: surgir 500ms var(--saida) backwards;
}

.mov .painel[open] .painel-menu a:nth-child(2) {
  animation-delay: 70ms;
}

.mov .painel-menu a {
  transition: background-color 200ms ease;
}

.mov .painel-menu .ico {
  transition:
    scale 400ms var(--mola),
    background-color 300ms ease;
}

.mov .painel-menu a:hover .ico {
  scale: 1.1;
  background: var(--laranja-suave);
}

@keyframes cair {
  from {
    opacity: 0;
    translate: 0 -10px;
    scale: 0.96;
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

/* Menu do telemóvel: abre de cima e as ligações entram em cascata; o ícone passa a X. */
@media (max-width: 1020px) {
  .mov .menu-aberto .nav-movel {
    animation: menu-abre 500ms var(--saida);
  }
  .mov .menu-aberto .nav-movel > * {
    animation: surgir 550ms var(--saida) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 60ms);
  }
}

@keyframes menu-abre {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.menu-botao svg path {
  transform-box: view-box;
  transform-origin: 12px 12px;
}

.mov .menu-botao svg path {
  transition:
    transform 450ms var(--saida),
    opacity 250ms ease;
}

.mov .menu-aberto .menu-botao .l1 {
  transform: rotate(45deg) translateY(6px);
}

.mov .menu-aberto .menu-botao .l2 {
  opacity: 0;
  transform: scaleX(0.2);
}

.mov .menu-aberto .menu-botao .l3 {
  transform: rotate(-45deg) translateY(-6px);
}

/* ---------------------------------------------------------------- Botões */
/* A cor varre o botão da esquerda para a direita; perto do rato, os grandes deixam-se puxar (íman); ao carregar, uma onda. */

.mov .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(90deg, transparent 50%, var(--btn-fundo) 50%) 100% 0 / 202% 100% no-repeat;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    background-position 550ms var(--saida),
    color 300ms var(--saida),
    border-color 300ms var(--saida),
    transform 450ms var(--saida),
    scale 200ms var(--saida);
}

.mov .btn:hover {
  background-position: 0 0;
}

.mov .btn-contorno {
  background-position: 0 0;
}

.mov .btn-contorno:hover {
  background-position: 100% 0;
}

.mov .btn:active {
  scale: 0.95;
}

.mov .btn svg {
  transition: translate 400ms var(--mola);
}

.mov .btn:hover svg {
  translate: 0 -2px;
}

.mov .btn .onda {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  scale: 0;
  pointer-events: none;
  animation: onda 700ms var(--saida) forwards;
}

@keyframes onda {
  to {
    scale: 1;
    opacity: 0;
  }
}

/* «A enviar…»: um pequeno círculo a girar. */
.mov .btn[disabled]::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to {
    rotate: 360deg;
  }
}

.mov .mais::after {
  transition: translate 450ms var(--mola);
}

.mov .mais:hover::after {
  transform: none;
  translate: 6px 0;
}

.mov .carrossel-setas button {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    transform 450ms var(--saida),
    scale 200ms var(--saida),
    background-color 200ms ease,
    color 200ms ease;
}

.mov .carrossel-setas button:active:not(:disabled) {
  scale: 0.9;
}

.mov .carrossel.a-arrastar {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .mov .carrossel {
    cursor: grab;
  }
}

/* ---------------------------------------------------------------- Cartões ao passar o rato */

.mov .plano,
.mov .causa,
.mov .perfil-cartao,
.mov .regras li {
  transition:
    translate 500ms var(--mola),
    box-shadow 500ms var(--saida);
}

.mov .plano:hover,
.mov .causa:hover,
.mov .perfil-cartao:hover {
  translate: 0 -6px;
  box-shadow: 0 26px 50px -30px rgb(14 36 51 / 0.45);
}

.mov .porque-item .ico {
  transition:
    rotate 600ms var(--mola),
    scale 600ms var(--mola);
}

.mov .porque-item:hover .ico {
  rotate: -10deg;
  scale: 1.12;
}

.mov .regras li:hover {
  translate: 6px 0;
}

.mov .passo h3::before {
  display: inline-block;
  transition:
    scale 600ms var(--mola),
    rotate 600ms var(--mola);
}

.mov .passo:hover h3::before {
  scale: 1.2;
  rotate: -8deg;
}

.mov .passo-visual .telemovel {
  transition: translate 700ms var(--mola);
}

.mov .passo:hover .passo-visual .telemovel {
  translate: 0 -12px;
}

.mov .lista-check li::before {
  transition: scale 500ms var(--mola);
}

.mov .lista-check li:hover::before {
  scale: 1.25;
}

/* ---------------------------------------------------------------- Perguntas: abrem e fecham a deslizar */

.mov main details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size 500ms var(--saida),
    content-visibility 500ms allow-discrete;
}

.mov main details[open]::details-content {
  block-size: auto;
}

.mov main details[open] > :not(summary) {
  animation: surgir 550ms var(--saida) backwards 60ms;
}

.mov .faq summary {
  transition:
    color 200ms ease,
    padding-left 350ms var(--saida);
}

.mov .faq summary:hover {
  color: var(--laranja-texto);
  padding-left: 8px;
}

.mov .faq summary::after {
  transition:
    transform 450ms var(--mola),
    color 200ms ease;
}

/* ---------------------------------------------------------------- Formulários */

.mov .campo input,
.mov .campo textarea,
.mov .campo select {
  transition:
    border-color 250ms ease,
    box-shadow 350ms var(--saida),
    translate 350ms var(--saida);
}

.mov .campo input:focus,
.mov .campo textarea:focus,
.mov .campo select:focus {
  box-shadow: 0 10px 24px -18px rgb(14 36 51 / 0.6);
  translate: 0 -2px;
}

.mov .form-sucesso {
  animation: sucesso 800ms var(--mola);
}

.mov .form-sucesso h3::before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--branco);
  font-size: 0.8em;
  vertical-align: 0.1em;
  animation: sucesso 700ms var(--mola) 250ms backwards;
}

@keyframes sucesso {
  from {
    opacity: 0;
    scale: 0.85;
  }
}

.mov .form-estado[data-tom='erro'] {
  animation: abanar 450ms ease;
}

@keyframes abanar {
  20%,
  60% {
    translate: -6px 0;
  }
  40%,
  80% {
    translate: 6px 0;
  }
}

/* ---------------------------------------------------------------- Rodapé e faixa a correr (o JS acelera-a com o scroll) */

.mov .rodape li a {
  transition:
    color 200ms ease,
    padding-left 300ms var(--saida);
}

.mov .rodape li a:hover {
  padding-left: 6px;
}

.mov .faixa-corre span {
  transition: color 300ms ease;
}

.mov .faixa-corre:hover span {
  color: var(--tinta);
}