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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:#222;
    background:#fff;
    overflow-x:hidden;
}

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

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

section{
    width:100%;
}

h1,h2,h3{
    font-weight:700;
}

p{
    line-height:1.8;
}

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

header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    height:90px;

    background:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 8%;

    z-index:999;

    box-shadow:0 3px 20px rgba(0,0,0,.08);

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}
.logo img{

    height:55px;

    width:auto;

    object-fit:contain;

}

.logo span{

    font-size:1.6rem;

    font-weight:700;

    color:#F31000;

}

nav{

    display:flex;

    gap:45px;

}

nav a{

    font-weight:500;

    transition:.3s;

}

nav a:hover{

    color:#F31000;

}

.menu-mobile{

    display:none;

    font-size:1.8rem;

    cursor:pointer;

}


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

.hero{

    position:relative;

    /* Aumentando a altura do HERO para melhor visualização */
    min-height:150vh;

    background:url('imagens/fachada-overcome.png') center center / cover no-repeat;

    padding-top:90px;

    padding-left:8%;

    padding-right:8%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.hero::before{

    content:'';

    position:absolute;

    inset:0;

    /* Gradiente que começa transparente sobre a imagem e termina em vermelho sólido */
    background:

        linear-gradient(
            180deg,
            rgba(243,16,0,.88) 0%,
            rgba(243,16,0,.85) 25%,
            rgba(243,16,0,.75) 45%,
            rgba(243,16,0,.90) 65%,
            rgba(243,16,0,1) 85%,
            rgba(243,16,0,1) 100%
        );

    z-index:1;

}

.hero > *{

    position:relative;

    z-index:2;

}

.hero-content{

    text-align:center;

    color:#fff;

    max-width:960px;

    margin:0 auto;

    padding-top:20px;

    animation:heroFadeIn 1s ease both;

}

.hero-content h1{

    font-size:4.2rem;

    line-height:1.5;

    font-weight:800;

    text-shadow:0 4px 30px rgba(0,0,0,.25);

    letter-spacing:-0.5px;

    animation:heroSlideUp .9s ease .15s both;
    /* AJUSTE: margin-bottom controla quanto o título sobe */
    margin-bottom:-20px;

}

.hero-content p{

    margin-top:180px;

    font-size:1.45rem;

    font-weight:400;

    opacity:.93;

    letter-spacing:2px;

    text-shadow:0 2px 12px rgba(0,0,0,.15);

    animation:heroSlideUp .9s ease .35s both;
    /* AJUSTE: margin-top controla quanto o texto "Kids 7+" desce */
    margin-bottom:20px;

}

.btn{

    display:inline-block;

    margin-top:20px;

    background:#fff;

    color:#F31000;

    padding:17px 48px;

    border-radius:50px;

    font-weight:700;

    font-size:1.05rem;

    letter-spacing:0.5px;

    transition:.4s cubic-bezier(.25,.8,.25,1);

    box-shadow:0 8px 30px rgba(0,0,0,.18);

    position:relative;

    overflow:hidden;

    animation:heroSlideUp .9s ease .5s both;
    /* AJUSTE: margin-top controla quanto o botão "Saiba Mais" desce */
    margin-bottom:10px;

}

.btn::after{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(120deg,transparent,rgba(243,16,0,.08),transparent);

    transform:translateX(-100%);

    transition:.5s;

}

.btn:hover::after{

    transform:translateX(100%);

}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(0,0,0,.22);

}

@keyframes heroFadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroSlideUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* =====================================================
   HERO CARDS
===================================================== */

.hero-cards{

    /* Aumentando o espaço superior para descer as fotos */
    margin-top:55px;

    margin-bottom:-60px;

    display:grid;

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

    gap:30px;

    max-width:1100px;

    width:100%;

    position:relative;

    z-index:3;

}

.hero-cards .card:nth-child(1){

    animation:heroCardIn .8s ease .6s both;

}

.hero-cards .card:nth-child(2){

    animation:heroCardIn .8s ease .75s both;

}

.hero-cards .card:nth-child(3){

    animation:heroCardIn .8s ease .9s both;

}

@keyframes heroCardIn{

    from{

        opacity:0;

        transform:translateY(50px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.scroll-indicator{

    margin-top:90px;

    margin-bottom:20px;

    animation:heroFadeIn 1s ease 1.2s both;

}

.mouse{

    width:30px;

    height:50px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:20px;

    display:flex;

    justify-content:center;

    padding-top:10px;

    margin:0 auto;

}

.wheel{

    width:5px;

    height:12px;

    background:rgba(255,255,255,.8);

    border-radius:3px;

    animation:scrollWheel 1.8s ease infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:1;

        transform:translateY(0);

    }

    100%{

        opacity:0;

        transform:translateY(14px);

    }

}

.card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    height:260px;

    cursor:pointer;

    box-shadow:0 20px 50px rgba(0,0,0,.30);

    transition:.45s cubic-bezier(.25,.8,.25,1);

    border:2px solid rgba(255,255,255,.12);

}

.card:hover{

    transform:translateY(-12px) scale(1.02);

    box-shadow:0 30px 60px rgba(0,0,0,.35);

    border-color:rgba(255,255,255,.25);

}

.card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s cubic-bezier(.25,.8,.25,1);

}

