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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #252525;
    background: #ffffff;
}

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

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

:root {

    --yellow: #f7d500;
    --yellow-light: #fff4a8;

    --red: #d92f1f;

    --orange: #ef5b2a;

    --dark: #202020;

    --gray: #f4f4f2;

    --green: #177c59;

    --max: 1180px;
}


/* =====================================================
   GERAL
===================================================== */

.container {

    width: 90%;
    max-width: var(--max);
    margin: auto;
}

.section-label {

    display: inline-block;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;

    color: #555;
}

h1,
h2,
h3 {

    font-family: 'Anton', sans-serif;

    font-weight: 400;
}

h2 {

    font-size: clamp(45px, 5vw, 70px);

    line-height: .95;

    letter-spacing: .5px;
}

h2 span {

    color: var(--red);
}

p {

    line-height: 1.8;

    font-size: 14px;
}


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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 17px 28px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    transition: .25s;

    cursor: pointer;
}

.btn:hover {

    transform: translateY(-3px);
}

.btn-primary {

    background: var(--red);

    color: white;

    box-shadow:
        0 10px 25px rgba(217,47,31,.25);
}

.btn-dark {

    background: var(--dark);

    color: white;
}

.btn-outline {

    border: 2px solid var(--dark);

    color: var(--dark);

    background: transparent;
}

.btn-buy {

    width: 100%;

    background: var(--green);

    color: white;

    font-size: 14px;

    padding: 20px;

    box-shadow:
        0 10px 25px rgba(23,124,89,.25);
}


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

.hero {

    min-height: 720px;

    background:

        radial-gradient(
            circle at 80% 40%,
            #fff4a0 0,
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #fffde9,
            #ffffff
        );

    overflow: hidden;
}

.hero-container {

    min-height: 720px;

    display: flex;

    align-items: center;

    position: relative;
}


/* Logo */

.logo {

    position: absolute;

    top: 25px;
    left: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}

.logo img {

    width: 45px;
    height: 45px;

    object-fit: contain;
}


/* Conteúdo */

.hero-content {

    width: 54%;

    padding-top: 40px;

    position: relative;

    z-index: 2;
}

.eyebrow {

    display: inline-block;

    padding: 8px 14px;

    background: var(--yellow);

    color: var(--dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 20px;
}

.hero h1 {

    font-size: clamp(65px, 8vw, 105px);

    line-height: .85;

    max-width: 700px;

    margin-bottom: 20px;
}

.hero h1 span {

    color: var(--red);
}

.hero h2 {

    font-family: 'Montserrat', sans-serif;

    font-size: clamp(24px, 3vw, 36px);

    font-weight: 800;

    margin-bottom: 25px;
}

.hero-description {

    max-width: 570px;

    font-size: 16px;

    line-height: 1.7;

    margin-bottom: 30px;
}

.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.hero-info {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 25px;

    font-size: 11px;

    font-weight: 700;
}


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

.hero-product {

    width: 46%;

    height: 620px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}

.ebook-wrapper {

    position: relative;

    z-index: 2;

    transform:

        perspective(1000px)
        rotateY(-10deg)
        rotateZ(3deg);

    filter:
        drop-shadow(
            25px 30px 25px rgba(0,0,0,.25)
        );

    transition: .4s;
}

.ebook-wrapper:hover {

    transform:

        perspective(1000px)
        rotateY(0deg)
        rotateZ(0deg)
        scale(1.03);
}

.ebook-cover {

    width: 360px;

    max-height: 520px;

    object-fit: contain;

    border-radius: 4px;
}


/* Badge */

.floating-card {

    position: absolute;

    right: 5%;

    bottom: 100px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: var(--yellow);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    z-index: 5;

    transform: rotate(8deg);

    box-shadow:
        0 15px 30px rgba(0,0,0,.15);
}

.floating-card strong {

    font-family: 'Anton', sans-serif;

    font-size: 48px;

    line-height: .8;
}

.floating-card span {

    font-size: 10px;

    font-weight: 800;

    margin-top: 8px;
}


/* =====================================================
   PROBLEM
===================================================== */

.problem {

    padding: 110px 0;

    background: var(--yellow);
}

.problem .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}

