/* ==========================================================================
   +Vida — plataforma de conteúdos em vídeo da CAMPERJ
   ========================================================================== */

:root {
  --azul:          #003a5c;   /* Azul CAMPERJ */
  --azul-profundo: #022b45;
  --marinho:       #04213a;
  --verde:         #6ebf8b;   /* Verde CAMPERJ */
  --verde-forte:   #2f8a5a;   /* verde com contraste para texto branco */
  --verde-suave:   rgba(110,191,139,.14);
  --fundo:         #f3f6f8;
  --branco:        #ffffff;
  --texto:         #0b2a40;
  --texto-suave:   #557085;
  --borda:         rgba(0,58,92,.10);
  --sombra:        0 6px 24px rgba(0,40,70,.10);
  --sombra-forte:  0 18px 48px rgba(0,30,55,.22);
  --raio:          14px;
  --raio-g:        20px;
  --topo-altura:   76px;
  --gutter:        clamp(16px, 4vw, 56px);
  --transicao:     .28s cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 3000;
  background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
section[id] { scroll-margin-top: calc(var(--topo-altura) - 1px); }

/* ─── BOTÕES ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 1.02rem; font-weight: 600; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-primario {
  background: linear-gradient(135deg, #3fa36c, var(--verde-forte));
  color: #fff;
  box-shadow: 0 8px 22px rgba(47,138,90,.32);
  padding-left: 12px;
}
.btn-primario:hover { box-shadow: 0 12px 28px rgba(47,138,90,.42); }
.btn-contorno { background: rgba(255,255,255,.7); border-color: var(--azul); color: var(--azul); backdrop-filter: blur(6px); }
.btn-contorno:hover { background: var(--azul); color: #fff; }
.btn-pequeno { min-height: 42px; padding: 0 18px; font-size: .88rem; gap: 6px; white-space: nowrap; }
.btn-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--verde-forte); font-size: 1.15rem;
}
.btn-play i { margin-left: 2px; }

.link-seta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--azul); font-size: .92rem; font-weight: 500;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  transition: gap var(--transicao), color var(--transicao);
}
.link-seta:hover { gap: 12px; color: var(--verde-forte); }
.link-claro { color: rgba(255,255,255,.85); }
.link-claro:hover { color: #fff; }

/* ─── TOPO ───────────────────────────────────────────── */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--topo-altura);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.topo.rolado, .topo.aberto {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 22px rgba(0,40,70,.08);
}
.topo-inner {
  height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
}
.topo-logo { flex-shrink: 0; }
.topo-logo img { height: 44px; width: auto; }
.topo-painel { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topo-nav { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.topo-nav a {
  position: relative; padding: 8px 0; font-size: .95rem; font-weight: 500; color: var(--texto);
  transition: color var(--transicao);
}
.topo-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--verde); transform: scaleX(0); transition: transform var(--transicao);
}
.topo-nav a:hover { color: var(--verde-forte); }
.topo-nav a.ativo { font-weight: 600; color: var(--azul); }
.topo-nav a.ativo::after { transform: scaleX(1); }

.busca { position: relative; width: min(300px, 100%); }
.busca input {
  width: 100%; height: 46px; padding: 0 42px 0 46px;
  border-radius: 999px; border: 1.5px solid rgba(0,58,92,.25);
  background: rgba(255,255,255,.75); color: var(--texto); font: inherit; font-size: .92rem;
  outline: none; transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
  -webkit-appearance: none; appearance: none;
}
.busca input::-webkit-search-cancel-button { display: none; }
.busca input::placeholder { color: var(--texto-suave); }
.busca input:focus { border-color: var(--verde); background: #fff; box-shadow: 0 0 0 4px var(--verde-suave); }
.busca-icone { position: absolute; z-index: 1; left: 17px; top: 50%; transform: translateY(-50%); color: var(--azul); pointer-events: none; }
.busca-limpar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--verde-suave); color: var(--azul); font-size: .75rem;
}
.topo-menu-btn {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--borda); background: rgba(255,255,255,.8); font-size: 1.6rem; cursor: pointer; color: var(--azul);
}

