@charset "utf-8";

:root{
    /* PALETA — SÃO JOSÉ DE CHAMBÉRY (novo layout) */
    --sj-azul:           #1d8ad8;
    --sj-azul-claro:     #79b2df;
    --sj-azul-suave:     #c4dcf1;
    --sj-azul-medio:     #006eae;
    --sj-azul-escuro:    #00497c;
    --sj-azul-rodape:    #003a66;
    --sj-azul-base:      #002848;
    --sj-cinza:          #eaeaea;
    --sj-cinza-borda:    #e3e6eb;
    --sj-cinza-texto:    #6b7785;
    --sj-titulo:         #0d1a26;
    --sj-texto:          #1a1a1a;
    --sj-verde:          #62a431;
    --sj-verde-escuro:   #4f8527;
    --sj-trans:          all .3s ease;

    /* ALIASES — compatibilidade com partes antigas */
    --azul:              var(--sj-azul);
    --azul-claro:        var(--sj-azul-claro);
    --azul-medio:        var(--sj-azul-medio);
    --azul-escuro:       var(--sj-azul-escuro);
    --azul-rodape:       var(--sj-azul-rodape);
    --azul-suave:        var(--sj-azul-suave);
    --azul-borda:        var(--sj-cinza-borda);
    --cinza-bg:          var(--sj-cinza);
    --cinza-borda:       var(--sj-cinza-borda);
    --cinza-texto:       var(--sj-cinza-texto);
    --titulo:            var(--sj-titulo);
    --texto:             var(--sj-texto);
    --branco:            #ffffff;
    --verde:             var(--sj-verde);
    --cor-primaria:      var(--sj-azul);
    --cor-secundaria:    var(--sj-azul-escuro);
    --cor-destaque:      var(--sj-azul-claro);
    --cor-texto:         var(--sj-texto);

    --fonte-padrao:      'Figtree', 'Segoe UI', Calibri, Arial, sans-serif;
    --radius:            10px;
    --radius-sm:         6px;
    --shadow:            0 10px 28px rgba(0, 73, 124, .08);
    --shadow-hover:      0 18px 40px rgba(0, 73, 124, .16);
    --transicao:         var(--sj-trans);
}

