/* Vicionovela — camada do site. Só tokens de tokens.css; carregada depois do player.css.
   Ordem: refinos (ex-enhance.css) → camada final (cabeçalho, home, catálogo, conta). */

/* ── Refinos (ex-enhance.css) ── */
.pwa-smart-banner {
  position: fixed;
  z-index: 900;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  translate: -50% 0;
  width: min(440px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: var(--g-radius-lg);
  border: 1px solid var(--g-glass-edge);
  background: var(--g-glass-fill);
  -webkit-backdrop-filter: blur(var(--g-glass-blur)) saturate(var(--g-glass-sat));
  backdrop-filter: blur(var(--g-glass-blur)) saturate(var(--g-glass-sat));
  box-shadow: var(--g-glass-shadow), inset 0 1px 0 var(--g-glass-sheen);
  animation: pwa-rise .5s var(--g-ease-enter) both;
}
.pwa-smart-banner[hidden] { display: none !important; }
.pwa-smart-banner__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--g-radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}
.pwa-smart-banner__icon img { width: 100%; height: 100%; display: block; }
.pwa-smart-banner__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pwa-smart-banner__body strong { font-size: var(--g-text-sm); font-weight: 700; color: var(--g-text); }
.pwa-smart-banner__body span {
  font-size: var(--g-text-xs);
  color: var(--g-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-smart-banner__cta {
  flex: 0 0 auto;
  border-radius: var(--g-radius-full) !important;
  padding-inline: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--g-brand) 45%, transparent);
}
.pwa-smart-banner__close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 16px;
  line-height: 1;
  color: var(--g-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--g-radius-full);
  transition: color var(--g-dur-fast), background var(--g-dur-fast);
}
.pwa-smart-banner__close:hover { color: var(--g-text); background: rgb(255 255 255 / .08); }
@keyframes pwa-rise {
  from { opacity: 0; translate: -50% 20px; }
  to { opacity: 1; translate: -50% 0; }
}
@media (min-width: 768px) {
  .pwa-smart-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    translate: none;
  }
  @keyframes pwa-rise {
    from { opacity: 0; translate: 0 20px; }
    to { opacity: 1; translate: 0 0; }
  }
}
#instalar-dialog {
  background: var(--g-surface);
  color: var(--g-text);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-xl);
  padding: var(--g-space-6);
  max-width: 360px;
  width: calc(100% - 32px);
}
#instalar-dialog::backdrop { background: rgb(0 0 0 / .6); }
#instalar-dialog h2 { font-size: var(--g-text-lg); font-weight: 700; margin: 0 0 var(--g-space-3); }
#instalar-dialog p { color: var(--g-text-muted); line-height: 1.6; margin: 0 0 var(--g-space-5); }
#instalar-dialog .g-btn { width: 100%; }
.pwa-cta {
  display: flex;
  align-items: center;
  gap: var(--g-space-5);
  padding: var(--g-space-6);
  margin-inline: var(--gutter);
  margin-block: var(--g-space-8);
  border-radius: var(--g-radius-xl);
  border: 1px solid color-mix(in srgb, var(--g-brand) 28%, transparent);
  background:
    radial-gradient(300px circle at 8% 50%, color-mix(in srgb, var(--g-brand) 16%, transparent), transparent 70%),
    var(--g-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
}
.pwa-cta[hidden] { display: none !important; }
.pwa-cta .g-btn--primary {
  flex: 0 0 auto;
  border-radius: var(--g-radius-full);
  padding-inline: 20px;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--g-brand) 45%, transparent);
}
@media (max-width: 599px) {
  .pwa-cta { flex-direction: column; text-align: center; gap: var(--g-space-4); }
}
.g-stage-title {
  background: linear-gradient(
    92deg,
    var(--g-text) 0%, var(--g-text) 42%,
    var(--g-brand-300) 50%,
    var(--g-text) 58%, var(--g-text) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 5s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0%, 100% { background-position: 220% center; }
  50% { background-position: -20% center; }
}
.ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 75% 30%, color-mix(in srgb, var(--g-brand-700) 10%, transparent), transparent 60%);
  animation: ambient-breathe 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ambient-breathe {
  from { opacity: .2; }
  to { opacity: .7; }
}
@property --cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.pwa-cta { position: relative; isolation: isolate; overflow: hidden; }
.pwa-cta::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--cta-angle), var(--g-brand), transparent 20%, transparent 80%, var(--g-brand));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cta-rotate 4s linear infinite;
  pointer-events: none;
}
@keyframes cta-rotate {
  to { --cta-angle: 360deg; }
}
.episode-button.is-current { box-shadow: 0 0 14px color-mix(in srgb, var(--g-brand) 50%, transparent),
              inset 0 1px 0 var(--g-glass-sheen); }
