/*
  -----------------------------------------------------------------
  Estilo da apresentação Minasfer (versão consultiva clara)
  - Paleta principal definida em :root para facilitar ajustes rápidos
  - Tipografia: Inter (texto) + Manrope (títulos)
  -----------------------------------------------------------------
*/
:root {
  --bg: #f6f3ea;
  --bg-alt: #f5f1e8;
  --text: #2e2a25;
  --text-soft: #5c564d;
  --olive: #6f7b52;
  --olive-dark: #55613d;
  --olive-soft: #dde3d0;
  --sand: #eae3d3;
  --alert: #a64b43;
  --line: #d8d1c4;
  --card: #fffdf8;
  --white: #ffffff;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 8px 26px rgba(72, 63, 48, 0.1);
  --shadow-strong: 0 14px 36px rgba(72, 63, 48, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: "Inter", "Manrope", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  overflow: hidden;
}

.paper-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(111, 123, 82, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.38;
}

.presentation-shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.15rem 5rem;
}

/* -----------------------------------------------------------------
   Cabecalho institucional (uma logo + texto)
----------------------------------------------------------------- */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
}

.brand-header {
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr);
  align-items: center;
  gap: 0.85rem;
  width: min(740px, 100%);
}

.logo-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px dashed #d2c9b8;
  background: #fffdfa;
}

.logo-slot--header {
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  justify-content: flex-start;
}

.logo-slot--header .brand-logo {
  width: auto;
  height: clamp(36px, 4.6vw, 50px);
  max-width: 240px;
  object-fit: contain;
  padding: 0;
}

.logo-slot--cover-secondary {
  width: min(360px, 86%);
  height: 84px;
  align-self: center;
}

.logo-slot--cover-hero {
  width: min(560px, 72%);
  height: clamp(72px, 11vh, 118px);
  align-self: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.logo-slot--cover-hero .brand-logo,
.cover-hero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.logo-slot--closing {
  width: min(280px, 78%);
  height: 84px;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.36rem;
}

.logo-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.4rem;
  background: rgba(246, 243, 234, 0.92);
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 600;
}

.logo-slot.logo-missing .logo-placeholder {
  display: flex;
}

.brand-header-copy {
  display: grid;
  gap: 0.2rem;
}

.brand-header-copy strong {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  line-height: 1.18;
  color: var(--olive-dark);
}

.brand-header-copy span {
  color: var(--text-soft);
  font-size: clamp(0.78rem, 1.1vw, 0.94rem);
}

.slide-counter {
  min-width: 5.2rem;
  text-align: right;
  font-weight: 800;
  font-size: 1rem;
  color: var(--olive-dark);
}

/* -----------------------------------------------------------------
   Estrutura de slides e transições
----------------------------------------------------------------- */
.slides {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.slides-watermark {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  width: clamp(44px, 5.4vw, 76px);
  pointer-events: none;
  z-index: 6;
  opacity: 0.16;
}

.slides-watermark-logo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(4%) scale(0.99);
  pointer-events: none;
  transition: opacity 360ms ease, transform 430ms cubic-bezier(0.22, 0.7, 0.24, 1);
}

.slide.prev {
  transform: translateX(-4%) scale(0.99);
}

.slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.slide-frame {
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #fffcf5 0%, #f8f4eb 100%);
  box-shadow: var(--shadow-strong);
  padding: clamp(1rem, 2.1vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: auto;
}

.cover-frame {
  justify-content: center;
}

.closing-frame {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Animação discreta de entrada por bloco */
.slide-frame > * {
  opacity: 0;
  transform: translateY(12px);
}

.slide.active .slide-frame > * {
  animation: fadeRise 500ms ease forwards;
}

.slide.active .slide-frame > *:nth-child(2) {
  animation-delay: 55ms;
}
.slide.active .slide-frame > *:nth-child(3) {
  animation-delay: 95ms;
}
.slide.active .slide-frame > *:nth-child(4) {
  animation-delay: 140ms;
}
.slide.active .slide-frame > *:nth-child(5) {
  animation-delay: 185ms;
}

@keyframes fadeRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------
   Tipografia e textos
----------------------------------------------------------------- */
h1,
h2,
h3,
strong,
blockquote {
  font-family: "Manrope", "Inter", sans-serif;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 4.7vw, 3.3rem);
  line-height: 1.07;
  color: var(--olive-dark);
}

h2 {
  margin: 0;
  font-size: clamp(1.42rem, 3.05vw, 2.25rem);
  line-height: 1.14;
  color: #403a31;
}

h3 {
  margin: 0;
  font-size: clamp(1rem, 1.72vw, 1.2rem);
  line-height: 1.2;
  color: #3e382f;
}

p,
li,
span,
td,
th {
  font-size: clamp(0.92rem, 1.26vw, 1.02rem);
  line-height: 1.45;
}

p {
  margin: 0;
  color: var(--text-soft);
}

.slide-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive-dark);
  font-size: 0.74rem;
  font-weight: 700;
}

