/* ==========================================
   MOVIMENTO EM SÉRIE
   IDENTIDADE VISUAL
========================================== */

:root {

  --terracota: #B85F43;
  --terracota-escuro: #984B35;

  --oliva: #7C8057;
  --oliva-claro: #E5E3D2;

  --areia: #F5F0E7;
  --areia-card: #FBF8F2;

  --texto: #35312D;
  --texto-suave: #77716A;

  --branco: #FFFFFF;
  --borda: #E8E0D5;

  --sombra:
    0 8px 24px rgba(74, 61, 50, 0.08);

  --raio: 22px;

}


/* ==========================================
   RESET
========================================== */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {

  margin: 0;

  min-height: 100vh;

  background: var(--areia);

  color: var(--texto);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}


button {
  font-family: inherit;
}


/* ==========================================
   APP
========================================== */

#app {

  position: relative;

  width: 100%;
  max-width: 520px;

  min-height: 100vh;

  margin: 0 auto;

  padding-bottom: 90px;

  background: var(--areia);

}


/* ==========================================
   CABEÇALHO
========================================== */

.topo {

  min-height: 120px;

  padding:
    24px
    22px
    10px;

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

}


.logo-principal {

  display: block;

  width: 100%;
  max-width: 190px;

  height: auto;

  object-fit: contain;

}


/* ==========================================
   TELAS
========================================== */

.tela {
  display: none;
}


.tela.ativa {
  display: block;
}


.conteudo {

  width: calc(100% - 36px);
  max-width: 480px;

  margin: 0 auto;

}


/* ==========================================
   BOAS-VINDAS
========================================== */

.boas-vindas {

  margin:
    24px
    0
    22px;

}


.boas-vindas h1 {

  margin:
    0
    0
    7px;

  font-size: 26px;
  line-height: 1.2;

}


.boas-vindas p {

  margin: 0;

  color: var(--texto-suave);

  font-size: 15px;
  line-height: 1.5;

}


/* ==========================================
   CARDS
========================================== */

.card-jornada,
.card-programa,
.card-upsell,
.resumo-jornada {

  width: 100%;

  background: var(--branco);

  border:
    1px
    solid
    var(--borda);

  border-radius:
    var(--raio);

  box-shadow:
    var(--sombra);

}


.card-jornada {

  padding: 23px;

}


.card-jornada h2 {

  margin:
    18px
    0
    2px;

  font-size: 24px;

}


.subtitulo-jornada {

  margin:
    0
    0
    22px;

  color:
    var(--texto-suave);

  font-size: 16px;

}


/* ==========================================
   ETIQUETAS
========================================== */

.etiqueta {

  display:
    inline-block;

  padding:
    7px
    12px;

  background:
    #F3DED4;

  color:
    var(--terracota-escuro);

  border-radius:
    20px;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.5px;

}


.mini-etiqueta {

  color:
    var(--terracota);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.5px;

}


/* ==========================================
   PROGRESSO
========================================== */

.progresso-info {

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 12px;

  color:
    var(--texto-suave);

  font-size:
    13px;

}


.progresso-info span {

  min-width: 0;

}


.progresso-info strong {

  flex-shrink: 0;

  color:
    var(--texto);

}


.barra-progresso {

  width: 100%;
  height: 9px;

  margin-top: 9px;

  overflow: hidden;

  background:
    var(--oliva-claro);

  border-radius:
    20px;

}


.barra-preenchida {

  width: 0;
  height: 100%;

  background:
    var(--oliva);

  border-radius:
    inherit;

  transition:
    width
    0.3s
    ease;

}


.proximo-passo {

  margin:
    24px
    0
    18px;

  display: flex;

  flex-direction:
    column;

  gap: 4px;

}


.proximo-passo span {

  color:
    var(--texto-suave);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.3px;

}


.proximo-passo strong {

  font-size:
    21px;

}


/* ==========================================
   BOTÕES
========================================== */

.botao-principal {

  width: 100%;
  min-height: 54px;

  padding:
    0
    18px;

  border: 0;

  border-radius:
    15px;

  background:
    var(--terracota);

  color:
    var(--branco);

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.7px;

  cursor:
    pointer;

  transition:
    transform
    0.15s
    ease;

}


