/* ============================================
   AGIRAPOP! v2 — ARRANCADA Section + Mobile First
   ============================================ */

/* ====== SEÇÃO ARRANCADA (Comparação) ====== */
.arrancada-section{
    background:var(--black);padding:7rem 1.5rem;position:relative;overflow:hidden;
    color:var(--cream);border-top:5px solid var(--red);border-bottom:5px solid var(--red);
}
.arrancada-section::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(196,149,96,.06) 2px,transparent 2px);
    background-size:30px 30px;pointer-events:none;
}
.arrancada-container{max-width:1100px;margin:0 auto;position:relative;z-index:2}

/* ----- Hero da Arrancada (números grandes) ----- */
.arrancada-hero{display:flex;justify-content:center;margin-bottom:3.5rem}
.arrancada-hero-box{
    background:var(--red);border:4px solid var(--cream);border-radius:10px;
    padding:2.5rem 2rem;max-width:720px;width:100%;text-align:center;
    box-shadow:10px 10px 0 var(--bronze),10px 10px 0 1px var(--cream);
    transform:rotate(-1deg);position:relative;
}
.arrancada-hero-box::before{
    content:'';position:absolute;inset:8px;
    background-image:radial-gradient(circle,rgba(0,0,0,.15) 1.5px,transparent 1.5px);
    background-size:14px 14px;pointer-events:none;border-radius:4px;
}
.arrancada-period{
    display:inline-block;background:var(--black);color:var(--bronze-bright);
    font-family:var(--font-display);font-size:.85rem;padding:.3rem 1rem;
    border:2px solid var(--cream);border-radius:100px;letter-spacing:.1em;
    margin-bottom:1.5rem;position:relative;z-index:2;
}
.arrancada-big{position:relative;z-index:2}
.arrancada-delta{
    display:flex;align-items:center;justify-content:center;gap:1rem;
    font-family:var(--font-display);margin-bottom:1rem;flex-wrap:wrap;
}
.arrancada-from{
    font-size:2.8rem;line-height:1;color:var(--cream);
    opacity:.6;text-decoration:line-through;text-decoration-color:var(--black);
    text-decoration-thickness:4px;
}
.arrancada-arrow{
    font-size:2.5rem;line-height:1;color:var(--bronze-bright);
    text-shadow:3px 3px 0 var(--black);
}
.arrancada-to{
    font-size:4.5rem;line-height:1;color:var(--cream);
    text-shadow:5px 5px 0 var(--black),10px 10px 0 var(--bronze);
    letter-spacing:.02em;
}
.arrancada-growth{
    display:flex;flex-direction:column;align-items:center;gap:.3rem;
    margin-top:.8rem;
}
.arrancada-pct{
    font-family:var(--font-display);font-size:3.8rem;line-height:1;
    color:var(--bronze-bright);text-shadow:4px 4px 0 var(--black);letter-spacing:.02em;
}
.arrancada-abs{
    font-family:var(--font-display);font-size:1.1rem;color:var(--cream);
    letter-spacing:.05em;opacity:.95;
}
.arrancada-caption{
    font-size:.95rem;line-height:1.5;color:var(--cream);
    margin-top:1.2rem;max-width:560px;margin-left:auto;margin-right:auto;
    position:relative;z-index:2;
}
.arrancada-caption strong{color:var(--bronze-bright)}

/* ----- Tabela / Cards de comparação ----- */
.arrancada-table-wrap{margin-top:3rem}
.arrancada-h3{
    font-family:var(--font-display);font-size:1.8rem;
    color:var(--bronze-bright);text-align:center;letter-spacing:.03em;
    text-shadow:3px 3px 0 var(--red);margin-bottom:.5rem;
}
.arrancada-muted{
    text-align:center;font-size:.85rem;color:var(--gray-300);
    margin-bottom:2rem;font-style:italic;
}
.arrancada-cards{display:flex;flex-direction:column;gap:1rem}
.arr-card{
    background:var(--cream);border:3px solid var(--cream);border-radius:8px;
    padding:1.5rem 1.8rem;color:var(--black);box-shadow:5px 5px 0 rgba(196,149,96,.3);
    transition:.3s var(--easing);
}
.arr-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(196,149,96,.5)}

