/* =========================================================
   CONTACTOS
   Estilos específicos da página Contactos.
   Cabeçalho e rodapé são controlados pelos componentes globais.
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #173050;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
}


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

.hero {
    height: 430px;
    position: relative;
    background:
        url('/assets/images/hero-igreja.webp')
        center 48% / cover
        no-repeat;
}

.shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(12, 38, 70, .88) 0%,
            rgba(12, 38, 70, .58) 42%,
            rgba(12, 38, 70, .12) 75%
        );
}

.heroIn {
    position: relative;
    color: #fff;
    max-width: 1180px;
    margin: auto;
    padding: 105px 30px;
}

.eyebrow,
.kicker {
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 800;
    color: #b99048;
}

.hero h1 {
    font-family: Georgia, serif;
    font-size: 68px;
    margin: 14px 0 10px;
    font-weight: 500;
}

.hero p {
    font-family: Georgia, serif;
    font-size: 21px;
    max-width: 520px;
    line-height: 1.5;
    margin: 0;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

main {
    overflow: hidden;
}


/* =========================================================
   INTRODUÇÃO
   ========================================================= */

.intro {
    max-width: 1180px;
    margin: 0 auto;
    padding: 75px 30px 35px;
}

.intro h2,
.sectionHead h2,
.where h2,
.contactBand h2 {
    font-family: Georgia, serif;
    font-weight: 500;
    font-size: 39px;
    margin: 9px 0 12px;
}

.intro p {
    color: #68768a;
    max-width: 700px;
    line-height: 1.7;
}


/* =========================================================
   CARTÕES DE CONTACTO
   ========================================================= */

