/* ==========================================================
   styles.css — Sales Page Template  v1A
   Mobile-first · Conversion-focused · Sem framework
   ========================================================== */

/* ── CSS Custom Properties (preenchidas pelo engine) ────── */
:root {
  --sp-primary:    #0F4C68;
  --sp-secondary:  #3FABE1;
  --sp-accent:     #E0AB3F;
  --sp-cta:        #0F8F4E;
  --sp-bg:         #F7FBFD;
  --sp-card:       #FFFFFF;
  --sp-text:       #10232F;
  --sp-muted:      #5F7480;

  --sp-radius:     12px;
  --sp-radius-lg:  20px;
  --sp-shadow:     0 2px 16px rgba(15, 76, 104, 0.09);
  --sp-shadow-lg:  0 8px 40px rgba(15, 76, 104, 0.14);
  --sp-max:        800px;
  --sp-max-wide:   1080px;
  --sp-ease:       0.2s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--sp-bg);
  color: var(--sp-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ── Layout ─────────────────────────────────────────────── */
.sp-wrap {
  width: 100%;
  max-width: var(--sp-max);
  margin: 0 auto;
  padding: 0 20px;
}
.sp-wrap--wide   { max-width: var(--sp-max-wide); }
.sp-wrap--center { text-align: center; }

/* ── Typography ─────────────────────────────────────────── */
.sp-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-secondary);
  margin-bottom: 10px;
}
.sp-eyebrow--dim  { color: rgba(255,255,255,0.55); }
.sp-eyebrow--gold { color: var(--sp-accent); }

.sp-h1 {
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--sp-text);
  margin-bottom: 18px;
}
.sp-h2 {
  font-size: clamp(1.35rem, 4vw, 1.95rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--sp-text);
  margin-bottom: 14px;
}
.sp-h2--light, .sp-h1--light { color: #fff; }

.sp-p {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--sp-muted);
  margin-bottom: 14px;
}
.sp-p--light { color: rgba(255,255,255,0.78); }
.sp-p:last-child { margin-bottom: 0; }

/* ── Buttons ────────────────────────────────────────────── */
@keyframes sp-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(1.12); opacity: 0; }
}

.sp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 28px;
  border-radius: var(--sp-radius);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  cursor: pointer;
  border: none;
  transition: filter var(--sp-ease), transform var(--sp-ease);
  text-align: center;
  line-height: 1.2;
}
.sp-btn:hover  { filter: brightness(1.07); transform: translateY(-2px); }
.sp-btn:active { transform: translateY(0); }

.sp-btn--cta {
  background: var(--sp-cta);
  color: #fff;
  font-size: 1.05rem;
  padding: 18px 28px;
  border-radius: var(--sp-radius);
  position: relative;
  isolation: isolate;
}
.sp-btn--cta::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(15,143,78,0.48);
  border-radius: inherit;
  animation: sp-pulse 2.6s infinite;
  pointer-events: none;
}
.sp-btn--outline {
  background: transparent;
  color: var(--sp-primary);
  border: 2px solid var(--sp-primary);
}
.sp-btn--header {
  background: var(--sp-cta);
  color: #fff;
  width: auto;
  padding: 9px 20px;
  font-size: 0.82rem;
  animation: none;
  border-radius: var(--sp-radius);
}

/* ── Section rhythm ─────────────────────────────────────── */
.sp-section         { padding: 60px 0; }
.sp-section--tight  { padding: 48px 0; }

/* Named backgrounds */
.sp-section--hero {
  background: #082233;
  position: relative;
  overflow: hidden;
  padding: 44px 0 48px;
  border-bottom: none;
}
.sp-section--white  { background: #fff; }
.sp-section--light  { background: var(--sp-bg); }
.sp-section--accent { background: #FFF9EF; }
.sp-section--green  { background: #F0FBF5; }
.sp-section--cert   { background: linear-gradient(135deg, #EBF7F0 0%, #F0FBF5 100%); }
.sp-section--dark   { background: var(--sp-primary); }
.sp-section--app    {
  background: linear-gradient(160deg, #082233 0%, #0a3347 60%, var(--sp-primary) 100%);
  position: relative;
  overflow: hidden;
}
.sp-section--app::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(63,171,225,0.06);
  pointer-events: none;
}
.sp-section--bonus  {
  background: linear-gradient(150deg, #1a3a20 0%, #0d4a1e 100%);
  position: relative;
  overflow: hidden;
}
.sp-section--bonus::before {
  content: '';
  position: absolute;
  bottom: -30px; left: -30px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(224,171,63,0.06);
  pointer-events: none;
}
.sp-section--offer  {
  background: linear-gradient(150deg, #081f2c 0%, #0F4C68 100%);
  position: relative;
  overflow: hidden;
}
.sp-section--offer::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(224,171,63,0.05);
  transform: translate(30%, -30%);
  pointer-events: none;
}

/* ── Image placeholder ──────────────────────────────────── */
.sp-placeholder {
  background: linear-gradient(135deg, #deeef8 0%, #c8e3f2 100%);
  border-radius: var(--sp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--sp-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  padding: 20px;
}

/* ==========================================================
   1. HEADER
   ========================================================== */
.sp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,76,104,0.10);
  box-shadow: 0 2px 12px rgba(15,76,104,0.07);
}
.sp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 20px;
  max-width: var(--sp-max-wide);
  margin: 0 auto;
}
.sp-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-header__badge {
  width: 34px; height: 34px;
  background: var(--sp-primary);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sp-header__logo-img {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
}
.sp-header__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sp-text);
}

/* ==========================================================
   2. HERO — imagem integrada ao fundo
   ========================================================== */

/* Imagem decorativa: mobile = bloco abaixo do texto */
.sp-hero__visual {
  position: relative;
  width: 100%;
  height: 160px;
  margin-top: 20px;
  overflow: hidden;
}
.sp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Fade de transição sobre a imagem */
.sp-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #082233 0%,
    rgba(8,34,51,0.5) 30%,
    transparent 100%
  );
  pointer-events: none;
}

/* Conteúdo textual */
.sp-hero__content {
  position: relative;
  z-index: 2;
}

/* Texto claro sobre fundo escuro */
.sp-section--hero .sp-eyebrow    { color: var(--sp-accent); }
.sp-section--hero .sp-h1         { color: #fff; }
.sp-section--hero .sp-p          { color: rgba(255,255,255,0.74); }
.sp-section--hero .sp-hero__microcopy { color: rgba(255,255,255,0.38); text-align: center; }
.sp-section--hero .sp-btn--outline {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.28);
}
.sp-section--hero .sp-btn--outline:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.60);
  filter: none;
}

