/*
Theme Name: Aprende com o Lupi
Theme URI: https://aprendecomlupi.com
Description: Tema filho do GeneratePress para o projeto Aprende com o Lupi.
Author: Dinamika Digital
Template: generatepress
Version: 1.0
Text Domain: aprende-com-lupi
*/


/* =========================================================
   FONTES
   ========================================================= */

@font-face {
    font-family: "Baloo 2";
    src: url("fonts/baloo2-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
}

@font-face {
    font-family: "Kalam";
    src: url("fonts/kalam-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


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

:root {
    --lupi-purple: #5427a9;
    --lupi-purple-light: #6d32d2;
    --lupi-purple-dark: #421c8c;

    --lupi-text: #34216e;

    --lupi-white: #ffffff;
}


/* =========================================================
   TIPOGRAFIA GLOBAL
   ========================================================= */

body {
    font-family: "Nunito", sans-serif;
    color: var(--lupi-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Baloo 2", sans-serif;
}

.main-navigation,
.main-navigation a {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
}


/* =========================================================
   AJUSTES DA HOMEPAGE
   ========================================================= */

.home .site-content {
    padding-top: 0;
}

.home .entry-header {
    display: none;
}

.home .inside-article {
    padding-top: 0;
}


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

.lupi-hero {
    position: relative;

    min-height: 690px;

    overflow: hidden;

    background: #88e5ed;
}


/* =========================================================
   IMAGEM DE FUNDO
   ========================================================= */

.lupi-hero__background {
    position: absolute;

    z-index: 1;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Ligeiramente deslocada para a direita para preservar
     * a zona limpa destinada ao texto.
     */
    object-position: center center;
}


/*
 * Pequena proteção de contraste do lado esquerdo.
 * É muito subtil: não queremos tapar a ilustração.
 */
.lupi-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(184, 245, 243, 0.22) 0%,
            rgba(184, 245, 243, 0.10) 27%,
            rgba(184, 245, 243, 0) 47%
        );
}


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

.lupi-hero__inner {
    position: relative;

    z-index: 5;

    width: min(1420px, calc(100% - 80px));

    min-height: 690px;

    margin: 0 auto;

    display: flex;

    align-items: center;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.lupi-hero__content {
    width: 760px;

    max-width: 52%;
}


/* =========================================================
   LABEL
   ========================================================= */

.lupi-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;

    padding: 9px 19px;

    border-radius: 999px;

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

    color: var(--lupi-purple);

    font-family: "Nunito", sans-serif;

    font-size: 14px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    box-shadow:
        0 7px 20px rgba(64, 35, 130, 0.07);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.lupi-hero__title {
    margin: 0 0 22px;

    font-family: "Baloo 2", sans-serif;

    line-height: 1;
}


/* Aprende com o Lupi */

.lupi-hero__brand {
    display: block;

    margin-bottom: 9px;

    color: #5726a8;

    font-family: "Baloo 2", sans-serif;

    font-size: clamp(52px, 3.7vw, 65px);

    font-weight: 800;

    line-height: 0.95;

    letter-spacing: -0.045em;

    text-shadow:
        0 3px 0 rgba(255, 255, 255, 0.38),
        0 5px 0 rgba(71, 28, 147, 0.10),
        0 9px 14px rgba(66, 29, 136, 0.10);
}


/* Aprender é uma aventura */

.lupi-hero__headline {
    display: block;

    max-width: 700px;

    color: #45208f;

    font-family: "Baloo 2", sans-serif;

    font-size: clamp(33px, 2.35vw, 42px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.035em;

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.28),
        0 4px 0 rgba(65, 24, 135, 0.08);
}


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

.lupi-hero__text {
    max-width: 525px;

    margin: 0 0 30px;

    color: #372470;

    font-family: "Nunito", sans-serif;

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

    font-weight: 700;

    line-height: 1.5;
}


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

.lupi-hero__buttons {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 15px;
}


.lupi-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 56px;

    padding: 13px 27px;

    border-radius: 16px;

    font-family: "Baloo 2", sans-serif;

    font-size: 18px;

    font-weight: 800;

    line-height: 1;

    text-decoration: none;

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


.lupi-button:hover {
    transform: translateY(-3px);
}


/* Principal */

.lupi-button--primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #7a35df,
            #5722ba
        );

    box-shadow:
        0 11px 25px rgba(82, 34, 178, 0.27);
}


.lupi-button--primary:hover {
    color: #ffffff;

    box-shadow:
        0 14px 30px rgba(82, 34, 178, 0.32);
}


/* Secundário */

.lupi-button--secondary {
    color: var(--lupi-purple);

    border: 2px solid var(--lupi-purple-light);

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

    box-shadow:
        0 8px 18px rgba(68, 34, 142, 0.08);
}


.lupi-button--secondary:hover {
    color: var(--lupi-purple-dark);

    background: #ffffff;
}


.lupi-button__play {
    font-size: 14px;
}


/* =========================================================
   ECRÃS INTERMÉDIOS
   ========================================================= */

@media (max-width: 1200px) {

    .lupi-hero__inner {
        width: min(100% - 50px, 1100px);
    }

    .lupi-hero__content {
        max-width: 48%;
    }

    .lupi-hero__background {
        object-position: 54% center;
    }

}


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

@media (max-width: 950px) {

    .lupi-hero {
        min-height: 650px;
    }

    .lupi-hero__inner {
        min-height: 650px;

        width: calc(100% - 50px);
    }

    .lupi-hero__content {
        width: 480px;
        max-width: 53%;
    }

    .lupi-hero__background {
        object-position: 61% center;
    }

    .lupi-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(179, 244, 242, 0.96) 0%,
                rgba(179, 244, 242, 0.85) 35%,
                rgba(179, 244, 242, 0.34) 56%,
                rgba(179, 244, 242, 0) 72%
            );
    }

}


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

