/* ==========================================================================
   Dial Educ — Design system (neobrutalista)
   Base extraída da home (index.html) e estendida para as demais páginas:
   categoria, curso, login, cadastro, painel e planos.
   ========================================================================== */

:root{
  --bg:#fff6e9;
  --ink:#1b1b1f;
  --pink:#ff4d6d;
  --pink-deep:#e0355a;
  --gold:#ffc93c;
  --gold-deep:#e8a900;
  --green:#3ddc97;
  --green-deep:#1fb87e;
  --blue:#5b7fff;
  --blue-deep:#3f5fe0;
  --purple:#a66cff;
  --purple-deep:#8a4ce0;
  --surface:#ffffff;
  --muted:#5c5560;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  line-height:1.5;
}

h1,h2,h3,h4{ font-family:'Baloo 2', system-ui, sans-serif; margin:0; text-wrap:balance; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
[hidden]{ display:none !important; }

::selection{ background:var(--pink); color:#fff; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 1.6rem; }
main{ display:block; }

/* ============ MASTHEAD ============ */
.masthead{ padding:1.6rem 0; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:'Baloo 2'; font-weight:800; font-size:1.5rem; }
.brand-badge{
  width:42px; height:42px; border-radius:14px; background:var(--pink);
  border:3px solid var(--ink); display:flex; align-items:center; justify-content:center;
  transform:rotate(-6deg); flex:0 0 auto;
}
.brand span{ color:var(--pink); }

.nav-pills{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.nav-pill{
  font-weight:700; font-size:.92rem; padding:.55rem 1.1rem; border-radius:999px;
  border:3px solid var(--ink); background:var(--surface);
  transition:background-color .18s ease, transform .18s ease;
}
.nav-pill:hover{ background:var(--gold); transform:translateY(-1px); }
.nav-pill.active{ background:var(--gold); }
.nav-pill.cta{
  background:var(--green); box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.nav-pill.cta:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--green); }
.nav-pill.cta:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.nav-pill.profile{ display:flex; align-items:center; gap:.5rem; background:var(--surface); }
.nav-pill.profile .mini-avatar{
  width:22px; height:22px; border-radius:50%; background:var(--purple); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; color:#fff; flex:0 0 auto;
}

/* ============ BOTÕES ============ */
.btn-big{
  font-family:'Baloo 2'; font-weight:700; font-size:1.05rem;
  padding:.9rem 1.8rem; border-radius:18px; border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-big.primary{ background:var(--pink); color:#fff; }
.btn-big.secondary{ background:var(--surface); color:var(--ink); }
.btn-big.outline{ background:transparent; color:var(--ink); box-shadow:none; }
.btn-big.outline:hover{ background:var(--surface); }
.btn-big.full{ width:100%; }
.btn-big.small{ padding:.6rem 1.2rem; font-size:.9rem; border-radius:14px; box-shadow:3px 3px 0 var(--ink); }
.btn-big:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn-big.small:hover{ box-shadow:5px 5px 0 var(--ink); }
.btn-big:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn-big:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:5px 5px 0 var(--ink) !important; }
.btn-big.danger-outline{ background:var(--surface); color:var(--pink-deep); border-color:var(--pink-deep); box-shadow:4px 4px 0 var(--pink-deep); }
.btn-big.danger-outline:hover{ box-shadow:6px 6px 0 var(--pink-deep); }

/* ============ MIGALHAS (breadcrumb) ============ */
.crumbs{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-weight:700; font-size:.85rem; color:var(--muted); margin-bottom:1.1rem; }
.crumbs a:hover{ color:var(--pink); }
.crumbs .sep{ opacity:.5; }
.crumbs .current{ color:var(--ink); }

/* ============ HERO (Home) ============ */
.hero{ padding:2.2rem 0 4rem; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--surface);
  border:3px solid var(--ink); border-radius:999px; padding:.4rem .9rem 0.4rem .5rem;
  font-weight:700; font-size:.82rem; margin-bottom:1.2rem; transform:rotate(-2deg);
}
.hero-eyebrow .dot{ width:26px; height:26px; border-radius:50%; background:var(--gold); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; }
.hero h1{ font-size:3.4rem; line-height:1.05; font-weight:800; margin-bottom:1.1rem; }
.hero h1 .hl{ color:var(--pink); }
.hero p{ font-size:1.1rem; color:var(--muted); max-width:42ch; margin-bottom:1.6rem; font-weight:500; }

.stat-chips{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.stat-chip{
  display:flex; align-items:center; gap:.5rem; background:var(--surface);
  border:3px solid var(--ink); border-radius:16px; padding:.55rem .9rem;
  font-weight:700; font-size:.85rem; box-shadow:3px 3px 0 var(--ink);
}
.stat-chip svg{ width:20px; height:20px; flex:0 0 auto; }

.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

.medal-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.sparkle{ position:absolute; }
.sparkle.s1{ top:6%; left:4%; }
.sparkle.s2{ bottom:12%; right:2%; }
.sparkle.s3{ top:48%; left:-6%; }

/* ============ PAGE HERO (páginas internas: categoria, planos) ============ */
.page-hero{ padding:2rem 0 2.4rem; }
.page-hero h1{ font-size:2.3rem; font-weight:800; margin-bottom:.6rem; }
.page-hero p{ color:var(--muted); font-weight:600; font-size:1.02rem; max-width:60ch; margin:0; }
.page-hero.center{ text-align:center; }
.page-hero.center p{ margin:0 auto; }

/* ============ TRILHAS (categorias) ============ */
.trilhas{ padding:1rem 0 3.6rem; }
.section-heading{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.6rem; flex-wrap:wrap; gap:.6rem; }
.section-heading h2{ font-size:1.9rem; font-weight:800; }
.section-heading p{ color:var(--muted); font-weight:600; margin:0; }

.trilha-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; }
.trilha-tile{
  border:3px solid var(--ink); border-radius:22px; padding:1.3rem 1rem;
  text-align:center; box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease; cursor:pointer; display:block;
}
.trilha-tile:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.trilha-tile .icon-badge{
  width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.55);
  border:3px solid var(--ink); display:flex; align-items:center; justify-content:center;
  margin:0 auto .8rem;
}
.trilha-tile h3{ font-size:1.02rem; font-weight:700; margin-bottom:.3rem; }
.trilha-tile .count{ font-weight:700; font-size:.8rem; opacity:.75; }

/* Chips compactos de categoria (usados no topo da página de categoria) */
.cat-switch{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.cat-chip{
  display:inline-flex; align-items:center; gap:.5rem; border:3px solid var(--ink); border-radius:999px;
  padding:.55rem 1.1rem .55rem .55rem; font-weight:700; font-size:.88rem; background:var(--surface);
  box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
}
.cat-chip:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.cat-chip.active{ background:var(--ink); color:#fff; }
.cat-chip .ic{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); flex:0 0 auto;
}
.cat-chip .ic svg{ width:14px; height:14px; }

/* ============ PÁGINA DE TRILHAS (lista detalhada) ============ */
.trilha-list{ display:flex; flex-direction:column; gap:1.1rem; padding-bottom:3.6rem; }
.trilha-card{
  display:flex; align-items:center; gap:1.4rem; border:3px solid var(--ink); border-radius:24px;
  padding:1.6rem 1.8rem; box-shadow:6px 6px 0 var(--ink); transition:transform .15s ease, box-shadow .15s ease;
}
.trilha-card:hover{ transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--ink); }
.trilha-card .icon-badge{
  width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.55);
  border:3px solid var(--ink); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.trilha-card .info{ flex:1; }
.trilha-card h2{ font-size:1.3rem; font-weight:800; margin-bottom:.35rem; }
.trilha-card p{ font-weight:600; font-size:.92rem; margin-bottom:.5rem; max-width:56ch; }
.trilha-card .count{
  display:inline-block; font-weight:800; font-size:.78rem; background:#fff; border:2px solid var(--ink);
  border-radius:999px; padding:.15rem .7rem;
}
.trilha-card .arrow{ font-size:1.8rem; font-weight:800; flex:0 0 auto; transition:transform .18s ease; }
.trilha-card:hover .arrow{ transform:translateX(5px); }

/* ============ CATÁLOGO (toolbar de filtro e busca) ============ */
.catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:1rem; }
.search-field{ position:relative; width:100%; max-width:300px; }
.search-field svg{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; }
.search-field input{ padding-left:2.6rem; }
.catalog-count{ color:var(--muted); font-weight:700; font-size:.88rem; margin:0 0 1.2rem; }

