/* =========================================================
   LAYOUT GLOBAL — IRMÃS DE SÃO JOSÉ DE CHAMBÉRY
   Camada final de overrides — desktop fiel 1150px
   (carregada após config/header/footer.css; este arquivo é a fonte da verdade)
   ========================================================= */
:root{
    --sj-azul:#0072bc;
    --sj-azul-escuro:#005a96;
    --sj-azul-claro:#8bb7df;
    --sj-azul-suave:#c5dcef;
    --sj-azul-card:#6fa4d5;
    --sj-azul-medio:#006eae;
    --sj-azul-rodape:#005c98;
    --sj-verde:#05bd45;
    --sj-verde-escuro:#049b39;
    --sj-texto:#161616;
    --sj-titulo:#0d1a26;
    --sj-muted:#636d78;
    --sj-cinza-texto:#636d78;
    --sj-borda:#e8edf2;
    --sj-cinza:#ececec;
    --sj-cinza-borda:#e3e6eb;
    --sj-footer:#006fb6;
    --sj-radius:10px;
    --sj-trans:all .25s ease;
    --sj-shadow:0 18px 45px rgba(0,45,90,.08);
}

html,body{font-family:'Figtree',Arial,sans-serif;color:var(--sj-texto);background:#fff;}
a{text-decoration:none;transition:var(--sj-trans);}
ul,ol{list-style:none;margin:0;padding:0;}
button,input,textarea{font-family:inherit;}
button{border:0;background:none;cursor:pointer;}
img{max-width:100%;display:block;}

/* ÚNICO CONTÊINER — largura 1150px, com responsivo */
.topo .util,
.rodape .util,
.home .util{width:1150px;max-width:calc(100% - 40px);margin:0 auto;}

/* =========================================================
   HEADER  —  duas linhas (identidade branca + menu azul)
   ========================================================= */
.topo{position:sticky;top:0;left:0;width:100%;z-index:1000;background:#fff;box-shadow:none;transition:var(--sj-trans);}
.topo.flutuante{box-shadow:0 6px 22px rgba(0,73,124,.1);}

/* Linha 1 — identidade */
.topo-identidade{background:#fff;border-bottom:1px solid var(--sj-borda);}
.topo-identidade .util{height:104px;display:grid;grid-template-columns:200px minmax(280px,1fr) 220px;align-items:center;gap:24px;position:relative;}
.logomarca{display:flex;align-items:center;justify-content:flex-start;min-width:0;}
.logomarca img{height:74px;width:auto;object-fit:contain;transition:var(--sj-trans);}
.topo.flutuante .topo-identidade .util{height:82px;}
.topo.flutuante .logomarca img{height:60px;}

.topo-centro{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0;}

/* Busca */
.topo-busca{position:relative;width:340px;max-width:100%;height:44px;border:1px solid var(--sj-borda);border-radius:10px;background:#fff;overflow:hidden;display:flex;align-items:center;}
.topo-busca input{flex:1;height:100%;border:0;padding:0 16px;font-size:14px;color:var(--sj-texto);outline:none;background:transparent;}
.topo-busca input::placeholder{color:#9aa6b2;}
.topo-busca button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--sj-azul);border-radius:50%;font-size:14px;margin-right:1px;transition:var(--sj-trans);}
.topo-busca button:hover{background:var(--sj-azul-escuro);}

/* Idioma */
.translate{position:relative;z-index:5;}
.translate-ativo{height:44px;padding:0 16px;border-radius:22px;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--sj-azul-escuro);font-size:13px;font-weight:700;cursor:pointer;transition:var(--sj-trans);}
.translate-ativo:hover{background:#eef5fb;}
.translate-ativo .material-symbols-outlined{font-size:20px;color:var(--sj-azul);}
.translate-ativo .fa-chevron-down{font-size:10px;color:var(--sj-muted);}
.translate-opcoes{position:absolute;right:0;top:calc(100% + 10px);width:160px;background:#fff;border-radius:10px;box-shadow:0 18px 40px rgba(0,47,95,.15);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--sj-trans);z-index:1002;}
.translate.aberto .translate-opcoes{opacity:1;visibility:visible;transform:translateY(0);}
.translate-opcao{font-size:13px;color:var(--sj-texto);padding:10px 14px;border-radius:6px;cursor:pointer;transition:var(--sj-trans);}
.translate-opcao:hover{background:#eef5fb;color:var(--sj-azul);}

/* Marcas de apoio — slot 200x90 com rotação fade */
.topo-marca-apoio{position:relative;display:flex;justify-content:flex-end;align-items:center;min-width:0;width:200px;height:90px;margin-left:auto;}
.topo-marca-apoio .marca-apoio-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .6s ease, visibility .6s ease;}
.topo-marca-apoio .marca-apoio-item.ativo{opacity:1;visibility:visible;}
.topo-marca-apoio.rotativo{outline:none;}
.topo-marca-apoio .marca-apoio-item a,
.topo-marca-apoio .marca-apoio-item > span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.topo-marca-apoio img{max-width:200px;max-height:90px;width:auto;height:auto;object-fit:contain;display:block;}
.topo-marca-apoio > span{font-size:13px;line-height:1.2;color:var(--sj-azul-escuro);text-align:right;font-weight:800;text-transform:uppercase;letter-spacing:.03em;max-width:200px;}

/* Hamburguer */
.abrir-menu{display:none;width:46px;height:46px;border-radius:8px;border:1px solid var(--sj-borda);background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.abrir-menu span{width:22px;height:2px;border-radius:2px;background:var(--sj-azul);display:block;}

/* Linha 2 — menu azul */
/* min-height no lugar de height fixo + wrap no ul: são 7 itens e a linha fecha
   exatamente nos 1150px do contêiner em português. Com o Google Translate ligado
   os rótulos crescem ("A CONGREGAÇÃO" -> "THE CONGREGATION") e sem isto o menu
   vazava para fora da faixa azul. Agora ele quebra para uma segunda linha. */
.topo-menu{background:var(--sj-azul);min-height:50px;}
.topo-menu .util{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.menu-principal{flex:1;min-width:0;}
.menu-principal ul{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;}
.menu-principal li{position:relative;}
.menu-principal .link,
.menu-principal a.link{height:50px;display:flex;align-items:center;padding:0 20px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:var(--sj-trans);}
.menu-principal .link:hover,
.menu-principal .link.ativo{background:rgba(255,255,255,.12);color:#fff;}
/* Submenu — estilos centralizados em header.css.
   Aqui apenas neutralizamos resíduos do CSS antigo para não duplicar padding/border. */
.menu-principal .submenu p{
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    color:inherit;
    font:inherit;
}

.topo-redes{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topo-redes a{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);color:#fff;font-size:13px;transition:var(--sj-trans);}
.topo-redes a:hover{background:#fff;color:var(--sj-azul);}

/* =========================================================
   FOOTER
   ========================================================= */
.rodape{margin-top:0;background:var(--sj-footer);color:#fff;font-family:'Figtree',Arial,sans-serif;}

/* Faixa 1 — Mapa do site */
.rodape-mapa{background:var(--sj-azul-claro);padding:54px 0 46px;color:#071523;}
.rodape-mapa-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:28px;align-items:start;}
.rodape-mapa-grid ul{display:flex;flex-direction:column;}
.rodape-mapa-grid .top{font-size:14px;font-weight:900;color:#071523;margin-bottom:14px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;padding:0;}
.rodape-mapa-grid li{font-size:13px;line-height:1.55;color:#071523;padding:3px 0;margin:0;}
.rodape-mapa-grid a{color:#071523;opacity:.85;transition:var(--sj-trans);}
.rodape-mapa-grid a:hover{color:#fff;opacity:1;}

/* Faixa 2 — Newsletter + marca + contato */
.rodape-contato{background:var(--sj-footer);padding:56px 0 50px;}
.rodape-contato .util{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;align-items:start;}

.form-newsletter{display:flex;flex-direction:column;gap:10px;}
.form-newsletter strong,
.rodape-info strong{font-size:14px;font-weight:900;color:#fff;margin-bottom:8px;display:block;text-transform:uppercase;letter-spacing:.04em;}
.form-newsletter input[type="text"],
.form-newsletter input[type="email"],
.form-newsletter textarea{width:100%;border:0;background:#fff;border-radius:5px;color:#1b1b1b;font-size:13px;padding:0 14px;outline:none;}
.form-newsletter input[type="text"],
.form-newsletter input[type="email"]{height:42px;}
.form-newsletter textarea{height:90px;resize:none;padding-top:12px;}
.form-newsletter .aceite{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.4;color:#fff;margin-top:4px;}
.form-newsletter .aceite input{margin-top:2px;}
.form-newsletter .aceite a{color:#fff;text-decoration:underline;}
.form-newsletter .btn-enviar{min-width:130px;height:42px;padding:0 24px;background:var(--sj-verde);border:0;border-radius:5px;color:#fff;font-size:13px;font-weight:900;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:var(--sj-trans);align-self:flex-start;margin-top:6px;}
.form-newsletter .btn-enviar:hover{background:var(--sj-verde-escuro);transform:translateY(-2px);}

.rodape-marca{display:flex;justify-content:center;align-items:center;padding-top:30px;}
.rodape-marca img{width:220px;max-width:100%;height:auto;object-fit:contain;}

.rodape-info{text-align:right;font-size:13px;color:#fff;line-height:1.6;}
.rodape-info strong{text-align:right;}
.rodape-info p{margin:3px 0 0;color:#fff;}
.rodape-info p a{color:#fff;transition:var(--sj-trans);}
.rodape-info p a:hover{text-decoration:underline;}
.rodape-info .sede-label{margin-top:24px;}
.rodape-redes{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.rodape-redes a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-size:14px;transition:var(--sj-trans);}
.rodape-redes a:hover{background:#fff;color:var(--sj-azul);transform:translateY(-2px);}

/* Faixa 3 — Direitos */
.rodape-direitos{background:var(--sj-azul-rodape);border-top:1px solid rgba(255,255,255,.13);padding:22px 0;}
.rodape-direitos .util{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.rodape-direitos p{font-size:12px;line-height:1.5;color:#fff;margin:0;max-width:680px;opacity:.85;}
.rodape-direitos a{color:#fff;text-decoration:underline;}
.arcanjo{display:flex;align-items:center;gap:10px;color:#fff;font-size:11.5px;white-space:nowrap;opacity:.85;}
.arcanjo img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.95;}

.chama-whats{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 16px 38px rgba(0,0,0,.22);z-index:60;}
.chama-whats:hover{color:#fff;transform:translateY(-3px);}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1200px){
    .topo .util,.rodape .util,.home .util{width:100%;max-width:calc(100% - 36px);}
    /* São 7 itens no menu: com 20px de padding cada um a linha estourava o
       contêiner logo acima do breakpoint de 1100px e o texto encavalava. */
    .menu-principal .link,
    .menu-principal a.link{padding:0 13px;letter-spacing:0;}
    .topo-redes a{width:28px;height:28px;font-size:12px;}
}
@media (max-width:1100px){
    .topo-identidade .util{grid-template-columns:140px 1fr 54px;height:80px;gap:14px;}
    .logomarca img{height:60px;}
    .topo-marca-apoio{display:none;}
    .abrir-menu{display:flex;justify-self:end;grid-column:3;grid-row:1;}
    /* Vira X quando o menu está aberto — sem isso não há sinal de que fecha */
    .abrir-menu span{transition:transform .25s ease, opacity .2s ease;}
    .topo.menu-aberto .abrir-menu span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .topo.menu-aberto .abrir-menu span:nth-child(2){opacity:0;}
    .topo.menu-aberto .abrir-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .topo-centro{justify-content:flex-end;padding-right:0;grid-column:2 / 3;grid-row:1;gap:10px;min-width:0;}
    .topo-busca{width:240px;height:40px;}
    .translate-ativo{height:40px;padding:0 12px;}
    .topo-menu{height:auto;display:none;}
    .topo.menu-aberto .topo-menu{display:block;}
    /* O menu aberto pode ficar mais alto que a tela (7 itens + submenus) e o
       body fica com overflow:hidden enquanto está aberto: sem rolagem própria
       os últimos itens ficavam inalcançáveis. */
    .topo.menu-aberto .topo-menu{max-height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
    .topo-menu .util{height:auto;display:block;width:100%;padding:0;max-width:none;}
    .menu-principal ul{height:auto;display:block;background:var(--sj-azul);}
    .menu-principal li{height:auto;border-top:1px solid rgba(255,255,255,.1);}
    .menu-principal .link{height:48px;padding:0 22px;justify-content:flex-start;font-size:14px;}
    /* Mobile: neutraliza p interno também (header.css cuida do resto) */
    .menu-principal .submenu p{padding:0;border:0;}
    .topo-redes{padding:14px 22px;background:var(--sj-azul);justify-content:flex-start;}
    .rodape-mapa-grid{grid-template-columns:repeat(3,1fr);gap:26px;}
    .rodape-contato .util{grid-template-columns:1fr 1fr;gap:34px;}
    .rodape-marca{order:3;grid-column:1 / span 2;padding-top:14px;}
}
@media (max-width:760px){
    .topo .util,.rodape .util,.home .util{max-width:calc(100% - 28px);}
    .topo-identidade .util{grid-template-columns:110px 1fr 44px;gap:10px;height:72px;}
    .logomarca img{height:52px;}
    .topo-centro{gap:6px;}
    .topo-busca{width:160px;height:36px;}
    .topo-busca input{font-size:12px;padding:0 12px;}
    .topo-busca button{width:34px;height:34px;font-size:12px;}
    .translate-ativo{height:36px;padding:0 10px;font-size:12px;}
    .translate-ativo .material-symbols-outlined{font-size:18px;}
    .rodape-mapa-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
    .rodape-contato .util{grid-template-columns:1fr;gap:30px;}
    .rodape-marca{padding-top:0;grid-column:auto;order:0;justify-content:flex-start;}
    .rodape-info{text-align:left;}
    .rodape-info strong{text-align:left;}
    .rodape-redes{justify-content:flex-start;}
    .rodape-direitos .util{display:flex;flex-direction:column;text-align:center;gap:14px;}
    .arcanjo{margin-top:8px;}
}
/* ---------- CELULAR ESTREITO ----------
   Abaixo disso a coluna do meio não comporta busca + idioma lado a lado: em
   320px sobram ~118px para os dois. Aqui o topo vira duas linhas — logo e
   hambúrguer em cima, busca ocupando a largura toda embaixo. */
@media (max-width:560px){
    .topo-identidade .util{
        grid-template-columns:1fr auto;
        grid-template-rows:auto auto;
        height:auto;
        padding:12px 0;
        row-gap:10px;
        column-gap:10px;
    }
    .topo.flutuante .topo-identidade .util{height:auto;padding:8px 0;}
    .logomarca{grid-column:1;grid-row:1;}
    .abrir-menu{grid-column:2;grid-row:1;}
    .topo-centro{grid-column:1 / -1;grid-row:2;justify-content:space-between;gap:8px;}
    .topo-busca{flex:1 1 auto;width:auto;min-width:0;}
    .topo-busca input{font-size:13px;}
    .translate{flex-shrink:0;}
    .topo.menu-aberto .topo-menu{max-height:calc(100vh - 132px);}
}