/* 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;}

.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);}

/* 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.rt .val{color:#d34a3f;}
.rating-chip.lb .val a{color:var(--turquesa); font-size:13px; font-weight:700;}

.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;}

/* 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;}
}

/* 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;}
}