*{margin:0;padding:0;border:0;list-style:none;text-decoration:none;box-sizing:border-box;}
html{overflow-x:hidden;scroll-behavior:smooth;}
body{font-family:var(--fonte-padrao);font-size:15px;line-height:1.55;color:var(--sj-texto);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
*:focus{outline:none;}
img{max-width:100%;display:block;}
a{color:var(--sj-azul);text-decoration:none;transition:var(--sj-trans);}
a:hover{color:var(--sj-azul-escuro);}
button{cursor:pointer;background:transparent;font-family:inherit;color:inherit;}

/* CONTÊINER PRINCIPAL — 1150px conforme padrão do projeto */
.util{width:1150px;max-width:calc(100% - 40px);margin:0 auto;position:relative;}

.anima{transition:var(--sj-trans);}
.esconde{display:none !important;}
.clearfix:after{content:"";display:table;clear:both;}

/* TAGS H1/H2 OCULTOS PARA SEO */
.tags_especiais{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* AVISOS GERAIS */
#mascara2,#mascara_filtros,#mascara_busca{display:none;position:fixed;inset:0;background:rgba(0,40,72,.6);z-index:1091;}
#amensagem{display:none;position:fixed;inset:0;padding:50px 20px;font-size:18px;font-weight:600;color:#fff;text-align:center;z-index:5000001;}
#amensagem_curta{display:none;position:fixed;bottom:20px;right:20px;max-width:320px;padding:18px 22px;font-size:14px;font-weight:600;color:#fff;background:var(--sj-azul-escuro);border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:5000001;}
#amensagem_curta i { opacity:0.5; margin: 0px 10px 0px 0px; }

/* CHAMA WHATSAPP FLUTUANTE */
.chama-whats{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:2001;box-shadow:0 8px 20px rgba(37,211,102,.4);transition:var(--sj-trans);}
.chama-whats:hover{transform:translateY(-3px);color:#fff;}

/* TÍTULOS PADRÃO */
h1,h2,h3,h4{color:var(--sj-titulo);font-weight:700;line-height:1.2;}

/* CARREGANDO */
body.menu-mobile-aberto{overflow:hidden;}

/* =========================================================
   TÍTULO PADRÃO DAS PÁGINAS (.titulo_global)
   Estrutura HTML reaproveitada em contato, ouvidoria, localizacao,
   capela e demais páginas internas:
   <div class="titulo_global">
       <div class="tag_global">
           <div class="label_global"><span>Título</span></div>
           <div class="complemento">Subtítulo / introdução</div>
       </div>
   </div>
   ========================================================= */
.titulo_global{padding:46px 0 22px;text-align:left;position:relative;}
.titulo_global .tag_global{display:block;}
.titulo_global .label_global{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:0;}
.titulo_global .label_global:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sj-azul);display:inline-block;flex-shrink:0;box-shadow:0 0 0 4px rgba(29,138,216,.15);}
.titulo_global .label_global span{font-size:28px;font-weight:900;color:var(--sj-titulo);letter-spacing:-.02em;line-height:1.15;display:inline-block;background:transparent;padding:0;}
.titulo_global .label_global span:before{display:none;}
.titulo_global .complemento{font-size:15px;line-height:1.55;color:var(--sj-cinza-texto);max-width:760px;font-weight:400;margin:0;padding:0;}

@media (max-width:760px){
    .titulo_global{padding:32px 0 16px;}
    .titulo_global .label_global span{font-size:22px;}
    .titulo_global .complemento{font-size:14px;}
}

/* =========================================================
   FORMULÁRIOS — visual clean e padronizado para todas as páginas
   Vence o CSS antigo via maior especificidade + alvos amplos.
   Use .form-clean ou simplesmente um <form> dentro de <section>.
   ========================================================= */
section form,
.form-clean,
section .formulario{font-family:var(--fonte-padrao);color:var(--sj-texto);}

/* INPUTS, TEXTAREAS, SELECTS */
section form input[type="text"],
section form input[type="email"],
section form input[type="tel"],
section form input[type="number"],
section form input[type="password"],
section form input[type="search"],
section form input[type="url"],
section form textarea,
section form select,
.form-clean input[type="text"],
.form-clean input[type="email"],
.form-clean input[type="tel"],
.form-clean input[type="number"],
.form-clean textarea,
.form-clean select,
.campo-contato{
    width:100%;
    height:48px;
    padding:0 16px;
    background:#fff;
    border:1px solid var(--sj-cinza-borda);
    border-radius:10px;
    color:var(--sj-titulo);
    font-family:var(--fonte-padrao);
    font-size:14px;
    line-height:1.4;
    transition:var(--sj-trans);
    box-sizing:border-box;
    margin:0 0 12px;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
}

/* TEXTAREAS */
section form textarea,
.form-clean textarea,
textarea.campo-contato{
    height:auto !important;
    min-height:130px;
    padding:14px 16px;
    line-height:1.55;
    resize:vertical;
}

/* SELECT — seta customizada */
section form select,
.form-clean select{
    height:48px;
    padding:0 42px 0 16px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231d8ad8' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    cursor:pointer;
}

/* FOCUS — destaque azul suave */
section form input:focus,
section form textarea:focus,
section form select:focus,
.form-clean input:focus,
.form-clean textarea:focus,
.form-clean select:focus,
.campo-contato:focus{
    border-color:var(--sj-azul);
    box-shadow:0 0 0 3px rgba(29,138,216,.14);
    background:#fff;
    outline:none;
}

/* PLACEHOLDER */
section form ::placeholder,
.form-clean ::placeholder,
.campo-contato::placeholder{color:#9aa6b3;font-weight:400;opacity:1;}

/* CHECKBOX (LINHA DE ACEITE) */
.linha_aceite{display:flex;align-items:center;gap:10px;padding:14px 0 24px;font-size:13px;line-height:1.5;color:var(--sj-cinza-texto);flex-wrap:wrap;}
.linha_aceite label{margin:0;cursor:pointer;}
.linha_aceite input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--sj-azul);cursor:pointer;flex-shrink:0;}
.linha_aceite a{color:var(--sj-azul);text-decoration:underline;font-weight:600;}
.linha_aceite a:hover{color:var(--sj-azul-escuro);}

/* BOTÃO DE ENVIO */
section form input[type="submit"],
section form button[type="submit"],
.form-clean input[type="submit"],
.form-clean button[type="submit"],
.botao-contato,
.botao-padrao{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:200px;
    width:auto !important;
    height:50px !important;
    padding:0 32px !important;
    background:var(--sj-azul) !important;
    color:#fff !important;
    font-family:var(--fonte-padrao);
    font-size:13px !important;
    font-weight:900 !important;
    text-transform:uppercase;
    letter-spacing:.06em;
    border:0 !important;
    border-radius:10px !important;
    cursor:pointer;
    transition:var(--sj-trans);
    text-align:center;
    line-height:1 !important;
    box-shadow:0 8px 18px rgba(29,138,216,.22);
    margin:0;
}
section form input[type="submit"]:hover,
section form button[type="submit"]:hover,
.form-clean input[type="submit"]:hover,
.form-clean button[type="submit"]:hover,
.botao-contato:hover,
.botao-padrao:hover{
    background:var(--sj-azul-escuro) !important;
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(29,138,216,.32);
}
.botao-contato.opaco,
.botao-padrao.opaco{opacity:.45;cursor:not-allowed;box-shadow:none;}
.botao-contato.opaco:hover,
.botao-padrao.opaco:hover{transform:none;}