.botao-principal:active {

  transform:
    scale(0.98);

}


.botao-contorno {

  width: 100%;
  min-height: 50px;

  padding:
    0
    18px;

  background:
    transparent;

  color:
    var(--terracota);

  border:
    1px
    solid
    var(--terracota);

  border-radius:
    13px;

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

}


/* ==========================================
   SEÇÕES
========================================== */

.secao {

  margin-top:
    29px;

}


.secao > h3 {

  margin:
    0
    0
    12px
    3px;

  font-size:
    11px;

  letter-spacing:
    1.6px;

}


.espaco-final {

  height:
    25px;

}


/* ==========================================
   DICA DA HOME
========================================== */

.card-dica {

  display: flex;

  gap: 14px;

  align-items:
    center;

  padding: 18px;

  background:
    var(--branco);

  border:
    1px
    solid
    var(--borda);

  border-radius:
    18px;

}


.icone-dica {

  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: grid;

  place-items:
    center;

  background:
    #ECEBDD;

  border-radius:
    50%;

  font-size:
    18px;

}


.card-dica p {

  margin: 0;

  color:
    var(--texto-suave);

  font-size:
    14px;

  line-height:
    1.5;

}


/* ==========================================
   UPSELL HOME
========================================== */

.card-upsell {

  padding: 22px;

  background:
    linear-gradient(
      145deg,
      #FBF7EF,
      #F4E2D6
    );

}


.card-upsell h2 {

  margin:
    13px
    0
    2px;

  font-size:
    17px;

}


.card-upsell > strong {

  display: block;

  color:
    var(--terracota);

  font-size:
    25px;

}


.card-upsell > p {

  margin:
    8px
    0
    20px;

  color:
    var(--texto-suave);

  font-size:
    14px;

  line-height:
    1.5;

}


.card-upsell
.botao-contorno {

  margin-top:
    20px;

}


/* ==========================================
   CABEÇALHO DAS TELAS
========================================== */

.cabecalho-tela {

  margin:
    22px
    0
    10px;

}


.cabecalho-tela h1 {

  margin:
    12px
    0
    6px;

  font-size:
    27px;

  line-height:
    1.2;

}


.cabecalho-tela p {

  margin: 0;

  color:
    var(--texto-suave);

  font-size:
    14px;

  line-height:
    1.5;

}


.botao-voltar {

  display: block;

  margin-bottom:
    18px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--terracota);

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;

}


/* ==========================================
   RESUMO DA JORNADA
========================================== */

.resumo-jornada {

  margin-top:
    22px;

  padding:
    20px;

}


.resumo-progresso {

  margin-bottom:
    18px;

  display: flex;

  flex-direction:
    column;

  gap: 5px;

}


.resumo-progresso span {

  color:
    var(--terracota);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.5px;

}


.resumo-progresso strong {

  font-size:
    18px;

}


/* ==========================================
   SEMANAS
========================================== */

.semana-jornada {

  margin-top:
    30px;

}


.semana-cabecalho {

  margin:
    0
    2px
    13px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap: 15px;

}


.semana-cabecalho h2 {

  margin:
    0
    0
    4px;

  font-size:
    18px;

}


.semana-cabecalho p {

  margin: 0;

  color:
    var(--texto-suave);

  font-size:
    12px;

}


.semana-contagem {

  flex-shrink: 0;

  padding:
    6px
    9px;

  background:
    #F3E5DB;

  color:
    var(--terracota);

  border-radius:
    20px;

  font-size:
    10px;

  font-weight:
    700;

}


.semana-contagem.completa {

  background:
    #E8E9DA;

  color:
    var(--oliva);

}


/* ==========================================
   LISTA DE DIAS
========================================== */

.lista-dias {

  display: flex;

  flex-direction:
    column;

  gap: 9px;

}


.dia-jornada {

  width: 100%;
  min-height: 72px;

  padding:
    12px
    14px;

  display: flex;

  align-items:
    center;

  gap: 12px;

  text-align: left;

  background:
    var(--branco);

  color:
    var(--texto);

  border:
    1px
    solid
    var(--borda);

  border-radius:
    16px;

  cursor:
    pointer;

  transition:
    transform
    0.12s
    ease,
    border-color
    0.15s
    ease;

}


