
:root{
    --black:#09090b;
    --ink:#17171a;
    --muted:#66666f;
    --white:#ffffff;
    --surface:#f6f6f8;
    --surface-2:#ececf1;
    --line:rgba(9,9,11,.10);

    /* Paleta original, agora com usos mais controlados */
    --red:#ff0054;
    --red-dark:#c90043;
    --purple:#8b12c9;
    --purple-dark:#4b0870;
    --blue:#00d7e5;
    --orange:#fe6a00;

    --container:1240px;
    --radius:28px;
    --radius-sm:18px;
    --shadow:0 20px 60px rgba(9,9,11,.12);
    --shadow-hover:0 28px 70px rgba(9,9,11,.18);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:92px;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--surface);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
}

body::selection{
    background:var(--red);
    color:var(--white);
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

ul{
    list-style:none;
}

.container{
    width:min(calc(100% - 48px), var(--container));
    margin-inline:auto;
}

main > section{
    padding:110px 0;
    position:relative;
}

.section{
    padding:110px 0;
}

.section-header{
    max-width:900px;
    margin:0 auto 54px;
    text-align:center;
}

.section-header h2{
    display:inline-block;
    margin-bottom:16px;
    font-size:clamp(2rem,4vw,3.6rem);
    line-height:.98;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

.section-header p{
    max-width:720px;
    margin-inline:auto;
    color:var(--muted);
    font-size:1.05rem;
}

/* ================= HEADER ================= */

.header{
    position:fixed;
    inset:0 0 auto;
    z-index:999;
    background:rgba(255,255,255,.92);
    border-bottom:1px solid transparent;
    backdrop-filter:blur(16px);
    transition:.25s ease;
}

.header.scrolled{
    border-color:var(--line);
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.header .container{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    color:var(--black);
    font-size:1.35rem;
    font-weight:950;
    letter-spacing:-.04em;
    white-space:nowrap;
}

.logo::before{
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:8px;
    border-radius:50%;
    background:var(--red);
    box-shadow:14px 0 0 var(--purple);
}

.menu ul{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
}

.menu a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:8px 13px;
    border-radius:999px;
    color:var(--ink);
    font-size:.82rem;
    font-weight:800;
    transition:.2s ease;
}

.menu a:hover,
.menu a:focus-visible{
    background:var(--black);
    color:var(--white);
    transform:translateY(-1px);
}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:0;
    border-radius:14px;
    background:var(--black);
    color:var(--white);
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* ================= HERO ================= */

.hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 30%, rgba(0,215,229,.34), transparent 24%),
        radial-gradient(circle at 15% 85%, rgba(255,0,84,.28), transparent 28%),
        linear-gradient(135deg, #6c08a0 0%, #8b12c9 48%, #bd01fe 100%);
    color:var(--white);
    padding-top:130px;
}

.hero::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    right:-180px;
    bottom:-240px;
    border:80px solid rgba(255,255,255,.07);
    border-radius:50%;
}

.hero-flex{
    display:grid;
    grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);
    align-items:center;
    gap:60px;
}

.hero-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    position:relative;
    z-index:2;
}