.sp-hero__desc  { margin-bottom: 22px; }
.sp-hero__bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.sp-hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
}
.sp-check-circle {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--sp-cta);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  margin-top: 1px;
}
.sp-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.sp-hero__microcopy {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.38);
  text-align: center;
  margin-bottom: 0;
}

/* ==========================================================
   3. VIDEO INTRO
   ========================================================== */
.sp-video {
  position: relative;
  background: var(--sp-primary);
  border-radius: var(--sp-radius-lg);
  aspect-ratio: 16 / 9;
  max-width: 640px;
  margin: 24px auto 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.sp-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.sp-video__play {
  position: relative; z-index: 2;
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--sp-ease);
}
.sp-video:hover .sp-video__play { background: rgba(255,255,255,0.28); }
.sp-video__play svg { margin-left: 4px; }
.sp-video__caption {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.74rem; color: rgba(255,255,255,0.65); white-space: nowrap;
}

/* Modo iframe: remove cursor pointer, iframe preenche o container */
.sp-video--iframe { cursor: default; }
.sp-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: var(--sp-radius-lg);
}

/* ── Video Intro — play card sob demanda ─────────────────────────────────── */
/* Estrutura: button.sp-vi__play-card > span.sp-vi__inner > img + span.sp-vi__overlay + span.sp-vi__label */
/* padding-top:56.25% no .sp-vi__inner garante 16:9 em todos os browsers/mobile, sem depender de aspect-ratio em <button> */
.sp-vi__play-card {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 24px auto 36px;
  border: none;
  padding: 0;
  background: var(--sp-primary);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
  box-shadow: var(--sp-shadow);
}
/* Wrapper que cria a proporção 16:9 */
.sp-vi__inner {
  display: block;
  position: relative;
  padding-top: 56.25%; /* 9 / 16 = 56.25% */
}
/* Thumbnail */
.sp-vi__inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  display: block;
  transition: opacity var(--sp-ease);
}
/* Overlay com o botão play centralizado */
.sp-vi__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Círculo do play */
.sp-vi__play-btn {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sp-ease), transform var(--sp-ease);
  flex-shrink: 0;
}
.sp-vi__play-btn svg { margin-left: 4px; }
/* Legenda discreta na parte inferior */
.sp-vi__label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.74rem;
  color: rgba(255,255,255,0.68);
  white-space: nowrap;
  letter-spacing: 0.01em;
  pointer-events: none;
}
/* Hover e focus */
.sp-vi__play-card:hover .sp-vi__inner img,
.sp-vi__play-card:focus-visible .sp-vi__inner img { opacity: 0.86; }
.sp-vi__play-card:hover .sp-vi__play-btn { background: rgba(255,255,255,0.30); transform: scale(1.08); }
.sp-vi__play-card:focus-visible { outline: 3px solid var(--sp-secondary); outline-offset: 3px; }

.sp-vi-pillars { display: grid; gap: 14px; margin-bottom: 28px; text-align: left; }
.sp-vi-pillar {
  background: var(--sp-card); border-radius: var(--sp-radius);
  padding: 18px 20px; border-left: 4px solid var(--sp-secondary);
  box-shadow: var(--sp-shadow);
}
.sp-vi-pillar__title { font-size: 0.9rem; font-weight: 700; color: var(--sp-primary); margin-bottom: 5px; }
.sp-vi-pillar__desc  { font-size: 0.85rem; color: var(--sp-muted); line-height: 1.55; }

/* ==========================================================
   3b. VIDEO TESTIMONIALS
   ========================================================== */

/* Vídeo principal — embed direto */
.sp-vtesti__featured {
  max-width: 640px;
  margin: 0 auto 40px;
}
.sp-vtesti__featured .sp-video {
  max-width: 100%;
  margin: 0;
}
.sp-vtesti__featured-card {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--sp-radius-lg); overflow: hidden; background: var(--sp-primary); cursor: pointer; padding: 0;
}
.sp-vtesti__featured-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.2s ease; }
.sp-vtesti__featured-card:hover img, .sp-vtesti__featured-card:focus-visible img { opacity: 0.6; }
.sp-vtesti__featured-card:focus-visible { outline: 3px solid var(--sp-secondary); outline-offset: 3px; }