[data-image-state="loaded"] > img { animation: img-reveal .4s var(--g-ease-enter) both; }
@keyframes img-reveal {
  from { opacity: 0; scale: 1.04; }
  to { opacity: 1; scale: 1; }
}
.is-scrolled .g-shell-header {
  background: color-mix(in srgb, var(--g-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--g-text) 8%, transparent);
}
.g-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--g-brand), var(--g-brand-300));
  pointer-events: none;
  will-change: transform;
}
.section-heading h2 { position: relative; padding-bottom: 8px; }
.section-heading h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--g-brand);
  opacity: .7;
}
@media (hover: hover) {
  .g-card:hover .poster-art > img { filter: brightness(1.08); transition: filter .3s; }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--g-brand) 36%, transparent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-brand); }
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--g-brand) 36%, transparent) transparent; }
::selection { background: color-mix(in srgb, var(--g-brand) 32%, transparent); }
[data-image-state="loading"] { background: linear-gradient(
    90deg,
    var(--g-surface) 25%,
    var(--g-surface-raised) 37%,
    var(--g-surface) 63%
  ); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; }
@keyframes skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (hover: hover) {
  .g-catalog-grid .g-card__link { transition: transform var(--g-dur-normal) var(--g-ease-enter),
                box-shadow var(--g-dur-normal) var(--g-ease-enter); }
  .g-catalog-grid .g-card:hover .g-card__link { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 36px rgb(0 0 0 / .45),
                0 0 0 1px color-mix(in srgb, var(--g-brand) 12%, transparent); }
}
.g-card__badges .g-chip { position: relative; overflow: hidden; }
.g-card__badges .g-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .14), transparent);
  animation: badge-shine 3.5s ease-in-out infinite;
}
@keyframes badge-shine {
  0%, 65% { left: -100%; }
  100% { left: 200%; }
}
.g-introduction-art { animation: art-zoom .9s var(--g-ease-enter) both; }
@keyframes art-zoom {
  from { opacity: 0; scale: 1.06; }
  to { opacity: 1; scale: 1; }
}
:where(.g-btn) { position: relative; overflow: hidden; }
.ripple-ink {
  position: absolute;
  border-radius: 50%;
  background: rgb(255 255 255 / .15);
  transform: scale(0);
  animation: ripple-expand .55s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(2.5); opacity: 0; }
}
:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 2px; }
.g-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-brand) 30%, transparent); }
.nav-indicator { box-shadow: inset 0 1px 0 color-mix(in srgb, white 34%, transparent),
              0 0 20px color-mix(in srgb, var(--g-brand) 16%, transparent); }
