/* ============================================
   AGIRAPOP! v3 — Multi-plataforma (IG + YT)
   ============================================ */

/* ====== PLATFORM BLOCKS (números IG / YT) ====== */
.platform-block{
    margin-top:2.5rem;
}
.platform-block + .platform-block{margin-top:3rem}

.platform-header{
    display:flex;align-items:center;justify-content:center;gap:.8rem;
    margin-bottom:1.5rem;flex-wrap:wrap;
}
.platform-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:10px;font-size:1.4rem;
    border:3px solid var(--cream);
    box-shadow:3px 3px 0 var(--black);
}
.platform-icon.ig{
    background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 50%,#FCAF45 100%);
    color:var(--cream);
}
.platform-icon.yt{
    background:#FF0000;color:var(--cream);
}
.platform-name{
    font-family:var(--font-display);font-size:2rem;line-height:1;
    color:var(--cream);text-shadow:3px 3px 0 var(--red);letter-spacing:.04em;
}
.platform-handle{
    font-family:var(--font-display);font-size:1rem;color:var(--bronze-bright);
    letter-spacing:.05em;background:rgba(196,149,96,.12);
    padding:.3rem .8rem;border-radius:100px;border:2px solid var(--bronze);
}

/* YouTube card variant */
.number-card.yt-card{
    box-shadow:6px 6px 0 #FF0000,12px 12px 0 var(--bronze);
}
.number-card.yt-card:hover{
    box-shadow:9px 9px 0 #FF0000,18px 18px 0 var(--bronze);
}
.number-card.yt-card .number-card-icon{
    background:#FF0000;
}
.number-card.yt-card .number-card-num{
    color:var(--bronze-bright);
    text-shadow:3px 3px 0 #FF0000;
}

/* ====== INSIGHT BOX (entre IG e YT) ====== */
.platform-insight{
    margin-top:2.5rem;
    background:linear-gradient(135deg,var(--bronze) 0%,var(--bronze-bright) 100%);
    color:var(--black);border:4px solid var(--cream);border-radius:10px;
    padding:1.8rem 2rem;display:flex;gap:1.5rem;align-items:center;
    box-shadow:8px 8px 0 var(--red),8px 8px 0 1px var(--cream);
    position:relative;
}
.platform-insight::before{
    content:'';position:absolute;inset:6px;
    background-image:radial-gradient(circle,rgba(0,0,0,.08) 1.5px,transparent 1.5px);
    background-size:14px 14px;pointer-events:none;border-radius:4px;
}
.platform-insight-icon{
    font-size:3.5rem;line-height:1;flex-shrink:0;
    position:relative;z-index:2;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.platform-insight-text{
    flex:1;font-family:var(--font-body);
    font-size:1rem;line-height:1.6;color:var(--black);position:relative;z-index:2;
    font-weight:500;
}
.platform-insight-text strong{color:var(--red);font-weight:800}

/* ====== VIRAIS por plataforma ====== */
.virais-platform-title{
    font-family:var(--font-display);font-size:1.8rem;line-height:1;
    color:var(--black);text-shadow:3px 3px 0 var(--red);
    letter-spacing:.04em;margin:3rem 0 1.5rem;
    display:flex;align-items:center;gap:.8rem;justify-content:center;
}
.virais-platform-title:first-of-type{margin-top:1rem}
.virais-platform-title.yt{margin-top:4rem}
.virais-platform-title .platform-icon{
    width:40px;height:40px;font-size:1.2rem;border-width:2px;
    box-shadow:2px 2px 0 var(--black);
}

/* ----- YouTube viral card ----- */
.viral-card.yt-viral{
    box-shadow:6px 6px 0 #FF0000;
}
.viral-card.yt-viral:hover{
    box-shadow:9px 9px 0 #FF0000;
}
.viral-thumb.yt-thumb::before{
    background:radial-gradient(ellipse at center,rgba(255,0,0,.4) 0%,transparent 60%);
}
.viral-rank.yt-rank{background:#FF0000}
.viral-views-badge.yt{
    background:var(--black);border-color:#FF0000;
    color:#FF6B6B;
}
.viral-play.yt-play{background:#FF0000}
.viral-meta-pill.ig{
    background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 50%,#FCAF45 100%);
    color:var(--cream);
}
.viral-meta-pill.yt{
    background:#FF0000;color:var(--cream);
}
.viral-meta-stat.yt{color:#FF0000}

/* ====== RESPONSIVE — ajustes mobile ====== */
@media (max-width:1024px){
    .platform-name{font-size:1.6rem}
    .platform-icon{width:40px;height:40px;font-size:1.2rem}
    .virais-platform-title{font-size:1.4rem}
    .platform-insight{flex-direction:column;text-align:center;gap:1rem}
    .platform-insight-icon{margin:0 auto}
}

@media (max-width:768px){
    .platform-block{margin-top:2rem}
    .platform-header{flex-wrap:wrap;gap:.5rem}
    .platform-name{font-size:1.4rem}
    .platform-handle{font-size:.85rem}
    .platform-insight{padding:1.4rem 1.2rem}
    .platform-insight-icon{font-size:2.8rem}
    .platform-insight-text{font-size:.88rem;line-height:1.55}
    .virais-platform-title{font-size:1.2rem;margin:2.5rem 0 1.2rem}
    .virais-platform-title.yt{margin-top:3rem}
}