*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f5f8f4;
    color:#333;
}

.cabecalho{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 5px;
    background:#ffffff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo img{
    height:140px;
    width:auto;
    display:block;
}

.menu ul{
    display:flex;
    list-style:none;
    gap:25px;
}

.menu a{
    text-decoration:none;
    color:#333;
    font-weight:bold;
}

.menu a:hover{
    color:#2E7D32;
}

.botao,
.botao-verde{
    background:#2E7D32;
    color:white;
    padding:12px 24px;
    text-decoration:none;
    border-radius:30px;
    display:inline-block;
}

.hero{
    display:flex;
    align-items:center;
    min-height:85vh;
    padding:140px 80px 80px;
    background:linear-gradient(to right,#e8f5e9,#ffffff);
}

.hero h1{
    font-size:52px;
    margin-bottom:25px;
    color:#1b5e20;
}

.hero p{
    font-size:22px;
    max-width:700px;
    margin-bottom:35px;
    line-height:1.7;
}

.icone-social{
    width:32px;
    height:32px;
    margin-right:12px;
    transition:0.3s;
}

.icone-social:hover{
    transform:scale(1.15);
}

.instagram-link{
    display:flex;
    align-items:center;
    gap:4px;
    text-decoration:none;
    color:#333;
    font-weight:bold;
}

.instagram-link:hover{
    color:#2E7D32;
}

.icone-social{
    width:38px;
    height:38px;
    margin-right:3px;
}

.info-contato{
    margin-top:30px;
    background:#ffffff;
    padding:20px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    max-width:650px;
}

.info-contato p{
    margin:10px 0;
    font-size:18px;
    color:#333;
}

.icone{
    width:32px;
    height:32px;
    margin-right:12px;
    vertical-align:middle;
}

.info-contato p{
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
    font-size:20px;
}

.info-contato a{
    color:#333;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.info-contato a:hover{
    color:#2E7D32;
    text-decoration:underline;
}

.rodape{
    background:#0b5c2e;
    color:#ffffff;
    text-align:center;
    padding:25px 20px;
    font-size:16px;
}

.botao-menu{
    background:none;
    border:none;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    color:#333;
}

.botao-verde:hover,
.botao:hover{
    background:#1b5e20;
    transform:translateY(-2px);
    transition:0.3s;
}

.menu-lateral{
    position:fixed;
    top:0;
    right:-350px;
    width:320px;
    height:100vh;
    background:#fff;
    z-index:2000;
    padding:40px 30px;
    box-shadow:-5px 0 20px rgba(0,0,0,.15);
    transition:.3s;
}

.menu-lateral.ativo{
    right:0;
}

.menu-lateral nav{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-top:50px;
}

.menu-lateral nav a{
    text-decoration:none;
    color:#222;
    font-size:22px;
    font-weight:bold;
}

/* Ícones do menu */

.menu-lateral nav a{
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-lateral nav a i{
    width:24px;
    margin-right:12px;
    color:#1b5e20;
    text-align:center;
}

.fechar-menu{
    position:absolute;
    top:20px;
    right:25px;
    background:none;
    border:none;
    font-size:40px;
    cursor:pointer;
}

.fundo-menu{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1500;
}

.fundo-menu.ativo{
    display:block;
}

.acoes-topo{
    display:flex;
    align-items:center;
    gap:30px;
}

.galeria-depoimentos{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:30px;
    justify-content:center;
}

.galeria-depoimentos img{
    width:320px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition:.3s;
}

.galeria-depoimentos img:hover{
    transform:scale(1.03);
}

/* ===== Página Quem Sou ===== */

.hero{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
    padding:80px;
    background:linear-gradient(to right,#e8f5e9,#ffffff);
}

.hero .texto{
    flex:2;
}

.hero .foto{
    flex:1;
    display:flex;
    justify-content:center;
    position:sticky;
    top:140px;
}

.hero .foto img{
    width:100%;
    max-width:380px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.20);
}

.hero h1{
    color:#1b5e20;
    font-size:52px;
    margin-bottom:30px;
}

.hero h2{
    color:#1b5e20;
    margin-top:35px;
    margin-bottom:15px;
}

.hero p,
.hero li{
    font-size:20px;
    line-height:1.8;
}

.hero ul{
    margin-left:25px;
    margin-bottom:20px;
}

@media (max-width:900px){

.hero{
    flex-direction:column-reverse;
    padding:40px 20px;
}

.hero .foto{
    position:static;
    width:100%;
}

.hero .foto img{
    max-width:280px;
}

.hero h1{
    font-size:40px;
}

}

/* ===== Galeria do Projeto ===== */

.secao-galeria{
    padding:70px 80px;
    background:#ffffff;
}

.secao-galeria h2{
    text-align:center;
    font-size:42px;
    color:#1b5e20;
    margin-bottom:40px;
}

.galeria-projeto{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:25px;
}

.card-galeria{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    cursor:pointer;
    text-align:center;
}

.card-galeria img{
    width:100%;
    height:230px;
    object-fit:cover;
    display:block;
}

.card-galeria p{
    padding:15px;
    font-size:18px;
    font-weight:bold;
    color:#1b5e20;
}

/* Lightbox */

.lightbox{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.92);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.lightbox.ativo{
    display:flex;
}

.conteudo-lightbox{
    text-align:center;
    max-width:90%;
    max-height:90%;
}

.conteudo-lightbox img{
    display:block;
    max-width:80vw;
    max-height:70vh;
    object-fit:contain;
    border-radius:12px;
    transition:.3s;
    background:#ffffff;
    padding:5px;
}

#imagemLightbox{
    opacity:1;
    visibility:visible;
}

.conteudo-lightbox img.zoom{
    transform:scale(1.4);
}

.conteudo-lightbox p{
    color:white;
    font-size:24px;
    margin-top:15px;
    font-weight:bold;
}

.fechar-lightbox{
    position:fixed;
    top:20px;
    right:30px;
    background:#ffffff;
    color:#000;
    border:none;
    font-size:35px;
    width:50px;
    height:50px;
    border-radius:50%;
    cursor:pointer;
    z-index:10001;
}

.seta{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    background:#ffffff;
    color:#000;
    border:none;
    font-size:45px;
    width:55px;
    height:55px;
    border-radius:50%;
    cursor:pointer;
    z-index:10001;
}

.esquerda{
    left:30px;
}

.direita{
    right:30px;
}

.botao-zoom{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    background:#ffffff;
    color:#000;
    border:none;
    padding:12px 25px;
    border-radius:30px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    z-index:10001;
}

@media(max-width:768px){
    .secao-galeria{
        padding:40px 20px;
    }

    .seta{
        width:45px;
        height:45px;
        font-size:35px;
    }

    .esquerda{
        left:10px;
    }

    .direita{
        right:10px;
    }
}

/* ===== Depoimentos ===== */

.galeria-depoimentos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
    margin-top:30px;
}

