/*
Theme Name: Meu Tema IPTV Pro
Theme URI: http://iptv.estradarealnet.com
Author: Marcos Paulo
Description: Tema elegante no estilo Netflix + Apple para revenda de IPTV.
Version: 3.0
License: GPL v2 or later
Text Domain: meu-tema-iptv
*/

/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Inter',sans-serif;
    background:#0b0b0d;
    color:#fff;
    overflow-x:hidden;
}

/* VAR */
:root{
    --accent:#e50914;
    --accent-hover:#f40612;
    --bg-card:rgba(20,20,20,.8);
    --border:rgba(255,255,255,.08);
    --radius:12px;
    --transition:.3s;
}

/* CONTAINER */
.container{max-width:1280px;margin:auto;padding:20px;}
.section{padding:80px 0;}

/* BOTÕES */
.btn{
    padding:12px 25px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(229,9,20,.4);}

/* HERO */
.hero-section{text-align:center;padding:100px 0;}
.hero-section h1{font-size:3rem;margin-bottom:20px;}
.hero-cta{margin-top:30px;display:flex;gap:10px;justify-content:center;}

/* GRID */
.grid{display:grid;gap:30px;}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}

/* ==============================
   CARDS BASE
============================== */
.plano-card{
    position:relative;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    text-align:center;
    overflow:hidden;
    transition:.4s;
}

/* HOVER */
.plano-card:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 40px 80px rgba(0,0,0,.7);
}

/* BRILHO PASSANDO */
.plano-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
    transform:skewX(-25deg);
}
.plano-card:hover::before{animation:brilho 1.2s;}
@keyframes brilho{100%{left:125%;}}

/* DESTAQUE */
.plano-card.destaque{
    border:1px solid var(--accent);
    box-shadow:0 0 25px rgba(229,9,20,.5);
    transform:scale(1.05);
}

/* BADGE */
.badge{
    position:absolute;
    top:-10px;
    right:15px;
    background:var(--accent);
    padding:5px 12px;
    font-size:.7rem;
    border-radius:20px;
    animation:badgePulse 2s infinite;
}
@keyframes badgePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.1);}
}

/* PREÇO */
.preco-box{margin:20px 0;}
.preco-antigo{
    text-decoration:line-through;
    color:#777;
    font-size:.9rem;
}
.preco-plano{
    font-size:3rem;
    font-weight:800;
    color:#fff;
    animation:pulsePrice 2s infinite;
}
@keyframes pulsePrice{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.05);}
}

.preco-tag{
    background:var(--accent);
    padding:3px 10px;
    border-radius:20px;
    font-size:.7rem;
}

/* BENEFICIOS */
.beneficios{list-style:none;margin:20px 0;}
.beneficios li{margin-bottom:8px;color:#ccc;}

/* BOTÃO PULSANTE */
.btn-pulse{
    animation:pulseBtn 1.5s infinite;
}
@keyframes pulseBtn{
    0%{box-shadow:0 0 0 0 rgba(229,9,20,.7);}
    70%{box-shadow:0 0 0 15px rgba(229,9,20,0);}
    100%{box-shadow:0 0 0 0 rgba(229,9,20,0);}
}

/* CONTADOR */
.counter{
    font-size:2rem;
    font-weight:bold;
    color:var(--accent);
}

/* FAQ */
.faq-item{
    border:1px solid var(--border);
    margin-bottom:10px;
    border-radius:10px;
}
.faq-question{
    padding:15px;
    cursor:pointer;
}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.3s;
    padding:0 15px;
}
.faq-item.active .faq-answer{
    max-height:200px;
    padding:10px 15px;
}

/* WHATSAPP */
.whatsapp-float{
    position:fixed;
    bottom:20px;
    right:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    animation:pulseZap 2s infinite;
}
@keyframes pulseZap{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,.7);}
    70%{box-shadow:0 0 0 20px rgba(37,211,102,0);}
}

/* ANIMAÇÃO ENTRADA */
.animate{
    opacity:0;
    transform:translateY(30px);
    transition:.8s;
}
.animate.show{
    opacity:1;
    transform:translateY(0);
}

/* RESPONSIVO */
@media(max-width:768px){
    .hero-section h1{font-size:2rem;}
    .plano-card.destaque{transform:none;}
}

/* ===== FIX PLANOS (FORÇA ESTILO) ===== */
.planos-premium .plano-card {
    background: #141414 !important;
    border-radius: 12px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: 0.3s !important;
}

.planos-premium .plano-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

.planos-premium .preco-plano {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    color: #00ff88 !important;
}

.planos-premium .preco-antigo {
    text-decoration: line-through !important;
    color: #777 !important;
}

.planos-premium .preco-tag {
    background: #e50914 !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    display: inline-block !important;
    margin-top: 5px !important;
}

.planos-premium .beneficios li {
    list-style: none !important;
    margin: 8px 0 !important;
    color: #ccc !important;
}

.planos-premium .btn-pulse {
    animation: pulseBtn 1.5s infinite !important;
}