:root {
  --papel: #e8f6ff;
  --papel-folha: #fffdf8;
  --tinta: #2a2430;
  --tinta-suave: #5b5164;
  --coral: #ff7a4a;
  --coral-escuro: #e25a2c;
  --coral-sombra: #c4451f;
  --ceu: #3aa0c8;
  --ceu-escuro: #2a7fa3;
  --ceu-sombra: #1f6a8a;
  --sol: #ffd45a;
  --sol-sombra: #e0a81f;
  --folha: #4caf6a;
  --lavanda: #b89be8;
  --linha: rgba(58, 40, 80, 0.1);
  --sombra: 0 16px 36px rgba(58, 120, 160, 0.16);
  --raio: 26px;
  --fonte-texto: "Nunito", system-ui, sans-serif;
  --fonte-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --topo: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--tinta);
  font-family: var(--fonte-texto);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 212, 90, 0.55) 0 140px, transparent 220px),
    radial-gradient(circle at 92% 8%, rgba(184, 155, 232, 0.35) 0 120px, transparent 210px),
    radial-gradient(circle at 80% 92%, rgba(76, 175, 106, 0.18) 0 160px, transparent 280px),
    linear-gradient(180deg, #ccefff 0%, #eaf8ff 28%, #fff6e8 72%, #ffe9d2 100%);
  -webkit-tap-highlight-color: transparent;
}

.pular {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--coral);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 999px;
}

.pular:focus {
  left: 0.8rem;
  top: 0.8rem;
  z-index: 30;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

.carregando,
.erro {
  max-width: 40rem;
  margin: 4rem auto;
  text-align: center;
  font-size: 1.2rem;
}

.erro {
  color: var(--coral-escuro);
}

.casca {
  width: min(1200px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 1rem 0 calc(2.4rem + var(--safe-bottom));
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 1.15rem;
  padding: 0.42rem 0.45rem 0.42rem 0.42rem;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(255, 248, 232, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 28px rgba(58, 120, 160, 0.14);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0.5rem;
  z-index: 20;
}

.topo-convidado {
  width: fit-content;
  max-width: 100%;
  padding-right: 0.85rem;
}

.topo-convidado .marca {
  flex: none;
}

.topo-esquerda {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}

.marca-oi {
  flex: none;
  margin-left: 15px;
  padding: 0.1rem 0.35rem 0.1rem 0;
}

.marca-oi strong {
  color: var(--ceu);
  font-size: 1.28rem;
  max-width: min(220px, 40vw);
}

.marca-logo {
  display: block;
  height: 43px;
  width: auto;
  max-width: min(120px, 25vw);
  object-fit: contain;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.topo-convidado .marca-logo {
  height: 53px;
  max-width: min(144px, 43vw);
}

.marca-canto {
  flex: none;
}

.marca-canto .marca-logo {
  height: 35px;
  max-width: min(90px, 20vw);
}

.hero-logo {
  display: block;
  width: min(259px, 100%);
  height: auto;
  margin: 0 0 0.5rem;
}

.marca,
.topo-voltar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  min-width: 0;
  flex: 1;
  padding: 0.08rem 0.15rem 0.08rem 0.08rem;
  border-radius: 999px;
}

.marca:focus-visible,
.topo-voltar:focus-visible {
  outline: 3px solid #7ec8ea;
  outline-offset: 3px;
}

.topo-voltar:hover .topo-voltar-bola,
.marca:hover .marca-selo,
.marca:hover .marca-logo {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.topo-voltar:active .topo-voltar-bola,
.marca:active .marca-selo,
.marca:active .marca-logo {
  transform: translateY(2px);
}

.marca-selo,
.topo-voltar-bola {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.marca-selo {
  background:
    radial-gradient(circle at 32% 28%, #fff6c8 0 28%, transparent 30%),
    linear-gradient(160deg, #ffd45a, #ff9a3c);
  color: #7a3e00;
  box-shadow:
    inset 0 -5px 0 rgba(180, 90, 0, 0.18),
    0 8px 0 #e08920,
    0 12px 16px rgba(224, 137, 32, 0.28);
}

.topo-voltar-bola {
  background:
    radial-gradient(circle at 32% 28%, #fff6e8 0 28%, transparent 30%),
    linear-gradient(160deg, #ffb087, #ff7a4a);
  color: #fff;
  font-size: 1.35rem;
  box-shadow:
    inset 0 -5px 0 rgba(180, 60, 20, 0.18),
    0 8px 0 #d45a28,
    0 12px 16px rgba(196, 69, 31, 0.28);
}

.marca strong,
.topo-voltar-texto strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marca span span,
.topo-voltar-texto span {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-divisa {
  flex: none;
  width: 2px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(58, 40, 80, 0.14), transparent);
}

.selo-versao {
  flex: none;
  border: 0;
  background: linear-gradient(180deg, #fff 0%, #e7f6ff 100%);
  color: var(--ceu-escuro);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  margin-right: 0.15rem;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #b7d7ea,
    0 8px 14px rgba(58, 160, 200, 0.18);
}

.topo-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: none;
  margin-left: auto;
}

.topo-link {
  flex: none;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe9a0 0%, #ffd45a 50%, #f0b830 100%);
  color: #6b3d00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 #c48a12,
    0 8px 14px rgba(196, 138, 18, 0.18);
}

.topo-link.ativo {
  background: linear-gradient(180deg, #ffb087 0%, #ff7a4a 52%, #f06432 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #c4451f,
    0 8px 14px rgba(196, 69, 31, 0.2);
}

.topo-link:focus-visible {
  outline: 3px solid #7ec8ea;
  outline-offset: 3px;
}

.topo-sair {
  flex: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7ec8ea 0%, #3aa0c8 52%, #2a7fa3 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #1f6a8a,
    0 8px 14px rgba(31, 106, 138, 0.2);
}

.topo-sair:hover {
  filter: brightness(1.06);
}

.topo-sair:disabled {
  opacity: 0.7;
}

.hero,
.folha,
.cena,
.aviso,
.cartao-historia {
  background: var(--papel-folha);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.6rem 1.7rem;
  border-radius: 32px;
  margin-bottom: 1.4rem;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 212, 90, 0.55), transparent 36%),
    radial-gradient(circle at 8% 88%, rgba(122, 210, 255, 0.35), transparent 42%),
    var(--papel-folha);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero::before {
  width: 92px;
  height: 92px;
  right: 1.3rem;
  top: 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #fff8d0 0 18%, #ffd45a 19% 62%, #ffb03a 63%);
  box-shadow: 0 0 0 10px rgba(255, 212, 90, 0.28);
}

.hero::after {
  width: 120px;
  height: 42px;
  right: 4.2rem;
  top: 4.6rem;
  background: #fff;
  border-radius: 40px;
  box-shadow:
    28px 10px 0 -8px #fff,
    -32px 14px 0 -10px #fff,
    0 10px 18px rgba(58, 160, 200, 0.12);
  opacity: 0.92;
}

.hero-cinema {
  padding: 1.35rem 1.35rem 1.25rem;
  background:
    linear-gradient(120deg, rgba(232, 248, 255, 0.55) 0%, rgba(255, 252, 236, 0.4) 48%, rgba(255, 236, 210, 0.35) 100%),
    var(--papel-folha);
}

.hero-cinema::before,
.hero-cinema::after {
  display: none;
}

.hero-grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
  grid-template-areas:
    "texto projetor"
    "conta projetor"
    "acoes projetor";
  gap: 10px 1.25rem;
  align-items: start;
}

.hero-texto {
  grid-area: texto;
}

.hero-cinema .hero-texto .lead {
  margin: 0;
  max-width: 28rem;
  font-size: 0.98rem;
  line-height: 1.4;
}

.hero-projetor {
  grid-area: projetor;
  align-self: center;
  display: grid;
  gap: 0.65rem;
}

.hero-texto .lead {
  max-width: 36rem;
}

.hero-tela {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 26px;
  background: #1a2430;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 0 6px rgba(122, 210, 255, 0.18),
    0 18px 32px rgba(30, 70, 100, 0.28);
}

.hero-tela .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 6s ease;
  pointer-events: none;
}

.hero-tela .hero-slide.ativo {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  image-rendering: high-quality;
}

.hero-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 18%, transparent 42%),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(20, 40, 60, 0.05) 3px 4px);
  animation: hero-scan 5s linear infinite;
}

@keyframes hero-scan {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 28px; }
}

.hero-legenda {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 3;
  display: grid;
  gap: 0.08rem;
  padding: 0.55rem 0.75rem;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 28, 40, 0.28), rgba(20, 28, 40, 0.72));
  backdrop-filter: blur(10px);
}

.hero-legenda span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-legenda strong {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
}

.hero-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 0.35rem;
}