.galeria-depoimentos img{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition:.3s;
}

.galeria-depoimentos img:hover{
    transform:scale(1.03);
}

.texto-centralizado{
    text-align:center;
    max-width:900px;
    margin:0 auto 40px;
    font-size:20px;
    line-height:1.7;
    color:#333;
}

/* ===== Página Contato ===== */

.cabecalho-pagina{
    padding:90px 20px 55px;
    text-align:center;
    background:linear-gradient(to right,#e8f5e9,#ffffff);
}

.cabecalho-pagina h1{
    color:#1b5e20;
    font-size:52px;
    margin-bottom:20px;
}

.cabecalho-pagina p{
    max-width:800px;
    margin:0 auto;
    font-size:21px;
    line-height:1.7;
}

.secao-contato{
    padding:70px 80px;
    background:#ffffff;
}

.grade-contato{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    max-width:1300px;
    margin:0 auto;
}

.card-contato{
    background:#f5f8f4;
    padding:30px 24px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.09);
    transition:.3s;
}

.card-contato:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.icone-contato{
    min-height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
    font-size:42px;
}

.icone-contato img{
    width:60px;
    height:60px;
    object-fit:contain;
    display:block;
}

.card-contato h2{
    color:#1b5e20;
    margin-bottom:15px;
    font-size:25px;
}

.card-contato p{
    line-height:1.7;
    margin-bottom:22px;
    word-break:break-word;
}