.nav-item.is-active { text-shadow: 0 0 12px color-mix(in srgb, var(--g-brand) 30%, transparent); }
@media (hover: hover) {
  .metadata span { transition: color var(--g-dur-fast); }
  .metadata span:hover { color: var(--g-brand-text); }
}
html { scroll-behavior: smooth; }
.g-stage-peek { animation: peek-float 5s ease-in-out infinite alternate; }
@keyframes peek-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
@media (hover: hover) {
  .g-btn--primary { transition: transform var(--g-dur-fast) var(--g-ease-enter),
                box-shadow var(--g-dur-fast); }
  .g-btn--primary:hover { transform: scale(1.03); }
}
@media (hover: hover) {
  .section-heading a { transition: color var(--g-dur-fast), gap var(--g-dur-normal) var(--g-ease-enter); }
  .section-heading a .g-icon { transition: transform var(--g-dur-normal) var(--g-ease-enter); }
  .section-heading a:hover { color: var(--g-brand-text); }
  .section-heading a:hover .g-icon { transform: translateX(3px); }
}
.g-card__rank { border-color: color-mix(in srgb, var(--g-brand) 24%, transparent); box-shadow: 0 4px 14px color-mix(in srgb, var(--g-brand) 14%, transparent); }
.shell-footer { position: relative; }
.shell-footer::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-brand), transparent);
  opacity: .3;
  pointer-events: none;
}
.g-introduction-art { will-change: translate; }
@media (hover: hover) {
  .g-catalog-grid .g-card:hover .g-card__link { box-shadow: 0 14px 36px rgb(0 0 0 / .45),
                0 0 0 1px color-mix(in srgb, var(--g-brand) 18%, transparent),
                0 0 28px color-mix(in srgb, var(--g-brand) 8%, transparent); }
}
.nav-item.is-active .g-icon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g-brand) 40%, transparent)); }
@media (hover: hover) {
  .favorite-button:hover .g-icon { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--g-brand) 50%, transparent)); }
}
.catalog-section + .catalog-section::before {
  content: '';
  display: block;
  height: 1px;
  margin: var(--g-space-4) var(--gutter) var(--g-space-8);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--g-text) 10%, transparent) 30%,
    color-mix(in srgb, var(--g-text) 10%, transparent) 70%,
    transparent
  );
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .g-stage-title { animation: none; background: none; -webkit-text-fill-color: var(--g-text); }
  .pwa-smart-banner,
  .pwa-cta::before,
  .ambient::before,
  [data-image-state="loaded"] > img,
  [data-image-state="loading"],
  .g-card__badges .g-chip::after,
  .g-introduction-art,
  .g-stage-peek,
  .ripple-ink {
    animation: none;
  }
  .g-scroll-progress { display: none; }
}

/* ───────────── Camada final ───────────── */

:root { --site-max: 1280px; --site-gutter: clamp(16px, 4vw, 48px); }

html { scrollbar-color: color-mix(in srgb, white 18%, transparent) transparent; }
::selection { background: color-mix(in srgb, var(--g-brand) 55%, transparent); color: var(--g-on-brand); }
body { background: var(--g-bg); }
.ambient { display: none; }

/* Cabeçalho */
.g-shell-header { padding-inline: var(--site-gutter); background: color-mix(in srgb, var(--g-bg) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, white 6%, transparent); }
.g-header-session { margin-left: auto !important; }
.g-shell-header .g-header-enter { box-shadow: none; }

/* Breadcrumb compartilhado */
.novela__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-space-2);
  margin: 0 0 var(--g-space-6);
  padding: 0;
  list-style: none;
  font-size: var(--g-text-xs);
  color: var(--g-text-muted);
}
.novela__crumbs li { display: flex; align-items: center; gap: var(--g-space-2); min-width: 0; }
.novela__crumbs li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.novela__crumbs a { color: inherit; text-decoration: none; transition: color var(--g-dur-fast); }
.novela__crumbs a:hover { color: var(--g-text); }
.novela__crumbs [aria-current] { color: var(--g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* Selo compartilhado */
.novela__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--g-radius-full);
  background: color-mix(in srgb, var(--g-brand) 20%, transparent);
  color: var(--g-brand-100);
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-bold);
  letter-spacing: .02em;
}

/* Botões com ícone dentro do rótulo */
.hero-home__actions .g-btn__label { display: inline-flex; align-items: center; gap: 10px; }
.hero-home__actions .g-icon { width: 20px; height: 20px; }
.hero-home__actions .g-btn--primary .g-icon { fill: currentColor; }
.hero-home__actions .g-btn--lg { border-radius: var(--g-radius-full); padding-inline: var(--g-space-6); }
.favorite-button[aria-pressed="true"] .g-btn__label .g-icon { fill: currentColor; color: var(--g-brand-text); }

