/* ── Reset & Base ───────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Nunito", sans-serif;
  background: #1a1a2e;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

/* ── Slideshow ──────────────────────────────────────────── */

.slideshow-wrapper {
  position: relative;
  width: 960px;
  height: 540px;
  user-select: none;
}

.slide {
  display: none;
  width: 960px;
  height: 540px;
  overflow: hidden;
  position: relative;
}

.slide.active {
  display: block;
  animation: slideFadeIn .6s ease;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #daeeff 0%, #c5e5ff 50%, #b5d8f5 100%);
  z-index: 0;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 6px solid #1a7fd4;
  pointer-events: none;
  z-index: 30;
}

/* ── Decorations ────────────────────────────────────────── */

.cloud {
  position: absolute;
  background: white;
  border-radius: 50px;
  opacity: .9;
  z-index: 2;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
}

.c-xs { width: 65px; height: 20px; }
.c-xs::before { width: 30px; height: 30px; top: -14px; left: 8px; }
.c-xs::after  { width: 22px; height: 22px; top: -10px; left: 28px; }

.c-sm { width: 88px; height: 26px; }
.c-sm::before { width: 42px; height: 42px; top: -20px; left: 10px; }
.c-sm::after  { width: 30px; height: 30px; top: -14px; left: 38px; }

.c-md { width: 118px; height: 32px; }
.c-md::before { width: 54px; height: 54px; top: -26px; left: 12px; }
.c-md::after  { width: 42px; height: 42px; top: -19px; left: 52px; }

.c-lg { width: 148px; height: 38px; }
.c-lg::before { width: 66px; height: 66px; top: -31px; left: 16px; }
.c-lg::after  { width: 50px; height: 50px; top: -23px; left: 68px; }

.spark {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  animation: twinkle 2.8s ease-in-out infinite;
}

/* ── Progress Bar ───────────────────────────────────────── */

.progress-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
  border-top: 1px solid #d8ecf8;
  z-index: 25;
}

.slide-num {
  font-size: 14px;
  font-weight: 900;
  color: #1a7fd4;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.progress-bar-inner {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  height: 8px;
}

.progress-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #cce3f5;
  border-radius: 3px;
}