/* GRID INTERNO DO FORM — flexbox elimina o bug de espaço em branco do inline-block */
section form,
section .formulario form,
.form-clean{
    display:flex;
    flex-wrap:wrap;
    gap:0 12px;            /* gap horizontal entre colunas (linha não usa) */
    align-items:flex-start;
}
section form > input[type="hidden"]{display:none;}

section form .colunas,
section form .colunas_esquerda,
section .formulario .colunas,
section .formulario .colunas_esquerda{
    flex:1 1 calc(50% - 6px);
    width:auto !important;
    max-width:calc(50% - 6px);
    min-width:0;
    margin:0 !important;
    float:none !important;
    text-align:left !important;
    box-sizing:border-box;
}
section form .linha,
section form .linha_aceite,
section .formulario .linha,
section .formulario .linha_aceite{
    flex:1 1 100%;
    width:100%;
    max-width:100%;
    margin:0;
    text-align:left !important;
}

@media (max-width:670px){
    section form .colunas,
    section form .colunas_esquerda,
    section .formulario .colunas,
    section .formulario .colunas_esquerda{
        flex:1 1 100%;
        max-width:100%;
        width:100% !important;
        margin:0 !important;
    }
    section form input[type="submit"],
    section form button[type="submit"],
    .botao-contato{width:100% !important;}
}

/* =========================================================
   POPUP INICIAL (#mascara / #pop / #fechapopup)
   Markup gerado em pg/ajax/utilitarios.php (popup -> status 'S').
   ========================================================= */
#mascara,#mascarafb{position:fixed;inset:0;background:rgba(0,40,72,.85);z-index:100001;text-align:center;}
#pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100002;max-width:calc(100% - 40px);}
#pop img{max-width:100%;max-height:85vh;width:auto;border-radius:var(--radius);box-shadow:var(--shadow-hover);}
#fechapopup{position:absolute;left:50%;top:-19px;transform:translateX(-50%);min-width:38px;height:38px;line-height:38px;padding:0 14px;text-align:center;border-radius:20px;background:var(--sj-azul);color:#fff;font-size:14px;font-weight:700;cursor:pointer;z-index:100003;box-shadow:0 6px 16px rgba(0,73,124,.35);transition:var(--sj-trans);}
#fechapopup:hover{background:var(--sj-azul-escuro);color:#fff;}

/* =========================================================
   ACEITE / BALÃO LGPD (.aceite)
   Markup gerado em pg/ajax/utilitarios.php (lgpd_aceite -> 'S').
   ========================================================= */
div.aceite{position:fixed;left:30px;bottom:30px;width:calc(100% - 60px);display:flex;align-items:center;gap:24px;padding:22px 28px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-hover);z-index:99999;transition:var(--sj-trans);}
.aceite .chama-aceite{flex:1;font-size:13px;line-height:1.55;color:var(--sj-cinza-texto);text-align:left;}
.aceite .chama-aceite a{color:var(--sj-azul);text-decoration:underline;font-weight:600;}
.aceite .chama-aceite a:hover{color:var(--sj-azul-escuro);}
.aceite .chama-aceite u{text-decoration:underline;}
.aceite .chama-aceite i{font-style:italic;}
.aceite .chama-aceite strong,.aceite .chama-aceite b{font-weight:700;}
.aceite .cta-aceite{flex-shrink:0;cursor:pointer;min-width:180px;padding:14px 28px;background:var(--sj-azul);color:#fff;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;text-align:center;border-radius:var(--radius);transition:var(--sj-trans);box-shadow:0 8px 18px rgba(29,138,216,.22);}
.aceite .cta-aceite:hover{background:var(--sj-azul-escuro);transform:translateY(-2px);box-shadow:0 14px 28px rgba(29,138,216,.32);}

@media (max-width:760px){
    div.aceite{left:14px;right:14px;bottom:14px;width:auto;flex-direction:column;gap:14px;padding:18px 20px;text-align:center;}
    .aceite .chama-aceite{text-align:center;}
    .aceite .cta-aceite{width:100%;min-width:0;}
}

@media (max-width: 1200px){
    .util{width:100%;max-width:calc(100% - 36px);}
}
@media (max-width: 760px){
    body{font-size:14px;}
    .util{max-width:calc(100% - 28px);}
}