.hero-thumbs-faixa {
  display: contents;
}

.hero-thumb {
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: #d8eef8;
  box-shadow: 0 0 0 2px transparent;
  opacity: 0.62;
}

.hero-thumb.ativo,
.hero-thumb:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px #3aa0c8;
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pergunte {
  position: relative;
  z-index: 1;
  margin-top: 1.15rem;
  padding: 0.95rem 1rem 1rem;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(236, 248, 255, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(40, 100, 140, 0.1);
}

.pergunte-topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pergunte-orbe {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 18%, #8fe0ff 19% 48%, #3aa0c8 70%);
  box-shadow:
    0 0 0 5px rgba(127, 220, 255, 0.28),
    0 8px 16px rgba(58, 160, 200, 0.28);
  animation: pergunte-pulse 2.4s ease-in-out infinite;
}

@keyframes pergunte-pulse {
  50% { box-shadow: 0 0 0 8px rgba(127, 220, 255, 0.16), 0 8px 16px rgba(58, 160, 200, 0.22); }
}

.pergunte-topo p {
  margin: 0.12rem 0 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.pergunte-selo {
  margin-left: auto;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: #d7f5e4;
  color: #1b5e32;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pergunte-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
}

.pergunte-form input {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 18px;
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(58, 120, 160, 0.08);
}

.pergunte-form input:focus {
  outline: 3px solid #7ec8ea;
  outline-offset: 2px;
}

.pergunte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.pergunte-chip {
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  color: #1f6a8a;
  background: #e7f6ff;
  cursor: pointer;
}

.pergunte-chip:hover {
  background: #d5efff;
}

.pergunte-saida {
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--linha);
}

.pergunte-saida p {
  margin: 0 0 0.7rem;
}

.pergunte-pensando {
  color: var(--ceu-escuro);
  font-weight: 800;
}

.pergunte-grade {
  display: grid;
  gap: 0.5rem;
}

.pergunte-cartao {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.35rem;
  border-radius: 16px;
  text-decoration: none;
  background: #f4fbff;
}

.pergunte-cartao-principal {
  margin-bottom: 0.55rem;
  background: linear-gradient(180deg, #fff8e4, #fff3d0);
}

.pergunte-cartao img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
}

.pergunte-cartao small {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ceu-escuro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pergunte-mais {
  margin: 0.7rem 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--tinta-suave);
}

.pergunte-trancado-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ex-vf {
  display: grid;
  gap: 0.85rem;
}

.ex-vf-leds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ex-vf-led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d9e6ee;
  box-shadow: inset 0 1px 0 #fff;
}

.ex-vf-led-ok {
  background: #4caf6a;
}

.ex-vf-led-agora {
  background: #ffd45a;
  box-shadow: 0 0 0 4px rgba(255, 212, 90, 0.28);
}

.ex-vf-frase {
  padding: 1.1rem 1.15rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 248, 255, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(122, 210, 255, 0.45),
    0 10px 22px rgba(58, 120, 160, 0.1);
}

.ex-vf-botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .hero-grade {
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "projetor"
      "conta"
      "acoes";
    justify-items: center;
    text-align: center;
  }

  .hero-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cinema .hero-texto .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .acoes-hero {
    justify-content: center;
    width: 100%;
  }

  .acoes-hero-conta {
    width: 100%;
    max-width: none;
  }

  .acoes-hero-conta-botoes {
    justify-content: center;
  }
}

.kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 0.45rem;
  color: var(--ceu-escuro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  letter-spacing: -0.03em;
  margin: 0;
}

h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.85rem, 7vw, 3.15rem);
  line-height: 1.12;
  max-width: none;
}

.cabeca-historia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 1rem;
  align-items: start;
}

.cabeca-historia:not(:has(.cantico-selo)) {
  grid-template-columns: minmax(0, 1fr);
}