/* ============ FEATURED GAME CARD ============ */
.featured{ padding:0 0 3.6rem; }
.game-card{
  border:3px solid var(--ink); border-radius:26px; background:var(--surface);
  box-shadow:8px 8px 0 var(--ink); padding:2rem; display:grid;
  grid-template-columns:auto 1fr auto; gap:1.8rem; align-items:center;
}
.game-card.link-card{ display:grid; color:inherit; }
.game-card .thumb-block{
  width:120px; height:120px; border-radius:20px; border:3px solid var(--ink);
  background:var(--pink); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.game-card .cat-tag{
  display:inline-block; background:var(--gold); border:2px solid var(--ink);
  border-radius:999px; padding:.2rem .8rem; font-weight:700; font-size:.72rem;
  text-transform:uppercase; margin-bottom:.6rem;
}
.game-card h3{ font-size:1.5rem; font-weight:800; margin-bottom:.4rem; }
.game-card .stars{ display:flex; align-items:center; gap:.3rem; margin-bottom:.3rem; }
.game-card .stars svg{ width:20px; height:20px; }
.game-card .meta-line{ color:var(--muted); font-weight:600; font-size:.9rem; }
.price-sticker{
  width:110px; height:110px; border-radius:50%; background:var(--green);
  border:3px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(6deg); flex:0 0 auto; text-align:center;
}
.price-sticker .from{ font-size:.65rem; text-decoration:line-through; opacity:.7; font-weight:700; }
.price-sticker .to{ font-family:'Baloo 2'; font-weight:800; font-size:1.15rem; }

/* ============ COURSE GRID ============ */
.courses{ padding:0 0 3.8rem; }
.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.course-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.course-card{
  border:3px solid var(--ink); border-radius:22px; overflow:hidden;
  box-shadow:5px 5px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
  background:var(--surface); cursor:pointer; display:block;
}
.course-card:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.course-card .cover{
  height:130px; display:flex; align-items:center; justify-content:center;
  border-bottom:3px solid var(--ink); position:relative;
}
.course-card .cover .cat-pill{
  position:absolute; top:.6rem; left:.6rem; background:#fff; border:2px solid var(--ink);
  border-radius:999px; padding:.15rem .65rem; font-size:.68rem; font-weight:700; text-transform:uppercase;
}
.course-card .body{ padding:1rem 1.1rem 1.2rem; }
.course-card h4{ font-family:'Baloo 2'; font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.course-card .row-info{ display:flex; align-items:center; justify-content:space-between; }
.course-card .rate{ display:flex; align-items:center; gap:.3rem; font-weight:700; font-size:.85rem; }
.course-card .rate svg{ width:16px; height:16px; }
.course-card .price{ font-family:'Baloo 2'; font-weight:700; font-size:1rem; }
.category-empty{
  grid-column:1/-1; text-align:center; padding:3rem 1.4rem; border:3px dashed var(--ink);
  border-radius:22px; color:var(--muted); font-weight:700;
}

/* ============ BADGES ROW ============ */
.perks{ padding:0 0 3.8rem; }
.perk-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; }
.perk{
  text-align:center; background:var(--surface); border:3px solid var(--ink); border-radius:20px;
  padding:1.3rem .8rem; box-shadow:4px 4px 0 var(--ink);
}
.perk .icon-badge{
  width:52px; height:52px; border-radius:50%; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto .7rem;
}
.perk p{ font-weight:700; font-size:.85rem; margin:0; }

/* ============ CABEÇALHO DE CURSO ============ */
.course-head{ padding:1.4rem 0 2.2rem; }
.course-head .cat-tag{
  display:inline-block; background:var(--gold); border:2px solid var(--ink);
  border-radius:999px; padding:.25rem .9rem; font-weight:700; font-size:.75rem;
  text-transform:uppercase; margin-bottom:.9rem;
}
.course-head h1{ font-size:2.1rem; font-weight:800; margin-bottom:.7rem; max-width:46ch; }
.course-head .subtitle{ color:var(--muted); font-weight:600; font-size:1.02rem; max-width:60ch; margin-bottom:1.1rem; }
.course-head .meta-row{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ============ LAYOUT DE CURSO (conteúdo + compra) ============ */
.course-layout{ display:grid; grid-template-columns:1fr 360px; gap:2.2rem; align-items:start; padding-bottom:3.6rem; }
.course-main{ min-width:0; }
.course-body-block{ margin-bottom:2rem; }
.block-title{ font-size:1.4rem; font-weight:800; margin-bottom:1rem; }

.learn-grid{
  border:3px solid var(--ink); border-radius:20px; padding:1.4rem 1.6rem;
  background:var(--surface); box-shadow:4px 4px 0 var(--ink);
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.6rem;
}
.learn-item{ display:flex; gap:.6rem; font-weight:600; font-size:.92rem; align-items:flex-start; }
.learn-item .tick{
  width:20px; height:20px; border-radius:50%; background:var(--green); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:.1rem;
}
.learn-item .tick svg{ width:12px; height:12px; }

.curriculum-meta{ color:var(--muted); font-weight:600; font-size:.88rem; margin:-.4rem 0 1rem; }
.curriculum details{
  border:3px solid var(--ink); border-radius:16px; margin-bottom:.8rem; overflow:hidden; background:var(--surface);
}
.curriculum summary{
  padding:1rem 1.3rem; font-family:'Baloo 2'; font-weight:700; font-size:1rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; list-style:none;
}
.curriculum summary::-webkit-details-marker{ display:none; }
.curriculum summary .sec-meta{ font-family:'Plus Jakarta Sans'; font-weight:600; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.curriculum summary .chev{ transition:transform .2s ease; flex:0 0 auto; }
.curriculum details[open] summary .chev{ transform:rotate(180deg); }
.curriculum .lesson-item{
  display:flex; align-items:center; gap:.7rem; padding:.7rem 1.3rem; font-size:.88rem; font-weight:600;
  border-top:3px solid var(--ink);
}
.curriculum .lesson-item .lesson-name{ flex:1; }
.curriculum .badge-preview{
  font-size:.66rem; font-weight:700; color:var(--purple-deep); border:2px solid var(--purple-deep);
  border-radius:999px; padding:.05rem .55rem;
}
.curriculum .lesson-time{ color:var(--muted); font-size:.8rem; white-space:nowrap; }

.req-list{ list-style:none; }
.req-list li{ display:flex; gap:.6rem; font-weight:600; font-size:.95rem; padding:.35rem 0; }
.req-list li::before{ content:"—"; color:var(--pink); font-weight:800; }

.course-description{ color:var(--ink); font-size:.98rem; line-height:1.75; font-weight:500; }
.course-description p{ margin:0 0 .9rem; }
.course-description p:last-child{ margin-bottom:0; }

.instructor-box{
  display:flex; gap:1.3rem; border:3px solid var(--ink); border-radius:22px; padding:1.5rem;
  background:var(--surface); box-shadow:5px 5px 0 var(--ink);
}
.avatar-circle{
  width:82px; height:82px; border-radius:50%; flex:0 0 auto; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Baloo 2'; font-weight:800; font-size:1.5rem;
}
.instructor-box h3{ font-size:1.2rem; font-weight:800; margin-bottom:.15rem; }
.instructor-box .role{ color:var(--muted); font-weight:600; font-size:.88rem; margin-bottom:.8rem; }
.instructor-stats{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; font-size:.85rem; font-weight:700; margin-bottom:.9rem; }
.instructor-stats li{ display:flex; align-items:center; gap:.4rem; }
.instructor-stats svg{ width:16px; height:16px; }

.rating-summary{
  display:grid; grid-template-columns:180px 1fr; gap:2rem; align-items:center;
  border:3px solid var(--ink); border-radius:22px; padding:1.6rem; background:var(--surface);
  box-shadow:5px 5px 0 var(--ink); margin-bottom:1.4rem;
}
.rating-summary .score{ text-align:center; }
.rating-summary .score .num{ font-family:'Baloo 2'; font-weight:800; font-size:3rem; line-height:1; }
.rating-summary .score .stars{ display:flex; justify-content:center; gap:.15rem; margin:.4rem 0; }
.rating-summary .score .stars svg{ width:18px; height:18px; }
.rating-summary .score .label{ color:var(--muted); font-weight:700; font-size:.8rem; }
.rating-bar-row{ display:grid; grid-template-columns:16px 1fr 34px; align-items:center; gap:.7rem; font-weight:700; font-size:.85rem; margin-bottom:.4rem; }
.rating-bar-row .track{ height:10px; border:2px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden; }
.rating-bar-row .fill{ height:100%; background:var(--gold); }

.review-card{ display:flex; gap:1rem; padding:1.2rem 0; border-top:3px solid var(--ink); }
.review-card:first-of-type{ border-top:none; }
.review-card .avatar-circle{ width:48px; height:48px; font-size:.95rem; border-width:2px; }
.review-card .who{ font-weight:800; margin-bottom:.15rem; }
.review-card .stars{ display:flex; gap:.15rem; margin-bottom:.4rem; }
.review-card .stars svg{ width:15px; height:15px; }
.review-card p{ margin:0; font-size:.92rem; color:var(--muted); font-weight:500; }

.related-row{ display:flex; gap:1.1rem; overflow-x:auto; padding:.3rem .1rem 1rem; scrollbar-width:thin; }
.related-row .course-card{ flex:0 0 240px; }

.purchase-card{
  position:sticky; top:1.4rem; border:3px solid var(--ink); border-radius:24px; overflow:hidden;
  background:var(--surface); box-shadow:8px 8px 0 var(--ink);
}
.purchase-card .thumb{
  height:190px; display:flex; align-items:center; justify-content:center; border-bottom:3px solid var(--ink);
  position:relative; overflow:hidden;
}
.purchase-card .thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.purchase-card .thumb .play-overlay{
  position:relative; z-index:1; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.92);
  border:3px solid var(--ink); display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease;
}
.purchase-card .thumb:hover .play-overlay{ transform:scale(1.08); }
.purchase-card .body{ padding:1.5rem 1.6rem 1.7rem; }
.purchase-card .discount-tag{
  display:inline-block; background:var(--green); border:2px solid var(--ink); border-radius:999px;
  padding:.2rem .8rem; font-weight:700; font-size:.75rem; margin-bottom:.7rem;
}
.purchase-card .price-row{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.3rem; }
.purchase-card .price-now{ font-family:'Baloo 2'; font-weight:800; font-size:1.9rem; }
.purchase-card .price-old{ text-decoration:line-through; color:var(--muted); font-weight:700; font-size:1rem; }
.purchase-card .price-timer{ display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.8rem; color:var(--pink-deep); margin-bottom:1.2rem; }
.purchase-card .price-timer svg{ width:15px; height:15px; }
.purchase-card .btn-stack{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem; }
.guarantee-text{ display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.78rem; font-weight:700; color:var(--muted); text-align:center; margin-bottom:1.2rem; }
.guarantee-text svg{ width:15px; height:15px; flex:0 0 auto; }
.includes-list{ list-style:none; font-size:.86rem; font-weight:600; margin-bottom:1.2rem; }
.includes-list li{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; border-top:2px dashed rgba(27,27,31,.18); }
.includes-list li:first-child{ border-top:none; }
.includes-list svg{ width:17px; height:17px; flex:0 0 auto; }
.subscription-note{
  font-size:.85rem; font-weight:600; background:#f4ecff; border:2px solid var(--purple); border-radius:14px;
  padding:.8rem 1rem; color:var(--ink);
}
.subscription-note a{ color:var(--purple-deep); font-weight:800; }
.subscription-note a:hover{ text-decoration:underline; }

/* ============ AUTENTICAÇÃO (login / cadastro) ============ */
.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:3rem 1.2rem;
}
.auth-card{
  width:100%; max-width:440px; border:3px solid var(--ink); border-radius:26px; background:var(--surface);
  box-shadow:8px 8px 0 var(--ink); padding:2.4rem 2.2rem;
}
.auth-card.wide{ max-width:520px; }
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:.6rem; font-family:'Baloo 2'; font-weight:800; font-size:1.4rem; margin-bottom:1.6rem; }
.auth-brand span{ color:var(--pink); }
.auth-card h1{ font-size:1.6rem; font-weight:800; text-align:center; margin-bottom:1.6rem; }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:.4rem; }
.field .hint{ font-size:.78rem; color:var(--muted); font-weight:600; margin-top:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"]{
  width:100%; font-family:inherit; font-size:.95rem; font-weight:600; color:var(--ink);
  border:3px solid var(--ink); border-radius:14px; padding:.75rem .95rem; background:#fff;
  transition:box-shadow .18s ease, transform .18s ease;
}
input::placeholder{ color:#a19c9c; font-weight:500; }
input:focus{ outline:none; box-shadow:3px 3px 0 var(--ink); transform:translate(-1px,-1px); }

.input-icon-wrap{ position:relative; }
.input-icon-wrap input{ padding-right:2.8rem; }
.toggle-pass{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%); background:none; border:none;
  padding:.2rem; color:var(--muted); display:flex;
}
.toggle-pass svg{ width:20px; height:20px; }
.toggle-pass:hover{ color:var(--ink); }

