/* Variações de cor do Layout 5. O layout é o mesmo; mudam só as cores e o logo.
   Os temas ficam no <html> para valer também nas variáveis definidas em :root. */
html.tema-bebe {
  --rosa: #FFD6E8;
  --magenta: #FF4FA3;
  --tinta: #3B1530;
  --magenta-forte: #E0107F;
  --rosa-claro: #FFE6F1;
  --rosa-nevoa: #FFF5FA;
  --tinta-suave: #7A5A6C;
  --linha: #FFD6E8;
  --sombra: 20 12 18;
}
html.tema-bebe .l5 { --degrade: linear-gradient(120deg, #E0107F, #F0409A 60%, #FF70B5); }

/* No rosa bebê, as áreas que seriam escuras viram pink */
.tema-bebe .ap-promo, .tema-bebe .l-relampago, .tema-bebe .b-trabalho { background: var(--magenta-forte); }
.tema-bebe .l-relampago p { color: #fff; }
.tema-bebe .chips button.ativo, .tema-bebe .pm-tam button.ativo { background: var(--magenta-forte); border-color: var(--magenta-forte); }

/* Logo só com as letras B+B */
.l5 .ap-logo img { height: 42px; }
html.rolou .l5 .ap-logo img { height: 34px; }
.l5 .dlg-logo { height: 28px; }
@media (min-width: 900px) {
  .l5 .ap-logo img { height: 52px; }
  html.rolou .l5 .ap-logo img { height: 40px; }
}

/* Rosa bebê: B+B com as linhas em cima e embaixo, por isso um pouco mais alto */
html.tema-bebe .l5 .ap-logo img { height: 60px; }
html.tema-bebe.rolou .l5 .ap-logo img { height: 46px; }
html.tema-bebe .l5 .dlg-logo { height: 36px; }
@media (min-width: 900px) {
  html.tema-bebe .l5 .ap-logo img { height: 72px; }
  html.tema-bebe.rolou .l5 .ap-logo img { height: 54px; }
}