/* Tema "Casa acesa" para o devocional "O Pai que corrige e acolhe": creme quente, vinho profundo e ouro,
   com uma cor de destaque para cada dia da semana. Todas as regras começam em .tema para não vazar para o site.
   Fontes: Young Serif (títulos) e Lora (texto). */

.tema {
  --vinho: #12060d;
  --vinho2: #2a0b14;
  --ouro: #ffd98a;
  --creme: #fff4e6;
  --tinta: #2a211b;
  --ac: #b8553a;
  --fd: #fff4e6;
  --f-titulo: "Young Serif", Georgia, serif;
  --f-texto: "Lora", Georgia, serif;
  background: var(--creme);
  color: var(--tinta);
}
/* A fonte do tema vale só para o cabeçalho, a semana e o texto; o convite para assinar mantém o visual do site */
.tema .tema-hero, .tema .tema-semana, .tema .leitura-tematica { font-family: var(--f-texto); }

/* Uma cor de destaque (--ac) e um fundo suave (--fd) para cada dia, como no PDF */
.tema [data-dia="1"] { --ac: #b8553a; --fd: #fff4e6; }
.tema [data-dia="2"] { --ac: #a8456b; --fd: #fff0f2; }
.tema [data-dia="3"] { --ac: #55793f; --fd: #f6f7e4; }
.tema [data-dia="4"] { --ac: #2b7d86; --fd: #eef9f6; }
.tema [data-dia="5"] { --ac: #4a4aa0; --fd: #f1f0ff; }
.tema [data-dia="6"] { --ac: #b5651f; --fd: #fff3e2; }
.tema [data-dia="7"] { --ac: #2d3a80; --fd: #eceefa; }

/* ── Cabeçalho ───────────────────────────────────────────── */
.tema .tema-hero { background: radial-gradient(circle at 70% 20%, #5a1626 0%, var(--vinho2) 55%, var(--vinho) 100%); color: #f6ecd9; border-bottom: 3px solid var(--ouro); }
.tema .tema-hero-in { max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 2.75rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .tema .tema-hero-in { grid-template-columns: 1fr 15.5rem; padding: 3.5rem 1.5rem 4rem; gap: 3rem; } }
.tema .tema-trilha { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: #d8c79c; margin-bottom: 1.75rem; }
.tema .tema-trilha a { color: #d8c79c; text-decoration: none; }
.tema .tema-trilha a:hover { color: var(--ouro); text-decoration: underline; }
.tema .tema-sup { font-size: .75rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #e8d29a; margin: 0 0 1rem; }
.tema .tema-hero h1 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.4rem, 8vw, 3.9rem); line-height: 1.06; color: #f6ecd9; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.tema .tema-sub { font-style: italic; color: var(--ouro); font-size: 1.25rem; line-height: 1.4; max-width: 32rem; margin: 1.1rem 0 0; }
.tema .tema-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .92rem; color: #d8c79c; margin: 1.5rem 0 0; }
.tema .tema-progresso { margin-top: 1.5rem; max-width: 22rem; font-size: .95rem; color: #f6ecd9; }
.tema .tema-progresso p { margin: 0 0 .5rem; }
.tema .tema-barra { height: .55rem; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.tema .tema-barra > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #e0a93c, var(--ouro)); box-shadow: 0 0 10px rgba(255, 217, 138, .5); transition: width .3s; }
.tema .tema-baixar { display: inline-block; margin-top: 1.4rem; padding: .6rem 1.2rem; border: 1.5px solid var(--ouro); border-radius: 99px; color: var(--ouro); font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.tema .tema-baixar:hover { background: var(--ouro); color: var(--vinho); }
.tema .tema-capa { justify-self: center; width: min(15.5rem, 70%); border-radius: .5rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 217, 138, .5), 0 1.5rem 3rem -1rem rgba(0, 0, 0, .85), 0 0 3rem 0 rgba(255, 217, 138, .18); }
.tema .tema-capa img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .tema .tema-capa { width: 11.5rem; } }

/* ── Corpo ───────────────────────────────────────────────── */
.tema .tema-corpo { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.1rem 4rem; }
@media (min-width: 640px) { .tema .tema-corpo { padding: 3.5rem 1.5rem 5rem; } }

/* A semana em sete passos */
.tema .tema-semana { margin: 0 0 3rem; padding: 1.6rem 1.2rem .8rem; border-radius: 1.2rem; background: #1a0a12; color: #f6ecd9; }
.tema .tema-semana h2 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.55rem; text-align: center; color: var(--ouro); margin: 0 0 1rem; }
.tema .tema-semana ol { list-style: none; margin: 0; padding: 0; }
.tema .tema-semana li { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.tema .tema-semana li:last-child { border-bottom: 0; }
.tema .tema-semana a { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: .9rem; align-items: center; padding: .8rem .1rem; text-decoration: none; color: inherit; }
.tema .tema-semana a:not([href]) { cursor: default; }
.tema .tema-semana b { grid-row: span 2; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--ac); color: #fff; font: 700 1.15rem/2.8rem "Lora", sans-serif; text-align: center; }
.tema .tema-semana .nome { font-family: var(--f-titulo); font-size: 1.05rem; line-height: 1.25; color: #fff4dc; }
.tema .tema-semana em { font-size: .85rem; color: var(--ouro); }
.tema .tema-semana a[href]:hover .nome { text-decoration: underline; }

/* Texto de leitura (o tamanho muda com A− / A+, que adicionam .reading-sm / .reading-lg) */
.tema .leitura-tematica { font-size: 1.1rem; line-height: 1.7; }
.tema .leitura-tematica.reading-sm { font-size: 1rem; }
.tema .leitura-tematica.reading-lg { font-size: 1.26rem; }
.tema .leitura-tematica p { margin: 0 0 1em; overflow-wrap: break-word; }
.tema .leitura-tematica a { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

/* Introdução */
.tema .intro .ilus { margin: 0 0 1.6rem; border-radius: 1.1rem; overflow: hidden; }
.tema .intro .ilus img, .tema .dia .ilus img { display: block; width: 100%; height: auto; }
.tema .intro .rotulo { font-size: .75rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #b8553a; margin: 0 0 .8rem; }
.tema .intro-texto > p:first-child::first-letter { float: left; font-family: var(--f-titulo); font-size: 3.8em; line-height: .82; color: #b8553a; padding: .08em .12em 0 0; }

/* Um cartão por dia */
.tema .dia { margin-top: 3rem; border-radius: 1.2rem; background: var(--fd); box-shadow: 0 .1rem 0 rgba(0, 0, 0, .04), 0 1.2rem 2rem -1.4rem rgba(42, 33, 27, .5); scroll-margin-top: 5rem; overflow: hidden; }
.tema .dia .arte { position: relative; margin-bottom: 0; }
.tema .dia .ilus { margin: 0; box-shadow: 0 .2rem 0 var(--ac); }
.tema .dia .num { position: absolute; left: 1.1rem; bottom: -2.6rem; z-index: 2; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--ac); color: #fff; text-align: center; border: .4rem solid var(--fd); }
.tema .dia .num small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .3em; padding-left: .3em; margin-top: .75rem; opacity: .9; }
.tema .dia .num b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; line-height: 1; margin-top: .05rem; }
.tema .dia-txt { padding: 0 1.2rem 1.5rem; }
@media (min-width: 640px) { .tema .dia-txt { padding: 0 2rem 2rem; } .tema .dia .num { left: 1.6rem; } }
.tema .dia h2 { margin: .9rem 0 1rem; padding-left: 6.1rem; min-height: 2.6rem; display: flex; align-items: center; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.35rem, 4.6vw, 1.75rem); line-height: 1.15; color: var(--tinta); }
@media (min-width: 640px) { .tema .dia h2 { padding-left: 6.4rem; } }
.tema .dia .leitura { display: inline-block; margin: 1.1rem 0 1rem; padding: .25rem 1rem; border: 1.3px solid var(--ac); border-radius: 99px; color: var(--ac); font-style: italic; font-size: .98rem; }
.tema .dia .leitura span, .tema .dia .refletir span { margin-right: .6rem; font-style: normal; font-weight: 700; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; }
.tema .dia .corpo > p:first-child::first-letter { float: left; font-family: var(--f-titulo); font-size: 3.3em; line-height: .84; color: var(--ac); padding: .06em .1em 0 0; }
@media (min-width: 640px) { .tema .dia .corpo p { text-align: justify; hyphens: auto; } }
.tema .dia .refletir { margin-top: 1.4rem; padding: .9rem 1.1rem 1rem; border-left: .35rem solid var(--ac); border-radius: 0 .8rem .8rem 0; background: rgba(255, 255, 255, .65); font-style: italic; color: #3b2f27; }
.tema .dia .refletir span { display: block; color: var(--ac); margin: 0 0 .3rem; }
.tema .dia .refletir p { margin: 0; }
.tema .dia .concluir { margin-top: 1.6rem; }
.tema .dia .concluir button { cursor: pointer; padding: .6rem 1.2rem; border: 1.5px solid var(--ac); border-radius: 99px; background: transparent; color: var(--ac); font: 600 .95rem var(--f-texto); transition: background .15s, color .15s; }
.tema .dia .concluir button:hover, .tema .dia .concluir button.feito { background: var(--ac); color: #fff; }

/* Nota de fontes depois do último dia */
.tema .nota { margin-top: 3rem; padding: 1.2rem 1.3rem; border-radius: 1rem; background: #1a0a12; color: #cdb98f; font-size: .85rem; line-height: 1.5; }
.tema .nota p { margin: 0 0 .6rem; }
.tema .nota a { color: #e8d29a; word-break: break-all; }

.tema .tema-corpo > :not(.tema-semana):not(.leitura-tematica) { margin-top: 2.5rem; }
@media (prefers-reduced-motion: reduce) { .tema .tema-baixar, .tema .tema-barra > div, .tema .dia .concluir button { transition: none; } }