@media (max-width: 700px) {

    .lupi-hero {
        min-height: 850px;

        background:
            linear-gradient(
                180deg,
                #b3f2f0 0%,
                #81e1ea 100%
            );
    }


    /*
     * No telemóvel a arte passa para a metade inferior.
     */

    .lupi-hero__background {
        top: auto;
        bottom: 0;

        height: 47%;

        object-fit: cover;

        object-position: 68% center;
    }


    .lupi-hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(179, 244, 242, 1) 0%,
                rgba(179, 244, 242, 1) 43%,
                rgba(179, 244, 242, 0.94) 49%,
                rgba(179, 244, 242, 0.18) 59%,
                rgba(179, 244, 242, 0) 68%
            );
    }


    .lupi-hero__inner {
        min-height: 850px;

        width: calc(100% - 36px);

        align-items: flex-start;

        padding-top: 43px;
    }


    .lupi-hero__content {
        width: 100%;
        max-width: 100%;

        text-align: center;
    }


    .lupi-hero__eyebrow {
        margin-bottom: 18px;

        padding: 8px 13px;

        font-size: 11px;
    }


    .lupi-hero__brand {
        font-size:
            clamp(
                46px,
                14vw,
                61px
            );
    }


    .lupi-hero__headline {
        font-size:
            clamp(
                30px,
                9vw,
                40px
            );
    }


    .lupi-hero__text {
        max-width: 430px;

        margin-left: auto;
        margin-right: auto;

        font-size: 17px;
    }


    .lupi-hero__buttons {
        flex-direction: column;

        justify-content: center;
    }


    .lupi-button {
        width: 100%;

        max-width: 315px;
    }

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

.site-header {
    background: #ffffff;
}

.inside-header {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;

    min-height: 94px;

    padding: 12px 0;

    display: flex;
    align-items: center;
}


/* Logótipo */

.site-logo img,
.site-header .header-image {
    width: auto;
    height: 62px;

    object-fit: contain;
}


/* Navegação */

.main-navigation {
    margin-left: auto;

    background: transparent;
}

.main-navigation .main-nav > ul {
    display: flex;
    align-items: center;

    gap: 8px;
}

.main-navigation .main-nav > ul > li > a {
    position: relative;

    padding: 34px 20px;

    color: #2f215d;

    font-family: "Baloo 2", sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.main-navigation .main-nav > ul > li > a:hover {
    color: #612dc3;
}


/* Linha no hover */

.main-navigation .main-nav > ul > li > a::after {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 22px;

    height: 3px;

    border-radius: 99px;

    background: #6c35d2;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.2s ease;
}


.main-navigation .main-nav > ul > li > a:hover::after {
    transform: scaleX(1);
}


/* Página atual */

.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
    color: #5427a9;
}


.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current_page_item > a::after {
    transform: scaleX(1);
}


/* Evitar fundo do GeneratePress no item ativo */

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
    background: transparent;
}


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

@media (max-width: 1050px) {

    .inside-header {
        width: calc(100% - 40px);
    }

    .main-navigation .main-nav > ul > li > a {
        padding-left: 12px;
        padding-right: 12px;

        font-size: 16px;
    }

}


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

@media (max-width: 768px) {

    .inside-header {
        width: calc(100% - 30px);

        min-height: 76px;

        padding: 8px 0;
    }

    .site-logo img,
    .site-header .header-image {
        height: 52px;
    }

}
/* =========================================================
   FOOTER GLOBAL — APRENDE COM O LUPI
   ========================================================= */

.lupi-parents-section {
    position: relative;
    z-index: 1;
}


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

.lupi-global-footer {
    position: relative;
    z-index: 3;

    width: 100%;

    overflow: visible;

    font-family: "Nunito", sans-serif;

    /*
     * Fundo totalmente branco.
     * Já não usamos a paisagem de céu/relva.
     */
    background: #ffffff;
}


/* =========================================================
   FOLHAS LATERAIS
   ========================================================= */

.lupi-global-footer::before,
.lupi-global-footer::after {
    content: "";

    position: absolute;

    z-index: 20;

    top: -82px;

    width: 230px;
    height: 165px;

    background-image:
        url("images/footer-folhas-lateral.webp");

    background-repeat: no-repeat;

    background-position:
        bottom left;

    background-size:
        contain;

    pointer-events: none;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(55, 105, 44, 0.10)
        );
}


