/* ─────────────────────────────────────────────────────────────
   Adênia, Foco! — página de apresentação
   Mesma língua visual do app: adesivo com contorno grosso, sombra
   dura deslocada, amarelo #ffe400, rosa #f9a0f3 e tinta #101010.
   ───────────────────────────────────────────────────────────── */

/* ── Fonte dos títulos ── */
@font-face {
  font-family: "MD Nichrome";
  src: url("/fontes/MDNichrome-Bold.woff2") format("woff2"),
       url("/fontes/MDNichrome-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gutter-mobile: 22px;
  --amarelo: #ffe400;
  --rosa: #f9a0f3;
  --violeta: #d888d6;
  --fogo: #fd611d;
  --ouro: #fec744;
  --creme: #fff6e0;
  --tinta: #101010;
  --borda: 4px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--rosa);
  color: var(--tinta);
  font-family: "Momo Trust Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .painel-titulo, .subtitulo {
  font-family: "MD Nichrome", "Momo Trust Display", "Momo Trust Sans", sans-serif;
  font-weight: 700;
  text-transform: none;
  line-height: 1.02;
  margin: 0;
}

h1 { font-size: clamp(44px, 12vw, 70px); }
h2 { font-size: clamp(31px, 6vw, 50px); margin-bottom: 10px; }
.secao h2 { margin-top: 14px; }
h3 { font-size: clamp(21px, 3.2vw, 28px); margin-bottom: 6px; }
p { margin: 0 0 12px; }

a { color: inherit; }

