/* PLANETA FLIX — Design system a partir do Manual de Marca (2024) */
:root{
  --turquesa:#1e858d;
  --turquesa-dark:#146066;
  --verde-escuro:#1b4c4a;
  --dourado:#b9b091;
  --bg-app:#f4f7f6;
  --texto:#1c2b2a;
  --muted:#5f6f6e;
  --card:#ffffff;
  --radius:14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-app);
  color:var(--texto);
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.brand-font{
  font-family:"Poetsen One", -apple-system, sans-serif;
}

/* Header */
.site-header{
  background:linear-gradient(120deg,var(--turquesa),var(--verde-escuro));
  color:#fff;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.brand-row{display:flex;align-items:center;gap:10px;}
.brand-row .logo-tv{width:38px;height:30px;flex-shrink:0;}
.brand-row .brand{font-size:20px;font-weight:800;letter-spacing:.01em;}
.brand-row .brand span{color:var(--dourado);}
.site-header nav a{
  color:#fff; opacity:.9; font-size:13.5px; font-weight:600; margin-left:18px;
}
.site-header nav a:hover{opacity:1;text-decoration:underline;}

/* Em telas estreitas o nome da marca quebrava em duas linhas ao ganhar mais
   um item de menu — aperta tipografia e espaçamento em vez de esconder links. */
@media (max-width:430px){
  .site-header{padding:14px 16px;}
  .brand-row .brand{font-size:17px; white-space:nowrap;}
  .brand-row .logo-tv{width:32px; height:26px;}
  .site-header nav a{margin-left:12px; font-size:12.5px;}
}

.demo-banner{
  background:#fff3cd; color:#7a5b00; font-size:12.5px; text-align:center;
  padding:8px 12px; border-bottom:1px solid #f0dca3; display:none;
}
.demo-banner.show{display:block;}

/* Layout containers */
.container{max-width:1080px; margin:0 auto; padding:0 20px;}
.hero{padding:36px 20px 18px; text-align:center;}
.hero h1{margin:0 0 6px; color:var(--verde-escuro); font-size:26px;}
.hero p{margin:0; color:var(--muted); font-size:14px; max-width:520px; margin:0 auto;}

/* Search */
.search-wrap{max-width:560px; margin:22px auto 0; padding:0 20px;}
.search-box{
  display:flex; align-items:center; gap:10px; background:#fff;
  border-radius:30px; padding:12px 18px; box-shadow:0 6px 20px rgba(20,50,50,.12);
}
.search-box input{
  border:none; outline:none; font-size:15px; width:100%; color:var(--texto); background:transparent;
}
.search-box button{
  background:var(--turquesa); color:#fff; border:none; border-radius:20px;
  padding:8px 18px; font-weight:700; font-size:13.5px; cursor:pointer; flex-shrink:0;
}
.search-box button:hover{background:var(--turquesa-dark);}

.search-alt{text-align:center; font-size:12.5px; color:var(--muted); margin:12px 0 0;}
.search-alt a{color:var(--turquesa); font-weight:700;}

/* Section titles */
.section-title{
  font-size:14px; font-weight:800; color:var(--verde-escuro); text-transform:uppercase;
  letter-spacing:.05em; margin:34px 0 14px;
}

/* Grid de títulos */
.grid-titles{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;
}
.title-card{
  border-radius:var(--radius); overflow:hidden; cursor:pointer; background:#111;
  aspect-ratio:2/3; position:relative; box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:transform .15s ease;
}
.title-card:hover{transform:translateY(-4px);}
.title-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.title-card .fallback-bg{position:absolute;inset:0;}
.title-card .overlay{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82), transparent 55%);
  display:flex; align-items:flex-end; padding:10px;
}
.title-card .overlay span{color:#fff; font-weight:700; font-size:13px;}
.title-card .badge-year{
  position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); color:#fff;
  font-size:10px; padding:2px 7px; border-radius:10px; font-weight:700;
}