.check-row{ display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; font-weight:600; margin-bottom:1.2rem; }
.check-row input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--pink); margin-top:.15rem; flex:0 0 auto; }
.check-row.between{ display:flex; align-items:center; justify-content:space-between; }
.check-row a{ font-weight:700; }
.check-row a:hover{ color:var(--pink); }
.check-row label a{ text-decoration:underline; }

.auth-divider{
  display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.8rem; font-weight:700;
  margin:1.5rem 0;
}
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:2px; background:rgba(27,27,31,.15); }

.social-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.btn-social{
  display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-size:.88rem;
  border:3px solid var(--ink); border-radius:14px; padding:.65rem; background:#fff; color:var(--ink);
}
.btn-social:hover{ background:var(--bg); }
.btn-social svg{ width:18px; height:18px; }

.auth-footer{ text-align:center; margin-top:1.6rem; font-size:.9rem; font-weight:600; color:var(--muted); }
.auth-footer a{ color:var(--pink-deep); font-weight:800; }
.auth-footer a:hover{ text-decoration:underline; }

/* ============ PLANOS ============ */
.billing-toggle{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:0 0 2.6rem; }
.billing-toggle .label{ font-weight:700; color:var(--muted); font-size:.95rem; }
.billing-toggle .label.active{ color:var(--ink); }
.save-badge{
  background:var(--green); border:2px solid var(--ink); color:var(--ink); font-size:.68rem; font-weight:800;
  padding:.1rem .55rem; border-radius:999px; margin-left:.4rem; vertical-align:middle;
}
.switch{
  position:relative; width:58px; height:32px; border:3px solid var(--ink); border-radius:999px; background:#fff;
  padding:0; flex:0 0 auto;
}
.switch .knob{
  position:absolute; top:1px; left:1px; width:22px; height:22px; border-radius:50%; background:var(--ink);
  transition:transform .18s ease;
}
.switch[aria-checked="true"]{ background:var(--green); }
.switch[aria-checked="true"] .knob{ transform:translateX(26px); background:var(--ink); }