.miolo {
  width: min(1100px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.pula {
  position: absolute;
  left: -9999px;
}
.pula:focus {
  left: 12px; top: 12px; z-index: 50;
  background: #fff; padding: 10px 14px; border: var(--borda) solid var(--tinta); border-radius: 999px;
}

/* ── peças adesivo ── */
.adesivo {
  background: #fff;
  border: var(--borda) solid var(--tinta);
  border-radius: 22px;
  box-shadow: 0 6px 0 0 var(--tinta);
}

button.adesivo, a.adesivo {
  cursor: pointer;
  translate: 0 0;
  transition: translate 140ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 140ms ease;
}
button.adesivo:active, a.adesivo:active {
  translate: 0 4px;
  box-shadow: 0 2px 0 0 var(--tinta);
}
:focus-visible { outline: 3px dashed var(--tinta); outline-offset: 4px; }

/* ───────────────── topo ───────────────── */
.hero { position: relative; padding-bottom: 56px; overflow: hidden; }

.faixa {
  background: var(--amarelo);
  overflow: hidden;
  padding: 8px 0;
}
.faixa-fita {
  display: flex; gap: 18px; width: max-content;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  animation: desfila 26s linear infinite;
}
@keyframes desfila { to { transform: translateX(-50%); } }

.hero-grade {
  display: grid;
  gap: 22px;
  padding-top: 58px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grade {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "texto cena" "lojas cena";
    align-items: center;
    gap: 22px 30px;
    padding-top: 58px;
  }
  .hero-texto { grid-area: texto; align-self: end; }
  .lojas { grid-area: lojas; align-self: start; }
  .hero-cena { grid-area: cena; }
}

.selo {
  display: inline-block;
  background: var(--amarelo);
  border: 3px solid var(--tinta);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.linha-fina { font-size: clamp(16px, 2vw, 19px); max-width: 52ch; }
h1 + .linha-fina { margin-top: 14px; }
.subtitulo {
  font-size: clamp(20px, 2.9vw, 28px);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.linha-fina s { text-decoration-thickness: 3px; text-decoration-color: var(--tinta); }

/* ── botões das lojas ── */
.lojas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.lojas.centralizadas { justify-content: center; margin-top: 26px; }

/* botões da casa, em preto e sem sombra */
.loja {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px 12px;
  background: var(--tinta); color: #fff;
  border-radius: 999px; text-decoration: none;
  transition: translate 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.loja:active { translate: 0 3px; }
.loja svg { width: 24px; height: 24px; fill: #fff; flex: none; }
.loja span { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; font-size: 17px; }
.loja small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
@media (max-width: 400px) {
  .loja { padding: 10px 16px 11px; gap: 8px; }
  .loja span { font-size: 15px; }
  .loja small { font-size: 10px; }
  .loja svg { width: 21px; height: 21px; }
}

/* ───────────────── a cena da Adênia ───────────────── */
.hero-cena { display: flex; flex-direction: column; align-items: center; }

.palco {
  width: min(520px, 100%);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cena {
  position: relative;
  width: 100%;
  aspect-ratio: 318 / 233;
  container-type: size;
}
.cena .peca { position: absolute; }
.cena img { display: block; width: 100%; user-select: none; -webkit-user-drag: none; }

.linha   { left: 0; top: 72.5322%; width: 100%; z-index: 1; }
.corpo   { left: 17.6101%; top: 51.9313%; width: 33.7201%; z-index: 2; transform-origin: 50% 100%; }
.mouse   { left: 18.5535%; top: 76.3948%; width: 14.2987%; z-index: 10; }
.cabeca  { left: 14.7810%; top: -10.4207%; width: 52.3509%; z-index: 11; transform-origin: 50% 90%; }
.mao     { left: 18.5535%; top: 67.8112%; width: 14.5723%; z-index: 20; }
.computador { left: 35.2201%; top: 55.7940%; width: 45.1289%; z-index: 30; }

.cabeca-loop { position: relative; width: 100%; transform-origin: 50% 90%; }
.cabeca-loop .rosto { position: absolute; inset: 0; }
.mao-loop { width: 100%; transform-origin: 20% 20%; }
.mouse-loop { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .cena:not(.surto) .cabeca-loop { animation: chloe-head 11252.122ms linear infinite; }
  .cena:not(.surto) .mao-loop   { animation: chloe-hand 11252.122ms linear infinite; }
  .cena:not(.surto) .mouse-loop { animation: chloe-mouse 11252.122ms linear infinite; }
}

.dica {
  margin: 2px 0 0;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: #fff; border: 3px solid var(--tinta); border-radius: 999px; padding: 5px 12px;
  transition: opacity 200ms ease;
}
.dica.sumiu { opacity: 0; }

/* ───────────────── seções ───────────────── */
.secao { padding: 64px 0 72px; position: relative; --cor: var(--rosa); }
.secao.creme { --cor: var(--creme); }
.secao.rosa { --cor: var(--violeta); }
.secao.final { --cor: var(--amarelo); }
.rodape { position: relative; --cor: var(--tinta); }

/* a serrilha que costura um bloco de cor no outro */
.secao::before, .rodape::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -13px; height: 14px;
  background-color: var(--cor);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14'><polygon points='0,14 14,0 28,14' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14'><polygon points='0,14 14,0 28,14' fill='black'/></svg>");
  -webkit-mask-size: 28px 14px; mask-size: 28px 14px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  pointer-events: none;
}
.secao.creme { background: var(--creme); }
.secao.rosa { background: var(--violeta); }
.secao.final { background: var(--amarelo); }
.subtexto { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.centro { text-align: center; }
.centro .linha-fina { margin-inline: auto; }
.grande { font-size: clamp(40px, 9vw, 80px); }

/* passos */
.passos { list-style: none; display: grid; gap: 30px; padding: 0; margin: 38px 0 0; }
@media (min-width: 800px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.cartao { padding: 30px 26px 28px; position: relative; }
.cartao p { margin: 0; font-size: 16px; line-height: 1.6; }
.numero {
  position: absolute; top: -16px; left: 18px;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--amarelo); border: var(--borda) solid var(--tinta);
  display: grid; place-items: center;
  font-family: "Momo Trust Display", sans-serif; font-size: 20px;
}
.passos h3 { margin: 0 0 12px; }

.quem { list-style: none; display: grid; gap: 22px; padding: 0; margin: 34px 0 0; }
@media (min-width: 800px) { .quem { grid-template-columns: repeat(3, 1fr); } }
.quem .cartao p { font-size: 17px; }

.estreito { width: min(560px, 100% - var(--gutter) * 2); }

/* o mercadinho não tem caixa: a barraca e o texto vivem soltos na seção */
.mercado-grade { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .mercado-grade { grid-template-columns: 1.1fr 0.9fr; gap: 40px; } }
.barraca { position: relative; }
.barraca-arte { display: block; width: 100%; height: auto; }
/* o seu Alonso atrás do balcão, no vão limpo da barraca */
.alonso {
  position: absolute; left: 48%; bottom: 25%; width: 15%;
  transform-origin: 50% 100%;
}
.alonso img { display: block; width: 100%; height: auto; }
.alonso .alonso-olhos { position: absolute; left: 41.07%; top: 18.31%; width: 28.57%; }
.mercado-texto h2 { margin-top: 0; }

.duas { display: grid; gap: 16px; }
@media (min-width: 800px) { .duas { grid-template-columns: 1fr 1fr; } }

/* modos */
.modos { margin-top: 20px; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; max-width: 640px; }
@media (min-width: 560px) { .abas { display: flex; flex-wrap: wrap; } }
.aba {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; aspect-ratio: 1; padding: 12px; border-radius: 26px; background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center;
}
@media (min-width: 560px) { .aba { width: 138px; aspect-ratio: 1; } }
.aba img { width: 42px; height: auto; flex: none; }
.aba span { display: block; }
.aba.ativa { background: var(--amarelo); }
.painel { margin-top: 16px; padding: 22px 20px; max-width: 640px; }
.painel.escondido { display: none; }
.painel-titulo { font-size: clamp(21px, 3.2vw, 28px); margin-bottom: 8px; }
.painel p:last-child { margin-bottom: 0; }
.moedinhas { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.moedinhas img { width: 22px; height: 22px; }

/* telas */
.carrossel {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 24px max(var(--gutter), calc((100vw - 1100px) / 2)) 10px;
  scrollbar-width: none;
  cursor: grab;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel.arrastando { cursor: grabbing; scroll-snap-type: none; }
.tela { flex: none; width: 232px; margin: 0; scroll-snap-align: center; }
.carrossel { gap: 26px; }
.celular {
  border: var(--borda) solid var(--tinta);
  border-radius: 28px;
  box-shadow: 0 6px 0 0 var(--tinta);
  overflow: hidden;
  background: #fff;
  rotate: -1.4deg;
  transition: rotate 200ms ease;
}
.tela:nth-child(even) .celular { rotate: 1.6deg; }
.carrossel:hover .celular { rotate: 0deg; }
.celular img { display: block; width: 100%; }
figcaption { margin-top: 22px; font-size: 14px; line-height: 1.5; }
figcaption strong { display: block; font-size: 17px; margin-bottom: 6px; }

/* ── ilustrações dos cartões ── */
.ilustra {
  --alt: 118px;
  position: relative;
  display: grid; place-items: center;
  height: var(--alt);
  margin: 12px 0 26px;
}
/* a mão do rojão nasce do canto de baixo à direita, encostada na borda */
.ilustra.canto { --alt: 150px; place-items: end; justify-items: end; margin-bottom: 20px; }
.ilustra.canto .acende { margin-right: -26px; }
.ilustra.larga { --alt: 150px; }
.ilustra > img { max-height: var(--alt); max-width: 100%; width: auto; height: auto; display: block; }
.arte-lendo { rotate: -2deg; }

/* o rádio-relógio, montado com as mesmas peças do app */
.radio {
  position: relative;
  width: min(210px, 100%);
  aspect-ratio: 285 / 182;
  container-type: inline-size;
}
.radio img { position: absolute; display: block; }
.radio-corpo { left: 0; top: 0; width: 100%; }
.radio-knob { top: 17.03%; width: 14.04%; }
.radio-knob.um { left: 11.23%; }
.radio-knob.dois { left: 30.18%; }
.radio-start { left: 74.74%; top: 12.64%; width: 16.84%; }
.radio-visor {
  position: absolute; left: 20%; top: 50%; width: 64%;
  display: flex; align-items: baseline; justify-content: center;
  font-family: "Momo Trust Display", sans-serif; color: #fff;
  font-size: 15cqw; line-height: 1; font-variant-numeric: tabular-nums;
}

/* o rojão do cartão 3: clica e papoca */
.acende {
  background: none; border: 0; padding: 0; cursor: pointer; height: 100%;
  -webkit-tap-highlight-color: transparent;
}
.arte-rojao { height: 150px; width: auto; max-width: 100%; rotate: 6deg; transition: rotate 160ms ease; }
.acende:hover .arte-rojao { rotate: 0deg; }
.faisca {
  position: absolute; width: 10px; height: 10px; border-radius: 2px;
  will-change: transform, opacity; pointer-events: none;
}

/* ── o vídeo do Instagram ── */
.moldura-video {
  width: min(400px, 100%);
  margin: 26px auto 14px;
  border: var(--borda) solid var(--tinta);
  border-radius: 22px;
  box-shadow: 0 6px 0 0 var(--tinta);
  overflow: hidden;
  background: #fff;
}
.moldura-video iframe { display: block; width: 100%; height: 620px; border: 0; }
.pilula {
  display: inline-block; margin-top: 18px; padding: 12px 26px;
  border-radius: 999px; background: var(--amarelo);
  font-weight: 700; font-size: 16px; text-decoration: none;
}

/* rodapé */
.rodape { background: var(--tinta); color: var(--creme); padding: 34px 0 30px; }
.rodape-grade { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; font-size: 14px; }
.rodape p { margin: 0; }
.marca { display: flex; align-items: center; gap: 14px; }
.marca img { width: 54px; height: auto; }
.rodape nav { display: flex; gap: 16px; }
.rodape a { color: var(--amarelo); }

/* ───────────────── loop de digitar (copiado do app, sem alterar) ───────────────── */
@keyframes chloe-head {
  0% { transform: rotate(13deg); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  15.8215% { transform: rotate(-6deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  23.6489% { transform: rotate(3deg); animation-timing-function: linear; }
  28.6968% { transform: rotate(3deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  36.6509% { transform: rotate(12deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  41.3220% { transform: rotate(3deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  46.6384% { transform: rotate(13deg); animation-timing-function: steps(1, end); }
  54.4532% { transform: rotate(13deg); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  60.5788% { transform: rotate(-5.7045deg); animation-timing-function: steps(1, end); }
  63.1655% { transform: rotate(-5.7045deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  66.3804% { transform: rotate(13deg); animation-timing-function: steps(1, end); }
  75.6080% { transform: rotate(13deg); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  85.3395% { transform: rotate(-5.7045deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  94.6651% { transform: rotate(13deg); animation-timing-function: steps(1, end); }
  100% { transform: rotate(13deg); }
}

@keyframes chloe-hand {
  0% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  6.0344% { transform: translate(-5.3459cqw, 0) rotate(0deg); animation-timing-function: steps(1, end); }

  17.3956% { transform: translate(-5.3459cqw, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  23.5623% { transform: translate(0, 0) rotate(0deg); animation-timing-function: steps(1, end); }
  41.3220% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0,0,0.58,1); }
  46.1568% { transform: translate(18.5535cqw, -0.4292cqh) rotate(0deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  47.2302% { transform: translate(14.1747cqw, -6.8322cqh) rotate(-51deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  48.3814% { transform: translate(18.5535cqw, -0.4292cqh) rotate(-5deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  49.5053% { transform: translate(14.1758cqw, -6.8306cqh) rotate(-43deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  50.6873% { transform: translate(18.5231cqw, -0.4735cqh) rotate(3deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  51.8249% { transform: translate(14.2075cqw, -6.7843cqh) rotate(-56deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  52.8647% { transform: translate(18.4456cqw, -0.5868cqh) rotate(5deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  53.9134% { transform: translate(14.2356cqw, -6.7431cqh) rotate(-54deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  55.0184% { transform: translate(18.5535cqw, -0.4292cqh) rotate(0deg); animation-timing-function: steps(1, end); }
  65.5825% { transform: translate(18.5535cqw, -0.4292cqh) rotate(0deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  67.2087% { transform: translate(14.1667cqw, -6.844cqh) rotate(-51deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  68.3598% { transform: translate(18.5535cqw, -0.4292cqh) rotate(-5deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  69.4838% { transform: translate(14.1758cqw, -6.8306cqh) rotate(-43deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  70.6658% { transform: translate(18.5231cqw, -0.4735cqh) rotate(3deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  71.8034% { transform: translate(14.2075cqw, -6.7843cqh) rotate(-56deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  72.8432% { transform: translate(18.4456cqw, -0.5868cqh) rotate(5deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  73.8918% { transform: translate(14.2356cqw, -6.7431cqh) rotate(-54deg); animation-timing-function: cubic-bezier(0.5,0,0.865,0.263); }
  75.0028% { transform: translate(18.5535cqw, -0.4292cqh) rotate(0deg); animation-timing-function: steps(1, end); }
  85.3336% { transform: translate(18.5535cqw, -0.4292cqh) rotate(0deg); animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  89.4503% { transform: translate(0, 0) rotate(0deg); animation-timing-function: steps(1, end); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes chloe-mouse {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  6.0344% { transform: translateX(-5.3459cqw); animation-timing-function: steps(1, end); }
  17.3956% { transform: translateX(-5.3459cqw); animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  23.5623% { transform: translateX(0); animation-timing-function: steps(1, end); }
  100% { transform: translateX(0); }
}