.dia-jornada:active {

  transform:
    scale(0.99);

}


.numero-dia {

  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: grid;

  place-items:
    center;

  background:
    #F3E5DB;

  color:
    var(--terracota);

  border-radius:
    50%;

  font-size:
    14px;

  font-weight:
    700;

}


.info-dia {

  min-width: 0;

  flex: 1;

}


.info-dia strong,
.info-dia span {

  display: block;

}


.info-dia strong {

  font-size:
    14px;

}


.info-dia span {

  margin-top:
    4px;

  color:
    var(--texto-suave);

  font-size:
    12px;

}


.acao-dia {

  flex-shrink: 0;

  color:
    var(--terracota);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.5px;

}


/* PRÓXIMO DIA */

.dia-jornada.proximo {

  border:
    2px
    solid
    var(--terracota);

}


/* DIA CONCLUÍDO */

.dia-jornada.concluido {

  background:
    #F7F7F0;

  border-color:
    #D9DCC5;

}


.dia-jornada.concluido
.numero-dia {

  background:
    var(--oliva);

  color:
    var(--branco);

}


.dia-jornada.concluido
.info-dia span {

  color:
    var(--oliva);

}


.dia-jornada.concluido
.acao-dia {

  color:
    var(--texto-suave);

}


/* ==========================================
   REINICIAR JORNADA
========================================== */

.reiniciar-jornada {

  margin-top:
    35px;

  padding-top:
    20px;

  border-top:
    1px
    solid
    var(--borda);

  text-align:
    center;

}


.botao-reiniciar {

  padding:
    10px;

  border: 0;

  background:
    transparent;

  color:
    var(--texto-suave);

  font-size:
    12px;

  text-decoration:
    underline;

  cursor:
    pointer;

}


/* ==========================================
   MINHAS JORNADAS
========================================== */

.card-programa {

  padding:
    20px;

}


.card-programa.upsell {

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FAF2EC
    );

}


.programa-topo {

  display: flex;

  align-items:
    center;

  gap: 13px;

  margin-bottom:
    20px;

}


.programa-icone {

  width: 50px;
  height: 50px;

  flex-shrink: 0;

  display: grid;

  place-items:
    center;

  background:
    #F3E5DB;

  color:
    var(--terracota);

  border-radius:
    50%;

  font-size:
    20px;

  font-weight:
    700;

}


.programa-topo strong,
.programa-topo span {

  display: block;

}


.programa-topo strong {

  font-size:
    16px;

}


.programa-topo span {

  margin-top:
    4px;

  color:
    var(--texto-suave);

  font-size:
    12px;

}


.card-programa
.botao-principal {

  margin-top:
    20px;

}


/* ==========================================
   DICAS
========================================== */

.lista-dicas {

  display: flex;

  flex-direction:
    column;

  gap: 10px;

}


.dica-expansivel {

  background:
    var(--branco);

  border:
    1px
    solid
    var(--borda);

  border-radius:
    16px;

  overflow:
    hidden;

}


.dica-expansivel summary {

  min-height:
    64px;

  padding:
    15px
    17px;

  display: flex;

  align-items:
    center;

  gap: 12px;

  cursor:
    pointer;

  font-size:
    14px;

  font-weight:
    700;

  list-style:
    none;

}


.dica-expansivel
summary::-webkit-details-marker {

  display: none;

}


.dica-expansivel
summary span {

  font-size:
    19px;

}


.dica-expansivel p {

  margin: 0;

  padding:
    0
    17px
    17px
    49px;

  color:
    var(--texto-suave);

  font-size:
    13px;

  line-height:
    1.55;

}


/* ==========================================
   MENU INFERIOR
========================================== */

.menu-inferior {

  position: fixed;

  left: 50%;
  bottom: 0;

  transform:
    translateX(-50%);

  width: 100%;
  max-width: 520px;

  height: 76px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  border-top:
    1px
    solid
    var(--borda);

  z-index:
    100;

}


.menu-item {

  border: 0;

  background:
    transparent;

  color:
    #99928A;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap: 4px;

  cursor:
    pointer;

}


.menu-item span {

  font-size:
    21px;

}


.menu-item strong {

  font-size:
    10px;

}


.menu-item.ativo {

  color:
    var(--terracota);

}