.slide-context {
  color: var(--text-soft);
  max-width: 94ch;
}

.slide-close {
  margin-top: auto;
  color: #474036;
  font-weight: 600;
  border-left: 3px solid #b2bc9f;
  padding-left: 0.7rem;
}

blockquote {
  margin: 0;
  max-width: 930px;
  color: #3f3a32;
  font-size: clamp(1.4rem, 2.7vw, 2.2rem);
  line-height: 1.3;
}

/* -----------------------------------------------------------------
   Blocos, cards e grades
----------------------------------------------------------------- */
.grid-2,
.grid-3 {
  display: grid;
  gap: 0.75rem;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 0.75rem;
}

.compact-grid article {
  min-height: 102px;
}

.note-card,
.pain-card,
.gain-card,
.rule-card,
.flow-step,
.cascade-card,
.compare-column,
.result-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  background: var(--card);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.35rem;
}

.note-card--sand {
  background: #f4ede0;
  border-color: #e1d7c5;
}

.note-card--olive {
  background: #ebf1df;
  border-color: #c8d3b2;
}

.note-card--olive-soft {
  background: var(--olive-soft);
  border-color: #c4cfaf;
}

.note-card h3,
.note-card p {
  color: #3f392f;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 0.66rem;
}

.sectors-grid .result-card {
  min-height: 104px;
}

.result-card {
  background: #e9f0dd;
  border-color: #c3cfae;
  gap: 0.3rem;
  min-height: 118px;
}

.result-card h3 {
  color: #49583a;
  font-size: 1rem;
}

.result-card p {
  color: #4f5b40;
  font-size: 0.9rem;
}

.channels-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 0.62rem;
}

.pain-card {
  background: #fbefed;
  border-color: #e7c1bc;
}

.pain-card h3 {
  color: #7c2f29;
}

.pain-card h3::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.42rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #fff;
  background: var(--alert);
}

.pain-card p {
  color: #72413b;
}

.gain-card {
  background: #eef4e5;
  border-color: #c9d5b2;
}

.gain-card h3 {
  color: #4d5a37;
}

.gain-card h3::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.42rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #fff;
  background: var(--olive);
}

.gain-card p {
  color: #4e5c3c;
}

/* Linha de etapas do slide 2 */
.process-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.process-line span {
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  border: 1px solid #cfd8bf;
  background: #eef4e5;
  color: #4f5c3a;
  font-weight: 600;
}

/* Causa e efeito */
.cascade-grid {
  display: grid;
  gap: 0.72rem;
}

.cascade-card {
  background: #f8f2e5;
  border-color: #e3d5b8;
}

.cascade-card h3 {
  color: #6f572d;
}

.cascade-card--critical {
  background: #fbeeed;
  border-color: #e7c0bc;
}

.cascade-card--critical h3 {
  color: #843731;
}

/* Regras de negociação */
.rule-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 0.75rem;
}

.rule-card {
  background: #faf6ed;
  border-color: #dfd2bc;
}

.rule-card--highlight {
  background: #f8ecea;
  border-color: #e5beba;
}

.rule-number {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  color: #8f3932;
  line-height: 1;
}

.strategic-note {
  border-radius: var(--radius-md);
  border: 1px solid #d4c6ae;
  background: #f6efdf;
  box-shadow: var(--shadow);
  padding: 0.84rem 0.95rem;
  display: grid;
  gap: 0.4rem;
}

.strategic-note h3 {
  color: #6c5532;
}

.strategic-note p {
  color: #5c4f40;
}

.ruler-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 0.62rem;
}

.ruler-card {
  border-radius: 13px;
  border: 1px solid #d8d1c4;
  background: #fffdf7;
  box-shadow: var(--shadow);
  padding: 0.75rem 0.8rem;
  display: grid;
  gap: 0.26rem;
}

