/* =========================================================
   PORTAL CÃO GUIAMIGO
   FOLHA DE ESTILO PRINCIPAL
   Identidade visual do Portal
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {

    /* Identidade principal do Portal */

    --azul-profundo: #0B3157;
    --azul-principal: #164A78;
    --azul-interacao: #1D6FA5;
    --azul-claro: #EAF3FA;

    /* Cor secundária */

    --verde: #2E7D5B;
    --verde-claro: #EAF5F0;

    /* Texto */

    --texto: #263238;
    --texto-secundario: #59666F;
    --texto-claro: #FFFFFF;

    /* Fundos */

    --fundo: #FFFFFF;
    --fundo-suave: #F6F9FC;
    --fundo-azul: #EEF7FF;

    /* Bordas */

    --borda: #DCE5EC;

    /* Branco */

    --branco: #FFFFFF;

    /* Sombras */

    --sombra-suave:
        0 8px 30px rgba(11, 49, 87, 0.07);

    --sombra-card:
        0 12px 35px rgba(11, 49, 87, 0.11);

    /* Dimensões */

    --raio: 14px;

    --raio-pequeno: 9px;

    --largura: 1180px;

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;

    line-height: 1.75;

    color: var(--texto);

    background: var(--fundo);

}

img {

    max-width: 100%;

    height: auto;

    display: block;

}

a {

    color: var(--azul-principal);

}

a:focus-visible {

    outline:
        3px solid
        var(--azul-interacao);

    outline-offset: 4px;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {

    width:
        min(
            calc(100% - 40px),
            var(--largura)
        );

    margin-inline: auto;

}

.narrow {

    max-width: 900px;

}

.text-center {

    text-align: center;

}


/* =========================================================
   CABEÇALHO DO PORTAL
   ========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255,255,255,0.97);

    border-bottom:
        1px solid
        var(--borda);

    backdrop-filter:
        blur(8px);

}

.header-inner {

    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.site-brand {

    display: flex;

    align-items: center;

    gap: 16px;

    color: var(--texto);

    text-decoration: none;

}

.site-logo {

    width: 155px;

    max-width: 100%;

}

.brand-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.brand-name {

    color:
        var(--azul-profundo);

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;

}

.brand-tagline {

    max-width: 330px;

    color:
        var(--texto-secundario);

    font-size: 13px;

    line-height: 1.35;

}


/* =========================================================
   NAVEGAÇÃO PRINCIPAL
   ========================================================= */

.main-navigation {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    flex-wrap: wrap;

}

.main-navigation a {

    display: inline-block;

    padding:
        9px 13px;

    color:
        var(--texto);

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    border-radius:
        var(--raio-pequeno);

    transition:
        background 0.2s ease,
        color 0.2s ease;

}

.main-navigation a:hover,
.main-navigation a.active {

    color:
        var(--azul-profundo);

    background:
        var(--azul-claro);

}


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

.hero-section {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #EDF5FB 0%,
            #FFFFFF 58%,
            #F3F8FB 100%
        );

    border-bottom:
        1px solid
        var(--borda);

}

.hero-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:
        rgba(29,111,165,0.055);

    top: -260px;

    right: -170px;

}

.hero-content {

    position: relative;

    padding:
        105px 20px 110px;

}

.hero-text {

    max-width: 900px;

}

.section-kicker {

    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--azul-interacao);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}

.hero-section h1 {

    max-width: 850px;

    margin:
        0 0 25px;

    color:
        var(--azul-profundo);

    font-size:
        clamp(36px, 5vw, 58px);

    line-height: 1.14;

}

.hero-description {

    max-width: 780px;

    margin:
        0 0 34px;

    color:
        var(--texto-secundario);

    font-size:
        clamp(18px, 2vw, 21px);

    line-height: 1.7;

}

.hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}


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

.button {

    display: inline-block;

    padding:
        13px 23px;

    border-radius:
        var(--raio-pequeno);

    text-decoration: none;

    font-weight: 800;

    line-height: 1.4;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;

}

.button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(11,49,87,0.15);

}

.button-primary {

    background:
        var(--azul-profundo);

    color:
        var(--branco);

}

.button-primary:hover {

    background:
        var(--azul-principal);

}

.button-secondary {

    background:
        var(--branco);

    color:
        var(--azul-profundo);

    border:
        2px solid
        var(--azul-profundo);

}

.button-secondary:hover {

    background:
        var(--azul-claro);

}


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

.intro-section,
.start-section,
.library-section,
.topics-section,
.accessibility-section {

    padding:
        85px 0;

}

.intro-section {

    background:
        var(--fundo);

}

.start-section {

    background:
        var(--fundo-suave);

}

.library-section {

    background:
        var(--fundo);

}

.topics-section {

    background:
        var(--fundo-suave);

}

.accessibility-section {

    background:
        var(--fundo);

}