.progress-fill {
  position: absolute;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #f5a623, #f5c842);
  border-radius: 3px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.progress-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #cce3f5;
  border: 2px solid white;
  transform: translateX(-50%);
  cursor: pointer;
  transition: background .3s, transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.progress-dot:hover { transform: translateX(-50%) scale(1.3); }
.progress-dot.done  { background: #f5c842; }

.progress-dot.active {
  width: 22px;
  height: 22px;
  border: none;
  background: #f5c842;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, .35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23f5c842'/%3E%3Ccircle cx='11' cy='11' r='10' fill='url(%23g)' opacity='.4'/%3E%3Cellipse cx='9' cy='7' rx='3.5' ry='2.5' fill='white' opacity='.35' transform='rotate(-15 9 7)'/%3E%3Crect x='1' y='12' width='20' height='2' rx='1' fill='%23d4a020'/%3E%3Cline x1='11' y1='14' x2='11' y2='18' stroke='%23b8860b' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='19' r='2' fill='%23d4a020'/%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.35' r='.6'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='transparent'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: #1a7fd4;
  font-weight: 900;
  line-height: 1;
  padding: 2px 4px;
  transition: color .2s, transform .15s;
  flex-shrink: 0;
}

.nav-btn:hover {
  color: #f5a623;
  transform: scale(1.2);
}

/* ── Shared Card Components ─────────────────────────────── */

.panel-card {
  background: white;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 70, 150, .10);
}

.ph {
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 900;
  color: white;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ph-blue { background: #1a7fd4; }
.ph-green { background: #22aa22; }
.ph-teal { background: #00a99d; }

.pimg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5faff;
  padding: 8px;
}

.pimg img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pimg.dark-bg { background: #0a0a14; padding: 0; }
.pimg.dark-bg img { width: 100%; height: 100%; object-fit: cover; }
.pimg.warm-bg { background: #fffbe8; }

.pdesc {
  padding: 8px 12px;
  font-size: 12px;
  color: #445;
  line-height: 1.5;
  text-align: center;
  font-weight: 600;
}

/* ── Shared Keyframes ───────────────────────────────────── */

@keyframes slideFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeUp      { to { opacity: 1; transform: translateY(0) } }
@keyframes popIn       { to { opacity: 1; transform: scale(1) } }
@keyframes slideInRight { to { opacity: 1; transform: translateX(0) } }
@keyframes slideInLeft  { to { opacity: 1; transform: translateX(0) } }
@keyframes typeIn  { from { width: 0 } to { width: 100% } }
@keyframes cardUp  { to { opacity: 1; transform: translateY(0) } }
@keyframes spinIn  { to { opacity: 1; transform: scale(1) rotate(0) } }
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg) }
  50%      { opacity: .4; transform: scale(.65) rotate(12deg) }
}
@keyframes spinTop {
  from { transform: perspective(300px) rotateY(0deg) }
  to   { transform: perspective(300px) rotateY(360deg) }
}

/* ── Slide 1 — Capa ─────────────────────────────────────── */

#slide1 .title-area { position: absolute; top: 100px; left: 140px; right: 280px; z-index: 5; }
#slide1 h1 { font-size: 38px; font-weight: 900; color: #1a2a4a; line-height: 1.15; margin-left: 20px; }
#slide1 h1 .blue { color: #1a7fd4; }
#slide1 h1 .yellow { color: #f5a623; }
#slide1 .subtitle-pill {
  margin-top: 20px;
  background: #f5c842;
  border-radius: 40px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3a2800;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 4px 14px rgba(245, 200, 60, .45);
  display: inline-block;
  max-width: 260px;
}
#slide1 .doraemon-img { position: absolute; right: -10px; bottom: 50px; width: 340px; z-index: 5; }
#slide1 .top-img { position: absolute; top: 18px; left: 14px; width: 90px; z-index: 5; animation: spinTop 2.5s linear infinite; }

#slide1 .title-area  { opacity: 0; transform: translateY(30px); }
#slide1 .subtitle-pill { opacity: 0; transform: scale(0.3); }
#slide1 .doraemon-img { opacity: 0; transform: translateX(80px); }
#slide1.animate .title-area   { animation: fadeUp 1.2s .5s ease forwards; }
#slide1.animate .subtitle-pill { animation: popIn .8s 1.6s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide1.animate .doraemon-img  { animation: slideInRight 1s .8s ease forwards; }

/* ── Slide 2 — Hacker vs Planilha ───────────────────────── */

#slide2 h1 { font-size: 25px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 22px; line-height: 1.3; position: relative; z-index: 5; }
#slide2 h1 .green { color: #22bb22; font-style: italic; }
#slide2 h1 .yellow-hl { background: #f5e842; padding: 1px 6px; border-radius: 5px; }
#slide2 .panels-row { display: flex; gap: 20px; margin: 16px 36px 0 36px; position: relative; z-index: 5; }
#slide2 .panel-card { flex: 1; }
#slide2 .panel-img-wrap { height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f7fbff; }
#slide2 .panel-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
#slide2 .panel-img-wrap.dark-bg { background: #0a0a14; }
#slide2 .panel-img-wrap.warm-bg { background: #fffbe8; }
#slide2 .panel-desc { padding: 9px 12px; font-size: 12px; color: #445; line-height: 1.5; text-align: center; font-weight: 600; }

#slide2 .line1,
#slide2 .line2,
#slide2 .line3 { overflow: hidden; white-space: nowrap; width: 0; display: inline-block; vertical-align: bottom; opacity: 0; }
#slide2 .panel-card { opacity: 0; transform: translateY(40px); }
#slide2.animate .line1 { opacity: 1; animation: typeIn 1.2s .3s steps(25, end) forwards; }
#slide2.animate .line3 { opacity: 1; animation: typeIn 1.5s 1.8s steps(45, end) forwards; }
#slide2.animate .line2 { opacity: 1; animation: typeIn 1.2s 3.6s steps(25, end) forwards; }
#slide2.animate .panel-card:nth-child(1) { animation: cardUp .8s 5.2s ease forwards; }
#slide2.animate .panel-card:nth-child(2) { animation: cardUp .8s 5.6s ease forwards; }

/* Glitch effect */
#slide2 .glitch-wrap { position: relative; overflow: hidden; }
#slide2 .glitch-wrap img { filter: sepia(1) hue-rotate(90deg) saturate(5) brightness(1.1); }

#slide2 .glitch-text { position: relative; display: inline-block; color: #22bb22; }
#slide2 .glitch-text::before,
#slide2 .glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-weight: inherit;
}
#slide2 .glitch-text::before { color: #00ff41; animation: glitchText1 2.5s infinite linear; }
#slide2 .glitch-text::after  { color: #0abf30; animation: glitchText2 3s infinite linear; }

@keyframes glitchText1 {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0) }
  10%  { clip-path: inset(20% 0 50% 0); transform: translate(-2px, 1px) }
  20%  { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px) }
  30%  { clip-path: inset(0 0 80% 0);   transform: translate(0) }
  40%  { clip-path: inset(40% 0 30% 0); transform: translate(-3px, 0) }
  50%  { clip-path: inset(0 0 100% 0);  transform: translate(0) }
  60%  { clip-path: inset(70% 0 5% 0);  transform: translate(3px, 1px) }
  70%  { clip-path: inset(0 0 100% 0);  transform: translate(0) }
  80%  { clip-path: inset(10% 0 60% 0); transform: translate(-2px, -1px) }
  90%  { clip-path: inset(0 0 100% 0);  transform: translate(0) }
}

