.mlc-wrapper {
    /* --mlc-navbar-height é calculado via JS a partir da navbar real da página */
    min-height: calc(100vh - var(--mlc-navbar-height, 88px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vh, 32px) 16px;
    box-sizing: border-box;
    transition: padding-top 0.15s ease;
  }
 
  .mlc-secao {
    background: linear-gradient(120deg, #1e3a8a, #0f9e79);
    border-radius: 20px;
    padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 28px);
    text-align: center;
    color: #fff;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    box-sizing: border-box;
  }
 
  .mlc-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    margin-bottom: clamp(6px, 1.5vh, 10px);
  }
 
  .mlc-titulo {
    font-size: clamp(18px, 3.2vw, 24px);
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.25;
  }
 
  .mlc-subtitulo {
    font-size: clamp(12px, 1.6vw, 13px);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: clamp(14px, 3vh, 26px);
  }
 
  .mlc-circulo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(8px, 2vh, 14px);
    width: clamp(120px, 22vw, 160px);
    margin-left: auto;
    margin-right: auto;
  }
 
  .mlc-circulo-wrap svg {
    width: 100%;
    height: auto;
    display: block;
  }
 
  #mlcProgressoCirculo {
    transition: stroke-dashoffset 0.4s ease;
  }
 
  .mlc-faltam {
    font-size: clamp(15px, 2.2vw, 18px);
    font-weight: 700;
    margin-bottom: 4px;
  }
 
  .mlc-destaque {
    color: #fbbf24;
  }
 
  .mlc-faltam-legenda {
    font-size: clamp(11px, 1.4vw, 12px);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: clamp(14px, 3vh, 24px);
  }
 
  .mlc-relogio {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 10px);
    margin-bottom: clamp(14px, 3vh, 26px);
    flex-wrap: wrap;
  }
 
  .mlc-relogio-bloco {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: clamp(8px, 1.5vw, 10px) clamp(10px, 2.5vw, 14px);
    min-width: clamp(48px, 8vw, 60px);
  }
 
  .mlc-relogio-num {
    font-size: clamp(16px, 2.6vw, 20px);
    font-weight: 800;
  }
 
  .mlc-relogio-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
  }
 
  .mlc-ja-disponivel {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px;
    max-width: 380px;
    margin: 0 auto 20px;
    font-size: 14px;
  }
 
  .mlc-ja-disponivel i {
    margin-right: 6px;
  }
 
  .mlc-ja-disponivel a {
    color: #fbbf24;
    font-weight: 700;
    text-decoration: underline;
  }
 
  .mlc-form {
    display: flex;
    gap: 8px;
    max-width: 380px;
    margin: 0 auto;
  }
 
  .mlc-input {
    flex: 1;
    border-radius: 10px;
    border: none;
    padding: 0 14px;
    height: 42px;
    font-size: 13px;
    color: #111827;
  }
 
  .mlc-btn {
    background: #fbbf24;
    color: #78350f;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
  }
 
  .mlc-btn:hover {
    background: #f5b40c;
  }
 
  .mlc-btn:disabled {
    opacity: 0.7;
    cursor: default;
  }
 
  .mlc-erro {
    color: #fecaca;
    font-size: 12px;
    margin-top: 8px;
  }
 
  .mlc-sucesso {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    max-width: 380px;
    margin: 0 auto;
    font-size: 13px;
  }
 
  .mlc-sucesso i {
    margin-right: 6px;
  }
 
  @media (max-width: 480px) {
    .mlc-form {
      flex-direction: column;
    }
  }
 
  /* Telas com pouca altura (ex: notebook 13", zoom alto, janela pequena):
     reduz respiro vertical pra continuar cabendo sem cortar o botão. */
  @media (max-height: 700px) {
    .mlc-wrapper {
      padding: 12px 16px;
    }
    .mlc-secao {
      padding: clamp(14px, 3vh, 22px) clamp(18px, 4vw, 28px);
    }
    .mlc-circulo-wrap {
      width: clamp(90px, 16vw, 120px);
    }
    .mlc-subtitulo,
    .mlc-faltam-legenda {
      margin-bottom: clamp(8px, 1.5vh, 14px);
    }
    .mlc-relogio {
      margin-bottom: clamp(10px, 1.5vh, 16px);
    }
  }