/* ─── HERO ───────────────────────────────────────────── */
/* Foto: troque mais-vida/images/hero-vida.jpg (paisagem, pessoa à direita do centro) */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(470px, 34vw, 620px);
  padding: calc(var(--topo-altura) + clamp(12px, 2vw, 28px)) var(--gutter) clamp(32px, 3.4vw, 52px);
  display: flex; align-items: center;
  background: #eef3f1;
}
.hero-foto {
  position: absolute; inset: 0; z-index: -2;
  background: url("../images/hero-vida.jpg") 70% 28% / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(60% 70% at 100% 0%, rgba(0,40,60,.32), rgba(0,40,60,0) 70%),
    linear-gradient(90deg, rgba(250,252,251,.96) 0%, rgba(250,252,251,.9) 24%, rgba(250,252,251,.7) 36%, rgba(250,252,251,.3) 46%, rgba(250,252,251,0) 56%);
}
.hero-pilares {
  position: absolute; right: var(--gutter); top: calc(var(--topo-altura) + 16px);
  list-style: none; margin: 0; padding: 0;
  font-size: .7rem; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; line-height: 2.25;
  color: #fff; text-shadow: 0 1px 6px rgba(0,30,50,.55);
}
.hero-conteudo { position: relative; max-width: 620px; }
.hero-logo { width: clamp(170px, 15vw, 230px); height: auto; margin: 0 0 clamp(10px, 1.4vw, 18px) -4px; }
.hero-marca {
  display: flex; align-items: center; gap: .04em; margin: 0 0 .06em;
  font-size: clamp(4rem, 8.6vw, 8.4rem); font-weight: 800; line-height: .86; letter-spacing: -.045em;
  color: #bb327a;   /* rosa da logo Longevidade +Vida, igual à cruz */
}
.hero-mais { position: relative; width: .78em; height: .78em; flex-shrink: 0; margin-right: .05em; }
.hero-mais::before, .hero-mais::after {
  content: ""; position: absolute; border-radius: .07em;
  /* rosa da logo Longevidade +Vida (#BB327A) */
  background: linear-gradient(140deg, #d4579a 0%, #bb327a 55%, #9e2766 100%);
  box-shadow: 0 .03em .1em rgba(187,50,122,.28);
}
.hero-mais::before { left: 31%; width: 38%; top: 0; height: 100%; }
.hero-mais::after  { top: 31%; height: 38%; left: 0; width: 100%; }
.hero-headline {
  margin: 0 0 10px; font-size: clamp(1.4rem, 2.3vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  color: var(--azul);
}
.hero-headline span { color: var(--verde-forte); }
.hero-texto { margin: 0 0 22px; max-width: 470px; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.5; color: var(--azul); }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn { min-height: 48px; font-size: .98rem; }
.hero .btn-primario { background: linear-gradient(135deg, #2f9f72, #1d7f5f); box-shadow: 0 8px 20px rgba(29,127,95,.3); padding-right: 26px; }
.hero .btn-play { width: 30px; height: 30px; color: #1d7f5f; }
.hero .btn-contorno { background: rgba(255,255,255,.9); padding: 0 26px; }
.hero .btn-contorno:hover,
.hero .btn-contorno:focus-visible { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 8px 20px rgba(0,58,92,.25); }

.hero-assinatura {
  margin: 22px 0 0;
  font-family: 'Caveat', cursive; font-size: clamp(1.7rem, 2.2vw, 2.2rem); line-height: 1.1; font-weight: 600;
  color: var(--azul);
}
.hero-assinatura::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 3px; margin-top: 8px; background: var(--verde);
}

/* Topo sobre a foto (desktop): busca translúcida com contorno branco */
@media (min-width: 981px) {
  .topo:not(.rolado) .busca input {
    background: rgba(0,40,60,.22); border-color: rgba(255,255,255,.85); color: #fff;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .topo:not(.rolado) .busca input::placeholder { color: rgba(255,255,255,.92); }
  .topo:not(.rolado) .busca-icone { color: #fff; }
  .topo:not(.rolado) .busca-limpar { background: rgba(255,255,255,.2); color: #fff; }
}

/* ─── SEÇÕES ─────────────────────────────────────────── */
.secao { padding: clamp(40px, 5vw, 64px) 0; }
.secao-clara { background: var(--fundo); }
.secao-escura { background: radial-gradient(120% 140% at 80% 0%, #0a4a70 0%, var(--azul-profundo) 45%, var(--marinho) 100%); color: #fff; }
.secao-serie { background: linear-gradient(180deg, #e9eff3, var(--fundo)); border-top: 1px solid var(--borda); }
.secao-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.secao-cabecalho .titulo-secao { margin-bottom: 0; }
.titulo-secao {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.titulo-secao::before { content: ""; width: 5px; align-self: stretch; min-height: 1.1em; border-radius: 4px; background: var(--verde); flex-shrink: 0; }
.secao-desc { margin: 6px 0 0 19px; color: var(--texto-suave); font-size: .95rem; max-width: 720px; }

/* ─── ESQUELETOS ─────────────────────────────────────── */
.esqueleto {
  background: linear-gradient(100deg, #dfe6eb 30%, #edf2f5 50%, #dfe6eb 70%) 0 0 / 300% 100%;
  animation: brilho 1.4s linear infinite;
}
.esqueleto-escuro { background-image: linear-gradient(100deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.06) 70%); }
@keyframes brilho { to { background-position: -300% 0; } }

/* ─── EM DESTAQUE ────────────────────────────────────── */
.destaque-grade {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(190px, .58fr);
  align-items: stretch;
}
.destaque-esqueleto { width: 100%; height: 100%; min-height: 300px; border-radius: var(--raio-g); }
.destaque-item-esqueleto { height: 96px; border-radius: var(--raio); }

.card-destaque {
  position: relative; display: flex; height: 100%; min-height: clamp(300px, 26vw, 380px);
  border-radius: var(--raio-g); overflow: hidden; isolation: isolate;
  background: var(--marinho); box-shadow: var(--sombra-forte);
}
.card-destaque img {
  position: absolute; inset: 0 0 0 auto; width: 72%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card-destaque::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--marinho) 0%, var(--marinho) 26%, rgba(4,33,58,.82) 46%, rgba(4,33,58,.15) 75%, rgba(4,33,58,.05) 100%),
    linear-gradient(0deg, rgba(4,33,58,.6), rgba(4,33,58,0) 45%);
}
.card-destaque:hover img { transform: scale(1.04); }
.card-destaque-corpo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 2.6vw, 36px); max-width: 58%; }
.selo {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.2;
  background: var(--verde-forte); color: #fff;
}
.card-destaque h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.22; font-weight: 700; letter-spacing: -.015em; }
.card-destaque p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.78); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; color: rgba(255,255,255,.82); }
.meta span { display: inline-flex; align-items: center; gap: 7px; }
.card-destaque .play-grande {
  position: absolute; left: 62%; top: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,33,58,.35); border: 3px solid #fff; color: #fff; font-size: 2.2rem;
  backdrop-filter: blur(4px); transition: transform var(--transicao), background var(--transicao);
}
.card-destaque .play-grande i { margin-left: 5px; }
.card-destaque:hover .play-grande { transform: translate(-50%, -50%) scale(1.08); background: var(--verde-forte); border-color: var(--verde-forte); }

.destaque-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-auto-rows: 1fr; }
.item-destaque {
  display: grid; grid-template-columns: 46% 1fr; gap: 14px; align-items: center; height: 100%;
  padding: 0 14px 0 0; border-radius: var(--raio); overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.item-destaque:hover { background: rgba(255,255,255,.1); border-color: rgba(110,191,139,.45); transform: translateX(3px); }
.item-destaque .thumb { border-radius: var(--raio) 0 0 var(--raio); height: 100%; min-height: 92px; aspect-ratio: auto; }
.item-destaque-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 0; }
.rotulo { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-destaque strong { font-size: .95rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.destaque-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
  padding: 24px 18px; border-radius: var(--raio-g);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.destaque-cta p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.85); }
.destaque-cta-icone { font-size: 2.4rem; color: #fff; }
.destaque-vazio { padding: 32px; border-radius: var(--raio-g); background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); }

/* ─── THUMB COMUM ────────────────────────────────────── */
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #cfd9e0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.thumb .duracao {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px;
  background: rgba(2,20,35,.82); color: #fff; font-size: .74rem; font-weight: 600; line-height: 1.3;
}
.thumb .ep {
  position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 6px;
  background: rgba(2,20,35,.86); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; line-height: 1.3;
}
.thumb .play-pequeno {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8);
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(4,33,58,.35); border: 2px solid #fff; color: #fff; font-size: 1.3rem;
  opacity: 0; transition: opacity var(--transicao), transform var(--transicao), background var(--transicao);
}
.thumb .play-pequeno i { margin-left: 3px; }
.item-destaque .thumb .play-pequeno { opacity: 1; transform: translate(-50%, -50%) scale(.85); }
a:hover .thumb .play-pequeno, a:focus-visible .thumb .play-pequeno { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--verde-forte); border-color: var(--verde-forte); }
a:hover .thumb img { transform: scale(1.05); }

