/* ─────────────────────────────────────────────────────────
   ExtremOriental – style.css
   ───────────────────────────────────────────────────────── */

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --dark:    #2e2e2e;
  --white:   #ffffff;
  --orange:  #FF8605;
  --pink:    #F90076;
  --purple:  #8E00D5;
  --hero-bg: #0d0d0d;
}

/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
}

/* ─── NAV ─────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: rgba(46,46,46,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 1.3rem;
  color: var(--white); letter-spacing: .08em; text-transform: lowercase;
}
.nav-logo h2{
  font-size: 1rem;
}

.nav-logo em {
    font-style: normal;
    background: linear-gradient(90deg, var(--orange), var(--pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.7); text-decoration: none; text-transform: lowercase;
  transition: color .2s;
}
.nav-links a:hover { color: var(--orange); }

.nav-social { display: flex; gap: 10px; }
.nav-social a {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 4px;
  background: rgba(255,255,255,.1);
  color: var(--white); font-size: .65rem; font-weight: 700;
  text-decoration: none; letter-spacing: .04em;
  transition: background .2s;
}
.nav-social a:hover { background: var(--orange); }

/* wrapper que agrupa links + redes sociais (vira painel no mobile) */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

/* botão hamburguer — escondido no desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer;
  z-index: 210;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* fundo escurecido atrás do menu mobile */
.nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.active { opacity: 1; visibility: visible; }

/* ─── HERO ────────────────────────────────────────────── */
#hero {
  position: relative; height: 100vh; min-height: 560px;
  background: var(--hero-bg);
  overflow: hidden; display: flex; align-items: center;
}

/* BG video layer */
#bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .35;
  pointer-events: none; z-index: 1;
  filter:  blur(8px) saturate(0.1);
}

/* dark gradient overlay */
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(135deg,
    rgba(14,14,14,.82) 0%,
    rgba(46,0,80,.45) 60%,
    rgba(249,0,118,.18) 100%);
}

.hero-content {
  position: relative; z-index: 3;
  padding: 0 64px; max-width: 700px;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.hero-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(249,0,118,.25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(249,0,118,.25); }
  50%      { box-shadow: 0 0 0 10px rgba(249,0,118,.0); }
}
.hero-live-label {
  font-family: 'Syne', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  color: var(--pink); text-transform: uppercase;
}

.hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800; line-height: 1.0; color: var(--white);
  margin-bottom: 12px;
  white-space: nowrap;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--orange), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.05rem; font-weight: 300; color: rgba(255,255,255,.65);
  line-height: 1.6; margin-bottom: 36px;
}

.hero-cta {
  display: flex; align-items: center; gap: 20px;
}
#play-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px; border-radius: 50px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: var(--white);
  font-family: 'Syne', sans-serif; font-size: .9rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border: none; cursor: pointer;
  box-shadow: 0 8px 32px rgba(249,0,118,.4);
  transition: transform .2s, box-shadow .2s;
}
#play-btn:hover { transform: scale(1.04); box-shadow: 0 12px 40px rgba(249,0,118,.55); }
#play-btn svg { width: 18px; height: 18px; }

.hero-scroll {
  font-size: .8rem; color: rgba(255,255,255,.4); letter-spacing: .08em;
}

/* ─── FULLSCREEN PLAYER OVERLAY ──────────────────────── */
#player-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  flex-direction: column;
}
#player-overlay.active { display: flex; }

#overlay-video {
  flex: 1; width: 100%; object-fit: contain;
}

#close-player {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.12); border: none; border-radius: 8px;
  color: #fff; font-size: 1.2rem; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#close-player:hover { background: var(--pink); }

/* ─── SECTION COMMON ─────────────────────────────────── */
section { padding: 96px 64px; }
.section-tag {
  font-family: 'Syne', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 10px;
}
.section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.1;
}

/* ─── PROGRAMAS ──────────────────────────────────────── */
#programas { background: var(--white); }

.programas-header { margin-bottom: 52px; }
.programas-header .section-tag { color: var(--orange); }
.programas-header .section-title { color: var(--dark); }

.programas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.programa-card{
    position: relative;
    overflow: hidden;
    border-radius:16px;
    aspect-ratio:16/10;

    background-size:cover;
    background-position:center;
}
.programa-card .card-thumb {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}
.programa-card:hover .card-thumb { transform: scale(1.05); }

.programa-card .card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,14,14,.85) 0%, transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
}
.card-category {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.card-category.cat-orange { color: var(--orange); }
.card-category.cat-pink   { color: var(--pink); }
.card-category.cat-purple { color: #c458ff; }

.card-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--white);
}

.card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.card-placeholder-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
  display: flex; align-items: center; justify-content: center;
}
.card-placeholder-inner svg { opacity: .25; }

