/*
Theme Name: Voltar para si
Theme URI: http://www.cynarabpamplona.com.br/voltar-para-si
Description: Uma travessia de reconexão guiada pela música para mulheres que sentem que é hora de voltar para si.
Version: 1.0
Author: Lila Nascimento
Author URI: lila.web7@gmail.com 
Tags: Curso, Cynara B Pamplona, Reconexão Guiada, Música para reconexão, Autocuidado, Cura, Cuidado 
*/
/* CSS Document */
@charset "utf-8";
/*----------------*/

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

/* GLOBAL */
:root {
    --areia: #F3EFE8;
    --areia-rosada: #E7D7CA;
    --marrom: #5B302C;
    --verde: #5E6B4F;
    --terracota: #C26A4A;
    --mostarda: #D6B86A;
    --lilas: #4B3A5A;
    --azul: #DFEAEC;
    --cinza: #EEEEEE;
    --text-primary: #3D3128;
    }

body {
    font-family: 'Open Sans', sans-serif;
    background: var(--areia);
    color: var(--marrom);
    line-height: 1.8;
    overflow-x: hidden;
    }

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    line-height: 1.2;
    }

h2 {font-size: 2rem; margin-bottom: 40px; text-align: left;}

h3 {font-size: 1.5rem; margin: 40px 0; text-align: left;}
h4 {font-size: 1.3rem; margin: 40px 0; text-align: left;}

.title-topics {text-align: center;}

p {font-size: 1.125rem; line-height: 1.6; margin-bottom: 1rem; text-align: left;}

.txt-color-1 p {color: var(--areia);}


.grifo-1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    text-align: center;
    font-style: italic;
    line-height: 1.5;
    font-weight: 600;
    color: var(--mostarda);
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 60px;
     
    }
    .green-section .grifo-1 { color: var(--mostarda);}
    .purple-section .grifo-1 { color: var(--mostarda);}
    
    .offer-content .grifo-1 { 
        margin-top:60px; 
        max-width:700px; 
        margin-inline:auto; 
        color: var(--marrom);
        text-shadow: 0 2px 12px rgb(247, 244, 243);
        }

.grifo-2 {
    color: var(--terracota); 
    font-family: 'Playfair Display', serif; 
    font-size: 1.8rem;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    margin: 60px 0 30px;
    }
    .soft-box .grifo-2 {display: block; text-align:center; margin-top:70px;}
section {
    padding: 120px 8%;
    }

.container {
    max-width: 1200px;
    margin: 0 auto;
    }

.list-block {
    display: inline-block;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 60px;
    padding-left: 25px;
    border-left: 1px solid var(--mostarda);
    text-align: left;
    }

    ul { padding-left: 1.2rem; margin: 0 auto;}
        ul li {
            font-size: 1.10rem; 
            line-height: 1.6; 
            padding-bottom: 1rem;
            }

        .ul-type-none {list-style: none; padding-left: 0;}
        .ul-type-none li {font-size: 1rem;}

/* BOTÕES CTA*/
.botao {text-align: center;}
.btn {
    display: inline-block;
    margin-top: 50px;
    background: var(--terracota);
    color: var(--areia);
    text-decoration: none;
    padding: 18px 42px;
    border-radius: 999px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.3s ease;
    }

    .btn:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        }
.btn-zap {
    display: block;
    width: 250px;
    margin: 0 auto;
    margin-top: 60px;
    background: #2ddd05;
    color: #fff;
    text-decoration: none;
    padding: 18px 42px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: 0.3s ease;
    font-weight: 600;
    }

/*ESTRUTURA*/
.grid-2, .cards, .portal-grid, .pill-grid, .pill-grid-3 { grid-template-columns: 1fr;} 

/*BORDA IMG*/
.image-rounded {
    width: 100%;
    border-radius: 40px;
    display: block;
    margin: 0 auto;
    margin-bottom: 50px;
    max-width: 350px;
    } 

/*ELEMENTOS*/
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 0 auto;
    margin-top: 70px;
    }
    .card {
        background: rgba(255,255,255,0.45);
        border: 1px solid #E5D8C6;
        border-radius: 30px;
        padding: 40px 30px;
        text-align: left;
        }
        .card h3 { margin-bottom: 15px; text-align: center;}
        .card p { margin-bottom: 10px;}


