/* ============================================================
   Estilos das páginas públicas: vitrine, auth, checkout
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--petroleo-escuro) 0%, var(--petroleo) 55%, var(--petroleo-claro) 100%);
  color: #fff; padding: 84px 0 96px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; pointer-events: none;
}
.hero::before { width: 420px; height: 420px; background: radial-gradient(circle, rgba(195,90,58,.55), transparent 70%); top: -140px; right: -100px; }
.hero::after { width: 340px; height: 340px; background: radial-gradient(circle, rgba(255,182,39,.4), transparent 70%); bottom: -120px; left: -80px; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; margin: 16px 0 18px; }
.hero h1 .destaque { color: var(--ambar); position: relative; }
.hero__sub { font-size: 1.12rem; opacity: .92; max-width: 520px; margin-bottom: 30px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.hero__garantia { display: flex; gap: 22px; flex-wrap: wrap; font-size: .88rem; opacity: .9; }
.hero__garantia span { display: inline-flex; align-items: center; gap: 8px; }

/* Card flutuante do hero */
.hero__visual { position: relative; }
.hero__card {
  background: #fff; color: var(--grafite); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 26px; position: relative; z-index: 2;
  animation: flutuar 5s ease-in-out infinite;
}
@keyframes flutuar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero__card-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.hero__avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--terracota), var(--ambar));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.3rem;
  font-family: var(--font-display);
}
.hero__card-topo strong { display: block; color: var(--petroleo); }
.hero__card-topo small { color: var(--grafite-claro); }
.hero__mini-aula {
  background: var(--cinza-100); border-radius: var(--radius-md); padding: 16px;
  display: flex; gap: 14px; align-items: center; margin-bottom: 14px;
}
.hero__play {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--terracota), var(--terracota-escuro));
  color: #fff; display: grid; place-items: center; font-size: 1.2rem;
  box-shadow: var(--shadow-cta);
}
.hero__selo {
  position: absolute; z-index: 3; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 12px 18px; font-weight: 800; color: var(--petroleo);
  font-size: .9rem; display: flex; align-items: center; gap: 10px;
}
.hero__selo--a { top: -18px; right: 12px; animation: flutuar 6s ease-in-out infinite; }
.hero__selo--b { bottom: -16px; left: 8px; animation: flutuar 7s ease-in-out infinite reverse; }
.hero__selo .n { font-size: 1.4rem; }

/* Foto do professor no hero (substitui o card mock em 10/10/2026) */
.hero__foto {
  margin: 0; position: relative; z-index: 2;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: flutuar 5s ease-in-out infinite;
  max-width: 420px; margin-inline: auto;
}
.hero__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.hero__foto-legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 36px 22px 18px; color: #fff;
  background: linear-gradient(transparent, rgba(0,59,70,.92));
}
.hero__foto-legenda strong { display: block; font-size: 1.05rem; font-family: var(--font-display); }
.hero__foto-legenda small { opacity: .85; font-size: .82rem; }

