:root{
    --blue:#0b4f8a;
    --blue2:#073766;
    --blue3:#0e69ad;
    --yellow:#ffdf00;
    --green:#009c3b;
    --ink:#122235;
    --muted:#667485;
    --bg:#f5f8fb;
    --white:#fff;
    --line:#e4eaf0;
    --shadow:0 18px 50px rgba(18,34,53,.11);
}

/* =========================================================
   BASE
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Open Sans',Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    overflow-x:hidden;
}

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

a{
    color:inherit;
}

/*
   CONTAINER PRINCIPAL

   Antes estava limitado a 1180px.
   Agora aproveita melhor telas Full HD e maiores.
*/
.container{
    width:calc(100% - 80px);
    max-width:1500px;
    margin:0 auto;
}


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

.site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(18,34,53,.08);
}

.nav-wrap{
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
}

.brand img{
    width:190px;
    max-height:60px;
    object-fit:contain;
    object-position:left center;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.main-nav a{
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:.2s;
}

.main-nav a:hover{
    color:var(--blue3);
}

.nav-cta{
    background:var(--green);
    color:#fff!important;
    padding:12px 17px;
    border-radius:999px;
}

.nav-toggle{
    display:none;
    border:0;
    background:none;
    font-size:27px;
    cursor:pointer;
}


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

.hero{
    min-height:760px;
    padding-top:84px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            115deg,
            #fff 0%,
            #f5f9fd 50%,
            #e8f2fa 100%
        );
}


/*
   Círculo azul grande
*/
.hero:before{
    content:"";
    position:absolute;

    right:-150px;
    top:75px;

    width:680px;
    height:680px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--blue3),
            var(--blue2)
        );
}


/*
   Faixa amarela
*/
.hero:after{
    content:"";
    position:absolute;

    right:2%;
    bottom:-100px;

    width:520px;
    height:190px;

    background:var(--yellow);

    transform:skew(-28deg);

    opacity:.97;
}


/*
   Hero ganha largura maior que o restante
*/
.hero .container{
    width:calc(100% - 80px);
    max-width:1600px;
}


/*
   GRID HERO
*/
.hero-grid{
    min-height:676px;

    display:grid;

    grid-template-columns:
        minmax(500px,.92fr)
        minmax(600px,1.08fr);

    gap:40px;

    align-items:center;

    position:relative;
    z-index:2;
}


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

.hero-copy{
    position:relative;
    z-index:4;

    padding-left:0;
}

.eyebrow,
.kicker{
    display:inline-block;

    font-size:11px;

    letter-spacing:2.4px;

    font-weight:700;

    color:var(--blue3);
}

.hero h1{
    font-size:70px;

    line-height:.98;

    letter-spacing:-3px;

    margin:14px 0 22px;

    font-weight:700;

    max-width:700px;
}

.hero h1 span{
    color:var(--blue);
}

.hero-copy>p{
    font-size:18px;

    line-height:1.7;

    color:var(--muted);

    max-width:620px;
}


/* =========================================================
   BOTÕES HERO
========================================================= */

.hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:30px;
}

.btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:0 24px;

    border-radius:9px;

    text-decoration:none;

    font-weight:700;

    font-size:13px;

    transition:.2s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:var(--blue);

    color:#fff;

    box-shadow:
        0 12px 30px rgba(11,79,138,.25);
}

.btn-ghost{
    background:#fff;

    border:1px solid var(--line);
}


/* =========================================================
   NÚMERO CANDIDATO
========================================================= */

.hero-number{
    display:flex;

    align-items:flex-end;

    gap:14px;

    margin-top:35px;
}

.hero-number small{
    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--muted);

    padding-bottom:8px;
}

.hero-number strong{
    font-size:48px;

    color:var(--blue);

    line-height:1;
}


/* =========================================================
   FOTO CANDIDATO
========================================================= */

.hero-photo-wrap{
    height:676px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    overflow:visible;
}


/*
   Aumentamos a presença da foto.
*/
.hero-photo{
    position:relative;

    z-index:4;

    max-height:665px;

    width:auto;

    max-width:none;

    object-fit:contain;

    filter:
        drop-shadow(
            0 25px 35px rgba(0,0,0,.18)
        );
}


/* =========================================================
   ANEL FOTO
========================================================= */

.hero-ring{
    position:absolute;

    z-index:1;

    width:470px;

    height:470px;

    border-radius:50%;

    border:
        60px solid rgba(255,255,255,.18);

    top:95px;

    right:2%;
}


/* =========================================================
   TAG EXPERIÊNCIA
========================================================= */