.botao-contato,
.botao-enviar{
    display:inline-block;
    background:#2e7d32;
    color:#ffffff;
    text-decoration:none;
    border:none;
    padding:12px 22px;
    border-radius:30px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.botao-contato:hover,
.botao-enviar:hover{
    background:#1b5e20;
    transform:translateY(-2px);
}

.secao-mapa{
    padding:70px 80px;
    background:#f5f8f4;
}

.secao-mapa h2{
    color:#1b5e20;
    text-align:center;
    font-size:38px;
    margin-bottom:35px;
}

.mapa-container{
    max-width:1200px;
    margin:0 auto;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.mapa-container iframe{
    width:100%;
    height:450px;
    border:0;
    display:block;
}

.secao-formulario{
    padding:70px 80px;
    background:#ffffff;
}

.formulario-container{
    max-width:850px;
    margin:0 auto;
    background:#f5f8f4;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.texto-formulario{
    text-align:center;
    margin-bottom:35px;
}

.texto-formulario h2{
    color:#1b5e20;
    font-size:36px;
    margin-bottom:15px;
}

.texto-formulario p{
    font-size:18px;
    line-height:1.7;
}

.campo-formulario{
    margin-bottom:22px;
}

.campo-formulario label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
    color:#1b5e20;
}

.campo-formulario input,
.campo-formulario textarea{
    width:100%;
    padding:14px;
    border:1px solid #cfd8cf;
    border-radius:10px;
    font-size:16px;
    background:#ffffff;
}

.campo-formulario textarea{
    resize:vertical;
}

.campo-formulario input:focus,
.campo-formulario textarea:focus{
    outline:2px solid #2e7d32;
    border-color:#2e7d32;
}

.botao-enviar{
    width:100%;
    padding:15px;
    font-size:18px;
}

.chamada-contato{
    padding:70px 20px;
    text-align:center;
    background:linear-gradient(to right,#dcedc8,#e8f5e9);
}

.chamada-contato h2{
    color:#1b5e20;
    font-size:36px;
    margin-bottom:18px;
}

.chamada-contato p{
    font-size:20px;
    margin-bottom:28px;
}

@media(max-width:768px){

    .cabecalho-pagina{
        padding:55px 20px 40px;
    }

    .cabecalho-pagina h1{
        font-size:38px;
    }

    .secao-contato,
    .secao-mapa,
    .secao-formulario{
        padding:45px 20px;
    }

    .formulario-container{
        padding:28px 20px;
    }

    .mapa-container iframe{
        height:350px;
    }

    .chamada-contato h2{
        font-size:29px;
    }
}

/* ==================================================
   PÁGINA DE AGENDAMENTO
================================================== */

.pagina-agendamento{
    min-height:100vh;
    padding-top:30px;
    background:
        linear-gradient(
            135deg,
            #f7fbf7 0%,
            #edf7ee 50%,
            #ffffff 100%
        );
}

/* Cabeçalho da página */

.cabecalho-agendamento{
    max-width:1000px;
    margin:0 auto;
    padding:55px 30px 35px;
    text-align:center;
}

.cabecalho-agendamento h1{
    margin:0 0 18px;
    color:#1b5e20;
    font-size:clamp(36px,5vw,54px);
    line-height:1.15;
}

.cabecalho-agendamento > p{
    max-width:780px;
    margin:0 auto;
    color:#465246;
    font-size:19px;
    line-height:1.7;
}

/* Aviso principal */

.aviso-agendamento{
    max-width:760px;
    margin:28px auto 0;
    padding:18px 22px;
    background:#fff8e1;
    color:#6d4c00;
    border:1px solid #f1d786;
    border-left:6px solid #d4a017;
    border-radius:14px;
    font-size:16px;
    line-height:1.6;
    text-align:left;
}

/* Área externa do formulário */

.secao-agendamento{
    padding:15px 25px 90px;
}

/* Card principal */

.formulario-agendamento{
    width:100%;
    max-width:980px;
    margin:0 auto;
    padding:42px;
    background:#ffffff;
    border:1px solid #e1ebe1;
    border-radius:26px;
    box-shadow:
        0 18px 50px rgba(27,94,32,.10),
        0 4px 14px rgba(0,0,0,.05);
}

/* Cada etapa */

.grupo-agendamento{
    min-width:0;
    margin:0 0 28px;
    padding:28px;
    background:#fbfdfb;
    border:1px solid #dce8dc;
    border-radius:18px;
}

.grupo-agendamento:hover{
    border-color:#a9caaa;
}

.grupo-agendamento legend{
    padding:0 14px;
    color:#1b5e20;
    font-size:22px;
    font-weight:700;
}

/* Textos e rótulos */

.grupo-agendamento > label,
.campo-agendamento label{
    display:block;
    margin-bottom:9px;
    color:#254728;
    font-size:16px;
    font-weight:700;
}

.grupo-agendamento > p{
    margin:0 0 16px;
    color:#414d42;
    font-size:16px;
    line-height:1.6;
}

.campo-agendamento small{
    display:block;
    margin-top:8px;
    color:#687468;
    font-size:13px;
    line-height:1.5;
}

/* Grade dos campos */

.grade-campos{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.campo-agendamento{
    min-width:0;
}

.campo-largo{
    grid-column:1 / -1;
}

/* Inputs, selects e textarea */

.formulario-agendamento input[type="text"],
.formulario-agendamento input[type="tel"],
.formulario-agendamento input[type="email"],
.formulario-agendamento input[type="date"],
.formulario-agendamento select,
.formulario-agendamento textarea{
    width:100%;
    min-height:52px;
    padding:13px 15px;
    color:#263326;
    background:#ffffff;
    border:1px solid #cbd8cb;
    border-radius:12px;
    font-family:inherit;
    font-size:16px;
    box-sizing:border-box;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.formulario-agendamento textarea{
    min-height:140px;
    resize:vertical;
    line-height:1.6;
}

.formulario-agendamento input::placeholder,
.formulario-agendamento textarea::placeholder{
    color:#98a298;
}

.formulario-agendamento input:focus,
.formulario-agendamento select:focus,
.formulario-agendamento textarea:focus{
    outline:none;
    background:#ffffff;
    border-color:#2e7d32;
    box-shadow:0 0 0 4px rgba(46,125,50,.12);
}

.formulario-agendamento select:disabled{
    color:#7a837a;
    background:#eef2ee;
    cursor:not-allowed;
}

/* Opções SUS, Particular e diagnóstico */

.opcoes-atendimento{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.opcao-agendamento{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:145px;
    min-height:52px;
    padding:12px 20px;
    color:#254728;
    background:#ffffff;
    border:2px solid #ceddce;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.opcao-agendamento:hover{
    color:#1b5e20;
    border-color:#71a874;
    background:#f1f8f1;
}

.opcao-agendamento input{
    width:18px;
    height:18px;
    margin:0 10px 0 0;
    accent-color:#2e7d32;
    cursor:pointer;
}

.opcao-agendamento:has(input:checked){
    color:#ffffff;
    background:#2e7d32;
    border-color:#2e7d32;
    box-shadow:0 7px 18px rgba(46,125,50,.22);
}

/* Aviso de atendimento particular */

.aviso-particular{
    margin:18px 0 0;
    padding:16px 18px;
    color:#6a4700;
    background:#fff7df;
    border:1px solid #ecd184;
    border-radius:12px;
    line-height:1.6;
}

/* Mensagem de data */

.mensagem-data{
    margin-top:18px;
    padding:15px 18px;
    color:#175a21;
    background:#eaf7ec;
    border:1px solid #aed7b3;
    border-left:5px solid #2e7d32;
    border-radius:12px;
    font-size:15px;
    line-height:1.6;
}

/* Esconde elementos controlados pelo JavaScript */

.oculto{
    display:none !important;
}

/* Confirmações */

.regras-agendamento{
    background:#f7faf7;
}

.aceite-agendamento{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:17px;
    padding:17px;
    color:#394539;
    background:#ffffff;
    border:1px solid #d9e3d9;
    border-radius:13px;
    font-size:15px;
    font-weight:400;
    line-height:1.6;
    cursor:pointer;
}

.aceite-agendamento:last-child{
    margin-bottom:0;
}

.aceite-agendamento input{
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin-top:2px;
    accent-color:#2e7d32;
    cursor:pointer;
}

.aceite-agendamento:has(input:checked){
    background:#edf8ef;
    border-color:#8fbe94;
}

/* Botão principal */

.botao-solicitar-agendamento{
    display:block;
    width:100%;
    min-height:58px;
    margin-top:8px;
    padding:15px 28px;
    color:#ffffff;
    background:linear-gradient(135deg,#2e7d32,#1b5e20);
    border:none;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(27,94,32,.23);
    font-family:inherit;
    font-size:19px;
    font-weight:700;
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.botao-solicitar-agendamento:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(27,94,32,.28);
    filter:brightness(1.04);
}

.botao-solicitar-agendamento:active{
    transform:translateY(0);
}

/* Aviso após o botão */

.aviso-final-agendamento{
    margin:20px 0 0;
    padding:17px 20px;
    color:#384538;
    background:#f0f5f0;
    border-radius:12px;
    font-size:15px;
    line-height:1.6;
    text-align:center;
}

.aviso-final-agendamento strong{
    color:#1b5e20;
}

/* Ajustes para tablet */

@media(max-width:900px){

    .pagina-agendamento{
        padding-top:90px;
    }

    .formulario-agendamento{
        padding:30px;
    }

    .cabecalho-agendamento{
        padding-top:25px;
    }
}

/* Ajustes para celular */

@media(max-width:680px){

    .pagina-agendamento{
        padding-top:70px;
    }

    .cabecalho-agendamento{
        padding:20px 20px 25px;
    }

    .cabecalho-agendamento h1{
        font-size:34px;
    }

    .cabecalho-agendamento > p{
        font-size:16px;
    }

    .aviso-agendamento{
        padding:15px 17px;
        font-size:14px;
    }

    .secao-agendamento{
        padding:10px 14px 60px;
    }

    .formulario-agendamento{
        padding:18px;
        border-radius:19px;
    }

    .grupo-agendamento{
        margin-bottom:22px;
        padding:20px 16px;
        border-radius:15px;
    }

    .grupo-agendamento legend{
        padding:0 8px;
        font-size:18px;
    }

    .grade-campos{
        grid-template-columns:1fr;
        gap:17px;
    }

    .campo-largo{
        grid-column:auto;
    }

    .opcoes-atendimento{
        flex-direction:column;
    }

    .opcao-agendamento{
        width:100%;
        justify-content:flex-start;
        box-sizing:border-box;
    }

    .formulario-agendamento input[type="text"],
    .formulario-agendamento input[type="tel"],
    .formulario-agendamento input[type="email"],
    .formulario-agendamento input[type="date"],
    .formulario-agendamento select,
    .formulario-agendamento textarea{
        font-size:16px;
    }

    .aceite-agendamento{
        padding:14px;
        font-size:14px;
    }

    .botao-solicitar-agendamento{
        font-size:17px;
    }
}

.mensagem-erro{
    display:block;
    margin-top:7px;
    color:#b42318;
    font-size:13px;
    font-weight:600;
}

.formulario-agendamento .campo-invalido{
    border-color:#d92d20 !important;
    background:#fff5f4 !important;
    box-shadow:0 0 0 4px rgba(217,45,32,.10) !important;
}

.formulario-agendamento .campo-valido{
    border-color:#2e7d32 !important;
    background:#f5fff6 !important;
}

/* =========================================
   LOGIN DA ÁREA ADMINISTRATIVA
========================================= */

.login-admin {
    min-height: 100vh;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6f2;
}

.login-box {
    width: 100%;
    max-width: 430px;
    padding: 35px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.login-box .logo-admin {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 22px;
    object-fit: contain;
}

.login-box h1 {
    margin-bottom: 10px;
    color: #174d2d;
    font-size: 28px;
}

.login-box > p {
    margin-bottom: 25px;
    color: #555555;
    line-height: 1.5;
}

.login-box form {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.login-box label {
    margin: 0 0 7px;
    color: #26352c;
    font-weight: 600;
}

.login-box input {
    width: 100%;
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid #b9c4bb;
    border-radius: 9px;
    font-size: 16px;
    box-sizing: border-box;
}

.login-box input:focus {
    outline: none;
    border-color: #1f6b3b;
    box-shadow: 0 0 0 3px rgba(31, 107, 59, 0.13);
}

.login-box button {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 9px;
    background: #1f6b3b;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.login-box button:hover {
    background: #164e2b;
}

#mensagemLogin {
    min-height: 22px;
    margin-top: 16px;
    color: #b42318;
    font-weight: 600;
}

@media (max-width: 520px) {
    .login-box {
        padding: 27px 20px;
    }

    .login-box .logo-admin {
        width: 135px;
    }

    .login-box h1 {
        font-size: 24px;
    }
}

/* =========================================
   PAINEL ADMINISTRATIVO
========================================= */

.painel-admin {
    min-height: 100vh;
    padding: 35px;
    background: #f4f7f4;
    color: #243127;
}

.painel-admin > h1 {
    margin-bottom: 8px;
    color: #174d2d;
    font-size: 32px;
}

.painel-admin > p {
    margin-bottom: 28px;
    color: #5c665f;
    font-size: 17px;
}

.cards-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.card-dashboard {
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    border-left: 5px solid #c79a2b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-dashboard h2 {
    margin-bottom: 8px;
    color: #174d2d;
    font-size: 34px;
}

.card-dashboard p {
    color: #666666;
    font-weight: 600;
}

.painel-admin hr {
    margin: 30px 0;
    border: none;
    border-top: 1px solid #d8ded9;
}

.painel-admin > h2 {
    margin-bottom: 20px;
    color: #174d2d;
    font-size: 26px;
}

#listaAgendamentos {
    display: grid;
    gap: 18px;
}

#listaAgendamentos > div {
    padding: 22px !important;
    margin-bottom: 0 !important;
    background: #ffffff;
    border: 1px solid #dce3dd !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

#listaAgendamentos h3 {
    margin-bottom: 14px;
    color: #174d2d;
    font-size: 22px;
}

#listaAgendamentos p {
    margin: 7px 0;
    color: #404a43;
    line-height: 1.5;
}

#listaAgendamentos strong {
    color: #202b23;
}

#btnSair {
    margin-top: 25px;
    padding: 12px 28px;
    border: none;
    border-radius: 9px;
    background: #8f2525;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#btnSair:hover {
    background: #6f1d1d;
}

@media (max-width: 1000px) {
    .cards-dashboard {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 600px) {
    .painel-admin {
        padding: 22px 15px;
    }

    .painel-admin > h1 {
        font-size: 27px;
    }

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

    .card-dashboard {
        padding: 20px;
    }

    #listaAgendamentos > div {
        padding: 18px !important;
    }
}

.status-final{
    margin-top:20px;
    padding:12px 18px;
    border-radius:10px;
    font-weight:700;
    display:inline-block;
    font-size:16px;
    border:1px solid transparent;
}

.status-confirmado{
    background:#e8f7ed;
    color:#176b35;
    border-color:#9ed7af;
}

.status-aguardando-atendimento{
    background:#e8f1fb;
    color:#245d8c;
    border-color:#aac7e1;
}

.status-cancelado{
    background:#fdeaea;
    color:#a82020;
    border-color:#e3aaaa;
}

.area-pesquisa{
    margin: 15px 0 22px;
}

.area-pesquisa input{
    width: 100%;
    max-width: 520px;
    padding: 13px 16px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    font-size: 16px;
    outline: none;
    background: #ffffff;
}

.area-pesquisa input:focus{
    border-color: #1f6f43;
    box-shadow: 0 0 0 3px rgba(31, 111, 67, 0.12);
}

.filtros-status{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.btn-filtro{
    padding:10px 18px;
    border:none;
    border-radius:8px;
    background:#e6e6e6;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;
}

.btn-filtro:hover{
    background:#d6d6d6;
}

.btn-filtro.ativo{
    background:#1f6f43;
    color:white;
}

.card-filtro-dashboard{
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
}

.card-filtro-dashboard:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0, 0, 0, 0.10);
}

.agenda-hoje{
    margin: 30px 0;
    padding: 24px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.cabecalho-agenda-hoje{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.cabecalho-agenda-hoje h2{
    margin: 0 0 5px;
    color: #155c38;
}

.cabecalho-agenda-hoje p{
    margin: 0;
    color: #666666;
}

.total-hoje{
    min-width: 110px;
    padding: 12px 18px;
    text-align: center;
    background: #edf7f1;
    border-radius: 10px;
    color: #176b35;
}

.total-hoje strong{
    display: block;
    font-size: 26px;
}

.total-hoje span{
    font-size: 13px;
}

.item-agenda-hoje{
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-top: 1px solid #eeeeee;
}

.horario-agenda-hoje{
    min-width: 75px;
    font-size: 18px;
    font-weight: 700;
    color: #155c38;
}

.dados-agenda-hoje{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
}

.dados-agenda-hoje span{
    color: #666666;
    font-size: 14px;
}

.status-agenda-hoje{
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.status-hoje-confirmado{
    background: #e7f7ed;
    color: #176b35;
}

.status-hoje-cancelado{
    background: #fdeaea;
    color: #a82020;
}

.status-hoje-aguardando{
    background: #fff4d7;
    color: #866000;
}

.status-hoje-aguardando-atendimento{
    background:#e8f1fb;
    color:#245d8c;
}

.status-hoje-neutro{
    background:#eef1f0;
    color:#4f5b56;
}

.sem-atendimento-hoje{
    padding: 20px;
    text-align: center;
    background: #f7f7f7;
    border-radius: 10px;
    color: #666666;
}

@media (max-width: 700px){

    .cabecalho-agenda-hoje{
        align-items: flex-start;
    }

    .item-agenda-hoje{
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .status-agenda-hoje{
        margin-left: 93px;
    }

}

/* =========================================
   AGENDA POR DATA
========================================= */

.agenda-por-data{
    margin:30px 0;
    padding:26px;
    background:#ffffff;
    border-radius:15px;
    box-shadow:0 6px 22px rgba(0, 0, 0, 0.07);
}

.cabecalho-agenda-data{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:25px;
    margin-bottom:24px;
}

.cabecalho-agenda-data h2{
    margin:0 0 7px;
    color:#155c38;
}

.cabecalho-agenda-data p{
    margin:0;
    color:#666666;
}

.campo-data-agenda{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:240px;
}

.campo-data-agenda label{
    font-weight:700;
    color:#333333;
}

.campo-data-agenda input{
    width:100%;
    padding:12px 14px;
    border:1px solid #cccccc;
    border-radius:9px;
    background:#ffffff;
    font-size:16px;
    outline:none;
}

.campo-data-agenda input:focus{
    border-color:#1f6f43;
    box-shadow:0 0 0 3px rgba(31, 111, 67, 0.12);
}

.resumo-agenda-data{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:14px;
    margin-bottom:25px;
}

.resumo-data-card{
    padding:16px;
    border-radius:11px;
    text-align:center;
    background:#f3f5f4;
    border:1px solid #e3e7e5;
}

.resumo-data-card strong{
    display:block;
    margin-bottom:4px;
    color:#155c38;
    font-size:27px;
}

.resumo-data-card span{
    font-size:14px;
    font-weight:700;
    color:#555555;
}

.resumo-confirmados{
    background:#e9f7ee;
    border-color:#b8dfc6;
}

.resumo-confirmados strong{
    color:#176b35;
}

.resumo-aguardando{
    background:#fff6dd;
    border-color:#eed89b;
}

.resumo-aguardando strong{
    color:#8a6500;
}

.resumo-aguardando-atendimento{
    background:#e8f1fb;
    border-color:#aac7e1;
}

.resumo-aguardando-atendimento strong{
    color:#245d8c;
}

.resumo-cancelados{
    background:#fdeaea;
    border-color:#e8b4b4;
}

.resumo-cancelados strong{
    color:#a82020;
}

.titulo-lista-agenda-data{
    padding-top:4px;
    margin-bottom:10px;
}

.titulo-lista-agenda-data h3{
    margin:0;
    color:#155c38;
}

.item-agenda-data{
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    gap:18px;
    padding:17px 5px;
    border-top:1px solid #eeeeee;
}

.horario-agenda-data{
    font-size:20px;
    font-weight:800;
    color:#155c38;
}

.dados-agenda-data{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.dados-agenda-data strong{
    font-size:17px;
    color:#174e34;
}

.dados-agenda-data span{
    color:#666666;
    font-size:14px;
}

.status-agenda-data{
    padding:8px 13px;
    border-radius:20px;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.status-data-confirmado{
    background:#e7f7ed;
    color:#176b35;
}

.status-data-aguardando{
    background:#fff4d7;
    color:#866000;
}

.status-data-aguardando-atendimento{
    background:#e8f1fb;
    color:#245d8c;
}

.status-data-neutro{
    background:#eef1f0;
    color:#4f5b56;
}

.status-data-cancelado{
    background:#fdeaea;
    color:#a82020;
}

.mensagem-agenda-vazia{
    padding:25px;
    text-align:center;
    border-radius:10px;
    background:#f6f6f6;
    color:#666666;
}

@media (max-width:800px){

    .cabecalho-agenda-data{
        align-items:stretch;
        flex-direction:column;
    }

    .campo-data-agenda{
        min-width:0;
        width:100%;
    }

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

    .item-agenda-data{
        grid-template-columns:75px 1fr;
    }

    .status-agenda-data{
        grid-column:2;
        justify-self:start;
    }

}

/* =========================================
   MODAL DE DETALHES DO AGENDAMENTO
========================================= */

.modal-detalhes{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0, 0, 0, 0.55);
    z-index:9999;
}

.modal-detalhes.aberto{
    display:flex;
}

.modal-conteudo{
    width:100%;
    max-width:680px;
    max-height:90vh;
    overflow-y:auto;
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0, 0, 0, 0.25);
}

.modal-topo{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 24px;
    background:#ffffff;
    border-bottom:1px solid #e8e8e8;
    border-radius:16px 16px 0 0;
}

.modal-topo h2{
    margin:0;
    color:#155c38;
    font-size:24px;
}

#fecharModalDetalhes{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:#f3f3f3;
    color:#8b1f1f;
    font-size:18px;
    cursor:pointer;
    transition:background .2s, transform .2s;
}

#fecharModalDetalhes:hover{
    background:#f7dddd;
    transform:scale(1.05);
}

#conteudoModalDetalhes{
    padding:24px;
}

.detalhes-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.detalhe-item{
    padding:15px;
    background:#f7f9f8;
    border:1px solid #e2e8e4;
    border-radius:10px;
}

.detalhe-item.detalhe-completo{
    grid-column:1 / -1;
}

.detalhe-item strong{
    display:block;
    margin-bottom:6px;
    color:#155c38;
    font-size:14px;
}

.detalhe-item span{
    color:#333333;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.modal-status{
    display:inline-block;
    padding:8px 13px;
    border-radius:20px;
    font-weight:700;
}

.modal-status-confirmado{
    background:#e7f7ed;
    color:#176b35;
}

.modal-status-aguardando{
    background:#fff4d7;
    color:#866000;
}

.modal-status-aguardando-atendimento{
    background:#e8f1fb;
    color:#245d8c;
}

.modal-status-neutro{
    background:#eef1f0;
    color:#4f5b56;
}

.modal-status-cancelado{
    background:#fdeaea;
    color:#a82020;
}

@media (max-width:600px){

    .modal-detalhes{
        padding:10px;
    }

    .modal-conteudo{
        max-height:95vh;
    }

    .modal-topo{
        padding:16px;
    }

    .modal-topo h2{
        font-size:20px;
    }

    #conteudoModalDetalhes{
        padding:16px;
    }

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

    .detalhe-item.detalhe-completo{
        grid-column:auto;
    }

}

/* =========================================
   BOTÃO VER DETALHES
========================================= */

.btn-ver-detalhes{

    margin-left:10px;

    padding:10px 16px;

    border:none;

    border-radius:8px;

    background:#0d6efd;

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.btn-ver-detalhes:hover{

    background:#0b5ed7;

    transform:translateY(-2px);

}

/* =========================================
   CABEÇALHO DOS DETALHES
========================================= */

.cabecalho-detalhes{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
    padding:18px;
    background:#f3f8f5;
    border:1px solid #dce9e1;
    border-radius:12px;
}

.icone-paciente{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:50%;
    background:#155c38;
    color:#ffffff;
    font-size:30px;
}

.info-cabecalho-detalhes{
    flex:1;
    min-width:0;
}

.info-cabecalho-detalhes h2{
    margin:0 0 6px;
    color:#155c38;
    font-size:22px;
    overflow-wrap:anywhere;
}

.info-cabecalho-detalhes p{
    margin:0;
    color:#555555;
    font-size:14px;
    overflow-wrap:anywhere;
}

@media (max-width:600px){

    .cabecalho-detalhes{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .cabecalho-detalhes .modal-status{
        margin-left:78px;
    }

}

/* =========================================
   BOTÃO WHATSAPP DO MODAL
========================================= */

.acoes-modal-detalhes{
    display:flex;
    justify-content:flex-end;
    margin:0 0 20px;
}

.btn-modal-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 18px;
    border:none;
    border-radius:9px;
    background:#25d366;
    color:#ffffff;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:background .2s, transform .2s;
}

.btn-modal-whatsapp:hover{
    background:#1ebe5d;
    transform:translateY(-2px);
}

.btn-modal-whatsapp.desabilitado{
    background:#b5b5b5;
    cursor:not-allowed;
    transform:none;
}

/* =========================================
   PÁGINA CONSULTAR AGENDAMENTO
========================================= */

.pagina-consulta-agendamento {
    min-height: calc(100vh - 260px);
    padding: 70px 20px;
    background: #f6f3eb;
}

.secao-consulta-agendamento {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

.cabecalho-consulta-paciente {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}

.cabecalho-consulta-paciente > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e7f3e9;
    color: #176b34;
    font-size: 28px;
}

.cabecalho-consulta-paciente h1 {
    margin: 0 0 8px;
    color: #174d2c;
    font-size: 32px;
    line-height: 1.2;
}

.cabecalho-consulta-paciente p {
    margin: 0;
    color: #5f665f;
    font-size: 16px;
    line-height: 1.5;
}

.formulario-consulta-agendamento {
    display: grid;
    gap: 22px;
}

.campo-consulta-agendamento {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo-consulta-agendamento label {
    color: #263c2e;
    font-weight: 700;
    font-size: 15px;
}

.campo-consulta-agendamento input {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    border: 1px solid #cbd5ce;
    border-radius: 10px;
    background: #ffffff;
    color: #202620;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.campo-consulta-agendamento input:focus {
    border-color: #287a43;
    box-shadow: 0 0 0 3px rgba(40, 122, 67, 0.14);
}

.botao-consultar-agendamento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    background: #176b34;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-consultar-agendamento:hover {
    background: #0f5628;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(23, 107, 52, 0.22);
}

.mensagem-consulta-agendamento {
    min-height: 22px;
    margin: 0;
    color: #a33a2b;
    font-weight: 600;
    text-align: center;
}

.resultado-consulta-agendamento {
    margin-top: 32px;
    padding: 28px;
    border: 1px solid #dce6df;
    border-radius: 14px;
    background: #f9fbf9;
}

.topo-resultado-consulta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dce6df;
}

.topo-resultado-consulta h2 {
    margin: 0 0 8px;
    color: #174d2c;
    font-size: 24px;
}

.topo-resultado-consulta p {
    margin: 0;
    color: #59635c;
    word-break: break-word;
}

.consulta-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.consulta-status-aguardando {
    background: #fff3cd;
    color: #856404;
}

.consulta-status-confirmado {
    background: #d9f2df;
    color: #176b34;
}

.consulta-status-cancelado {
    background: #f8d7da;
    color: #8f1d2c;
}

.grade-resultado-consulta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.item-resultado-consulta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e3e9e5;
}

