/* ==========================================================================
   Wireframe — Manutenção de E-commerce / Visie
   Preto-e-branco, sans-serif padrão, motion estilo HQ (brusco e elástico)
   ========================================================================== */

:root {
  --ink: #111;
  --paper: #fff;
  --gray-1: #f2f2f2;
  --gray-2: #d9d9d9;
  --gray-3: #888;
  --line: 3px solid var(--ink);
  --line-thin: 2px solid var(--ink);

  /* exceção ao p&b, pedida no briefing: verde = ficou, vermelho = revertido */
  --win: #0a7a2f;
  --loss: #b3261e;

  /* altura visível da gaveta do sprint recolhida (mobile, slide 3) */
  --sheet-peek: 3rem;

  --header-h: 3.4rem;

  /* Easings de cartoon: entrada violenta, freada elástica */
  --ease-slam: cubic-bezier(.18, 1.7, .35, 1);
  --ease-whip: cubic-bezier(.6, -0.35, .2, 1.35);
  --ease-pop:  cubic-bezier(.2, 2.2, .4, .9);

  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-soft: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

/* ==========================================================================
   Deck: cada slide ocupa 100% do viewport, com scroll-snap
   ========================================================================== */

.deck {
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  margin-top: var(--header-h);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.slide {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem;
  position: relative;
  overflow: hidden;
  border-bottom: var(--line);
}

/* Fundo halftone (pontinhos de HQ) alternado entre slides */
.slide:nth-child(even) {
  background-image: radial-gradient(var(--gray-2) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

.slide__inner {
  width: min(58rem, 100%);
}

.slide__inner--wide { width: min(72rem, 100%); }

/* ==========================================================================
   Cabeçalho fixo (logo + hambúrguer)
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--paper);
  border-bottom: var(--line);
}

.site-logo {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: -.04em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink);
}

/* hambúrguer: só marcador, não abre nada */
.site-burger {
  width: 2.6rem;
  height: 2.2rem;
  padding: .45rem .35rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
}

.site-burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--ink);
}

.site-burger:hover span { background: var(--gray-3); }

/* ==========================================================================
   Rodapé (conteúdo do site da Visie)
   ========================================================================== */

.site-footer {
  scroll-snap-align: end;
  background: var(--ink);
  color: var(--paper);
  border-top: var(--line);
}

.site-footer__inner {
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 2rem;
}

.site-footer__logo {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: -.04em;
}

.site-footer__slogan {
  margin: .5rem 0 0;
  color: var(--gray-2);
  font-size: .9rem;
}

.site-footer__col h3 {
  margin: 0 0 .9rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray-2);
  border-bottom: 2px solid var(--gray-3);
  padding-bottom: .4rem;
}

.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: .5rem; }

.site-footer__col a,
.site-footer address a {
  color: var(--paper);
  text-decoration: none;
  font-size: .9rem;
  border-bottom: 1px solid transparent;
}

.site-footer__col a:hover,
.site-footer address a:hover { border-bottom-color: var(--paper); }

.site-footer address {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--gray-2);
}