/* Caption abaixo do vídeo principal */
.sp-vtesti__caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--sp-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* Grid de cards secundários — 2 colunas em qualquer viewport */
.sp-vtesti__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .sp-vtesti__grid { gap: 20px; max-width: 100%; }
}

/* Card secundário clicável */
.sp-vtesti__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--sp-card);
  border: 1.5px solid rgba(63, 171, 225, 0.20);
  border-radius: var(--sp-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sp-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-align: left;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.sp-vtesti__card:hover,
.sp-vtesti__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-lg);
}
.sp-vtesti__card:focus-visible {
  outline: 2px solid var(--sp-secondary);
  outline-offset: 2px;
}

/* Área da thumbnail */
.sp-vtesti__card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sp-primary);
  overflow: hidden;
}
.sp-vtesti__card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.80;
  transition: opacity 0.2s ease;
}
.sp-vtesti__card:hover .sp-vtesti__card-thumb img { opacity: 0.60; }

/* Ícone play sobreposto */
.sp-vtesti__card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-vtesti__card-play-btn {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.sp-vtesti__card:hover .sp-vtesti__card-play-btn {
  background: rgba(255, 255, 255, 0.30);
  transform: scale(1.10);
}

/* Área de texto do card */
.sp-vtesti__card-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sp-vtesti__card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sp-text);
  line-height: 1.35;
  display: block;
}
.sp-vtesti__card-caption {
  font-size: 0.72rem;
  color: var(--sp-muted);
  line-height: 1.4;
  display: block;
}

/* ── Modal lightbox ── */
.sp-vtesti-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.sp-vtesti-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sp-vtesti-modal__box {
  position: relative;
  width: 100%;
  max-width: 800px;
}
.sp-vtesti-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.40);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  padding: 0;
  font-family: inherit;
}
.sp-vtesti-modal__close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.sp-vtesti-modal__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.70);
  outline-offset: 3px;
}
.sp-vtesti-modal__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.70);
}
.sp-vtesti-modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ==========================================================
   3c. PRINT TESTIMONIALS
   ========================================================== */
.sp-section--ptesti { background: var(--sp-bg); }

.sp-ptesti__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 560px) {
  .sp-ptesti__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .sp-ptesti__grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
}

.sp-ptesti__card {
  background: var(--sp-card);
  border: 1px solid rgba(15, 76, 104, 0.10);
  border-radius: var(--sp-radius);
  overflow: hidden;
  box-shadow: var(--sp-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sp-ptesti__card:hover {
  box-shadow: var(--sp-shadow-lg);
  transform: translateY(-2px);
}

/* Imagem do print: largura total, altura natural, sem corte */
.sp-ptesti__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Label temático discreto abaixo do print */
.sp-ptesti__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--sp-muted);
  padding: 7px 12px 9px;
  border-top: 1px solid rgba(15, 76, 104, 0.07);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Fallback quando imagem não existe */
.sp-ptesti__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: rgba(15, 76, 104, 0.05);
  color: var(--sp-muted);
  font-size: 0.80rem;
  padding: 20px;
  text-align: center;
}

/* ==========================================================
   4. PAIN
   ========================================================== */
.sp-pain__highlight {
  background: rgba(255,255,255,0.09);
  border-left: 4px solid var(--sp-accent);
  border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
  padding: 18px 22px; margin: 24px 0;
  font-size: 1.05rem; font-weight: 600; color: #fff; font-style: italic;
}
.sp-pain__list { display: flex; flex-direction: column; gap: 12px; }
.sp-pain__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.93rem; color: rgba(255,255,255,0.84);
}
.sp-dot {
  flex-shrink: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--sp-accent); margin-top: 7px;
}

/* ==========================================================
   5. SHIFT
   ========================================================== */
.sp-shift__quote {
  position: relative;
  background: var(--sp-card); border-radius: var(--sp-radius-lg);
  padding: 36px 24px 24px; margin: 28px 0;
  box-shadow: var(--sp-shadow-lg);
}
.sp-shift__quote::before {
  content: '\201C';
  position: absolute; top: -4px; left: 20px;
  font-size: 5.5rem; color: var(--sp-secondary); line-height: 1;
  font-family: Georgia, serif; opacity: 0.55;
}
.sp-shift__quote-text {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--sp-text); font-style: italic; font-weight: 500;
}
.sp-shift__closing {
  text-align: center; font-size: 0.98rem; font-weight: 600;
  color: var(--sp-primary); padding-top: 8px;
}

/* ==========================================================
   6. PRODUCT INTRO
   ========================================================== */
.sp-product-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px;
}
.sp-product-card {
  background: var(--sp-card); border-radius: var(--sp-radius);
  padding: 18px 16px; border-top: 3px solid var(--sp-secondary);
  box-shadow: var(--sp-shadow);
}
.sp-product-card__label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--sp-secondary); margin-bottom: 6px;
}
.sp-product-card__text { font-size: 0.88rem; color: var(--sp-text); line-height: 1.55; }