@keyframes glitchText2 {
  0%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0) }
  12%  { clip-path: inset(30% 0 40% 0); transform: translate(3px, 0) }
  25%  { clip-path: inset(0 0 100% 0);  transform: translate(0) }
  37%  { clip-path: inset(50% 0 20% 0); transform: translate(-2px, 1px) }
  50%  { clip-path: inset(100% 0 0 0);  transform: translate(0) }
  62%  { clip-path: inset(15% 0 60% 0); transform: translate(2px, -1px) }
  75%  { clip-path: inset(100% 0 0 0);  transform: translate(0) }
  87%  { clip-path: inset(65% 0 10% 0); transform: translate(-3px, 0) }
}

#slide2 .glitch-wrap::before,
#slide2 .glitch-wrap::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit;
  opacity: .6;
  mix-blend-mode: screen;
  pointer-events: none;
}
#slide2 .glitch-wrap::before { animation: glitch1 2s infinite linear alternate; }
#slide2 .glitch-wrap::after  { animation: glitch2 3s infinite linear alternate; }

@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 95% 0);  transform: translate(0) }
  10%  { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 1px) }
  20%  { clip-path: inset(50% 0 20% 0); transform: translate(3px, -1px) }
  30%  { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 2px) }
  40%  { clip-path: inset(80% 0 5% 0);  transform: translate(2px, 0) }
  50%  { clip-path: inset(0 0 90% 0);   transform: translate(0) }
  60%  { clip-path: inset(40% 0 30% 0); transform: translate(-4px, 1px) }
  70%  { clip-path: inset(70% 0 10% 0); transform: translate(3px, -2px) }
  80%  { clip-path: inset(15% 0 65% 0); transform: translate(-1px, 0) }
  90%  { clip-path: inset(55% 0 25% 0); transform: translate(2px, 1px) }
}

@keyframes glitch2 {
  0%, 100% { clip-path: inset(90% 0 0 0);  transform: translate(0) }
  15%  { clip-path: inset(30% 0 40% 0); transform: translate(4px, -1px) }
  30%  { clip-path: inset(60% 0 15% 0); transform: translate(-3px, 2px) }
  45%  { clip-path: inset(5% 0 80% 0);  transform: translate(2px, 0) }
  60%  { clip-path: inset(45% 0 35% 0); transform: translate(-2px, -1px) }
  75%  { clip-path: inset(75% 0 10% 0); transform: translate(3px, 1px) }
  90%  { clip-path: inset(20% 0 55% 0); transform: translate(-1px, 0) }
}