/* ─── ANUNCIE ─────────────────────────────────────────── */
#anuncie {
  background: var(--dark);
  text-align: center;
}
#anuncie .section-tag { color: var(--orange); }
#anuncie .section-title { color: var(--white); margin-bottom: 16px; }
#anuncie .section-desc {
  font-size: 1rem; font-weight: 300; color: rgba(255,255,255,.55);
  max-width: 560px; margin: 0 auto 56px;
}

.pacotes-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; max-width: 860px; margin: 0 auto;
}
.pacote-card {
  border-radius: 16px;
  padding: 32px 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  text-align: left;
  transition: border-color .25s, transform .25s;
  position: relative; overflow: hidden;
}
.pacote-card::before {
  content: '';
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .3s;
}
.pacote-card:hover { transform: translateY(-4px); }
.pacote-card.p1::before { background: linear-gradient(135deg, rgba(255,134,5,.12), transparent); }
.pacote-card.p2::before { background: linear-gradient(135deg, rgba(249,0,118,.12), transparent); }
.pacote-card.p3::before { background: linear-gradient(135deg, rgba(142,0,213,.14), transparent); }
.pacote-card:hover::before { opacity: 1; }
.pacote-card.p1 { border-color: rgba(255,134,5,.3); }
.pacote-card.p2 { border-color: rgba(249,0,118,.3); }
.pacote-card.p3 { border-color: rgba(142,0,213,.3); }

.pacote-nome {
  font-family: 'Syne', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 6px;
}
.pacote-card.p1 .pacote-nome { color: var(--orange); }
.pacote-card.p2 .pacote-nome { color: var(--pink); }
.pacote-card.p3 .pacote-nome { color: #c458ff; }

.pacote-insercoes {
  font-size: .8rem; color: rgba(255,255,255,.45); margin-bottom: 20px;
}
.pacote-duracao {
  font-family: 'Syne', sans-serif;
  font-size: 3rem; font-weight: 800; color: var(--white); line-height: 1;
}
.pacote-preco {
  font-size: .95rem; font-weight: 500; font-style: italic;
  color: rgba(255,255,255,.6); margin-top: 6px; margin-bottom: 28px;
}
.btn-assine {
  display: flex; width: 100%; padding: 11px 0;
  text-decoration: none; text-align: center;
  justify-content: center; align-items: center;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.8);
  font-family: 'Syne', sans-serif; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.pacote-card.p1 .btn-assine:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.pacote-card.p2 .btn-assine:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.pacote-card.p3 .btn-assine:hover { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ─── QUEM SOMOS ──────────────────────────────────────── */
#quemsomos {
  background: var(--white);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.qs-text .section-tag { color: var(--purple); }
.qs-text .section-title { color: var(--dark); margin-bottom: 20px; }
.qs-text p {
  font-size: 1rem; font-weight: 300; line-height: 1.8;
  color: rgba(46,46,46,.7);
}
.qs-video-wrap {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 16/9; background: #1a1a1a;
  box-shadow: 0 24px 80px rgba(142,0,213,.18);
}
.qs-video-wrap video { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.qs-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.qs-play-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.3);
  transition: transform .2s, background .2s;
}
.qs-play-btn:hover .qs-play-circle {
  transform: scale(1.1); background: rgba(142,0,213,.5);
}

/* ─── NEWSLETTER ─────────────────────────────────────── */
#newsletter {
  background: linear-gradient(135deg, #1a0030 0%, #2e0060 40%, #4a0080 100%);
  text-align: center;
  padding: 80px 64px;
}
#newsletter .section-title {
  color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 10px;
}
#newsletter p { color: rgba(255,255,255,.5); margin-bottom: 36px; }