.cantico-selo,
.cantico-selo-estatico {
  width: 6.8rem;
  display: grid;
  justify-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.cantico-selo-ico {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  margin: 0 0 0.35rem;
  color: #6b3d00;
  background:
    radial-gradient(circle at 30% 24%, #fff8d0 0 22%, transparent 46%),
    linear-gradient(180deg, #ffe9a0 0%, #ffd45a 52%, #f0b830 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 6px 0 rgba(196, 138, 18, 0.35),
    0 10px 16px rgba(196, 138, 18, 0.2);
  overflow: hidden;
}

.cantico-selo-ico svg {
  width: 40px;
  height: 40px;
}

.cantico-selo-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cantico-selo-ouvir {
  display: block;
  margin: 0 0 0.15rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b3d00;
}

.cantico-selo strong,
.cantico-selo-estatico strong {
  font-family: var(--fonte-titulo);
  font-size: 0.92rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cantico-selo small,
.cantico-selo-estatico small {
  display: block;
  margin-top: 0.12rem;
  color: var(--tinta-suave);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}

.cantico-selo-vazio .cantico-selo-ico {
  background: linear-gradient(180deg, #fff 0%, #f3e7ff 100%);
  color: #6b4ea3;
  box-shadow:
    inset 0 0 0 2px rgba(184, 155, 232, 0.55),
    0 6px 0 rgba(140, 110, 190, 0.18);
}

.capa-nota {
  display: grid;
  place-items: center;
  min-height: 150px;
  color: #6b3d00;
  background:
    radial-gradient(circle at 30% 24%, #fff8d0 0 22%, transparent 46%),
    linear-gradient(180deg, #ffe9a0 0%, #ffd45a 52%, #f0b830 100%);
}

.capa-nota svg {
  width: 58px;
  height: 58px;
}

.letra-musica {
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff8e8, #fffdf8);
  font-size: 1.12rem;
  line-height: 1.7;
  font-weight: 700;
}

.musica-historia {
  margin: 0 0 1.1rem;
  font-weight: 800;
}

.musica-historia a {
  color: var(--ceu-escuro);
}

.musica-player {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.65rem 0.7rem;
  margin: 0 0 1.2rem;
  padding: 0.75rem 0.85rem;
  border-radius: 22px;
  background: #fff;
  border: 2px solid #e4ebf0;
  box-shadow: inset 0 1px 0 #fff;
}

.musica-player audio {
  display: none;
}

.musica-play {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #ffb087 0%, #ff7a4a 52%, #f06432 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #c4451f;
}

.musica-play svg {
  width: 26px;
  height: 26px;
}

.musica-tempo {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  min-width: 2.4rem;
}

.musica-trilho {
  --pct: 10px;
  --thumb: 20px;
  --trilha: 8px;
  position: relative;
  height: var(--thumb);
  display: flex;
  align-items: center;
}

.musica-trilho::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--trilha);
  border-radius: 999px;
  background: #c5ced8;
}

.musica-preenchido {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: var(--pct);
  height: var(--trilha);
  border-radius: 999px;
  background: #e24a14;
  transform: translateY(-50%);
  pointer-events: none;
}

.musica-barra {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  outline: none;
}

.musica-barra::-webkit-slider-runnable-track {
  height: var(--trilha);
  border-radius: 999px;
  background: transparent;
}

.musica-barra::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--trilha) - var(--thumb)) / 2);
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e24a14;
  box-shadow: none;
}

.musica-barra::-moz-range-track {
  height: var(--trilha);
  border-radius: 999px;
  background: transparent;
}

.musica-barra::-moz-range-progress {
  height: var(--trilha);
  border-radius: 999px;
  background: transparent;
}

.musica-barra::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 3px solid #e24a14;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
}

.pagina-musicas .rodape {
  margin-top: 1.15rem;
}

.playlist-cabeca {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 1.2rem 1.5rem;
  align-items: end;
  margin: 0 0 1.15rem;
  padding: 1.35rem 1.4rem 1.4rem;
  border-radius: 32px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 212, 90, 0.55), transparent 36%),
    radial-gradient(circle at 8% 88%, rgba(122, 210, 255, 0.35), transparent 42%),
    var(--papel-folha);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}

.playlist-cabeca::before,
.playlist-cabeca::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.playlist-cabeca::before {
  width: 92px;
  height: 92px;
  right: 1.3rem;
  top: 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #fff8d0 0 18%, #ffd45a 19% 62%, #ffb03a 63%);
  box-shadow: 0 0 0 10px rgba(255, 212, 90, 0.28);
}

.playlist-cabeca::after {
  width: 120px;
  height: 42px;
  right: 4.2rem;
  top: 4.6rem;
  background: #fff;
  border-radius: 40px;
  box-shadow:
    28px 10px 0 -8px #fff,
    -32px 14px 0 -10px #fff,
    0 10px 18px rgba(58, 160, 200, 0.12);
  opacity: 0.92;
}

.playlist-capa,
.playlist-texto {
  position: relative;
  z-index: 1;
}

.playlist-capa {
  width: 176px;
  height: 176px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  color: #6b3d00;
  background:
    radial-gradient(circle at 30% 24%, #fff8d0 0 22%, transparent 46%),
    linear-gradient(180deg, #ffe9a0 0%, #ffd45a 52%, #f0b830 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 10px 0 rgba(196, 138, 18, 0.28),
    0 18px 28px rgba(196, 138, 18, 0.22);
}

.playlist-capa svg {
  width: 84px;
  height: 84px;
}

.playlist-texto .lead {
  max-width: 36rem;
}

.playlist-meta {
  position: relative;
  z-index: 1;
  margin: 0.15rem 0 0.85rem;
  font-weight: 800;
  color: var(--tinta-suave);
}

.playlist-acoes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.playlist-play {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 56px;
  padding: 0.35rem 1.2rem 0.35rem 0.4rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #ffb087 0%, #ff7a4a 52%, #f06432 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 0 #c4451f,
    0 12px 18px rgba(196, 69, 31, 0.22);
}

.playlist-play svg {
  width: 36px;
  height: 36px;
}

.playlist-lista {
  background: var(--papel-folha);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  border-radius: 28px;
  overflow: hidden;
  padding: 0.35rem 0.4rem 0.5rem;
}

.playlist-colunas,
.faixa {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 2.2fr) minmax(0, 1.3fr) 4.4rem;
  gap: 0.65rem;
  align-items: center;
}

.playlist-colunas {
  padding: 0.55rem 0.85rem 0.5rem;
  color: var(--tinta-suave);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linha);
}

.playlist-colunas span:last-child,
.faixa-dur {
  text-align: right;
}

.faixa {
  padding: 0.55rem 0.7rem;
  border-radius: 16px;
  cursor: pointer;
}

.faixa:hover,
.faixa:focus-within {
  background: rgba(255, 212, 90, 0.22);
}

.faixa-ativa,
.faixa-tocando {
  background: rgba(255, 122, 74, 0.12);
}