.item-resultado-consulta strong {
    color: #174d2c;
    font-size: 14px;
}

.item-resultado-consulta span {
    color: #333b35;
    font-size: 16px;
    word-break: break-word;
}

.item-resultado-completo {
    grid-column: 1 / -1;
}

.mensagem-status-consulta {
    margin-top: 20px;
    padding: 16px;
    border-left: 4px solid #287a43;
    border-radius: 8px;
    background: #edf6ef;
    color: #304d37;
    line-height: 1.6;
}

@media (max-width: 700px) {

    .pagina-consulta-agendamento {
        padding: 35px 14px;
    }

    .secao-consulta-agendamento {
        padding: 25px 18px;
        border-radius: 14px;
    }

    .cabecalho-consulta-paciente {
        align-items: flex-start;
    }

    .cabecalho-consulta-paciente > i {
        width: 52px;
        height: 52px;
        font-size: 23px;
    }

    .cabecalho-consulta-paciente h1 {
        font-size: 25px;
    }

    .topo-resultado-consulta {
        flex-direction: column;
    }

    .grade-resultado-consulta {
        grid-template-columns: 1fr;
    }

    .item-resultado-completo {
        grid-column: auto;
    }

}

/* =========================================
   AÇÕES DO PAINEL ADMINISTRATIVO
========================================= */