/* Lista de resultados (busca) */
.result-list{display:flex; flex-direction:column; gap:0;}
.result-row{
  display:flex; gap:14px; align-items:center; padding:12px 4px; border-bottom:1px solid #e5e9e8; cursor:pointer;
}
.result-row:hover{background:#eef4f3;}
.result-row .thumb{width:48px;height:68px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;background-color:#ddd;}
.result-row .thumb.round{border-radius:50%;}
.result-row .meta .t{font-weight:700;font-size:14.5px;}
.result-row .meta .s{font-size:12px;color:var(--muted);}
.result-row .arrow{margin-left:auto;color:var(--turquesa);font-size:18px;}

.empty-state{padding:40px 10px; text-align:center; color:var(--muted); font-size:13.5px;}

/* Ficha do título */
.detail-hero{
  height:280px; background-size:cover; background-position:center top; position:relative;
}
.detail-hero .scrim{position:absolute;inset:0;background:linear-gradient(to top, var(--bg-app), rgba(0,0,0,.25) 60%, rgba(0,0,0,.35));}
.back-link{
  position:absolute; top:16px; left:16px; background:rgba(0,0,0,.5); color:#fff;
  border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:700; z-index:2;
}
.detail-content{max-width:820px;margin:-70px auto 0;padding:0 20px 60px;position:relative;z-index:1;}
.detail-title{font-size:28px;font-weight:800;color:var(--verde-escuro);margin:0 0 4px;}
.detail-sub{color:var(--muted);font-size:13.5px;margin-bottom:18px;}

.ratings-row{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap;}
.rating-chip{
  flex:1; min-width:110px; background:#fff; border-radius:12px; padding:12px 10px; text-align:center;
  box-shadow:0 3px 10px rgba(20,50,50,.08);
}
.rating-chip .src{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;}
.rating-chip .val{font-size:19px;font-weight:800;margin-top:3px;}
.rating-chip.imdb .val{color:#c9a227;}
.rating-chip.lb .val a{color:var(--turquesa); font-size:13px; font-weight:700;}
.rating-chip.pf .val{color:var(--turquesa);}

.trailer-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.15);margin-bottom:4px;background:#000;}
.trailer-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.block-title{font-size:13px;font-weight:800;color:var(--verde-escuro);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 10px;}
.where-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.platform{
  display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e0e6e5;border-radius:22px;
  padding:8px 16px;font-size:12.5px;font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.platform-logo{width:20px;height:20px;border-radius:5px;object-fit:cover;flex-shrink:0;}

.where-attribution{font-size:11px;color:var(--muted);margin:2px 0 18px;}
.where-attribution a{color:var(--turquesa);font-weight:700;margin-left:4px;}

.synopsis{font-size:14.5px;line-height:1.65;color:#33403f;}

.crew-scroll{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 14px;}
.crew-card{flex-shrink:0;width:84px;text-align:center;}
.crew-card .av{
  width:64px;height:64px;border-radius:50%;background:var(--dourado);margin:0 auto 6px;
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--verde-escuro);font-size:18px;
  overflow:hidden;
}
.crew-card .n{font-size:11px;font-weight:700;line-height:1.2;}
.crew-card .r{font-size:10px;color:var(--muted);}

.detail-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.save-btn{
  display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #dfe7e6;border-radius:20px;
  padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--texto);cursor:pointer;flex-shrink:0;
  transition:all .15s ease;
}
.save-btn:hover{border-color:var(--turquesa);}
.save-btn.saved{background:var(--turquesa);border-color:var(--turquesa);color:#fff;}
.save-btn:disabled{opacity:.6;cursor:default;}

.empty-state a{color:var(--turquesa);font-weight:700;}

/* Avaliações da comunidade (nota Planeta Flix) */
.review-form-box{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 3px 10px rgba(20,50,50,.08);margin-bottom:16px;}
.review-form-label{font-size:12px;font-weight:800;color:var(--verde-escuro);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
.star-picker{display:flex;gap:6px;margin-bottom:12px;}
.star-picker .star{font-size:26px;color:#dfe7e6;cursor:pointer;line-height:1;transition:color .1s ease;}
.star-picker .star.filled{color:#e0b33e;}
.review-textarea{
  width:100%;border:1px solid #dfe7e6;border-radius:10px;padding:10px 12px;font-size:13.5px;
  font-family:inherit;resize:vertical;min-height:64px;margin-bottom:12px;box-sizing:border-box;
}
.review-submit-btn{
  background:var(--turquesa);color:#fff;border:none;border-radius:20px;padding:10px 20px;
  font-weight:700;font-size:13.5px;cursor:pointer;
}
.review-submit-btn:hover{background:var(--turquesa-dark);}
.review-submit-btn:disabled{opacity:.5;cursor:default;}
.review-hint{font-size:12px;color:var(--muted);margin-top:10px;}
.review-hint a{color:var(--turquesa);font-weight:700;}

.review-list{display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
.review-card{background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:0 3px 10px rgba(20,50,50,.08);}
.review-card-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.review-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--dourado);display:flex;
  align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.review-name{font-weight:700;font-size:13.5px;}
.review-stars{color:#e0b33e;font-size:13px;letter-spacing:1px;}
.review-comment{font-size:13.5px;line-height:1.55;color:#33403f;margin:0;}

/* Ficha de pessoa */
.person-card{display:flex;gap:20px;align-items:flex-start;margin-bottom:30px;}
.person-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--dourado);flex-shrink:0;}
.person-photo-fallback{
  width:120px;height:120px;border-radius:50%;background:var(--dourado);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--verde-escuro);font-size:34px;
}
.person-name{font-size:24px;font-weight:800;color:var(--verde-escuro);margin:0 0 4px;}
.person-role{font-size:13px;color:var(--muted);margin-bottom:10px;}
.person-bio{font-size:13.5px;line-height:1.6;color:#33403f;}

footer{text-align:center;color:var(--muted);font-size:11.5px;padding:30px 20px 50px;}

@media (max-width:520px){
  .detail-title{font-size:22px;}
  .detail-hero{height:220px;}
}

/* "Me ajuda a escolher" (descobrir.html) */
.filters-card{
  background:#fff; border-radius:var(--radius); padding:20px 20px 16px; margin-top:22px;
  box-shadow:0 4px 16px rgba(20,50,50,.08);
}
.filter-block{margin-bottom:16px;}
.filter-label{
  font-size:11.5px; font-weight:800; color:var(--verde-escuro); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:8px;
}
.filter-hint{font-size:11.5px; color:var(--muted); margin:8px 0 0;}
.filter-row{display:flex; gap:16px; flex-wrap:wrap;}
.filter-row .filter-block{flex:1; min-width:150px;}
.filter-select{
  width:100%; border:1px solid #dfe7e6; border-radius:10px; padding:10px 12px;
  font-size:13.5px; font-family:inherit; color:var(--texto); background:#fff; cursor:pointer;
}
.filter-select:focus{outline:none; border-color:var(--turquesa);}

.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #dfe7e6;
  border-radius:22px; padding:7px 14px; font-size:12.5px; font-weight:700; font-family:inherit;
  color:var(--texto); cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.chip:hover{border-color:var(--turquesa);}
.chip.on{background:var(--turquesa); border-color:var(--turquesa); color:#fff;}
.chip-logo{width:18px; height:18px; border-radius:5px; object-fit:cover; flex-shrink:0;}

.actions-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.btn-primary{
  display:inline-block; background:var(--turquesa); color:#fff; border:none; border-radius:22px;
  padding:11px 24px; font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer;
}
.btn-primary:hover{background:var(--turquesa-dark);}
.btn-ghost{
  display:inline-block; background:#fff; color:var(--verde-escuro); border:1.5px solid var(--turquesa);
  border-radius:22px; padding:11px 24px; font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer;
}
.btn-ghost:hover{background:#eef4f3;}

.resultado-status{font-size:12px; color:var(--muted); margin:-6px 0 12px;}

.roleta-card{
  display:flex; gap:22px; background:#fff; border-radius:var(--radius); padding:20px;
  box-shadow:0 6px 20px rgba(20,50,50,.10); align-items:center;
}
.roleta-poster{
  width:150px; flex-shrink:0; aspect-ratio:2/3; border-radius:var(--radius);
  background-size:cover; background-position:center; background-color:#111;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
/* Sem capa no TMDb: o bloco mostra o título em vez de um retângulo vazio. */
.roleta-poster.sem-poster{
  display:flex; align-items:center; justify-content:center; padding:14px; text-align:center;
  color:#fff; font-weight:700; font-size:13.5px; line-height:1.35;
}
.roleta-tag{
  font-size:11px; font-weight:800; color:var(--turquesa); text-transform:uppercase; letter-spacing:.05em;
}
.roleta-titulo{font-size:24px; color:var(--verde-escuro); margin:4px 0 2px;}
.roleta-sub{font-size:13px; color:var(--muted); margin:0 0 16px;}
.roleta-acoes{display:flex; gap:10px; flex-wrap:wrap;}

@media (max-width:560px){
  .roleta-card{flex-direction:column; align-items:flex-start;}
  .roleta-poster{width:130px;}
}

/* Landing page */
.landing-hero{
  text-align:center; padding:60px 20px 40px; max-width:640px; margin:0 auto;
}
.status-pill{
  display:inline-block; background:#fff3cd; color:#7a5b00; font-size:12px; font-weight:700;
  padding:6px 16px; border-radius:20px; margin-bottom:18px; border:1px solid #f0dca3;
}
.landing-hero h1{
  font-size:38px; color:var(--verde-escuro); margin:0 0 4px;
}
.landing-hero .tagline{
  font-size:17px; font-weight:700; color:var(--turquesa); margin:0 0 16px;
}
.landing-hero p{
  color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 26px;
}
.cta-button{
  display:inline-block; background:var(--turquesa); color:#fff; font-weight:700; font-size:14.5px;
  padding:13px 28px; border-radius:30px; box-shadow:0 8px 20px rgba(30,133,141,.28);
  transition:background .15s ease;
}
.cta-button:hover{background:var(--turquesa-dark);}

.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:920px; margin:10px auto 0; padding:0 20px;
}
.feature-card{
  background:#fff; border-radius:var(--radius); padding:22px 18px; text-align:center;
  box-shadow:0 4px 16px rgba(20,50,50,.08);
}
.feature-card .ic{font-size:26px; margin-bottom:10px;}
.feature-card h3{font-size:14.5px; color:var(--verde-escuro); margin:0 0 6px;}
.feature-card p{font-size:12.5px; color:var(--muted); margin:0; line-height:1.5;}

.about-block{
  max-width:640px; margin:44px auto 0; padding:0 20px; text-align:center;
}
.about-block p{color:var(--muted); font-size:13px; line-height:1.6;}

@media (max-width:640px){
  .feature-grid{grid-template-columns:1fr;}
  .landing-hero h1{font-size:30px;}
}