/* ==========================================================
   7. APP EXPERIENCE
   ========================================================== */
.sp-app__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.sp-app__badge {
  display: inline-block;
  background: var(--sp-accent); color: #0a2c1a;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; border-radius: 4px; padding: 3px 8px;
}
.sp-app__features-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 12px;
}
.sp-app__features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.sp-app__feature {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.92rem; color: rgba(255,255,255,0.88);
}
.sp-check-gold {
  flex-shrink: 0; width: 20px; height: 20px;
  background: var(--sp-accent); color: #0a2c1a;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900; margin-top: 1px;
}
.sp-app__note {
  font-size: 0.77rem; color: rgba(255,255,255,0.48); margin-bottom: 24px; line-height: 1.55;
}
.sp-app__img-wrap { margin-bottom: 24px; }
.sp-app__img { border-radius: var(--sp-radius-lg); width: 100%; }

/* ── App Viewer — tabs laterais (desktop) / chips (mobile) ── */

/* Radios ocultos mas funcionais */
.sp-app__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* Container externo */
.sp-app__viewer {
  margin: 32px 0 28px;
  position: relative;
}

/* Layout: coluna no mobile (tabs acima, viewer abaixo) */
.sp-app__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Frame do viewer — moldura estilo celular */
.sp-app__screens {
  max-width: 260px;
  width: 100%;
  flex-shrink: 0;
  background: #13131f;
  border-radius: 36px;
  padding: 10px;
  border: 3px solid #22223a;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.60),
    0 6px 20px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.sp-app__screens::before,
.sp-app__screens::after { display: none; content: none; }

/* Área de tela — proporção vertical de smartphone */
.sp-app__screen-area {
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 9 / 16;
}

/* Telas: ocultas por padrão */
.sp-app__screen { display: none; }

/* Exibe a tela ativa via sibling selector */
#sp-app-s0:checked ~ .sp-app__layout .sp-app__screen--0,
#sp-app-s1:checked ~ .sp-app__layout .sp-app__screen--1,
#sp-app-s2:checked ~ .sp-app__layout .sp-app__screen--2,
#sp-app-s3:checked ~ .sp-app__layout .sp-app__screen--3,
#sp-app-s4:checked ~ .sp-app__layout .sp-app__screen--4 { display: block; }

/* Imagem: cobre o espaço, prioriza parte superior */
.sp-app__shot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Tabs — mobile: chips horizontais, quebra de linha permitida */
.sp-app__tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 320px;
  width: 100%;
}

.sp-app__tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.04);
  transition: border-color var(--sp-ease), color var(--sp-ease), background var(--sp-ease);
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

.sp-app__tab:hover {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}

/* Tab ativa — chips (mobile): destaque dourado */
#sp-app-s0:checked ~ .sp-app__layout label[for="sp-app-s0"],
#sp-app-s1:checked ~ .sp-app__layout label[for="sp-app-s1"],
#sp-app-s2:checked ~ .sp-app__layout label[for="sp-app-s2"],
#sp-app-s3:checked ~ .sp-app__layout label[for="sp-app-s3"],
#sp-app-s4:checked ~ .sp-app__layout label[for="sp-app-s4"] {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: #0a2c1a;
}

.sp-app__quote {
  background: rgba(255,255,255,0.07); border-left: 3px solid var(--sp-accent);
  border-radius: 0 8px 8px 0; padding: 16px 20px;
  font-size: 0.95rem; color: rgba(255,255,255,0.9); font-style: italic; font-weight: 500;
}

/* ==========================================================
   8. BENEFITS
   ========================================================== */
.sp-benefits { display: grid; gap: 14px; margin-top: 28px; }
.sp-benefit {
  background: var(--sp-card); border-radius: var(--sp-radius);
  padding: 22px 20px; box-shadow: var(--sp-shadow); border-top: 3px solid var(--sp-secondary);
}
.sp-benefit__title { font-size: 0.97rem; font-weight: 700; color: var(--sp-primary); margin-bottom: 6px; }
.sp-benefit__desc  { font-size: 0.87rem; color: var(--sp-muted); line-height: 1.6; }

/* ==========================================================
   9. PILLARS
   ========================================================== */
.sp-pillars-list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.sp-pillar {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px;
  background: var(--sp-card); border-radius: var(--sp-radius-lg);
  padding: 24px 20px; box-shadow: var(--sp-shadow);
}
.sp-pillar__num {
  font-size: 2.2rem; font-weight: 900; color: var(--sp-accent);
  line-height: 1; letter-spacing: -0.03em; padding-top: 2px;
}
.sp-pillar__title  { font-size: 1.05rem; font-weight: 800; color: var(--sp-primary); margin-bottom: 7px; }
.sp-pillar__desc   { font-size: 0.88rem; color: var(--sp-muted); line-height: 1.6; margin-bottom: 10px; }
.sp-pillar__highlight {
  font-size: 0.88rem; font-style: italic; font-weight: 500; color: var(--sp-primary);
  padding: 10px 14px; background: rgba(63,171,225,0.07);
  border-left: 3px solid var(--sp-secondary); border-radius: 0 8px 8px 0;
}

/* ==========================================================
   10. CURRICULUM (NEW)
   ========================================================== */