/* ---------- COMUNIDADE (substitui depoimentos fictícios em 10/10/2026) ---------- */
.comunidade { background: var(--petroleo); position: relative; overflow: hidden; }
.comunidade .titulo-secao, .comunidade .eyebrow { color: #fff; }
.comunidade .subtitulo-secao { color: #cfe0e4; }
.comunidade__card {
  background: #fff; border-radius: var(--radius-lg); padding: 36px;
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
  margin-top: 40px; box-shadow: var(--shadow-lg); position: relative; z-index: 1;
}
.comunidade__numero { text-align: center; padding-right: 36px; border-right: 2px dashed var(--cinza-200); }
.comunidade__numero strong { display: block; font-family: var(--font-display); font-size: 2.6rem; color: var(--terracota); }
.comunidade__numero span { font-size: .85rem; font-weight: 700; color: var(--grafite-claro); }
.comunidade__texto strong { display: block; font-size: 1.25rem; color: var(--petroleo); margin-bottom: 8px; }
.comunidade__texto p { color: var(--grafite); margin-bottom: 20px; max-width: 520px; }

/* ---------- SOBRE O PROFESSOR ---------- */
.sobre { background: #fff; }
.sobre__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.sobre__foto { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.sobre__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.sobre__texto p { color: var(--grafite); margin: 16px 0; line-height: 1.7; }
.sobre__credenciais { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sobre__credenciais span {
  background: var(--offwhite); border: 2px solid var(--cinza-200); color: var(--petroleo);
  font-weight: 700; font-size: .85rem; padding: 10px 18px; border-radius: var(--radius-pill);
}

/* ---------- BARRA DE CONFIANÇA ---------- */
.confianca { background: var(--ambar); padding: 0; }
.confianca__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.confianca__item { padding: 22px 16px; text-align: center; border-left: 2px dashed rgba(0,59,70,.18); }
.confianca__item:first-child { border-left: none; }
.confianca__item strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--petroleo-escuro); }
.confianca__item span { font-size: .85rem; font-weight: 700; color: var(--petroleo-escuro); opacity: .8; }

/* ---------- CATÁLOGO ---------- */
.catalogo { background: var(--offwhite); }
.catalogo__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.filtro {
  padding: 10px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem;
  background: #fff; border: 2px solid var(--cinza-200); color: var(--grafite-claro);
  transition: all .25s var(--ease);
}
.filtro:hover { border-color: var(--terracota); color: var(--terracota); }
.filtro.ativo { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.curso-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration: none; color: inherit;
}
.curso-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.curso-card__img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.curso-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.curso-card__selo {
  position: absolute; top: 14px; left: 14px; background: var(--terracota); color: #fff;
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.curso-card__corpo { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.curso-card__corpo h3 { font-size: 1.25rem; line-height: 1.3; }
.curso-card__corpo p { color: var(--grafite-claro); font-size: .95rem; line-height: 1.6; }
.curso-card__preco { margin-top: auto; padding-top: 8px; }
.curso-card__preco small { display: block; color: var(--grafite-claro); font-size: .8rem; }
.curso-card__preco strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--petroleo); }

/* ---------- COMO FUNCIONA ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.passo { text-align: center; padding: 36px 28px; position: relative; }
.passo__num {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800; color: #fff;
}
.passo:nth-child(1) .passo__num { background: linear-gradient(135deg, var(--terracota), var(--terracota-escuro)); transform: rotate(-6deg); }
.passo:nth-child(2) .passo__num { background: linear-gradient(135deg, var(--ambar), #e08a00); transform: rotate(4deg); }
.passo:nth-child(3) .passo__num { background: linear-gradient(135deg, var(--petroleo-claro), var(--petroleo)); transform: rotate(-4deg); }
.passo h3 { margin-bottom: 10px; font-size: 1.2rem; }
.passo p { color: var(--grafite-claro); font-size: .95rem; }

/* ---------- DEPOIMENTOS ---------- */
.depoimentos { background: var(--petroleo); position: relative; overflow: hidden; }
.depoimentos::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,39,.16), transparent 70%);
  top: -160px; left: -120px;
}
.depoimentos .titulo-secao, .depoimentos .eyebrow { color: #fff; }
.depoimentos .subtitulo-secao { color: #cfe0e4; }
.depoimentos__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; position: relative; z-index: 1; }
.depoimento { background: #fff; border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.depoimento__estrelas { color: var(--ambar); letter-spacing: 3px; font-size: 1.05rem; }
.depoimento p { font-size: .95rem; color: var(--grafite); flex: 1; }
.depoimento__autor { display: flex; gap: 12px; align-items: center; }
.depoimento__foto {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800;
  font-family: var(--font-display);
}
.depoimento__autor strong { display: block; font-size: .92rem; color: var(--petroleo); }
.depoimento__autor small { color: var(--grafite-claro); font-size: .8rem; }

/* ---------- CTA FINAL ---------- */
.cta-final {
  background: linear-gradient(120deg, var(--terracota) 0%, #e0805f 60%, var(--ambar) 130%);
  color: #fff; text-align: center; position: relative; overflow: hidden;
}
.cta-final::before {
  content: "✚"; position: absolute; font-size: 22rem; opacity: .08; color: #fff;
  right: -40px; top: -60px; transform: rotate(12deg); line-height: 1; pointer-events: none;
}
.cta-final h2 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: 14px; position: relative; }
.cta-final p { opacity: .95; max-width: 560px; margin: 0 auto 30px; font-size: 1.08rem; position: relative; }

/* ---------- AUTH ---------- */
.auth { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 1fr 1fr; }
.auth__marca {
  background: linear-gradient(140deg, var(--petroleo-escuro), var(--petroleo) 60%, var(--petroleo-claro));
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth__marca::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(195,90,58,.5), transparent 70%);
  bottom: -160px; right: -120px;
}
.auth__marca h2 { color: #fff; font-size: 2rem; margin: 18px 0 12px; position: relative; }
.auth__marca p { opacity: .88; position: relative; max-width: 380px; }
.auth__vantagens { display: grid; gap: 16px; margin-top: 32px; position: relative; }
.auth__vantagem { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 14px 18px; border-radius: var(--radius-md); backdrop-filter: blur(4px); }
.auth__vantagem .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--ambar); display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.auth__form { display: grid; place-items: center; padding: 56px 32px; background: var(--offwhite); }
.auth__card { width: min(440px, 100%); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px 36px; }
.auth__card h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth__card > p { color: var(--grafite-claro); margin-bottom: 26px; font-size: .95rem; }
.auth__alt { text-align: center; margin-top: 20px; font-size: .92rem; color: var(--grafite-claro); }
.auth__alt a { color: var(--terracota); font-weight: 800; }
.auth__divisor { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--cinza-400); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.auth__divisor::before, .auth__divisor::after { content: ""; flex: 1; height: 1px; background: var(--cinza-300); }

/* ---------- CHECKOUT ---------- */
.checkout { background: var(--offwhite); min-height: calc(100vh - 72px); }
.checkout__in { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; padding: 48px 0 72px; }
.checkout__passos { display: flex; gap: 8px; margin-bottom: 28px; }
.checkout__passo { flex: 1; text-align: center; font-size: .8rem; font-weight: 800; color: var(--cinza-400); text-transform: uppercase; letter-spacing: .06em; padding-top: 12px; position: relative; }
.checkout__passo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--cinza-300); }
.checkout__passo.ativo { color: var(--petroleo); }
.checkout__passo.ativo::before { background: linear-gradient(90deg, var(--terracota), var(--ambar)); }
.painel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--cinza-200); padding: 30px; margin-bottom: 24px; }
.painel h2 { font-size: 1.25rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.painel h2 .n { width: 32px; height: 32px; border-radius: 50%; background: var(--petroleo); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.metodo {
  border: 2px solid var(--cinza-200); border-radius: var(--radius-md); padding: 18px;
  display: flex; gap: 12px; align-items: center; cursor: pointer; transition: all .25s var(--ease);
  font-weight: 700; color: var(--grafite);
}
.metodo:hover { border-color: var(--terracota); }
.metodo.selecionado { border-color: var(--terracota); background: var(--terracota-suave); box-shadow: var(--shadow-sm); }
.metodo .ico { font-size: 1.7rem; }
.metodo small { display: block; font-weight: 600; color: var(--grafite-claro); font-size: .78rem; }
.metodo .tag-zero { background: var(--verde); color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; }
.resumo { position: sticky; top: 96px; }
.resumo__produto { display: flex; gap: 14px; margin-bottom: 18px; }
.resumo__capa { width: 72px; height: 72px; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center; font-size: 1.8rem; color: #fff; }
.resumo__produto strong { display: block; color: var(--petroleo); font-size: .95rem; }
.resumo__produto small { color: var(--grafite-claro); font-size: .82rem; }
.resumo__linha { display: flex; justify-content: space-between; padding: 10px 0; font-size: .92rem; border-top: 1px dashed var(--cinza-300); }
.resumo__linha.total { font-size: 1.15rem; font-weight: 800; color: var(--petroleo); border-top: 2px solid var(--petroleo); margin-top: 6px; padding-top: 16px; }
.resumo__desconto { color: var(--verde); font-weight: 700; }
.cupom { display: flex; gap: 10px; margin: 16px 0; }
.cupom .input { margin: 0; }
/* Order bump (11/10/2026) */
.order-bump { display: flex; gap: 12px; align-items: flex-start; background: #FFF8E6; border: 2px dashed var(--ambar, #E8A838); border-radius: var(--radius-md); padding: 14px; margin: 4px 0 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.order-bump:hover { border-color: var(--terracota); }
.order-bump input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--terracota); flex-shrink: 0; cursor: pointer; }
.order-bump__box { display: grid; gap: 4px; }
.order-bump__tag { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--terracota); }
.order-bump__box strong { color: var(--petroleo); font-size: .92rem; }
.order-bump__box small { color: var(--grafite-claro); font-size: .8rem; }
.order-bump__box small s { opacity: .7; }
.order-bump__box small b { color: var(--verde); }
.seguranca { display: flex; gap: 10px; justify-content: center; margin-top: 18px; font-size: .78rem; color: var(--grafite-claro); font-weight: 600; flex-wrap: wrap; }

/* ---------- RESPONSIVO PÁGINAS ---------- */
@media (max-width: 980px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__visual { max-width: 480px; }
  .sobre__in { grid-template-columns: 1fr; gap: 36px; }
  .sobre__foto { max-width: 420px; }
  .comunidade__card { grid-template-columns: 1fr; gap: 24px; }
  .comunidade__numero { border-right: none; border-bottom: 2px dashed var(--cinza-200); padding-right: 0; padding-bottom: 24px; }
  .catalogo__grade, .passos { grid-template-columns: 1fr 1fr; }
  .confianca__in { grid-template-columns: 1fr 1fr; }
  .confianca__item:nth-child(3) { border-left: none; }
  .confianca__item { border-top: 2px dashed rgba(0,59,70,.18); }
  .confianca__item:nth-child(-n+2) { border-top: none; }
  .auth { grid-template-columns: 1fr; }
  .auth__marca { display: none; }
  .checkout__in { grid-template-columns: 1fr; }
  .resumo { position: static; order: -1; }
}
@media (max-width: 620px) {
  .catalogo__grade, .passos { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 72px; }
  .hero__ctas .btn { flex: 1; }
  .metodos { grid-template-columns: 1fr; }
  .auth__card { padding: 30px 24px; }
  .painel { padding: 22px 18px; }
}