/* HERO SECTION */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    }
    .hero img {
        position: absolute;
        object-position: 10% center;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        }

    .overlay { 
        position: absolute; 
        inset: 0;
        background: rgba(98, 70, 51, 0.28);
        }

    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 850px;
        color: var(--areia);
        max-width: 700px;
        }
        .hero-content p {
            text-align: center;
            max-width: 700px;
            
            text-shadow: 0 2px 12px rgba(0,0,0,0.5);
            }

        .hero-subtitle {
            text-transform: uppercase;
            letter-spacing: 4px;
            font-size: 0.85rem;
            }

        .hero h1 {
            font-size: 5rem;
            line-height: 1;
            margin-bottom: 90px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.5);
            }

        .hero-grifo-1 {
            display:block; 
            width:85%; 
            font-family: 'Playfair Display', serif; 
            font-style: italic; 
            font-size: 1.3rem; 
            margin: 0 auto;
            margin-top: 80px;
            margin-bottom: 20px;
            }
        
        .hero-content .btn {margin-top: 2rem;}
  
/* SEC-1*/
.sec-1 {text-align: center;}

/* SEC-2*/
.sec-2 .grifo-2 {margin: 3rem 0;}
.sec-2 .grifo-1 {margin: 0 auto;}
.quote-section { background: #EFE7DD; text-align: center;}

    .quote-section h2 {
        color: var(--marrom);
        font-style: italic;
        max-width: 900px;
        margin: 0 auto;
        margin-bottom: 40px;
        }

/* SEC-3*/
.sec-3 {
    background: var(--marrom);
    color: var(--areia);
    text-align: center;
    padding-bottom: 20px;
    } 

/* SEC-5*/
.green-section { background: var(--verde);}
    .green-section h2 { color: var(--areia);}
    .green-section p { color: rgba(243,239,232,0.9);}

    .green-section .grifo-2 {color: var(--cinza); margin-top: 3rem;}

    .green-section .container {max-width:900px; text-align:center;}

/* SEC-6*/
.sec-6 {text-align: center;}

    .soft-box {
        background: #EFE7DD;
        border-radius: 40px;
        padding: 30px;
        text-align: center;
        margin-bottom: 4rem;
        }

    

/* SEC-7*/
.sec-7 .grifo-2 {margin: 3em 0;}        
.purple-section {
    background: var(--lilas);
    color: var(--areia);
    text-align: center;
    }
    .purple-section p { color: rgba(243,239,232,0.88);}

    .purple-section .container {max-width:900px;}

    .purple-section ul {list-style: none; padding-left: 0; color: rgba(243,239,232,0.9);}

    .pill-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 60px;
        }
       .pill-grid-3 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 60px;
            }
        .pill {
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 999px;
            padding: 20px;
            }

/* SEC-8*/
.sec-8 {text-align: center;}
    .sec-8 .cards {display: inline-block; list-style: none; padding-left: 0; margin-bottom: 3rem; }
    .sec-8 .card {margin-bottom: 2rem;}
    .sec-8 .list-block {list-style: none; margin-bottom: 5rem;}

/* SEC-9*/

    .offer {
        position: relative;
        overflow: hidden;
        text-align: center;
        }
        .offer-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.48;
            }
        .offer-content {
            position: relative;
            z-index: 2;
            margin: 0 auto;
            }
            .offer-content .cards h3 {margin-top: 0;}

/* SEC-10*/
.sec-10 h2 { margin-top: 4rem;}

    .portal-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 80px;
        margin: 0 auto;
        }
        .portal-card {
            background: rgba(255,255,255,0.5);
            border: 1px solid #E8DCCF;
            border-radius: 30px;
            padding: 40px 25px;
            text-align: center;
            }
            .portal-card p, .portal-card h3 { text-align: center;}
            .portal-card .emoji { font-size: 2.5rem; margin-bottom: 20px;}

