/* LANDING PAGE CSS */
   /* ESTILOS GERAIS */

      :root{
      --navbar-height:90px;
      }

      html{
      scroll-padding-top:var(--navbar-height);
      }

      body{
      padding-top:var(--navbar-height);
      background:#1d183a;
      color:white;
      font-family:Arial, sans-serif;
      margin:0;
      }

      /* NAVBAR */

      .navbar-custom{

      position:fixed !important;
      top:0 !important;
      left:0;
      right:0;
      width:100%;
      z-index:1000;

      background:rgba(44,36,87,0.9);
     
      backdrop-filter:blur(10px);
    
      padding:14px 0;
     
      box-shadow:0 4px 20px rgba(0,0,0,0.15);

      transition:all 0.3s ease;
      will-change:transform, background, box-shadow;

      }

      .navbar-brand{

      font-weight:700;
      font-size:20px;
      color:white !important;

      }

      .nav-link{

      color:#d6d6ff !important;
      margin-left:18px;
      font-weight:500;
      transition:0.2s;

      }

      .nav-item{
      margin-right:8px;
      }

      .nav-link:hover{

      color:white !important;
      transform:translateY(-1px);

      }

      /* ANIMAÇÃO DO LINK NAVBAR*/

      .nav-link{
      position:relative;
      color:#d6d6ff !important;
      margin-left:18px;
      font-weight:500;
      transition:0.2s;
      }

      .nav-link::after{

      content:"";
      position:absolute;

      width:0%;
      height:2px;

      left:0;
      bottom:-4px;

      background:linear-gradient(90deg,#7a88ff,#5b6cff);

      transition:0.3s ease;

      }

      .nav-link:hover::after{

      width:100%;

      }

      .navbar-scrolled{

      background:rgba(44,36,87,0.95);

      padding:10px 0;

      box-shadow:0 8px 25px rgba(0,0,0,0.3);

      transition:all 0.3s ease;

      }


      /* HERO */

      .hero{
      padding:120px 20px;
      background: transparent;
      text-align:center;
      }

      .hero h1{
      font-size:42px;
      font-weight:800;
      color:white;
      margin-top:15px;
      }

      .hero-logo{
      width:370px;
      max-width:80%;
      margin-bottom:15px;

      /* HERO LOGO ANIMATION */

      opacity:0;
      transform:translateY(20px);

      animation:fadeHero 1.2s ease forwards;

      }

      @keyframes fadeHero{

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

      }


      .hero-img{
      width:100%;
      max-width:220px;
      animation:fadeInUp 1s ease forwards;
      opacity:0;
      }

      .hero-illustration:first-child .hero-img{
      animation-delay:0.3s;
      }

      .hero-illustration:last-child .hero-img{
      animation-delay:0.6s;
      }

      @keyframes fadeInUp{
      0%{
      opacity:0;
      transform:translateY(40px);
      }
      100%{
      opacity:1;
      transform:translateY(0);
      }
      }

      .hero-text{
      max-width:650px;
      margin:auto;
      margin-top:15px;
      font-size:18px;
      color:rgba(255,255,255,0.85);
      }


      /* ===============================
         BOTÕES PADRÃO DO SISTEMA
         Mantém consistência visual global
      ================================ */

      .btn-primary{

      background:linear-gradient(135deg,#5b6cff,#7a88ff);
      border:none;

      padding:12px 28px;

      font-weight:600;

      border-radius:12px;

      color:white;

      box-shadow:0 6px 15px rgba(91,108,255,0.35);

      transition:all 0.25s ease;

      }

      /* Estado hover com feedback visual */

      .btn-primary:hover{

      transform:translateY(-2px);

      box-shadow:
      0 10px 25px rgba(91,108,255,0.5),
      0 0 15px rgba(122,136,255,0.6);

      background:linear-gradient(135deg,#4a59e8,#6d7cff);

      }

      /* Variante para botão principal (hero) */

      .btn-primary.btn-lg{

      padding:14px 36px;
      font-size:18px;
      border-radius:30px;

      }

      /* Botão flutuante — voltar ao início da página */

      .back-to-top{

      position:fixed;
      right:24px;
      bottom:24px;

      width:48px;
      height:48px;

      display:flex;
      align-items:center;
      justify-content:center;

      background:linear-gradient(135deg,#5b6cff,#7a88ff);
      border:none;
      border-radius:50%;

      color:white;
      font-size:20px;
      line-height:1;

      box-shadow:0 6px 15px rgba(91,108,255,0.35);
      transition:all 0.25s ease;

      opacity:0;
      visibility:hidden;
      transform:translateY(10px);

      z-index:999;

      }

      .back-to-top.show{

      opacity:1;
      visibility:visible;
      transform:translateY(0);

      }

      .back-to-top:hover{

      transform:translateY(-2px);

      box-shadow:
      0 10px 25px rgba(91,108,255,0.5),
      0 0 15px rgba(122,136,255,0.6);

      background:linear-gradient(135deg,#4a59e8,#6d7cff);

      }

      /* BACKGROUND CODE PARTÍCULAS */

      #code-particles{
      position:fixed;
      top:0;
      left:0;

      width:100%;
      height:100%;

      background:linear-gradient(135deg,#1d183a,#2c2457);

      z-index:-1;

      overflow:hidden;
      pointer-events:none;
      }

      .code-symbol{

      position:absolute;

      color:rgba(255,255,255,0.08);

      font-family:monospace;

      font-size:22px;

      animation:floatCode linear infinite;

      user-select:none;

      }

      @keyframes floatCode{

      from{
      transform:translateY(100vh);
      }

      to{
      transform:translateY(-100vh);
      }

      }

      section{
      position:relative;
      z-index:1;
      }

      /* SECTION TITLE */

      .section-title{

      font-size:32px;
      font-weight:700;
      color:#2c2457;

      }



      /* COMO FUNCIONA */

      .how-it-works{

      padding:80px 20px;
      background:#f8f9ff;
      color:#2c2457;

      }

      .feature-card{
      background:white;
      border-radius:15px;
      padding:30px;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      transition:all 0.3s ease;
      }

      .feature-card:hover{
      transform:translateY(-8px);
      box-shadow:0 20px 40px rgba(0,0,0,0.15);
      }

      .feature-card h4{

      margin-top:15px;
      font-weight:700;
      color:#2c2457;

      }

      .feature-card p{

      margin-top:10px;
      color:#666;

      }

      .icon{

      font-size:48px;

      }


      /* SKILLS */

      .skills{

      padding:80px 20px;
      background:#2c2457;
      color:white;

      }

      .skill{

      font-size:40px;
      margin-bottom:20px;

      }

      .skill p{

      margin-top:10px;
      font-size:18px;
      font-weight:600;

      }

      .skill-icon{

      width:80px;
      height:80px;
      border-radius:50%;
      background:#443a7a;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:35px;
      margin:auto;

      }


      /* FOOTER */

      footer{

      padding:30px;
      background:#1c173a;
      color:white;

      }
   
/* LOGIN PAGE CSS */
      /* AUTH SECTION */
      .auth-section {
      min-height: 100vh;
      padding-top: 120px;
      }

      .auth-card {
      background: white; /* força branco */
      padding: 40px;
      border-radius: 20px;
      max-width: 420px;
      width: 100%;

      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }

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

      /* FUNDO IGUAL LANDING */
         body {
         padding-top: 90px; /* espaço pra navbar fixa */
      }
      
      .auth-section {
         min-height: 100vh;
         padding-top: 120px;
      }

      /* CONTAINER ESTILO HERO */
      .auth-container {
         background: linear-gradient(135deg,#eef1ff,#dfe6ff);
         padding: 60px;
         border-radius: 25px;
         box-shadow: 0 20px 50px rgba(0,0,0,0.2);
         backdrop-filter: blur(10px);
      }

      /* CARD INTERNO */
      .auth-card {
         background: white;
         padding: 40px;
         border-radius: 20px;
         max-width: 420px;
         width: 100%;

         box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }

      /* TÍTULO */
      .auth-card h2 {
         color: #2c2457;
         font-weight: 800;
      }

      /* TEXTO */
      .auth-subtitle {
         color: #555;
         margin-bottom: 20px;
      }

      .input-wrapper {
         position: relative;
      }

      /* INPUT COM ÍCONE DIREITA */
      .input-with-icon-right {
         padding-right: 40px;
      }

      /* ÍCONE DIREITA */
      .input-icon-right {
         position: absolute;
         right: 12px;
         top: 50%;
         transform: translateY(-50%);
         width: 18px;
         cursor: pointer;
         opacity: 0.6;
      }

      /* FEEDBACK VISUAL PARA INPUTS */
      input:invalid:not(:placeholder-shown) {
         border-color: #ff4d4d;
      }

      input:valid:not(:placeholder-shown) {
         border-color: #28a745;
      }

      .password-reset-preview {
         margin-top: 20px;
         padding: 18px;
         border-radius: 18px;
         background: rgba(91,108,255,0.08);
         border: 1px solid rgba(91,108,255,0.22);
         color: #2c2457;
         text-align: left;
      }

      .password-reset-status {
         color: #5d647d;
         min-height: 24px;
      }
/* FIM LOGIN PAGE */

/* REGRISTRATION PAGE CSS */
      /* erro visual senha */
      input.error {
         border-color: #ff4d4d;
      }
/* FIM REGISTRATION PAGE CSS */

/* ABOUT PAGE CSS */
      /* ABOUT HERO */
      .about-hero {
         padding: 140px 20px 80px;
         background: linear-gradient(135deg,#eef1ff,#dfe6ff);
      }

      .about-hero h1 {
         color: #2c2457;
         font-weight: 800;
      }

      .about-text {
         max-width: 700px;
         margin: auto;
         margin-top: 15px;
         color: #555;
      }

      /* SECTIONS */
      .about-section {
         padding: 80px 20px;
         background: #f8f9ff;
      }

      .about-section h2 {
         color: #2c2457;
      }

      .about-section p {
         color: #555;
      }

      .about-section.alt {
         background: white;
      }

      .about-section.alt h2 {
         color: #2c2457;
      }
      
      .about-section.alt p {
         color: #555;
      }

      /* IMAGENS */
      .about-img {
         max-width: 250px;
      }

      /* CTA */
      .about-cta {
         padding: 80px 20px;
         background: #2c2457;
         color: white;
      }

/* FEATURES PAGE /*
      /* HERO */
      .features-hero {
         padding: 140px 20px 80px;
         background: linear-gradient(135deg,#eef1ff,#dfe6ff);
      }

      .features-hero h1 {
         color: #2c2457;
         font-weight: 800;
      }

      .features-text {
         color: #555;
      }

      /* GRID */
      .features-grid {
         padding: 80px 20px;
         background: #f8f9ff;
      }

      /* CARD */
      .feature-box {
         background: white;
         padding: 30px;
         border-radius: 15px;
         text-align: center;

         box-shadow: 0 10px 25px rgba(0,0,0,0.08);
         transition: 0.3s;
      }

      .feature-box:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 40px rgba(0,0,0,0.15);
      }

      .feature-box h4 {
         margin-top: 15px;
         color: #2c2457;
         font-weight: 700;
      }

      .feature-box p {
         color: #666;
      }

      /* DESTAQUE */
      .features-highlight {
         padding: 80px 20px;
         background: white;
      }

      .features-highlight h2 {
         color: #2c2457;
      }
      .features-highlight p {
         color: #555;
      }
      /* CTA */
      .features-cta {
         padding: 80px 20px;
         background: #2c2457;
         color: white;
      }
/* FIM FEATURES PAGE */

/* DASHBOARD PAGE */
      /* DASHBOARD */

      .dashboard-section {
         padding: 120px 20px;
      }

      /* HEADER */
      .dashboard-header h2,
      .dashboard-header p {
         font-weight: 800;
         color: white ;
      }

      /* CARD PROGRESSO */
      .dashboard-card {
         background: white;
         padding: 30px;
         border-radius: 15px;
         margin-top: 20px;

         box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      }

      /* BARRA */
      .progress {
         height: 10px;
         border-radius: 10px;
      }

      .progress-bar {
         background: linear-gradient(135deg,#5b6cff,#7a88ff);
      }

      /* BOXES */
      .dashboard-box {
         background: white;
         padding: 25px;
         border-radius: 15px;
         text-align: center;

         box-shadow: 0 10px 25px rgba(0,0,0,0.08);
         transition: 0.3s;
      }

      .dashboard-box p {
         color: #666;
      }

      .dashboard-box:hover {
         transform: translateY(-5px);
      }
/* FIM DASHBOARD */

/* CHALENGES PAGE */
   .challenge-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 140px 20px 80px;
   }

   .challenge-card {
      background: linear-gradient(135deg, #eef1ff, #dfe6ff);
      border-radius: 24px;
      padding: 40px;
      max-width: 850px;
      margin: 0 auto;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
   }

   .challenge-category {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #5b6cff;
   }

   .challenge-header h2 {
      color: #2c2457;
      font-weight: 800;
      margin-bottom: 12px;
   }

   .challenge-description {
      color: #555;
      max-width: 650px;
      margin: 0 auto;
   }

   .challenge-content {
      margin-top: 20px;
   }

   /* Botões de alternativas */
   .challenge-option {
      width: 100%;
      text-align: left;
      margin-bottom: 12px;
      border-radius: 14px;
      padding: 14px 18px;
      border: 1px solid #d7dcff;
      background: white;
      color: #2c2457;
      transition: all 0.2s ease;
      font-weight: 500;
   }

   .challenge-option:hover {
      transform: translateY(-2px);
      border-color: #5b6cff;
      box-shadow: 0 10px 20px rgba(91, 108, 255, 0.15);
   }

   /* Área de resposta aberta */
   .challenge-textarea {
      min-height: 140px;
      resize: vertical;
      border-radius: 14px;
      padding: 16px;
      border: 1px solid #d7dcff;
      margin-bottom: 16px;
   }

   .challenge-textarea:focus {
      border-color: #5b6cff;
      box-shadow: 0 0 0 0.2rem rgba(91, 108, 255, 0.2);
      outline: none;
   }

   /* Feedback */
   .feedback-box {
    background: white;
    border-left: 5px solid #5b6cff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);

    color: #2c2457 !important; /* FORÇA a cor */
}

   /* TEXTO DO FEEDBACK */
   .feedback-box p {
      color: #5b6cff !important;
      margin: 0;
   }

   /* XP */
   .feedback-score {
      color: #5b6cff !important;
      font-weight: 700;
      margin-bottom: 8px;
   }

   /* Responsividade */
   @media (max-width: 768px) {
      .challenge-card {
         padding: 24px;
      }

      .challenge-header h2 {
         font-size: 24px;
      }
   }
/* LOADING IA */
.ai-loading {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 4px 0;
}

.ai-loading-text {
   font-size: 0.88rem;
   color: #6c78bd;
   font-weight: 500;
}

.ai-loading-dots {
   display: flex;
   gap: 5px;
   align-items: center;
}

.ai-loading-dots span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #5b6cff;
   display: inline-block;
   animation: aiDotBounce 1.2s ease-in-out infinite;
   opacity: 0;
}

.ai-loading-dots span:nth-child(1) { animation-delay: 0s; }
.ai-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiDotBounce {
   0%, 60%, 100% { opacity: 0.15; transform: translateY(0); }
   30%            { opacity: 1;    transform: translateY(-5px); }
}
/* FIM CHALLENGES PAGE */

/* GAMIFICATION DASHBOARD */
      .dashboard-banner {
         background: linear-gradient(135deg, rgba(14,165,161,0.18), rgba(91,108,255,0.22));
         border: 1px solid rgba(137,148,255,0.35);
         color: white;
         padding: 14px 18px;
         border-radius: 16px;
         margin-bottom: 24px;
         box-shadow: 0 12px 30px rgba(0,0,0,0.14);
      }

      .dashboard-banner-muted {
         background: rgba(255,255,255,0.08);
      }

      .dashboard-kicker {
         text-transform: uppercase;
         letter-spacing: 1.5px;
         font-size: 12px;
         opacity: 0.75;
         margin-bottom: 8px;
      }

      .dashboard-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         gap: 20px;
         margin-bottom: 20px;
      }

      .dashboard-cta {
         white-space: nowrap;
      }

      .progress-card {
         background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(234,239,255,0.95));
      }

      .progress-card-header {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         align-items: flex-start;
      }

      .progress-label {
         color: #6370b6;
         font-size: 12px;
         text-transform: uppercase;
         letter-spacing: 1px;
         margin-bottom: 8px;
      }

      .progress-card h4,
      .progress-copy p,
      .progress-copy small {
         color: #2c2457;
      }

      .progress-copy {
         text-align: right;
      }

      .stat-card {
         height: 100%;
         text-align: left;
      }

      .stat-card h3 {
         color: #2c2457;
         font-size: 34px;
         font-weight: 800;
         margin-bottom: 6px;
      }

      .stat-label {
         color: #6c78bd !important;
         text-transform: uppercase;
         letter-spacing: 1px;
         font-size: 12px;
         margin-bottom: 10px;
      }

      .stat-helper {
         color: #6d6f85 !important;
         font-weight: 500 !important;
         margin-bottom: 0;
      }

      .dashboard-panel {
         background: rgba(255,255,255,0.96);
         border-radius: 18px;
         padding: 26px;
         box-shadow: 0 16px 40px rgba(0,0,0,0.12);
         height: auto;
      }

      .dashboard-panel-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         gap: 16px;
         margin-bottom: 18px;
      }

      .dashboard-panel-header h3 {
         color: #2c2457;
         font-weight: 800;
         margin-bottom: 4px;
      }

      .dashboard-panel-header p {
         color: #666;
         margin-bottom: 0;
      }

      .badge-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 14px;
      }

      .badge-card {
         border-radius: 16px;
         padding: 18px;
         display: flex;
         gap: 14px;
         align-items: flex-start;
         border: 1px solid #e0e4ff;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .badge-card.unlocked {
         background: linear-gradient(135deg, #eef1ff, #ffffff);
         box-shadow: 0 12px 24px rgba(91,108,255,0.12);
      }

      .badge-card.locked {
         background: #f6f7fb;
         opacity: 0.75;
      }

      .badge-card:hover {
         transform: translateY(-3px);
      }

      .badge-mark {
         width: 44px;
         height: 44px;
         border-radius: 14px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: linear-gradient(135deg, #5b6cff, #7a88ff);
         color: white;
         font-weight: 800;
         flex-shrink: 0;
      }

      .badge-card h4 {
         color: #2c2457;
         font-size: 18px;
         margin-bottom: 4px;
      }

      .badge-card p {
         color: #5d647d !important;
         font-weight: 500 !important;
         margin-bottom: 6px;
      }

      .badge-body {
         display: flex;
         flex-direction: column;
         min-width: 0;
      }

      .badge-footer {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 8px;
         flex-wrap: wrap;
         margin-top: 2px;
      }

      .badge-status {
         display: inline-flex;
         align-items: center;
         padding: 5px 10px;
         border-radius: 999px;
         background: rgba(91,108,255,0.1);
         color: #5b6cff;
         font-size: 12px;
         font-weight: 700;
      }

      .badge-rarity {
         display: inline-flex;
         align-items: center;
         padding: 3px 10px;
         border-radius: 999px;
         font-size: 11px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.05em;
      }

      .badge-rarity.rarity-comum   { background: rgba(107,114,128,0.12); color: #6b7280; }
      .badge-rarity.rarity-raro    { background: rgba(59,130,246,0.12);  color: #3b82f6; }
      .badge-rarity.rarity-epico   { background: rgba(139,92,246,0.12);  color: #8b5cf6; }
      .badge-rarity.rarity-lendario{ background: rgba(217,119,6,0.12);   color: #d97706; }

      /* bordas sutis por raridade */
      .badge-card.unlocked.rarity-raro    { box-shadow: 0 12px 24px rgba(59,130,246,0.10); }
      .badge-card.unlocked.rarity-epico   { box-shadow: 0 12px 28px rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.2); }
      .badge-card.unlocked.rarity-lendario{
         box-shadow: 0 14px 32px rgba(217,119,6,0.16);
         border: 1px solid rgba(217,119,6,0.25);
         background: linear-gradient(135deg, #fffbeb, #ffffff);
      }

      .dashboard-empty {
         color: #5d647d;
         margin-bottom: 0;
      }

      .category-progress {
         display: grid;
         gap: 16px;
      }

      .category-progress-item {
         padding: 16px;
         border-radius: 14px;
         background: #f7f8ff;
      }

      .category-progress-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 12px;
         color: #2c2457;
         margin-bottom: 10px;
      }

      .avatar-builder {
         display: grid;
         gap: 20px;
      }

      .avatar-preview {
         --avatar-primary: #5b6cff;
         --avatar-secondary: #8994ff;
         --avatar-skin: #f2c7a5;
         --avatar-skin-neck: #e6b792;
         --avatar-hair: #2d2842;
         --avatar-bg-start: rgba(137,148,255,0.35);
         --avatar-bg-end: rgba(91,108,255,0.05);
         --avatar-glow: rgba(91,108,255,0.25);
         position: relative;
         width: 220px;
         height: 220px;
         margin: 0 auto;
         border-radius: 28px;
         background: radial-gradient(ellipse at 40% 30%, var(--avatar-bg-start), var(--avatar-bg-end) 70%);
         overflow: hidden;
         border: 1.5px solid rgba(137,148,255,0.35);
         box-shadow:
            0 0 0 1px rgba(91,108,255,0.08),
            0 16px 56px var(--avatar-glow),
            inset 0 1px 0 rgba(255,255,255,0.08);
      }

      .avatar-preview::before {
         content: '';
         position: absolute;
         bottom: 18px;
         left: 50%;
         transform: translateX(-50%);
         width: 100px;
         height: 40px;
         border-radius: 50%;
         background: var(--avatar-primary);
         filter: blur(22px);
         opacity: 0.3;
         z-index: 0;
         pointer-events: none;
      }

      .avatar-orbit {
         position: absolute;
         inset: 18px;
         border-radius: 50%;
         border: 1px dashed rgba(137,148,255,0.4);
         animation: orbit-spin 18s linear infinite;
      }

      .avatar-character {
         position: absolute;
         inset: 0;
         animation: avatar-float 3.5s ease-in-out infinite;
      }

      .avatar-shadow {
         position: absolute;
         width: 118px;
         height: 24px;
         left: 51px;
         bottom: 34px;
         border-radius: 50%;
         background: rgba(27,31,58,0.16);
         animation: shadow-breathe 3.5s ease-in-out infinite;
         transform-origin: center;
      }

      .avatar-head {
         position: absolute;
         width: 88px;
         height: 94px;
         left: 66px;
         top: 52px;
         border-radius: 44px 44px 38px 38px;
         background: var(--avatar-skin);
         z-index: 3;
      }

      .avatar-head::after {
         content: '';
         position: absolute;
         width: 24px;
         height: 14px;
         top: 12px;
         left: 12px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.22);
         transform: rotate(-20deg);
      }

      .avatar-neck {
         position: absolute;
         width: 26px;
         height: 24px;
         left: 97px;
         top: 130px;
         border-radius: 8px;
         background: var(--avatar-skin-neck);
         z-index: 2;
      }

      .avatar-torso {
         position: absolute;
         width: 128px;
         height: 104px;
         left: 46px;
         top: 144px;
         border-radius: 28px 28px 18px 18px;
         background: linear-gradient(180deg, var(--avatar-secondary), var(--avatar-primary));
         z-index: 1;
      }

      .avatar-eye {
         position: absolute;
         width: 10px;
         height: 10px;
         top: 98px;
         border-radius: 50%;
         background: #1f2442;
         z-index: 5;
      }

      .avatar-eye::after {
         content: '';
         position: absolute;
         width: 3px;
         height: 3px;
         top: 1px;
         right: 1px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.85);
      }

      .avatar-eye-left {
         left: 92px;
      }

      .avatar-eye-right {
         left: 118px;
      }

      .avatar-mouth {
         position: absolute;
         width: 22px;
         height: 10px;
         left: 99px;
         top: 118px;
         border-bottom: 3px solid #9d5e55;
         border-radius: 0 0 24px 24px;
         z-index: 5;
      }

      .avatar-hair,
      .avatar-fringe,
      .avatar-accessory::before,
      .avatar-accessory::after {
         position: absolute;
         content: "";
      }

      .avatar-hair {
         left: 56px;
         top: 34px;
         width: 108px;
         height: 70px;
         background: var(--avatar-hair);
         z-index: 2;
      }

      .avatar-fringe {
         left: 66px;
         top: 60px;
         width: 88px;
         height: 20px;
         background: var(--avatar-hair);
         z-index: 4;
         border-radius: 0 0 16px 16px;
      }

      /* base para pseudo-elementos de cabelo */
      .avatar-hair::before,
      .avatar-hair::after,
      .avatar-fringe::before {
         content: "";
         position: absolute;
         background: var(--avatar-hair);
      }

      /* ── Curto ─────────────────────────────────────── */
      .hair-short .avatar-hair {
         left: 58px;
         top: 28px;
         width: 104px;
         height: 58px;
         border-radius: 52px 52px 18px 18px / 54px 54px 10px 10px;
      }

      .hair-short .avatar-fringe {
         left: 66px;
         top: 52px;
         width: 88px;
         height: 24px;
         border-radius: 0 0 18px 18px;
      }

      /* ── Longo ─────────────────────────────────────── */
      .hair-long .avatar-hair {
         left: 56px;
         top: 26px;
         width: 108px;
         height: 58px;
         border-radius: 54px 54px 12px 12px / 52px 52px 8px 8px;
      }

      .hair-long .avatar-hair::before {
         width: 24px;
         height: 126px;
         left: -2px;
         top: 36px;
         border-radius: 14px 6px 16px 18px;
      }

      .hair-long .avatar-hair::after {
         width: 24px;
         height: 126px;
         right: -2px;
         top: 36px;
         border-radius: 6px 14px 18px 16px;
      }

      .hair-long .avatar-fringe {
         left: 66px;
         top: 52px;
         width: 88px;
         height: 26px;
         border-radius: 0 0 20px 20px;
      }

      /* ── Cacheado ───────────────────────────────────── */
      .hair-curly .avatar-hair {
         left: 44px;
         top: 20px;
         width: 132px;
         height: 78px;
         border-radius: 50%;
         box-shadow:
           -24px 20px 0  2px var(--avatar-hair),
            24px 20px 0  2px var(--avatar-hair),
           -12px -8px 0  6px var(--avatar-hair),
            12px -8px 0  6px var(--avatar-hair),
              0  12px 0  4px var(--avatar-hair);
      }

      .hair-curly .avatar-fringe {
         left: 68px;
         top: 52px;
         width: 84px;
         height: 18px;
         border-radius: 0 0 24px 24px;
      }

      /* ── Curto Cacheado ─────────────────────────────── */
      .hair-shortcurly .avatar-hair {
         left: 52px;
         top: 22px;
         width: 116px;
         height: 56px;
         border-radius: 50%;
         box-shadow:
           /* volume lateral compacto */
           -16px 10px 0  0px var(--avatar-hair),
            16px 10px 0  0px var(--avatar-hair),
           /* cachos superiores */
            -8px -8px 0  5px var(--avatar-hair),
             8px -8px 0  5px var(--avatar-hair),
              0  -10px 0  3px var(--avatar-hair),
           /* cachos nas bordas — menores via spread negativo */
           -22px  2px 0 -4px var(--avatar-hair),
            22px  2px 0 -4px var(--avatar-hair);
      }

      .hair-shortcurly .avatar-fringe {
         left: 68px;
         top: 52px;
         width: 84px;
         height: 18px;
         border-radius: 0 0 26px 26px;
      }

      /* ── Ondulado ───────────────────────────────────── */
      .hair-wavy .avatar-hair {
         left: 54px;
         top: 26px;
         width: 112px;
         height: 62px;
         border-radius: 56px 56px 14px 14px / 52px 52px 8px 8px;
      }

      .hair-wavy .avatar-hair::before {
         width: 20px;
         height: 90px;
         left: -2px;
         top: 36px;
         border-radius: 12px 6px 20px 14px;
      }

      .hair-wavy .avatar-hair::after {
         width: 20px;
         height: 90px;
         right: -2px;
         top: 36px;
         border-radius: 6px 12px 14px 20px;
      }

      .hair-wavy .avatar-fringe {
         left: 66px;
         top: 52px;
         width: 88px;
         height: 26px;
         border-radius: 0 0 22px 22px;
      }

      /* ── Tranças ────────────────────────────────────── */
      .hair-braids .avatar-hair {
         left: 60px;
         top: 28px;
         width: 100px;
         height: 52px;
         border-radius: 50px 50px 10px 10px / 48px 48px 7px 7px;
      }

      .hair-braids .avatar-hair::before {
         width: 15px;
         height: 18px;
         left: 4px;
         top: 38px;
         border-radius: 7px;
         box-shadow:
           0 24px 0 0 var(--avatar-hair),
           0 48px 0 0 var(--avatar-hair),
           0 72px 0 0 var(--avatar-hair),
           0 96px 0 0 var(--avatar-hair),
           0 115px 0 -1px var(--avatar-hair);
      }

      .hair-braids .avatar-hair::after {
         width: 15px;
         height: 18px;
         right: 4px;
         top: 38px;
         border-radius: 7px;
         box-shadow:
           0 24px 0 0 var(--avatar-hair),
           0 48px 0 0 var(--avatar-hair),
           0 72px 0 0 var(--avatar-hair),
           0 96px 0 0 var(--avatar-hair),
           0 115px 0 -1px var(--avatar-hair);
      }

      .hair-braids .avatar-fringe {
         left: 66px;
         top: 52px;
         width: 88px;
         height: 16px;
         border-radius: 0 0 12px 12px;
      }

      /* ── Rabo de cavalo ─────────────────────────────── */
      .hair-ponytail .avatar-hair {
         left: 60px;
         top: 30px;
         width: 100px;
         height: 48px;
         border-radius: 50px 50px 8px 8px / 46px 46px 5px 5px;
      }

      .hair-ponytail .avatar-hair::before {
         width: 18px;
         height: 80px;
         right: -20px;
         top: 18px;
         border-radius: 10px 8px 16px 12px;
         transform: rotate(6deg);
         transform-origin: top center;
      }

      .hair-ponytail .avatar-hair::after {
         width: 22px;
         height: 10px;
         right: -14px;
         top: 20px;
         border-radius: 5px;
         background: #1f2442;
      }

      .hair-ponytail .avatar-fringe {
         left: 66px;
         top: 52px;
         width: 88px;
         height: 14px;
         border-radius: 0 0 14px 14px;
      }

      /* ── Coque ──────────────────────────────────────── */
      .hair-bun .avatar-hair {
         left: 64px;
         top: 40px;
         width: 92px;
         height: 36px;
         border-radius: 46px 46px 8px 8px / 40px 40px 5px 5px;
      }

      .hair-bun .avatar-hair::before {
         width: 44px;
         height: 44px;
         left: 50%;
         top: -40px;
         transform: translateX(-50%);
         border-radius: 50%;
      }

      .hair-bun .avatar-hair::after {
         width: 24px;
         height: 14px;
         left: 50%;
         top: -14px;
         transform: translateX(-50%);
         border-radius: 50%;
      }

      .hair-bun .avatar-fringe {
         left: 66px;
         top: 52px;
         width: 88px;
         height: 12px;
         border-radius: 0 0 12px 12px;
      }

      /* ── Pontudo ────────────────────────────────────── */
      .hair-spiky .avatar-hair {
         left: 50px;
         top: 16px;
         width: 120px;
         height: 72px;
         clip-path: polygon(
           0% 100%,   0% 54%,
           3% 40%,    9% 20%,   15% 38%,
           19% 28%,  27%  4%,   33% 26%,
           39% 14%,  50%  0%,   61% 14%,
           67% 26%,  73%  4%,   81% 28%,
           85% 38%,  91% 20%,   97% 40%,
           100% 54%, 100% 100%
         );
      }

      .hair-spiky .avatar-fringe {
         /* linha do cabelo na testa — sem franja, só a base dos espinhos */
         left: 62px;
         top: 52px;
         width: 96px;
         height: 22px;
         border-radius: 2px 2px 10px 10px;
      }

      /* ── Moicano ────────────────────────────────────── */
      .hair-mohawk .avatar-hair {
         left: 94px;
         top: 12px;
         width: 32px;
         height: 66px;
         border-radius: 18px 18px 8px 8px / 24px 24px 6px 6px;
      }

      .hair-mohawk .avatar-hair::before {
         width: 20px;
         height: 34px;
         left: -14px;
         top: 22px;
         border-radius: 12px 0 8px 14px;
         opacity: 0.85;
      }

      .hair-mohawk .avatar-hair::after {
         width: 20px;
         height: 34px;
         right: -14px;
         top: 22px;
         border-radius: 0 12px 14px 8px;
         opacity: 0.85;
      }

      .hair-mohawk .avatar-fringe {
         /* faixa estreita do moicano na linha da testa */
         left: 94px;
         top: 52px;
         width: 32px;
         height: 16px;
         border-radius: 2px 2px 8px 8px;
      }

      .outfit-jacket .avatar-torso {
         background:
           linear-gradient(90deg, #202648 0 20%, var(--avatar-secondary) 20% 80%, #202648 80% 100%);
      }

      .outfit-blazer .avatar-torso {
         background: #1f2442;
      }

      /* camisa visível pelo decote do blazer */
      .outfit-blazer .avatar-torso::before {
         content: '';
         position: absolute;
         width: 40px;
         height: 52px;
         left: 44px;
         top: 0;
         background: linear-gradient(180deg, #f4f5ff, #dde0f5);
         clip-path: polygon(15% 0%, 85% 0%, 100% 35%, 50% 70%, 0% 35%);
      }

      .outfit-cape .avatar-torso {
         background:
           linear-gradient(180deg, var(--avatar-primary) 0 45%, #10172f 45% 100%);
         box-shadow:
           -36px 18px 0 -20px rgba(16,23,47,0.95),
           36px 18px 0 -20px rgba(16,23,47,0.95);
      }

      .avatar-accessory {
         position: absolute;
         inset: 0;
         z-index: 6;
      }

      .accessory-none .avatar-accessory::before,
      .accessory-none .avatar-accessory::after {
         display: none;
      }

      .accessory-glasses .avatar-accessory::before {
         width: 22px;
         height: 14px;
         left: 86px;
         top: 94px;
         border: 3px solid #1f2442;
         border-radius: 8px;
         background: transparent;
      }

      .accessory-glasses .avatar-accessory::after {
         width: 22px;
         height: 14px;
         left: 110px;
         top: 94px;
         border: 3px solid #1f2442;
         border-radius: 8px;
         background: transparent;
         box-shadow: -8px 0 0 -5px #1f2442;
      }

      .accessory-headset .avatar-accessory::before {
         /* arco da tiara sobre a cabeça */
         width: 96px;
         height: 52px;
         left: 62px;
         top: 36px;
         border: 6px solid #1f2442;
         border-bottom: none;
         border-radius: 48px 48px 0 0;
         background: transparent;
      }

      .accessory-headset .avatar-accessory::after {
         /* orelheira esquerda; direita via box-shadow */
         width: 20px;
         height: 30px;
         left: 52px;
         top: 85px;
         border-radius: 8px;
         background: #1f2442;
         box-shadow: 96px 0 0 0 #1f2442;
      }

      .accessory-badge .avatar-accessory::before {
         width: 24px;
         height: 24px;
         left: 134px;
         top: 174px;
         border-radius: 50%;
         background: #f97316;
         box-shadow: 0 0 0 6px rgba(249,115,22,0.22);
      }

      .accessory-badge .avatar-accessory::after {
         display: none;
      }

      .accessory-crown .avatar-accessory::before {
         width: 78px;
         height: 38px;
         left: 72px;
         top: 28px;
         background: linear-gradient(180deg, #f5d36f, #d4a017);
         clip-path: polygon(0 100%, 0 48%, 16% 70%, 30% 12%, 45% 68%, 58% 0, 72% 68%, 88% 18%, 100% 70%, 100% 100%);
      }

      .accessory-crown .avatar-accessory::after {
         width: 78px;
         height: 8px;
         left: 72px;
         top: 58px;
         background: #d4a017;
         border-radius: 999px;
      }

      /* --- Braços --- */

      .avatar-arm {
         position: absolute;
         width: 36px;
         height: 64px;
         top: 146px;
         border-radius: 16px 16px 12px 12px;
         background: linear-gradient(180deg, var(--avatar-secondary), var(--avatar-primary));
         z-index: 1;
      }

      .avatar-arm::after {
         content: '';
         position: absolute;
         width: 24px;
         height: 20px;
         bottom: -5px;
         left: 50%;
         transform: translateX(-50%);
         border-radius: 40% 40% 50% 50%;
         background: var(--avatar-skin);
      }

      .avatar-arm-left {
         left: 18px;
         transform: rotate(-6deg);
         transform-origin: top center;
      }

      .avatar-arm-right {
         left: 166px;
         transform: rotate(6deg);
         transform-origin: top center;
      }

      .outfit-jacket .avatar-arm {
         background: #202648;
      }

      .outfit-blazer .avatar-arm {
         background: #1f2442;
      }

      .outfit-cape .avatar-arm {
         background: linear-gradient(180deg, var(--avatar-primary) 0 45%, #10172f 45% 100%);
      }

      /* --- Expressões faciais --- */

      .mood-cool .avatar-eye {
         height: 6px;
         border-radius: 50% 50% 0 0;
      }

      .mood-cool .avatar-mouth {
         width: 16px;
         left: 106px;
         border-radius: 0 0 20px 4px;
      }

      .mood-focused .avatar-eye {
         height: 7px;
         border-radius: 4px;
      }

      .mood-focused .avatar-mouth {
         width: 14px;
         height: 0;
         top: 122px;
         border-bottom: 2px solid #9d5e55;
         border-radius: 0;
      }

      .mood-surprised .avatar-eye {
         width: 12px;
         height: 12px;
         top: 96px;
      }

      .mood-surprised .avatar-mouth {
         width: 14px;
         height: 14px;
         top: 116px;
         left: 103px;
         border: 3px solid #9d5e55;
         border-radius: 50%;
      }

      /* --- Partículas do orbit --- */

      .avatar-particle {
         position: absolute;
         width: 7px;
         height: 7px;
         border-radius: 50%;
         background: var(--avatar-primary);
         opacity: 0.8;
         box-shadow: 0 0 8px 2px var(--avatar-primary);
      }

      .avatar-particle-1 {
         top: -3px;
         left: calc(50% - 3px);
      }

      .avatar-particle-2 {
         top: 135px;
         left: 168px;
      }

      .avatar-particle-3 {
         top: 135px;
         left: 9px;
      }

      @keyframes avatar-float {
         0%, 100% { transform: translateY(0); }
         50%       { transform: translateY(-7px); }
      }

      @keyframes orbit-spin {
         from { transform: rotate(0deg); }
         to   { transform: rotate(360deg); }
      }

      @keyframes shadow-breathe {
         0%, 100% { transform: scaleX(1);    opacity: 0.16; }
         50%       { transform: scaleX(0.72); opacity: 0.07; }
      }

      .avatar-color-swatches {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         padding: 4px 0 2px;
      }

      .avatar-swatch {
         width: 28px;
         height: 28px;
         border-radius: 50%;
         border: 3px solid transparent;
         background: var(--swatch-color, #5b6cff);
         cursor: pointer;
         transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
         outline: none;
         padding: 0;
         flex-shrink: 0;
      }

      .avatar-swatch:hover:not([disabled]) {
         transform: scale(1.2);
      }

      .avatar-swatch.selected {
         border-color: #fff;
         box-shadow: 0 0 0 3px var(--swatch-color, #5b6cff);
         transform: scale(1.12);
      }

      .avatar-swatch[disabled] {
         opacity: 0.35;
         cursor: not-allowed;
         filter: grayscale(0.6);
      }

      .avatar-form .form-label {
         color: #2c2457;
         font-weight: 700;
      }

      .dashboard-mini-list {
         display: grid;
         gap: 12px;
      }

      .mini-row {
         display: flex;
         justify-content: space-between;
         gap: 12px;
         padding: 14px 16px;
         border-radius: 14px;
         background: #f7f8ff;
         color: #2c2457;
      }

      .mini-row strong {
         font-weight: 800;
      }

      .result-breakdown {
         list-style: none;
         padding: 0;
         margin: 16px 0 0;
         display: grid;
         gap: 8px;
      }

      .result-breakdown li {
         display: flex;
         justify-content: space-between;
         gap: 12px;
         padding: 10px 12px;
         border-radius: 12px;
         background: #f4f6ff;
         color: #2c2457;
      }

      .feedback-consequence {
         margin-top: 12px !important;
      }

      .result-badges {
         margin-top: 14px;
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
      }

      .badge-pill {
         display: inline-flex;
         align-items: center;
         padding: 8px 12px;
         border-radius: 999px;
         background: rgba(14,165,161,0.12);
         color: #0f766e;
         font-weight: 700;
      }

      @media (max-width: 991px) {
         .dashboard-header,
         .progress-card-header {
            flex-direction: column;
            align-items: flex-start;
         }

         .progress-copy {
            text-align: left;
         }
      }

      @media (max-width: 576px) {
         .avatar-preview {
            transform: scale(0.86);
            transform-origin: top center;
            margin-bottom: -31px;
         }
      }

      @media (max-width: 767px) {
         /* Features page */
         .features-hero {
            padding: 100px 16px 48px;
         }

         .features-hero h1 {
            font-size: 26px;
         }

         .features-text {
            font-size: 15px;
         }

         .features-grid {
            padding: 48px 16px;
         }

         .features-highlight {
            padding: 48px 16px;
         }

         .features-highlight h2 {
            font-size: 20px;
         }

         .features-cta {
            padding: 48px 16px;
         }

         /* About page */
         .about-hero {
            padding: 100px 16px 48px;
         }

         .about-hero h1 {
            font-size: 26px;
         }

         .about-text {
            font-size: 15px;
         }

         .about-section {
            padding: 48px 16px;
         }

         .about-img {
            max-width: 160px;
            width: 100%;
            margin-top: 16px;
         }

         .about-cta {
            padding: 48px 16px;
         }
      }

      body {
         padding-top: var(--navbar-height);
      }