/* =========================================================
   ESPAÇO FERNANDA NORONHA + CETEP
   RESPONSIVO.CSS
========================================================= */


/* =========================================================
   NOTEBOOK / TELAS MENORES
========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--largura)
        );
    }


    /* MARCA */

    .marca-site {
        min-width: auto;
    }

    .marca-logo {
        width: 60px;
        height: 60px;
    }

    .marca-espaco {
        font-size: 17px;
    }

    .marca-cetep b {
        font-size: 16px;
    }

    .marca-cetep span {
        display: none;
    }


    /* MENU */

    .menu {
        gap: 2px;
    }

    .menu > a {
        padding: 9px 7px;

        font-size: 12px;
    }


    /* HERO */

    .hero-conteudo {
        gap: 40px;
    }


    /* SERVIÇOS */

    .cards-servicos {
        grid-template-columns:
            repeat(3, 1fr);
    }


    /* DIFERENCIAIS */

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

    .diferencial:nth-child(2) {
        border-right: 0;
    }

    .diferencial:nth-child(1),
    .diferencial:nth-child(2) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.12);
    }


    /* GALERIA */

    .galeria-home {
        grid-template-columns:
            repeat(3, 1fr);
    }


    /* RODAPÉ */

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

}


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

@media (max-width: 850px) {


    html {
        scroll-padding-top: 80px;
    }


    /* =====================================================
       CABEÇALHO
    ===================================================== */

    .cabecalho-conteudo {
        position: relative;

        min-height: 78px;
    }

    .marca-logo {
        width: 55px;
        height: 55px;
    }

    .marca-espaco {
        font-size: 16px;
    }

    .marca-cetep {
        margin-top: 3px;
    }

    .marca-cetep b {
        font-size: 14px;
    }


    /* BOTÃO MENU */

    .botao-menu {
        display: block;

        position: relative;

        z-index: 1100;
    }


    /* MENU MOBILE */

    .menu {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 3px;

        padding:
            15px;

        background: var(--branco);

        border-top:
            1px solid
            var(--cinza-claro);

        border-radius:
            0 0 18px 18px;

        box-shadow:
            0 20px 35px
            rgba(23, 50, 77, 0.15);
    }

    .menu.ativo {
        display: flex;
    }

    .menu > a {
        width: 100%;

        padding:
            12px 14px;

        font-size: 14px;
    }

    .menu .menu-agendar {
        margin:
            5px 0 0;

        text-align: center;
    }


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

    .hero {
        padding:
            60px 0;
    }

    .hero-conteudo {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .hero-texto {
        text-align: center;
    }

    .hero-titulo-marca
    .hero-espaco-nome {
        margin: auto;

        font-size:
            clamp(38px, 8vw, 58px);
    }

    .hero-titulo-marca
    .hero-cetep-nome {
        font-size:
            clamp(58px, 13vw, 85px);
    }

    .hero-significado,
    .hero-descricao {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-botoes {
        justify-content: center;
    }

    .hero-local {
        justify-content: center;

        text-align: left;
    }

    .hero-card {
        max-width: 550px;

        margin: auto;
    }


    /* =====================================================
       SEÇÕES
    ===================================================== */

    .secao {
        padding:
            70px 0;
    }


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

    .sobre-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .sobre-imagem {
        min-height: 380px;
    }


    /* =====================================================
       HISTÓRIA
    ===================================================== */

    .linha-tempo-resumo {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* =====================================================
       SERVIÇOS
    ===================================================== */

    .cards-servicos {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* =====================================================
       DESTAQUES SERVIÇOS
    ===================================================== */

    .destaque-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .destaque-card {
        max-width: 550px;

        margin: auto;

        width: 100%;
    }


    /* =====================================================
       EQUIPE
    ===================================================== */

    .card-equipe-principal {
        grid-template-columns: 1fr;
    }

    .card-equipe-principal
    .foto-placeholder {
        min-height: 330px;
    }

    .equipe-placeholder-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* =====================================================
       CURSO
    ===================================================== */

    .curso-destaque {
        padding:
            70px 0;
    }

    .curso-destaque-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .curso-destaque-conteudo {
        text-align: center;
    }

    .curso-destaque p {
        margin-left: auto;
        margin-right: auto;
    }

    .curso-beneficios {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;

        text-align: left;
    }

    .curso-destaque
    .hero-botoes {
        justify-content: center;
    }

    .curso-foto-placeholder {
        max-width: 550px;

        width: 100%;

        min-height: 400px;

        margin: auto;
    }


    /* =====================================================
       GALERIA
    ===================================================== */

    .galeria-home {
        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows: 210px;
    }

    .galeria-grande {
        grid-column: span 2;
        grid-row: span 2;
    }


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

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

    .card-avaliacao:last-child {
        grid-column: span 2;
    }


    /* =====================================================
       VÍDEOS
    ===================================================== */

    .videos-grid {
        grid-template-columns: 1fr;
    }

    .video-placeholder {
        min-height: 300px;
    }


    /* =====================================================
       CONTATO
    ===================================================== */

    .contato-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* =====================================================
       REDES
    ===================================================== */

    .redes-conteudo {
        flex-direction: column;

        align-items: flex-start;
    }


    /* =====================================================
       AGENDAMENTO
    ===================================================== */

    .agendamento-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* =====================================================
       CTA SERVIÇOS
    ===================================================== */

    .cursos-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* =====================================================
       PROFISSIONAIS
    ===================================================== */

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


    /* =====================================================
       HISTÓRIA COMPLETA
    ===================================================== */

    .historia-bloco {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 60px;
    }

    .historia-bloco:nth-child(even)
    .historia-imagem {
        order: initial;
    }


    /* =====================================================
       CURSO INTERNO
    ===================================================== */

    .curso-informacoes-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* =====================================================
       RODAPÉ
    ===================================================== */

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

        gap: 35px;
    }

    .rodape-final
    .container {
        flex-wrap: wrap;

        justify-content: center;

        padding:
            18px 0;

        text-align: center;
    }

}


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

@media (max-width: 600px) {


    .container {
        width:
            calc(100% - 28px);
    }


    /* =====================================================
       CABEÇALHO
    ===================================================== */

    .cabecalho-conteudo {
        min-height: 72px;
    }

    .marca-site {
        gap: 8px;
    }

    .marca-logo {
        width: 46px;
        height: 46px;
    }

    .marca-espaco {
        max-width: 190px;

        font-size: 13px;

        line-height: 1.05;
    }

    .marca-cetep {
        margin-top: 3px;
    }

    .marca-cetep b {
        font-size: 12px;

        letter-spacing: 1px;
    }

    .botao-menu {
        font-size: 26px;
    }


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

    .hero {
        padding:
            45px 0 55px;
    }

    .hero-etiqueta {
        font-size: 10px;

        letter-spacing: 1px;
    }

    .hero-titulo-marca
    .hero-espaco-nome {
        font-size:
            clamp(35px, 11vw, 47px);

        letter-spacing: -1.5px;
    }

    .hero-titulo-marca
    .hero-cetep-nome {
        margin-top: 13px;

        font-size:
            clamp(58px, 19vw, 78px);
    }

    .hero-significado {
        margin-top: 18px;

        font-size: 12px;

        line-height: 1.5;
    }

    .hero-descricao {
        margin-top: 17px;

        font-size: 15px;
    }

    .hero-botoes {
        flex-direction: column;
    }

    .hero-botoes .botao {
        width: 100%;
    }

    .hero-local {
        align-items: flex-start;
    }

    .hero-card {
        padding: 25px 20px;
    }

    .hero-logo {
        width: 110px;
    }

    .hero-beneficios {
        grid-template-columns: 1fr;
    }


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

    .diferenciais-grid {
        grid-template-columns: 1fr;
    }

    .diferencial {
        min-height: auto;

        padding:
            17px 15px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.12);
    }

    .diferencial:last-child {
        border-bottom: 0;
    }


    /* =====================================================
       SEÇÕES
    ===================================================== */

    .secao {
        padding:
            55px 0;
    }

    .cabecalho-secao {
        margin-bottom: 30px;
    }

    .cabecalho-secao h2,
    .sobre-conteudo h2,
    .destaque-grid h2,
    .contato-grid h2,
    .agendamento-grid h2 {
        font-size:
            clamp(27px, 9vw, 36px);
    }

    .cabecalho-secao p {
        font-size: 15px;
    }


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

    .sobre-imagem {
        min-height: 300px;
    }


    /* =====================================================
       LINHA DO TEMPO
    ===================================================== */

    .linha-tempo-resumo {
        grid-template-columns: 1fr;
    }

    .marco-historia {
        padding: 23px;
    }


    /* =====================================================
       CARDS SERVIÇOS
    ===================================================== */

    .cards-servicos {
        grid-template-columns: 1fr;
    }

    .card-servico {
        min-height: auto;

        padding: 23px;
    }


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

    .mini-lista {
        margin-bottom: 18px;
    }


    /* =====================================================
       DESTAQUES
    ===================================================== */

    .lista-check {
        grid-template-columns: 1fr;
    }

    .destaque-card {
        padding: 30px 22px;
    }

    .destaque-numero {
        font-size: 60px;
    }


    /* =====================================================
       EQUIPE
    ===================================================== */

    .card-equipe-principal
    .foto-placeholder {
        min-height: 280px;
    }

    .equipe-conteudo {
        padding: 25px;
    }

    .equipe-conteudo h3 {
        font-size: 25px;
    }

    .equipe-placeholder-grid {
        grid-template-columns: 1fr;
    }

    .foto-placeholder.pequena {
        min-height: 240px;
    }


    /* =====================================================
       CURSO
    ===================================================== */

    .curso-destaque {
        padding:
            55px 0;
    }

    .curso-destaque h2 {
        font-size:
            clamp(36px, 12vw, 48px);
    }

    .curso-destaque h3 {
        font-size: 21px;
    }

    .curso-beneficios {
        grid-template-columns: 1fr;
    }

    .curso-foto-placeholder {
        min-height: 320px;
    }


    /* =====================================================
       GALERIA
    ===================================================== */

    .galeria-home {
        grid-template-columns: 1fr;

        grid-auto-rows: 240px;
    }

    .galeria-grande {
        grid-column: auto;
        grid-row: auto;
    }


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

    .avaliacoes-grid {
        grid-template-columns: 1fr;
    }

    .card-avaliacao:last-child {
        grid-column: auto;
    }

    .card-avaliacao p {
        min-height: auto;
    }


    /* =====================================================
       VÍDEOS
    ===================================================== */

    .video-placeholder {
        min-height: 240px;
    }


    /* =====================================================
       HORÁRIOS
    ===================================================== */

    .horarios-card {
        padding: 25px 20px;
    }

    .horario-linha {
        flex-direction: column;

        gap: 2px;
    }

    .horario-linha span {
        text-align: left;
    }


    /* =====================================================
       REDES SOCIAIS
    ===================================================== */

    .redes-secao {
        padding:
            45px 0;
    }

    .redes-conteudo {
        text-align: center;

        align-items: center;
    }

    .redes-botoes {
        width: 100%;

        flex-direction: column;
    }

    .rede-botao {
        justify-content: center;

        width: 100%;
    }


    /* =====================================================
       FORMULÁRIO
    ===================================================== */

    .formulario-contato {
        padding:
            25px 20px;
    }


    /* =====================================================
       CTA SERVIÇOS
    ===================================================== */

    .cursos {
        padding:
            55px 0;
    }

    .cursos-intro {
        text-align: center;
    }

    .cursos-intro h2 {
        font-size: 50px;
    }

    .cursos-intro h3 {
        font-size: 18px;
    }


    /* =====================================================
       PROFISSIONAIS
    ===================================================== */

    .profissionais-grid {
        grid-template-columns: 1fr;
    }

    .card-profissional img {
        height: 360px;
    }


    /* =====================================================
       HISTÓRIA COMPLETA
    ===================================================== */

    .historia-bloco {
        margin-bottom: 50px;
    }

    .historia-imagem {
        min-height: 300px;
    }


    /* =====================================================
       CURSO INTERNO
    ===================================================== */

    .curso-informacoes-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       PÁGINAS INTERNAS
    ===================================================== */

    .pagina-topo {
        padding:
            50px 0;
    }

    .pagina-topo h1 {
        font-size:
            clamp(34px, 11vw, 48px);

        letter-spacing: -1px;
    }

    .pagina-topo p {
        font-size: 15px;
    }


    /* =====================================================
       RODAPÉ
    ===================================================== */

    .rodape-grid {
        grid-template-columns: 1fr;

        padding:
            50px 0;

        gap: 32px;
    }

    .rodape-marca {
        align-items: center;

        text-align: center;
    }

    .rodape-grid
    > div:not(.rodape-marca) {
        align-items: center;

        text-align: center;
    }

    .rodape-final
    .container {
        flex-direction: column;

        gap: 5px;

        min-height: auto;

        padding:
            20px 0;
    }


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

    .whatsapp-flutuante {
        right: 15px;
        bottom: 15px;

        width: 53px;
        height: 53px;

        font-size: 21px;
    }

}


/* =========================================================
   CELULARES MUITO PEQUENOS
========================================================= */

@media (max-width: 380px) {

    .marca-espaco {
        max-width: 155px;

        font-size: 11px;
    }

    .marca-logo {
        width: 42px;
        height: 42px;
    }

    .hero-titulo-marca
    .hero-espaco-nome {
        font-size: 33px;
    }

    .hero-titulo-marca
    .hero-cetep-nome {
        font-size: 58px;
    }

    .hero-card {
        padding:
            22px 16px;
    }

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

    .avaliacoes-google-box {
        grid-template-columns: 1fr;

        padding: 25px 20px;

        text-align: center;
    }

    .avaliacoes-google-icone {
        margin: 0 auto;
    }

    .avaliacoes-google-conteudo
    .hero-botoes {
        flex-direction: column;
    }

    .avaliacoes-google-conteudo
    .botao {
        width: 100%;
    }

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

    .youtube-grid {
        grid-template-columns:
            minmax(0, 320px);

        gap: 25px;
    }

    .youtube-botao .botao {
        width: 100%;

        max-width: 360px;

        text-align: center;
    }

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

    .sobre-imagem-real,
    .sobre-imagem-real img {
        min-height: 420px;
    }

    .sobre-imagem-legenda {
        left: 15px;
        right: 15px;
        bottom: 15px;

        padding: 14px 16px;
    }

}
/* =========================================================
   EQUIPE HOME - RESPONSIVO
========================================================= */

@media (max-width: 1000px) {

    .equipe-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .equipe-home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .equipe-home-card .foto-profissional {
        height: 190px;
    }

    .equipe-home-card .card-profissional-conteudo {
        padding: 14px;
    }

    .equipe-home-card .card-profissional-conteudo h3 {
        font-size: 17px;
    }

    .equipe-home-card .card-profissional-conteudo strong {
        font-size: 12px;
    }

    .equipe-home-card .card-profissional-conteudo p {
        font-size: 12px;
        line-height: 1.45;
    }

    .equipe-home-card .card-tag {
        font-size: 10px;
    }

}