/* SEC-11 E 14*/
.about-section { background: #EFE7DD; text-align: center;}
    .about-section p { margin-bottom:25px;}
    .about-section h3 {text-align: center; font-size: 2rem;}
    .about-section ul {display: inline-block; text-align: left;}

.sec-11 .card {padding: 10px;}
    .sec-11 h4 {text-align: center; margin: 1rem;}
    .sec-11 p {text-align: center;}

/* SEC-12*/
.closing { text-align: center; padding-bottom: 0;}
    .closing p { margin-top: 30px;}

/* SEC-13*/
.sec-13 .image-rounded {max-width: 400px;}
.about-price {text-align: center; background: var(--areia-rosada);}

    .grifo-2 {margin: 0;}

.price p { text-align: center;}
    
    .valor { display: inline-block; margin: 0 auto; margin-bottom: 1rem;}

    .old-price {
        text-decoration: line-through;
        opacity: 0.5;
        font-size: 2rem;
        margin-top: 60px;
        }
    .new-price {
        color: var(--terracota);
        font-size: 5rem;
        font-family: 'Playfair Display', serif;
        line-height: 3rem;
        }
    .formas-pag { width:90%; max-width: 380px;}

    .garantia { margin-top: 3rem;}
        .garantia p {font-size: 1rem; font-weight: bold;}
        .selo-garantia { width: 70%; max-width: 300px; }

/* SEC-15*/
.sec-15,.sec-15 h2, .sec-15 p {text-align: center;}
.sec-15 h2 {font-size: 3rem;}
.sec-15 .grifo-2 {margin-bottom: 3rem;}
.sec-15 .grifo-1 {margin-bottom: 0;}
.sec-15 img {margin-top: 6rem; margin-bottom: 0;}

/* SEC-17*/
.sec-17 h2 {text-align: center;}
.sec-17 .soft-box {max-width: 90%; margin: 0 auto; padding-bottom: 60px;}
.faq {background: var(--cinza);}
    .faq-list {text-align: left;}
    .faq-list h3 {font-size: 1.3rem; margin-bottom: 5px;}
    .faq-list p {
        font-size: 1.1rem; 
        padding-bottom: 20px; 
        border-bottom: 1px solid var(--mostarda)
        }

/* FOOTER*/
footer {
    border-top: 1px solid rgba(90,58,46,0.15);
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--sand);
    }
    .brand, .meta, .copy {text-align: center;}

    footer .brand {
        font-family: 'Playfair Display', serif; 
        font-style: italic; 
        font-size: 1.5rem; 
        font-weight: 600; 
    }
    footer .meta {
        font-size: 0.75rem; 
        letter-spacing: 0.3em; 
        text-transform: uppercase; 
        color: rgba(90,58,46,0.55); 
        margin-top: 0.75rem; 
        }
    footer .copy {
        font-size: 0.75rem; 
        color: rgba(90,58,46,0.5); 
        margin-top: 1.5rem; 
        }


/*////////////////////////////////////////////*/

/*Viewport min-width: 600px */	
@media screen and (min-width: 600px) {

.image-rounded { max-width: 70%;}

/*SEC-6*/
.sec-6 h2 {text-align: center;}
.sec-6 .grifo-2 {max-width: 80%; margin: 0 auto;}
    
    .soft-box .cards {max-width: 80%;}

/*SEC-7*/
.sec-7 .grifo-1 {max-width: 70%; margin-top: 3em;} 
.pill-grid, .pill-grid-3 {max-width: 60%;}

/*SEC-9*/
.sec-9 .cards {max-width: 70%;}

/*SEC-10*/
.portal-grid { max-width: 70%;}

/*SEC-12*/
.sec-12 h2, .sec-12 p {text-align: center;}
.sec-12 .grifo-1 {max-width: 80%;}

/* SEC-14*/
.sec-14 .grifo-1 {width: 70%;}
.about-section .cards {max-width: 70%;}

}

/*////////////////////////////////////////////*/

/*Viewport min-width: 720px*/
@media screen and (min-width: 720px) {

/* SEC-5*/
.green-section .container {max-width: 80%;}
.green-section h2 {text-align: center;}
.green-section p {text-align: center;}

/* SEC-6*/
.soft-box { max-width: 70%; margin: 0 auto; margin-bottom: 4rem;}

/* SEC-15*/
.sec-15 .grifo-1, .sec-15 .grifo-2 {
    max-width: 80%; 
    margin: 0 auto; 
    margin-bottom: 2em;
    }
.sec-15 .grifo-1 {margin-bottom: 2rem; margin-top: 3rem;}

}


/*////////////////////////////////////////////*/

@media (min-width: 920px) {

h2 {font-size: 3rem; text-align: center;}
h3 {text-align: center;}
p {font-size: 1.3rem; text-align: center;}

.image-rounded { max-width: 450px; margin: 0;}

.grid-2 { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 80px;
    align-items: center;  
    }

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 70px;
    }

.list-block { margin: 0 auto; margin-bottom: 3rem;}

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

.ul-type-none li {font-size: 1.2rem;}

.grifo-1 {max-width: 50%;}