.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2.6rem; }
.plan-card{
  border:3px solid var(--ink); border-radius:24px; padding:2rem 1.7rem; background:var(--surface);
  box-shadow:6px 6px 0 var(--ink); display:flex; flex-direction:column; position:relative;
}
.plan-card.popular{ background:#fff3f4; box-shadow:8px 8px 0 var(--pink); }
.plan-badge-popular{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--pink); color:#fff; border:2px solid var(--ink); font-weight:800; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.4px; padding:.35rem 1rem; border-radius:999px;
}
.plan-name{ font-size:1.2rem; font-weight:800; margin-bottom:.35rem; }
.plan-desc{ color:var(--muted); font-weight:600; font-size:.86rem; min-height:42px; margin-bottom:1.1rem; }
.plan-price{ font-family:'Baloo 2'; font-weight:800; font-size:2.3rem; margin-bottom:.1rem; }
.plan-price small{ font-family:'Plus Jakarta Sans'; font-weight:600; font-size:.95rem; color:var(--muted); }
.plan-price-period{ font-size:.78rem; color:var(--muted); font-weight:600; margin-bottom:1.4rem; }
.plan-features{ list-style:none; flex:1; margin-bottom:1.6rem; }
.plan-features li{
  display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; font-weight:600; padding:.5rem 0;
  border-top:2px dashed rgba(27,27,31,.18);
}
.plan-features li:first-child{ border-top:none; }
.plan-features li.disabled{ color:var(--muted); }
.plan-features svg{ width:17px; height:17px; flex:0 0 auto; margin-top:.1rem; }
.plan-features .yes{ color:var(--green-deep); }
.plan-features .no{ color:#c7c1cb; }

.single-course-cta{
  border:3px solid var(--ink); border-radius:24px; background:var(--surface); box-shadow:6px 6px 0 var(--ink);
  text-align:center; padding:2.4rem 2rem; margin-bottom:3rem;
}
.single-course-cta .icon-badge{
  width:56px; height:56px; border-radius:16px; background:var(--gold); border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.single-course-cta h3{ font-size:1.4rem; font-weight:800; margin-bottom:.6rem; }
.single-course-cta p{ color:var(--muted); font-weight:600; max-width:56ch; margin:0 auto 1.3rem; }

.faq-list details{
  border:3px solid var(--ink); border-radius:16px; margin-bottom:.8rem; overflow:hidden; background:var(--surface);
}
.faq-list summary{
  padding:1.1rem 1.4rem; font-family:'Baloo 2'; font-weight:700; font-size:1rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; list-style:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary .chev{ transition:transform .2s ease; flex:0 0 auto; }
.faq-list details[open] summary .chev{ transform:rotate(180deg); }
.faq-list .faq-body{ padding:0 1.4rem 1.2rem; color:var(--muted); font-weight:500; font-size:.92rem; line-height:1.6; border-top:3px solid var(--ink); padding-top:1rem; }

/* ============ PAINEL (área do aluno) ============ */
.dash-layout{ display:grid; grid-template-columns:260px 1fr; gap:2.2rem; align-items:start; padding-bottom:4rem; }
.dash-content{ min-width:0; }
.profile-mini{
  display:flex; align-items:center; gap:.8rem; border:3px solid var(--ink); border-radius:18px; padding:1rem;
  background:var(--surface); box-shadow:4px 4px 0 var(--ink); margin-bottom:1.1rem;
}
.profile-mini .avatar-circle{ width:48px; height:48px; font-size:1rem; border-width:2px; }
.profile-mini .name{ font-weight:800; font-size:.92rem; }
.profile-mini .email{ font-size:.74rem; color:var(--muted); font-weight:600; word-break:break-all; }

.dash-nav{ display:flex; flex-direction:column; gap:.55rem; position:sticky; top:1.4rem; }
.dash-nav button, .dash-nav a{
  display:flex; align-items:center; gap:.65rem; text-align:left; width:100%;
  border:3px solid var(--ink); border-radius:14px; padding:.75rem 1rem; font-weight:700; font-size:.9rem;
  background:var(--surface); color:var(--ink);
}
.dash-nav button svg, .dash-nav a svg{ width:18px; height:18px; flex:0 0 auto; }
.dash-nav button:hover, .dash-nav a:hover{ background:var(--bg); }
.dash-nav button.active{ background:var(--ink); color:#fff; }
.dash-nav a.logout{ color:var(--pink-deep); border-color:var(--pink-deep); }
.dash-nav a.logout:hover{ background:#fff0f1; }

.dash-title{ font-size:1.5rem; font-weight:800; margin-bottom:1.4rem; }
.dash-section-heading{ display:flex; align-items:center; justify-content:space-between; margin:1.8rem 0 1rem; }
.dash-section-heading:first-child{ margin-top:0; }
.dash-section-heading h2{ font-size:1.1rem; font-weight:800; }

.enrolled-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.enrolled-card{
  border:3px solid var(--ink); border-radius:22px; overflow:hidden; background:var(--surface);
  box-shadow:5px 5px 0 var(--ink); display:flex; flex-direction:column;
}
.enrolled-card .thumb{
  height:120px; border-bottom:3px solid var(--ink); background-size:cover; background-position:center; position:relative;
}
.enrolled-card .thumb .badge-tag{
  position:absolute; top:.6rem; left:.6rem; background:#fff; border:2px solid var(--ink);
  border-radius:999px; padding:.15rem .65rem; font-size:.65rem; font-weight:700; text-transform:uppercase;
}
.enrolled-card .body{ padding:1rem 1.1rem 1.2rem; flex:1; display:flex; flex-direction:column; }
.enrolled-card h3{ font-size:.98rem; font-weight:700; margin-bottom:.6rem; }
.progress-track{ height:10px; border:2px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden; margin-bottom:.4rem; }
.progress-fill{ height:100%; background:var(--green); }
.progress-label{ font-size:.76rem; font-weight:700; color:var(--muted); margin-bottom:1rem; }
.enrolled-card .btn-big{ margin-top:auto; }
.enrolled-card.completed .progress-fill{ background:var(--gold); }

.dash-card{
  border:3px solid var(--ink); border-radius:20px; padding:1.6rem 1.8rem; background:var(--surface);
  box-shadow:4px 4px 0 var(--ink); margin-bottom:1.3rem;
}
.dash-card h2{ font-size:1rem; font-weight:800; margin-bottom:1.1rem; }
.dash-card h2.danger{ color:var(--pink-deep); }
.dash-card p.note{ color:var(--muted); font-weight:600; font-size:.88rem; margin-bottom:1rem; }

.current-plan-card{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border:3px solid var(--ink); border-radius:20px; padding:1.6rem 1.8rem; margin-bottom:1.3rem;
  background:linear-gradient(135deg, #fff3f4, var(--surface) 60%); box-shadow:4px 4px 0 var(--ink);
}
.current-plan-card .plan-tag{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--pink-deep); margin-bottom:.3rem; }
.current-plan-card h3{ font-size:1.25rem; font-weight:800; margin-bottom:.2rem; }
.current-plan-card .renew-info{ font-size:.85rem; color:var(--muted); font-weight:600; }
.current-plan-card .actions{ display:flex; gap:.7rem; flex-wrap:wrap; }

.payment-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.9rem 0; border-top:2px dashed rgba(27,27,31,.18); }
.payment-row:first-of-type{ border-top:none; }
.card-brand-icon{
  width:46px; height:34px; border-radius:8px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.card-brand-icon svg{ width:20px; height:20px; }
.payment-row .info strong{ display:block; font-size:.9rem; }
.payment-row .info span{ font-size:.78rem; color:var(--muted); font-weight:600; }

.table-scroll{ overflow-x:auto; }
.billing-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.billing-table th{
  text-align:left; color:var(--muted); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  padding:.5rem .4rem; border-bottom:3px solid var(--ink);
}
.billing-table td{ padding:.85rem .4rem; border-bottom:2px dashed rgba(27,27,31,.18); font-weight:600; }
.billing-table tr:last-child td{ border-bottom:none; }
.status-pill{
  font-size:.72rem; font-weight:800; padding:.15rem .65rem; border-radius:999px; border:2px solid var(--green-deep);
  color:var(--green-deep); display:inline-block;
}

/* ============ FOOTER ============ */
footer{ border-top:3px solid var(--ink); padding:2.4rem 0 2.6rem; }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.4rem; align-items:center; }
.foot-links{ display:flex; gap:1.6rem; flex-wrap:wrap; font-weight:700; font-size:.88rem; }
.foot-links a:hover{ color:var(--pink); }
.foot-note{ font-weight:600; font-size:.82rem; color:var(--muted); }

/* ============ RESPONSIVO ============ */
@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; }
  .medal-wrap{ order:-1; max-width:280px; margin:0 auto 1rem; }
  .trilha-grid{ grid-template-columns:repeat(3,1fr); }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .course-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .perk-grid{ grid-template-columns:repeat(3,1fr); }
  .game-card{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .course-layout{ grid-template-columns:1fr; }
  .purchase-card{ position:relative; top:0; order:-1; }
  .learn-grid{ grid-template-columns:1fr; }
  .rating-summary{ grid-template-columns:1fr; text-align:center; }
  .rating-summary .score .stars{ justify-content:center; }
  .dash-layout{ grid-template-columns:1fr; }
  .dash-nav{ position:relative; top:0; flex-direction:row; flex-wrap:wrap; }
  .enrolled-grid{ grid-template-columns:repeat(2,1fr); }
  .plan-grid{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
}
/* ============ TRANSIÇÕES DE ENTRADA (scroll reveal) ============ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .nav-pill, .btn-big, .course-card, .trilha-tile, .trilha-card, .cat-chip, input{ transition:none; }
}

@media (max-width:600px){
  .hero h1{ font-size:2.3rem; }
  .trilha-grid{ grid-template-columns:repeat(2,1fr); }
  .course-grid{ grid-template-columns:1fr; }
  .course-grid.cols-4{ grid-template-columns:1fr; }
  .perk-grid{ grid-template-columns:repeat(2,1fr); }
  .field-row{ grid-template-columns:1fr; }
  .enrolled-grid{ grid-template-columns:1fr; }
  .social-row{ grid-template-columns:1fr; }
  .instructor-box{ flex-direction:column; text-align:center; }
  .instructor-stats{ justify-content:center; }
  .current-plan-card{ flex-direction:column; align-items:flex-start; }
}