/* ==========================================
   MOBILE.CSS
   Reputação Digital BR
   Versión limpia y optimizada
========================================== */

@media (max-width:768px){

/*==========================
GENERAL
==========================*/

body{
    overflow-x:hidden;
}

.container,
.menu,
.hero,
.clientes,
.problema-conteudo,
.como-funciona .container,
.vantagens .container,
.segmentos,
.resultados,
.planos{

    width:92%;
    margin:auto;

}

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

header{

    padding:12px 0;

}

.menu{

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

}

.logo{

    height:55px;

}

/*==========================
SECCIONES
==========================*/

.hero,
.clientes,
.problema,
.como-funciona,
.vantagens,
.segmentos,
.resultados,
.planos,
.cta-final,
.footer{

    padding:45px 0;

}

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

.hero{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    gap:25px;

}

.hero-imagem{

    display:none;

}

.hero-texto{

    width:100%;

}

.hero-texto h1{

    font-size:44px;
    line-height:1.15;
    margin-bottom:18px;

}

.hero-texto p{

    font-size:20px;
    line-height:1.7;
    margin-bottom:30px;

}

.botao{

    width:100%;
    max-width:340px;

    padding:18px;

    font-size:18px;

}

/*==========================
TITULOS
==========================*/

h2{

    font-size:34px;
    line-height:1.25;
    margin-bottom:18px;

}

.subtitulo{

    font-size:18px;
    margin-bottom:30px;

}

/*==========================
GRIDS
==========================*/

.cards,
.passos,
.cards-vantagens,
.segmentos-grid,
.resultado-grid,
.planos-grid,
.footer-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:22px;

}

/*==========================
CARDS
==========================*/

.card,
.passo,
.segmento,
.vantagem,
.resultado,
.plano{

    padding:28px;
    margin:0;

}

/*==========================
LISTAS
==========================*/

.lista{

    grid-template-columns:1fr;
    gap:18px;

}

.item{

    padding:20px;

}

/*==========================
PLANOS
==========================*/

.destaque{

    transform:none;

}

.destaque:hover{

    transform:none;

}

.preco{

    font-size:48px;

}

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

.cta-final h2{

    font-size:34px;

}

.cta-final p{

    font-size:18px;

}

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

.footer{

    text-align:center;

}

.logo-footer{

    margin:auto auto 20px;

}

.footer-grid{

    text-align:center;

}

/*==========================
WHATSAPP
==========================*/

.whatsapp-float{

    width:60px;
    height:60px;

    right:18px;
    bottom:18px;

}

.whatsapp-float img{

    width:34px;

}

}

/*=========================================
TELÉFONOS MUY PEQUEÑOS
=========================================*/

@media (max-width:480px){

.hero-texto h1{

    font-size:36px;

}

.hero-texto p{

    font-size:18px;

}

h2{

    font-size:30px;

}

.logo{

    height:50px;

}

.botao{

    font-size:17px;

}

.preco{

    font-size:42px;

}

}