/* HERO SECTION */
.hero-content p { margin: 0 auto; margin-bottom: 2rem; }

    .hero-subtitle { font-size: 1.2rem;}

    .hero h1 {margin-top: 2rem; margin-bottom: 2rem;}

    .hero-grifo-1 { width:70%;}

/* SEC-1*/
.sec-1 { text-align: left;}

    .sec-1 .container {max-width: 100%; gap: 0;}
    .sec-1 .list-block {margin-top: 20px; margin-bottom: 0;}
    .sec-1 .grifo-1 { max-width: 70%; margin-top: 0;}

    .grid-div1 {
        padding-right: 40px; 
        border-right: 1px solid var(--mostarda); 
        text-align: left;
        }
        .grid-div1 p { text-align: left;}

/* SEC-3*/
.sec-3 h2 {
    min-width: 95%; 
    margin: 0 auto; 
    margin-bottom: 3rem;
    text-align: center;
}

/* SEC-5*/
.green-section .container {max-width: 100%; gap: 5px;}

    .sec-5 .grid-2-borda {border-right: 1px solid var(--cinza);}

    .green-section h2 {
        margin: 0 auto; 
        margin-bottom: 4rem; 
        max-width: 80%;}

    .green-section .grifo-1 {max-width: 90%; margin-bottom: 0;}

/* SEC-6*/
.sec-6 {text-align: center; }
    .sec-6 .list-block {margin-bottom: 150px;}
    .sec-6 .grifo-2 { max-width: 50%; margin-top: 150px;}
    
    .soft-box { max-width: 100%; padding: 20px;}
        .soft-box .cards {max-width: 100%;}


/* SEC-7*/
.sec-7 .sec7-grid-div-1 {padding-right: 20px;}
.sec-7 h3 {margin-top: 0;}
.sec-7 p {text-align: left;}

.sec-7 .grid-2 { gap: 0; align-items: start}
    .sec-7 .grid-2-borda {border-left: 1px solid var(--cinza); padding-left: 30px;}

.sec-7 .grifo-1 {text-align: center; margin-top: 5rem;}
.sec-7 .title-topics {margin-top: 2rem; text-align: center;}
.sec-7 .container .grifo-1 {max-width: 100%;}

.pill-grid, .pill-grid-3 { max-width: 100%; }

.pill-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 60px;
    }
    .pill-grid-3 {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
        margin-top: 60px;
        }

/*SEC-8*/
.sec-8 .container {max-width:1000px;}
    .sec-8 .grifo-2 {max-width: 80%; margin: 0 auto;}
    .sec-8 .cards {display: grid;}
 
/* SEC-9*/
.sec-9 .cards {max-width: 100%;}
.offer-content { max-width: 100%;}

/* SEC-10*/
.sec-10 {max-width:850px;}
.sec-10 .grifo-1 {width: 100%;}
.portal-grid { grid-template-columns: repeat(3,1fr); max-width: 850px;}

/* SEC-11*/
.sec-11 .cards {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    }

/* SEC-12*/
.closing p {padding: 1rem 0;}
.closing .container {max-width: 90%;}

/* SEC-13*/
.sec-13 .container { width: 100%; gap: 0;}
.sec-13 .grid-2 {align-items: start;}
.sec-13 .image-rounded { max-width: 70%;}

.price .grifo-2 {width: 100%;}
    .valor {margin-top: 2rem; margin-bottom: 0;}
        .old-price {margin: 0;}
        .new-price {font-size: 4rem; line-height: 4rem; margin-bottom: 1rem;}
    .formas-pag {margin-bottom: 0;}
.sec-13 .btn {margin: 20px 0 20px}

.garantia {margin-top: 0;}
.selo-garantia {max-width: 200px;}

/* SEC-14*/
.sec h2 {width: 100%;}
.sec-14 p {text-align: left;}
.sec-14 .grid-2 {align-items: start; gap: 45px;}
.sec-14 .grifo-1 {width: 70%; text-align: center; margin-top: 4rem;}

/*SEC-15*/
.sec {text-align: center;}
.sec-15 .container {max-width: 90%;}
.sec-15 .grid-2 {align-items: start;}
.sec-15 img {margin-top: 0;}

/*SEC-17*/
.sec-17 .soft-box {max-width: 80%;}
.faq .grifo-2 {display: inline-block; text-align: center; max-width: 80%;}
.faq h3, .faq p {text-align: left;}

}