/* ───────────── Home ───────────── */
.app:has(.home) { padding-top: 0; }
.home { display: grid; gap: clamp(36px, 5vw, 56px); padding-bottom: var(--g-space-16); }
.home-h2 {
  margin: 0;
  font-family: var(--g-font-display);
  font-weight: var(--g-weight-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + var(--g-space-6)) var(--site-gutter) var(--g-space-10);
}
.hero-home__backdrop { position: absolute; inset: 0; z-index: -1; }
.hero-home__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.35) brightness(.4); transform: scale(1.2); }
.hero-home__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--g-bg)), linear-gradient(to right, color-mix(in srgb, var(--g-bg) 70%, transparent), transparent 70%); }
.hero-home__inner {
  max-width: var(--site-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--g-space-6);
  justify-items: center;
}
.hero-home__poster { display: block; width: min(56vw, 260px); border-radius: var(--g-radius-lg); overflow: hidden; box-shadow: 0 30px 70px -20px #000000cc, 0 0 0 1px var(--g-glass-edge-dim); }
.hero-home__poster img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.hero-home__copy { display: grid; gap: var(--g-space-4); width: 100%; max-width: 640px; }
.hero-home__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-3); margin: 0; font-size: var(--g-text-sm); color: var(--g-text-muted); }
.hero-home__meta a { color: var(--g-text); text-decoration: none; }
.hero-home__meta a:hover { color: var(--g-brand-text); }
.hero-home__title {
  margin: 0;
  font-family: var(--g-font-display);
  font-weight: var(--g-weight-display);
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-home__synopsis { margin: 0; max-width: 58ch; color: color-mix(in srgb, var(--g-text) 82%, transparent); line-height: var(--g-leading-reading); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-home__actions { display: flex; flex-wrap: wrap; gap: var(--g-space-3); margin-top: var(--g-space-2); }
.hero-home__more { display: flex; gap: var(--g-space-2); margin-top: var(--g-space-4); }
.hero-home__more a { display: block; width: 52px; border-radius: var(--g-radius-sm); overflow: hidden; opacity: .7; outline-offset: 2px; transition: opacity var(--g-dur-fast), translate var(--g-dur-fast) var(--g-ease-enter); box-shadow: 0 6px 16px #00000080; }
.hero-home__more a:hover, .hero-home__more a:focus-visible { opacity: 1; translate: 0 -3px; }
.hero-home__more img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

@media (min-width: 860px) {
  .hero-home { padding-bottom: var(--g-space-16); }
  .hero-home__inner { grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px); align-items: center; justify-items: stretch; column-gap: clamp(40px, 6vw, 96px); }
  .hero-home__poster { grid-column: 2; grid-row: 1; width: 100%; transform: rotate(2deg); transition: transform var(--g-dur-slow) var(--g-ease-enter); }
  .hero-home__poster:hover { transform: rotate(0) scale(1.01); }
  .hero-home__copy { grid-column: 1; grid-row: 1; }
}

/* Trilhos */
.rail { display: grid; gap: var(--g-space-4); min-width: 0; }
.rail[hidden] { display: none; }
.rail__head { display: flex; align-items: end; justify-content: space-between; gap: var(--g-space-4); max-width: calc(var(--site-max) + 2 * var(--site-gutter)); width: 100%; margin-inline: auto; padding-inline: var(--site-gutter); box-sizing: border-box; }
.rail__link { display: inline-flex; align-items: center; gap: 2px; color: var(--g-brand-text); font-size: var(--g-text-sm); font-weight: var(--g-weight-semibold); text-decoration: none; white-space: nowrap; }
.rail__link .g-icon { width: 16px; height: 16px; transition: translate var(--g-dur-fast) var(--g-ease-enter); }
.rail__link:hover .g-icon { translate: 3px 0; }
.rail__track {
  --rail-item: clamp(132px, 38vw, 196px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-item);
  gap: var(--g-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--site-gutter), calc((100% - var(--site-max)) / 2));
  padding: 4px max(var(--site-gutter), calc((100% - var(--site-max)) / 2)) var(--g-space-2);
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { position: relative; scroll-snap-align: start; min-width: 0; }
.rail__item .g-card { display: flex; flex-direction: column; border: 0; background: transparent; box-shadow: none; }
.rail__item .g-card__media { border-radius: var(--g-radius-md); }
.rail__item .g-card__title { font-size: var(--g-text-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail__item .g-card__genre, .rail__item .g-card__actions { display: none; }
@media (min-width: 1024px) { .rail__track { gap: var(--g-space-4); } }

.rail--rank .rail__track { --rail-item: clamp(150px, 44vw, 230px); }
.rail--rank .rail__item { padding-left: 34px; }
.rail__rank {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 44px;
  font-family: var(--g-font-display);
  font-weight: var(--g-weight-black);
  font-size: clamp(3.4rem, 9vw, 5rem);
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--g-bg);
  -webkit-text-stroke: 2px color-mix(in srgb, var(--g-brand-text) 85%, transparent);
  paint-order: stroke fill;
  pointer-events: none;
}

/* Gêneros */
.home-genres, .home-about, .wrap { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); width: 100%; margin-inline: auto; padding-inline: var(--site-gutter); box-sizing: border-box; }
.home-genres ul { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: var(--g-space-4) 0 0; padding: 0; list-style: none; }
.home-genres a {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  min-height: 40px;
  padding: 0 var(--g-space-4);
  border: 1px solid var(--g-glass-edge-dim);
  border-radius: var(--g-radius-full);
  color: var(--g-text);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  text-decoration: none;
  transition: border-color var(--g-dur-fast), background-color var(--g-dur-fast);
}
.home-genres a span { color: var(--g-text-muted); font-size: var(--g-text-xs); font-variant-numeric: tabular-nums; }
.home-genres a:hover { border-color: color-mix(in srgb, var(--g-brand) 60%, transparent); background: color-mix(in srgb, var(--g-brand) 12%, transparent); }

/* Sobre + FAQ */
.home-about { display: grid; gap: var(--g-space-8); padding-top: var(--g-space-10); border-top: 1px solid color-mix(in srgb, white 7%, transparent); }
.home-about__copy p { margin: var(--g-space-3) 0 0; max-width: 56ch; color: var(--g-text-muted); line-height: var(--g-leading-reading); }
.home-faq { display: grid; }
.home-faq details { border-bottom: 1px solid color-mix(in srgb, white 8%, transparent); }
.home-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); min-height: 56px; cursor: pointer; list-style: none; font-weight: var(--g-weight-semibold); }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary .g-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--g-text-muted); transition: rotate var(--g-dur-normal) var(--g-ease-enter); }
.home-faq details[open] summary .g-icon { rotate: 45deg; color: var(--g-brand-text); }
.home-faq details p { margin: 0 0 var(--g-space-4); color: var(--g-text-muted); line-height: var(--g-leading-reading); max-width: 60ch; }
@media (min-width: 860px) { .home-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 96px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-home__poster, .hero-home__more a, .rail__link .g-icon, .home-faq summary .g-icon { transition: none; }
  .hero-home__poster { transform: none; }
}