.subtitle,
.subtitle2{
    width:max-content;
    max-width:100%;
    border-radius:999px;
    padding:9px 15px;
    background:var(--black);
    color:var(--white);
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.subtitle2{
    background:var(--red);
    font-size:1.05rem;
    padding:10px 18px;
}

.hero-text h2{
    max-width:760px;
    color:var(--white);
    font-size:clamp(2.1rem,5vw,5.2rem);
    line-height:.92;
    letter-spacing:-.065em;
    text-transform:uppercase;
}

.hero-text h1{
    max-width:720px;
    color:var(--black);
    background:var(--white);
    padding:12px 20px;
    border-radius:16px;
    font-size:clamp(1.35rem,2.6vw,2.35rem);
    line-height:1.02;
    letter-spacing:-.04em;
    text-transform:uppercase;
    box-shadow:10px 10px 0 var(--red);
}

.hero-text-container p{
    max-width:650px;
    margin-top:8px;
    padding:22px 24px;
    border-left:5px solid var(--blue);
    border-radius:0 20px 20px 0;
    background:rgba(255,255,255,.94);
    color:var(--ink);
    font-size:1.02rem;
    line-height:1.75;
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.hero-image{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    animation:hero-image-in .7s ease-out both;
}

.hero-image::before{
    content:"MANDI";
    position:absolute;
    right:-2%;
    bottom:4%;
    color:rgba(255,255,255,.09);
    font-size:clamp(6rem,15vw,13rem);
    font-weight:950;
    line-height:.8;
    letter-spacing:-.08em;
    pointer-events:none;
}

.hero-image img{
    position:relative;
    z-index:2;
    width:min(100%,560px);
    max-height:720px;
    object-fit:contain;
    border-radius:34px;
    filter:drop-shadow(0 30px 35px rgba(0,0,0,.30));
    transition:.4s ease;
}

.hero-first-image{
    background:transparent;
}

.hero-image-hover{
    position:absolute !important;
    inset:0 auto 0 50%;
    width:min(100%,560px) !important;
    height:100%;
    transform:translateX(-50%);
    object-fit:cover !important;
    opacity:0;
}

.hero-image:hover .hero-first-image{
    opacity:0;
    transform:scale(1.02);
}

.hero-image:hover .hero-image-hover{
    opacity:1;
}

@keyframes hero-image-in{
    from{opacity:0; transform:translateY(28px) scale(.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
}

/* ================= PROPOSTAS ================= */

.section-propostas{
    background:var(--blue);
}

.section-propostas .section-header h2,
.candidatos-section .section-header h2{
    padding:11px 18px;
    border-radius:16px;
    background:var(--black);
    color:var(--white);
    box-shadow:8px 8px 0 var(--red);
}

.section-propostas .section-header p{
    color:var(--black);
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.card{
    position:relative;
    overflow:hidden;
    min-height:240px;
    padding:25px;
    border:1px solid rgba(9,9,11,.07);
    border-radius:var(--radius-sm);
    background:var(--white);
    box-shadow:0 8px 28px rgba(0,0,0,.08);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.card::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-40px;
    bottom:-45px;
    border-radius:50%;
    background:var(--red);
    opacity:.12;
    transition:.25s ease;
}

.card:hover{
    transform:translateY(-7px);
    box-shadow:var(--shadow-hover);
}

.section-propostas .card:hover{
    background:var(--black);
    color:var(--white);
}

.card span{
    position:relative;
    z-index:1;
    display:inline-flex;
    min-width:48px;
    height:42px;
    padding:0 13px;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    border-radius:12px;
    background:var(--red);
    color:var(--white);
    font-size:.86rem;
    font-weight:950;
}

.card h3{
    position:relative;
    z-index:1;
    margin:0;
    font-size:1.03rem;
    line-height:1.35;
}

.card p{
    display:none;
}

.card img{
    width:100%;
    max-height:330px;
    margin-top:20px;
    object-fit:cover;
    border-radius:18px;
}

/* ================= POR QUE VOTAR ================= */

.section-votar-em-mim{
    background:
        linear-gradient(120deg, var(--red) 0%, #ff236d 55%, var(--orange) 100%);
}

.section-votar-em-mim .section-header h2{
    background:var(--black);
    color:var(--white);
    padding:11px 18px;
    border-radius:16px;
    box-shadow:8px 8px 0 var(--purple);
}

.motivos-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.motivos-container article{
    min-height:290px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:30px;
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow);
    border-top:7px solid var(--black);
}

.motivos-container article::before{
    content:"→";
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    border-radius:50%;
    background:var(--black);
    color:var(--white);
    font-weight:900;
}

.motivos-container h3{
    margin-bottom:15px;
    font-size:1.3rem;
    line-height:1.2;
}

.motivos-container p{
    color:var(--muted);
    line-height:1.75;
}

/* ================= CAMPANHA ================= */

.section-construa-campanha-section{
    background:var(--purple-dark);
    color:var(--white);
}

.section-construa-campanha-section .section-header h2{
    padding:11px 18px;
    border-radius:16px;
    background:var(--white);
    color:var(--black);
    box-shadow:8px 8px 0 var(--red);
}

.section-construa-campanha-section .section-header h3{
    max-width:820px;
    margin:18px auto 10px;
    color:var(--white);
    font-size:1.25rem;
}

.section-construa-campanha-section .section-header p{
    color:rgba(255,255,255,.78);
}

.construa-campanha{
    display:flex;
    justify-content:center;
    gap:24px;
}

.construa-campanha-form,
.construa-campanha-redes{
    width:min(620px,100%);
    padding:34px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);
    background:rgba(255,255,255,.96);
    color:var(--ink);
    box-shadow:var(--shadow);
}

.construa-campanha-redes{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.construa-campanha-redes h3{
    color:var(--red);
    font-size:1.7rem;
}

.construa-campanha-redes h4{
    color:var(--muted);
    font-size:1rem;
}

.construa-campanha-redes .btn{
    width:100%;
    justify-content:flex-start;
    gap:14px;
    padding:16px 18px;
    border-radius:15px;
    background:var(--black);
    color:var(--white);
    transition:.2s ease;
}

.construa-campanha-redes .btn:hover{
    background:var(--red);
    transform:translateX(5px);
}

.construa-campanha-redes .btn i{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.12);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 25px;
    border:0;
    border-radius:999px;
    background:var(--red);
    color:var(--white);
    font-weight:900;
    transition:.2s ease;
}

.btn:hover{
    transform:translateY(-3px);
    background:var(--black);
}

.btn.secondary{
    background:transparent;
    color:var(--red);
    border:2px solid var(--red);
}

/* ================= CONTRIBUA ================= */

.fortalece-campanha-section{
    background:var(--surface);
}

.fortalece-campanha-section .section-header h2{
    padding:11px 18px;
    border-radius:16px;
    background:var(--black);
    color:var(--white);
    box-shadow:8px 8px 0 var(--red);
}

.fortalece-campanha-grid{
    display:grid;
    grid-template-columns:1.1fr .8fr 1fr;
    gap:20px;
    align-items:stretch;
}

.fortalece-card{
    min-height:520px;
    padding:30px;
    border-radius:var(--radius);
    background:var(--black);
    color:var(--white);
    box-shadow:var(--shadow);
}

.fortalece-card-left,
.fortalece-card-right{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.fortalece-card-image{
    padding:0;
    overflow:hidden;
    background:var(--purple);
}

.fortalece-card-image img{
    width:100%;
    height:100%;
    min-height:520px;
    object-fit:cover;
}

.card-top{
    display:flex;
    align-items:center;
    gap:15px;
}

.card-icon{
    width:55px;
    height:55px;
    flex:0 0 55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:var(--red);
    color:var(--white);
}

.card-top h3{
    color:var(--white);
    margin:0;
    font-size:1.25rem;
}

.card-divider{
    display:block;
    width:42px;
    height:4px;
    margin-top:7px;
    border-radius:999px;
    background:var(--red);
}

.quote-card{
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content:space-between;
    gap:25px;
    padding:24px;
    border-radius:20px;
    background:#18181c;
    border:1px solid rgba(255,255,255,.08);
}

.quote-text{
    margin:0;
    color:rgba(255,255,255,.88);
    line-height:1.75;
}

.quote-meta strong{
    display:block;
    margin-bottom:5px;
    color:var(--blue);
}

.quote-meta a{
    color:var(--red);
    word-break:break-word;
}

.quote-meta span{
    color:rgba(255,255,255,.55);
    font-size:.9rem;
}

.fortalece-card-right > p{
    color:rgba(255,255,255,.75);
    line-height:1.75;
}

.action-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:auto;
}

.action-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:#18181c;
    color:var(--white);
    text-align:left;
    font-weight:800;
    transition:.2s ease;
}

.action-item > span:nth-child(2){
    flex:1;
}

.action-item:hover{
    border-color:var(--red);
    transform:translateX(5px);
}

.action-icon{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    border-radius:12px;
    background:var(--red);
    color:var(--white);
}

/* ================= CANDIDATOS ================= */

.candidatos-section{
    background:var(--blue);
}

.candidatos-section .card{
    min-height:0;
    padding:20px;
}

.candidatos-section .card span{
    width:100%;
    max-width:none;
    height:auto;
    min-height:42px;
    border-radius:12px;
    margin-bottom:14px;
    text-align:center;
}

.candidatos-section .card h3{
    min-height:44px;
    margin-bottom:15px;
    font-size:1rem;
}

.candidatos-section .card img{
    aspect-ratio:4/5;
    max-height:none;
    margin-top:10px;
    object-fit:cover;
    background:var(--surface-2);
}

.candidatos-section .card:hover{
    background:var(--white);
}

/* ================= VÍDEOS / CARROSSEL ================= */

.videos-section{
    background:var(--blue);
}

.videos-section .section-header h2{
    background:var(--black);
    color:var(--white);
    padding:11px 18px;
    border-radius:16px;
}

.videos-carousel{
    display:flex;
    align-items:center;
    gap:12px;
}

.carousel-track{
    display:flex;
    gap:24px;
    width:100%;
    padding:20px 8vw;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.carousel-track::-webkit-scrollbar{
    display:none;
}

.carousel-slide{
    min-width:min(70%,620px);
    flex:0 0 min(70%,620px);
    scroll-snap-align:center;
    opacity:.7;
    transition:.25s ease;
}

.carousel-slide.active{
    opacity:1;
    transform:scale(1.02);
    box-shadow:var(--shadow);
}

.carousel-slide iframe{
    width:100%;
    height:360px;
    display:block;
    border:0;
    border-radius:22px;
}

.carousel-btn{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:var(--black);
    color:var(--white);
    font-size:1.5rem;
}

.carousel-btn:hover{
    background:var(--red);
}

/* ================= FOOTER ================= */

.footer{
    padding:28px 0;
    background:var(--black);
    color:rgba(255,255,255,.72);
}

.footer .container{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.footer p{
    margin:0;
    font-size:.9rem;
}

/* ================= RESPONSIVO ================= */

@media (max-width:1100px){
    .menu ul{
        gap:2px;
    }

    .menu a{
        padding-inline:9px;
        font-size:.76rem;
    }

    .hero-flex{
        grid-template-columns:1fr .8fr;
        gap:35px;
    }

    .hero-image{
        min-height:540px;
    }

    .cards{
        grid-template-columns:repeat(3,1fr);
    }

    .fortalece-campanha-grid{
        grid-template-columns:1fr 1fr;
    }

    .fortalece-card-image{
        grid-column:1 / -1;
        order:-1;
        max-height:560px;
    }

    .fortalece-card-image img{
        min-height:460px;
        max-height:560px;
    }
}

@media (max-width:900px){
    main > section,
    .section{
        padding:82px 0;
    }

    .container{
        width:min(calc(100% - 32px), var(--container));
    }

    .header .container{
        min-height:72px;
    }

    .menu-toggle{
        display:flex;
    }

    .menu ul{
        display:none;
        position:absolute;
        top:calc(100% + 8px);
        right:16px;
        width:min(330px,calc(100vw - 32px));
        padding:10px;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        background:var(--white);
        border:1px solid var(--line);
        border-radius:18px;
        box-shadow:var(--shadow);
    }

    .menu.is-open ul{
        display:flex;
    }

    .menu a{
        width:100%;
        justify-content:flex-start;
        padding:12px 14px;
        font-size:.9rem;
    }

    .hero{
        padding-top:105px;
    }

    .hero-flex{
        grid-template-columns:1fr;
        gap:25px;
    }

    .hero-text{
        align-items:flex-start;
    }

    .hero-text h2{
        max-width:800px;
    }

    .hero-image{
        min-height:420px;
    }

    .hero-image img{
        max-height:520px;
    }

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

    .motivos-container{
        grid-template-columns:1fr;
    }

    .motivos-container article{
        min-height:0;
    }

    .fortalece-campanha-grid{
        grid-template-columns:1fr;
    }

    .fortalece-card-image{
        grid-column:auto;
    }
}

@media (max-width:600px){
    main > section,
    .section{
        padding:68px 0;
    }

    .section-header{
        margin-bottom:38px;
    }

    .section-header h2{
        font-size:2rem;
    }

    .hero{
        min-height:auto;
        padding-top:105px;
    }

    .hero-text{
        gap:14px;
    }

    .subtitle{
        font-size:.68rem;
    }

    .subtitle2{
        font-size:.95rem;
    }

    .hero-text h2{
        font-size:2.65rem;
    }

    .hero-text h1{
        font-size:1.25rem;
        box-shadow:6px 6px 0 var(--red);
    }

    .hero-text-container p{
        padding:18px;
        font-size:.94rem;
    }

    .hero-image{
        min-height:350px;
    }

    .hero-image::before{
        font-size:6rem;
    }

    .cards{
        grid-template-columns:1fr;
        gap:14px;
    }

    .card{
        min-height:0;
        padding:22px;
    }

    .fortalece-card{
        min-height:0;
        padding:22px;
    }

    .fortalece-card-image img{
        min-height:420px;
    }

    .construa-campanha-form,
    .construa-campanha-redes{
        padding:24px;
    }

    .carousel-btn{
        display:none;
    }

    .carousel-track{
        padding-inline:3vw;
    }

    .carousel-slide{
        min-width:90%;
        flex-basis:90%;
    }

    .carousel-slide iframe{
        height:230px;
        border-radius:16px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}
