/* =============================================================
   MARÉ · case conceitual de campanha de festival
   Escrito para este case. Prefixo mr- em todas as classes.
   Os estados iniciais das animações só valem quando o mare.js
   adiciona a classe mr-a-* no <html>; se o script falhar, tudo
   aparece pronto.
   ============================================================= */

/* Só a Bold: a Belfast é de exibição e fica nos títulos */
@font-face {
  font-family: "Belfast Grotesk";
  src: url("../../fonts/BelfastGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Paleta: petróleo e verde-água, com espuma no texto. Contrastes conferidos (AA). */
  --fundo: #071c22;
  --petroleo: #0b2a33;
  --superficie: #103842;
  --superficie-2: #16505c;
  --linha: rgba(232, 247, 244, 0.14);
  --linha-forte: rgba(232, 247, 244, 0.34);
  --texto: #e8f7f4;
  --texto-2: #a9cbc8;
  --texto-3: #7fa6a6;
  --agua: #3ef2c8;

  --f-titulo: "Belfast Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* A Belfast é de exibição: no corpo de texto o "C" fecha e lembra "O".
     Ela fica nos títulos e o texto corrido usa Poppins. */
  --f-corpo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
}

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

.mr-pular {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--agua);
  color: #071c22;
  font-weight: 600;
  transform: translateY(-160%);
}
.mr-pular:focus {
  transform: none;
}

.mr-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mr-wrap {
  width: min(100%, calc(var(--max) + 2 * var(--gutter)));
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.mr-secao {
  padding-block: clamp(72px, 12vw, 160px);
}
/* o código nunca "pula" por causa do topo fixo ao seguir um link da régua */
section[id] {
  scroll-margin-top: 56px;
}

/* ondas de SVG: o corpo e a crista com o brilho da identidade; a camada anda metade da
   largura e o laço fica sem emenda */
.mr-onda__corpo {
  fill: var(--onda, rgba(62, 242, 200, 0.2));
}
.mr-onda__crista {
  fill: none;
  stroke: var(--agua);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
@keyframes mr-deriva {
  to {
    transform: translateX(-50%);
  }
}
@keyframes mr-deriva-r {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}


.mr-h2 {
  max-width: 20ch;
  font: 700 clamp(30px, 4.6vw, 64px) / 1.05 var(--f-titulo);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mr-nota {
  margin-top: 28px;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto-3);
}

/* ---------- estados iniciais das revelações (só com o script montado) ---------- */
.mr-a-rev [data-revela] {
  opacity: 0;
  transform: translateY(26px);
}
/* os títulos "sobem" como a maré: o recorte cresce de baixo para cima */
.mr-a-sobe [data-sobe] {
  clip-path: inset(100% 0 0 0);
}
.mr-a-hero [data-entrada] {
  opacity: 0;
  transform: translateY(24px);
}
.mr-a-hero .mr-titulo {
  clip-path: inset(100% 0 0 0);
}
.mr-a-man .mr-w {
  opacity: 0.18;
  filter: blur(8px);
}

/* =============================================================
   TOPO E PROGRESSO
   ============================================================= */
.mr-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(7, 28, 34, 0.9), rgba(7, 28, 34, 0));
  pointer-events: none;
  transition: background 0.3s ease;
}
.mr-topo > * {
  pointer-events: auto;
}
/* depois de rolar, o topo ganha fundo para o texto não passar por baixo do link */
.mr-topo.is-rolado {
  background: rgba(7, 28, 34, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha);
}
.mr-topo__voltar {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  font: 500 14px / 1 var(--f-corpo);
  letter-spacing: 0.03em;
  text-decoration: none;
}
.mr-topo__voltar:hover {
  color: var(--agua);
}
.mr-topo__selo {
  padding: 7px 14px;
  border: 1px solid var(--agua);
  border-radius: 99px;
  background: rgba(7, 28, 34, 0.7);
  font: 600 11px / 1 var(--f-corpo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agua);
  backdrop-filter: blur(8px);
}

.mr-progresso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
}
.mr-progresso i {
  display: block;
  height: 100%;
  background: var(--agua);
  transform-origin: left;
  transform: scaleX(var(--prog, 0));
}

/* =============================================================
   ABERTURA
   ============================================================= */