.acoes-painel {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-abrir-recepcao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    background: #145c32;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.btn-abrir-recepcao:hover {
    background: #0f4727;
}

/* =========================================
   CABEÇALHO DO LOGIN ADMINISTRATIVO
========================================= */

.cabecalho-admin-login {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 30px;
}

.voltar-site {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #145c32;
    text-decoration: none;
    font-weight: 700;
}

.voltar-site:hover {
    text-decoration: underline;
}

/* =========================================
   PÁGINAS PROTEGIDAS
========================================= */

.pagina-protegida {
    visibility: hidden;
}

.pagina-protegida.acesso-autorizado {
    visibility: visible;
}

/* =====================================================
   RESPONSIVIDADE DO CABEÇALHO — CELULAR
   Não altera computador ou notebook
===================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .cabecalho {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

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

        gap: 16px;
        padding: 16px;
    }

    .logo {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo img {
        width: auto;
        max-width: 260px;
        height: auto;
        display: block;
    }

    .acoes-topo {
        width: 100%;
        max-width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        gap: 18px;
        box-sizing: border-box;
    }

    .botao-menu,
    .acoes-topo a {
        max-width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .pagina-agendamento,
    .secao-agendamento,
    .formulario-agendamento {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }

}

/* =====================================================
   CARTÃO DE CONTATO — SOMENTE CELULAR
   Não altera computador ou notebook
===================================================== */