.problem-text h2 {

    margin-bottom: 30px;
}

.problem-text p {

    max-width: 550px;

    margin-bottom: 18px;
}

.problem-text .highlight {

    font-weight: 800;

    font-size: 16px;

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

    padding-left: 20px;

    margin-top: 25px;
}


/* Caixa */

.problem-box {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}

.problem-item {

    min-height: 180px;

    padding: 25px;

    background: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow:
        10px 10px 0 rgba(0,0,0,.08);
}

.problem-item span {

    font-family: 'Anton', sans-serif;

    font-size: 45px;

    color: var(--red);

    opacity: .4;
}

.problem-item strong {

    font-size: 12px;

    line-height: 1.5;
}


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

.about {

    padding: 120px 0;

    background: #fff;
}

.about-grid {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 100px;

    align-items: center;
}

.about-image {

    position: relative;

    text-align: center;
}

.about-image::before {

    content: '';

    position: absolute;

    width: 90%;

    height: 90%;

    background: var(--yellow);

    left: 5%;

    top: 5%;

    z-index: 0;

    transform: rotate(-5deg);
}

.about-image img {

    width: 340px;

    margin: auto;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            15px 20px 20px rgba(0,0,0,.2)
        );
}

.about-text h2 {

    margin-bottom: 25px;
}

.about-text p {

    max-width: 650px;

    margin-bottom: 18px;
}

.check-list {

    margin: 30px 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    font-size: 12px;

    font-weight: 700;
}

.check-list div {

    padding: 10px;

    background: #f6f6f6;
}


/* =====================================================
   PÁGINAS DO EBOOK
===================================================== */

.pages {

    padding: 110px 0;

    background: #f3f3f1;
}

.section-header {

    text-align: center;

    max-width: 800px;

    margin:
        0 auto 60px;
}

.section-header h2 {

    margin-bottom: 20px;
}

.section-header p {

    max-width: 600px;

    margin: auto;
}

.pages-grid {

    display: grid;

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

    gap: 30px;
}

.page-card {

    background: #fff;

    padding: 15px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

    transition: .3s;
}

.page-card:hover {

    transform:
        translateY(-10px)
        rotate(1deg);
}

.page-card img {

    width: 100%;

    height: 430px;

    object-fit: contain;

    background: white;
}

.page-caption {

    padding: 18px 10px 8px;

    font-size: 12px;

    font-weight: 700;

    text-align: center;
}

.center-button {

    text-align: center;

    margin-top: 50px;
}


/* =====================================================
   CHECKLIST
===================================================== */

.checklist-section {

    padding: 120px 0;

    background: var(--dark);

    color: white;

    overflow: hidden;
}

.checklist-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.checklist-text .section-label {

    color: #ccc;
}

.checklist-text h2 {

    margin-bottom: 25px;
}

.checklist-text h2 span {

    color: var(--yellow);
}

.checklist-text p {

    max-width: 550px;

    margin-bottom: 18px;

    color: #ddd;
}

.checklist-text ul {

    list-style: none;

    margin: 30px 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    font-size: 12px;

    font-weight: 700;
}

.checklist-images {

    height: 550px;

    position: relative;
}

.checklist-image {

    position: absolute;

    width: 250px;

    background: #fff;

    padding: 8px;

    box-shadow:
        15px 20px 35px rgba(0,0,0,.4);
}

.checklist-image img {

    width: 100%;
}

.image-1 {

    left: 0;

    top: 60px;

    transform: rotate(-8deg);

    z-index: 1;
}

.image-2 {

    right: 40px;

    top: 0;

    transform: rotate(6deg);

    z-index: 2;
}

.image-3 {

    right: 0;

    bottom: 20px;

    transform: rotate(-4deg);

    z-index: 3;
}


/* =====================================================
   MÓDULOS
===================================================== */