.arr-card.gira{
    background:linear-gradient(135deg,var(--red) 0%,var(--red-bright) 100%);
    color:var(--cream);border-color:var(--bronze-bright);
    box-shadow:6px 6px 0 var(--bronze),6px 6px 0 1px var(--cream);
    position:relative;transform:rotate(-0.5deg);
}
.arr-card.gira::before{
    content:'';position:absolute;inset:6px;
    background-image:radial-gradient(circle,rgba(0,0,0,.08) 1px,transparent 1px);
    background-size:12px 12px;pointer-events:none;border-radius:4px;
}
.arr-card.gira:hover{
    transform:rotate(0) translate(-3px,-3px);
    box-shadow:10px 10px 0 var(--bronze),10px 10px 0 1px var(--cream);
}

.arr-card-head{
    display:flex;justify-content:space-between;align-items:center;
    gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap;position:relative;z-index:2;
}
.arr-card-name h4{
    font-family:var(--font-display);font-size:1.6rem;line-height:1;
    letter-spacing:.02em;margin-bottom:.3rem;
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.arr-card.gira .arr-card-name h4{text-shadow:2px 2px 0 var(--black)}
.arr-card-name p{
    font-size:.75rem;color:var(--gray-500);font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;
}
.arr-card.gira .arr-card-name p{color:var(--bronze-bright)}
.arr-self-tag{
    display:inline-block;background:var(--bronze);color:var(--cream);
    font-family:var(--font-display);font-size:.65rem;padding:.2rem .5rem;
    border:2px solid var(--cream);border-radius:100px;letter-spacing:.1em;
    box-shadow:2px 2px 0 var(--black);
}

.arr-card-followers{text-align:right}
.arr-card-followers strong{
    display:block;font-family:var(--font-display);font-size:2.2rem;
    line-height:1;color:var(--red);letter-spacing:.02em;
}
.arr-card.gira .arr-card-followers strong{
    color:var(--bronze-bright);text-shadow:3px 3px 0 var(--black);
}
.arr-card-followers span{
    font-size:.7rem;color:var(--gray-500);text-transform:uppercase;
    letter-spacing:.1em;font-weight:700;margin-top:.2rem;display:block;
}
.arr-card.gira .arr-card-followers span{color:var(--cream);opacity:.8}

/* Barras de comparação */
.arr-bars{display:flex;flex-direction:column;gap:.9rem;position:relative;z-index:2}
.arr-bar-row{display:flex;flex-direction:column;gap:.3rem}
.arr-bar-label{
    display:flex;justify-content:space-between;align-items:center;
    font-size:.75rem;font-weight:700;color:var(--gray-700);
}
.arr-card.gira .arr-bar-label{color:var(--cream)}
.arr-bar-label span{display:flex;align-items:center;gap:.3rem}
.arr-bar-label strong{
    font-family:var(--font-display);font-size:1.1rem;letter-spacing:.02em;
    color:var(--red);
}
.arr-card.gira .arr-bar-label strong{color:var(--bronze-bright)}
.arr-bar-wrap{
    height:14px;background:var(--gray-300);border:2px solid var(--black);
    border-radius:100px;overflow:hidden;position:relative;
}
.arr-card.gira .arr-bar-wrap{background:rgba(0,0,0,.4);border-color:var(--cream)}
.arr-bar-fill{
    height:100%;border-radius:100px;transition:width 1.2s var(--easing-out);
    background:linear-gradient(90deg,var(--red),var(--bronze));
}
.arr-bar-fill.engage{background:linear-gradient(90deg,var(--red),var(--bronze-bright))}
.arr-bar-fill.growth{background:linear-gradient(90deg,var(--bronze),var(--bronze-bright))}
.arr-card.gira .arr-bar-fill{background:linear-gradient(90deg,var(--bronze-bright),var(--cream))}

/* ----- Veredito ----- */
.arrancada-verdict{
    margin-top:3.5rem;background:var(--black);color:var(--cream);
    border:4px solid var(--bronze-bright);border-radius:10px;padding:2.5rem 2rem;
    display:flex;gap:1.8rem;align-items:flex-start;position:relative;
    box-shadow:8px 8px 0 var(--red),8px 8px 0 1px var(--bronze-bright);
}
.arrancada-verdict::before{
    content:'';position:absolute;inset:6px;
    background-image:radial-gradient(circle,rgba(196,149,96,.08) 1.5px,transparent 1.5px);
    background-size:14px 14px;pointer-events:none;border-radius:4px;
}
.verdict-icon{
    font-size:3.5rem;line-height:1;flex-shrink:0;position:relative;z-index:2;
    filter:drop-shadow(0 4px 8px rgba(255,100,100,.4));
}
.verdict-text{flex:1;position:relative;z-index:2}
.verdict-text h3{
    font-family:var(--font-display);font-size:1.8rem;color:var(--bronze-bright);
    text-shadow:3px 3px 0 var(--red);letter-spacing:.04em;margin-bottom:1.2rem;
    line-height:1;
}
.verdict-text p{
    font-family:var(--font-body);
    font-size:1rem;line-height:1.65;color:var(--cream);margin-bottom:1rem;
    font-weight:500;
}
.verdict-text strong{color:var(--bronze-bright);font-weight:800}
.verdict-text em{color:var(--bronze-bright);font-style:normal;font-weight:800;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.verdict-quote{
    font-family:var(--font-body) !important;
    font-size:1.3rem !important;font-weight:800 !important;
    line-height:1.3 !important;color:var(--cream) !important;
    margin-top:1.5rem !important;padding:1.2rem 1.4rem !important;
    border:none !important;border-left:5px solid var(--bronze-bright) !important;
    background:rgba(196,149,96,.08);
    border-radius:0 6px 6px 0;
    text-shadow:none !important;letter-spacing:.01em;font-style:italic;
}
.verdict-quote em{
    display:block !important;color:var(--bronze-bright) !important;
    text-shadow:none !important;font-style:italic !important;font-weight:900 !important;
    text-decoration:none !important;font-size:1.15em;margin-top:.3rem;
}

/* ====== MOBILE NAV TOGGLE ====== */
.nav-toggle{
    display:none;width:44px;height:44px;padding:0;background:var(--red);
    border:2px solid var(--cream);border-radius:6px;cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    box-shadow:2px 2px 0 var(--bronze);
}
.nav-toggle span{
    display:block;width:22px;height:3px;background:var(--cream);
    border-radius:2px;transition:.3s var(--easing);
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ====== RESPONSIVE — MOBILE FIRST OVERHAUL ====== */
@media (max-width:1024px){
    .nav{
        display:none;position:fixed;top:var(--header-h);left:0;right:0;
        background:var(--black);border-bottom:3px solid var(--red);
        flex-direction:column;padding:1rem;gap:.2rem;z-index:99;
        box-shadow:0 10px 20px rgba(0,0,0,.4);
        max-height:calc(100vh - var(--header-h));overflow-y:auto;
    }
    .nav.open{display:flex}
    .nav a{
        padding:1rem 1.2rem;width:100%;text-align:center;font-size:1.3rem;
        border-radius:4px;
    }
    .nav a.active::after{display:none}
    .nav a.active{background:var(--red);color:var(--cream)}
    .nav-toggle{display:flex}
    .header-right .cart-btn{padding:.6rem 1rem;font-size:.85rem}
    .arrancada-to{font-size:3.5rem}
    .arrancada-from{font-size:2.2rem}
    .arrancada-pct{font-size:3rem}
    .arrancada-verdict{flex-direction:column;text-align:center}
    .verdict-icon{margin:0 auto}
}

@media (max-width:768px){
    :root{--header-h:64px}
    body{font-size:15px;line-height:1.55}
    .header-container{padding:0 1rem;gap:.6rem}
    .brand-logo{height:36px}
    .header-right .cart-btn{
        padding:.5rem .8rem;font-size:.75rem;border-width:2px;
    }

    /* Hero mobile */
    .hero{padding:calc(var(--header-h) + 1rem) 1rem 0}
    .hero-container{padding:2rem 0 3rem;gap:2rem}
    .hero-flag{font-size:.8rem;padding:.4rem 1rem;margin-bottom:1rem}
    .hero-title{font-size:clamp(2.8rem,12vw,5rem) !important;line-height:.85}
    .hero-desc{font-size:1rem;margin:1.2rem auto 1.5rem}
    .hero-cta{flex-direction:column;align-items:stretch;width:100%;gap:.8rem}
    .btn-pop{
        justify-content:center;padding:.95rem 1.5rem;font-size:1.05rem;
        width:100%;min-height:50px;
    }
    .btn-link{text-align:center;display:block;padding:.8rem 0}
    .hero-stats{gap:.8rem;margin-top:2rem;justify-content:space-around}
    .hero-stat-num{font-size:1.7rem}
    .hero-stat-label{font-size:.65rem}
    .funko-box{width:260px;height:370px}
    .funko-character{font-size:8.5rem}
    .funko-box-window{top:68px;bottom:120px}
    .funko-box-name{bottom:45px}
    .funko-box-name h3{font-size:1.5rem}
    .funko-box-name h3 small{font-size:.75rem}
    .placa-agira{bottom:10px}

    /* Sections base mobile */
    .section,.video-section,.numbers-section,.cidades-section,.virais-section,
    .comments-section,.historia-section,.arrancada-section,.manifesto,.ritual,
    .final-cta,.fans-section{padding:4.5rem 1rem}
    .section-title{font-size:clamp(2.2rem,9vw,4rem) !important;line-height:.9}
    .section-head{margin-bottom:2.5rem}
    .section-sub{font-size:.95rem;line-height:1.55}
    .section-head-tag{font-size:.8rem;padding:.35rem 1rem}

    /* Tagline mobile */
    .tagline-track{font-size:1.2rem;animation-duration:25s}
    .tagline-item{gap:2rem}
    .tagline-item::after{font-size:.9rem}
    .tagline-bar{padding:1rem 0}

    /* Video mobile */
    .video-frame{transform:rotate(0);border-width:3px;box-shadow:6px 6px 0 var(--red),12px 12px 0 var(--bronze)}
    .video-play-btn{width:80px;height:80px;border-width:4px}
    .video-play-btn::before{border-left-width:22px;border-top-width:15px;border-bottom-width:15px;margin-left:5px}
    .video-info{bottom:1rem;left:1rem;max-width:60%}
    .video-info h4{font-size:1.1rem}
    .video-info-tag{font-size:.65rem;padding:.25rem .6rem}
    .video-duration{bottom:1rem;right:1rem;font-size:.8rem;padding:.2rem .5rem}
    .video-cta{flex-direction:column;align-items:stretch;gap:.8rem;margin-top:2rem}
    .video-cta .btn-pop{width:100%;justify-content:center}

    /* Numbers mobile */
    .numbers-grid{grid-template-columns:1fr 1fr;gap:.8rem}
    .number-card{padding:1.3rem .8rem;box-shadow:4px 4px 0 var(--red),8px 8px 0 var(--bronze)}
    .number-card-icon{width:46px;height:46px;font-size:1.3rem;margin-bottom:.6rem}
    .number-card-num{font-size:1.9rem}
    .number-card-label{font-size:.75rem}
    .number-card-sub{font-size:.6rem}
    .number-card-trend{font-size:.65rem;padding:.15rem .4rem;margin-top:.5rem}

    /* Cidades mobile */
    .cidades-grid{grid-template-columns:1fr 1fr;gap:1.2rem .8rem}
    .cidade-card{padding:1.3rem .8rem 1rem}
    .cidade-num{font-size:1.6rem}
    .cidade-name{font-size:.85rem}
    .cidade-uf{font-size:.55rem}
    .regioes-grid{grid-template-columns:repeat(5,1fr);gap:.3rem}
    .regiao-pill{padding:.6rem .3rem}
    .regiao-pct{font-size:1.1rem}
    .regiao-name{font-size:.55rem}

    /* Virais mobile */
    .virais-grid{grid-template-columns:1fr;gap:2rem}
    .viral-card{transform:rotate(0) !important}
    .viral-card:hover{transform:translate(-2px,-2px) !important}
    .viral-emoji{font-size:5rem}
    .viral-title{font-size:1.1rem}
    .viral-meta{font-size:.65rem;flex-wrap:wrap}

    /* Comments mobile */
    .comments-grid{grid-template-columns:1fr;gap:1.2rem}
    .comment-card{transform:rotate(0) !important;padding:1.2rem}
    .comment-card:hover{transform:translateY(-3px) !important}
    .comment-text{font-size:.85rem}

    /* Products mobile */
    .products-grid{grid-template-columns:1fr;gap:2.5rem}
    .product-box{
        transform:rotate(0) !important;width:100%;max-width:340px;
        margin:0 auto;aspect-ratio:340/520;
    }
    .product-box:hover{transform:translate(-2px,-2px) !important}
    .pb-mp-icon{width:44px;height:44px;font-size:1.2rem}
    .pb-mp-label{font-size:.6rem}

    /* Arrancada mobile */
    .arrancada-hero-box{padding:2rem 1.2rem;transform:rotate(0)}
    .arrancada-delta{gap:.5rem}
    .arrancada-from{font-size:1.8rem}
    .arrancada-arrow{font-size:1.8rem}
    .arrancada-to{font-size:3rem;text-shadow:4px 4px 0 var(--black),7px 7px 0 var(--bronze)}
    .arrancada-pct{font-size:2.5rem}
    .arrancada-abs{font-size:.9rem}
    .arrancada-caption{font-size:.85rem;line-height:1.5}
    .arrancada-period{font-size:.7rem;padding:.25rem .8rem}
    .arrancada-h3{font-size:1.4rem}
    .arr-card{padding:1.2rem 1.3rem;transform:rotate(0) !important}
    .arr-card:hover{transform:translate(-2px,-2px) !important}
    .arr-card-head{flex-direction:column;align-items:flex-start;gap:.5rem}
    .arr-card-followers{text-align:left}
    .arr-card-followers strong{font-size:1.8rem}
    .arr-card-name h4{font-size:1.2rem}
    .arr-bar-label{font-size:.7rem}
    .arr-bar-label strong{font-size:.95rem}
    .arrancada-verdict{padding:1.8rem 1.3rem;gap:1.2rem}
    .verdict-icon{font-size:2.8rem}
    .verdict-text h3{font-size:1.35rem;margin-bottom:.8rem}
    .verdict-text p{font-size:.9rem;line-height:1.6}
    .verdict-quote{font-size:1.05rem !important;padding:1rem 1.2rem !important}

    /* Timeline mobile */
    .timeline::before{left:20px}
    .timeline-item{grid-template-columns:auto 1fr;gap:1rem}
    .timeline-item:nth-child(even) .timeline-card,
    .timeline-card{grid-column:2;box-shadow:4px 4px 0 var(--red)}
    .timeline-item:nth-child(even) .timeline-empty,
    .timeline-empty{display:none}
    .timeline-dot{grid-column:1;grid-row:1;width:24px;height:24px;justify-self:center}
    .timeline-card{padding:1.2rem 1.4rem}
    .timeline-card h4{font-size:1.25rem}
    .timeline-card p{font-size:.85rem}
    .timeline-year{font-size:.95rem;padding:.25rem .7rem}

    /* Manifesto mobile */
    .manifesto{padding:5rem 1rem}
    .manifesto-h{font-size:clamp(2.3rem,9vw,4rem) !important}
    .manifesto-text{font-size:1rem}
    .manifesto-quote{font-size:clamp(1.8rem,6vw,3rem) !important}

    /* Ritual mobile */
    .ritual-h{font-size:clamp(2rem,8vw,3.5rem) !important}
    .ritual-icon{width:72px;height:72px;font-size:2.2rem}

    /* Patentes mobile */
    .patente-grid{grid-template-columns:1fr 1fr;gap:1rem}
    .patente-card{padding:1.5rem 1rem}
    .patente-num{width:40px;height:40px;font-size:1.1rem;margin-bottom:.8rem}
    .patente-name{font-size:1.2rem}
    .patente-req{font-size:.55rem;margin-bottom:.8rem}
    .patente-benef{font-size:.75rem}

    /* Final CTA mobile */
    .final-cta-h{font-size:clamp(2.2rem,9vw,3.5rem) !important}
    .final-cta .btn-pop{width:100%;justify-content:center}

    /* Footer mobile */
    .footer{padding:3.5rem 1rem 1.5rem}
    .footer-top{grid-template-columns:1fr;gap:2rem;text-align:center}
    .footer-brand-svg,.brand-logo{margin:0 auto 1rem}
    .footer-tag{max-width:none;margin-left:auto;margin-right:auto}
    .footer-quote{max-width:none;margin:0 auto;border-left:none;border-top:3px solid var(--red);padding:1rem 0 0;text-align:center}
    .footer-col a,.footer-col p{text-align:center}
    .footer-bottom{flex-direction:column;gap:.8rem;text-align:center}

    /* Float buttons mobile */
    .float-buttons{bottom:.8rem;right:.8rem;gap:.6rem}
    .float-btn{width:52px;height:52px}
    .float-btn svg{width:24px;height:24px}

    /* Modal mobile */
    .mp-modal-bg{padding:1rem}
    .mp-modal{padding:1.8rem 1.2rem}
    .mp-modal-title{font-size:1.6rem}
    .mp-modal-title small{font-size:.95rem}
    .mp-modal-emoji{font-size:3.2rem}
    .mp-item{padding:.8rem 1rem}
    .mp-item-icon{width:44px;height:44px;font-size:1.2rem}
    .mp-item-name{font-size:1rem}
    .mp-item-status{font-size:.65rem}
    .mp-item-price{font-size:1.15rem}
    .mp-modal-close{top:-12px;right:-12px;width:36px;height:36px;font-size:1.2rem}
}

@media (max-width:480px){
    .hero-title{font-size:clamp(2.3rem,11vw,4rem) !important}
    .section-title{font-size:clamp(1.9rem,8vw,3.5rem) !important}
    .numbers-grid{grid-template-columns:1fr 1fr}
    .number-card-num{font-size:1.6rem}
    .cidades-grid{grid-template-columns:1fr 1fr}
    .funko-box{width:240px;height:340px}
    .funko-character{font-size:7.5rem}
    .arrancada-to{font-size:2.5rem}
    .arrancada-pct{font-size:2.2rem}
    .arr-card-followers strong{font-size:1.6rem}
    .tagline-track{font-size:1rem}
}

/* iOS safe area */
@supports(padding:max(0px)){
    .float-buttons{
        bottom:max(.8rem,env(safe-area-inset-bottom));
        right:max(.8rem,env(safe-area-inset-right));
    }
    .header-container{
        padding-left:max(1rem,env(safe-area-inset-left));
        padding-right:max(1rem,env(safe-area-inset-right));
    }
}

/* Touch targets — mínimo 44x44 em mobile */
@media (hover:none) and (pointer:coarse){
    .nav a,.btn-pop,.cart-btn,.float-btn,.btn-link,
    .pb-mp-icon,.mp-item{min-height:44px}
    .funko-box,.product-box,.viral-card,.comment-card,
    .cidade-card,.number-card{cursor:default}
}