.site-footer__legal {
  border-top: 2px solid var(--gray-3);
  padding: 1.1rem 1.5rem;
  text-align: center;
  font-size: .8rem;
  color: var(--gray-2);
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.05;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

h2 {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.kicker {
  display: inline-block;
  border: var(--line-thin);
  padding: .25rem .75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  margin: 0 0 1rem;
  background: var(--paper);
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  max-width: 42rem;
  margin: 0 0 1rem;
}

.lead--tight { margin-bottom: .5rem; font-size: 1.05rem; }

.footnote {
  font-size: .95rem;
  color: var(--ink);
  max-width: 42rem;
  margin-top: 1.5rem;
}

mark { padding: 0 .3em; font-weight: bold; }
.mark-win  { background: var(--ink); color: var(--paper); }
.mark-loss { background: transparent; color: var(--ink); text-decoration: line-through 2px; border: 2px dashed var(--ink); }

/* Links que abrem popup: sublinhado rabiscado de wireframe */
.inline-pop {
  font: inherit;
  font-weight: bold;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline wavy 2px;
  text-underline-offset: 4px;
}

.inline-pop:hover { background: var(--ink); color: var(--paper); text-decoration-color: var(--paper); }

/* ==========================================================================
   Animações de entrada (aplicadas quando o slide fica ativo)
   Estilo HQ: chega com violência, freia com elástico
   ========================================================================== */

[data-anim] {
  opacity: 0;
}

.is-active [data-anim="slam"]  { animation: slam .55s var(--ease-slam) var(--d, 0s) both; }
.is-active [data-anim="whip"]  { animation: whip .5s var(--ease-whip) var(--d, 0s) both; }
.is-active [data-anim="whip-l"]{ animation: whip-l .5s var(--ease-whip) var(--d, 0s) both; }
.is-active [data-anim="whip-r"]{ animation: whip-r .5s var(--ease-whip) var(--d, 0s) both; }
.is-active [data-anim="pop"]   { animation: pop .5s var(--ease-pop) var(--d, 0s) both; }
.is-active [data-anim="boing"] { animation: boing .9s var(--ease-pop) var(--d, 0s) both; }

@keyframes slam {
  0%   { opacity: 0; transform: scale(2.6) rotate(-6deg); }
  55%  { opacity: 1; transform: scale(.92) rotate(1.5deg); }
  75%  { transform: scale(1.05) rotate(-.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes whip {
  0%   { opacity: 0; transform: translateY(60px) skewY(4deg); }
  60%  { opacity: 1; transform: translateY(-8px) skewY(-1.5deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}

@keyframes whip-l {
  0%   { opacity: 0; transform: translateX(-90px) skewX(12deg); }
  60%  { opacity: 1; transform: translateX(12px) skewX(-4deg); }
  100% { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes whip-r {
  0%   { opacity: 0; transform: translateX(90px) skewX(-12deg); }
  60%  { opacity: 1; transform: translateX(-12px) skewX(4deg); }
  100% { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes pop {
  0%   { opacity: 0; transform: scale(0) rotate(8deg); }
  65%  { opacity: 1; transform: scale(1.15) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes boing {
  0%   { opacity: 0; transform: translateY(-120px) scaleY(1.4) scaleX(.7); }
  40%  { opacity: 1; transform: translateY(0) scaleY(.7) scaleX(1.3); }
  60%  { transform: translateY(-24px) scaleY(1.1) scaleX(.95); }
  80%  { transform: translateY(0) scaleY(.92) scaleX(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Slide 1 — Hero
   ========================================================================== */

.hero__row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Starburst de HQ (o "POW!" do +260%) */
.burst {
  position: relative;
  width: 180px;
  height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  clip-path: polygon(50% 0%, 59% 12%, 72% 5%, 74% 20%, 89% 18%, 84% 32%, 100% 38%, 88% 50%, 100% 62%, 84% 68%, 89% 82%, 74% 80%, 72% 95%, 59% 88%, 50% 100%, 41% 88%, 28% 95%, 26% 80%, 11% 82%, 16% 68%, 0% 62%, 12% 50%, 0% 38%, 16% 32%, 11% 18%, 26% 20%, 28% 5%, 41% 12%);
  transform-origin: center;
}

.is-active .burst { animation: pop .5s var(--ease-pop) var(--d, 0s) both, burst-idle 3s ease-in-out calc(var(--d, 0s) + .6s) infinite; }

@keyframes burst-idle {
  0%, 100% { rotate: -3deg; scale: 1; }
  50%      { rotate: 3deg; scale: 1.06; }
}

.burst__num { font-size: 2rem; font-weight: bold; line-height: 1; }
.burst__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .35rem; }

.scroll-hint {
  margin-top: 2rem;
  font: inherit;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-soft);
  padding: .75rem 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.scroll-hint:hover { translate: 2px 2px; box-shadow: 2px 2px 0 var(--ink); }
.scroll-hint:active { translate: 4px 4px; box-shadow: none; }

.scroll-hint__arrow { display: inline-block; animation: arrow-bounce 1.2s var(--ease-pop) infinite; }

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px) scaleY(1.2); }
}

/* ==========================================================================
   Slide 2 — Áreas de atuação
   ========================================================================== */

.areas {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.area-card {
  width: 100%;
  min-height: 6.5rem;
  font: inherit;
  text-align: left;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-soft);
  padding: .9rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: translate .12s var(--ease-pop), box-shadow .12s, rotate .12s var(--ease-pop);
}

.area-card:hover { translate: -3px -3px; rotate: -1deg; box-shadow: 7px 7px 0 var(--ink); }
.area-card:active { translate: 2px 2px; rotate: .5deg; box-shadow: 2px 2px 0 var(--ink); }

.area-card__num {
  font-size: .8rem;
  font-weight: bold;
  color: var(--gray-3);
  letter-spacing: .1em;
}

.area-card__name { font-weight: bold; font-size: 1.1rem; line-height: 1.25; }

/* ==========================================================================
   Slide 3 — Funil
   ========================================================================== */

.timeline {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0;
}

.timeline__btn {
  font: inherit;
  font-weight: bold;
  font-size: 1.1rem;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--ink);
  color: var(--paper);
  border: var(--line);
  cursor: pointer;
  transition: scale .12s var(--ease-pop);
}

.timeline__btn:hover:not(:disabled) { scale: 1.15; }
.timeline__btn:active:not(:disabled) { scale: .9; }
.timeline__btn:disabled { background: var(--gray-2); border-color: var(--gray-2); cursor: not-allowed; }

.timeline__track {
  flex: 1;
  display: flex;
  gap: .35rem;
  position: relative; /* referência p/ centralizar o passo atual no mobile */
}

.timeline__step {
  flex: 1;
  font: inherit;
  font-size: .75rem;
  font-weight: bold;
  padding: .4rem .2rem;
  background: var(--paper);
  border: var(--line-thin);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: scale .15s var(--ease-pop);
}

.timeline__step.is-current {
  background: var(--ink);
  color: var(--paper);
  scale: 1.12;
  rotate: -1.5deg;
}

.timeline__step.is-past { background: var(--gray-1); }

.funnel-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Funil: barras horizontais, largura proporcional ao volume */
.funnel { display: flex; flex-direction: column; gap: .5rem; }

.funnel__row { display: grid; grid-template-columns: 11rem 1fr; gap: .75rem; align-items: center; }

.funnel__label { font-size: .85rem; font-weight: bold; text-align: right; line-height: 1.2; }

.funnel__bar-wrap { position: relative; height: 2.4rem; }

.funnel__bar {
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .6rem;
  font-size: .8rem;
  white-space: nowrap;
  min-width: fit-content;
  transition: width .6s var(--ease-slam);
}

.funnel__bar strong { font-size: .95rem; }

.funnel__rate {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--paper);
  outline: 2px solid var(--ink);
  font-weight: bold;
  padding: 0 .35rem;
  transition: scale .3s var(--ease-pop);
}

.funnel__rate.is-bumping { animation: rate-bump .5s var(--ease-pop); }

/* etapa que melhorou no sprint em foco */
.funnel__bar--win { background: var(--win); }
.funnel__bar--win .funnel__rate { color: var(--win); outline-color: var(--win); }

/* linha "Vendas": total de pedidos, sem barra nem porcentagem */
.funnel__row--total {
  margin-top: .4rem;
  padding-top: .5rem;
  border-top: var(--line-thin);
  align-items: baseline;
}

.funnel__row--total .funnel__label { text-transform: uppercase; letter-spacing: .04em; }

.funnel__total-value { font-size: 1.6rem; font-weight: bold; line-height: 1; }

@keyframes rate-bump {
  0%   { scale: 1; }
  40%  { scale: 1.5; rotate: -4deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* Log do sprint atual */
.sprint-log {
  border: var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
  padding: 1rem 1.25rem;
  max-height: 21rem;
  overflow-y: auto;
}

.sprint-log__head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  border-bottom: var(--line-thin);
  padding-bottom: .5rem;
  margin-bottom: .75rem;
}

.sprint-log__title {
  margin: 0;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .06em;
}

/* placar e seta só existem na gaveta mobile */
.sprint-log__chips { display: none; }

.sprint-log__toggle {
  display: none;
  font: inherit;
  font-weight: bold;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: rotate .3s var(--ease-pop);
}

.sprint-log.is-open .sprint-log__toggle { rotate: 180deg; }

.sprint-log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

.sprint-log li {
  font-size: .85rem;
  line-height: 1.35;
  padding: .5rem .6rem .5rem 2rem;
  border: 2px solid;
  position: relative;
  animation: whip-l .4s var(--ease-whip) both;
}

.sprint-log li:nth-child(2) { animation-delay: .08s; }
.sprint-log li:nth-child(3) { animation-delay: .16s; }
.sprint-log li:nth-child(4) { animation-delay: .24s; }

/* tarefas clicáveis: afordância discreta, sem instrução na tela */
.sprint-log__item {
  cursor: pointer;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}
.sprint-log__item:hover,
.sprint-log__item:focus-visible {
  translate: 3px 0;
  box-shadow: -4px 0 0 var(--ink);
  outline: none;
}
.sprint-log__item::after {
  content: "↗";
  position: absolute;
  top: .5rem;
  right: .6rem;
  font-weight: bold;
  opacity: 0;
  transition: opacity .12s;
}
.sprint-log__item:hover::after,
.sprint-log__item:focus-visible::after { opacity: .5; }

.sprint-log li::before {
  position: absolute;
  left: .5rem;
  top: .5rem;
  font-weight: bold;
}

/* verde/vermelho do briefing traduzidos pra wireframe p&b:
   ganho = sólido preto com ✔, revertido = tracejado com ✕ */
.sprint-log li.is-win  { border-color: var(--ink); background: var(--gray-1); }
.sprint-log li.is-win::before { content: "✔"; }
.sprint-log li.is-loss { border-style: dashed; color: var(--gray-3); }
.sprint-log li.is-loss::before { content: "✕"; }
.sprint-log li .delta { display: block; font-weight: bold; color: var(--ink); }
.sprint-log li.is-loss .delta { color: var(--gray-3); text-decoration: line-through; }

.sprint-log li.is-win  { border-left-width: 8px; border-left-color: var(--win); }
.sprint-log li.is-loss { border-left-width: 8px; border-left-color: var(--loss); border-left-style: solid; }

/* conclusão no passo "Fim" */
.sprint-log__conclusion { font-size: .95rem; font-weight: bold; }
.sprint-log__conclusion .delta { margin-top: .35rem; }

/* Totais */
.totals {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0 0;
  flex-wrap: wrap;
}

.totals__item {
  border: var(--line);
  background: var(--paper);
  padding: .6rem 1.1rem;
  flex: 1;
  min-width: 11rem;
}

.totals__item dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-3); }
.totals__item dd { margin: 0; font-size: 1.4rem; font-weight: bold; }

.totals__item--big { background: var(--ink); color: var(--paper); }
.totals__item--big dt { color: var(--gray-2); }
.totals__item--big dd { font-size: 1.7rem; }

.totals__item dd.is-bumping { animation: rate-bump .5s var(--ease-pop); display: inline-block; }

/* valor original riscado, para comparar com o atual (a partir do sprint 1) */
.totals__was {
  font-size: .7em;
  font-weight: normal;
  color: var(--gray-3);
  text-decoration: line-through;
  margin-right: .35rem;
}
.totals__item--big .totals__was { color: var(--gray-2); }

/* ==========================================================================
   Slide 4 — Time
   ========================================================================== */

.team { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }

.team__member {
  border: var(--line-thin);
  background: var(--paper);
  padding: .75rem 1rem;
  max-width: 38rem;
}

.team__member:nth-child(even) { margin-left: auto; }

/* marcador de ícone no estilo wireframe: quadrado com cruz diagonal */
.team__tag {
  display: inline-block;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .6rem;
  border: 2px solid var(--ink);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ==========================================================================
   Slide 5 — Plataformas
   ========================================================================== */

.platforms { display: flex; gap: 1.5rem; margin: 2rem 0; flex-wrap: wrap; }

.platform {
  font: inherit;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: bold;
  text-transform: uppercase;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-hard);
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  transition: translate .12s var(--ease-pop), box-shadow .12s, rotate .12s var(--ease-pop);
}

.platform:hover { translate: -4px -4px; rotate: -2deg; box-shadow: 12px 12px 0 var(--ink); }
.platform:active { translate: 4px 4px; rotate: 1deg; box-shadow: 2px 2px 0 var(--ink); }

.platform__logo {
  font-size: .8rem;
  font-weight: normal;
  text-transform: lowercase;
  color: var(--gray-3);
  border: 2px dashed var(--gray-3);
  padding: .75rem 1.25rem;
}

/* ==========================================================================
   Slide 6 — Agêntico
   ========================================================================== */

.agentic {
  list-style: none;
  counter-reset: agentic;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: .75rem;
}

.agentic li {
  counter-increment: agentic;
  border: var(--line-thin);
  background: var(--paper);
  padding: .75rem 1rem .75rem 3rem;
  position: relative;
  font-size: .95rem;
}

.agentic li::before {
  content: counter(agentic);
  position: absolute;
  left: .75rem;
  top: .75rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-content: center;
  background: var(--ink);
  color: var(--paper);
  font-weight: bold;
  border-radius: 50%;
}

.agentic__wild {
  background: var(--ink) !important;
  color: var(--paper);
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 1.2rem !important;
  padding-left: 1rem !important;
}

.agentic__wild::before { display: none; }

/* ==========================================================================
   Slide 7 — SEO/GEO
   ========================================================================== */

.seo-tabs { border: var(--line); background: var(--paper); box-shadow: var(--shadow-hard); max-width: 42rem; }

.seo-tabs__bar { display: flex; border-bottom: var(--line); }

.seo-tab {
  flex: 1;
  font: inherit;
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase;
  background: var(--gray-1);
  border: none;
  padding: .9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

.seo-tab small { font-size: .7rem; font-weight: normal; text-transform: none; color: var(--gray-3); }

.seo-tab + .seo-tab { border-left: var(--line); }

.seo-tab.is-selected { background: var(--ink); color: var(--paper); }
.seo-tab.is-selected small { color: var(--gray-2); }

.seo-panel { padding: 1.25rem 1.5rem; animation: whip .4s var(--ease-whip); }
.seo-panel p { margin-top: 0; }
.seo-panel ul { margin: 0; padding-left: 1.25rem; }
.seo-panel li { margin-bottom: .4rem; }

/* ==========================================================================
   Slide 8 — Suas regras
   ========================================================================== */

.challenges {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.chip {
  font: inherit;
  font-weight: bold;
  font-size: 1.05rem;
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  padding: .6rem 1.25rem;
  cursor: pointer;
  transition: translate .12s var(--ease-pop), box-shadow .12s, rotate .12s var(--ease-pop);
}

.chip:hover { translate: -2px -2px; rotate: -1.5deg; box-shadow: 6px 6px 0 var(--ink); }
.chip:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }

/* ==========================================================================
   Slide 9 — Hub de integrações
   ========================================================================== */

.hub {
  position: relative;
  width: min(30rem, 88vw);
  aspect-ratio: 1;
  margin: 1.5rem auto 0;
}

.hub::before {
  /* linhas radiais tracejadas (wireframe de diagrama) */
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px dashed var(--gray-2);
  border-radius: 50%;
}

.hub__center {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 8.5rem;
  height: 8.5rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: .95rem;
  z-index: 1;
}

.is-active .hub__center { animation: pop .5s var(--ease-pop) .3s both, hub-pulse 2.5s ease-in-out 1s infinite; }

@keyframes hub-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.06; }
}

.hub__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.5rem;
  padding: .5rem .25rem;
  translate: -50% -50%;
  transform: rotate(var(--angle)) translateX(min(11.5rem, 34vw)) rotate(calc(-1 * var(--angle)));
  background: var(--paper);
  border: var(--line-thin);
  text-align: center;
  font-size: .8rem;
  font-weight: bold;
}

/* nodes usam keyframes próprios com scale/opacity (propriedades individuais):
   animar `transform` aqui apagaria o rotate/translateX que posiciona cada nó */
.is-active .hub__node { animation: node-pop .45s var(--ease-pop) both; }

@keyframes node-pop {
  0%   { opacity: 0; scale: 0; rotate: 8deg; }
  65%  { opacity: 1; scale: 1.15; rotate: -3deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
.is-active .hub__node:nth-child(2) { animation-delay: .45s; }
.is-active .hub__node:nth-child(3) { animation-delay: .53s; }
.is-active .hub__node:nth-child(4) { animation-delay: .61s; }
.is-active .hub__node:nth-child(5) { animation-delay: .69s; }
.is-active .hub__node:nth-child(6) { animation-delay: .77s; }
.is-active .hub__node:nth-child(7) { animation-delay: .85s; }
.is-active .hub__node:nth-child(8) { animation-delay: .93s; }
.is-active .hub__node:nth-child(9) { animation-delay: 1.01s; }

.hub__node--etc { border-style: dashed; font-weight: normal; }

/* ==========================================================================
   Slide 10 — Atendimento
   ========================================================================== */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 1.5rem 0;
  max-width: 48rem;
}

.versus__col { border: var(--line); padding: 1rem 1.25rem; background: var(--paper); }

.versus__col h3 { margin: 0 0 .75rem; text-transform: uppercase; font-size: .9rem; letter-spacing: .08em; }

.versus__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }

.versus__col--them { border-style: dashed; color: var(--gray-3); }
.versus__col--them h3 { color: var(--gray-3); }

.versus__col--us { box-shadow: var(--shadow-hard); }
.versus__col--us li::before { content: "→ "; font-weight: bold; }

.versus__vs {
  align-self: center;
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: .5rem .75rem;
  rotate: -6deg;
}

.cta { margin-top: 2rem; }

.cta__btn {
  display: inline-block;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
  border: var(--line);
  box-shadow: var(--shadow-hard);
  padding: 1rem 2rem;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}

.cta__btn:hover { translate: -3px -3px; box-shadow: 11px 11px 0 var(--ink); }
.cta__btn:active { translate: 5px 5px; box-shadow: 0 0 0 var(--ink); }

/* ==========================================================================
   Navegação lateral por bolinhas
   ========================================================================== */

.deck-nav {
  position: fixed;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
}

.deck-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.deck-dot {
  width: .9rem;
  height: .9rem;
  border: var(--line-thin);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  padding: 0;
  transition: scale .15s var(--ease-pop), background .15s;
}

.deck-dot:hover { scale: 1.35; }
.deck-dot.is-current { background: var(--ink); scale: 1.5; }

/* ==========================================================================
   Popup (modal central) e Drawer (lateral)
   ========================================================================== */

dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  /* o UA stylesheet põe overflow:auto no dialog, o que recortava o botão de
     fechar (que vaza do frame de propósito) e a sombra dura */
  overflow: visible;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .55);
  /* speed lines no backdrop, bem HQ */
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.06) 0deg 2deg, transparent 2deg 9deg);
}

.popup { margin: auto; }

.popup__frame {
  width: min(34rem, 92vw);
  background: var(--paper);
  border: var(--line);
  box-shadow: 12px 12px 0 var(--ink);
  padding: 2rem;
  position: relative;
}

.popup[open] .popup__frame { animation: pop .4s var(--ease-pop); }

.popup__close {
  position: absolute;
  top: -1.1rem;
  right: -1.1rem;
  width: 2.4rem;
  height: 2.4rem;
  font: inherit;
  font-weight: bold;
  background: var(--ink);
  color: var(--paper);
  border: var(--line-thin);
  border-color: var(--paper);
  outline: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: scale .12s var(--ease-pop), rotate .12s var(--ease-pop);
}

.popup__close:hover { scale: 1.2; rotate: 90deg; }

.popup__content h3, .drawer__content h3 {
  margin: 0 0 .75rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  border-bottom: var(--line);
  padding-bottom: .5rem;
}

.popup__content h4, .drawer__content h4 {
  margin: 1.1rem 0 .25rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-3);
}

.popup__content p, .drawer__content p { margin: .25rem 0; font-size: .95rem; }

.drawer {
  margin: 0 0 0 auto;
  height: 100vh;
  height: 100dvh;
}

.drawer__frame {
  width: min(26rem, 88vw);
  height: 100%;
  background: var(--paper);
  border-left: var(--line);
  padding: 2.5rem 2rem;
  position: relative;
  overflow-y: auto;
}

.drawer[open] .drawer__frame { animation: drawer-in .45s var(--ease-slam); }

@keyframes drawer-in {
  0%   { transform: translateX(110%); }
  70%  { transform: translateX(-3%); }
  100% { transform: translateX(0); }
}

.drawer .popup__close { top: .75rem; right: .75rem; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 860px) {
  .versus { grid-template-columns: 1fr; }
  .versus__vs { justify-self: center; }
  .deck-nav { display: none; }
  .team__member:nth-child(even) { margin-left: 0; }

  /* rodapé: colunas empilham em duas, marca ocupa a linha toda */
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 2rem 1.25rem 1.5rem;
  }
  .site-footer__brand { grid-column: 1 / -1; }

  /* ------------------------------------------------------------------
     Slide 3 no mobile: funil compacto + log do sprint vira gaveta
     inferior ("caixa de legenda de HQ") que sobe ao toque
     ------------------------------------------------------------------ */

  .slide--funnel {
    display: block;                /* conteúdo flui do topo... */
    overflow-y: auto;              /* ...e rola por dentro se faltar altura */
    padding: 1.25rem 1rem calc(var(--sheet-peek) + 1.5rem);
  }

  .slide--funnel h2 { font-size: 1.35rem; }
  .slide--funnel .lead--tight { font-size: .8rem; }

  /* linha do tempo rolável; o passo atual é centralizado via JS */
  .timeline { gap: .4rem; }
  .timeline__btn { width: 2.2rem; height: 2.2rem; font-size: .9rem; }
  .timeline__track { overflow-x: auto; scrollbar-width: none; }
  .timeline__track::-webkit-scrollbar { display: none; }
  .timeline__step { flex: 0 0 auto; min-width: 3.2rem; }

  /* funil compacto: rótulo estreito à esquerda, barra fina */
  .funnel-grid { display: block; }
  .funnel { gap: .35rem; }
  .funnel__row { grid-template-columns: 5.4rem 1fr; gap: .5rem; }
  .funnel__label { font-size: .62rem; }
  .funnel__bar-wrap { height: 1.8rem; }
  .funnel__bar { font-size: .62rem; padding: 0 .4rem; }
  .funnel__bar strong { font-size: .72rem; }
  .funnel__total-value { font-size: 1.2rem; }

  .totals { gap: .5rem; margin-top: 1rem; }
  .totals__item { min-width: 0; flex: 1 1 30%; padding: .4rem .7rem; }
  .totals__item dt { font-size: .6rem; }
  .totals__item dd { font-size: .95rem; }
  .totals__item--big { flex-basis: 100%; }
  .totals__item--big dd { font-size: 1.05rem; }

  /* a gaveta: fixa na base, espiando pelo cabeçalho; some junto com o slide */
  .slide--funnel .sprint-log {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    max-height: 62vh;
    max-height: 62dvh;
    box-shadow: none;
    border: none;
    border-top: var(--line);
    padding: 0;
    display: flex;
    flex-direction: column;
    translate: 0 100%;
    transition: translate .5s var(--ease-slam);
  }

  /* a entrada da gaveta é o próprio translate; desliga o pop/opacity */
  .slide--funnel .sprint-log[data-anim] { opacity: 1; animation: none !important; }

  .slide--funnel.is-active .sprint-log { translate: 0 calc(100% - var(--sheet-peek)); }
  .slide--funnel.is-active .sprint-log.is-open { translate: 0 0; }

  .sprint-log__head {
    border-bottom: none;
    margin: 0;
    padding: 0 1rem;
    min-height: var(--sheet-peek);
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    flex: 0 0 auto;
  }

  .slide--funnel .sprint-log__title { font-size: .85rem; }

  .sprint-log__chips {
    display: inline-flex;
    gap: .6rem;
    margin-left: auto;
    font-size: .75rem;
    font-weight: bold;
  }

  /* versões claras do verde/vermelho, legíveis sobre o cabeçalho preto */
  .sprint-log__chips .chip-win  { color: #7fd89b; }
  .sprint-log__chips .chip-loss { color: #ff9a93; }

  .sprint-log__toggle { display: inline-block; }

  .slide--funnel .sprint-log ul { padding: 1rem; overflow-y: auto; }
}

/* ==========================================================================
   Acessibilidade: quem pediu menos movimento, recebe menos movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
  [data-anim] { opacity: 1 !important; }
  .is-active [data-anim],
  .is-active .burst,
  .is-active .hub__center,
  .is-active .hub__node,
  .scroll-hint__arrow,
  .popup[open] .popup__frame,
  .drawer[open] .drawer__frame,
  .seo-panel { animation: none !important; }
  .funnel__bar { transition: none; }
  .slide--funnel .sprint-log { transition: none; }
}