/* ===== Tokens ===== */
:root{
  --red: #E51B28;
  --red-dark: #a8121c;
  --black: #0a0a0a;
  --black-2: #131313;
  --black-3: #1c1c1c;
  --white: #ffffff;
  --grey: #a7a7a7;
  --border: rgba(255,255,255,.1);
  --radius: 16px;
  --container: 1120px;
  --ff-head: 'Poppins', sans-serif;
  --ff-body: 'Inter', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--ff-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--ff-head); font-weight: 700; margin: 0 0 1rem; line-height: 1.15; }
p{ margin: 0 0 1rem; color: var(--grey); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.text-red{ color: var(--red); }

.eyebrow{
  color: var(--red);
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.section{ padding: 96px 0; position: relative; }
.section--alt{ background: var(--black-2); }
.section__title{ font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 720px; }

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--red); color: var(--white); }
.btn--primary:hover{ background: var(--red-dark); }
.btn--ghost{ background: transparent; color: var(--white); border-color: var(--border); }
.btn--ghost:hover{ border-color: var(--white); }

/* ===== Nav ===== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  border-color: var(--border);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; }
.nav__logo img{ height: 34px; width: auto; }
.nav__links{ display:flex; align-items:center; gap: 2rem; }
.nav__links a{ font-family: var(--ff-head); font-size: .9rem; font-weight: 500; color: var(--white); opacity: .85; }
.nav__links a:hover{ opacity: 1; }
.nav__cta{
  opacity: 1 !important;
  background: var(--red);
  padding: .55rem 1.2rem;
  border-radius: 999px;
}
.nav__cta:hover{ background: var(--red-dark); }

.nav__toggle{
  display: none;
  background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.nav__toggle span{ width: 22px; height: 2px; background: var(--white); display:block; }

/* ===== Hero ===== */
.hero{
  position: relative;
  overflow: hidden;
  padding: 180px 0 120px;
  background: var(--black);
}
.hero__inner{ position: relative; z-index: 2; max-width: 780px; }
.hero h1{ font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
.hero__subtitle{ font-size: 1.05rem; max-width: 560px; }
.hero__actions{ display:flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.hero__ring{
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--red) 0%, var(--red-dark) 45%, transparent 70%);
  -webkit-mask: radial-gradient(circle, transparent 58%, black 60%);
          mask: radial-gradient(circle, transparent 58%, black 60%);
  opacity: .55;
  z-index: 1;
}
.hero__ring--tl{ top: -160px; left: -160px; }
.hero__ring--br{ bottom: -200px; right: -180px; width: 500px; height: 500px; }

.hero__dots{
  position: absolute; top: 32px; right: 32px; z-index: 2;
  display:flex; gap: 6px;
}
.hero__dots span{ width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.hero__dots span:nth-child(2){ background: var(--white); }

/* film-grain texture overlay */
.hero::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  opacity: .06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Tabs (episodios) ===== */
.tabs{ display:flex; gap: .75rem; margin-bottom: 1.5rem; }
.tab{
  background: var(--black-2);
  border: 1px solid var(--border);
  color: var(--grey);
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .85rem;
  padding: .6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
}
.tab.is-active{ background: var(--red); color: var(--white); border-color: var(--red); }

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.video-wrap{ position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow:hidden; background: var(--black-2); }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== Episode archive ===== */
.filters{ display:flex; flex-wrap:wrap; gap:.75rem; margin: 0 0 2rem; }
.filter{
  background: var(--black-2);
  border: 1px solid var(--border);
  color: var(--grey);
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .85rem;
  padding: .6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
}
.filter:hover{ border-color: var(--white); color: var(--white); }
.filter.is-active{ background: var(--red); color: var(--white); border-color: var(--red); }
.nav__links a.is-current{ opacity: 1; color: var(--red); }

.episodes-cta{ margin-top: 2.5rem; }
.page-episodes .section{ padding-top: 140px; }
.episode-archive__title{ font-size: 1.4rem; margin-bottom: .25rem; }
.episode-archive__hint{ margin-bottom: 1.75rem; }

.episode-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.episode-card{
  display:flex;
  flex-direction: column;
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease, border-color .2s ease;
}
.episode-card:hover{ transform: translateY(-3px); border-color: var(--red); }

.episode-card__thumb{ position: relative; aspect-ratio: 16/9; background: var(--black-3); }
.episode-card__thumb img{ width:100%; height:100%; object-fit: cover; }
.episode-card__play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,10,10,.25);
  color: var(--white);
  opacity: 0;
  transition: opacity .15s ease;
}
.episode-card__play svg{
  background: var(--red);
  border-radius: 50%;
  padding: .6rem;
  width: 18px; height: 18px;
}
.episode-card:hover .episode-card__play{ opacity: 1; }