.card:hover img{

    transform:scale(1.1);

}

.overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:50px 25px 20px;

    background:linear-gradient(

        transparent 0%,

        rgba(0,0,0,.65) 40%,

        rgba(0,0,0,.85) 100%

    );

    display:flex;

    align-items:flex-end;

    justify-content:center;

}

.overlay h3{

    color:white;

    font-size:1.25rem;

    font-weight:600;

    text-shadow:0 2px 8px rgba(0,0,0,.3);

    text-align:center;

}

/* =====================================================
   CONTAINER PADRÃO
===================================================== */

.container{

    width:min(1200px,92%);

    margin:auto;

}


/* =====================================================
   ANIMAÇÕES
===================================================== */

.card,
.btn,
nav a{

    transition:.35s;

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

.sobre{

    background:#0A71E6;

    padding:160px 0 120px;

    color:#fff;

}

.sobre .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    margin-bottom:120px;

}

.sobre .container:last-child{

    margin-bottom:0;

}

.sobre .reverse{

    /* AJUSTE: flex-direction:row-reverse inverte a ordem dos elementos
       row-reverse = imagem fica à ESQUERDA, texto à DIREITA
       row = imagem fica à DIREITA, texto à ESQUERDA (padrão)
       Mude conforme necessário */
    flex-direction:row;

}

.sobre .texto{

    flex:1;

}

.sobre h2{

    font-size:3rem;

    margin-bottom:25px;

    font-weight:700;

}

.sobre p{

    font-size:1.05rem;

    line-height:2;

    opacity:.95;

}

.sobre .imagem{

    flex:1;

}

.sobre .imagem img{

    width:100%;

    height:450px;

    object-fit:cover;
    /* AJUSTE: object-position alinha a imagem dentro do espaço restrito
       "top" = mostra a foto a partir do topo
       "center" = centraliza (padrão anterior)
       Ajuste conforme necessário */
    object-position:top;

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.25);

}


/*======================================================
    DIFERENCIAIS
======================================================*/

.diferenciais{

    background:#A4EBF3;

    padding:420px 8%;

}

.gallery{

    display:grid;

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

    gap:50px;

}

.item{

    position:relative;

}

.item img{

    height:520px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.photo-top {
            object-position:top;
}

.speech{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-75px;

    width:85%;

    background:white;

    padding:45px;

    border-radius:18px;

    text-align:center;

    font-weight:500;

    line-height:1.7;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}



/*======================================================
    AVALIAÇÕES
======================================================*/

.review-header{

    display:flex;

    align-items:center;

    gap:50px;

}

.review-photo {
    width: 56px;
    height: 56px;

    border-radius: 50%;

    object-fit: cover;
    flex-shrink: 0;
}

.review-text {
    margin: 0;

    line-height: 1.6;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}

.review-text.is-expanded {
    display: block;
}

.review-toggle {
    margin-top: 12px;
    padding: 0;

    color: #2859a6;
    background: none;
    border: none;

    font: inherit;
    font-weight: bold;

    cursor: pointer;
}

.review-toggle:hover {
    text-decoration: underline;
}

/* ----------------------------- */

.avaliacoes{

    padding:130px 8%;

    background:#F7F7F7;

}

.avaliacoes h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:70px;

}

.avaliacoes .score a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    color:inherit;

}
@media (max-width: 768px){

    .avaliacoes .score a{

        font-size: 80%;

    }

}

.avaliacoes .score{

    color:#FFD54A;

    text-align:center;

    font-size:3rem;

    font-weight:600;

    margin-bottom:70px;

    transition: transform 0.5s ease-in-out;

}
.google-logo{

    width:1em;

    height:1em;

    display:block;


}
.avaliacoes .score:hover{
    
    transform:translateY(-12px) scale(1.02);
    
}

.cards{

    display:grid;

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

    gap:35px;

}

.review{

    background:white;

    padding:40px;

    border-radius:20px;

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

    transition:.35s;

}

.review:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.stars{

    color:#FFD54A;

    font-size:1.4rem;

    letter-spacing:4px;

    margin-bottom:25px;

}

.review p{

    font-size:1rem;

    line-height:1.9;

    margin-bottom:25px;

}

.review strong{

    color:#F31000;

    font-size:1.2rem;

}
/*======================================================
    MINI GALERIA
======================================================*/