.sp-curriculum { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

details.sp-curr-module {
  background: var(--sp-card);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  overflow: hidden;
  border-left: 4px solid var(--sp-secondary);
}
details.sp-curr-module[open] { border-left-color: var(--sp-primary); }

details.sp-curr-module > summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
details.sp-curr-module > summary::-webkit-details-marker { display: none; }

.sp-curr-module__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.sp-curr-module__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--sp-secondary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
}
details.sp-curr-module[open] .sp-curr-module__num { background: var(--sp-primary); }

.sp-curr-module__info {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.sp-curr-module__title {
  font-size: 0.9rem; font-weight: 700; color: var(--sp-text); line-height: 1.35;
}
.sp-curr-module__sub {
  font-size: 0.78rem; color: var(--sp-muted); line-height: 1.4;
}
.sp-curr-module__count {
  flex-shrink: 0;
  font-size: 0.72rem; font-weight: 600; color: var(--sp-secondary);
  background: rgba(63,171,225,0.10); border-radius: 20px;
  padding: 3px 10px; white-space: nowrap;
}

.sp-curr-lessons {
  padding: 4px 18px 16px 64px;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid rgba(15,76,104,0.07);
  padding-top: 12px;
}
.sp-curr-lesson {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.85rem; color: var(--sp-muted);
}
.sp-curr-dot {
  flex-shrink: 0; width: 5px; height: 5px;
  border-radius: 50%; background: var(--sp-secondary);
  margin-top: 7px; opacity: 0.7;
}

/* ==========================================================
   11. BONUS (NEW)
   ========================================================== */
.sp-bonus { position: relative; z-index: 1; }
.sp-bonus__header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.sp-bonus__tag {
  display: inline-block;
  background: var(--sp-accent); color: #0a2c1a;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; border-radius: 4px; padding: 3px 8px;
}
.sp-bonus__note {
  font-size: 0.8rem; color: rgba(255,255,255,0.55);
  font-style: italic; margin-bottom: 18px;
}
details.sp-bonus-details {
  background: rgba(255,255,255,0.07);
  border-radius: var(--sp-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
details.sp-bonus-details > summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.9);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  gap: 10px;
}
details.sp-bonus-details > summary::-webkit-details-marker { display: none; }
details.sp-bonus-details > summary::after {
  content: '+';
  flex-shrink: 0; width: 22px; height: 22px;
  background: rgba(255,255,255,0.12); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: rgba(255,255,255,0.8); font-weight: 300; line-height: 1;
  transition: background var(--sp-ease);
}
details.sp-bonus-details[open] > summary::after {
  content: '−'; background: var(--sp-accent); color: #0a2c1a;
}
.sp-bonus-lessons {
  padding: 4px 18px 14px 18px;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.sp-bonus-lesson {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.85rem; color: rgba(255,255,255,0.72);
}

/* ==========================================================
   12. INCLUDED
   ========================================================== */
.sp-included-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.sp-included-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.93rem; font-weight: 500; color: var(--sp-text);
  background: var(--sp-card); border-radius: var(--sp-radius);
  padding: 13px 16px; box-shadow: var(--sp-shadow);
}

/* ==========================================================
   13. CERTIFICATE (NEW)
   ========================================================== */
.sp-cert {
  text-align: center;
  background: var(--sp-card);
  border-radius: var(--sp-radius-lg);
  padding: 36px 28px;
  box-shadow: var(--sp-shadow-lg);
  border: 2px solid rgba(15,143,78,0.18);
  max-width: 560px;
  margin: 0 auto;
}
.sp-cert__icon {
  font-size: 3rem; margin-bottom: 14px; line-height: 1;
}
.sp-cert__note {
  font-size: 0.78rem; color: var(--sp-muted);
  font-style: italic; line-height: 1.6;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(15,76,104,0.08);
}

/* ==========================================================
   14. STUDY EXPERIENCE
   ========================================================== */
.sp-study-items { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.sp-study-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--sp-card); border-radius: var(--sp-radius);
  padding: 18px 16px; box-shadow: var(--sp-shadow);
}
.sp-study-num {
  flex-shrink: 0; width: 34px; height: 34px;
  background: var(--sp-secondary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 800; color: #fff;
}
.sp-study-item__title { font-size: 0.93rem; font-weight: 700; color: var(--sp-primary); margin-bottom: 3px; }
.sp-study-item__desc  { font-size: 0.86rem; color: var(--sp-muted); line-height: 1.55; }
.sp-study-quote {
  background: rgba(63,171,225,0.09);
  border-left: 4px solid var(--sp-secondary);
  border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
  padding: 18px 22px; font-size: 0.97rem; font-style: italic;
  font-weight: 600; color: var(--sp-primary); margin-top: 4px;
}

/* ==========================================================
   15. FIT
   ========================================================== */
.sp-fit-list  { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sp-fit-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.93rem; font-weight: 500; color: #1a4a2e;
  background: #EAF7EF; border-radius: var(--sp-radius);
  padding: 12px 16px; border-left: 3px solid var(--sp-cta);
}

/* ==========================================================
   16. NOT FOR
   ========================================================== */
.sp-notfor-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sp-notfor-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.93rem; font-weight: 500; color: #5a2020;
  background: #FDF3F3; border-radius: var(--sp-radius);
  padding: 12px 16px; border-left: 3px solid #C94040;
}
.sp-notfor-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.5; font-weight: 700; }

