:root {
    /* Tus nuevos colores */
    --verde-oscuro: #0F3C3D;
    --verde-claro: #285D5E;
  }
  
  *{
      margin:0;
      padding:0;
      box-sizing:border-box;
  }
  
  @font-face {
      font-family: 'Condor-Compressed';
      src: url('../Recursos/fonts/Condor-CompressedMedium-Testing.ttf') format('truetype'),
          url('../Recursos/fonts/Condor-CompressedMedium-Testing.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    
   @font-face {
      font-family: 'Condor-noCompressed';
      src: url('../Recursos/fonts/Condor-CompressedLight-Testing.ttf') format('truetype'),
          url('../Recursos/fonts/Condor-CompressedLight-Testing.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    
   @font-face {
      font-family: 'Bicyclette';
      src: url('../Recursos/fonts/bicyclette/fonnts.com-Bicyclette_Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    
    
   /*Size Text   */
   p, span, a, li, ul, ol,
   label, small, strong, em, input, textarea, select,
   th, td, caption, figcaption,
   blockquote, pre, code, h1, h2 {
        font-family: 'Bicyclette', sans-serif !important;
        font-size: 20px;
   }
   a, select, p{
        font-size: 14px  !important;
   }
   h3 {
        font-family: 'Condor-Compressed' !important;
        font-size: 30px;
   }
  
  body{
      /* Cambiado al verde más profundo para el fondo general */
      background: #07191A; 
      font-family:'Poppins', sans-serif;
      color:white;
      display:flex;
      justify-content:center;
      padding:30px 15px;
  }
  
  /* CONTAINER */
  .mobile-container{
      width:100%;
      max-width:420px;
      min-height:100vh;
      
      /* Gradiente suave usando tus nuevos tonos de verde */
      background: linear-gradient(
          180deg,
          var(--verde-oscuro) 0%,
          #07191A 100%
      );
  
      border-radius:35px;
      padding:24px 18px 120px;
      border: 1px solid rgba(201,154,73,0.2);
  }
  
  /* HEADER */
  .logo{
      width: 200px;
      letter-spacing:4px;
      margin-bottom:5px;
  }
  
  .welcome h1{
      font-size:24px;
      margin-bottom:8px;
  }
  
  .welcome p{
      color:#c9c9c9;
      font-size:14px;
  }
  
  /* CARD */
  .card{
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(201,154,73,0.15);
      border-radius:24px;
      padding:20px;
      margin-top:22px;
  }
  
  /* CARD HEADER */
  .card-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:18px;
  }
  
  .card-header h2{
      font-size:18px;
  }
  
  .card-header span{
      color:#c99a49;
      font-weight:600;
  }
  
  /* PROGRESS */
  .progress-bar{
      width:100%;
      height:12px;
      /* Ajustado para que la barra vacía combine con el fondo */
      background: rgba(255, 255, 255, 0.1);
      border-radius:20px;
      overflow:hidden;
      margin-bottom:22px;
  }
  
  .progress-fill{
      height:100%;
      background: linear-gradient(
          90deg,
          #8b6b2e,
          #c99a49
      );
      border-radius:20px;
  }
  
  /* STEPPER */
  .stepper-wrapper{
      display:flex;
      justify-content:space-between;
      gap:10px;
  }
  
  .stepper-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      flex:1;
      position:relative;
  }
  
  .step-counter{
      width:34px;
      height:34px;
      border-radius:50%;
      /* Círculos del paso usando el verde claro de base */
      background: var(--verde-claro);
      border: 2px solid rgba(255, 255, 255, 0.2);
      display:flex;
      justify-content:center;
      align-items:center;
      color:white;
      margin-bottom:8px;
  }
  
  .step-name{
      font-size:12px;
      text-align:center;
      color:#9d9d9d;
  }
  
  .stepper-item.completed .step-counter{
      background:#c99a49;
      color: var(--verde-oscuro); /* El número/icono interno ahora contrasta con el verde oscuro */
      border:none;
  }
  
  .stepper-item.completed .step-name{
      color:white;
  }
  
  /* TASKS */
  .cardlist{
      display:flex;
      justify-content:space-between;
      align-items:center;
      background: rgba(255,255,255,0.04);
      padding:14px;
      border-radius:20px;
      margin-bottom:14px;
  }
  
  .cardlist-inner{
      display:flex;
      align-items:center;
      gap:14px;
  }
  
  .icon-box{
      width:50px;
      height:50px;
      border-radius:16px;
      /* Contenedor del icono adaptado a tu paleta */
      background: rgba(40, 93, 94, 0.3);
      display:flex;
      justify-content:center;
      align-items:center;
  }
  
  .survey-icon{
      font-size:22px;
      color:#c99a49;
  }
  
  .main-text{
      font-size:15px;
      font-weight:600;
  }
  
  .sub-text{
      font-size:12px;
      color:#a4a4a4;
  }
  
  .btn-survey{
      font-family: 'Bicyclette', sans-serif;
      font-size:12px;
      font-weight:600;
      line-height:1;
      border:none;
      background:#c99a49;
      color: var(--verde-oscuro);
      padding:10px 18px;
      border-radius:14px;
      cursor:pointer;
      min-width:110px;
      height:42px;
  }
  
  .completed-btn{
      /* El botón completado ahora usa un tono verde claro brillante que resalta en el entorno oscuro */
      background: #397d7f;
      color: #e2fdfd;
  }
  
  /* TITLES */
  .section-title{
      margin-top:30px;
      margin-bottom:18px;
      font-size:18px;
      font-weight:600;
  }
  
  /* REWARD CARDS */
  .reward-card{
      background: rgba(255,255,255,0.05);
      border-radius:26px;
      margin-bottom:20px;
      overflow:hidden;
      border: 1px solid rgba(201,154,73,0.2);
      transition:0.35s;
  }
  
  .reward-card:hover{
      transform:translateY(-4px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  }
  
  /* IMAGE */
  .reward-image{
      width:100%;
      height:180px;
  }
  
  .reward-image img{
      width:100%;
      height:100%;
      object-fit:cover;
  }
  
  /* CONTENT */
  .reward-content{
      padding:18px;
  }
  
  .reward-content h3{
      margin-bottom:10px;
  }
  
  .reward-content p{
      color:#c8c8c8;
      font-size:14px;
      line-height:1.5;
      margin-bottom:18px;
  }
  
  /* BUTTON */
  .reward-content button{
      width:100%;
      border:none;
      background:#c99a49;
      color: var(--verde-oscuro);
      padding:14px;
      border-radius:16px;
      font-weight:600;
      cursor:pointer;
  }
  
  .reward-card.locked{
      opacity:0.6;
  }
  
  .reward-card.locked button{
      /* El botón bloqueado se integra perfectamente con el fondo oscuro actual */
      background: #193334;
      color: #708c8d;
  }
  
  /* RESPONSIVE */
  @media(max-width:480px){
      body{
          padding:0;
      }
  
      .mobile-container{
          border-radius:0;
      }
  }