#slide2 .glitch-wrap .scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 255, 0, .03) 0px, rgba(0, 255, 0, .03) 1px, transparent 1px, transparent 3px);
}

/* ── Slide 3 — Dados Bagunçados ─────────────────────────── */

#slide3 h1 { font-size: 25px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; position: relative; z-index: 5; }
#slide3 h1 .blue { color: #1a7fd4; }
#slide3 .flow-row { display: flex; align-items: flex-start; gap: 12px; margin: 12px 14px 0 14px; position: relative; z-index: 5; }
#slide3 .flow-item { flex: 1; text-align: center; }
#slide3 .flow-label { display: inline-block; padding: 5px 9px; border-radius: 8px; font-size: 10px; font-weight: 900; color: white; letter-spacing: .4px; margin-bottom: 8px; text-transform: uppercase; }
#slide3 .flow-box { background: transparent; border-radius: 12px; height: 220px; display: flex; align-items: center; justify-content: center; overflow: visible; padding: 0; }
#slide3 .flow-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#slide3 .flow-desc { font-size: 11px; color: #556; margin-top: 7px; line-height: 1.5; font-weight: 600; }
#slide3 .arrow-col { display: flex; align-items: center; padding-top: 46px; flex-shrink: 0; }
#slide3 .doraemon-det { position: absolute; right: 6px; bottom: 55px; width: 180px; z-index: 5; }

#slide3 h1 { opacity: 0; transform: translateY(20px); }
#slide3 .flow-item { opacity: 0; transform: translateY(30px); }
#slide3 .arrow-col { opacity: 0; transform: translateY(30px); }
#slide3 .doraemon-det { opacity: 0; transform: translateX(60px); }
#slide3.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide3.animate .flow-row > :nth-child(1) { animation: fadeUp .8s .8s ease forwards; }
#slide3.animate .flow-row > :nth-child(2) { animation: fadeUp .6s 1.1s ease forwards; }
#slide3.animate .flow-row > :nth-child(3) { animation: fadeUp .8s 1.2s ease forwards; }
#slide3.animate .flow-row > :nth-child(4) { animation: fadeUp .6s 1.5s ease forwards; }
#slide3.animate .flow-row > :nth-child(5) { animation: fadeUp .8s 1.6s ease forwards; }
#slide3.animate .doraemon-det { animation: slideInRight .8s 1s ease forwards; }

/* ── Slide 4 — Automação ────────────────────────────────── */

#slide4 h1 { font-size: 25px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 22px; position: relative; z-index: 5; }
#slide4 h1 .blue { color: #1a7fd4; }
#slide4 .panels-row { display: flex; gap: 18px; margin: 14px 28px 0 100px; position: relative; z-index: 5; }
#slide4 .panel-card { flex: 1; }
#slide4 .panel-tag { display: inline-block; padding: 5px 18px; border-radius: 8px; font-size: 11px; font-weight: 900; color: white; margin-bottom: 8px; letter-spacing: .5px; text-transform: uppercase; }
#slide4 .pt-blue { background: #1a7fd4; }
#slide4 .pt-green { background: #22aa22; }
#slide4 .panel-img-wrap { height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f7fbff; }
#slide4 .panel-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
#slide4 .panel-img-wrap.warm-bg { background: #fffbe6; }
#slide4 .panel-desc { padding: 9px 12px; font-size: 12px; color: #445; line-height: 1.5; text-align: center; font-weight: 600; }
#slide4 .doraemon-left { position: absolute; left: 4px; bottom: 60px; width: 130px; z-index: 5; }