/* =========================================================
   TÍTULOS DE SEÇÃO
   ========================================================= */

.section-heading {

    max-width: 850px;

    margin:
        0 0 45px;

}

.section-heading h2 {

    margin:
        0 0 18px;

    color:
        var(--azul-profundo);

    font-size:
        clamp(29px, 4vw, 40px);

    line-height: 1.2;

}

.section-heading p {

    margin: 0;

    color:
        var(--texto-secundario);

    font-size: 18px;

}

h1,
h2,
h3 {

    color:
        var(--azul-profundo);

    line-height: 1.25;

}

h3 {

    font-size:
        23px;

}

p {

    margin:
        0 0 22px;

}


/* =========================================================
   APRESENTAÇÃO
   ========================================================= */

.intro-content {

    max-width: 900px;

}

.intro-content p {

    font-size: 19px;

    color:
        var(--texto);

}

.intro-content p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   CARDS - COMECE POR AQUI
   ========================================================= */

.cards-grid {

    display: grid;

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

    gap: 24px;

}

.content-card {

    height: 100%;

    padding:
        32px;

    background:
        var(--branco);

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

    border-radius:
        var(--raio);

    box-shadow:
        var(--sombra-suave);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}

.content-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--sombra-card);

    border-color:
        #C7D8E4;

}

.card-label {

    display: inline-block;

    margin-bottom: 10px;

    color:
        var(--azul-interacao);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}

.content-card h3 {

    margin:
        0 0 14px;

}

.content-card p {

    color:
        var(--texto-secundario);

}

.card-link {

    display: inline-block;

    margin-top: 5px;

    color:
        var(--azul-principal);

    font-weight: 800;

    text-decoration: none;

}

.card-link:hover {

    color:
        var(--azul-interacao);

    text-decoration: underline;

    text-underline-offset: 4px;

}


/* =========================================================
   BIBLIOTECA - DESTAQUE
   ========================================================= */

.library-highlight {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    padding:
        42px;

    background:
        var(--fundo-azul);

    border:
        1px solid
        #D7E8F4;

    border-radius:
        var(--raio);

    box-shadow:
        var(--sombra-suave);

}

.library-text {

    max-width: 800px;

}

.library-highlight h3 {

    margin:
        0 0 15px;

    font-size:
        clamp(25px, 3vw, 32px);

}

.library-highlight p {

    color:
        var(--texto-secundario);

}


/* =========================================================
   TEMAS DO PORTAL
   ========================================================= */

.topics-grid {

    display: grid;

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

    gap: 24px;

}

.topic-card {

    position: relative;

    padding:
        32px;

    background:
        var(--branco);

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

    border-radius:
        var(--raio);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.topic-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background:
        var(--verde);

    border-radius:
        var(--raio) 0 0 var(--raio);

}

.topic-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--sombra-card);

}

.topic-card h3 {

    margin:
        0 0 12px;

}

.topic-card p {

    color:
        var(--texto-secundario);

}

.topic-card a {

    color:
        var(--azul-principal);

    font-weight: 800;

    text-decoration: none;

}

.topic-card a:hover {

    color:
        var(--azul-interacao);

    text-decoration: underline;

    text-underline-offset: 4px;

}


/* =========================================================
   METODOLOGIA CÃO GUIAMIGO
   ========================================================= */

.methodology-section {

    padding:
        95px 0;

    background:
        var(--azul-profundo);

    color:
        var(--branco);

}

.methodology-content {

    max-width: 850px;

}

.methodology-section .section-kicker {

    color:
        #A9D5EF;

}

.methodology-section h2 {

    margin:
        0 0 22px;

    color:
        var(--branco);

    font-size:
        clamp(30px, 4vw, 42px);

}

.methodology-section p {

    color:
        rgba(255,255,255,0.88);

    font-size: 19px;

}

.methodology-section .button-primary {

    margin-top: 10px;

    background:
        var(--branco);

    color:
        var(--azul-profundo);

}