.ruler-card h3 {
  color: #4d5a37;
  font-size: 0.98rem;
}

.ruler-card p {
  color: #61594d;
  font-weight: 600;
}

.ruler-card--ok {
  border-color: #bdd0a2;
  background: #edf3e4;
}

.ruler-card--warn {
  border-color: #e3cf9e;
  background: #fbf4e3;
}

.ruler-card--critical {
  border-color: #dfb6b1;
  background: #fbeeee;
}

/* Tabela de responsabilidades */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: auto;
  background: var(--white);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

thead th {
  background: #e9e2d1;
  color: #4d463c;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.7rem;
  text-align: left;
}

tbody td {
  padding: 0.65rem 0.7rem;
  border-top: 1px solid #ece5d8;
  color: #514b41;
  vertical-align: top;
}

tbody tr:nth-child(even) td {
  background: #fcfaf4;
}

/* Fluxo ponta a ponta */
.macro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.95fr);
  gap: 0.8rem;
}

.macro-main {
  display: grid;
  gap: 0.7rem;
}

.macro-flow-row {
  display: flex;
  align-items: stretch;
  gap: 0.58rem;
}

.macro-step {
  position: relative;
  border-radius: 14px;
  border: 1px solid #d8d1c4;
  background: #fffdf7;
  box-shadow: var(--shadow);
  padding: 0.7rem 0.64rem;
  display: grid;
  gap: 0.3rem;
  min-height: 162px;
  flex: 1 1 0;
  min-width: 128px;
}

.macro-step h3 {
  font-size: 0.94rem;
  line-height: 1.2;
  color: #4f5a3a;
}

.macro-step p {
  font-size: 0.84rem;
  color: #5f584d;
}

.macro-key {
  margin-top: auto;
  border-radius: 10px;
  border: 1px solid #b8c6a0;
  background: #edf3e4;
  color: #43502f;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.35rem 0.45rem;
}

.macro-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.36rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 2px solid #94a283;
  border-right: 2px solid #94a283;
  transform: translateY(-50%) rotate(45deg);
}

.macro-step--focus {
  border-color: #c5d0af;
  background: #edf3e4;
  box-shadow: 0 10px 20px rgba(111, 123, 82, 0.16);
}

.macro-step--wide {
  flex-grow: 1.35;
}

.macro-step--final {
  border: 2px solid #7f9560;
  background: #dfe8cf;
  box-shadow: 0 12px 24px rgba(86, 97, 61, 0.24);
  flex-grow: 1.2;
}

.macro-key--final {
  border-color: #7f9560;
  background: #cedcb6;
  color: #334227;
}

.macro-aside {
  border-radius: var(--radius-md);
  border: 1px solid #d8d1c4;
  background: #fcf8ef;
  box-shadow: var(--shadow);
  padding: 0.62rem 0.68rem;
  display: grid;
  gap: 0.28rem;
  align-content: start;
  max-width: 280px;
  justify-self: end;
}

.macro-aside h3 {
  color: #6e5834;
  font-size: 0.93rem;
}

.macro-aside p {
  color: #5f5547;
  font-size: 0.82rem;
  line-height: 1.35;
}

.pv-map {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(180px, 0.58fr);
  gap: 0.75rem;
}

.pv-main {
  display: grid;
  gap: 0.52rem;
}

.pv-track {
  display: flex;
  align-items: stretch;
  gap: 0.62rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.pv-node {
  flex: 1 1 0;
  min-width: 164px;
  min-height: 168px;
  position: relative;
  border-radius: 13px;
  border: 1px solid #d8d1c4;
  background: #fffdf7;
  box-shadow: var(--shadow);
  padding: 0.66rem 0.6rem;
  display: grid;
  gap: 0.3rem;
}

.pv-node h3 {
  font-size: 0.92rem;
  color: #4d5a37;
  line-height: 1.2;
}

.pv-node p {
  font-size: 0.84rem;
  color: #5f584d;
  line-height: 1.33;
}

.pv-node:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.34rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  border-top: 2px solid #95a383;
  border-right: 2px solid #95a383;
  transform: translateY(-50%) rotate(45deg);
}

.pv-node--focus {
  border-color: #bdd0a2;
  background: #edf3e4;
  box-shadow: 0 10px 22px rgba(111, 123, 82, 0.16);
}

.pv-node--approval {
  min-width: 150px;
  background: #faf7ef;
  border-color: #d9ceb9;
}