#slide4 h1 { opacity: 0; transform: translateY(20px); }
#slide4 .panels-row > div { opacity: 0; transform: translateY(30px); }
#slide4 .doraemon-left { opacity: 0; transform: translateX(-60px); }
#slide4.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide4.animate .panels-row > div:nth-child(1) { animation: fadeUp .8s .8s ease forwards; }
#slide4.animate .panels-row > div:nth-child(2) { animation: fadeUp .8s 1.3s ease forwards; }
#slide4.animate .doraemon-left { animation: slideInLeft .8s .6s ease forwards; }

/* ── Slide 5 — Caos em Gráfico ──────────────────────────── */

#slide5 h1 { font-size: 25px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; position: relative; z-index: 5; }
#slide5 h1 .blue { color: #1a7fd4; }
#slide5 .panels-row { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0 180px; position: relative; z-index: 5; }
#slide5 .panel-tag { display: inline-block; padding: 5px 18px; border-radius: 8px; font-size: 11px; font-weight: 900; color: white; margin-bottom: 8px; letter-spacing: .5px; text-transform: uppercase; }
#slide5 .pt-blue { background: #1a7fd4; }
#slide5 .pt-green { background: #22aa22; }
#slide5 .arrow-col { display: flex; align-items: center; align-self: center; flex-shrink: 0; }
#slide5 .doraemon-left { position: absolute; left: 4px; bottom: 55px; width: 160px; z-index: 5; }
#slide5 .caption { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 700; color: #334; z-index: 5; padding: 0 20px; }
#slide5 .pimg-card { background: transparent; border-radius: 13px; overflow: visible; }
#slide5 .pimg-inner { height: 280px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; }
#slide5 .pimg-inner img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

#slide5 h1 { opacity: 0; transform: translateY(-40px) rotate(-3deg); }
#slide5 .panels-row > div:nth-child(1) { opacity: 0; transform: translateX(-100px) rotate(-12deg) scale(.7); }
#slide5 .panels-row > div.arrow-col { opacity: 0; transform: scale(0) rotate(360deg); }
#slide5 .panels-row > div:nth-child(3) { opacity: 0; transform: translateX(100px) rotate(10deg) scale(.7); }
#slide5 .doraemon-left { opacity: 0; transform: translateY(80px) rotate(-20deg) scale(.5); }
#slide5 .caption { opacity: 0; transform: translateY(30px) scale(.8); }
#slide5.animate h1 { animation: chaos5Title 1s .2s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide5.animate .panels-row > div:nth-child(1) { animation: chaos5Left .9s .6s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide5.animate .panels-row > div.arrow-col { animation: chaos5Spin .7s 1.0s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide5.animate .panels-row > div:nth-child(3) { animation: chaos5Right .9s 1.3s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide5.animate .doraemon-left { animation: chaos5Dora 1s .3s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide5.animate .caption { animation: chaos5Cap .8s 1.8s cubic-bezier(.175, .885, .32, 1.275) forwards; }

@keyframes chaos5Title {
  0%   { opacity: 0; transform: translateY(-40px) rotate(-3deg) }
  70%  { opacity: 1; transform: translateY(5px) rotate(1deg) }
  100% { opacity: 1; transform: translateY(0) rotate(0) }
}
@keyframes chaos5Left {
  0%   { opacity: 0; transform: translateX(-100px) rotate(-12deg) scale(.7) }
  70%  { opacity: 1; transform: translateX(8px) rotate(2deg) scale(1.03) }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1) }
}
@keyframes chaos5Spin {
  0%   { opacity: 0; transform: scale(0) rotate(360deg) }
  60%  { opacity: 1; transform: scale(1.3) rotate(-20deg) }
  100% { opacity: 1; transform: scale(1) rotate(0) }
}
@keyframes chaos5Right {
  0%   { opacity: 0; transform: translateX(100px) rotate(10deg) scale(.7) }
  70%  { opacity: 1; transform: translateX(-8px) rotate(-2deg) scale(1.03) }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1) }
}
@keyframes chaos5Dora {
  0%   { opacity: 0; transform: translateY(80px) rotate(-20deg) scale(.5) }
  60%  { opacity: 1; transform: translateY(-10px) rotate(5deg) scale(1.05) }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1) }
}
@keyframes chaos5Cap {
  0%   { opacity: 0; transform: translateY(30px) scale(.8) }
  70%  { opacity: 1; transform: translateY(-3px) scale(1.02) }
  100% { opacity: 1; transform: translateY(0) scale(1) }
}