.mini-galeria{

    padding:120px 8%;

    background:#ffffff;

}

.mini-galeria h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:70px;

    color:#222;

}

.grid{

    display:grid;

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

    gap:25px;

}

.grid img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    transition:.45s;

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

}

.grid img:hover{

    transform:scale(1.05);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}



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

footer{

    background:#F31000;

    color:white;

    padding:70px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    flex-wrap:wrap;

}

.footer-left{

    flex:1;

}

.footer-left h2{

    font-size:2rem;

    margin-bottom:25px;

}

.social{

    display:flex;

    gap:18px;

}

.social a{

    width:48px;

    height:48px;

    border:2px solid rgba(255,255,255,.35);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    transition:.35s;

}

.social a:hover{

    background:white;

    color:#F31000;

    transform:translateY(-5px);

}

.footer-center{

    flex:1;

    text-align:center;

}

.footer-center p{

    margin:10px 0;

    opacity:.95;

}

.footer-right{

    flex:1;

    display:flex;

    justify-content:flex-end;

}

.footer-right .btn{

    margin-top:0;

}



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

@media(max-width:1100px){

    .hero-content h1{

        font-size:3.2rem;

    }

    .hero-cards{

        grid-template-columns:1fr;

        max-width:500px;

        margin-bottom:0;

    }

    .card{

        height:200px;

    }

    .sobre .container{

        flex-direction:column;

        text-align:center;

    }

    .sobre .reverse{

        flex-direction:column;

    }

    .gallery{

        grid-template-columns:1fr;

        gap:90px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .grid{

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

    }

    footer{

        flex-direction:column;

        text-align:center;

    }

    .footer-right{

        justify-content:center;

    }

}



@media(max-width:768px){

    header{

        padding:0 25px;

        height:75px;

    }

    nav{

        display:none;

    }

    .menu-mobile{

        display:block;

    }

    .hero{

        padding-top:110px;

        padding-left:6%;

        padding-right:6%;

        min-height:100vh;

    }

    .hero::before{

        background:

            linear-gradient(
                180deg,
                rgba(243,16,0,.92) 0%,
                rgba(243,16,0,.85) 40%,
                rgba(243,16,0,.78) 70%,
                rgba(180,10,0,.90) 100%
            );

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        font-size:1.15rem;

    }

    .hero-cards{

        margin-top:50px;

        gap:20px;

    }

    .btn{

        padding:15px 38px;

        font-size:1rem;

    }

    .sobre{

        padding:90px 0;

    }

    .sobre h2{

        font-size:2.2rem;

    }

    .sobre .imagem img{

        height:320px;

    }



    .diferenciais{

        padding:90px 6%;

    }

    .item img{

        height:320px;

    }

    .speech{

        width:92%;

        font-size:.95rem;

    }

    .avaliacoes{

        padding:90px 6%;

    }

    .avaliacoes h2{

        font-size:2.2rem;

    }

    .mini-galeria{

        padding:90px 6%;

    }

    .mini-galeria h2{

        font-size:2.2rem;

    }

    .grid{

        grid-template-columns:1fr;

    }

}



@media(max-width:500px){

    .hero-content h1{

        font-size:1.85rem;

    }

    .hero-content p{

        font-size:1rem;

        letter-spacing:1px;

    }

    .btn{

        padding:14px 32px;

        font-size:.95rem;

    }

    .logo span{

        font-size:1.2rem;

    }

    .logo img{

        height:45px;

    }

    .card{

        height:200px;

    }

    .sobre h2{

        font-size:2rem;

    }

    .avaliacoes h2{

        font-size:2rem;

    }

    .mini-galeria h2{

        font-size:2rem;

    }

}
/*======================================================
    ANIMAÇÕES
======================================================*/

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}



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

nav.open{

    display:flex;

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:#FFFFFF;

    flex-direction:column;

    align-items:center;

    gap:25px;

    padding:35px 0;

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

}



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

header.scrolled{

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

}

/* =====================================================
   LARGURA PADRAO DO SITE
===================================================== */

:root{
    --site-content-width:1360px;
    --site-gutter:max(6%, calc((100% - var(--site-content-width)) / 2));
}

header{
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
}

.hero{
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
}

.hero-cards{
    max-width:var(--site-content-width);
}

.container{
    width:min(var(--site-content-width),88%);
}

.diferenciais{
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
}

.avaliacoes{
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
}

.mini-galeria{
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
}

footer{
    padding-left:var(--site-gutter);
    padding-right:var(--site-gutter);
}

@media(max-width:768px){
    header,
    .hero,
    .diferenciais,
    .avaliacoes,
    .mini-galeria,
    footer{
        padding-left:6%;
        padding-right:6%;
    }
}