.mr-abertura {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: 100px 0 36px;
  overflow: clip;
  background: linear-gradient(180deg, #071c22 0%, #0b2a33 55%, #0f4250 100%);
}
.mr-ondas {
  position: absolute;
  inset: 0;
}
.mr-ondas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mr-ondas__sol {
  position: absolute;
  left: 60%;
  bottom: 30%;
  width: clamp(180px, 38vmin, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #2f9c9a 0, #1d7a80 42%, #0f4c56 80%, #0b3a44 100%);
  box-shadow:
    inset -28px -36px 70px rgba(7, 28, 34, 0.5),
    0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
/* a água em 3D (WebGL) fica na frente das letras; as ondas 2D só aparecem se o WebGL falhar */
.mr-agua3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.mr-agua3d canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mr-ondas--gl canvas {
  display: none;
}
.mr-ondas--gl::after {
  display: none;
}
.mr-titulo {
  position: relative;
  z-index: 1;
}
.mr-abertura__base {
  position: relative;
  z-index: 3;
}
/* a maré que sobe e cobre a abertura: a mesma cor da seção seguinte */
.mr-cobre {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  --onda: #0b2a33;
}
.mr-a-cobre .mr-cobre {
  display: block;
  transform: translateY(calc(100% + 40px));
}
.mr-cobre svg {
  position: absolute;
  left: 0;
  top: -39px;
  width: 100%;
  height: 40px;
}
.mr-cobre i {
  position: absolute;
  inset: 0;
  background: #0b2a33;
}
/* sem canvas (script falhou): ondas de reserva em CSS */
.mr-ondas:not(.mr-ondas--canvas)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath d='M0 70C160 20 320 30 500 70S840 120 1000 60V200H0Z' fill='%23103842'/%3E%3Cpath d='M0 120C180 80 340 100 520 130S860 160 1000 110V200H0Z' fill='%230b2a33'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.mr-abertura__grade {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.mr-titulo {
  display: flex;
  margin: auto 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  /* as 4 letras ocupam ~3,8 vezes o corpo: o tamanho acompanha a largura útil */
  font-size: min(calc((100vw - 2 * var(--gutter)) / 3.85), 318px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--texto);
}
.mr-titulo span {
  display: inline-block;
  animation: mr-boiar 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
.mr-titulo span:last-child {
  color: var(--agua);
}
@keyframes mr-boiar {
  50% {
    transform: translateY(-4%);
  }
}

.mr-abertura__base {
  display: grid;
  gap: 24px;
  align-items: end;
}
@media (min-width: 900px) {
  .mr-abertura__base {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}
/* no celular o texto cai sobre as ondas: um painel de vidro garante a leitura */
@media (max-width: 899px) {
  .mr-abertura__base {
    padding: 18px;
    border: 1px solid rgba(232, 247, 244, 0.16);
    border-radius: 24px;
    background: rgba(7, 28, 34, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
.mr-abertura__lead {
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--texto);
}

.mr-vidro {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mr-vidro li {
  padding: 12px 18px;
  border: 1px solid rgba(232, 247, 244, 0.22);
  border-radius: 18px;
  background: rgba(232, 247, 244, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mr-vidro b {
  display: block;
  font: 600 14px / 1.3 var(--f-corpo);
}
.mr-vidro span {
  font-size: 12px;
  color: var(--texto-2);
}

.mr-pausa {
  z-index: 4;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 99px;
  background: rgba(7, 28, 34, 0.55);
  backdrop-filter: blur(8px);
  font: 500 13px / 1 var(--f-corpo);
  color: var(--texto);
  transition: border-color 0.25s ease;
}
.mr-pausa:hover {
  border-color: var(--agua);
}
.mr-pausa__icone {
  position: relative;
  width: 12px;
  height: 12px;
}
.mr-pausa__icone::before,
.mr-pausa__icone::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: var(--agua);
}
.mr-pausa__icone::before {
  left: 1px;
}
.mr-pausa__icone::after {
  right: 1px;
}
.mr-pausa[aria-pressed="true"] .mr-pausa__icone::before {
  left: 2px;
  width: 9px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.mr-pausa[aria-pressed="true"] .mr-pausa__icone::after {
  display: none;
}
.mr-pausa[hidden] {
  display: none;
}
/* o botão só faz sentido com o canvas rodando */
.mr-pausa {
  visibility: hidden;
}
.mr-js-ondas .mr-pausa {
  visibility: visible;
}
@media (max-width: 719px) {
  .mr-pausa {
    top: 52px;
  }
}

/* =============================================================
   DESAFIO E MANIFESTO
   ============================================================= */
.mr-desafio {
  background: var(--petroleo);
  padding-bottom: 0;
}
.mr-desafio__texto {
  max-width: 56ch;
  margin-top: 28px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--texto-2);
}
/* a cena do manifesto: a água sobe atrás das palavras conforme a rolagem */
.mr-cena-man {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  margin-top: clamp(24px, 5vw, 64px);
  overflow: clip;
}
.mr-man-agua {
  position: absolute;
  inset: 0;
  transform: translateY(46%);
  pointer-events: none;
  --onda: rgba(62, 242, 200, 0.13);
}
.mr-man-agua svg {
  position: absolute;
  left: 0;
  top: -39px;
  width: 200%;
  height: 40px;
  max-width: none;
  animation: mr-deriva 16s linear infinite;
}
.mr-man-agua .mr-onda__crista {
  stroke-opacity: 0.5;
  stroke-width: 2;
}
.mr-man-agua i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(62, 242, 200, 0.13), rgba(62, 242, 200, 0.3));
}
.mr-man__miolo {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  padding-block: clamp(56px, 8vw, 100px);
}
.mr-manifesto {
  max-width: 24ch;
  font: 700 clamp(28px, 4.6vw, 62px) / 1.18 var(--f-titulo);
  letter-spacing: -0.01em;
}
.mr-w {
  display: inline-block;
}
.mr-tres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  list-style: none;
}
.mr-tres li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(7, 28, 34, 0.72);
  font-size: 15px;
  color: var(--texto-2);
  transition:
    border-color 0.4s ease,
    color 0.4s ease;
}
.mr-tres b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  font: 600 13px / 1 var(--f-corpo);
  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}
.mr-tres li.is-on {
  border-color: rgba(62, 242, 200, 0.6);
  color: var(--texto);
}
.mr-tres li.is-on b {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
}
/* sem o script (ou sem movimento) os três passos já aparecem acesos */
.mr-tres li {
  border-color: rgba(62, 242, 200, 0.6);
  color: var(--texto);
}
.mr-tres li b {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
}
.mr-a-man .mr-tres li:not(.is-on) {
  border-color: var(--linha-forte);
  color: var(--texto-2);
}
.mr-a-man .mr-tres li:not(.is-on) b {
  border-color: var(--linha-forte);
  background: transparent;
  color: var(--texto-2);
}

/* =============================================================
   LINE-UP (faixa que corre)
   ============================================================= */
.mr-lineup {
  padding-block: clamp(72px, 11vw, 140px);
  overflow: clip;
  background: var(--fundo);
}
.mr-letreiros {
  display: grid;
  gap: clamp(8px, 1.5vw, 20px);
  margin-block: clamp(36px, 6vw, 72px);
}
.mr-letreiro {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0.6em;
  padding-inline: var(--gutter);
  font: 700 clamp(44px, 8.4vw, 124px) / 1.06 var(--f-titulo);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.mr-letreiro li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
}
.mr-letreiro li::after {
  content: "";
  flex: none;
  width: 0.26em;
  height: 0.26em;
  border-radius: 50%;
  background: var(--agua);
}
.mr-letreiro--vazado li {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--texto);
}
/* versão animada: uma linha só, movida por transform pelo script */
.mr-letreiro--anim {
  flex-wrap: nowrap;
  width: max-content;
  padding-inline: 0;
  will-change: transform;
}

/* =============================================================
   LINE-UP · carrossel 3D, filtro por dia e programação em texto
   ============================================================= */
.mr-filtro {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 36px);
}
.is-anel .mr-filtro {
  display: flex;
}
.mr-filtro__b {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  font: 500 14px / 1 var(--f-corpo);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.mr-filtro__b:hover {
  border-color: var(--agua);
}
.mr-filtro__b[aria-pressed="true"] {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
  font-weight: 600;
}
.mr-anel {
  display: none;
  position: relative;
  height: clamp(240px, 30vw, 360px);
  margin-top: clamp(8px, 2vw, 24px);
  perspective: 1500px;
  overflow: clip;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.is-anel .mr-anel {
  display: block;
}
.mr-anel.is-arrastando {
  cursor: grabbing;
}
.mr-anel__palco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.mr-anel__carta {
  position: absolute;
  left: calc(var(--w) / -2);
  top: -42px;
  width: var(--w);
  height: 84px;
  display: grid;
  place-items: center;
  padding-inline: 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 20px;
  background: rgba(16, 56, 66, 0.9);
  font: 700 clamp(15px, 1.75vw, 25px) / 1.1 var(--f-titulo);
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texto);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.mr-anel__carta.is-frente {
  border: 2px solid var(--agua);
  background: rgba(62, 242, 200, 0.18);
}
.mr-anel__ctl {
  display: none;
}
.is-anel .mr-anel__ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.mr-anel__seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.mr-anel__seta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mr-anel__seta:hover {
  border-color: var(--agua);
  background: rgba(62, 242, 200, 0.12);
}
.mr-ficha {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 20px;
  border: 1px solid rgba(62, 242, 200, 0.45);
  border-radius: 20px;
  background: var(--superficie);
}
.mr-ficha__nome {
  font: 600 20px / 1.2 var(--f-corpo);
}
.mr-ficha__meta {
  flex: 1 1 14ch;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-2);
}
.mr-ficha__abrir {
  display: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--agua);
  border-radius: 99px;
  font: 600 14px / 1 var(--f-corpo);
  color: var(--agua);
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.mr-ficha__abrir:hover {
  background: var(--agua);
  color: #071c22;
}
.mr-js .mr-ficha__abrir {
  display: inline-flex;
  align-items: center;
}
.mr-programa {
  display: grid;
  gap: 28px;
  margin-top: clamp(36px, 5vw, 64px);
}
@media (min-width: 800px) {
  .mr-programa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
  }
}
.mr-programa section {
  transition: opacity 0.4s ease;
}
.mr-programa.is-filtrada section.is-fora {
  opacity: 0.4;
}
.mr-programa h3 {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linha);
  font: 700 clamp(18px, 1.8vw, 22px) / 1.2 var(--f-titulo);
}
.mr-programa li {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}
.mr-programa li b {
  font: 600 16px / 1.3 var(--f-corpo);
}
.mr-programa li span {
  font-size: 13.5px;
  color: var(--texto-2);
}
.mr-programa li.is-frente b {
  color: var(--agua);
}

/* =============================================================
   DIAS · o tanque que enche e o quadro de palcos
   ============================================================= */
.mr-dias {
  background: var(--petroleo);
}
.mr-dias__cena {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(36px, 5vw, 64px);
}
@media (min-width: 900px) {
  .mr-dias__cena {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}
.mr-tanque {
  --tq-h: clamp(200px, 34vw, 440px);
  display: none;
  grid-template-columns: minmax(0, 250px) auto;
  align-items: end;
  gap: 16px;
}
@media (max-width: 599px) {
  .mr-tanque {
    grid-template-columns: minmax(0, 1fr);
  }
  .mr-tanque__escala {
    display: none;
  }
}
.is-abas .mr-tanque {
  display: grid;
}
.mr-tanque__vidro {
  position: relative;
  height: var(--tq-h);
  overflow: hidden;
  border: 3px solid rgba(232, 247, 244, 0.55);
  border-radius: 34px 34px 44px 44px;
  background: rgba(7, 28, 34, 0.55);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7);
}
.mr-tanque__agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nivel, 0.3) * 100%);
  transition: height 1.4s var(--ease-saida);
  --onda: #3ef2c8;
}
.mr-tanque__agua svg {
  position: absolute;
  left: 0;
  top: -14px;
  width: 200%;
  height: 30px;
  max-width: none;
  animation: mr-deriva 6s linear infinite;
}
.mr-tanque__agua .mr-onda__crista {
  stroke: #e8f7f4;
  stroke-opacity: 0.6;
}
.mr-tanque__agua i {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  bottom: 0;
  background: linear-gradient(180deg, rgba(62, 242, 200, 0.88), rgba(22, 165, 140, 0.92));
}
.mr-tanque__brilho {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 16px;
  height: 36%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}