.hero-tag{
    position:absolute;

    z-index:5;

    left:0;

    bottom:52px;

    background:#fff;

    padding:15px 22px;

    border-radius:13px;

    box-shadow:var(--shadow);
}

.hero-tag b,
.hero-tag span{
    display:block;
}

.hero-tag b{
    color:var(--blue);

    font-size:18px;
}

.hero-tag span{
    font-size:11px;

    color:var(--muted);

    margin-top:3px;
}


/* =========================================================
   FAIXA INTRO
========================================================= */

.intro-strip{
    position:relative;

    z-index:3;

    background:#fff;

    border-bottom:
        1px solid var(--line);
}

.strip-grid{
    display:grid;

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

.strip-grid>div{
    padding:27px 28px;

    border-right:
        1px solid var(--line);
}

.strip-grid>div:first-child{
    border-left:
        1px solid var(--line);
}

.strip-grid b,
.strip-grid span{
    display:block;
}

.strip-grid b{
    font-size:14px;
}

.strip-grid span{
    font-size:12px;

    color:var(--muted);

    margin-top:5px;
}


/* =========================================================
   SEÇÕES
========================================================= */

.section{
    padding:100px 0;
}


/* =========================================================
   SOBRE
========================================================= */

.about{
    background:#fff;
}

.about-grid{
    display:grid;

    grid-template-columns:
        .86fr 1.14fr;

    gap:78px;

    align-items:center;
}

.about-media{
    position:relative;
}

.about-media>img{
    width:100%;

    height:570px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:var(--shadow);
}

.about-badge{
    position:absolute;

    right:-26px;

    bottom:30px;

    background:var(--blue);

    color:#fff;

    padding:18px 25px;

    border-radius:12px;
}

.about-badge strong,
.about-badge span{
    display:block;
}

.about-badge strong{
    font-size:22px;
}

.about-badge span{
    font-size:10px;

    opacity:.8;
}


/* =========================================================
   TÍTULOS
========================================================= */

.section-copy h2,
.section-head h2,
.proposal-head h2{
    font-size:42px;

    line-height:1.15;

    letter-spacing:-1.4px;

    margin:10px 0 20px;
}

.section-copy p,
.section-head p{
    font-size:16px;

    line-height:1.8;

    color:var(--muted);
}

.text-link{
    display:inline-block;

    margin-top:12px;

    color:var(--blue);

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   BANDEIRAS
========================================================= */

.flags{
    background:var(--bg);
}

.section-head{
    text-align:center;

    max-width:720px;

    margin:0 auto 48px;
}

.cards-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.flag-card{
    background:#fff;

    border:
        1px solid var(--line);

    border-radius:16px;

    padding:30px;

    min-height:235px;

    transition:.25s;
}

.flag-card:hover{
    transform:translateY(-5px);

    box-shadow:var(--shadow);

    border-color:transparent;
}

.flag-icon{
    width:52px;

    height:52px;

    display:grid;

    place-items:center;

    background:#eaf3fa;

    border-radius:13px;

    font-size:25px;
}

.flag-card h3{
    font-size:18px;

    margin:19px 0 10px;
}

.flag-card p{
    font-size:13px;

    line-height:1.75;

    color:var(--muted);

    margin:0;
}


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

.proposals-home{
    background:
        linear-gradient(
            135deg,
            var(--blue2),
            var(--blue)
        );

    color:#fff;
}

.light{
    color:#80c5ef;
}

.proposal-head{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:35px;
}

.proposal-head h2{
    max-width:600px;

    margin-bottom:0;
}

.btn-light,
.btn-white{
    background:#fff;

    color:var(--blue);
}

.proposal-list{
    border-top:
        1px solid rgba(255,255,255,.16);
}

.proposal-row{
    display:grid;

    grid-template-columns:
        85px 1fr;

    gap:15px;

    padding:27px 0;

    border-bottom:
        1px solid rgba(255,255,255,.16);
}

.proposal-row>span{
    font-size:28px;

    color:#78bce8;

    font-weight:700;
}

.proposal-row h3{
    font-size:18px;

    margin:0 0 7px;
}

.proposal-row p{
    margin:0;

    color:#c6d7e4;

    font-size:13px;

    line-height:1.65;

    max-width:850px;
}


/* =========================================================
   FRASE
========================================================= */

.quote-band{
    padding:75px 0;

    background:#fff;
}

.quote-grid{
    display:grid;

    grid-template-columns:
        90px 1fr 210px;

    gap:25px;

    align-items:center;
}

.quote-mark{
    font-size:110px;

    line-height:.5;

    color:var(--yellow);

    font-weight:700;
}

.quote-grid blockquote{
    font-size:27px;

    line-height:1.5;

    margin:0;

    font-weight:700;
}

.signature{
    text-align:right;

    font-weight:700;

    color:var(--blue);
}

.signature span{
    display:block;

    font-size:11px;

    color:var(--muted);

    margin-top:3px;
}


/* =========================================================
   NOTÍCIAS
========================================================= */

.news{
    background:var(--bg);
}

.news-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}

.news-card{
    background:#fff;

    border-radius:15px;

    overflow:hidden;

    border:
        1px solid var(--line);
}

.news-card img{
    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    background:#dbe7f0;
}

.news-body{
    padding:23px;
}

.news-body small{
    font-size:10px;

    color:var(--blue3);

    font-weight:700;

    letter-spacing:1px;
}

.news-body h3{
    font-size:18px;

    line-height:1.4;

    margin:8px 0 10px;
}

.news-body p{
    font-size:13px;

    line-height:1.65;

    color:var(--muted);

    margin:0;
}

.center{
    text-align:center;

    margin-top:35px;
}

.btn-outline{
    border:
        1px solid #cfd8e2;

    background:#fff;

    color:var(--blue);
}


/* =========================================================
   CTA
========================================================= */

.cta-band{
    background:
        linear-gradient(
            105deg,
            #0871b5,
            var(--blue)
        );

    color:#fff;

    padding:65px 0;
}

.cta-grid{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}

.cta-grid span{
    font-size:10px;

    letter-spacing:2px;

    font-weight:700;

    color:#a9daf7;
}

.cta-grid h2{
    font-size:34px;

    margin:7px 0;
}

.cta-grid p{
    margin:0;

    color:#d4e5f1;
}


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

.site-footer{
    background:#071c30;

    color:#9fb0bf;

    padding:50px 0 25px;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:45px;
}

.footer-logo{
    width:180px;

    filter:brightness(0) invert(1);

    margin-bottom:17px;
}

.footer-grid h3{
    color:#fff;

    font-size:13px;
}

.footer-grid a,
.footer-grid p{
    display:block;

    text-decoration:none;

    font-size:12px;

    line-height:2;
}

.legal{
    border-top:
        1px solid rgba(255,255,255,.1);

    margin-top:35px;

    padding-top:22px;

    text-align:center;
}

.legal p{
    font-size:10px;

    line-height:1.6;

    margin:4px 0;
}

.legal-note{
    opacity:.6;
}


/* =========================================================
   WHATSAPP
========================================================= */

.float-whatsapp{
    position:fixed;

    right:22px;

    bottom:22px;

    z-index:900;

    width:58px;

    height:58px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:var(--green);

    color:#fff;

    text-decoration:none;

    font-size:28px;

    box-shadow:
        0 10px 28px rgba(0,156,59,.32);

    transition:.2s;
}

.float-whatsapp:hover{
    transform:
        translateY(-3px)
        scale(1.04);
}


/* =========================================================
   PÁGINAS INTERNAS
========================================================= */

.inner-main{
    padding-top:84px;
}

.inner-hero{
    padding:100px 0 85px;

    background:
        linear-gradient(
            125deg,
            var(--blue2),
            var(--blue)
        );

    color:#fff;
}

.inner-hero h1{
    font-size:52px;

    max-width:800px;

    line-height:1.08;

    margin:10px 0 15px;
}

.inner-hero p{
    max-width:720px;

    color:#cfe0ec;

    line-height:1.7;
}


/* =========================================================
   PROPOSTAS PÁGINA
========================================================= */

.proposal-page-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:20px;
}