.episode-card__body{ padding: .9rem 1rem 1.1rem; }
.episode-card__num{
  display:block;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: .75rem;
  color: var(--red);
  letter-spacing: .05em;
  margin-bottom: .35rem;
}
.episode-card__title{
  margin: 0;
  font-size: .85rem;
  color: var(--white);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Video modal ===== */
.modal[hidden]{ display:none; }
.modal{
  position: fixed; inset: 0; z-index: 200;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.85);
}
.modal__content{
  position: relative;
  width: 100%; max-width: 900px;
  z-index: 1;
}
.modal__close{
  position: absolute; top: -44px; right: 0;
  background: none; border: none;
  color: var(--white); font-size: 2rem; line-height: 1;
  cursor: pointer;
}
.modal__video{ position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow:hidden; background: var(--black-2); }
.modal__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== Sobre ===== */
.about{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items:center; }
.about__media{ position: relative; aspect-ratio: 1/1; }
.about__ring{
  position:absolute; inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--red) 0%, transparent 65%);
  opacity: .35;
}
.about__photo{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit: cover;
  border-radius: 24px;
}
.about__copy p{ max-width: 520px; }

/* ===== Plataformas ===== */
.platforms{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; max-width: 640px; }
.platform-card{
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  display:flex; flex-direction:column; align-items:center; gap: .85rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .9rem;
  transition: transform .15s ease, border-color .2s ease, color .2s ease;
}
.platform-card svg{ color: var(--red); }
.platform-card:hover{ transform: translateY(-4px); border-color: var(--red); }
.platform-card.is-placeholder{ opacity: .55; }

/* ===== Newsletter ===== */
.newsletter{ text-align:center; max-width: 640px; }
.newsletter__copy{ max-width: 480px; margin-left:auto; margin-right:auto; }
.newsletter__form{
  display:flex; gap: .75rem; margin-top: 1.5rem;
  max-width: 460px; margin-left:auto; margin-right:auto;
}
.newsletter__form input{
  flex:1;
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .9rem 1.3rem;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: .95rem;
}
.newsletter__form input:focus{ outline: 2px solid var(--red); outline-offset: 2px; }
.newsletter__note{ margin-top: 1rem; color: var(--red); font-weight: 500; }

/* ===== Footer ===== */
.footer{ padding: 48px 0; border-top: 1px solid var(--border); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 1.5rem; }
.footer__logo{ height: 28px; opacity: .9; }
.footer__social{ display:flex; gap: 1.25rem; }
.footer__social a{ color: var(--grey); }
.footer__social a:hover{ color: var(--red); }
.footer__copy{ margin:0; font-size: .85rem; color: var(--grey); }

/* ===== Responsive ===== */
@media (max-width: 860px){
  .about{ grid-template-columns: 1fr; }
  .about__media{ max-width: 320px; margin: 0 auto; }
  .platforms{ grid-template-columns: repeat(2, 1fr); }
  .episode-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px){
  .episode-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .nav__links{
    position: fixed; top: 68px; left: 0; right: 0;
    background: var(--black-2);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 24px;
    border-bottom: 1px solid var(--border);
    transform: translateY(-150%);
    transition: transform .25s ease;
  }
  .nav__links.is-open{ transform: translateY(0); }
  .nav__toggle{ display:flex; }
  .nav__cta{ margin-top: .5rem; }

  .hero{ padding: 140px 0 80px; }
  .newsletter__form{ flex-direction: column; }
}