.faixa-indice {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.faixa-indice:disabled {
  opacity: 0.45;
  cursor: default;
}

.faixa-ico {
  display: none;
  width: 22px;
  height: 22px;
  color: var(--coral-escuro);
}

.faixa-ico svg {
  width: 22px;
  height: 22px;
}

.faixa:hover .faixa-num,
.faixa-tocando .faixa-num {
  display: none;
}

.faixa:hover .faixa-ico,
.faixa-tocando .faixa-ico {
  display: grid;
}

.faixa-info {
  min-width: 0;
}

.faixa-titulo {
  display: block;
  color: inherit;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.faixa-tocando .faixa-titulo {
  color: var(--coral-escuro);
}

.faixa-info small,
.faixa-album,
.faixa-dur {
  color: var(--tinta-suave);
  font-size: 0.86rem;
  font-weight: 800;
}

.faixa-album {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.faixa-album[href]:hover {
  color: var(--ceu-escuro);
}

.faixa-dur {
  font-variant-numeric: tabular-nums;
}

.musica-dock {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(240px, 1.6fr);
  gap: 0.7rem 1rem;
  align-items: center;
  width: 100%;
  margin: 1.15rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 24px;
  background: var(--papel-folha);
  border: 2px solid #e4ebf0;
  box-shadow:
    inset 0 1px 0 #fff,
    var(--sombra);
}

.musica-dock[hidden] {
  display: none;
}

.dock-faixa {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
}

.dock-capa {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #6b3d00;
  background: linear-gradient(180deg, #ffe9a0 0%, #ffd45a 52%, #f0b830 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dock-capa svg {
  width: 28px;
  height: 28px;
}

.dock-texto {
  min-width: 0;
}

.dock-texto strong,
.dock-texto small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-texto strong {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
}

.dock-texto small {
  color: var(--tinta-suave);
  font-weight: 800;
}

.dock-centro {
  display: grid;
  gap: 0.35rem;
}

.dock-botoes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

.dock-skip {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--tinta);
  background: #fff;
  box-shadow: inset 0 0 0 2px #e4ebf0;
}

.dock-skip svg {
  width: 20px;
  height: 20px;
}

.dock-barra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.lead {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.acoes-hero {
  position: relative;
  z-index: 1;
  grid-area: acoes;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0;
}

.acoes-hero .botao-primario,
.acoes-hero .botao-secundario,
.acoes-hero .botao-sol,
.acoes-hero .botao-lavanda {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
}

.acoes-hero-conta {
  position: relative;
  z-index: 1;
  grid-area: conta;
  margin-top: 0;
  padding: 0.7rem 0.8rem 0.8rem;
  max-width: 26rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 238, 232, 0.98), rgba(236, 224, 216, 0.94));
  border: 2px dashed rgba(168, 120, 108, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.acoes-hero-conta-rotulo {
  margin: 0 0 0.55rem;
  font-family: var(--fonte-titulo);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: #8f5c50;
}

.acoes-hero-conta-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.conta-atalho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0.45rem 0.9rem;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.conta-atalho:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.conta-atalho:active {
  transform: translateY(1px);
}

.conta-atalho-icone {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.conta-atalho-entrar {
  background: #c47a68;
  color: #fff;
  box-shadow: 0 2px 0 #a86558, 0 6px 12px rgba(168, 120, 108, 0.22);
}

.conta-atalho-cadastro {
  background: #fffaf7;
  color: #8f5c50;
  border: 2px solid #c47a68;
  box-shadow: 0 2px 0 rgba(168, 120, 108, 0.16);
}

.bloco-testamento {
  margin-top: 1.2rem;
  padding: 1.15rem 1.2rem 2.2rem;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, var(--papel-folha) 100%);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}

.bloco-testamento-novo {
  background:
    linear-gradient(180deg, rgba(232, 248, 255, 0.9) 0%, var(--papel-folha) 72%);
}

.titulo-testamento {
  margin: 0 0 1rem;
  padding: 0.55rem 1rem 0.7rem;
  border-bottom: 2px dashed rgba(58, 40, 80, 0.12);
  font-size: clamp(1.25rem, 3.5vw, 1.65rem);
  color: var(--tinta);
}

.grade-livros,
.grade-historias {
  display: grid;
  gap: 1rem;
}

.grade-livros {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

.grade-livros-teaser > :nth-child(n + 6) {
  display: none;
}

.home-convite {
  margin-top: 1.15rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.95), rgba(255, 236, 210, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 #fff;
  text-align: center;
}

.home-convite p {
  margin: 0 0 0.85rem;
  font-weight: 800;
  color: var(--tinta);
}

.home-convite-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.grade-historias {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cartao-livro,
.cartao-historia {
  display: block;
  text-decoration: none;
  border-radius: var(--raio);
  padding: 0;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.cartao-historia .corpo-cartao,
.cartao-livro .corpo-cartao {
  padding: 1rem 1.1rem 1.2rem;
}

.cartao-livro .corpo-cartao {
  padding: 0.85rem 0.75rem 0.95rem;
}

.cartao-livro {
  background: linear-gradient(165deg, #ff8a5b 0%, #ff6b6b 42%, #7ec8ea 100%);
  color: #fffef8;
  min-height: 180px;
  border: 0;
  box-shadow:
    0 18px 0 #d85a3a,
    0 28px 40px rgba(216, 90, 58, 0.28);
}

.cartao-livro-cor-2,
.cartao-livro-exodo {
  background: linear-gradient(165deg, #3aa0c8 0%, #1f6a8a 48%, #ffd45a 100%);
  box-shadow:
    0 18px 0 #185a78,
    0 28px 40px rgba(24, 90, 120, 0.28);
}

.cartao-livro-cor-3,
.cartao-livro-levitico {
  background: linear-gradient(165deg, #7b5ea7 0%, #4a3070 48%, #e0b13a 100%);
  box-shadow:
    0 18px 0 #3a2458,
    0 28px 40px rgba(58, 36, 88, 0.28);
}

.cartao-livro-cor-4,
.cartao-livro-numeros {
  background: linear-gradient(165deg, #4caf6a 0%, #2e7d4f 48%, #f0c75e 100%);
  box-shadow:
    0 18px 0 #1e5a38,
    0 28px 40px rgba(30, 90, 56, 0.28);
}

.cartao-livro-cor-0,
.cartao-livro-deuteronomio {
  background: linear-gradient(165deg, #d4a017 0%, #8a5a12 48%, #f4e4a8 100%);
  box-shadow:
    0 18px 0 #6b420c,
    0 28px 40px rgba(107, 66, 12, 0.28);
}

.cartao-livro h2,
.cartao-livro p,
.cartao-livro small {
  color: #fffef8;
}

.cartao-livro-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.cartao-livro-nomes {
  flex: 1;
  min-width: 0;
}

.cartao-livro h2 {
  font-size: 1.08rem;
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
}

.cartao-livro .tipo-livro {
  margin: 0.08rem 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  opacity: 0.92;
}

.cartao-livro .botao-dentro {
  flex: 0 0 auto;
  margin-top: 0;
  margin-left: auto;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}

.cartao-livro .icone-abrir {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.cartao-livro:hover,
.cartao-historia:hover,
.cartao-livro:focus-visible,
.cartao-historia:focus-visible {
  transform: translateY(-4px);
}

.cartao-livro small,
.cartao-historia small {
  display: block;
  opacity: 0.88;
  margin-bottom: 0.3rem;
  font-weight: 800;
}

.cartao-historia h3 {
  font-size: 1.22rem;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.capa-cartao {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #ead7b0;
  image-rendering: auto;
  image-rendering: high-quality;
}

.cartao-livro .capa-cartao {
  height: 168px;
}

.ilustracao-historia {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 24px;
  margin: 0.4rem 0 1.2rem;
  border: 5px solid #fff1c4;
  box-shadow: var(--sombra);
  image-rendering: auto;
  image-rendering: high-quality;
}

.botao {
  --botao-sombra: #c4451f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 52px;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: relative;
  background: linear-gradient(180deg, #ffb087 0%, #ff7a4a 52%, #f06432 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 7px 0 var(--botao-sombra),
    0 14px 22px rgba(196, 69, 31, 0.22);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.botao:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.botao:active {
  transform: translateY(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 0 var(--botao-sombra),
    0 6px 12px rgba(0, 0, 0, 0.1);
}

.botao:focus-visible {
  outline: 3px solid #7ec8ea;
  outline-offset: 3px;
}

.botao-primario {
  --botao-sombra: #c4451f;
}

.botao-secundario {
  --botao-sombra: #1f6a8a;
  background: linear-gradient(180deg, #8fe0ff 0%, #3aa0c8 55%, #2f8fb6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 7px 0 var(--botao-sombra),
    0 14px 22px rgba(31, 106, 138, 0.22);
}

.botao-instalar {
  --botao-sombra: #2e7d4f;
  background: linear-gradient(180deg, #9be08a 0%, #4caf6a 52%, #3d9a58 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 7px 0 var(--botao-sombra),
    0 14px 22px rgba(46, 125, 79, 0.22);
}

.botao-instalar-icone {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
}

.acoes-instalar {
  position: relative;
  z-index: 1;
  margin: 1rem 0 0;
}

.acoes-instalar .botao {
  width: 100%;
}

@media (min-width: 1025px) {
  .botao-instalar,
  .instalar-ajuda {
    display: none !important;
  }
}

.instalar-ajuda {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 1rem 1rem calc(1.2rem + var(--safe-bottom));
  background: rgba(20, 28, 40, 0.42);
}

.instalar-ajuda-cartao {
  width: min(28rem, 100%);
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf8, #fff4dc);
  box-shadow: 0 16px 36px rgba(30, 50, 70, 0.28);
}

.instalar-ajuda-cartao h2 {
  margin: 0 0 0.6rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
}

.instalar-ajuda-cartao p,
.instalar-ajuda-cartao li {
  margin: 0 0 0.55rem;
  color: var(--tinta-suave);
  font-weight: 700;
}

.instalar-ajuda-cartao ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.instalar-ajuda-cartao .botao {
  width: 100%;
}

.botao-sol {
  --botao-sombra: #c48a12;
  background: linear-gradient(180deg, #ffe9a0 0%, #ffd45a 50%, #f0b830 100%);
  color: #6b3d00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 7px 0 var(--botao-sombra),
    0 14px 22px rgba(196, 138, 18, 0.22);
}

.botao-lavanda {
  --botao-sombra: #6b4ea3;
  background: linear-gradient(180deg, #e4d2ff 0%, #b89be8 52%, #9b7ad4 100%);
  color: #3a2460;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 7px 0 var(--botao-sombra),
    0 14px 22px rgba(107, 78, 163, 0.22);
}

.botao-voltar {
  --botao-sombra: #c9b48a;
  min-height: 44px;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  margin-bottom: 0.95rem;
  background: linear-gradient(180deg, #ffffff 0%, #fff4dc 100%);
  color: #6b3d12;
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 var(--botao-sombra),
    0 10px 16px rgba(180, 140, 70, 0.16);
}

.botao-icone {
  font-size: 1.15em;
  line-height: 1;
}

.botao-dentro,
.botao-cartao {
  pointer-events: none;
  min-height: 44px;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
}

.botao-cartao {
  --botao-sombra: #1f6a8a;
  background: linear-gradient(180deg, #8fe0ff 0%, #3aa0c8 55%, #2f8fb6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 5px 0 var(--botao-sombra),
    0 10px 16px rgba(31, 106, 138, 0.18);
}

.em-breve .botao-cartao {
  --botao-sombra: #b8a888;
  background: linear-gradient(180deg, #f4efe4, #e4d8c0);
  color: #6b5d4a;
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 var(--botao-sombra);
}

.nav-historias {
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.nav-historias a {
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  border-radius: 22px;
  min-height: 72px;
  padding: 0.85rem 1rem 1rem;
}

.nav-historias .botao-rotulo {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.nav-historias .botao-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.15rem;
  font-size: 1rem;
}

.botao-vazio {
  flex: 1;
}

.botao-lista {
  display: none;
}

.aviso-pais {
  border-left-color: var(--sol);
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.cartao-historia p {
  margin: 0;
  color: var(--tinta-suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao-historia.em-breve {
  opacity: 0.78;
  cursor: default;
}

.cartao-historia.em-breve:hover {
  transform: none;
}

.folha {
  border-radius: 28px;
  padding: 1.5rem 1.4rem 1.8rem;
}

.meta-historia {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.8rem 0 1.1rem;
}

.chip {
  background: linear-gradient(180deg, #e7f8ff, #d3eefb);
  color: var(--ceu-escuro);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 #fff;
}

.aviso {
  border-radius: 20px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
  border-left: 6px solid var(--folha);
  background: linear-gradient(180deg, #f3fff5, #fffdf8);
}

.cena {
  border-radius: 24px;
  padding: 1.15rem 1.1rem 1.25rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.cena-icone {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 6px 0 rgba(0, 0, 0, 0.08);
}

.cena-icone svg {
  width: 38px;
  height: 38px;
}

.cena h3 {
  font-size: 1.35rem;
}

.rotulo-dia {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-escuro);
  margin-bottom: 0.15rem;
}

.texto-infantil {
  font-size: 1.18rem;
  line-height: 1.7;
  margin: 0.55rem 0 0.9rem;
  white-space: pre-wrap;
}

[data-edit-multi] {
  white-space: pre-wrap;
}

.versiculo {
  background: linear-gradient(180deg, #fff4d0, #ffe7a8);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  margin-top: 0.55rem;
}

.versiculo blockquote {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
}

.versiculo cite {
  display: block;
  margin-top: 0.45rem;
  font-style: normal;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--coral-escuro);
}

.rodape {
  margin-top: 1.6rem;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}

.rodape-link {
  color: var(--ceu-escuro);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.15rem 0.1rem;
}

.form-folha h1 {
  max-width: none;
}

.form-contato {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}

.campo {
  display: grid;
  gap: 0.4rem;
  font-weight: 800;
}

.campo em {
  font-style: normal;
  font-weight: 700;
  color: var(--tinta-suave);
}

.campo input,
.campo textarea {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(58, 120, 160, 0.08);
  min-height: 52px;
}

.campo textarea {
  min-height: 9rem;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  outline: 3px solid #7ec8ea;
  outline-offset: 2px;
}

.mel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-status {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  font-weight: 800;
  background: rgba(62, 160, 200, 0.12);
  color: var(--ceu-escuro);
}

.form-status-ok {
  background: rgba(76, 175, 106, 0.16);
  color: #215c32;
}

.form-status-erro {
  background: rgba(255, 122, 74, 0.16);
  color: var(--coral-escuro);
}

.form-contato .botao {
  justify-self: start;
}

.dia-1 { background: #fff3c4; color: #8a5a00; }
.dia-2 { background: #d7eef6; color: #1f5d73; }
.dia-3 { background: #d9f0d8; color: #215c32; }
.dia-4 { background: #efe0ff; color: #5b3d86; }
.dia-5 { background: #d7f3ee; color: #1a6a60; }
.dia-6 { background: #fde3cf; color: #8a3f16; }
.dia-7 { background: #f8e7b0; color: #7a5b12; }

@media (hover: none) {
  .cartao-livro:hover,
  .cartao-historia:hover,
  .botao:hover {
    transform: none;
    filter: none;
  }
}

@media (max-width: 980px) {
  .grade-livros {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grade-livros-teaser > :nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 860px) {
  .grade-historias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bloco-testamento {
    padding: 0.95rem 0.75rem 1.8rem;
    border-radius: 22px;
  }

  .casca {
    width: min(1200px, calc(100% - 1rem));
    padding-top: 0.7rem;
  }

  .grade-livros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade-livros-teaser > :nth-child(n + 3) {
    display: none;
  }

  .home-convite-acoes .botao,
  .pergunte-trancado-acoes .botao {
    width: 100%;
  }

  .topo {
    border-radius: 26px;
    top: 0.35rem;
    padding: 0.38rem 0.38rem 0.38rem 0.35rem;
    gap: 0.4rem;
  }

  .marca-logo {
    height: 34px;
    max-width: min(89px, 22vw);
  }

  .topo-convidado .marca-logo {
    height: 43px;
    max-width: min(126px, 42vw);
  }

  .marca-canto .marca-logo {
    height: 29px;
    max-width: min(72px, 18vw);
  }

  .hero-logo {
    width: min(202px, 100%);
    margin-bottom: 0.4rem;
  }

  .marca-selo,
  .topo-voltar-bola {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    box-shadow:
      inset 0 -4px 0 rgba(180, 90, 0, 0.18),
      0 5px 0 #e08920;
  }

  .topo-voltar-bola {
    font-size: 1.2rem;
    box-shadow:
      inset 0 -4px 0 rgba(180, 60, 20, 0.18),
      0 5px 0 #d45a28;
  }

  .marca strong,
  .topo-voltar-texto strong {
    font-size: 1.02rem;
  }

  .marca-oi strong {
    font-size: 1.08rem;
    max-width: min(160px, 36vw);
  }

  .topo:has(.marca-oi) .topo-voltar-texto {
    display: none;
  }

  .marca span span,
  .topo-voltar-texto span {
    font-size: 0.74rem;
  }

  .selo-versao {
    padding: 0.38rem 0.62rem;
    font-size: 0.72rem;
    margin-right: 0.05rem;
  }

  .selo-versao-palavra {
    display: none;
  }

  .topo-link,
  .topo-sair {
    font-size: 0.72rem;
    padding: 0.38rem 0.58rem;
  }

  .topo-divisa {
    height: 22px;
  }

  .hero {
    padding: 1.25rem 1.05rem 1.2rem;
    border-radius: 24px;
  }

  .hero::before {
    width: 64px;
    height: 64px;
    right: 0.8rem;
    top: 0.7rem;
  }

  .hero::after {
    display: none;
  }

  .lead {
    font-size: 1.02rem;
  }

  .acoes-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .acoes-hero .botao-primario {
    grid-column: 1 / -1;
    width: 100%;
  }

  .acoes-hero .botao-secundario,
  .acoes-hero .botao-sol,
  .acoes-hero .botao-lavanda {
    width: 100%;
  }

  .acoes-hero-conta {
    max-width: none;
  }

  .acoes-hero-conta-botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-grade {
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "projetor"
      "conta"
      "acoes";
  }

  .hero-thumbs {
    display: block;
    overflow: hidden;
  }

  .hero-thumbs-faixa {
    display: flex;
    gap: 0.35rem;
    width: 200%;
    transform: translateX(calc(var(--hero-pagina, 0) * -50%));
    transition: transform 0.4s ease;
  }

  .hero-thumbs-faixa .hero-thumb {
    flex: 0 0 calc((50% - 1.05rem) / 4);
  }

  .pergunte-form {
    grid-template-columns: 1fr;
  }

  .pergunte-form .botao {
    width: 100%;
  }

  .pergunte-selo {
    display: none;
  }

  .ex-vf-botoes {
    grid-template-columns: 1fr;
  }

  .form-contato .botao {
    width: 100%;
    justify-self: stretch;
  }

  .cartao-livro {
    box-shadow:
      0 12px 0 #d85a3a,
      0 20px 28px rgba(216, 90, 58, 0.25);
  }

  .cartao-livro-cor-2,
  .cartao-livro-exodo {
    box-shadow:
      0 12px 0 #185a78,
      0 20px 28px rgba(24, 90, 120, 0.25);
  }

  .cartao-livro-cor-3,
  .cartao-livro-levitico {
    box-shadow:
      0 12px 0 #3a2458,
      0 20px 28px rgba(58, 36, 88, 0.25);
  }

  .cartao-livro-cor-4,
  .cartao-livro-numeros {
    box-shadow:
      0 12px 0 #1e5a38,
      0 20px 28px rgba(30, 90, 56, 0.25);
  }

  .cartao-livro-cor-0,
  .cartao-livro-deuteronomio {
    box-shadow:
      0 12px 0 #6b420c,
      0 20px 28px rgba(107, 66, 12, 0.25);
  }

  .cartao-livro .capa-cartao {
    height: 168px;
  }

  .folha {
    padding: 1.15rem 0.95rem 1.3rem;
    border-radius: 22px;
  }

  .ilustracao-historia {
    max-height: 300px;
    border-width: 4px;
    border-radius: 18px;
    margin-left: -0.2rem;
    margin-right: -0.2rem;
    width: calc(100% + 0.4rem);
  }

  .cena {
    grid-template-columns: 1fr;
    padding: 1rem 0.9rem 1.05rem;
  }

  .cena-icone {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }

  .texto-infantil {
    font-size: 1.12rem;
    line-height: 1.65;
  }

  .pagina-historia {
    padding-bottom: calc(7.2rem + var(--safe-bottom));
  }

  .cantico-selo,
  .cantico-selo-estatico {
    width: 5.6rem;
  }

  .cantico-selo-ico {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .cantico-selo-ico svg {
    width: 32px;
    height: 32px;
  }

  .cantico-selo strong,
  .cantico-selo-estatico strong {
    font-size: 0.8rem;
  }

  .musica-player {
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem 0.5rem;
    padding: 0.65rem 0.7rem;
  }

  .musica-player .musica-tempo:first-of-type {
    display: none;
  }

  .playlist-cabeca {
    grid-template-columns: 1fr;
    padding: 1.1rem 1rem 1.15rem;
  }

  .playlist-capa {
    width: 120px;
    height: 120px;
    border-radius: 24px;
  }

  .playlist-capa svg {
    width: 58px;
    height: 58px;
  }

  .playlist-colunas,
  .faixa {
    grid-template-columns: 2.4rem minmax(0, 1fr) 3.6rem;
  }

  .playlist-colunas span:nth-child(3),
  .faixa-album {
    display: none;
  }

  .musica-dock {
    grid-template-columns: 1fr;
    padding: 0.6rem 0.7rem;
  }

  .nav-historias {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    margin: 0;
    padding: 0.7rem 0.7rem calc(0.7rem + var(--safe-bottom));
    background: linear-gradient(180deg, rgba(232, 246, 255, 0), rgba(255, 248, 236, 0.94) 28%, #fff6e8 100%);
    backdrop-filter: blur(10px);
  }

  .botao-vazio {
    display: none;
  }

  .nav-historias .botao-lista {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 4.6rem;
    max-width: 5.2rem;
    min-height: 62px;
    padding: 0.7rem 0.55rem;
    justify-content: center;
  }

  .nav-historias a {
    min-height: 62px;
    padding: 0.7rem 0.85rem;
    border-radius: 20px;
  }
}

@media (max-width: 560px) {
  .grade-historias {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .cartao-historia {
    display: grid;
    grid-template-columns: 108px 1fr;
    align-items: stretch;
    min-height: 108px;
  }

  .cartao-historia .capa-cartao {
    height: 100%;
    min-height: 108px;
  }

  .cartao-historia .corpo-cartao {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.8rem 0.75rem;
  }

  .cartao-historia h3 {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
  }

  .cartao-historia p {
    -webkit-line-clamp: 2;
    font-size: 0.88rem;
    flex: 1;
  }

  .botao-cartao {
    align-self: flex-start;
    min-height: 34px;
    margin-top: 0.45rem;
    padding: 0.28rem 0.75rem;
    font-size: 0.82rem;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 3px 0 var(--botao-sombra);
  }

  h1 {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .botao,
  .cartao-livro,
  .cartao-historia {
    transition: none;
  }
}

.faixa-admin {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 0.7rem;
  padding: 0.55rem 1rem;
  background: #17384a;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.faixa-admin a {
  color: var(--sol);
  font-weight: 800;
}

.aviso-edicao {
  position: fixed;
  left: 50%;
  top: 4.4rem;
  transform: translateX(-50%);
  z-index: 50;
  width: min(36rem, calc(100% - 1.5rem));
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  background: #e8fff0;
  color: #1b5e32;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 10px 24px rgba(27, 94, 50, 0.18);
}

.aviso-edicao-erro {
  background: #ffe8e0;
  color: var(--coral-escuro);
}

body.admin-ligado {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body.admin-ligado img {
  pointer-events: auto;
  -webkit-user-drag: auto;
  user-drag: auto;
}

body.admin-ligado .topo {
  top: 3.15rem;
}

body.admin-ligado [data-edit] {
  cursor: text;
  touch-action: manipulation;
}

body.admin-ligado [data-edit]:hover {
  outline: 2px dashed rgba(226, 90, 44, 0.45);
  outline-offset: 3px;
  border-radius: 8px;
}

body.admin-ligado [data-edit].editando {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  background: rgba(255, 255, 255, 0.72);
  user-select: text;
  -webkit-user-select: text;
}

body.admin-ligado .cartao-historia .botao-cartao,
body.admin-ligado .cartao-livro .botao-dentro {
  pointer-events: auto;
}

body.admin-ligado .ex-cartao [data-edit] {
  position: relative;
  z-index: 1;
}

body.admin-ligado [data-edit].edit-ok {
  outline: 2px solid var(--folha);
  outline-offset: 3px;
}

body.admin-ligado [data-edit]:empty::before {
  content: "Clique duas vezes para escrever";
  color: var(--tinta-suave);
  font-weight: 700;
}

.ex-placar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.2rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(58, 120, 160, 0.1);
}

.ex-nome-campo {
  display: grid;
  gap: 0.35rem;
  font-weight: 800;
  min-width: min(16rem, 100%);
  flex: 1;
}

.ex-nome-campo span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ceu-escuro);
}

.ex-nome-campo input {
  min-height: 48px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-weight: 800;
  color: var(--tinta);
  background: #fff;
}

.ex-placar-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
  font-weight: 800;
}

.ex-placar-numeros p {
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: #fff4d0;
  color: #6b3d00;
}

.ex-placar-numeros p:first-child {
  background: linear-gradient(180deg, #ffe9a0, #ffd45a);
}

.ex-folha {
  margin-bottom: 1.2rem;
}

.ex-hub-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  flex-wrap: wrap;
}

.ex-hub-topo h1 {
  margin: 0;
}

.ex-grau-legenda {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 auto;
  color: var(--tinta-suave);
  font-weight: 800;
  font-size: 0.92rem;
}

.ex-grau-legenda .ex-dificuldade {
  align-items: flex-end;
}

.ex-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.ex-cartao {
  display: block;
  text-decoration: none;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fff8ea);
  box-shadow:
    0 10px 0 #ead7b0,
    0 16px 24px rgba(180, 140, 70, 0.12);
}

.ex-cartao small {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.55rem;
  border-radius: 50%;
  background: var(--sol);
  color: #6b3d00;
  font-weight: 800;
}

.ex-cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}

.ex-cartao h2 {
  font-size: 1.2rem;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.ex-dificuldade {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.ex-barra {
  display: block;
  width: 7px;
  height: 14px;
  border-radius: 3px;
  background: #ead9b4;
}

.ex-barra-cheia {
  background: linear-gradient(180deg, #ffd45a, #f0a020);
  box-shadow: 0 1px 0 #d48910;
}

.ex-cartao p {
  margin: 0;
  color: var(--tinta-suave);
  font-weight: 700;
}

.ex-fila {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  list-style: none;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff4d0, #ffe7a8);
  font-weight: 800;
}

.ex-fila li {
  margin: 0.25rem 0;
}

.ex-slot-num {
  color: var(--ceu-escuro);
}

.ex-slot-texto {
  color: var(--tinta);
}

.ex-opcoes {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.ex-opcao {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  height: auto;
  min-height: 52px;
}

.ex-opcao-ok {
  background: linear-gradient(180deg, #b7f0c4, #4caf6a) !important;
  color: #fff !important;
  --botao-sombra: #2e7d4f;
}

.ex-opcao-erro {
  background: linear-gradient(180deg, #ffb39a, #e25a2c) !important;
  color: #fff !important;
}

.ex-enunciado {
  margin: 0.8rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff4d0, #ffe7a8);
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  line-height: 1.45;
}

.ex-enunciado.ex-verso-certo {
  background: linear-gradient(180deg, #e9ffe8, #c8f6c4);
  animation: ex-verso-certo 0.85s ease;
}

.ex-palavra-certa {
  display: inline-block;
  color: #146536;
  font-weight: 800;
  animation: ex-palavra-certa 0.7s ease;
}

@keyframes ex-verso-certo {
  0% {
    transform: scale(0.97);
    box-shadow: 0 0 0 0 rgba(76, 175, 106, 0.45);
  }
  45% {
    transform: scale(1.03);
    box-shadow: 0 0 0 14px rgba(76, 175, 106, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 16px rgba(46, 125, 79, 0.12);
  }
}

@keyframes ex-palavra-certa {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  55% {
    transform: scale(1.28);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.ex-progresso,
.ex-status,
.ex-ref {
  margin: 0.7rem 0 0;
  font-weight: 800;
}

.ex-status-ok {
  color: #1b5e32;
}

.ex-status-erro {
  color: var(--coral-escuro);
}

.ex-cores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 1rem 0 0.8rem;
}

.ex-cor {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 3px 0 rgba(42, 36, 48, 0.18);
  cursor: pointer;
  padding: 0;
}

.ex-cor[data-ex-cor="#fffdf8"] {
  box-shadow: 0 3px 0 rgba(42, 36, 48, 0.18), inset 0 0 0 1px #d8cbb4;
}

.ex-cor-ativa {
  outline: 3px solid #2a7fa3;
  outline-offset: 2px;
}

.ex-pintar-apagar {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0.22rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff4ec;
  color: #8f5c50;
  box-shadow: 0 3px 0 rgba(42, 36, 48, 0.18);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ex-pintar-apagar svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.ex-pintar-confirma {
  margin: 0.55rem auto 0.2rem;
  max-width: 22rem;
  padding: 0.75rem 0.9rem 0.85rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffaf6, #fff0e4);
  border: 2px dashed rgba(168, 120, 108, 0.4);
}

.ex-pintar-confirma p {
  margin: 0 0 0.65rem;
  font-weight: 800;
  color: var(--tinta);
}

.ex-pintar-confirma-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.ex-pintar-confirma-acoes .botao {
  min-height: 44px;
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
}

.ex-pintar-caixa {
  margin-top: 0.4rem;
  background: #fff;
  border-radius: 22px;
  padding: 0.6rem;
  box-shadow: 0 8px 18px rgba(58, 120, 160, 0.1);
}

.ex-editar-pintar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.35rem;
}

.ex-editar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 2px solid rgba(42, 36, 48, 0.18);
  background: #fff;
  color: #1a1520;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ex-editar-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ex-editar-ativa {
  outline: 3px solid #2a2430;
  outline-offset: 2px;
  background: #1a1520;
  color: #fff;
  border-color: #1a1520;
}

.ex-editar-salvar {
  min-height: 44px;
}

.ex-editar-espessura {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ex-editar-mais {
  min-width: 2.4rem;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}

.ex-editar-num {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 800;
  color: #1a1520;
}

.ex-pintar-tela {
  display: block;
  width: 100%;
  max-width: 38rem;
  height: auto;
  margin: 0 auto;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  image-rendering: auto;
  image-rendering: high-quality;
}

.ex-pintar-tela.ex-pintar-editando {
  cursor: crosshair;
}

.ex-pintar-tela.ex-pintar-lapis {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%231a1520' d='M3.6 28.6l2.2-6.4L22.4 5.6a2.3 2.3 0 0 1 3.2 0l1.8 1.8a2.3 2.3 0 0 1 0 3.2L10 26.4l-6.4 2.2z'/%3E%3Cpath fill='%23f4c56d' d='M22.4 5.6l4 4 1-1a2.3 2.3 0 0 0 0-3.2L25.6 3.6a2.3 2.3 0 0 0-3.2 0l-1 1z'/%3E%3Cpath fill='%23e25a2c' d='M3.6 28.6l2.2-6.4 4.2 4.2-6.4 2.2z'/%3E%3C/svg%3E") 4 28, crosshair;
}

.ex-pintar-tela.ex-pintar-borracha {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23f4b4a0' stroke='%231a1520' stroke-width='1.6' d='M6 20 16 8l8 7-10 12H8z'/%3E%3Cpath fill='%23ffe8e0' stroke='%231a1520' stroke-width='1.4' d='M6 20h8l2-2.4-6.4-5.2z'/%3E%3C/svg%3E") 6 22, crosshair;
}

.ex-folha:has(.ex-caca-jogo),
.ex-folha:has(.ex-cruz-jogo),
.ex-folha:has(.ex-pintar-caixa) {
  text-align: center;
}

.ex-folha:has(.ex-caca-jogo) .lead,
.ex-folha:has(.ex-cruz-jogo) .lead,
.ex-folha:has(.ex-pintar-caixa) .lead,
.ex-folha:has(.ex-caca-jogo) .ex-status,
.ex-folha:has(.ex-cruz-jogo) .ex-status {
  text-align: center;
}

.ex-caca-jogo,
.ex-cruz-jogo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  margin: 1.2rem auto 0;
}

.ex-caca-grade {
  display: grid;
  gap: 0.18rem;
  touch-action: none;
  user-select: none;
  width: min(34rem, 100%);
  margin: 0 auto;
}

.ex-caca-linha {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 0.18rem;
}

.ex-caca-cel {
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: inset 0 0 0 1px var(--linha);
  cursor: pointer;
  padding: 0;
}

.ex-caca-sel {
  background: #ffe08a;
}

.ex-caca-ok {
  background: linear-gradient(180deg, #b7f0c4, #4caf6a);
  color: #fff;
}

.ex-caca-lista,
.ex-cruz-dicas {
  margin: 0 auto;
  padding: 0.85rem 1rem 0.85rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff4d0, #ffe7a8);
  font-weight: 800;
  text-align: left;
  min-width: min(14rem, 100%);
}

.ex-cruz-dicas-caixa {
  display: grid;
  gap: 0.85rem;
  text-align: left;
  min-width: min(16rem, 100%);
}

.ex-cruz-eixo {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.ex-cruz-dicas {
  list-style: none;
  padding-left: 1rem;
}

.ex-caca-lista li,
.ex-cruz-dicas li {
  margin: 0.3rem 0;
}

.ex-caca-achada {
  text-decoration: line-through;
  color: #1b5e32;
}

.ex-cruz-grade {
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

.ex-cruz-cel {
  position: relative;
  width: 2.1rem;
  min-width: 2.1rem;
  max-width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: #fff;
  border: 2px solid #2a2430;
  box-sizing: border-box;
}

.ex-cruz-vazia {
  width: 2.1rem;
  min-width: 2.1rem;
  height: 2.1rem;
  border: 0;
  background: transparent;
}

.ex-cruz-num {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #2a7fa3;
  line-height: 1;
}

.ex-cruz-letra {
  width: 100%;
  height: 100%;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  background: transparent;
  color: var(--tinta);
  padding: 0.2rem 0 0;
}

.ex-cruz-letra:focus {
  outline: 2px solid #7ec8ea;
  outline-offset: -2px;
  background: #eef8ff;
}

.ex-cruz-ok {
  background: #e9ffe8;
  color: #146536;
}

@media (max-width: 720px) {
  .ex-placar {
    padding: 0.75rem 0.8rem;
  }
}

.cad-atalho {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0 0;
}

.cad-folha {
  max-width: 40rem;
}

.cad-barra {
  display: flex;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
}

.cad-traco {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e4edf3;
}

.cad-traco.atual,
.cad-traco.feito {
  background: linear-gradient(90deg, #3aa3c7, #2b7f9a);
}

.cad-esqueci-linha {
  margin: -0.35rem 0 0;
}

.cad-esqueci {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  color: #2a7fa3;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cad-esqueci:hover {
  color: #1f6a8a;
}

.cad-esqueci:disabled {
  opacity: 0.65;
}

.cad-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.4rem;
}

.cad-acoes .botao-primario {
  margin-left: auto;
}

.cad-codigo {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.cad-digito {
  width: 3rem;
  height: 3.4rem;
  border: 1px solid var(--linha);
  border-radius: 14px;
  text-align: center;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tinta);
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(58, 120, 160, 0.08);
}

.cad-digito:focus {
  outline: 3px solid #7ec8ea;
  outline-offset: 2px;
}

.aviso-juntos {
  border-left-color: var(--sol);
  background: linear-gradient(180deg, #fff8e4, #fffdf8);
  margin-bottom: 1.6rem;
}

.aviso-juntos strong {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  color: #6b3d00;
}

.titulo-fundo {
  margin: 0.4rem 0 0.35rem;
  font-size: 1.55rem;
}

.lead-fundo {
  margin: 0 0 1.1rem;
}

.texto-estudo {
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0.45rem 0 0.75rem;
  color: var(--tinta);
}

.pagina-estudo .cena {
  background: linear-gradient(180deg, #fffef9, #f7fbff);
  border: 1px solid var(--linha);
}

@media (max-width: 520px) {
  .cad-digito {
    width: 2.45rem;
    height: 2.9rem;
    font-size: 1.25rem;
  }

  .cad-acoes .botao-primario,
  .cad-acoes .botao-secundario {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .ex-grau-legenda {
    font-size: 0.82rem;
  }
}

@media print {
  body.sem-impressao * {
    visibility: hidden !important;
  }

  body.sem-impressao::after {
    visibility: visible !important;
    content: "Este conteúdo não pode ser impresso.";
    display: block;
    padding: 2rem;
    font-size: 1.2rem;
    text-align: center;
  }
}