/* ==========================================================
   17. AUTHOR (NEW)
   ========================================================== */
.sp-author {
  background: var(--sp-card);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  overflow: hidden;
}
.sp-author__top {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 24px 0;
}
/* O wrapper recebe o clip circular, borda e sombra */
.sp-author__img-wrap {
  flex-shrink: 0;
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sp-secondary);
  box-shadow: 0 4px 18px rgba(15,76,104,0.18);
}
/* A imagem preenche o wrapper circular — a nova foto já é close, sem zoom extra */
.sp-author__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.sp-author__img-ph {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d0e9f5 0%, #bcd9ee 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--sp-muted); text-align: center;
  padding: 8px; border: 3px solid var(--sp-secondary);
}
.sp-author__name {
  font-size: 1.35rem; font-weight: 900;
  color: var(--sp-text); margin-bottom: 3px;
}
.sp-author__sub {
  font-size: 0.82rem; color: var(--sp-secondary); font-weight: 600;
}
.sp-author__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid rgba(15,76,104,0.08);
  border-bottom: 1px solid rgba(15,76,104,0.08);
}
.sp-author__stat {
  text-align: center; padding: 16px 8px;
  border-right: 1px solid rgba(15,76,104,0.08);
}
.sp-author__stat:last-child { border-right: none; }
.sp-author__stat-val {
  font-size: 1.05rem; font-weight: 900;
  color: var(--sp-primary); margin-bottom: 2px;
}
.sp-author__stat-lbl {
  font-size: 0.7rem; color: var(--sp-muted); line-height: 1.35;
}
.sp-author__bio {
  padding: 20px 24px 0;
}
.sp-author__bio .sp-p { margin-bottom: 10px; font-size: 0.92rem; }
.sp-author__creds {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 24px 24px;
}
.sp-author__cred {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.85rem; color: var(--sp-text); font-weight: 500;
}
.sp-check-sm {
  flex-shrink: 0; width: 18px; height: 18px;
  background: var(--sp-cta); color: #fff;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 900; margin-top: 1px;
}

/* ==========================================================
   18. AUTHORITY (filosofia)
   ========================================================== */
.sp-authority__quote {
  position: relative;
  background: rgba(255,255,255,0.08); border-radius: var(--sp-radius-lg);
  padding: 36px 24px 24px; margin: 24px 0; text-align: center;
}
.sp-authority__quote::before {
  content: '\201C';
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 5rem; color: var(--sp-accent); line-height: 1;
  font-family: Georgia, serif; opacity: 0.75;
}
.sp-authority__quote-text {
  font-size: 1.05rem; line-height: 1.65;
  color: rgba(255,255,255,0.92); font-style: italic; font-weight: 600;
}

/* ==========================================================
   19. OFFER
   ========================================================== */
.sp-offer-box {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--sp-radius-lg); padding: 28px 20px; margin-top: 24px;
  position: relative; z-index: 1;
}
.sp-offer-box__label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--sp-accent); margin-bottom: 14px;
}
.sp-offer-included { display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.sp-offer-included__item {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.88rem; color: rgba(255,255,255,0.88);
}
.sp-offer-price {
  background: rgba(255,255,255,0.07); border-radius: var(--sp-radius);
  padding: 22px 20px; text-align: center; margin-bottom: 20px;
}
.sp-offer-price__eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5); margin-bottom: 4px;
}
.sp-offer-price__main { font-size: 1.85rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.sp-offer-price__install { font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.sp-offer-microcopy {
  font-size: 0.75rem; color: rgba(255,255,255,0.42);
  text-align: center; margin-top: 12px; line-height: 1.55;
}

/* ==========================================================
   20. GUARANTEE
   ========================================================== */
.sp-guarantee-inner { max-width: 520px; margin: 0 auto; text-align: center; }
.sp-guarantee-badge {
  width: 76px; height: 76px;
  background: var(--sp-cta); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 18px;
  box-shadow: 0 4px 20px rgba(15,143,78,0.3);
}

/* ==========================================================
   21. FAQ
   ========================================================== */
.sp-faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
details.sp-faq-item {
  background: var(--sp-card); border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow); overflow: hidden;
}
details.sp-faq-item > summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 18px; font-size: 0.93rem; font-weight: 600;
  color: var(--sp-text); cursor: pointer; gap: 12px;
  user-select: none; -webkit-user-select: none;
}
details.sp-faq-item > summary::-webkit-details-marker { display: none; }
details.sp-faq-item > summary::after {
  content: '+';
  flex-shrink: 0; width: 24px; height: 24px;
  background: var(--sp-bg); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 400; color: var(--sp-primary); line-height: 1;
  transition: background var(--sp-ease), color var(--sp-ease);
}
details.sp-faq-item[open] > summary::after {
  content: '−'; background: var(--sp-secondary); color: #fff;
}
.sp-faq-answer {
  padding: 14px 18px 16px; font-size: 0.88rem; color: var(--sp-muted);
  line-height: 1.7; border-top: 1px solid rgba(15,76,104,0.08);
}
.sp-faq-answer p { margin-bottom: 10px; }
.sp-faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================
   22. FINAL CTA
   ========================================================== */