/* ── Slide 6 — SoD ──────────────────────────────────────── */

#slide6 h1 { font-size: 24px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; position: relative; z-index: 5; }
#slide6 h1 .blue { color: #1a7fd4; }
#slide6 .content-row { display: flex; gap: 18px; margin: 14px 20px 0 160px; position: relative; z-index: 5; align-items: flex-start; }
#slide6 .sod-box { background: white; border-radius: 12px; padding: 16px; width: 220px; flex-shrink: 0; box-shadow: 0 3px 14px rgba(0, 70, 150, .10); }
#slide6 .sod-title { font-size: 14px; font-weight: 900; color: #1a7fd4; margin-bottom: 6px; }
#slide6 .sod-sub { font-size: 12px; font-weight: 800; color: #333; margin-bottom: 4px; }
#slide6 .sod-desc { font-size: 11.5px; color: #666; line-height: 1.4; }
#slide6 .doraemon-left { position: absolute; left: 4px; bottom: 55px; width: 250px; z-index: 5; }

#slide6 h1 { opacity: 0; transform: translateY(20px); }
#slide6 .content-row { opacity: 0; transform: translateY(30px); }
#slide6 .doraemon-left { opacity: 0; transform: translateX(-60px); }
#slide6.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide6.animate .content-row { animation: fadeUp 1s .8s ease forwards; }
#slide6.animate .doraemon-left { animation: slideInLeft .8s .5s ease forwards; }

/* ── Slide 7 — Segurança da Informação ──────────────────── */

#slide7 h1 { font-size: 24px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; line-height: 1.25; position: relative; z-index: 5; }
#slide7 h1 .blue { color: #1a7fd4; }
#slide7 .content-row { display: flex; gap: 16px; margin: 40px 20px 0 180px; align-items: center; position: relative; z-index: 5; }
#slide7 .doraemon-left { position: absolute; left: 4px; bottom: 55px; width: 200px; z-index: 5; }
#slide7 .caption { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 700; color: #445; z-index: 5; padding: 0 60px; }

#slide7 h1 { opacity: 0; transform: translateY(20px); }
#slide7 .content-row { opacity: 0; transform: translateY(30px); }
#slide7 .doraemon-left { opacity: 0; transform: translateX(-60px); }
#slide7 .caption { opacity: 0; transform: translateY(20px); }
#slide7.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide7.animate .content-row { animation: fadeUp 1s .8s ease forwards; }
#slide7.animate .doraemon-left { animation: slideInLeft .8s .5s ease forwards; }
#slide7.animate .caption { animation: fadeUp .8s 1.3s ease forwards; }

/* ── Slide 8 — "É só um ajustezinho" ────────────────────── */

#slide8 h1 { font-size: 23px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; line-height: 1.25; position: relative; z-index: 5; }
#slide8 h1 .blue { color: #1a7fd4; }
#slide8 .s8-layout { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 14px 60px 0 60px; position: relative; z-index: 5; }
#slide8 .panel-box { background: white; border-radius: 12px; padding: 14px 20px; box-shadow: 0 3px 14px rgba(0, 70, 150, .10); width: 100%; max-width: 520px; }
#slide8 .panel-box-title { font-size: 13px; font-weight: 900; color: #1a7fd4; margin-bottom: 6px; }
#slide8 .panel-box-text { font-size: 12px; color: #444; line-height: 1.8; }
#slide8 .s8-middle { display: flex; align-items: center; justify-content: center; gap: 16px; }
#slide8 .s8-middle img { max-height: 130px; }
#slide8 .dora-corner { position: absolute; right: 8px; bottom: 55px; width: 220px; z-index: 5; }