.mr-tanque__escala {
  position: relative;
  width: 124px;
  height: var(--tq-h);
  list-style: none;
}
.mr-tanque__escala li {
  position: absolute;
  left: 0;
  bottom: calc(var(--n) * 100%);
  transform: translateY(50%);
  font-size: 13px;
  white-space: nowrap;
  color: var(--texto-2);
  transition: color 0.4s ease;
}
.mr-tanque__escala li::before {
  content: "— ";
}
.mr-tanque__escala li.is-on {
  font-weight: 600;
  color: var(--agua);
}
@media (min-width: 900px) {
  .is-abas .mr-tanque {
    position: sticky;
    top: 112px;
  }
}
.mr-abas {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}
.is-abas .mr-abas {
  display: flex;
}
.mr-aba {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  font: 500 14px / 1 var(--f-corpo);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.mr-aba:hover {
  border-color: var(--agua);
}
.mr-aba[aria-selected="true"] {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
  font-weight: 600;
}
.mr-deck {
  display: grid;
  gap: 20px;
}
.mr-dia {
  padding: clamp(22px, 3vw, 40px);
  border-radius: 28px;
  background: linear-gradient(160deg, var(--superficie), #0d323c);
}
.is-abas .mr-deck {
  margin-top: clamp(20px, 3vw, 32px);
}
.is-abas .mr-dia {
  padding: 0;
  border-radius: 0;
  background: none;
}
.is-abas .mr-dia[hidden] {
  display: none;
}
.mr-dia__cab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 3vw, 32px);
  align-items: center;
}
.mr-dia__num {
  font: 700 clamp(56px, 9vw, 120px) / 0.85 var(--f-titulo);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--agua);
}
.mr-dia__dia {
  font: 600 12px / 1.4 var(--f-corpo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--agua);
}
.mr-dia h3 {
  margin-top: 6px;
  font: 700 clamp(30px, 4.4vw, 60px) / 1 var(--f-titulo);
}
.mr-dia__texto {
  max-width: 52ch;
  margin-top: clamp(16px, 2.4vw, 28px);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--texto);
}
.mr-gantt {
  display: grid;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 36px);
}
.mr-gantt__linha {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.mr-gantt dt {
  font: 500 14px / 1.2 var(--f-corpo);
}
.mr-gantt dd {
  position: relative;
  height: 36px;
  background: repeating-linear-gradient(90deg, var(--linha) 0 1px, transparent 1px 16.6667%);
}
.mr-gantt__barra {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(var(--ini) / 12 * 100%);
  width: calc(var(--dur) / 12 * 100%);
  display: flex;
  align-items: center;
  padding-inline: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--agua);
  font: 600 12.5px / 1 var(--f-corpo);
  white-space: nowrap;
  color: #071c22;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
}
.mr-gantt__barra--cais {
  background: #8cc8ff;
}
.mr-gantt__barra--maresia {
  background: #b9a6ff;
}
.mr-gantt__eixo {
  display: flex;
  justify-content: space-between;
  margin-left: calc(6.6rem + 12px);
  font-size: 12px;
  color: var(--texto-3);
}
.is-abas .mr-dia:not([hidden]) .mr-gantt__barra {
  animation: mr-barra 0.9s var(--ease-saida) both;
}
@keyframes mr-barra {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@media (max-width: 599px) {
  .mr-gantt__linha {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 8px;
  }
  .mr-gantt dt {
    font-size: 12.5px;
  }
  .mr-gantt__eixo {
    margin-left: calc(4.6rem + 8px);
    font-size: 11px;
  }
  .mr-gantt__barra {
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* =============================================================
   SISTEMA VISUAL (peças com paralaxe)
   ============================================================= */
.mr-sistema {
  background: var(--fundo);
  padding-bottom: clamp(56px, 8vw, 100px);
}
.mr-sistema__texto {
  max-width: 54ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--texto-2);
}
.mr-palco {
  position: relative;
  height: clamp(560px, 86vh, 780px);
  margin-top: clamp(24px, 4vw, 56px);
  overflow: clip;
  background: linear-gradient(180deg, transparent 0%, rgba(22, 80, 92, 0.4) 50%, transparent 100%);
}
.mr-disco {
  position: absolute;
  border-radius: 50%;
}
.mr-disco--a {
  left: 56%;
  top: 4%;
  width: clamp(160px, 26vw, 340px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 35%, #8cf7de, var(--agua) 55%, #14a98a);
  opacity: 0.9;
}
.mr-disco--b {
  left: 6%;
  bottom: 6%;
  width: clamp(90px, 14vw, 190px);
  aspect-ratio: 1;
  border: 2px solid var(--agua);
}
.mr-peca {
  position: absolute;
}
.mr-peca--cartaz {
  left: 50%;
  top: 8%;
  width: clamp(190px, 25vw, 320px);
  margin-left: calc(clamp(190px, 25vw, 320px) / -2);
  z-index: 2;
}
.mr-peca--ingresso {
  left: max(2%, 12px);
  top: 20%;
  width: clamp(250px, 36vw, 440px);
  z-index: 3;
}
.mr-peca--story {
  right: max(3%, 12px);
  top: 16%;
  width: clamp(120px, 14vw, 190px);
  z-index: 3;
}
.mr-cartaz {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4;
  padding: 18px 18px 0;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  background: linear-gradient(180deg, #0b2a33 0%, #103842 60%, #16505c 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.mr-cartaz__topo {
  font: 600 11px / 1 var(--f-corpo);
  letter-spacing: 0.2em;
  color: var(--agua);
}
.mr-cartaz__nome {
  font: 700 clamp(34px, 5.5vw, 73px) / 0.9 var(--f-titulo);
  letter-spacing: -0.03em;
}
.mr-cartaz svg {
  width: calc(100% + 36px);
  margin-inline: -18px;
  height: 90px;
}
.mr-ingresso {
  display: flex;
  height: clamp(110px, 15vw, 170px);
  border-radius: 18px;
  background: linear-gradient(120deg, #3ef2c8, #8cf7de);
  color: #071c22;
  transform: rotate(-7deg);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  -webkit-mask:
    radial-gradient(circle 11px at 72% 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at 72% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 11px at 72% 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at 72% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.mr-ingresso__corpo {
  flex: 1 1 72%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(14px, 2vw, 26px);
}
.mr-ingresso__corpo b {
  font: 700 clamp(30px, 4.4vw, 58px) / 0.95 var(--f-titulo);
  letter-spacing: -0.02em;
}
.mr-ingresso__corpo span {
  font: 600 clamp(11px, 1.1vw, 14px) / 1.3 var(--f-corpo);
}
.mr-ingresso__corpo small {
  font-size: clamp(10px, 0.95vw, 12px);
  opacity: 0.8;
}
.mr-ingresso__canhoto {
  flex: 1 1 28%;
  display: grid;
  place-items: center;
  border-left: 2px dashed rgba(7, 28, 34, 0.5);
}
.mr-ingresso__canhoto i {
  width: 56%;
  height: 56%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 38' preserveAspectRatio='none'%3E%3Cpath fill='%23071c22' d='M0 0h3v38H0zM6 0h1v38H6zM10 0h3v38h-3zM16 0h1v38h-1zM20 0h2v38h-2zM25 0h1v38h-1zM29 0h3v38h-3zM35 0h1v38h-1zM39 0h2v38h-2zM44 0h1v38h-1zM48 0h3v38h-3zM54 0h2v38h-2zM59 0h1v38h-1zM63 0h3v38h-3zM69 0h1v38h-1zM73 0h2v38h-2zM78 0h1v38h-1zM82 0h3v38h-3zM88 0h1v38h-1zM92 0h2v38h-2zM97 0h3v38h-3zM103 0h1v38h-1zM107 0h2v38h-2zM112 0h1v38h-1zM116 0h3v38h-3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mr-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 9 / 16;
  padding: 16px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 22px;
  background: linear-gradient(180deg, #16505c, #0b2a33);
  text-align: center;
  transform: rotate(6deg);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}
.mr-story small {
  font: 500 11px / 1 var(--f-corpo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.mr-story b {
  font: 700 clamp(60px, 7vw, 96px) / 1 var(--f-titulo);
  color: var(--agua);
}
.mr-story span {
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.3;
}
.mr-story i {
  width: 70%;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--agua) 62%, rgba(232, 247, 244, 0.2) 62%);
}
@media (max-width: 719px) {
  .mr-palco {
    height: 640px;
  }
  .mr-peca--cartaz {
    top: 22%;
  }
  .mr-peca--ingresso {
    top: 2%;
    width: min(72vw, 300px);
  }
  .mr-peca--story {
    top: auto;
    bottom: 3%;
    width: 120px;
  }
  .mr-disco--a {
    left: 52%;
    top: 40%;
  }
}

.mr-paleta {
  display: grid;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 48px);
}
@media (min-width: 800px) {
  .mr-paleta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.mr-amostra,
.mr-tipo {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 130px;
  padding: 18px;
  border-radius: 18px;
}
.mr-amostra b,
.mr-tipo b {
  font: 700 22px / 1.1 var(--f-titulo);
}
.mr-amostra span,
.mr-tipo span {
  font-size: 13px;
}
button.mr-amostra {
  cursor: copy;
  transition: transform 0.3s var(--ease-saida);
}
button.mr-amostra:hover {
  transform: translateY(-4px);
}
.mr-copiado {
  min-height: 1.6em;
  margin-top: 14px;
  font-size: 14px;
  color: var(--agua);
}
/* a cena em 3D (Three.js) entra no lugar das peças de papel, que ficam de reserva */
.mr-palco canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mr-palco.mr-gl .mr-peca,
.mr-palco.mr-gl .mr-disco {
  visibility: hidden;
}
.mr-amostra--a {
  border: 1px solid var(--linha-forte);
  background: var(--petroleo);
}
.mr-amostra--b {
  background: var(--agua);
  color: #071c22;
}
.mr-amostra--c {
  background: var(--texto);
  color: #071c22;
}
.mr-tipo {
  border: 1px solid var(--linha-forte);
}
.mr-tipo b {
  font-size: 44px;
}
.mr-tipo span {
  color: var(--texto-2);
}

/* =============================================================
   PLANO E METAS · o calendário de oito semanas
   ============================================================= */
.mr-plano {
  background: var(--fundo);
}
.mr-fases {
  display: grid;
  gap: 28px;
  margin-top: clamp(32px, 5vw, 56px);
}
@media (min-width: 900px) {
  .mr-fases {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}
.mr-fases li {
  padding-top: 18px;
  border-top: 2px solid var(--linha);
  transition: border-color 0.4s ease;
}
.mr-fases li.is-fase {
  border-top-color: var(--agua);
}
.mr-fase__sem {
  font: 600 12px / 1.4 var(--f-corpo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--agua);
}
.mr-fases h3 {
  margin: 4px 0 8px;
  font: 700 clamp(22px, 2.4vw, 30px) / 1.1 var(--f-titulo);
}
.mr-fases li > p:last-child {
  max-width: 40ch;
  font-size: 15px;
  color: var(--texto-2);
}
.mr-cal {
  margin-top: clamp(40px, 6vw, 72px);
}
.mr-cal__faixas,
.mr-cal__semanas {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}
.mr-cal__faixas span {
  grid-column: span var(--n);
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(62, 242, 200, 0.12);
  font: 600 14px / 1.2 var(--f-corpo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-cal__semanas {
  margin-top: 8px;
}
.mr-sem {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  height: clamp(96px, 13vw, 150px);
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  text-align: left;
  transition:
    border-color 0.3s ease,
    transform 0.3s var(--ease-saida);
}
.mr-sem:disabled {
  cursor: default;
}
.mr-sem:not(:disabled):hover {
  border-color: var(--agua);
  transform: translateY(-4px);
}
.mr-sem__nivel {
  position: absolute;
  inset: 0;
}
.mr-sem__nivel i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--h) * 100%);
  background: rgba(62, 242, 200, 0.45);
  transform-origin: bottom;
}
.mr-sem b {
  position: relative;
  font: 600 12px / 1 var(--f-corpo);
  color: var(--texto);
}
.mr-sem[aria-pressed="true"] {
  border-color: var(--agua);
  box-shadow: 0 18px 30px -18px rgba(62, 242, 200, 0.55);
}
.mr-sem[aria-pressed="true"] .mr-sem__nivel i {
  background: linear-gradient(180deg, #3ef2c8, #16a58c);
}
.mr-a-cal .mr-sem__nivel i {
  transform: scaleY(0);
}
.mr-cal__ficha {
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(62, 242, 200, 0.4);
  border-radius: 18px;
  background: var(--superficie);
  font-size: 16px;
  line-height: 1.5;
}
.mr-cal__ficha:empty {
  display: none;
}
.mr-cal__ficha b {
  display: block;
  font: 600 17px / 1.3 var(--f-corpo);
}
.mr-cal__ficha span {
  color: var(--texto-2);
}
.mr-curva {
  margin-top: clamp(24px, 4vw, 40px);
}
.mr-curva svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.mr-curva__grade path {
  fill: none;
  stroke: var(--linha);
  stroke-width: 1;
}
.mr-curva__linha {
  fill: none;
  stroke: var(--agua);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}
.mr-curva__marca {
  display: none;
}
.is-cal .mr-curva__marca {
  display: block;
}
.mr-curva__marca path {
  fill: none;
  stroke: rgba(232, 247, 244, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}
.mr-curva__marca circle {
  fill: var(--agua);
  stroke: var(--fundo);
  stroke-width: 4;
}
.mr-curva figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--texto-3);
}
.mr-a-cur .mr-curva__linha {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.mr-a-cur .mr-curva__area {
  opacity: 0;
}
.mr-fato {
  max-width: 26ch;
  margin-top: clamp(40px, 6vw, 72px);
  font: 700 clamp(28px, 3.6vw, 52px) / 1.12 var(--f-titulo);
  letter-spacing: -0.01em;
  color: var(--texto-2);
  text-wrap: balance;
}
.mr-fato b {
  font-size: 1.22em;
  line-height: 1;
  color: var(--agua);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .mr-cal__faixas span {
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }
  .mr-sem {
    padding: 6px 4px;
    border-radius: 10px;
  }
  .mr-sem b {
    font-size: 11px;
  }
}

/* =============================================================
   APRENDIZADOS · cartões que inclinam com o cursor
   ============================================================= */
.mr-aprend {
  background: var(--petroleo);
}
.mr-aprend__lista {
  display: grid;
  gap: 20px;
  margin-top: clamp(36px, 5vw, 64px);
  perspective: 1400px;
}
@media (min-width: 900px) {
  .mr-aprend__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }
}
.mr-aprend__lista li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--linha-forte);
  border-radius: 24px;
  background: var(--superficie);
  box-shadow: 0 30px 40px -28px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--z, 0px));
  transition:
    transform 0.6s var(--ease-saida),
    border-color 0.3s ease,
    background 0.3s ease;
}
@media (min-width: 900px) {
  .mr-aprend__lista li:nth-child(1) {
    --ry: 8deg;
  }
  .mr-aprend__lista li:nth-child(3) {
    --ry: -8deg;
  }
}
.mr-aprend__lista li.is-ativo {
  border-color: var(--agua);
  background: var(--superficie-2);
  --z: 36px;
}
.mr-aprend__num {
  font: 700 clamp(40px, 5vw, 60px) / 1 var(--f-titulo);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--agua);
}
.mr-aprend__il {
  width: 100%;
  max-width: 232px;
  height: 56px;
  color: var(--agua);
}
.mr-aprend__lista h3 {
  font: 700 clamp(20px, 2vw, 26px) / 1.18 var(--f-titulo);
  letter-spacing: -0.005em;
}
.mr-aprend__lista p {
  font-size: 15px;
  color: var(--texto-2);
}
.mr-aprend__lista li.is-ativo p {
  color: var(--texto);
}

/* =============================================================
   CONVITE E RODAPÉ
   ============================================================= */
.mr-chamada {
  position: relative;
  padding-block: clamp(88px, 14vw, 180px);
  overflow: clip;
  text-align: center;
  background: var(--fundo);
}
/* a água do convite: um bloco com a crista em onda, que sobe com a rolagem */
.mr-chamada__lua {
  position: absolute;
  right: clamp(24px, 10vw, 160px);
  top: clamp(24px, 7vw, 80px);
  width: clamp(110px, 14vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #3fb9ac 0, #1d7a80 42%, #0f4c56 80%, #0b3a44 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
/* a água do convite: duas camadas de ondas e um corpo que sobem com a rolagem */
.mr-chamada__agua {
  position: absolute;
  inset: 0;
}
.mr-chamada__onda {
  position: absolute;
  left: 0;
  width: 200%;
  max-width: none;
  height: 60px;
}
.mr-chamada__onda--a {
  top: -58px;
  --onda: #0f3f4a;
  animation: mr-deriva 12s linear infinite;
}
.mr-chamada__onda--b {
  top: -44px;
  --onda: #144b57;
  animation: mr-deriva-r 8s linear infinite;
}
.mr-chamada__onda .mr-onda__crista {
  display: none;
}
.mr-chamada__onda--b .mr-onda__crista {
  display: block;
}
.mr-chamada__agua i {
  position: absolute;
  inset: 0;
  background: #144b57;
}
.mr-a-mare .mr-chamada__agua {
  transform: translateY(calc(100% + 70px));
}
@media (max-width: 719px) {
  .mr-chamada {
    padding-top: 190px;
  }
  .mr-chamada__onda {
    height: 36px;
  }
  .mr-chamada__onda--a {
    top: -34px;
  }
  .mr-chamada__onda--b {
    top: -26px;
  }
  .mr-pausa {
    right: var(--gutter);
  }
}
.mr-chamada__miolo {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 24px;
}
.mr-chamada .mr-h2 {
  max-width: 18ch;
}
.mr-chamada__lead {
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--texto-2);
}
.mr-chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.mr-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid var(--agua);
  border-radius: 99px;
  background: var(--agua);
  font: 600 16px / 1 var(--f-corpo);
  text-decoration: none;
  color: #071c22;
  transition:
    transform 0.3s var(--ease-saida),
    background 0.3s ease,
    color 0.3s ease;
}
.mr-botao:hover {
  transform: translateY(-3px);
}
.mr-botao--onda {
  position: relative;
}
.mr-botao--onda::before,
.mr-botao--onda::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(62, 242, 200, 0.7);
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
}
.mr-botao--onda:hover::before,
.mr-botao--onda:focus-visible::before {
  animation: mr-onda-botao 1.8s ease-out infinite;
}
.mr-botao--onda:hover::after,
.mr-botao--onda:focus-visible::after {
  animation: mr-onda-botao 1.8s ease-out 0.9s infinite;
}
@keyframes mr-onda-botao {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.28, 1.7);
  }
}
.mr-botao--sec {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--texto);
}
.mr-botao--sec:hover {
  border-color: var(--agua);
  color: var(--agua);
}