/* Folhas esquerda */

.lupi-global-footer::before {
    left: 0;
}


/* Folhas direita */

.lupi-global-footer::after {
    right: 0;

    transform: scaleX(-1);
}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

.lupi-global-footer__main {
    position: relative;

    min-height: 155px;

    padding:
        43px
        30px
        24px;

    background: #ffffff;
}


/* =========================================================
   CONTENTOR
   ========================================================= */

.lupi-global-footer__container {
    position: relative;

    z-index: 10;

    width: min(1420px, 100%);

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 35px;
}


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

.lupi-global-footer__nav {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 17px;
}


.lupi-global-footer__nav a {
    color: #482095;

    font-family: "Nunito", sans-serif;

    font-size: 13px;
    font-weight: 850;

    line-height: 1;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.lupi-global-footer__nav a:hover {
    color: #7130d0;

    transform: translateY(-2px);
}


/* =========================================================
   MARCA CENTRAL
   ========================================================= */

.lupi-global-footer__brand {
    text-align: center;
}


.lupi-global-footer__brand-title {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;
}


.lupi-global-footer__brand-title strong {
    color: #482095;

    font-family: "Baloo 2", sans-serif;

    font-size: 27px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}


.lupi-global-footer__brand-title span {
    color: #ffc51f;

    font-size: 19px;
}


.lupi-global-footer__domain {
    display: block;

    margin-top: 6px;

    color: #5c4b79;

    font-family: "Nunito", sans-serif;

    font-size: 11px;
    font-weight: 750;

    line-height: 1;
}


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

.lupi-global-footer__message {
    justify-self: end;

    color: #43208c;

    font-family: "Kalam", cursive;

    font-size: 18px;
    font-weight: 400;

    line-height: 1;

    text-align: center;

    transform: rotate(-6deg);
}


.lupi-global-footer__message span {
    display: block;
}


.lupi-global-footer__message strong {
    display: block;

    margin-top: 5px;

    color: #43208c;

    font-family: "Kalam", cursive;

    font-size: 31px;
    font-weight: 400;

    line-height: 1;
}


/* =========================================================
   ÁREA LEGAL
   ========================================================= */

.lupi-global-footer__bottom {
    position: relative;

    z-index: 10;

    border-top:
        1px solid
        rgba(72, 32, 149, 0.10);

    background:
        #faf9fd;
}


.lupi-global-footer__bottom-inner {
    width: min(
        1420px,
        calc(100% - 60px)
    );

    min-height: 48px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.lupi-global-footer__copyright {
    color: #5a477c;

    font-family: "Nunito", sans-serif;

    font-size: 11px;
    font-weight: 750;

    line-height: 1.3;
}


/* =========================================================
   LINKS LEGAIS
   ========================================================= */

.lupi-global-footer__legal {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 18px;
}


.lupi-global-footer__legal a {
    color: #5a477c;

    font-family: "Nunito", sans-serif;

    font-size: 11px;
    font-weight: 750;

    line-height: 1.3;

    text-decoration: none;

    transition:
        color .2s ease;
}


.lupi-global-footer__legal a:hover {
    color: #682bc5;
}


/* =========================================================
   FOOTER NATIVO GENERATEPRESS
   ========================================================= */

.site-footer {
    display: none;
}


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

@media (max-width: 1050px) {

    .lupi-global-footer::before,
    .lupi-global-footer::after {
        top: -66px;

        width: 185px;
        height: 140px;
    }


    .lupi-global-footer__main {
        min-height: 240px;

        padding:
            55px
            30px
            27px;
    }


    .lupi-global-footer__container {
        grid-template-columns: 1fr;

        gap: 20px;

        text-align: center;
    }


    .lupi-global-footer__nav {
        justify-content: center;
    }


    .lupi-global-footer__message {
        justify-self: center;
    }


    .lupi-global-footer__bottom-inner {
        flex-direction: column;

        justify-content: center;

        gap: 9px;

        padding:
            13px
            0;

        text-align: center;
    }


    .lupi-global-footer__legal {
        justify-content: center;
    }

}


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

@media (max-width: 650px) {

    .lupi-global-footer::before,
    .lupi-global-footer::after {
        top: -42px;

        width: 110px;
        height: 90px;
    }


    .lupi-global-footer__main {
        min-height: 270px;

        padding:
            50px
            18px
            24px;
    }


    .lupi-global-footer__container {
        gap: 18px;
    }


    .lupi-global-footer__nav {
        justify-content: center;

        gap:
            10px
            15px;
    }


    .lupi-global-footer__brand-title strong {
        font-size: 23px;
    }


    .lupi-global-footer__message {
        font-size: 17px;
    }


    .lupi-global-footer__bottom-inner {
        width:
            calc(100% - 30px);
    }


    .lupi-global-footer__legal {
        justify-content: center;

        gap:
            8px
            14px;
    }

}