.sp-finalcta { text-align: center; }
.sp-finalcta__title {
  font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 900;
  color: #fff; line-height: 1.2; margin-bottom: 14px;
}
.sp-finalcta__desc {
  font-size: 0.97rem; color: rgba(255,255,255,0.72); line-height: 1.68;
  max-width: 540px; margin: 0 auto 26px;
}
.sp-finalcta__micro {
  font-size: 0.73rem; color: rgba(255,255,255,0.38); margin-top: 12px;
}

/* ==========================================================
   23. FOOTER
   ========================================================== */
.sp-footer {
  background: #071620; padding: 36px 20px; text-align: center;
}
.sp-footer__text       { font-size: 0.85rem; color: rgba(255,255,255,0.58); font-weight: 600; margin-bottom: 6px; }
.sp-footer__secondary  { font-size: 0.78rem; color: rgba(255,255,255,0.42); line-height: 1.55; max-width: 560px; margin: 0 auto 10px; }
.sp-footer__disclaimer { font-size: 0.72rem; color: rgba(255,255,255,0.25); line-height: 1.65; max-width: 560px; margin: 0 auto; }

/* ==========================================================
   24. PROMO BAR (barra promocional)
   ========================================================== */
.sp-promobar {
  background: linear-gradient(135deg, #0a3347 0%, var(--sp-primary) 100%);
  padding: 10px 16px;
}
.sp-promobar__inner {
  max-width: var(--sp-max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.sp-promobar__text { display: flex; flex-direction: column; gap: 2px; }
.sp-promobar__main {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--sp-accent); text-transform: uppercase;
}
.sp-promobar__sub { font-size: 0.78rem; color: rgba(255,255,255,0.84); line-height: 1.4; }
.sp-promobar__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sp-cta); color: #fff;
  font-size: 0.78rem; font-weight: 700;
  padding: 8px 18px; border-radius: 20px; white-space: nowrap;
  transition: filter var(--sp-ease), transform var(--sp-ease);
  flex-shrink: 0;
}
.sp-promobar__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ==========================================================
   25. HERO — extras de promoção
   ========================================================== */
.sp-hero__badge {
  display: inline-block;
  background: var(--sp-accent); color: #0a2c1a;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 20px; padding: 5px 14px; margin-bottom: 12px;
}
.sp-hero__priceline {
  font-size: 0.98rem; font-weight: 700; color: #fff; margin-bottom: 16px;
}
.sp-hero__priceline s { color: rgba(255,255,255,0.5); font-weight: 500; }
.sp-hero__priceline strong { color: var(--sp-accent); }
.sp-hero__smallline {
  font-size: 0.72rem; color: rgba(255,255,255,0.34); text-align: center; margin-top: 8px; margin-bottom: 0;
}

/* ==========================================================
   26. FAIXA DE AUTORIDADE (authority strip)
   ========================================================== */
.sp-authoritystrip { background: var(--sp-card); border-bottom: 1px solid rgba(15,76,104,0.08); }
.sp-authoritystrip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  padding: 22px 0;
  text-align: center;
}
.sp-authoritystrip__value {
  font-size: 1.15rem; font-weight: 900; color: var(--sp-primary); line-height: 1.15;
}
.sp-authoritystrip__label {
  font-size: 0.7rem; color: var(--sp-muted); line-height: 1.35; margin-top: 2px;
}

/* ==========================================================
   27. CAMINHO COMPLETO (journey) — NOVA SEÇÃO
   ========================================================== */
.sp-journey__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px;
}
.sp-journey__step {
  background: var(--sp-card); border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow); padding: 22px 20px;
  border-top: 3px solid var(--sp-secondary);
}
.sp-journey__num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sp-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; margin-bottom: 12px;
}
.sp-journey__title { font-size: 0.98rem; font-weight: 800; color: var(--sp-primary); margin-bottom: 6px; }
.sp-journey__desc  { font-size: 0.87rem; color: var(--sp-muted); line-height: 1.6; }
.sp-journey__connector {
  width: 2px; height: 20px; background: rgba(63,171,225,0.30);
  margin: 0 auto;
}
.sp-journey__closing {
  text-align: center; font-size: 0.97rem; font-weight: 600; font-style: italic;
  color: var(--sp-primary); margin-top: 28px;
}

/* ==========================================================
   28. BLOCO DE URGÊNCIA + COUNTDOWN
   ========================================================== */