#slide8 h1 { opacity: 0; transform: translateY(20px); }
#slide8 .s8-layout > * { opacity: 0; transform: translateY(30px); }
#slide8 .dora-corner { opacity: 0; transform: translateX(60px); }
#slide8.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide8.animate .s8-layout > :nth-child(1) { animation: fadeUp .8s .6s ease forwards; }
#slide8.animate .s8-layout > :nth-child(2) { animation: fadeUp .8s 1.0s ease forwards; }
#slide8.animate .s8-layout > :nth-child(3) { animation: fadeUp .8s 1.4s ease forwards; }
#slide8.animate .dora-corner { animation: slideInRight .8s .5s ease forwards; }

/* ── Slide 9 — Projetos ─────────────────────────────────── */

#slide9 h1 { font-size: 25px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; position: relative; z-index: 5; }
#slide9 h1 .blue { color: #1a7fd4; }
#slide9 .grid-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 80px 20px 0 180px; position: relative; z-index: 5; }
#slide9 .proj-card { background: white; border-radius: 10px; padding: 12px 8px; text-align: center; box-shadow: 0 2px 10px rgba(0, 70, 150, .10); }
#slide9 .proj-name { font-size: 12px; font-weight: 800; color: #333; margin-top: 6px; }
#slide9 .doraemon-bag { position: absolute; left: 4px; bottom: 55px; width: 180px; z-index: 5; }
#slide9 .caption { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 700; color: #445; z-index: 5; }

#slide9 h1 { opacity: 0; transform: translateY(20px); }
#slide9 .grid-area { opacity: 0; transform: translateY(30px); }
#slide9 .doraemon-bag { opacity: 0; transform: translateX(-60px); }
#slide9 .caption { opacity: 0; transform: translateY(20px); }
#slide9.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide9.animate .grid-area { animation: fadeUp 1s .8s ease forwards; }
#slide9.animate .doraemon-bag { animation: slideInLeft .8s .5s ease forwards; }
#slide9.animate .caption { animation: fadeUp .8s 1.3s ease forwards; }

/* ── Slide 10 — Resumo ──────────────────────────────────── */

#slide10 h1 { font-size: 22px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 30px; position: relative; z-index: 5; }
#slide10 h1 .blue { color: #1a7fd4; text-decoration: underline wavy #f5c842; text-underline-offset: 4px; }
#slide10 .flow-row { display: flex; align-items: center; gap: 2px; margin: 40px 8px 0 8px; position: relative; z-index: 5; }
#slide10 .flow-step { text-align: center; flex: 1; }
#slide10 .step-box { background: white; border-radius: 10px; padding: 10px 4px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 70, 150, .10); gap: 6px; }
#slide10 .step-label { font-size: 9px; font-weight: 900; color: #445; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
#slide10 .arrow-sm { display: flex; align-items: center; flex-shrink: 0; }
#slide10 .speech-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#slide10 .speech-bubble { background: white; border-radius: 12px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: #334; line-height: 1.5; box-shadow: 0 2px 10px rgba(0, 70, 150, .10); position: relative; white-space: nowrap; }
#slide10 .speech-bubble::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left-color: white; }
#slide10 .doraemon-right { width: 85px; flex-shrink: 0; }

#slide10 h1 { opacity: 0; transform: translateY(20px); }
#slide10 .flow-row { opacity: 0; transform: translateY(30px); }
#slide10.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide10.animate .flow-row { animation: fadeUp 1s .8s ease forwards; }

/* ── Slide 11 — Voluntariado ────────────────────────────── */

