/* ============================================================
   HDC Telecom – Internet | CSS PLANOS
   Responsável por: cards de planos (100 a 1000 MB),
   selos de destaque e benefícios inclusos animados
   ============================================================ */

/* ===== Cards de planos de internet ===== */
.grade-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.plano {
    background: var(--branco);
    border-radius: 16px;
    padding: 32px 24px;
    border: 2px solid transparent;
    box-shadow: 0 8px 24px rgba(18,58,107,0.08);
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.plano:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(18,58,107,0.16);
    border-color: var(--azul-claro);
}

/* ===== Destaque Mais Popular (500 MB) ===== */
.plano.destaque {
    border-color: var(--laranja);
    background: linear-gradient(180deg, #fff8f0 0%, var(--branco) 40%);
}

.plano.destaque .selo {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--laranja);
    color: var(--branco);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 50px;
    white-space: nowrap;
}

/* ===== Destaque Plano Gamer (1000 MB) ===== */
.plano.gamer {
    border-color: var(--verde);
    background: linear-gradient(180deg, #f1fbf4 0%, var(--branco) 40%);
}

.plano.gamer .selo {
    background: var(--verde);
    box-shadow: 0 4px 14px rgba(40,167,69,0.4);
}

.plano.gamer:hover { border-color: var(--verde); }

/* ===== Conteúdo do card ===== */
.plano .velocidade {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--azul);
    line-height: 1;
}

.plano .velocidade small {
    font-size: 1.1rem;
    color: var(--cinza);
    font-weight: 600;
}

.plano .upgrade {
    font-size: 0.85rem;
    color: var(--verde);
    font-weight: 600;
    margin: 8px 0 4px;
    min-height: 34px;
}

.plano .preco {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--laranja);
    margin: 10px 0 4px;
}

.plano .preco small {
    font-size: 0.95rem;
    color: var(--cinza);
    font-weight: 500;
}

.plano .obs {
    font-size: 0.8rem;
    color: var(--cinza);
    margin-bottom: 18px;
    min-height: 30px;
}

.plano a {
    margin-top: auto;
    display: inline-block;
    background: var(--azul-claro);
    color: var(--branco);
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px;
    border-radius: 50px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow: 0 4px 14px rgba(0,168,232,0.35);
    position: relative;
    overflow: hidden;
}

.plano a:hover {
    transform: scale(1.05);
    filter: brightness(1.08);
    box-shadow: 0 8px 24px rgba(0,168,232,0.55);
}

.plano a::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transition: left 0.6s ease;
}

.plano a:hover::after { left: 100%; }

/* ===== Benefícios inclusos ===== */
.beneficios-inclusos {
    background: var(--branco);
    border-radius: 16px;
    padding: 36px 28px;
    margin-top: 36px;
    box-shadow: 0 8px 24px rgba(18,58,107,0.08);
    text-align: center;
}

.beneficios-inclusos h3 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--azul);
    margin-bottom: 24px;
}

.grade-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.beneficio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    border-radius: 12px;
    background: var(--fundo);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beneficio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(18,58,107,0.12);
}

.beneficio-item span { font-weight: 600; font-size: 0.95rem; color: var(--texto); }

/* ===== Ícones animados dos benefícios ===== */
.beneficio-item .bi-ico {
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
}

.bi-ico svg { width: 54px; height: 54px; display: block; overflow: visible; }

/* Moeda (instalação grátis) */
.c-moeda { transform-box: fill-box; transform-origin: center; animation: moedaPulse 2.2s ease-in-out infinite; }
@keyframes moedaPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
}
.moedinha { animation: moedaCai 2.2s ease-in infinite; }
.moedinha.m2 { animation-delay: .5s; }
.moedinha.m3 { animation-delay: 1.1s; }
@keyframes moedaCai {
    0%   { transform: translateY(-6px); opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}
.brilho { animation: brilhoPisca 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.brilho.b2 { animation-delay: .5s; }
.brilho.b3 { animation-delay: .9s; }
@keyframes brilhoPisca {
    0%, 100% { opacity: .15; transform: scale(.7); }
    50%      { opacity: 1; transform: scale(1.05); }
}

/* Gamepad (modo game on) */
.gp-body { transform-box: fill-box; transform-origin: center; animation: gpJoga 1.6s ease-in-out infinite; }
@keyframes gpJoga {
    0%, 100% { transform: rotate(-2.5deg) translateY(0); }
    50%      { transform: rotate(2.5deg) translateY(-1.5px); }
}
.btn-g { animation: btnPisca 1.8s ease-in-out infinite; }
.btn-g.g2 { animation-delay: .3s; }
.btn-g.g3 { animation-delay: .6s; }
.btn-g.g4 { animation-delay: .9s; }
@keyframes btnPisca {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

/* Globo (IP dedicado) */
.meridianos { transform-box: fill-box; transform-origin: center; animation: giraInf 8s linear infinite; }
@keyframes giraInf { to { transform: rotate(360deg); } }
.badge-ip { transform-box: fill-box; transform-origin: center; animation: badgePop 2s ease-in-out infinite; }
@keyframes badgePop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* Roteador (wifi) */
.wifi { transform-box: fill-box; transform-origin: center; animation: wifiPulso 1.8s ease-out infinite; opacity: 0; }
.wifi.w2 { animation-delay: .6s; }
.wifi.w3 { animation-delay: 1.2s; }
@keyframes wifiPulso {
    0%   { opacity: 0; transform: scale(.6); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.25); }
}
.led-p { animation: ledPisca 1.4s ease-in-out infinite; }
.led-p.l2 { animation-delay: .7s; }
@keyframes ledPisca {
    0%, 100% { opacity: 1; }
    50%      { opacity: .1; }
}

/* Comodato (caixa com check) */
.check-comodato { transform-box: fill-box; transform-origin: center; animation: badgePop 2s ease-in-out infinite; }
.ring-dash {
    stroke-dasharray: 14 10;
    animation: dashGira 5s linear infinite;
}
@keyframes dashGira { to { stroke-dashoffset: -48; } }

/* Suporte (raio) */
.raio { transform-box: fill-box; transform-origin: center; animation: raioFlash 1.5s ease-in-out infinite; }
@keyframes raioFlash {
    0%, 100% { opacity: .35; transform: scale(.92); }
    50%      { opacity: 1; transform: scale(1.06); }
}
.ring-suporte { transform-box: fill-box; transform-origin: center; animation: pingSuave 2s ease-out infinite; }
@keyframes pingSuave {
    0%   { transform: scale(.8); opacity: .9; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* Troféu (alta qualidade) */
.trofeu { transform-box: fill-box; transform-origin: center; animation: trofeuFlutua 3s ease-in-out infinite; }
@keyframes trofeuFlutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.estrela { transform-box: fill-box; transform-origin: center; animation: estrelaPisca 1.8s ease-in-out infinite; }
@keyframes estrelaPisca {
    0%, 100% { opacity: .4; transform: scale(.85) rotate(-8deg); }
    50%      { opacity: 1; transform: scale(1.1) rotate(8deg); }
}