/* ───────────── Catálogo (busca e gênero) ───────────── */
.catalog-page {
  max-width: calc(var(--site-max) + 2 * var(--site-gutter));
  margin-inline: auto;
  padding: var(--g-space-6) var(--site-gutter) var(--g-space-16);
  box-sizing: border-box;
}
.catalog-page__head { display: grid; gap: var(--g-space-4); margin-bottom: var(--g-space-6); }
.catalog-page__head .novela__crumbs ol { margin-bottom: 0; }
.catalog-page__title {
  margin: 0;
  font-family: var(--g-font-display);
  font-weight: var(--g-weight-display);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.catalog-page__lead { margin: 0; max-width: 62ch; color: var(--g-text-muted); line-height: var(--g-leading-reading); }
.catalog-page__count { margin: 0 0 var(--g-space-4); color: var(--g-text-muted); font-size: var(--g-text-sm); }
.catalog-page__count:empty { display: none; }
.catalog-page__sub { margin: 0 0 var(--g-space-5); }

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
  max-width: 680px;
  padding: 6px 6px 6px 48px;
  border: 1px solid var(--g-glass-edge-dim);
  border-radius: var(--g-radius-full);
  background: color-mix(in srgb, white 4%, transparent);
  transition: border-color var(--g-dur-fast), background-color var(--g-dur-fast), box-shadow var(--g-dur-fast);
}
.search-box:focus-within { border-color: color-mix(in srgb, var(--g-brand) 70%, transparent); background: color-mix(in srgb, white 6%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-brand) 18%, transparent); }
.search-box > .g-icon { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--g-text-muted); }
.search-box input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--g-text); font: inherit; font-size: var(--g-text-md); outline: none; }
.search-box input::placeholder { color: color-mix(in srgb, var(--g-text) 50%, transparent); }
.search-box input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.search-box .g-btn { border-radius: var(--g-radius-full); flex: 0 0 auto; }