@media screen and (max-width: 768px) {

    .info-contato {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        min-width: 0;

        margin: 24px auto 0;
        padding: 20px 16px;

        box-sizing: border-box;
        overflow: hidden;
    }

    .info-contato p {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;

        gap: 12px;
        margin: 18px 0;

        font-size: 16px;
        line-height: 1.55;
        text-align: left;

        box-sizing: border-box;
    }

    .info-contato .icone {
        width: 32px;
        height: 32px;

        margin: 0;
        flex-shrink: 0;
    }

    .info-contato a,
    .info-contato span,
    .info-contato strong {
        min-width: 0;
        max-width: 100%;

        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

}

/* =====================================================
   TIPOGRAFIA E ALINHAMENTO — SOMENTE CELULAR
   Não altera computador ou notebook
===================================================== */

@media screen and (max-width: 768px) {

    /* =========================================
       ÁREA PRINCIPAL DA PÁGINA INICIAL
    ========================================= */

    .hero {
        width: 100%;
        max-width: 100%;
        padding: 45px 22px;
        gap: 30px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .hero .texto {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px;

        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.12;
        text-align: left;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .hero h2 {
        font-size: 25px;
        line-height: 1.25;
    }

    .hero p,
    .hero li {
        max-width: 100%;

        font-size: 18px;
        line-height: 1.65;
        text-align: left;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .hero .botao,
    .hero .botao-verde {
        width: 100%;
        max-width: 100%;

        padding: 14px 18px;

        font-size: 17px;
        line-height: 1.3;
        text-align: center;

        box-sizing: border-box;
    }


    /* =========================================
       CARTÃO DE ENDEREÇO E CONTATO
    ========================================= */

    .info-contato {
        width: 100%;
        max-width: 100%;

        margin: 28px auto 0;
        padding: 24px 18px;

        box-sizing: border-box;
        overflow: hidden;
    }

    .info-contato p {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;

        gap: 12px;
        margin: 20px 0;

        font-size: 16px;
        line-height: 1.55;
        text-align: left;

        box-sizing: border-box;
    }

    .info-contato a,
    .info-contato span,
    .info-contato strong {
        min-width: 0;
        max-width: 100%;

        font-size: inherit;
        line-height: inherit;

        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    .info-contato .icone {
        width: 30px;
        height: 30px;
        margin: 0;
    }


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

    .botao,
    .botao-verde,
    .botao-contato {
        max-width: 100%;
        padding: 13px 18px;

        font-size: 16px;
        line-height: 1.3;
        text-align: center;

        box-sizing: border-box;
        white-space: normal;
    }


    /* =========================================
       TÍTULOS GERAIS
    ========================================= */

    .cabecalho-pagina h1,
    .secao-galeria h2,
    .secao-mapa h2,
    .texto-formulario h2,
    .chamada-contato h2 {
        font-size: 30px;
        line-height: 1.2;
        overflow-wrap: break-word;
    }


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

    .rodape {
        width: 100%;
        max-width: 100%;

        padding: 24px 18px;

        font-size: 15px;
        line-height: 1.55;
        text-align: center;

        box-sizing: border-box;
        overflow: hidden;
    }

    .rodape p,
    .rodape span {
        max-width: 100%;
        margin: 0 auto;

        font-size: inherit;
        line-height: inherit;

        overflow-wrap: break-word;
        word-break: normal;
    }

}

/* =====================================================
   CABEÇALHO E RODAPÉ — SOMENTE CELULAR
   Não altera computador ou notebook
===================================================== */

@media screen and (max-width: 768px) {

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

    .cabecalho {
        width: 100%;
        max-width: 100%;

        padding: 18px 20px;

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

        gap: 16px;
        box-sizing: border-box;
    }

    .cabecalho .logo img {
        width: 210px;
        max-width: 55vw;
        height: auto;
    }

    .acoes-topo {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        gap: 16px;
    }

    .botao-menu,
    .instagram-topo,
    .instagram-link {
        font-size: 16px;
    }


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

    .rodape {
        width: 100%;
        max-width: 100%;

        padding: 18px 20px;

        font-size: 14px;
        line-height: 1.45;
        text-align: center;

        box-sizing: border-box;
    }

    .rodape p {
        margin: 0;
    }

}

/* =====================================================
   AJUSTE FINAL — CELULAR MAIS PRÓXIMO DO DESKTOP
===================================================== */

@media screen and (max-width: 768px) {

    /* CABEÇALHO */

    .cabecalho {
        padding: 12px 16px;
        gap: 10px;
    }

    .cabecalho .logo img {
        width: 175px;
        max-width: 48vw;
        height: auto;
    }

    .acoes-topo {
        gap: 12px;
    }

    .botao-menu,
    .instagram-link {
        font-size: 15px;
    }

    .icone-social {
        width: 28px;
        height: 28px;
    }

    /* ÁREA PRINCIPAL */

    .hero {
        padding: 34px 20px;
        gap: 22px;
    }

    .hero h1 {
        margin-bottom: 18px;
        font-size: clamp(29px, 8vw, 36px);
        line-height: 1.08;
    }

    .hero p,
    .hero li {
        font-size: 16px;
        line-height: 1.55;
    }

    .hero .botao,
    .hero .botao-verde {
        padding: 12px 16px;
        font-size: 16px;
    }

    /* CARTÃO DE CONTATO */

    .info-contato {
        margin-top: 22px;
        padding: 20px 16px;
    }

    .info-contato p {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        margin: 15px 0;
        font-size: 15px;
        line-height: 1.45;
    }

    .info-contato .icone {
        width: 27px;
        height: 27px;
    }

    /* RODAPÉ */

    .rodape {
        padding: 16px 14px;
        font-size: 13px;
        line-height: 1.4;
    }

}

/* =====================================================
   MENU LATERAL — SOMENTE CELULAR
===================================================== */

@media screen and (max-width: 768px) {

    .menu-lateral {
        width: min(74vw, 280px);
        right: min(-74vw, -280px);

        padding: 26px 18px;

        box-sizing: border-box;
        overflow-y: auto;
    }

    .menu-lateral.ativo {
        right: 0;
    }

    .menu-lateral nav {
        gap: 16px;
        margin-top: 40px;
    }

    .menu-lateral nav a {
        gap: 9px;
        font-size: 16px;
        line-height: 1.2;
    }

    .menu-lateral nav a i {
        width: 22px;
        margin-right: 4px;
        font-size: 19px;
    }

    .fechar-menu {
        top: 14px;
        right: 16px;
        font-size: 32px;
        line-height: 1;
    }

}