.cards {
    max-width: 1180px;
    margin: auto;
    padding: 0 30px 80px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.cards article {
    border: 1px solid #e4e8ec;
    border-radius: 12px;
    padding: 30px;
    min-height: 245px;
    position: relative;
    background: #fff;
}

.ico {
    width: 43px;
    height: 43px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #f2eee5;
    color: #ad8237;

    font-size: 20px;
    margin-bottom: 24px;
}

.label {
    font-size: 10px;
    letter-spacing: .15em;
    color: #ad8237;
    font-weight: 800;
}

.cards h3 {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 500;
    margin: 10px 0;
}

.cards p {
    color: #69768a;
    line-height: 1.6;
}

.cards a {
    color: #173050;
    font-weight: 700;
    text-decoration: none;
}

.hoursText {
    border-top: 1px solid #e7eaed;
    padding-top: 12px;
    font-size: 13px;
}


/* =========================================================
   COMO PODEMOS AJUDAR
   ========================================================= */

.help {
    background: #f5f4f0;

    padding:
        70px
        max(30px, calc((100vw - 1120px) / 2))
        80px;
}

.sectionHead {
    margin-bottom: 30px;
}

.helpGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.helpGrid a {
    position: relative;

    min-height: 180px;

    background: #fff;
    border-radius: 10px;

    padding: 25px;

    text-decoration: none;

    display: flex;
    flex-direction: column;
}

.helpGrid span {
    color: #b38a3e;
    font-family: Georgia, serif;
}

.helpGrid b {
    font-family: Georgia, serif;
    font-size: 23px;
    margin: 25px 0 7px;
}

.helpGrid small {
    color: #778396;
    line-height: 1.4;
}

.helpGrid i {
    position: absolute;
    right: 20px;
    bottom: 18px;

    font-style: normal;
    color: #b38a3e;
    font-size: 20px;
}


/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */

.where {
    max-width: 1180px;
    margin: 0 auto;
    padding: 85px 30px;

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 55px;

    align-items: center;
}

.whereText p {
    color: #68768a;
    line-height: 1.7;
    margin-bottom: 28px;
}

.goldBtn {
    display: inline-block;

    background: #b38a3e;
    color: #fff;

    padding: 14px 18px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    border-radius: 4px;
}

.map {
    height: 390px;

    border-radius: 14px;
    overflow: hidden;

    box-shadow: 0 15px 45px #1730501a;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================================
   FALE CONNOSCO
   ========================================================= */

.contactBand {
    background: #17375f;

    padding:
        80px
        max(30px, calc((100vw - 1120px) / 2));

    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 70px;

    color: #fff;
}

.contactBand h2 {
    font-size: 44px;
}

.contactCopy p {
    color: #d4dce6;
    line-height: 1.7;
}

.kicker.light {
    color: #d0aa62;
}

.direct {
    margin-top: 32px;
    line-height: 1.7;
}


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

.formCard {
    background: #fff;
    color: #173050;

    padding: 32px;

    border-radius: 13px;
}

.formCard label {
    display: block;

    font-size: 12px;
    font-weight: 700;

    margin-bottom: 16px;
}

.formCard input,
.formCard select,
.formCard textarea {
    width: 100%;

    padding: 12px;
    margin-top: 7px;

    border: 1px solid #cfd6dd;
    border-radius: 6px;

    font: inherit;
}

.formCard textarea {
    height: 125px;
    resize: vertical;
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.formCard .privacy {
    font-weight: 400;
    color: #66758a;

    display: flex;
    gap: 9px;
    align-items: flex-start;

    line-height: 1.4;
}

.formCard .privacy input {
    width: auto;
    margin-top: 2px;
}

.formCard button {
    background: #b38a3e;
    color: #fff;

    border: 0;

    padding: 14px 20px;

    border-radius: 5px;

    font-weight: 800;

    cursor: pointer;
}


/* Honeypot anti-spam */

.hp {
    position: absolute;
    left: -9999px;
}


/* =========================================================
   MENSAGENS DO FORMULÁRIO
   ========================================================= */

.success {
    background: #e8f5ec;
    color: #27643b;

    padding: 18px;

    border-radius: 8px;
}

.error {
    background: #fae9e9;
    color: #8b2d2d;

    padding: 13px;

    border-radius: 8px;

    margin-bottom: 15px;
}

#fale-connosco {
    scroll-margin-top: 95px;
}

.successCard {
    min-height: 0;

    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 24px !important;
}

.successCard .successIcon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #d8eedf;
    color: #27643b;

    font-size: 22px;
    font-weight: 800;
}

.successCard b {
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 500;
}

.successCard p {
    margin: 6px 0 12px;

    line-height: 1.5;

    color: #477055;
}

.successCard a {
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    color: #27643b;
}

.formCard:has(.successCard) {
    align-self: center;
    padding: 18px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1050px) {

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

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

    .where,
    .contactBand {
        grid-template-columns: 1fr;
    }

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


@media (max-width: 650px) {

    .hero {
        height: 370px;
    }

    .heroIn {
        padding: 90px 22px;
    }

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

    .intro,
    .cards,
    .where {
        padding-left: 20px;
        padding-right: 20px;
    }

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

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

    .contactBand {
        padding: 60px 20px;
        gap: 35px;
    }

    .formCard {
        padding: 22px;
    }
}

/* =========================================================
   V3 — WhatsApp: contacto direto e canal informativo
   ========================================================= */
.contactChannels{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.channelCard{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  align-items:start;
  padding:26px 28px;
  border:1px solid #dfe5ea;
  border-radius:10px;
  background:#fff;
}
.channelCard.channelNews{
  background:#f7f8f5;
  border-color:#ded9cd;
}
.channelIcon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border:1px solid rgba(184,134,47,.45);
  border-radius:50%;
  color:#a87517;
  font-size:21px;
}
.channelCard .label{
  display:block;
  margin:0 0 7px;
  color:#a87517;
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}
.channelCard h3{
  margin:0 0 8px;
  color:#173050;
  font-family:Georgia,serif;
  font-size:23px;
}
.channelCard p{
  margin:0 0 13px;
  color:#667284;
  line-height:1.55;
}
.channelCard a{
  color:#173050;
  font-weight:800;
  text-decoration:none;
}
.channelCard a:hover{color:#a87517}
@media(max-width:760px){
  .contactChannels{grid-template-columns:1fr}
}