.filters { display: grid; gap: var(--g-space-3); margin-bottom: var(--g-space-8); }
.chip-scroller {
  display: flex;
  gap: var(--g-space-2);
  overflow-x: auto;
  margin-inline: calc(-1 * var(--site-gutter));
  padding: 2px var(--site-gutter) var(--g-space-2);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--site-gutter), #000 calc(100% - var(--site-gutter)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--site-gutter), #000 calc(100% - var(--site-gutter)), transparent);
}
.chip-scroller::-webkit-scrollbar { display: none; }
.catalog-page > .chip-scroller { margin-bottom: var(--g-space-8); }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--g-space-4);
  border: 1px solid var(--g-glass-edge-dim);
  border-radius: var(--g-radius-full);
  color: color-mix(in srgb, var(--g-text) 82%, transparent);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--g-dur-fast), background-color var(--g-dur-fast), color var(--g-dur-fast);
}
.chip:hover { color: var(--g-text); border-color: color-mix(in srgb, white 28%, transparent); }
.chip.is-active { background: var(--g-text); border-color: var(--g-text); color: var(--g-bg); font-weight: var(--g-weight-semibold); }

.segmented { display: inline-flex; justify-self: start; padding: 4px; gap: 2px; border-radius: var(--g-radius-full); background: color-mix(in srgb, white 5%, transparent); border: 1px solid var(--g-glass-edge-dim); }
.segmented__item { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--g-space-4); border-radius: var(--g-radius-full); color: var(--g-text-muted); font-size: var(--g-text-sm); font-weight: var(--g-weight-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--g-dur-fast), color var(--g-dur-fast); }
.segmented__item:hover { color: var(--g-text); }
.segmented__item.is-active { background: var(--g-brand); color: var(--g-on-brand); font-weight: var(--g-weight-semibold); }

.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-6) var(--g-space-3); }
.catalog-grid .g-card { display: flex; flex-direction: column; border: 0; background: transparent; box-shadow: none; }
.catalog-grid .g-card__media { border-radius: var(--g-radius-md); }
.catalog-grid .g-card__title { font-size: var(--g-text-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 560px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-space-8) var(--g-space-5); } }
@media (min-width: 1100px) { .catalog-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.empty { display: grid; justify-items: center; gap: var(--g-space-3); padding: var(--g-space-16) var(--g-space-4); text-align: center; }
.empty > .g-icon { width: 40px; height: 40px; color: var(--g-brand-text); }
.empty h2 { margin: 0; font-size: var(--g-text-xl); }
.empty p { margin: 0 0 var(--g-space-2); max-width: 44ch; color: var(--g-text-muted); }

.pagination { display: flex; justify-content: center; margin-top: var(--g-space-12); }
.g-pagination__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--g-space-2); }
.g-pagination__control { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--g-space-3); border-radius: var(--g-radius-full); border: 1px solid var(--g-glass-edge-dim); color: var(--g-text); font-weight: var(--g-weight-semibold); font-variant-numeric: tabular-nums; text-decoration: none; transition: border-color var(--g-dur-fast), background-color var(--g-dur-fast); }
a.g-pagination__control:hover { border-color: color-mix(in srgb, white 30%, transparent); background: color-mix(in srgb, white 5%, transparent); }
.g-pagination__control[aria-current] { background: var(--g-brand); border-color: var(--g-brand); color: var(--g-on-brand); }
.g-pagination__control .g-icon { width: 18px; height: 18px; }
.g-pagination__ellipsis { color: var(--g-text-muted); padding-inline: 4px; }

/* ───────────── Feed, lista, perfil, login, páginas de texto ───────────── */
.stack { display: grid; gap: clamp(36px, 5vw, 56px); padding: var(--g-space-6) 0 var(--g-space-16); }
.catalog-page__lead a, .auth__alt a, .prose a { color: var(--g-brand-text); font-weight: var(--g-weight-semibold); text-decoration: none; }
.catalog-page__lead a:hover, .auth__alt a:hover, .prose a:hover { text-decoration: underline; text-underline-offset: 3px; }