.modules-section {

    padding: 120px 0;

    background: white;
}

.modules-grid {

    display: grid;

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

    gap: 20px;
}

.module {

    padding: 35px;

    background: #f4f4f2;

    min-height: 280px;

    border-bottom: 5px solid var(--yellow);

    transition: .3s;
}

.module:hover {

    transform: translateY(-7px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.1);
}

.module-number {

    font-family: 'Anton', sans-serif;

    font-size: 55px;

    color: var(--red);

    opacity: .25;

    margin-bottom: 25px;
}

.module h3 {

    font-size: 25px;

    margin-bottom: 15px;
}

.module p {

    font-size: 13px;
}


/* =====================================================
   PARA QUEM É
===================================================== */

.audience {

    padding: 110px 0;

    background: var(--yellow);
}

.audience-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}

.audience-list {

    display: flex;

    flex-direction: column;

    gap: 15px;
}

.audience-item {

    background: white;

    padding: 18px 20px;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow:
        5px 5px 0 rgba(0,0,0,.08);
}

.audience-item span {

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--green);

    color: white;

    display: flex;

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

    font-weight: 800;
}

.audience-item p {

    font-size: 12px;

    font-weight: 600;

    line-height: 1.5;
}


/* =====================================================
   AUTOR
===================================================== */

.author {

    padding: 120px 0;

    background: #f5f5f3;
}

.author-grid {

    display: grid;

    grid-template-columns: .7fr 1.3fr;

    gap: 100px;

    align-items: center;
}

.author-photo img {

    width: 320px;

    height: 380px;

    object-fit: cover;

    margin: auto;

    filter:
        grayscale(100%);

    box-shadow:
        15px 15px 0 var(--yellow);
}

.author-text h2 {

    margin-bottom: 25px;
}

.author-text p {

    max-width: 600px;

    margin-bottom: 18px;
}

.author-signature {

    margin-top: 30px;

    font-family: 'Anton', sans-serif;

    font-size: 30px;

    color: var(--red);
}


/* =====================================================
   OFERTA
===================================================== */

.offer {

    padding: 120px 0;

    background:

        linear-gradient(
            135deg,
            #222,
            #111
        );

    color: white;
}

.offer-container {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 100px;

    align-items: center;
}

.offer-product {

    text-align: center;
}

.offer-product img {

    width: 350px;

    margin: auto;

    transform:
        rotate(-5deg);

    filter:
        drop-shadow(
            20px 25px 20px rgba(0,0,0,.5)
        );
}

.offer-text h2 {

    margin-bottom: 25px;
}

.offer-text h2 span {

    color: var(--yellow);
}

.offer-text > p {

    max-width: 550px;

    color: #ddd;

    margin-bottom: 25px;
}

.price-box {

    max-width: 400px;

    background: white;

    color: var(--dark);

    padding: 35px;

    text-align: center;

    box-shadow:
        15px 20px 40px rgba(0,0,0,.4);
}

.price-old {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: .5;
}

.price {

    font-family: 'Anton', sans-serif;

    font-size: 100px;

    line-height: .95;

    color: var(--red);

    margin: 10px 0;
}

.price small {

    font-size: 30px;
}

.price sup {

    font-size: 40px;
}

.installments {

    font-size: 11px;

    margin-bottom: 25px;
}

.secure {

    margin-top: 15px;

    font-size: 10px;

    line-height: 1.7;

    color: #777;
}


/* =====================================================
   GARANTIA
===================================================== */

.guarantee {

    padding: 90px 0;

    background: white;
}

.guarantee-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 60px;

    max-width: 850px;
}

.guarantee-image img {

    width: 180px;
}

.guarantee h2 {

    margin-bottom: 20px;
}

.guarantee p {

    max-width: 550px;
}


/* =====================================================
   FAQ
===================================================== */

.faq {

    padding: 110px 0;

    background: #f4f4f2;
}

.faq-list {

    max-width: 850px;

    margin: auto;
}