/* ─── CARROSSEL ──────────────────────────────────────── */
.carrossel { position: relative; }
.trilho {
  display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 2px;
  padding: 6px 2px 18px; margin: -6px -2px -18px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; flex-shrink: 0; }
.carrossel-seta {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-70%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); background: #fff; color: var(--azul); font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,40,70,.16);
  transition: background var(--transicao), color var(--transicao), transform var(--transicao), opacity var(--transicao);
}
.carrossel-seta:hover { background: var(--azul); color: #fff; }
.carrossel-seta.anterior { left: -22px; }
.carrossel-seta.proxima  { right: -22px; }
@media (hover: none), (max-width: 760px) { .carrossel-seta { display: none !important; } }

/* ─── CARD DE SÉRIE ──────────────────────────────────── */
.card-serie {
  position: relative; display: flex; align-items: flex-end;
  width: clamp(240px, 21vw, 290px); aspect-ratio: 5 / 4;
  border-radius: var(--raio-g); overflow: hidden; isolation: isolate;
  background: var(--azul); color: #fff; box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-serie:hover { transform: translateY(-5px); box-shadow: var(--sombra-forte); }
.card-serie.ativo { box-shadow: 0 0 0 3px var(--verde), var(--sombra-forte); }
.card-serie-img { position: absolute; inset: 0; z-index: -2; }
/* scale corta as faixas pretas do hqdefault (4:3) num card quase quadrado */
.card-serie-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card-serie:hover .card-serie-img img { transform: scale(1.4); }
.card-serie::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(2,26,45,.96) 0%, rgba(2,26,45,.78) 38%, rgba(2,26,45,.12) 72%, rgba(2,26,45,.25) 100%);
}
.card-serie-corpo { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; width: 100%; }
.icone-play {
  position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; font-size: 1.2rem; background: rgba(2,26,45,.25);
  transition: background var(--transicao), border-color var(--transicao);
}
.icone-play i { margin-left: 3px; }
.card-serie:hover .icone-play { background: var(--verde-forte); border-color: var(--verde-forte); }
.card-serie-titulo { font-size: 1.12rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.card-serie-desc { font-size: .82rem; color: rgba(255,255,255,.78); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-serie-qtd { margin-top: 4px; font-size: .8rem; color: rgba(255,255,255,.92); font-weight: 500; }
.card-serie .selo { position: absolute; right: 14px; top: 18px; font-size: .7rem; padding: 4px 10px; }

/* ─── CARD DE VÍDEO / EPISÓDIO ───────────────────────── */
.card-video { display: flex; flex-direction: column; gap: 10px; width: clamp(220px, 18vw, 260px); }
.grade-videos .card-video { width: auto; }
.card-video .thumb { border-radius: var(--raio); box-shadow: var(--sombra); }
.card-video-titulo { font-size: .9rem; font-weight: 500; line-height: 1.38; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-video-meta { margin-top: -4px; font-size: .76rem; color: var(--texto-suave); }
.card-video:hover .card-video-titulo { color: var(--verde-forte); }
.card-video.assistindo .thumb { box-shadow: 0 0 0 3px var(--verde), var(--sombra); }
.card-video-esqueleto { width: clamp(220px, 18vw, 260px); display: flex; flex-direction: column; gap: 10px; }
.card-video-esqueleto div { aspect-ratio: 16/9; border-radius: var(--raio); }
.card-video-esqueleto span { height: 14px; width: 80%; border-radius: 6px; }
.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 18px; }
.aviso { padding: 14px 18px; border-radius: var(--raio); background: #fff; border: 1px dashed var(--borda); color: var(--texto-suave); font-size: .9rem; }
.aviso i { margin-right: 6px; }

/* ─── SÉRIE SELECIONADA ──────────────────────────────── */
.serie-cabecalho { align-items: center; }
.serie-sufixo { font-weight: 600; color: var(--azul); }
.serie-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.serie-qtd { font-size: .9rem; color: var(--texto-suave); }
#serieTitulo { color: var(--azul); }

/* ─── TEMAS ──────────────────────────────────────────── */
.temas-cabecalho { margin-bottom: 18px; }
.temas-cabecalho .titulo-secao { margin-bottom: 0; }
/* Barra de temas: uma linha só, desliza para o lado (setas no desktop, swipe no celular) */
.temas-barra { margin-bottom: 18px; }
.temas-barra .trilho { gap: 10px; padding: 4px 2px; margin: -4px -2px; scroll-snap-type: x proximity; }
.temas-barra .carrossel-seta { width: 38px; height: 38px; font-size: .9rem; transform: translateY(-50%); }
.temas-barra .carrossel-seta.anterior { left: -16px; }
.temas-barra .carrossel-seta.proxima  { right: -16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 500; line-height: 1.3;
  background: #fff; border: 1px solid var(--borda); color: var(--azul);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.chip i { color: var(--verde-forte); font-size: 1rem; transition: color var(--transicao); }
.chip:hover { border-color: var(--azul); }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.chip.ativo i { color: var(--verde); }

/* Linha de cada tema */
.linha-tema { padding: 26px 0 8px; scroll-margin-top: calc(var(--topo-altura) + 10px); }
.linha-tema + .linha-tema { border-top: 1px solid var(--borda); }
.linha-tema-cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.linha-tema h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--azul); }
.linha-tema h3 i { color: var(--verde-forte); }
.linha-tema p { margin: 2px 0 0; font-size: .86rem; color: var(--texto-suave); }

/* ─── SOBRE ──────────────────────────────────────────── */
.secao-sobre { background: #fff; }
.sobre-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sobre-grade p { color: #2a4a60; max-width: 620px; }
.sobre-assinatura { font-family: 'Caveat', cursive; font-size: 2.2rem; font-weight: 600; color: var(--azul) !important; margin: 18px 0 0; }
.sobre-pilares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sobre-pilares li {
  display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: var(--raio-g);
  background: var(--fundo); border: 1px solid var(--borda);
}
.sobre-pilares i { font-size: 1.6rem; color: var(--verde-forte); margin-bottom: 6px; }
.sobre-pilares strong { color: var(--azul); }
.sobre-pilares span { font-size: .86rem; color: var(--texto-suave); }

/* ─── RODAPÉ ─────────────────────────────────────────── */
.rodape { background: var(--marinho); color: rgba(255,255,255,.82); padding: 48px 0 24px; font-size: .9rem; }
.rodape-grade { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 36px; }
.rodape h2 { margin: 0 0 10px; font-size: 1.05rem; color: #fff; }
.rodape-marca img { width: 150px; height: auto; margin-bottom: 14px; }
.rodape-marca p { margin: 0 0 12px; }
.rodape-urgencia { padding: 22px; border-radius: var(--raio-g); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.rodape-urgencia p { margin: 0 0 14px; }
.rodape-selo { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
.rodape-telefones { display: flex; flex-wrap: wrap; gap: 8px; }
.rodape-telefones a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-weight: 600; font-size: .84rem;
  transition: background var(--transicao);
}
.rodape-telefones a:hover { background: var(--verde-forte); }
.rodape-contato { display: flex; flex-direction: column; gap: 7px; }
.rodape-contato i { margin-right: 6px; color: var(--verde); }
.rodape-contato a:hover { color: #fff; }
.rodape-cticor { color: #ffd27a; font-weight: 700; }
.rodape-cticor i { color: #ffd27a !important; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.rodape-links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.rodape-copy { max-width: 1360px; margin: 36px auto 0; padding: 18px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .78rem; color: rgba(255,255,255,.55); }

/* ─── PLAYER ─────────────────────────────────────────── */
.player { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.player-fundo { position: absolute; inset: 0; background: rgba(2,16,28,.86); backdrop-filter: blur(6px); animation: surgir .25s ease; }
.player-caixa {
  position: relative; width: min(1040px, 100%); max-height: 100%; overflow: auto;
  border-radius: var(--raio-g); background: var(--marinho); color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: subir .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes surgir { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.player-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 20px; }
.player-serie { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.player-titulo { margin: 2px 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.player-fechar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1rem; transition: background var(--transicao);
}
.player-fechar:hover { background: rgba(255,255,255,.22); }
.player-video { aspect-ratio: 16 / 9; background: #000; }
.player-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.player-nav {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .86rem; font-weight: 500;
  transition: background var(--transicao);
}
.player-nav:hover:not(:disabled) { background: var(--verde-forte); }
.player-nav:disabled { opacity: .35; cursor: default; }
.player-posicao { font-size: .82rem; color: rgba(255,255,255,.7); text-align: center; }
body.travado { overflow: hidden; }

/* ─── RESPONSIVO ─────────────────────────────────────── */
@media (max-width: 1180px) {
  .destaque-grade { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .destaque-cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; padding: 18px 22px; }
  .destaque-cta-icone { display: none; }
}

@media (max-width: 980px) {
  :root { --topo-altura: 68px; }
  .topo-logo img { height: 38px; }
  .hero-pilares { display: none; }
  .hero-conteudo { max-width: 520px; }
  .topo-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .topo-painel {
    position: absolute; left: 0; right: 0; top: var(--topo-altura);
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 8px var(--gutter) 22px; background: #fff; box-shadow: 0 18px 30px rgba(0,40,70,.12);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .topo.aberto .topo-painel { transform: none; opacity: 1; visibility: visible; }
  .topo-nav { flex-direction: column; gap: 0; }
  .topo-nav a { padding: 13px 4px; border-bottom: 1px solid var(--borda); font-size: 1rem; }
  .topo-nav a::after { display: none; }
  .topo-nav a.ativo { color: var(--verde-forte); }
  .busca { width: 100%; }
  .busca input { height: 50px; font-size: 1rem; }

  .destaque-grade { grid-template-columns: 1fr; }
  .destaque-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  .item-destaque { grid-template-columns: 1fr; padding: 0; }
  .item-destaque .thumb { border-radius: var(--raio) var(--raio) 0 0; aspect-ratio: 16/9; height: auto; min-height: 0; }
  .item-destaque-texto { padding: 4px 14px 14px; }
  .item-destaque:hover { transform: translateY(-3px); }
  .sobre-grade { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .hero {
    min-height: 0; flex-direction: column; align-items: stretch;
    padding: var(--topo-altura) 0 0; background: #f7f8f6;
  }
  .hero-foto { position: relative; inset: auto; order: -1; height: 56vw; min-height: 220px; max-height: 360px; background-position: 74% 30%; }
  .hero::before { background: linear-gradient(180deg, rgba(247,248,246,0) 0%, rgba(247,248,246,0) 26%, #f7f8f6 calc(min(56vw, 360px) + var(--topo-altura))); }
  .hero-conteudo { padding: 0 var(--gutter) 22px; margin-top: -34px; }
  .hero-marca { font-size: clamp(3.6rem, 19vw, 5rem); }
  .hero-botoes { flex-direction: column; }
  .hero-botoes .btn { width: 100%; }
  .hero-assinatura { margin-top: 18px; font-size: 1.9rem; text-align: center; }
  .hero-assinatura::after { margin-left: auto; margin-right: auto; }

  .card-destaque { min-height: 0; flex-direction: column; justify-content: flex-end; }
  .card-destaque img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16/9; }
  .card-destaque::before { background: linear-gradient(0deg, var(--marinho) 0%, var(--marinho) 40%, rgba(4,33,58,0) 62%); }
  .card-destaque-corpo { max-width: none; margin-top: -48px; padding: 0 20px 22px; }
  .card-destaque .play-grande { left: 50%; top: 28%; width: 64px; height: 64px; font-size: 1.8rem; }
  .destaque-lista { grid-template-columns: 1fr; gap: 10px; }
  .item-destaque { grid-template-columns: 42% 1fr; padding-right: 12px; }
  .item-destaque .thumb { border-radius: var(--raio) 0 0 var(--raio); aspect-ratio: 16/9; }
  .item-destaque-texto { padding: 8px 0; }
  .destaque-cta { flex-direction: column; text-align: center; }

  .card-serie { width: 78vw; max-width: 320px; }
  .card-video, .card-video-esqueleto { width: 68vw; max-width: 280px; }
  .grade-videos { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .serie-acoes { width: 100%; }
  .serie-acoes .btn { flex: 1; }
  .secao-desc { margin-left: 0; }
  /* Celular: esmaecido à direita indica que há mais temas para deslizar */
  .temas-barra .trilho {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .sobre-pilares { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sobre-pilares li { padding: 16px; }
  .rodape-grade { grid-template-columns: 1fr; }

  .player { padding: 0; align-items: flex-end; }
  .player-caixa { border-radius: var(--raio-g) var(--raio-g) 0 0; }
  .player-nav span, .player-nav { font-size: .8rem; padding: 8px 12px; }
}

@media (max-width: 420px) {
  .grade-videos { grid-template-columns: 1fr; }
  .sobre-pilares { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROGRESSO (assistidos) — home
   ========================================================================== */
.selo-visto {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; font-size: .72rem; font-weight: 600; line-height: 1.3;
  background: var(--verde-forte); color: #fff;
}
.card-video.visto .thumb img { opacity: .72; }
.card-serie-progresso { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.card-serie-progresso span { display: block; height: 100%; background: var(--verde); border-radius: 4px; }

/* ==========================================================================
   PÁGINA DE SÉRIE (serie.php)
   ========================================================================== */
.pagina-serie { background: var(--fundo); }
.pagina-serie .topo { position: sticky; }

.serie-topo {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 4vw, 52px);
  background: var(--marinho);
}
.serie-topo-fundo {
  position: absolute; inset: -40px; z-index: -2;
  background: center / cover no-repeat; filter: blur(28px) saturate(1.1); opacity: .45; transform: scale(1.1);
}
.serie-topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4,33,58,.96) 0%, rgba(4,33,58,.85) 55%, rgba(4,33,58,.6) 100%);
}
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: .82rem; color: rgba(255,255,255,.7); }
.migalhas a { color: rgba(255,255,255,.85); }
.migalhas a:hover { color: #fff; text-decoration: underline; }
.migalhas i { font-size: .7rem; opacity: .6; }
.serie-titulo { margin: 12px 0 8px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; max-width: 900px; }
.serie-desc { margin: 0 0 10px; max-width: 720px; color: rgba(255,255,255,.8); }
.serie-topo .meta { margin: 0 0 18px; }
.progresso { display: flex; align-items: center; gap: 14px; max-width: 520px; margin-bottom: 22px; }
.progresso-barra { flex: 1; height: 8px; border-radius: 8px; background: rgba(255,255,255,.18); overflow: hidden; }
.progresso-barra span { display: block; width: 0; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--verde), #9fe0b6); transition: width .5s ease; }
.progresso-texto { font-size: .86rem; color: rgba(255,255,255,.88); white-space: nowrap; }
.serie-topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.serie-nao-encontrada { min-height: 50vh; }

.serie-conteudo { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); }
.serie-grade { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }

/* Player */
.sp { position: sticky; top: calc(var(--topo-altura) + 16px); scroll-margin-top: calc(var(--topo-altura) + 10px); }
.sp-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio-g) var(--raio-g) 0 0; overflow: hidden; background: #000; }
.sp-video iframe, .sp-video #ytAlvo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-esqueleto { position: absolute; inset: 0; }
.sp-capa { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.sp-capa img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity var(--transicao), transform .6s ease; }
.sp-capa:hover img { opacity: 1; transform: scale(1.02); }
.sp-capa .play-grande {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(4,33,58,.45); border: 3px solid #fff; color: #fff; font-size: 2.4rem; backdrop-filter: blur(4px);
  transition: background var(--transicao), transform var(--transicao);
}
.sp-capa .play-grande i { margin-left: 6px; }
.sp-capa:hover .play-grande { background: var(--verde-forte); border-color: var(--verde-forte); transform: translate(-50%, -50%) scale(1.06); }
.sp-proximo {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; max-width: 340px;
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--raio);
  background: rgba(2,20,35,.92); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: .86rem;
  animation: subir .3s ease;
}
.sp-proximo-titulo { font-size: .95rem; }
.sp-proximo-acoes { display: flex; gap: 8px; margin-top: 6px; }
.sp-info {
  padding: 18px 22px 22px; border-radius: 0 0 var(--raio-g) var(--raio-g);
  background: #fff; border: 1px solid var(--borda); border-top: 0; box-shadow: var(--sombra);
}
.sp-rotulo { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-forte); }
.sp-titulo { margin: 4px 0 14px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; line-height: 1.3; color: var(--azul); }
.sp-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.btn-marcar {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--verde-forte); background: #fff; color: var(--verde-forte); font-weight: 600; font-size: .9rem;
  transition: background var(--transicao), color var(--transicao);
}
.btn-marcar i { font-size: 1.1rem; }
.btn-marcar:hover:not(:disabled) { background: var(--verde-suave); }
.btn-marcar.ativo { background: var(--verde-forte); color: #fff; }
.btn-marcar:disabled { opacity: .5; cursor: default; }
.sp-navegacao { display: flex; gap: 8px; }
.sp-nav {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--azul); font-size: .86rem; font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.sp-nav:hover:not(:disabled) { background: var(--azul); color: #fff; }
.sp-nav:disabled { opacity: .4; cursor: default; }
.sp-proximo .sp-nav { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.sp-auto { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .86rem; color: var(--texto-suave); cursor: pointer; }
.sp-auto input { width: 17px; height: 17px; accent-color: var(--verde-forte); }
.sp-desc { margin: 14px 0 8px; font-size: .9rem; color: #2a4a60; white-space: pre-line; }

/* Lista de episódios */
.sl {
  border-radius: var(--raio-g); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra);
  display: flex; flex-direction: column; max-height: calc(100vh - var(--topo-altura) - 32px);
  position: sticky; top: calc(var(--topo-altura) + 16px);
}
.sl-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--borda); }
.sl-cabecalho h2 { margin: 0; font-size: 1.1rem; color: var(--azul); }
.sl-cabecalho span { font-size: .82rem; color: var(--texto-suave); }
.sl-lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.sl-capitulo { padding: 14px 10px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.sl-item { display: flex; align-items: center; gap: 4px; border-radius: var(--raio); transition: background var(--transicao); }
.sl-item:hover { background: var(--fundo); }
.sl-item.atual { background: var(--verde-suave); }
.sl-tocar {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; text-align: left;
  border: 0; background: none; cursor: pointer; border-radius: var(--raio);
}
.sl-thumb { position: relative; flex-shrink: 0; width: 132px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #cfd9e0; }
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sl-thumb .duracao { position: absolute; right: 5px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(2,20,35,.82); color: #fff; font-size: .68rem; font-weight: 600; }
.sl-andamento { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.35); }
.sl-andamento span { display: block; height: 100%; background: var(--verde); }
.sl-item.visto .sl-thumb img { opacity: .65; }
.sl-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-rotulo { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--verde-forte); }
.sl-titulo { font-size: .88rem; font-weight: 500; line-height: 1.32; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-status { font-size: .74rem; color: var(--texto-suave); }
.sl-status:empty { display: none; }
.sl-item.atual .sl-status { color: var(--verde-forte); font-weight: 600; }
.sl-item.visto .sl-status { color: var(--verde-forte); }
.sl-check {
  flex-shrink: 0; width: 40px; height: 40px; margin-right: 6px; border-radius: 50%; border: 0; cursor: pointer;
  background: none; color: #a9b8c4; font-size: 1.3rem; transition: color var(--transicao), background var(--transicao);
}
.sl-check:hover { background: var(--fundo); color: var(--verde-forte); }
.sl-check[aria-pressed="true"] { color: var(--verde-forte); }
.sl-esqueleto { display: flex; gap: 12px; padding: 8px; }
.sl-esqueleto span:first-child { width: 132px; aspect-ratio: 16/9; border-radius: 10px; }
.sl-esqueleto span:last-child { flex: 1; height: 14px; border-radius: 6px; margin-top: 10px; }
.sl-lista .aviso { margin: 12px; }
.sl-nota { margin: 0; padding: 10px 20px 14px; font-size: .74rem; color: var(--texto-suave); border-top: 1px solid var(--borda); }
.sl-nota i { margin-right: 4px; }

@media (max-width: 1100px) {
  .serie-grade { grid-template-columns: minmax(0, 1fr) 340px; }
  .sl-thumb { width: 112px; }
}
@media (max-width: 980px) {
  .serie-grade { grid-template-columns: 1fr; }
  .sp, .sl { position: static; }
  .sl { max-height: none; }
  .sl-lista { overflow: visible; }
}
@media (max-width: 760px) {
  .serie-conteudo .container { padding: 0; }
  .sp-video { border-radius: 0; }
  .sp-info { border-radius: 0; border-left: 0; border-right: 0; padding: 16px; }
  .sp-acoes { flex-direction: column; align-items: stretch; }
  .btn-marcar { justify-content: center; }
  .sp-navegacao .sp-nav { flex: 1; justify-content: center; }
  .sl { border-radius: 0; border-left: 0; border-right: 0; margin-top: 12px; }
  .sl-thumb { width: 120px; }
  .sp-proximo { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 12px; }
  .progresso { flex-direction: column; align-items: stretch; gap: 6px; }
  .progresso-barra { flex: none; }
}