.panel { display: grid; gap: var(--g-space-5); padding: clamp(20px, 3vw, 28px); border: 1px solid var(--g-glass-edge-dim); border-radius: var(--g-radius-lg); background: color-mix(in srgb, white 3%, transparent); }

.form { display: grid; gap: var(--g-space-4); }
.form .g-btn { justify-self: start; border-radius: var(--g-radius-full); padding-inline: var(--g-space-6); }
.field { display: grid; gap: var(--g-space-2); }
.field > span { font-size: var(--g-text-sm); font-weight: var(--g-weight-semibold); color: color-mix(in srgb, var(--g-text) 82%, transparent); }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--g-space-4);
  border: 1px solid var(--g-glass-edge-dim);
  border-radius: var(--g-radius-md);
  background: color-mix(in srgb, white 4%, transparent);
  color: var(--g-text);
  font: inherit;
  font-size: var(--g-text-md);
  box-sizing: border-box;
  transition: border-color var(--g-dur-fast), box-shadow var(--g-dur-fast), background-color var(--g-dur-fast);
}
.field input::placeholder { color: color-mix(in srgb, var(--g-text) 45%, transparent); }
.field input:focus { outline: none; border-color: color-mix(in srgb, var(--g-brand) 70%, transparent); background: color-mix(in srgb, white 6%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-brand) 18%, transparent); }
.notice { margin: 0; padding: var(--g-space-3) var(--g-space-4); border-radius: var(--g-radius-md); background: var(--g-danger-soft); color: var(--g-text); font-size: var(--g-text-sm); }

.profile-id { display: flex; align-items: center; gap: var(--g-space-4); min-width: 0; }
.profile-id > div { display: grid; gap: var(--g-space-1); min-width: 0; }
.profile-id .catalog-page__title { overflow-wrap: anywhere; }
.profile-id .catalog-page__lead { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar { flex: 0 0 auto; display: grid; place-items: center; width: clamp(56px, 10vw, 72px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--g-brand), var(--g-brand-700)); color: var(--g-on-brand); font-family: var(--g-font-display); font-weight: var(--g-weight-display); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.profile { display: grid; gap: var(--g-space-5); max-width: 720px; }
.profile__links { display: grid; gap: var(--g-space-3); }
.profile__link { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-4); padding-block: var(--g-space-4); color: var(--g-text); text-decoration: none; transition: border-color var(--g-dur-fast), background-color var(--g-dur-fast); }
.profile__link:hover { border-color: color-mix(in srgb, var(--g-brand) 50%, transparent); background: color-mix(in srgb, var(--g-brand) 8%, transparent); }
.profile__link > .g-icon { width: 22px; height: 22px; color: var(--g-brand-text); }
.profile__link > .g-icon:last-child { width: 18px; height: 18px; color: var(--g-text-muted); }
.profile__link span { display: grid; gap: 2px; color: var(--g-text-muted); font-size: var(--g-text-sm); }
.profile__link strong { color: var(--g-text); font-size: var(--g-text-md); font-weight: var(--g-weight-semibold); }
.profile__logout .g-btn { border-radius: var(--g-radius-full); }
.profile__logout .g-btn__label { display: inline-flex; align-items: center; gap: var(--g-space-2); }
.profile__logout .g-icon { width: 18px; height: 18px; }
@media (min-width: 640px) { .profile__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.auth { display: grid; place-items: center; min-height: min(78vh, 760px); padding: var(--g-space-8) var(--site-gutter) var(--g-space-16); box-sizing: border-box; }
.auth__card { width: 100%; max-width: 440px; box-sizing: border-box; gap: var(--g-space-3); }
.auth__card .catalog-page__title { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.auth__card .catalog-page__lead { margin-bottom: var(--g-space-3); }
.auth__card .form .g-btn { justify-self: stretch; margin-top: var(--g-space-2); }
.auth__alt { margin: var(--g-space-2) 0 0; text-align: center; color: var(--g-text-muted); font-size: var(--g-text-sm); }

.prose { max-width: 68ch; color: color-mix(in srgb, var(--g-text) 80%, transparent); line-height: var(--g-leading-reading); }
.prose p { margin: 0 0 var(--g-space-5); }
.prose strong { display: block; margin-bottom: var(--g-space-1); color: var(--g-text); font-weight: var(--g-weight-semibold); }
.prose strong + br { display: none; }