details {

    background: white;

    margin-bottom: 10px;

    padding: 0 25px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.05);
}

summary {

    cursor: pointer;

    padding: 23px 0;

    font-weight: 800;

    font-size: 14px;

    list-style: none;

    position: relative;

    padding-right: 30px;
}

summary::after {

    content: '+';

    position: absolute;

    right: 0;

    font-size: 25px;

    font-weight: 400;
}

details[open] summary::after {

    content: '−';
}

details p {

    padding:
        0 0 25px;

    font-size: 13px;

    color: #555;
}


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

.final-cta {

    padding: 120px 0;

    background: var(--yellow);

    text-align: center;
}

.final-cta-content {

    max-width: 850px;

    margin: auto;
}

.final-cta h2 {

    margin-bottom: 25px;
}

.final-cta p {

    font-size: 16px;

    margin-bottom: 30px;
}

.final-cta .btn {

    width: auto;

    min-width: 300px;
}


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

footer {

    background: #151515;

    color: white;

    padding: 35px 0;
}

.footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    font-size: 10px;
}

.footer-content strong {

    font-size: 13px;
}

.footer-content div {

    display: flex;

    gap: 20px;
}

.footer-content a:hover {

    text-decoration: underline;
}


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

@media (max-width: 950px) {


    .hero-container {

        flex-direction: column;

        padding-top: 100px;

        padding-bottom: 60px;
    }

    .hero {

        min-height: auto;
    }

    .hero-container {

        min-height: auto;
    }

    .hero-content {

        width: 100%;

        text-align: center;
    }

    .hero-description {

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

    .hero-buttons {

        justify-content: center;
    }

    .hero-info {

        justify-content: center;
    }

    .hero-product {

        width: 100%;

        height: 500px;
    }

    .problem .container,
    .about-grid,
    .checklist-grid,
    .audience-grid,
    .author-grid,
    .offer-container {

        grid-template-columns: 1fr;

    }

    .problem .container {

        gap: 50px;
    }

    .about-grid {

        gap: 60px;
    }

    .checklist-grid {

        gap: 40px;
    }

    .audience-grid {

        gap: 50px;
    }

    .author-grid {

        gap: 50px;
    }

    .offer-container {

        gap: 60px;

        text-align: center;
    }

    .offer-text > p {

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

    .price-box {

        margin: auto;
    }

    .modules-grid {

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

    .pages-grid {

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

    .checklist-images {

        max-width: 600px;

        width: 100%;

        margin: auto;
    }

    .guarantee-container {

        text-align: center;

        flex-direction: column;
    }

}


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

@media (max-width: 600px) {


    .container {

        width: 88%;
    }


    h2 {

        font-size: 48px;
    }


    .hero h1 {

        font-size: 58px;
    }


    .hero h2 {

        font-size: 24px;
    }


    .hero-description {

        font-size: 14px;
    }


    .ebook-cover {

        width: 280px;
    }


    .hero-product {

        height: 430px;
    }


    .floating-card {

        width: 110px;
        height: 110px;

        right: 0;

        bottom: 50px;
    }


    .floating-card strong {

        font-size: 35px;
    }


    .problem-box {

        grid-template-columns: 1fr;
    }


    .check-list {

        grid-template-columns: 1fr;
    }


    .pages-grid {

        grid-template-columns: 1fr;
    }


    .page-card img {

        height: auto;
    }


    .checklist-text ul {

        grid-template-columns: 1fr;
    }


    .checklist-images {

        height: 480px;

        transform: scale(.85);

        transform-origin: center;
    }


    .modules-grid {

        grid-template-columns: 1fr;
    }


    .offer-product img {

        width: 280px;
    }


    .price {

        font-size: 80px;
    }


    .price-box {

        padding: 25px;
    }


    .final-cta .btn {

        min-width: 0;

        width: 100%;
    }


    .footer-content {

        flex-direction: column;

        text-align: center;
    }


    .footer-content div {

        flex-direction: column;

        gap: 10px;
    }

}