.methodology-section .button-primary:hover {

    background:
        var(--azul-claro);

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

.accessibility-section .section-heading {

    max-width: 900px;

}

.accessibility-section .section-heading::after {

    content: "";

    display: block;

    width: 70px;

    height: 4px;

    margin-top: 28px;

    background:
        var(--verde);

    border-radius: 4px;

}


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

.final-cta {

    padding:
        90px 0;

    background:
        var(--fundo-azul);

    border-top:
        1px solid
        var(--borda);

}

.cta-content {

    max-width: 800px;

}

.cta-content h2 {

    margin:
        0 0 18px;

    font-size:
        clamp(30px, 4vw, 42px);

}

.cta-content p {

    margin-bottom:
        30px;

    color:
        var(--texto-secundario);

    font-size:
        19px;

}


/* =========================================================
   BIBLIOTECA - COMPATIBILIDADE COM PÁGINAS
   ========================================================= */

.library-card {

    margin:
        30px 0;

    padding:
        28px;

    background:
        var(--branco);

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

    border-radius:
        var(--raio);

    box-shadow:
        var(--sombra-suave);

}

.library-card h3 {

    margin-top: 0;

}

.library-card p {

    color:
        var(--texto-secundario);

}

.library-card p:last-child {

    margin-bottom: 0;

}

.article-button {

    display: inline-block;

    margin-top: 4px;

    color:
        var(--azul-principal);

    font-weight: 800;

    text-decoration: none;

}

.article-button:hover {

    color:
        var(--azul-interacao);

    text-decoration: underline;

    text-underline-offset: 4px;

}


/* =========================================================
   DESTAQUES / ARTIGOS
   ========================================================= */

.featured-grid {

    display: grid;

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

    gap: 24px;

}

.featured-card {

    padding:
        30px;

    background:
        var(--branco);

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

    border-radius:
        var(--raio);

    box-shadow:
        var(--sombra-suave);

}

.featured-category {

    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--azul-interacao);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.featured-card p {

    color:
        var(--texto-secundario);

}

.featured-card a {

    font-weight: 800;

    text-decoration: none;

}


/* =========================================================
   CITAÇÕES / DESTAQUES EDITORIAIS
   ========================================================= */

.article-quote {

    margin:
        35px 0;

    padding:
        25px;

    background:
        var(--fundo-azul);

    border-left:
        5px solid
        var(--verde);

    border-radius:
        0 var(--raio) var(--raio) 0;

}

.article-quote p {

    margin-bottom:
        12px;

    font-size:
        21px;

}

.article-quote p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   RODAPÉ
   ========================================================= */

.site-footer {

    background:
        #082640;

    color:
        rgba(255,255,255,0.9);

}

.footer-content {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 50px;

    align-items: start;

    padding:
        55px 0;

}

.footer-brand {

    max-width: 500px;

}

.footer-brand strong {

    display: block;

    margin-bottom: 10px;

    color:
        var(--branco);

    font-size: 20px;

}

.footer-brand p {

    margin: 0;

    color:
        rgba(255,255,255,0.72);

}

.footer-navigation {

    display: flex;

    flex-direction: column;

    gap: 9px;

}

.footer-navigation a {

    color:
        var(--branco);

    text-decoration: none;

}

.footer-navigation a:hover {

    text-decoration: underline;

    text-underline-offset: 4px;

}

.footer-bottom {

    padding:
        22px 0;

    border-top:
        1px solid
        rgba(255,255,255,0.15);

}

.footer-bottom p {

    margin: 0;

    text-align: center;

    font-size: 14px;

    color:
        rgba(255,255,255,0.62);

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }

    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 950px) {

    .header-inner {

        flex-direction:
            column;

        justify-content:
            center;

        padding:
            20px 0;

    }

    .site-brand {

        justify-content:
            center;

    }

    .main-navigation {

        justify-content:
            center;

    }

    .cards-grid {

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

    }

    .topics-grid {

        grid-template-columns:
            1fr;

    }

    .featured-grid {

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

    }

    .footer-content {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }

    .footer-navigation {

        align-items:
            center;

    }

    .footer-brand {

        margin-inline:
            auto;

    }

}


@media (max-width: 650px) {

    body {

        font-size:
            17px;

    }

    .container {

        width:
            min(
                calc(100% - 28px),
                var(--largura)
            );

    }

    .site-header {

        position:
            relative;

    }

    .site-brand {

        flex-direction:
            column;

        gap:
            8px;

        text-align:
            center;

    }

    .site-logo {

        width:
            180px;

    }

    .brand-name {

        font-size:
            19px;

    }

    .brand-tagline {

        max-width:
            300px;

    }

    .main-navigation {

        gap:
            3px;

    }

    .main-navigation a {

        padding:
            7px 8px;

        font-size:
            14px;

    }

    .hero-content {

        padding:
            70px 10px 75px;

    }

    .hero-section h1 {

        font-size:
            clamp(34px, 10vw, 46px);

    }

    .hero-description {

        font-size:
            18px;

    }

    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }

    .button {

        width:
            100%;

        max-width:
            340px;

        margin-inline:
            auto;

        text-align:
            center;

    }

    .intro-section,
    .start-section,
    .library-section,
    .topics-section,
    .accessibility-section {

        padding:
            65px 0;

    }

    .cards-grid,
    .featured-grid {

        grid-template-columns:
            1fr;

    }

    .content-card,
    .topic-card,
    .featured-card {

        padding:
            27px;

    }

    .library-highlight {

        padding:
            28px 24px;

    }

    .methodology-section {

        padding:
            70px 0;

    }

    .methodology-section p {

        font-size:
            18px;

    }

    .final-cta {

        padding:
            70px 0;

    }

}