.proposal-page-card{
    border:
        1px solid var(--line);

    border-radius:16px;

    padding:32px;
}

.proposal-page-card>span{
    font-size:28px;

    font-weight:700;

    color:var(--blue3);
}

.proposal-page-card h2{
    font-size:20px;

    margin:15px 0 10px;
}

.proposal-page-card p{
    color:var(--muted);

    font-size:14px;

    line-height:1.75;
}


/* =========================================================
   ANIMAÇÃO
========================================================= */

.reveal{
    opacity:0;

    transform:
        translateY(18px);

    transition:.55s ease;
}

.reveal.visible{
    opacity:1;

    transform:none;
}


/* =========================================================
   TELAS MUITO GRANDES
========================================================= */

@media(min-width:1800px){

    .container{
        max-width:1500px;
    }

    .hero .container{
        max-width:1600px;
    }

    .hero-grid{
        grid-template-columns:
            .9fr 1.1fr;
    }

    .hero h1{
        font-size:72px;
    }

    .hero-photo{
        max-height:680px;
    }

    .hero-photo-wrap{
        height:690px;
    }

    .hero:before{
        width:720px;
        height:720px;

        right:-160px;
    }

}


/* =========================================================
   DESKTOP INTERMEDIÁRIO
========================================================= */

@media(max-width:1400px){

    .container,
    .hero .container{
        width:calc(100% - 50px);
    }

    .hero-grid{
        grid-template-columns:
            1fr 1fr;

        gap:20px;
    }

    .hero h1{
        font-size:62px;
    }

    .hero-photo{
        max-height:625px;
    }

}