#slide11 h1 { font-size: 24px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 18px; position: relative; z-index: 5; }
#slide11 h1 .blue { color: #1a7fd4; }
#slide11 .vol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 30px 0 30px; position: relative; z-index: 5; }
#slide11 .vol-card { background: white; border-radius: 12px; padding: 14px 10px; text-align: center; box-shadow: 0 3px 14px rgba(0, 70, 150, .10); }
#slide11 .vol-icon { font-size: 28px; margin-bottom: 6px; }
#slide11 .vol-title { font-size: 12px; font-weight: 900; color: #1a7fd4; margin-bottom: 4px; }
#slide11 .vol-desc { font-size: 10.5px; color: #555; line-height: 1.4; }
#slide11 .caption { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 700; color: #445; z-index: 5; padding: 0 40px; }

#slide11 h1 { opacity: 0; transform: translateY(20px); }
#slide11 .vol-grid { opacity: 0; transform: translateY(30px); }
#slide11 .caption { opacity: 0; transform: translateY(20px); }
#slide11.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide11.animate .vol-grid { animation: fadeUp 1s .8s ease forwards; }
#slide11.animate .caption { animation: fadeUp .8s 1.3s ease forwards; }

/* ── Slide 12 — Perguntas ───────────────────────────────── */

#slide12 h1 { font-size: 32px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 60px; position: relative; z-index: 5; }
#slide12 h1 .blue { color: #1a7fd4; }
#slide12 .q-sub { font-size: 16px; color: #556; font-weight: 600; text-align: center; margin-top: 16px; position: relative; z-index: 5; }
#slide12 .q-emoji { font-size: 80px; text-align: center; margin-top: 20px; position: relative; z-index: 5; }

#slide12 h1 { opacity: 0; transform: translateY(20px) scale(.9); }
#slide12 .q-sub { opacity: 0; transform: translateY(20px); }
#slide12 .q-emoji { opacity: 0; transform: scale(0) rotate(20deg); }
#slide12.animate h1 { animation: fadeUp 1s .3s cubic-bezier(.175, .885, .32, 1.275) forwards; }
#slide12.animate .q-sub { animation: fadeUp .8s .8s ease forwards; }
#slide12.animate .q-emoji { animation: spinIn .8s 1.2s cubic-bezier(.175, .885, .32, 1.275) forwards; }

/* ── Slide 13 — Obrigada ────────────────────────────────── */

#slide13 .thanks-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 30px; z-index: 5; padding: 0 50px; }
#slide13 .thanks-text { text-align: left; }
#slide13 h1 { font-size: 48px; font-weight: 900; color: #1a2a4a; line-height: 1.1; }
#slide13 h1 .heart { color: #e8365d; }
#slide13 .thanks-sub { font-size: 16px; color: #556; font-weight: 600; margin-top: 14px; line-height: 1.5; }
#slide13 .thanks-sub .emoji { font-size: 18px; }
#slide13 .dora-fly { width: 200px; flex-shrink: 0; }

#slide13 .thanks-content { opacity: 0; }
#slide13.animate .thanks-content { animation: fadeUp 1.2s .3s ease forwards; }

/* ── Slide 14 — Dinâmica ────────────────────────────────── */

#slide14 h1 { font-size: 30px; font-weight: 900; color: #1a2a4a; text-align: center; padding-top: 50px; position: relative; z-index: 5; }
#slide14 h1 .blue { color: #1a7fd4; }
#slide14 .dyn-sub { font-size: 16px; color: #556; font-weight: 600; text-align: center; margin-top: 16px; position: relative; z-index: 5; }
#slide14 .qr-area { display: flex; align-items: center; justify-content: center; margin-top: 30px; position: relative; z-index: 5; }
#slide14 .qr-box { width: 200px; height: 200px; border: 3px dashed #1a7fd4; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #889; font-weight: 600; background: rgba(255, 255, 255, .5); }

#slide14 h1 { opacity: 0; transform: translateY(20px); }
#slide14 .dyn-sub { opacity: 0; transform: translateY(20px); }
#slide14 .qr-area { opacity: 0; transform: translateY(30px); }
#slide14.animate h1 { animation: fadeUp 1s .3s ease forwards; }
#slide14.animate .dyn-sub { animation: fadeUp .8s .8s ease forwards; }
#slide14.animate .qr-area { animation: fadeUp .8s 1.2s ease forwards; }