/* ==========================================
   HIDDEN
========================================== */

[hidden] {

  display:
    none !important;

}


/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 700px) {

  body {

    padding:
      30px
      0;

    background:
      #EEE8DE;

  }


  #app {

    min-height:
      calc(100vh - 60px);

    border-radius:
      28px;

    box-shadow:
      0
      15px
      50px
      rgba(
        55,
        45,
        38,
        0.13
      );

    overflow:
      hidden;

  }


  .menu-inferior {

    bottom:
      30px;

    border-radius:
      0
      0
      28px
      28px;

  }

}


/* ==========================================
   CELULARES PEQUENOS
========================================== */

@media (max-width: 390px) {

  .conteudo {

    width:
      calc(100% - 28px);

  }


  .topo {

    padding-left:
      18px;

    padding-right:
      18px;

  }


  .boas-vindas h1 {

    font-size:
      24px;

  }


  .card-jornada,
  .card-programa,
  .card-upsell,
  .resumo-jornada {

    padding:
      18px;

  }


  .acao-dia {

    font-size:
      8px;

  }

}


/* ==========================================
   INDICADOR DAS DICAS
========================================== */

.dica-expansivel summary::after {

  content: "⌄";

  margin-left: auto;

  color: var(--terracota);

  font-size: 20px;
  font-weight: 700;

  transition: transform 0.2s ease;

}


.dica-expansivel[open] summary::after {

  content: "⌃";

}


.dica-expansivel[open] {

  border-color: #D9C7BA;

  box-shadow:
    0 5px 16px rgba(74, 61, 50, 0.06);

}


.dica-expansivel[open] summary {

  color: var(--terracota-escuro);

}


.dica-expansivel summary:hover {

  background: #FBF8F2;

}

/* ==========================================
   AJUSTES DE LEGIBILIDADE (PÚBLICO 45+)
   Mínimo de 14px em textos e 16px em botões
========================================== */

.boas-vindas h1 { font-size: 28px; }
.boas-vindas p,
.card-dica p,
.card-upsell > p,
.cabecalho-tela p,
.dica-expansivel p { font-size: 17px; line-height: 1.55; }

.etiqueta,
.mini-etiqueta,
.proximo-passo span,
.resumo-progresso span,
.secao > h3 { font-size: 13px; }

.progresso-info { font-size: 15px; }
.subtitulo-jornada { font-size: 17px; }
.proximo-passo strong { font-size: 24px; }

.botao-principal,
.botao-contorno { font-size: 16px; min-height: 56px; }

.botao-voltar { font-size: 17px; padding: 10px 0; }

.semana-cabecalho h2 { font-size: 20px; }
.semana-cabecalho p,
.semana-contagem { font-size: 14px; }

.numero-dia { font-size: 17px; }
.info-dia strong { font-size: 17px; }
.info-dia span { font-size: 14px; }
.acao-dia { font-size: 13px; }

.botao-reiniciar { font-size: 15px; }
.programa-topo strong { font-size: 18px; }
.programa-topo span { font-size: 14px; }
.dica-expansivel summary { font-size: 17px; }

.menu-item span { font-size: 24px; }
.menu-item strong { font-size: 13px; }

@media (max-width: 390px) {
  .boas-vindas h1 { font-size: 25px; }
  .acao-dia { font-size: 12px; }
}


/* ==========================================
   NOVOS ELEMENTOS
========================================== */

a.botao-principal,
a.botao-contorno {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.botao-aulas {
  margin-top: 12px;
  background: var(--branco);
}

.tela .conteudo > .botao-aulas {
  margin: 18px 0 6px;
}

.instrucao-dias {
  margin: 10px 4px 0;
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.botao-texto {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--terracota);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.card-upsell .botao-link { margin-top: 18px; }

.caixa-codigo {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.caixa-codigo label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
}

.campo-codigo {
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 13px;
  background: var(--branco);
  font-size: 19px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.erro-codigo {
  color: #A33A2A;
  font-size: 15px;
}

.card-instalar {
  margin-bottom: 22px;
  padding: 20px;
  border-radius: var(--raio);
  background: var(--areia-card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
}

.card-instalar strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.card-instalar p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
}

[hidden] { display: none !important; }