/* =========================================================
   NOTEBOOK
========================================================= */

@media(max-width:1200px){

    .container,
    .hero .container{
        width:92%;
    }

    .main-nav{
        gap:16px;
    }

    .main-nav a{
        font-size:12px;
    }

    .hero-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .hero h1{
        font-size:56px;
    }

    .hero-photo{
        max-height:590px;
    }

    .hero-photo-wrap{
        height:610px;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:900px){

    .container,
    .hero .container{
        width:92%;
    }


    /* MENU */

    .nav-toggle{
        display:block;
    }

    .main-nav{
        display:none;

        position:absolute;

        top:84px;

        left:0;

        right:0;

        background:#fff;

        padding:16px 4%;

        box-shadow:
            0 18px 35px rgba(0,0,0,.1);

        flex-direction:column;

        align-items:stretch;
    }

    .main-nav.open{
        display:flex;
    }

    .brand img{
        width:160px;
    }


    /* HERO */

    .hero{
        min-height:auto;
    }

    .hero-grid{
        grid-template-columns:1fr;

        gap:0;
    }

    .hero-copy{
        padding:70px 0 10px;
    }

    .hero h1{
        font-size:48px;

        letter-spacing:-2px;

        max-width:600px;
    }

    .hero-copy>p{
        max-width:550px;
    }


    /* FOTO */

    .hero-photo-wrap{
        height:520px;
    }

    .hero-photo{
        max-height:510px;

        max-width:100%;
    }


    /* FUNDO HERO */

    .hero:before{
        width:500px;

        height:500px;

        right:-240px;

        top:440px;
    }

    .hero:after{
        display:none;
    }


    .hero-ring{
        width:340px;

        height:340px;

        right:50%;

        transform:
            translateX(50%);

        top:90px;
    }

    .hero-tag{
        left:5px;
    }


    /* STRIP */

    .strip-grid{
        grid-template-columns:1fr;
    }

    .strip-grid>div,
    .strip-grid>div:first-child{
        border-left:0;

        border-right:0;

        border-bottom:
            1px solid var(--line);
    }


    /* CARDS */

    .cards-grid,
    .news-grid,
    .proposal-page-grid{
        grid-template-columns:1fr;
    }


    /* SOBRE */

    .about-grid{
        grid-template-columns:1fr;

        gap:40px;
    }

    .about-media>img{
        height:auto;

        aspect-ratio:4/5;
    }

    .about-badge{
        right:12px;
    }


    /* SEÇÕES */

    .section{
        padding:75px 0;
    }

    .section-copy h2,
    .section-head h2,
    .proposal-head h2{
        font-size:34px;
    }


    /* PROPOSTAS */

    .proposal-head{
        align-items:flex-start;

        flex-direction:column;
    }

    .proposal-row{
        grid-template-columns:
            58px 1fr;
    }


    /* FRASE */

    .quote-grid{
        grid-template-columns:1fr;
    }

    .quote-mark{
        font-size:80px;
    }

    .quote-grid blockquote{
        font-size:22px;
    }

    .signature{
        text-align:left;
    }


    /* CTA */

    .cta-grid{
        align-items:flex-start;

        flex-direction:column;
    }


    /* FOOTER */

    .footer-grid{
        grid-template-columns:1fr;
    }


    /* INTERNAS */

    .inner-hero h1{
        font-size:40px;
    }

    .inner-hero{
        padding:75px 0;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:560px){

    .container,
    .hero .container{
        width:calc(100% - 30px);
    }

    .nav-wrap{
        height:76px;
    }

    .brand img{
        width:145px;
    }


    /* HERO */

    .hero{
        padding-top:76px;
    }

    .hero-copy{
        padding-top:50px;
    }

    .hero h1{
        font-size:42px;

        line-height:1;

        letter-spacing:-2px;
    }

    .hero-copy>p{
        font-size:16px;
    }


    /* BOTÕES */

    .hero-actions{
        gap:9px;
    }

    .hero-actions .btn{
        width:100%;
    }


    /* FOTO */

    .hero-photo-wrap{
        height:430px;
    }

    .hero-photo{
        max-height:425px;
    }


    /* NÚMERO */

    .hero-number{
        margin-top:28px;
    }

    .hero-number strong{
        font-size:40px;
    }


    /* TAG */

    .hero-tag{
        left:0;

        bottom:25px;

        padding:12px 17px;
    }

    .hero-tag b{
        font-size:16px;
    }


    /* TÍTULOS */

    .section-copy h2,
    .section-head h2,
    .proposal-head h2{
        font-size:30px;
    }


    /* QUOTE */

    .quote-grid blockquote{
        font-size:20px;
    }


    /* CTA */

    .cta-grid h2{
        font-size:29px;
    }


    /* PÁGINAS INTERNAS */

    .inner-hero h1{
        font-size:34px;
    }

}

/* =========================================================
   AJUSTE FINAL - APROVEITAR TODA A LARGURA
========================================================= */

/* Header ocupa melhor a tela */
.site-header .container{
    width:100%;
    max-width:none;
    padding-left:55px;
    padding-right:55px;
}

/* Hero ocupa toda a largura */
.hero .container{
    width:100%;
    max-width:none;
    padding-left:55px;
    padding-right:55px;
}

/* Distribuição do hero */
.hero-grid{
    width:100%;
    grid-template-columns:48% 52%;
    gap:0;
}

/* Texto mais para a esquerda */
.hero-copy{
    padding-left:0;
    max-width:720px;
}

/* Foto aproveitando melhor o lado direito */
.hero-photo-wrap{
    width:100%;
    justify-content:center;
}

/* Faixa inferior também mais larga */
.intro-strip .container{
    width:100%;
    max-width:none;
    padding-left:55px;
    padding-right:55px;
}

/* =========================================================
   FULL HD / MONITORES GRANDES
========================================================= */

@media(min-width:1600px){

    .site-header .container,
    .hero .container,
    .intro-strip .container{
        padding-left:70px;
        padding-right:70px;
    }

    .hero-grid{
        grid-template-columns:49% 51%;
    }

    .hero h1{
        font-size:70px;
    }

    .hero-photo{
        max-height:675px;
    }
}


/* =========================================================
   NOTEBOOK
========================================================= */

@media(max-width:1200px){

    .site-header .container,
    .hero .container,
    .intro-strip .container{
        width:92%;
        padding-left:0;
        padding-right:0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .site-header .container,
    .hero .container,
    .intro-strip .container{
        width:92%;
        padding-left:0;
        padding-right:0;
    }

    .hero-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   MATERIAIS DE CAMPANHA
========================================================= */

.materials{
    background:#f5f8fb;
}

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

.material-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px;
    position:relative;
    transition:.25s ease;
    min-height:315px;
    display:flex;
    flex-direction:column;
}

.material-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
    border-color:transparent;
}

.material-icon{
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#eaf3fa;
    font-size:27px;
    margin-bottom:22px;
}

.material-content{
    display:flex;
    flex-direction:column;
    flex:1;
}

.material-type{
    color:var(--blue3);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:7px;
}

.material-card h3{
    margin:0 0 12px;
    font-size:20px;
    color:var(--ink);
}

.material-card p{
    margin:0 0 24px;
    color:var(--muted);
    line-height:1.7;
    font-size:13px;
}

.material-download{
    margin-top:auto;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:0 17px;
    background:#f5f8fb;
    border-radius:10px;
    text-decoration:none;
    color:var(--blue);
    font-size:13px;
    font-weight:700;
    transition:.2s;
}

.material-download span{
    width:31px;
    height:31px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--blue);
    color:#fff;
    font-size:17px;
}

.material-download:hover{
    background:#e8f2fa;
}

.materials-info{
    margin-top:35px;
    padding:30px 35px;
    border-radius:17px;
    background:#fff;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.materials-info strong{
    display:block;
    font-size:18px;
    color:var(--ink);
}

.materials-info p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}


/* TABLET */

@media(max-width:1000px){

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

}


/* CELULAR */

@media(max-width:650px){

    .materials-grid{
        grid-template-columns:1fr;
    }

    .material-card{
        min-height:auto;
    }

    .materials-info{
        flex-direction:column;
        align-items:flex-start;
    }

    .materials-info .btn{
        width:100%;
    }

}