/* Base do site novo · Mateus Cremon + Cremon Studio
   Identidade: creme, tinta e um laranja só; Inter apertada + uma palavra em Instrument Serif Italic.
   Estrutura e movimento: clone do Mira Studio. */
:root {
  --laranja: #FF5A36;
  --creme: #F6F1E8;
  --creme-2: #F6F1E8;      /* 06/10: tudo que é claro usa o creme (#F6F1E8); contêiner ganha contraste próprio */
  --tinta: #151413;
  --tinta-2: #1E1C1B;      /* cartão sobre a tinta */
  /* luz e sombra do laranja, só dentro de fundo com textura (mesmos tons da capa do Behance aprovada) */
  --ferrugem: #6E1A0C;
  --brasa: #C4341A;
  --luz: #FF603A;
  --tinta-60: rgba(21, 20, 19, .6);
  --tinta-40: rgba(21, 20, 19, .4);
  --tinta-12: rgba(21, 20, 19, .12);
  --creme-70: rgba(246, 241, 232, .7);
  --creme-50: rgba(246, 241, 232, .5);
  --creme-14: rgba(246, 241, 232, .14);
  --sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serifa: "Instrument Serif", Georgia, "Times New Roman", serif;
  --g: clamp(16px, 4.2vw, 60px);          /* margem lateral */
  --trilho: 0px;                           /* coluna lateral escura (só no computador) */
  --raio: clamp(10px, 1vw, 16px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  /* curvas e molas exatas do Mira (animacoes.md, seções 0.1 e 0.2) */
  --e-mira: cubic-bezier(.87, 0, .13, 1);
  --e-texto: cubic-bezier(.215, .61, .355, 1);
  --e-padrao: cubic-bezier(.4, 0, .2, 1);
  --e-simetrica: cubic-bezier(.44, 0, .56, 1);
  --e-linha: cubic-bezier(.56, .22, .05, .99);
  --e-contador: cubic-bezier(.19, 1, .22, 1);
  --m1: linear(0, .0517, .1609, .2946, .4287, .5486, .6541, .7412, .8094, .8636, .9046, .9345, .9566, .9723, .983, .9903, .9951, .998, .9998, 1.0008, 1.0012, 1.0014, 1.0013, 1.0012, 1); /* 1168ms */
  --m2: linear(0, .077, .2184, .3893, .5428, .6821, .7925, .8707, .9295, .9666, .9913, 1.0045, 1.0114, 1.0135, 1.0131, 1.0113, 1.0092, 1.0069, 1.0049, 1.0033, 1.0021, 1.0012, 1.0006, 1.0002, 1); /* 422ms */
  --m3: linear(0, .2092, .4082, .5575, .6691, .7526, .815, .8616, .8965, .9226, .9421, .9567, .9675, .9757, .9818, .9864, .9898, .9924, .9943, .9957, .9968, .9976, .9982, .9987, 1); /* 1367ms */
  --m4: linear(0, .1207, .3049, .4737, .6048, .7067, .7829, .8383, .8804, .9116, .9342, .9514, .9638, .9732, .9802, .9853, .9891, .992, .994, .9956, .9967, .9976, .9982, .9987, 1); /* 1119ms */
}
@media (min-width: 900px) { :root { --trilho: 44px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--sans); font-weight: 500;
  font-size: 16px; line-height: 1.45; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }
::selection { background: var(--laranja); color: var(--tinta); }

/* tipografia */
.t-gigante, .t-1, .t-2, .t-3 { font-weight: 800; letter-spacing: -0.045em; line-height: .94; margin: 0; text-wrap: balance; }
.t-gigante { font-size: clamp(64px, 15.5vw, 260px); letter-spacing: -0.055em; line-height: .82; }
.t-1 { font-size: clamp(42px, 6.6vw, 112px); }
.t-2 { font-size: clamp(32px, 4.2vw, 68px); }
.t-3 { font-size: clamp(22px, 2.1vw, 32px); letter-spacing: -0.035em; line-height: 1; }
.t-frase { font-weight: 800; font-size: clamp(26px, 3.3vw, 54px); letter-spacing: -0.045em; line-height: .98; margin: 0; text-wrap: balance; }
.t-corpo { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: var(--tinta-60); margin: 0; text-wrap: pretty; }
.t-micro { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.2; margin: 0; }
.t-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.2; margin: 0; }
.t-rotulo .num { color: var(--laranja); margin-right: .35em; }
em.serifa, .serifa { font-family: var(--serifa); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.17em; line-height: .8; color: var(--laranja); }
.laranja { color: var(--laranja); }
.apagado { color: var(--tinta-40); }
.no-escuro .apagado { color: var(--creme-50); }

/* estrutura */
.pagina { padding-left: var(--trilho); }
.miolo { padding-inline: var(--g); }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); }
.secao { padding-block: clamp(80px, 10vw, 160px); }
.cartao-escuro { background: var(--tinta); color: var(--creme); border-radius: var(--raio); }
.no-escuro { color: var(--creme); }
.no-escuro .t-corpo { color: var(--creme-70); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* botão do Mira: rótulo em caixa alta + quadradinho laranja com seta */
.botao { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.botao .seta { width: 18px; height: 18px; border-radius: 4px; background: var(--laranja); color: var(--tinta); display: grid; place-items: center;
  transition: transform .36s var(--e-mira), border-radius .36s var(--e-mira); }
.botao .seta svg { width: 9px; height: 9px; }
.botao:hover .seta, .botao:focus-visible .seta { transform: scale(.95); border-radius: 8px; }
/* rolo de texto do Mira (8.1/8.2): o movimento.js põe uma cópia embaixo; no hover as duas sobem */
.rolo { position: relative; display: inline-block; overflow: clip; vertical-align: top; }
.rolo > span { display: block; transition: transform .36s var(--e-mira), opacity .36s var(--e-mira); }
.rolo > span + span { position: absolute; left: 0; top: 0; transform: translateY(100%); opacity: 0; }
:is(a, button):hover > .rolo > span:first-child, :is(a, button):focus-visible > .rolo > span:first-child { transform: translateY(-100%); opacity: 0; }
:is(a, button):hover > .rolo > span + span, :is(a, button):focus-visible > .rolo > span + span { transform: none; opacity: 1; }
.botao-cheio { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding-inline: 22px; border-radius: 8px;
  background: var(--laranja); color: var(--tinta); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; transition: transform .3s var(--ease), background .3s; }
.botao-cheio:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
[hidden] { display: none !important; }

/* ---------- transição entre páginas (Mira, 0.5): a atual encolhe e escurece, a nova sobe por cima ---------- */
@view-transition { navigation: auto; }
::view-transition { background: var(--tinta); }
::view-transition-old(root) { animation: vt-sai .65s var(--e-mira) both; }
::view-transition-new(root) { animation: vt-entra .65s var(--e-mira) .55s both; }
@keyframes vt-sai { to { opacity: .7; transform: scale(.8); } }
@keyframes vt-entra { from { transform: translateY(105%) scale(1.05); } }
/* a mesma coisa feita à mão na ida (js/transicao.js): sai encolhendo, entra subindo */
html.saindo, html.entrando { background: var(--tinta); }
html.saindo body { animation: vt-sai .55s var(--e-mira) both; pointer-events: none; }
html.entrando body { animation: vt-entra-pag .7s var(--e-mira) both; }
@keyframes vt-entra-pag { from { transform: translateY(100vh) scale(1.05); } to { transform: none; } }
html.entrando .abertura { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}