.newsletter-form {
  display: flex; gap: 0; max-width: 480px; margin: 0 auto 40px;
  border-radius: 50px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 40px rgba(142,0,213,.3);
}
.newsletter-form input {
  flex: 1; padding: 16px 24px;
  background: rgba(255,255,255,.08); border: none;
  color: var(--white); font-family: 'DM Sans', sans-serif; font-size: .9rem;
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-form button {
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border: none; color: var(--white);
  font-family: 'Syne', sans-serif; font-size: .85rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s;
}
.newsletter-form button:hover { opacity: .88; }

.footer-social { display: flex; gap: 12px; justify-content: center; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: var(--white); font-size: .65rem; font-weight: 700;
  letter-spacing: .06em; text-decoration: none;
  transition: background .2s;
}
.footer-social a:hover { background: var(--pink); }

/* ─── FOOTER ─────────────────────────────────────────── */
footer {
  background: var(--dark);
  text-align: center; padding: 24px 64px;
  font-size: .75rem; color: rgba(255,255,255,.25);
  letter-spacing: .06em;
}

/* ─── SCROLL ANIMATIONS ──────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.pgm1{
  background-image: url('imgs/ad.png');
  background-size: cover;
  background-position: center;
}
.pgm2{
  background-image: url('imgs/jamaica.png');
  background-size: cover;
  background-position: center;
}
.pgm3{
  background-image: url('imgs/opovo.png');
  background-size: cover;
  background-position: center;
}

/* ===========================================================
   RESPONSIVIDADE
=========================================================== */

/* ---------- NOTEBOOKS ---------- */
@media (max-width: 1200px){

    nav{
        padding:20px 32px;
    }

    section{
        padding:80px 40px;
    }

    .hero-content{
        padding:0 40px;
    }

    .programas-grid{
        gap:18px;
    }

    .pacotes-grid{
        max-width:100%;
    }

}


/* ---------- TABLETS ---------- */
@media (max-width: 992px){

    nav{
        padding:18px 28px;
    }

    .nav-links{
        gap:18px;
    }

    .hero-content{
        max-width:620px;
    }

    .hero-title{
        font-size:3.5rem;
    }

    section{
        padding:72px 32px;
    }

    .programas-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .pacotes-grid{
        grid-template-columns:1fr;
        max-width:520px;
    }

    #quemsomos{
        grid-template-columns:1fr;
        gap:50px;
    }

}


/* ---------- TABLETS PEQUENOS ---------- */
@media (max-width: 768px){

    nav{
        justify-content:space-between;
        padding:16px 24px;
    }

    .nav-logo{
        justify-content:flex-start;
    }

    /* mostra o botão hamburguer */
    .nav-toggle{
        display:flex;
    }

    /* menu vira painel lateral escondido por padrão */
    .nav-menu{
        position:fixed;
        top:0; right:0;
        height:100vh;
        width:min(78vw, 320px);
        background:rgb(24,24,24);
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:0;
        padding:100px 32px 32px;
        transform:translateX(100%);
        transition:transform .35s ease;
        z-index:200;
        overflow-y:auto;
        box-shadow:-8px 0 40px rgba(0,0,0,.4);
    }

    .nav-menu.active{
        transform:translateX(0);
    }

    .nav-links{
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:26px;
        margin-bottom:40px;
    }

    .nav-links a{
        font-size:1.05rem;
    }

    .nav-social{
        width:100%;
        justify-content:flex-start;
    }

    .nav-backdrop{
        display:block;
    }

    #hero{
        min-height:680px;
    }

    .hero-content{
        padding:0 24px;
        text-align:center;
        max-width:100%;
    }

    .hero-eyebrow{
        justify-content:center;
    }

    .hero-title{
        font-size:6.2vw;
        white-space:nowrap;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    .hero-cta{
        justify-content:center;
        flex-wrap:wrap;
    }

    section{
        padding:64px 24px;
    }

    .section-title{
        text-align:center;
    }

    .section-tag{
        text-align:center;
    }

    .programas-header{
        text-align:center;
    }

    .programas-grid{
        grid-template-columns:1fr;
    }

    .programa-card{
        aspect-ratio:16/9;
    }

    #quemsomos{
        text-align:center;
    }

    .newsletter-form{
        flex-direction:column;
        border-radius:18px;
    }

    .newsletter-form input{
        width:100%;
    }

    .newsletter-form button{
        width:100%;
    }

}


/* ---------- CELULARES ---------- */
@media (max-width: 576px){

    nav{
        padding:14px 16px;
    }

    .nav-logo h2{
        font-size:.9rem;
    }

    .nav-menu{
        width:82vw;
        padding:90px 24px 24px;
    }

    .nav-links{
        gap:20px;
    }

    .nav-links a{
        font-size:1rem;
    }

    #hero{
        min-height:100vh;
    }

    .hero-content{
        padding:0 18px;
    }

    .hero-title{
        line-height:1.05;
    }

    .hero-subtitle{
        font-size:.95rem;
        line-height:1.6;
    }

    #play-btn{
        width:100%;
        justify-content:center;
    }

    .hero-scroll{
        display:none;
    }

    section{
        padding:56px 18px;
    }

    .section-title{
        font-size:2rem;
    }

    .card-title{
        font-size:1rem;
    }

    .pacote-card{
        padding:24px;
    }

    .pacote-duracao{
        font-size:2.4rem;
    }

    .qs-play-circle{
        width:60px;
        height:60px;
    }

    #newsletter{
        padding:56px 18px;
    }

    footer{
        padding:18px;
    }

}


/* ---------- CELULARES MUITO PEQUENOS ---------- */
@media (max-width: 380px){

    .hero-content{
        padding:0 16px;
    }

    .hero-subtitle{
        font-size:.9rem;
    }

    #play-btn{
        font-size:.8rem;
        padding:14px 18px;
    }

    .section-title{
        font-size:1.75rem;
    }

    .pacote-duracao{
        font-size:2rem;
    }

}