.pv-node--wide {
  flex-grow: 1.4;
  min-width: 220px;
}

.pv-node--final {
  border: 2px solid #809761;
  background: #dfe8cf;
  box-shadow: 0 10px 24px rgba(86, 97, 61, 0.24);
  min-width: 190px;
}

.pv-emphasis {
  margin-top: auto;
  border-radius: 10px;
  border: 1px solid #b8c6a0;
  background: #edf3e4;
  color: #43502f;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.32rem 0.44rem;
}

.pv-emphasis--final {
  border-color: #809761;
  background: #d0ddb9;
  color: #334227;
}

.pv-subnote {
  font-size: 0.75rem;
  color: #6a6153;
}

.pv-oc-note {
  border-radius: 12px;
  border: 1px solid #d9ceb9;
  background: #faf5ea;
  padding: 0.52rem 0.66rem;
  display: grid;
  gap: 0.2rem;
}

.pv-oc-note strong {
  font-size: 0.8rem;
  color: #5b4b33;
}

.pv-oc-note span {
  font-size: 0.78rem;
  color: #625648;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 0.65rem;
}

.flow-grid--ten {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.flow-step {
  position: relative;
  min-height: 95px;
  background: #f7f4ec;
}

.flow-step h3 {
  color: #4f5b3b;
  font-size: 0.98rem;
}

.flow-step p {
  color: #5f584e;
  font-size: 0.88rem;
}

.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.44rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid #9ca989;
  border-right: 2px solid #9ca989;
  transform: translateY(-50%) rotate(45deg);
}

/* Comparativo antes x depois */
.compare-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 0.8rem;
}

.compare-column {
  min-height: 260px;
}

.compare-column--before {
  background: #f1e8d8;
  border-color: #dccfb8;
}

.compare-column--after {
  background: #e4ead7;
  border-color: #c5d0af;
}

.compare-column p {
  color: #4e483d;
}

/* -----------------------------------------------------------------
   Rodapé de navegação
----------------------------------------------------------------- */
.controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.7rem;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: max(0.6rem, env(safe-area-inset-bottom));
  z-index: 40;
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
}

.nav-btn {
  border: 1px solid #c7d1b3;
  background: #eef4e5;
  color: #495539;
  border-radius: 10px;
  padding: 0.52rem 0.85rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

.nav-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.progress-wrap {
  flex: 1;
  height: 9px;
  border: 1px solid #d9d1c2;
  border-radius: 999px;
  overflow: hidden;
  background: #f0ebdf;
}

.progress-bar {
  height: 100%;
  width: 6%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--olive), #8c9870);
  transition: width 290ms ease;
}

/* -----------------------------------------------------------------
   Responsividade para notebook e desktop
----------------------------------------------------------------- */
@media (max-width: 1220px) {
  .brand-header {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .grid-3,
  .flow-grid,
  .flow-grid--ten,
  .results-grid,
  .channels-row,
  .ruler-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .macro-layout {
    grid-template-columns: 1fr;
  }

  .pv-map {
    grid-template-columns: 1fr;
  }

  .macro-flow-row {
    flex-wrap: wrap;
  }

  .macro-step {
    min-width: 190px;
  }
}

@media (max-width: 980px) {
  .presentation-shell {
    padding: 0.76rem 0.76rem 4.7rem;
  }

  .hud {
    flex-wrap: wrap;
  }

  .slide-counter {
    width: 100%;
    text-align: left;
  }

  .grid-2,
  .grid-3,
  .payment-grid,
  .rule-layout,
  .compare-layout,
  .flow-grid,
  .flow-grid--ten,
  .results-grid,
  .channels-row,
  .ruler-grid {
    grid-template-columns: 1fr;
  }

  .macro-step::after {
    display: none;
  }

  .pv-track {
    flex-wrap: wrap;
  }

  .pv-node {
    min-width: 180px;
  }

  .pv-node::after {
    display: none;
  }

  .flow-step::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .slides-watermark {
    width: 46px;
    right: 0.75rem;
    bottom: 0.8rem;
    opacity: 0.14;
  }

  .hud {
    padding: 0.8rem;
  }

  .controls {
    left: 0.72rem;
    right: 0.72rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .logo-slot--header {
    height: auto;
  }

  .logo-slot--header .brand-logo {
    height: 40px;
    max-width: 210px;
  }

  .slide-frame {
    padding: 0.95rem;
  }
}