.mr-rodape {
  padding: 40px 0 56px;
  border-top: 1px solid var(--linha);
  background: #051418;
  color: var(--texto-2);
}
.mr-rodape__miolo {
  display: grid;
  gap: 18px;
  font-size: 14px;
}
.mr-rodape__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 20px / 1 var(--f-titulo);
  color: var(--texto);
}
.mr-rodape__miolo p {
  max-width: 62ch;
}
.mr-rodape__voltar {
  justify-self: start;
  font-weight: 500;
  text-decoration: none;
  color: var(--agua);
}
.mr-rodape__voltar:hover {
  text-decoration: underline;
}
@media (min-width: 800px) {
  .mr-rodape__miolo {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
  }
}

/* "Pausar o movimento": congela as ondas, o tanque, o relógio, o ingresso e as letras de uma vez */
html.mr-pausado *,
html.mr-pausado *::before,
html.mr-pausado *::after {
  animation-play-state: paused !important;
}

/* =============================================================
   RÉGUA DE MARÉ · navegação pelas seções, com a boia no nível da página
   ============================================================= */
.mr-regua {
  display: none;
}
@media (min-width: 1100px) {
  .mr-regua {
    display: block;
    position: fixed;
    right: clamp(12px, 1.8vw, 28px);
    top: 50%;
    z-index: 40;
    transform: translateY(-50%);
  }
  .mr-regua ol {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 16px 11px;
    border: 1px solid var(--linha);
    border-radius: 99px;
    background: rgba(7, 28, 34, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .mr-regua ol::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 24px;
    bottom: 24px;
    width: 2px;
    margin-left: -1px;
    background: var(--linha-forte);
  }
  .mr-regua a {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--linha-forte);
    border-radius: 50%;
    background: var(--fundo);
    transition:
      background 0.3s ease,
      border-color 0.3s ease;
  }
  .mr-regua a::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  .mr-regua a span {
    position: absolute;
    right: 26px;
    top: 50%;
    padding: 5px 10px;
    border: 1px solid var(--linha-forte);
    border-radius: 8px;
    background: var(--petroleo);
    font: 500 12px / 1 var(--f-corpo);
    white-space: nowrap;
    color: var(--texto);
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition:
      opacity 0.25s ease,
      transform 0.25s var(--ease-saida);
  }
  .mr-regua a:hover span,
  .mr-regua a:focus-visible span {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .mr-regua a:hover {
    border-color: var(--agua);
  }
  .mr-regua a.is-atual {
    border-color: var(--agua);
    background: var(--agua);
  }
  .mr-regua__boia {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid var(--fundo);
    border-radius: 50%;
    background: var(--agua);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    visibility: hidden;
  }
  .mr-js .mr-regua__boia {
    visibility: visible;
  }
}

/* =============================================================
   APP DO FESTIVAL EM ALTA FIDELIDADE
   Os celulares da seção do app, os estados e o protótipo clicável usam o
   mesmo HTML (mare-telas.js). As telas foram desenhadas em 390 de
   largura: 1 unidade (--u) é 1/390 da largura da caixa (.mr-ap-caixa, o
   container), então tudo escala junto, do celular da página ao modal.
   ============================================================= */
.mr-ap-caixa {
  container-type: inline-size;
  width: 100%;
  height: 100%;
}
.mr-ap {
  --u: calc(100cqw / 390);
  --sup: 0; /* folga extra no topo para o recorte da câmera do celular */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  text-align: left;
}
.mr-fone .mr-ap {
  --sup: 18;
}
.mr-ap *,
.mr-ap *::before,
.mr-ap *::after {
  box-sizing: border-box;
}
.mr-ap h4 {
  margin: 0;
}
.mr-ap em,
.mr-ap i {
  font-style: normal;
}
.mr-ap button:disabled {
  cursor: not-allowed;
}
.mr-ap :focus-visible {
  outline: 2px solid var(--agua);
  outline-offset: 2px;
}
.mr-ap [data-foco]:focus {
  outline: none;
}

/* ícones de traço */
.mr-ic {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mr-ic--p {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.mr-ic--g {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

/* ---------- topo, títulos e rodapé ---------- */
.mr-ap-topo {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  padding: calc((20 + var(--sup)) * var(--u)) calc(20 * var(--u)) 0;
}
.mr-ap-marca {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.mr-ap-marca__ic {
  flex: none;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}
.mr-ap-marca span {
  font: 700 calc(24 * var(--u)) / 1 var(--f-titulo);
  letter-spacing: 0.02em;
}
.mr-ap-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1px solid rgba(62, 242, 200, 0.5);
  border-radius: 999px;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--agua);
}
.mr-ap-chip--fav {
  font-size: calc(14 * var(--u));
}
.mr-ap-chip--fav .mr-ic {
  fill: currentColor;
}
.mr-ap-chip--cx,
.mr-ap-chip--cor {
  font-size: calc(12.5 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mr-ap-chip--cor {
  border-color: rgba(255, 143, 115, 0.6);
  color: #ff8f73;
}
.mr-ap-vol {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(16 * var(--u));
  background: var(--superficie);
  color: var(--texto);
}
.mr-ap-cab {
  flex: none;
  padding: calc(18 * var(--u)) calc(20 * var(--u)) 0;
}
.mr-ap-cab .mr-ap-lead {
  margin-top: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.45;
}
.mr-ap-h {
  font-family: var(--f-corpo);
  font-size: calc(34 * var(--u));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.mr-ap--inicio .mr-ap-h {
  font-size: calc(36 * var(--u));
}
.mr-ap--ingresso .mr-ap-h,
.mr-ap-h--m {
  font-size: calc(30 * var(--u));
  line-height: 1.1;
}
.mr-ap-h--s {
  font-size: calc(20 * var(--u));
  line-height: 1.15;
  letter-spacing: 0;
}
.mr-ap-lead {
  max-width: 34ch;
  margin-top: calc(10 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  color: var(--texto-2);
}
.mr-ap-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.mr-ap-corpo > * {
  flex: none;
}
.mr-ap--inicio .mr-ap-corpo {
  gap: calc(26 * var(--u));
  padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u));
}
.mr-ap--programacao .mr-ap-corpo {
  gap: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
}
.mr-ap--passaporte .mr-ap-corpo {
  gap: calc(18 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
}
.mr-ap-rodape {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.mr-ap-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: 100%;
  height: calc(58 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--agua);
  color: #071c22;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.1;
}
.mr-ap-cta .mr-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 2.4;
}
.mr-ap-cta--sec {
  height: calc(50 * var(--u));
  border: 1px solid var(--linha-forte);
  border-radius: calc(16 * var(--u));
  background: transparent;
  color: var(--texto);
  font-size: calc(15.5 * var(--u));
}
.mr-ap-conta {
  text-align: center;
  font-size: calc(13.5 * var(--u));
  color: var(--texto-2);
}
.mr-ap-nota {
  text-align: center;
  font-size: calc(12.5 * var(--u));
  line-height: 1.4;
  color: var(--texto-3);
}

/* ---------- 1 · início: o relógio de maré ---------- */
.mr-ap-relogio {
  position: relative;
  align-self: center;
  width: calc(252 * var(--u));
  height: calc(252 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(12 * var(--u));
}
.mr-ap-relogio__anel {
  position: absolute;
  inset: calc(-16 * var(--u));
  border: 1.5px dashed rgba(62, 242, 200, 0.42);
  border-radius: 50%;
  animation: mr-ap-giro 60s linear infinite;
}
.mr-ap-relogio__boia {
  position: absolute;
  left: calc(20 * var(--u));
  top: calc(-22 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--agua);
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-2 * var(--u)) rgba(62, 242, 200, 0.75);
  animation: mr-ap-boia 3.4s ease-in-out infinite;
}
.mr-ap-relogio__disco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(2 * var(--u)) solid rgba(62, 242, 200, 0.6);
  border-radius: 50%;
  background: var(--petroleo);
  box-shadow: 0 calc(30 * var(--u)) calc(50 * var(--u)) calc(-24 * var(--u)) rgba(0, 0, 0, 0.6);
}
.mr-ap-agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.mr-ap-agua--a {
  height: 72%;
}
.mr-ap-agua--b {
  height: 66%;
}
.mr-ap-agua svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 200%;
  max-width: none;
  height: calc(30 * var(--u));
}
.mr-ap-agua--a svg {
  animation: mr-ap-deriva 8s linear infinite;
}
.mr-ap-agua--b svg {
  animation: mr-ap-deriva-r 5.5s linear infinite;
}
.mr-ap-agua--a path {
  fill: rgba(62, 242, 200, 0.2);
}
.mr-ap-agua--b path {
  fill: rgba(62, 242, 200, 0.3);
}
.mr-ap-agua i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(29 * var(--u));
  bottom: 0;
}
.mr-ap-agua--a i {
  background: linear-gradient(180deg, rgba(62, 242, 200, 0.2), rgba(62, 242, 200, 0.34));
}
.mr-ap-agua--b i {
  background: rgba(62, 242, 200, 0.3);
}
.mr-ap-relogio__brilho {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(16 * var(--u));
  width: calc(96 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(232, 247, 244, 0.14), rgba(232, 247, 244, 0));
  transform: rotate(-24deg);
}
.mr-ap-relogio__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(10 * var(--u));
}
.mr-ap-relogio__centro span {
  font-size: calc(12 * var(--u));
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
}
.mr-ap-relogio__centro b {
  font: 700 calc(112 * var(--u)) / 1 var(--f-titulo);
  letter-spacing: -0.02em;
  color: var(--texto);
}
.mr-ap-relogio__centro em {
  margin-top: calc(2 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  color: var(--texto);
}
.mr-ap-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  list-style: none;
}
.mr-ap-pilulas li {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1px solid rgba(232, 247, 244, 0.14);
  border-radius: 999px;
  background: rgba(232, 247, 244, 0.05);
  font-size: calc(13.5 * var(--u));
}
.mr-ap-status {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  padding: calc(16 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(20 * var(--u));
  background: var(--superficie);
}
.mr-ap-status__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(62, 242, 200, 0.14);
  color: var(--agua);
}
.mr-ap-status__ic .mr-ic {
  stroke-width: 2.4;
}
.mr-ap-status b {
  display: block;
  font-size: calc(16 * var(--u));
  font-weight: 600;
}
.mr-ap-status span span {
  display: block;
  margin-top: calc(3 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.45;
  color: var(--texto-2);
}

/* ---------- 2 · minha maré ---------- */
.mr-ap-dias {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u)) 0;
}
.mr-ap-dia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  min-height: calc(66 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(16 * var(--u));
  background: var(--superficie);
  text-align: left;
}
.mr-ap-dia span {
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.mr-ap-dia b {
  font-size: calc(15 * var(--u));
  font-weight: 600;
}
.mr-ap-dia > i {
  display: block;
  width: 100%;
  height: calc(4 * var(--u));
  margin-top: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: rgba(232, 247, 244, 0.14);
}
.mr-ap-dia > i i {
  display: block;
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--agua);
}
.mr-ap-dia.is-on {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
}
.mr-ap-dia.is-on span {
  color: #071c22;
}
.mr-ap-dia.is-on > i {
  background: rgba(7, 28, 34, 0.22);
}
.mr-ap-dia.is-on > i i {
  background: #071c22;
}
.mr-ap-aviso {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid;
  border-radius: calc(18 * var(--u));
}
.mr-ap-aviso .mr-ic {
  margin-top: calc(1 * var(--u));
}
.mr-ap-aviso p {
  font-size: calc(14.5 * var(--u));
  line-height: 1.45;
}
.mr-ap-aviso b {
  font-weight: 600;
}
.mr-ap-aviso--amb {
  border-color: rgba(255, 200, 87, 0.5);
  background: rgba(255, 200, 87, 0.1);
}
.mr-ap-aviso--amb .mr-ic {
  color: #ffc857;
}
.mr-ap-aviso--cor {
  border-color: rgba(255, 143, 115, 0.5);
  background: rgba(255, 143, 115, 0.1);
}
.mr-ap-aviso--cor .mr-ic {
  color: #ff8f73;
}
.mr-ap-aviso--acoes {
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(20 * var(--u));
}
.mr-ap-aviso--acoes > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}
.mr-ap-aviso__bt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
.mr-ap-bt-am {
  min-height: calc(48 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border: 1px solid #ffc857;
  border-radius: calc(14 * var(--u));
  background: #ffc857;
  color: #071c22;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.mr-ap-bt-am--sec {
  border-color: rgba(255, 200, 87, 0.6);
  background: transparent;
  color: #ffc857;
}
.mr-ap-lista {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  list-style: none;
}
.mr-ap-show {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(18 * var(--u));
  background: var(--superficie);
}
.mr-ap-show.is-on {
  border-color: rgba(62, 242, 200, 0.45);
}
.mr-ap-show.is-conflito {
  border-color: rgba(255, 200, 87, 0.55);
}
.mr-ap-show__hora {
  flex: none;
  display: flex;
  flex-direction: column;
  width: calc(52 * var(--u));
  font-variant-numeric: tabular-nums;
}
.mr-ap-show__hora b {
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.mr-ap-show__hora span {
  font-size: calc(12.5 * var(--u));
  color: var(--texto-3);
}
.mr-ap-show__barra {
  flex: none;
  align-self: stretch;
  width: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
}
.mr-ap-show__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.mr-ap-show__txt b {
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.mr-ap-show__txt span {
  font-size: calc(13.5 * var(--u));
  color: var(--texto-2);
}
.mr-ap-show__aviso {
  align-self: flex-start;
  margin-top: calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(255, 200, 87, 0.16);
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: #ffc857;
}
.mr-ap-coracao {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border: 1px solid rgba(232, 247, 244, 0.2);
  border-radius: calc(14 * var(--u));
  color: var(--texto-2);
}
.mr-ap-coracao.is-on {
  border-color: transparent;
  background: rgba(62, 242, 200, 0.16);
  color: var(--agua);
}
.mr-ap-coracao.is-on .mr-ic {
  fill: currentColor;
}

/* ---------- 3 · passaporte ---------- */
.mr-ap-tempo {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(16 * var(--u));
  background: var(--petroleo);
}
.mr-ap-tempo .mr-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--agua);
}
.mr-ap-tempo p {
  font-size: calc(14 * var(--u));
  line-height: 1.4;
}
.mr-ap-opcoes {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.mr-ap-opcoes--off .mr-ap-opc {
  border-color: rgba(232, 247, 244, 0.12);
}
.mr-ap-opcoes--off .mr-ap-opc__ck,
.mr-ap-opcoes--off .mr-ap-opc__txt {
  opacity: 0.6;
}
.mr-ap-opc {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  padding: calc(16 * var(--u));
  border: calc(2 * var(--u)) solid rgba(232, 247, 244, 0.2);
  border-radius: calc(20 * var(--u));
  background: var(--superficie);
  text-align: left;
}
.mr-ap-opc.is-on {
  border-color: var(--agua);
  background: rgba(62, 242, 200, 0.08);
}
.mr-ap-opc__ck {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border: calc(2 * var(--u)) solid rgba(232, 247, 244, 0.4);
  border-radius: 50%;
}
.mr-ap-opc.is-on .mr-ap-opc__ck {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
}
.mr-ap-opc__ck .mr-ic {
  stroke-width: 3.2;
}
.mr-ap-opc__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
}
.mr-ap-opc__txt b {
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.mr-ap-opc__txt span {
  font-size: calc(13.5 * var(--u));
  line-height: 1.4;
  color: var(--texto-2);
}
.mr-ap-opc__preco {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mr-ap-opc__preco b {
  font-size: calc(21 * var(--u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mr-ap-opc__preco span {
  font-size: calc(12 * var(--u));
  color: var(--texto-2);
}
.mr-ap-etq {
  flex: none;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  font-size: calc(12 * var(--u));
  font-weight: 600;
}
.mr-ap-etq--cor {
  background: rgba(255, 143, 115, 0.2);
  color: #ff8f73;
}
.mr-ap-qtd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}
.mr-ap-qtd > span {
  font-size: calc(16 * var(--u));
  font-weight: 500;
}
.mr-ap-qtd__ctl {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}
.mr-ap-qtd__ctl b {
  min-width: calc(44 * var(--u));
  text-align: center;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mr-ap-passo {
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border: 1px solid var(--linha-forte);
  border-radius: calc(14 * var(--u));
}
.mr-ap-passo:disabled {
  border-color: var(--linha);
  color: var(--texto-3);
}
.mr-ap-passo .mr-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 2.4;
}
.mr-ap-resumo {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(16 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(20 * var(--u));
  background: var(--petroleo);
}
.mr-ap-resumo > div {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  font-size: calc(14.5 * var(--u));
  color: var(--texto-2);
}
.mr-ap-resumo dd {
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.mr-ap-resumo__total {
  align-items: baseline;
  padding-top: calc(12 * var(--u));
  border-top: 1px solid var(--linha);
}
.mr-ap-resumo__total dt {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  color: var(--texto);
}
.mr-ap-resumo__total dd {
  font-size: calc(26 * var(--u));
  font-weight: 600;
}

/* ---------- 4 · passaporte digital ---------- */
.mr-ap-palco3d {
  perspective: calc(900 * var(--u));
  padding: calc(6 * var(--u)) 0 calc(14 * var(--u));
}
.mr-ap-ingresso {
  position: relative;
  transform-style: preserve-3d;
  filter: drop-shadow(0 calc(26 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5));
  animation: mr-ap-inclina 9s ease-in-out infinite alternate;
}
.mr-ap-ingresso__topo {
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u));
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  background: linear-gradient(135deg, #3ef2c8, #6ef6da);
  color: #071c22;
}
.mr-ap-ingresso__topo > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mr-ap-ingresso__topo > div span {
  font-size: calc(12 * var(--u));
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mr-ap-ingresso__topo > div em {
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: #071c22;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: var(--agua);
}
.mr-ap-ingresso__topo b {
  display: block;
  margin-top: calc(6 * var(--u));
  font: 700 calc(68 * var(--u)) / 1 var(--f-titulo);
  letter-spacing: -0.01em;
}
.mr-ap-ingresso__topo p {
  margin-top: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 600;
}
.mr-ap-ingresso__topo small {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: calc(13.5 * var(--u));
}
.mr-ap-ingresso__furo {
  position: relative;
  height: calc(24 * var(--u));
  background: linear-gradient(135deg, #6ef6da, #7df7dd);
}
.mr-ap-ingresso__furo i {
  position: absolute;
  top: 0;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--fundo);
}
.mr-ap-ingresso__furo i:first-child {
  left: calc(-12 * var(--u));
}
.mr-ap-ingresso__furo i:nth-child(2) {
  right: calc(-12 * var(--u));
}
.mr-ap-ingresso__furo em {
  position: absolute;
  left: calc(18 * var(--u));
  right: calc(18 * var(--u));
  top: calc(11 * var(--u));
  border-top: calc(2 * var(--u)) dashed rgba(7, 28, 34, 0.38);
}
.mr-ap-ingresso__base {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
  border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u));
  background: linear-gradient(135deg, #7df7dd, #9bfbe6);
  color: #071c22;
}
.mr-ap-qr {
  flex: none;
  width: calc(128 * var(--u));
  height: calc(128 * var(--u));
  padding: calc(7 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #f4fffc;
}
.mr-ap-ingresso__base dl {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.mr-ap-ingresso__base dt {
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mr-ap-ingresso__base dd {
  margin-top: calc(1 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.mr-ap-ingresso__base div:nth-child(2) dd {
  font-size: calc(15 * var(--u));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.mr-ap-ingresso__brilho {
  position: absolute;
  inset: 0;
  border-radius: calc(24 * var(--u));
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 68%);
  background-size: 260% 100%;
  animation: mr-ap-brilho 5s linear infinite;
}
.mr-ap-ingresso--plano {
  animation: none;
  filter: none;
  box-shadow: 0 calc(22 * var(--u)) calc(30 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, 0.6);
  border-radius: calc(24 * var(--u));
}
.mr-ap-ingresso--plano .mr-ap-ingresso__topo {
  padding: calc(16 * var(--u)) calc(20 * var(--u));
}
.mr-ap-ingresso--plano .mr-ap-ingresso__topo b {
  font-size: calc(48 * var(--u));
}
.mr-ap-ingresso--plano .mr-ap-ingresso__topo p,
.mr-ap-ingresso--plano .mr-ap-ingresso__topo small,
.mr-ap-ingresso--plano .mr-ap-ingresso__furo {
  display: none;
}
.mr-ap-ingresso--plano .mr-ap-ingresso__base {
  padding-top: calc(18 * var(--u));
}
.mr-ap-ingresso--plano .mr-ap-qr {
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
}
.mr-ap-favs {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(-4 * var(--u));
  font-size: calc(14.5 * var(--u));
  color: var(--texto-2);
}
.mr-ap-favs .mr-ic {
  fill: var(--agua);
  stroke: var(--agua);
}
.mr-ap-chegar {
  padding: calc(16 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(22 * var(--u));
  background: var(--superficie);
}
.mr-ap-mapa {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--petroleo);
}
.mr-ap-pulso {
  transform-box: fill-box;
  transform-origin: center;
  animation: mr-ap-pulso 2.4s ease-out infinite;
}
.mr-ap-pals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(6 * var(--u));
  margin-top: calc(12 * var(--u));
}
.mr-ap-pal {
  min-height: calc(44 * var(--u));
  border: 1px solid rgba(232, 247, 244, 0.2);
  border-radius: calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
}
.mr-ap-pal.is-on {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
  font-weight: 600;
}
.mr-ap-rota {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u));
  font-size: calc(14.5 * var(--u));
  line-height: 1.4;
}
.mr-ap-rota .mr-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--agua);
}
.mr-ap-rota b {
  font-weight: 600;
}

/* ---------- estados ---------- */
.mr-ap-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(16 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(20 * var(--u));
  background: var(--petroleo);
}
.mr-ap-fila > span {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.mr-ap-fila > span span {
  font-size: calc(13.5 * var(--u));
  color: var(--texto-2);
}
.mr-ap-fila > span b {
  font-size: calc(15 * var(--u));
  font-weight: 500;
}
.mr-ap-fila em {
  font: 700 calc(44 * var(--u)) / 1 var(--f-titulo);
  color: var(--agua);
}
.mr-ap-faixa {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc((14 + var(--sup)) * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--linha);
  background: var(--superficie-2);
  font-size: calc(15 * var(--u));
  font-weight: 500;
}
.mr-ap-faixa .mr-ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: #ff8f73;
}
.mr-ap-corpo--off {
  gap: calc(18 * var(--u));
  padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
}
.mr-ap-nota-cor {
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 143, 115, 0.1);
  font-size: calc(14.5 * var(--u));
  line-height: 1.5;
}

@keyframes mr-ap-giro {
  to {
    transform: rotate(1turn);
  }
}
@keyframes mr-ap-boia {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes mr-ap-deriva {
  to {
    transform: translateX(-50%);
  }
}
@keyframes mr-ap-deriva-r {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes mr-ap-inclina {
  0% {
    transform: rotateX(5deg) rotateY(-8deg) translateY(0);
  }
  50% {
    transform: rotateX(-2deg) rotateY(3deg) translateY(-6px);
  }
  100% {
    transform: rotateX(-5deg) rotateY(8deg) translateY(0);
  }
}
@keyframes mr-ap-brilho {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}
@keyframes mr-ap-pulso {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* =============================================================
   CELULAR, SEÇÃO DO APP, ESTADOS E PROTÓTIPO CLICÁVEL
   ============================================================= */

/* moldura do celular */
.mr-fone {
  --b: 8px;
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  overflow: hidden;
  border: var(--b) solid #2a6672;
  border-radius: calc(var(--b) * 5);
  background: var(--fundo);
  box-shadow:
    0 0 0 1px var(--linha-forte),
    0 40px 60px -34px rgba(0, 0, 0, 0.9);
}
.mr-fone::before {
  content: "";
  position: absolute;
  top: calc(var(--b) * 0.75);
  left: 50%;
  z-index: 3;
  width: 30%;
  height: calc(var(--b) * 2);
  border-radius: 99px;
  background: #2a6672;
  transform: translateX(-50%);
}

/* seção "Do primeiro aviso ao portão" */
.mr-app {
  position: relative;
  background: var(--fundo);
}
.mr-app__texto {
  max-width: 58ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--texto-2);
}
.mr-app__lista {
  display: flex;
  gap: 20px;
  margin: clamp(36px, 5vw, 64px) calc(var(--gutter) * -1) 0;
  padding: 8px var(--gutter) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.mr-app__item {
  flex: 0 0 min(72vw, 280px);
  scroll-snap-align: center;
}
@media (min-width: 900px) {
  .mr-app__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 36px);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .mr-app__lista--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mr-app__item {
    flex: none;
  }
}
.mr-app__item figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.mr-app__item .mr-fone {
  width: 100%;
  max-width: 280px;
}
.mr-app__item figcaption {
  display: grid;
  gap: 6px;
  max-width: 30ch;
  text-align: center;
}
.mr-app__item figcaption b {
  font: 600 17px / 1.3 var(--f-corpo);
}
.mr-app__item figcaption span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-2);
}
.mr-app__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 32px;
}
.mr-app__estados {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--linha);
}
.mr-app__estados > h3 {
  max-width: 24ch;
  font: 700 clamp(24px, 2.8vw, 38px) / 1.1 var(--f-titulo);
  letter-spacing: -0.01em;
}
.mr-app__estados > p {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--texto-2);
}

/* o botão do protótipo só existe com JavaScript (e com o módulo das telas) */
button.mr-botao[data-abrir-app] {
  display: none;
}
.mr-js button.mr-botao[data-abrir-app] {
  display: inline-flex;
}

/* ---------- protótipo clicável (<dialog>) ---------- */
html.mr-travado {
  overflow: hidden;
}
.mr-modal {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--linha-forte);
  border-radius: 28px;
  background: var(--fundo);
  color: var(--texto);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.mr-modal::backdrop {
  background: rgba(3, 14, 17, 0.8);
  backdrop-filter: blur(6px);
}
/* navegadores sem <dialog>: o script usa esta versão simples */
.mr-modal--simples[open] {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 200;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 100vmax rgba(3, 14, 17, 0.8),
    0 40px 100px rgba(0, 0, 0, 0.7);
}
.mr-demo {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 3.5vw, 24px);
}
.mr-demo__cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.mr-demo__titulo {
  font: 700 clamp(26px, 4.2vw, 32px) / 1.05 var(--f-titulo);
  letter-spacing: -0.01em;
}
.mr-demo__titulo:focus {
  outline: none;
}
.mr-demo__sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-2);
}
.mr-demo__fechar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
}
.mr-demo__fechar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.mr-demo__fechar:hover {
  border-color: var(--agua);
  background: var(--agua);
  color: #071c22;
}
.mr-demo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mr-demo__etapa {
  font: 600 12px / 1.4 var(--f-corpo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.mr-demo__recomecar {
  flex: none;
  min-height: 44px;
  padding: 0 4px;
  font: 500 13px / 1 var(--f-corpo);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--texto-2);
}
.mr-demo__recomecar:hover {
  color: var(--agua);
}
.mr-demo__app {
  height: min(860px, calc(100svh - 170px));
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 24px;
  background: var(--fundo);
}
/* ---------- RESPONSIVO · o protótipo nunca passa da altura da tela ----------
   Antes o app tinha altura min(860px, 100svh - 170px), mas a casca do diálogo (padding,
   cabeçalho, barra e espaços) passa de 170px: o diálogo sempre rolava e o botão do
   app ficava abaixo da dobra (rolagem dupla). Agora o diálogo tem altura própria
   (até 1090px, no máximo a da tela) e o app ocupa o que sobra, com rolagem só
   dentro dele. */
.mr-modal {
  height: min(1090px, calc(100vh - 24px));
  height: min(1090px, calc(100svh - 24px));
  max-height: none;
  overflow: hidden;
}
.mr-modal[open] {
  display: flex;
  flex-direction: column;
}
.mr-demo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.mr-demo__app {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
/* tela baixa (notebook, celular na horizontal): a casca encolhe para dar altura ao app */
@media (max-height: 760px) {
  .mr-demo {
    gap: 6px;
    padding: 14px 16px;
  }
  .mr-demo__sub {
    display: none;
  }
  .mr-demo__titulo {
    font-size: 22px;
    line-height: 1.1;
  }
}
/* altura muito baixa (celular na horizontal): o app volta ao tamanho natural e o
   diálogo rola, como antes; com a casca ocupando metade da tela o app não tem
   altura para os próprios botões */
@media (max-height: 520px) and (min-width: 521px) {
  .mr-modal {
    height: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100svh - 24px);
    overflow: auto;
  }
  .mr-modal[open] {
    display: block;
  }
  .mr-demo {
    display: grid;
  }
  .mr-demo__app {
    height: 440px;
    min-height: 420px;
  }
}
/* no celular o protótipo ocupa a tela toda: assim calc(1 * var(--u)) = 1px e os alvos de toque seguem em 44px */
@media (max-width: 520px) {
  .mr-modal {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100svh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .mr-demo {
    gap: 8px;
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 14px 0 0;
  }
  .mr-demo__cab,
  .mr-demo__barra {
    padding-inline: 16px;
  }
  .mr-demo__etapa {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .mr-demo__app {
    height: auto;
    min-height: 0;
    border-width: 1px 0 0;
    border-radius: 0;
  }
}
/* protótipo em janela baixa: a tela do passaporte encolhe um pouco para caber sem rolar */
@media (max-height: 1000px) {
  .mr-ap--vivo.mr-ap--passaporte .mr-ap-corpo {
    gap: calc(14 * var(--u));
    padding-top: calc(12 * var(--u));
  }
}

/* =============================================================
   TELA DE CARGA
   ============================================================= */
#carga {
  display: grid;
  place-items: center;
}
.mr-carga__miolo {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.mr-carga__miolo img {
  animation: mr-pulsar 1.6s ease-in-out infinite;
}
.mr-carga__pct {
  font: 600 14px / 1 var(--f-corpo);
  letter-spacing: 0.2em;
  color: var(--agua);
}
.mr-carga__barra {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(232, 247, 244, 0.1);
}
.mr-carga__barra i {
  display: block;
  height: 100%;
  background: var(--agua);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform 0.4s ease;
}
@keyframes mr-pulsar {
  50% {
    transform: scale(0.9);
  }
}

/* =============================================================
   MOVIMENTO REDUZIDO
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   RESPONSIVO · alturas baixas (notebook, celular na horizontal)
   O manifesto fica preso numa tela: com 62px de fonte e 100px de respiro ele
   passava de 745px e cortava as palavras e as três pílulas em 1366x650.
   A fonte e o respiro acompanham a altura da janela (em 1920x950 nada muda).
   ============================================================= */
.mr-manifesto {
  font-size: clamp(26px, min(4.6vw, 7.8vh), 62px);
  font-size: clamp(26px, min(4.6vw, 7.8svh), 62px);
}
.mr-man__miolo {
  padding-block: clamp(40px, min(8vw, 11vh), 100px);
  padding-block: clamp(40px, min(8vw, 11svh), 100px);
  gap: clamp(20px, min(4vw, 6vh), 52px);
  gap: clamp(20px, min(4vw, 6svh), 52px);
}
@media (max-height: 520px) {
  .mr-abertura {
    padding: 64px 0 20px;
  }
  .mr-abertura__base {
    gap: 12px;
  }
  .mr-titulo {
    font-size: min(calc((100vw - 2 * var(--gutter)) / 3.85), 318px, 44vh);
    font-size: min(calc((100vw - 2 * var(--gutter)) / 3.85), 318px, 44svh);
  }
  .mr-vidro li {
    padding: 8px 12px;
  }
}

/* celular na horizontal (~390px de altura): mais um degrau */
@media (max-height: 420px) {
  .mr-abertura {
    padding: 56px 0 16px;
  }
  .mr-titulo {
    font-size: min(calc((100vw - 2 * var(--gutter)) / 3.85), 318px, 34vh);
    font-size: min(calc((100vw - 2 * var(--gutter)) / 3.85), 318px, 34svh);
  }
  .mr-abertura__lead {
    font-size: 14px;
  }
  .mr-vidro li {
    padding: 6px 10px;
  }
  .mr-man__miolo {
    padding-block: 24px;
    gap: 16px;
  }
}
@media (max-height: 520px) {
  /* linhas mais largas: o manifesto ocupa menos linhas */
  .mr-manifesto {
    max-width: 34ch;
  }
}

/* régua lateral: as bolinhas têm 12px; a área de toque e de clique vai a ~32px
   sem mudar o desenho */
.mr-regua a::after {
  content: "";
  position: absolute;
  inset: -10px;
}