.sp-urgency__counter { margin-top: 24px; }
.sp-urgency__counter-label {
  display: block; font-size: 0.82rem; font-weight: 700; color: var(--sp-primary);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px;
}
.sp-countdown {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.sp-countdown__unit {
  background: var(--sp-card); border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow); padding: 12px 14px; min-width: 66px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sp-countdown__value {
  font-size: 1.5rem; font-weight: 900; color: var(--sp-primary); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sp-countdown__label {
  font-size: 0.64rem; color: var(--sp-muted); text-transform: uppercase; letter-spacing: 0.06em;
}

/* ==========================================================
   29. OFERTA — cards + preço promocional
   ========================================================== */
.sp-offer-intro-title {
  font-size: 1.05rem; font-weight: 800; color: #fff;
  text-align: center; margin: 24px 0 16px;
}
.sp-offer-cards {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px;
  position: relative; z-index: 1;
}
.sp-offer-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-top: 3px solid var(--sp-accent);
}
.sp-offer-card .sp-product-card__label { color: var(--sp-accent); }
.sp-offer-card .sp-product-card__text  { color: rgba(255,255,255,0.82); }
.sp-offer-price__badge {
  display: inline-block; background: var(--sp-accent); color: #0a2c1a;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 20px; padding: 4px 12px; margin-bottom: 10px;
}
.sp-offer-price__old {
  font-size: 1rem; color: rgba(255,255,255,0.5); text-decoration: line-through; margin-bottom: 2px;
}
.sp-offer-microcopy--promo { color: rgba(255,255,255,0.68); font-weight: 500; }
.sp-offer-infoline {
  font-size: 0.76rem; color: rgba(255,255,255,0.5);
  text-align: center; margin-top: 14px; line-height: 1.6;
}

/* ==========================================================
   30. GUARANTEE — fechamento
   ========================================================== */
.sp-guarantee-closing { font-weight: 600; color: var(--sp-primary); }

/* ==========================================================
   31. FINAL CTA — linha de promoção
   ========================================================== */
.sp-finalcta__promoline {
  font-size: 0.92rem; font-weight: 700; color: var(--sp-accent);
  margin-bottom: 20px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 560px) {
  .sp-vi-pillars     { grid-template-columns: 1fr 1fr 1fr; }
  .sp-hero__ctas     { flex-direction: row; }
  .sp-hero__microcopy { text-align: left; }
  .sp-section--hero .sp-hero__microcopy { text-align: left; }
  .sp-benefits       { grid-template-columns: 1fr 1fr; }
  .sp-curr-lessons   { padding-left: 72px; }
  /* Barra promocional: uma linha só a partir daqui */
  .sp-promobar__inner { flex-direction: row; justify-content: center; text-align: left; flex-wrap: wrap; }
}

@media (min-width: 720px) {
  .sp-section        { padding: 80px 0; }
  .sp-section--tight { padding: 64px 0; }
  .sp-benefits       { grid-template-columns: 1fr 1fr 1fr; }
  .sp-pillar         { grid-template-columns: 64px 1fr; padding: 28px 24px; }
  /* Author */
  .sp-author__top    { padding: 28px 28px 0; }
  .sp-author__bio    { padding: 20px 28px 0; }
  .sp-author__creds  { padding: 16px 28px 28px; }
  .sp-author__img-wrap { width: 140px; height: 140px; }
  .sp-author__img-ph   { width: 140px; height: 140px; }
  /* Hero visual: maior em tablet */
  .sp-hero__visual   { height: 300px; }
  /* App viewer — layout 2 colunas: tabs à esquerda, viewer à direita */
  .sp-app__layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 36px;
    max-width: 480px;
    margin: 0 auto;
  }
  /* Tabs viram lista vertical */
  .sp-app__tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 150px;
    max-width: none;
    flex-shrink: 0;
    gap: 6px;
    padding-top: 8px;
  }
  .sp-app__tab {
    width: 100%;
    justify-content: flex-start;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    white-space: normal;
    border-width: 1.5px;
  }
  /* Tab ativa vertical — borda esquerda dourada, fundo sutil */
  #sp-app-s0:checked ~ .sp-app__layout label[for="sp-app-s0"],
  #sp-app-s1:checked ~ .sp-app__layout label[for="sp-app-s1"],
  #sp-app-s2:checked ~ .sp-app__layout label[for="sp-app-s2"],
  #sp-app-s3:checked ~ .sp-app__layout label[for="sp-app-s3"],
  #sp-app-s4:checked ~ .sp-app__layout label[for="sp-app-s4"] {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    border-left: 3px solid var(--sp-accent);
    color: #fff;
  }
  /* Viewer no layout de duas colunas */
  .sp-app__screens { max-width: 240px; }
}

/* Caminho completo + faixa de autoridade + oferta: layout largo */
@media (min-width: 900px) {
  .sp-authoritystrip__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .sp-journey__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .sp-journey__connector { display: none; }
  .sp-offer-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* Hero integrado — imagem absoluta à direita em telas largas */
@media (min-width: 900px) {
  .sp-section--hero {
    padding: 80px 0 88px;
    min-height: 440px;
    display: flex;
    align-items: center;
  }
  /* Imagem: absoluta, direita, altura total da seção */
  .sp-hero__visual {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 72%;
    height: auto;
    margin-top: 0;
  }
  .sp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }
  /* Fade: esquerda (bg puro) → direita (transparente) */
  .sp-hero__fade {
    background: linear-gradient(
      to right,
      #082233 0%,
      #082233 15%,
      rgba(8,34,51,0.88) 35%,
      rgba(8,34,51,0.45) 60%,
      transparent 100%
    );
  }
  /* App viewer: viewer um pouco maior em desktop largo */
  .sp-app__layout    { max-width: 520px; gap: 40px; }
  .sp-app__screens   { max-width: 260px; }
  /* Texto: limitado à metade esquerda, bem legível */
  .sp-hero__content {
    max-width: 520px;
    padding-right: 24px;
  }
  /* Wrap precisa de relative para o conteúdo ficar acima do visual */
  .sp-section--hero .sp-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }
}

@media (min-width: 1080px) {
  .sp-hero__content  { max-width: 560px; }
  .sp-hero__visual   { width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}