* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family: Arial, sans-serif;

    text-decoration: none;

}


body {

    background: #ffffff;

}


/* =========================
   HEADER
========================= */

header {

    width: 100%;
    height: 100px;

    background: #ffffff;

    border-bottom: 3px solid #C62828;

    display: flex;

    align-items: center;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

}


/* =========================
   LOGO
========================= */

header img {

    width: 100px;

    margin-left: 40px;

}


/* =========================
   MENU
========================= */

nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 45px;

    width: 100%;

}


nav a {

    color: #174A7E;

    font-size: 20px;

    font-weight: 600;

    position: relative;

    transition: 0.3s;

}


nav a:hover {

    color: #C62828;

    transform: translateY(-2px);

}


/* =========================
   PÁGINA SELECIONADA
========================= */

.pagina-selecionada {

    color: #C62828;

}


.pagina-selecionada::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 3px;

    background: #C62828;

    bottom: -10px;

    left: 0;

    border-radius: 10px;

}





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

.informacoes-introducao {

    padding: 170px 20px 80px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

}


.informacoes-introducao span {

    color: #C62828;

    font-size: 16px;

    font-weight: bold;

    letter-spacing: 4px;

}


.informacoes-introducao h1 {

    color: #174A7E;

    font-size: 52px;

    margin: 20px 0;

}


.informacoes-introducao p {

    color: #666666;

    font-size: 20px;

    line-height: 1.6;

}


/* =========================
   BLOCOS
========================= */

.bloco-informacoes,
.estrutura {

    width: 90%;

    max-width: 1100px;

    margin: 90px auto;

}


/* =========================
   TÍTULOS DAS SEÇÕES
========================= */

.titulo-secao {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 50px;

}


.numero-secao {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #C62828;

    color: #ffffff;

    border-radius: 15px;

    font-size: 20px;

    font-weight: bold;

}


.titulo-secao > div > span {

    color: #C62828;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 3px;

}


.titulo-secao h2 {

    color: #174A7E;

    font-size: 36px;

    margin-top: 5px;

}


/* =========================
   CARDS DE INFORMAÇÃO
========================= */

.cards-informacoes {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}


.card-informacao {

    padding: 30px;

    border-radius: 20px;

    background: #f5f8fc;

    border: 2px solid #e3eaf2;

    transition: 0.3s;

}


.card-informacao:hover {

    transform: translateY(-8px);

    border-color: #C62828;

    box-shadow:
        0 12px 25px rgba(23, 74, 126, 0.12);

}


.icone {

    font-size: 35px;

    margin-bottom: 20px;

}


.card-informacao h3 {

    color: #174A7E;

    font-size: 21px;

    margin-bottom: 15px;

}


.card-informacao p {

    color: #666666;

    font-size: 15px;

    line-height: 1.7;

}


.card-informacao strong {

    color: #C62828;

}


/* =========================
   AGENDA
========================= */

.agenda {

    padding: 90px 20px;

    background:
        linear-gradient(
            135deg,
            #174A7E,
            #23669f
        );

    text-align: center;

}


.agenda-conteudo {

    max-width: 800px;

    margin: auto;

}


.agenda span {

    color: #FFE082;

    font-size: 15px;

    font-weight: bold;

    letter-spacing: 4px;

}


.agenda h2 {

    color: #ffffff;

    font-size: 40px;

    margin: 20px 0;

}


.agenda p {

    color: #e8eef5;

    font-size: 18px;

    line-height: 1.7;

    margin-bottom: 35px;

}


.botao-principal {

    display: inline-block;

    background: #C62828;

    color: #ffffff;

    padding: 16px 35px;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s;

}


.botao-principal:hover {

    transform: translateY(-5px);

    background: #E53935;

}


/* =========================
   VISITA
========================= */

.visita {

    width: 90%;

    max-width: 1100px;

    margin: 100px auto;

    padding: 55px;

    border-radius: 25px;

    background: #f8f9fa;

    border: 2px solid #e4e9ef;

}


.visita-conteudo {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

}


.visita-texto {

    max-width: 550px;

}


.visita-texto span {

    color: #C62828;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 3px;

}


.visita-texto h2 {

    color: #174A7E;

    font-size: 38px;

    margin: 15px 0;

}


.visita-texto p {

    color: #666666;

    font-size: 17px;

    line-height: 1.7;

}


.horario-visita {

    min-width: 300px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.horario {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 20px;

    background: #ffffff;

    border-radius: 12px;

}


.horario span {

    color: #777777;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;

}


.horario strong {

    color: #174A7E;

}


.botao-whatsapp {

    background: #25D366;

    color: #ffffff;

    text-align: center;

    padding: 16px 20px;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s;

}


.botao-whatsapp:hover {

    transform: translateY(-4px);

}


/* =========================
   ATENÇÃO
========================= */

.atencao {

    width: 90%;

    max-width: 1100px;

    margin: 100px auto;

    padding: 50px;

    background: #fff8e1;

    border: 3px solid #FFE082;

    border-radius: 25px;

}


.atencao-titulo {

    text-align: center;

    margin-bottom: 40px;

}


.atencao-titulo span {

    color: #C62828;

    font-weight: bold;

    letter-spacing: 2px;

}


.atencao-titulo h2 {

    color: #174A7E;

    font-size: 35px;

    margin-top: 12px;

}


.regras {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}


.regra {

    display: flex;

    gap: 18px;

    padding: 25px;

    background: #ffffff;

    border-radius: 15px;

}


.regra > span {

    font-size: 30px;

}


.regra h3 {

    color: #174A7E;

    font-size: 18px;

    margin-bottom: 8px;

}


.regra p {

    color: #666666;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================
   ESTRUTURA
========================= */

.estrutura-grid {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 25px;

}


.estrutura-card {

    padding: 40px;

    border-radius: 22px;

    background: #f5f8fc;

    border: 2px solid #e3eaf2;

}


.estrutura-card.destaque {

    background: #174A7E;

    color: #ffffff;

}


.estrutura-icone {

    font-size: 40px;

    margin-bottom: 25px;

}


.estrutura-card > span {

    display: block;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    color: #C62828;

    margin-bottom: 10px;

}


.estrutura-card.destaque > span {

    color: #FFE082;

}


.estrutura-card strong {

    display: block;

    font-size: 42px;

    margin-bottom: 15px;

}


.estrutura-card p {

    line-height: 1.6;

    color: #dbe6f0;

}


.estrutura-card h3 {

    color: #174A7E;

    font-size: 25px;

    margin-bottom: 20px;

}


.estrutura-card ul {

    list-style: none;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.estrutura-card li {

    color: #555555;

}


.estrutura-card li::before {

    content: "✓";

    color: #C62828;

    font-weight: bold;

    margin-right: 8px;

}





/* =========================
   FOTOS DA ESTRUTURA
========================= */

.estrutura-fotos {

    display: grid;

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

    gap: 25px;

    margin-top: 30px;

}


.foto-estrutura {

    width: 100%;

    aspect-ratio: 1 / 1;

    border-radius: 22px;

    overflow: hidden;

    background: #f5f8fc;

    border: 2px solid #e3eaf2;

    box-shadow:
        0 8px 20px rgba(23, 74, 126, 0.10);

}


.foto-estrutura img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: 0.4s;

}


.foto-estrutura:hover img {

    transform: scale(1.05);

}






/* =========================
   TEMAS
========================= */

.temas {

    margin-top: 100px;

    padding: 100px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

}


.temas-conteudo {

    max-width: 750px;

    margin: auto;

}


.temas span {

    color: #C62828;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 4px;

}


.temas h2 {

    color: #174A7E;

    font-size: 42px;

    line-height: 1.2;

    margin: 20px 0;

}


.temas p {

    color: #666666;

    font-size: 18px;

    line-height: 1.7;

}


.temas-destaque {

    margin-top: 15px;

    font-weight: bold;

    color: #174A7E !important;

}


.botao-temas {

    display: inline-block;

    margin-top: 35px;

    padding: 17px 35px;

    background: #C62828;

    color: #ffffff;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s;

}


.botao-temas:hover {

    transform: translateY(-5px);

    background: #E53935;

}


/* =========================
   FINAL
========================= */

.final-informacoes {

    padding: 90px 20px;

    text-align: center;

    background: #174A7E;

}


.final-informacoes h2 {

    color: #ffffff;

    font-size: 40px;

    margin-bottom: 15px;

}


.final-informacoes p {

    color: #dbe6f0;

    font-size: 18px;

    margin-bottom: 30px;

}


.final-informacoes a {

    display: inline-block;

    background: #C62828;

    color: #ffffff;

    padding: 17px 40px;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s;

}


.final-informacoes a:hover {

    transform: translateY(-5px);

    background: #E53935;

}


















































/* ==================================================
   RESPONSIVIDADE
   PÁGINA INFORMAÇÕES
================================================== */


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

@media (max-width: 900px) {

    /* =========================
       HEADER
    ========================= */

    header {

        height: 85px;

    }


    header img {

        width: 110px;

        margin-left: 20px;

    }


    nav {

        gap: 20px;

    }


    nav a {

        font-size: 16px;

    }


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

    .informacoes-introducao {

        padding: 145px 25px 65px;

    }


    .informacoes-introducao h1 {

        font-size: 43px;

    }


    .informacoes-introducao p {

        font-size: 18px;

    }


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

    .titulo-secao {

        margin-bottom: 40px;

    }


    .titulo-secao h2 {

        font-size: 31px;

    }


    /* =========================
       CARDS DE INFORMAÇÃO
    ========================= */

    .bloco-informacoes,
    .estrutura {

        width: 90%;

        margin: 75px auto;

    }


    .cards-informacoes {

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

        gap: 18px;

    }


    .card-informacao {

        padding: 25px;

    }


    /* =========================
       AGENDA
    ========================= */

    .agenda {

        padding: 75px 25px;

    }


    .agenda h2 {

        font-size: 35px;

    }


    .agenda p {

        font-size: 17px;

    }


    /* =========================
       VISITA
    ========================= */

    .visita {

        width: 90%;

        margin: 80px auto;

        padding: 40px;

    }


    .visita-conteudo {

        gap: 35px;

    }


    .visita-texto h2 {

        font-size: 33px;

    }


    .horario-visita {

        min-width: 280px;

    }


    /* =========================
       ATENÇÃO
    ========================= */

    .atencao {

        width: 90%;

        margin: 80px auto;

        padding: 40px;

    }


    .atencao-titulo h2 {

        font-size: 31px;

    }


    .regras {

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

    }


    /* =========================
       ESTRUTURA
    ========================= */

    .estrutura-grid {

        grid-template-columns: 1fr 1fr;

    }


    .estrutura-card {

        padding: 30px;

    }


    .estrutura-card strong {

        font-size: 36px;

    }


    .estrutura-card h3 {

        font-size: 22px;

    }


    /* =========================
       TEMAS
    ========================= */

    .temas {

        margin-top: 80px;

        padding: 80px 25px;

    }


    .temas h2 {

        font-size: 36px;

    }


    .temas p {

        font-size: 17px;

    }


    /* =========================
       FINAL
    ========================= */

    .final-informacoes {

        padding: 75px 25px;

    }


    .final-informacoes h2 {

        font-size: 35px;

    }


    .final-informacoes p {

        font-size: 17px;

    }

}


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

@media (max-width: 600px) {

    body {

        overflow-x: hidden;

    }


    /* =========================
       HEADER
       IGUAL AO 4-COTACAO
    ========================= */

    header {

        height: auto;

        min-height: 85px;

        padding: 15px;

        justify-content: center;

    }


    header img {

        display: none;

    }


    nav {

        width: 100%;

        gap: 12px;

        flex-wrap: wrap;

        justify-content: center;

        padding-left: 0;

    }


    nav a {

        font-size: 10px;

        font-weight: 700;

    }


    .pagina-selecionada::after {

        bottom: -6px;

    }


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

    .informacoes-introducao {

        padding: 120px 18px 50px;

    }


    .informacoes-introducao span {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .informacoes-introducao h1 {

        font-size: 31px;

        line-height: 1.2;

        margin: 15px 0;

    }


    .informacoes-introducao p {

        font-size: 16px;

        line-height: 1.55;

    }


    /* =========================
       BLOCOS
    ========================= */

    .bloco-informacoes,
    .estrutura {

        width: 92%;

        margin: 65px auto;

    }


    /* =========================
       TÍTULOS DAS SEÇÕES
    ========================= */

    .titulo-secao {

        gap: 14px;

        margin-bottom: 30px;

        align-items: center;

    }


    .numero-secao {

        width: 48px;

        height: 48px;

        flex-shrink: 0;

        border-radius: 12px;

        font-size: 16px;

    }


    .titulo-secao > div > span {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .titulo-secao h2 {

        font-size: 25px;

        line-height: 1.2;

    }


    /* =========================
       CARDS DE INFORMAÇÃO
    ========================= */

    .cards-informacoes {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }


    .card-informacao {

        width: 100%;

        padding: 25px 20px;

        border-radius: 16px;

    }


    .card-informacao .icone {

        font-size: 30px;

        margin-bottom: 15px;

    }


    .card-informacao h3 {

        font-size: 20px;

    }


    .card-informacao p {

        font-size: 14px;

        line-height: 1.6;

    }


    /* =========================
       AGENDA
    ========================= */

    .agenda {

        padding: 65px 20px;

    }


    .agenda span {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .agenda h2 {

        font-size: 29px;

        line-height: 1.2;

        margin: 15px 0;

    }


    .agenda p {

        font-size: 16px;

        line-height: 1.55;

    }


    .botao-principal {

        width: 100%;

        max-width: 320px;

        padding: 15px 20px;

        text-align: center;

    }


    /* =========================
       VISITA
    ========================= */

    .visita {

        width: 92%;

        margin: 65px auto;

        padding: 25px 18px;

        border-radius: 18px;

    }


    .visita-conteudo {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 30px;

    }


    .visita-texto {

        max-width: 100%;

    }


    .visita-texto span {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .visita-texto h2 {

        font-size: 29px;

        line-height: 1.2;

        margin: 15px 0;

    }


    .visita-texto p {

        font-size: 15px;

        line-height: 1.55;

    }


    .horario-visita {

        min-width: 0;

        width: 100%;

        gap: 12px;

    }


    .horario {

        padding: 15px;

        gap: 15px;

    }


    .horario span {

        font-size: 10px;

    }


    .horario strong {

        font-size: 14px;

        text-align: right;

    }


    .botao-whatsapp {

        width: 100%;

        padding: 14px 15px;

        font-size: 14px;

    }


    /* =========================
       ATENÇÃO
    ========================= */

    .atencao {

        width: 92%;

        margin: 65px auto;

        padding: 25px 18px;

        border-width: 2px;

        border-radius: 18px;

    }


    .atencao-titulo {

        margin-bottom: 25px;

    }


    .atencao-titulo span {

        font-size: 11px;

    }


    .atencao-titulo h2 {

        font-size: 27px;

        line-height: 1.2;

    }


    .regras {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }


    .regra {

        gap: 12px;

        padding: 18px;

        border-radius: 12px;

    }


    .regra > span {

        font-size: 25px;

        flex-shrink: 0;

    }


    .regra h3 {

        font-size: 17px;

        line-height: 1.3;

    }


    .regra p {

        font-size: 13px;

        line-height: 1.55;

    }


    /* =========================
       ESTRUTURA
    ========================= */

    .estrutura-grid {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }


    .estrutura-card {

        padding: 25px 20px;

        border-radius: 17px;

    }


    .estrutura-icone {

        font-size: 34px;

        margin-bottom: 18px;

    }


    .estrutura-card > span {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .estrutura-card strong {

        font-size: 34px;

        margin-bottom: 12px;

    }


    .estrutura-card p {

        font-size: 14px;

        line-height: 1.55;

    }


    .estrutura-card h3 {

        font-size: 21px;

        line-height: 1.3;

    }


    .estrutura-card ul {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .estrutura-card li {

        font-size: 14px;

    }


    /* =========================
       TEMAS
    ========================= */

    .temas {

        margin-top: 65px;

        padding: 65px 20px;

    }


    .temas span {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .temas h2 {

        font-size: 29px;

        line-height: 1.2;

        margin: 15px 0;

    }


    .temas p {

        font-size: 15px;

        line-height: 1.55;

    }


    .botao-temas {

        width: 100%;

        max-width: 320px;

        padding: 15px 20px;

    }


    /* =========================
       FINAL
    ========================= */

    .final-informacoes {

        padding: 65px 20px;

    }


    .final-informacoes h2 {

        font-size: 29px;

        line-height: 1.2;

    }


    .final-informacoes p {

        font-size: 16px;

        line-height: 1.5;

    }


    .final-informacoes a {

        width: 100%;

        max-width: 320px;

        padding: 15px 20px;

        text-align: center;

    }

}


/* =========================
   CELULAR MUITO PEQUENO
========================= */

@media (max-width: 380px) {

    header img {

        width: 75px;

    }


    nav {

        gap: 8px;

        padding-left: 8px;

    }


    nav a {

        font-size: 11px;

    }


    .informacoes-introducao {

        padding: 115px 15px 45px;

    }


    .informacoes-introducao h1 {

        font-size: 28px;

    }


    .informacoes-introducao p {

        font-size: 15px;

    }


    .numero-secao {

        width: 44px;

        height: 44px;

        font-size: 14px;

    }


    .titulo-secao {

        gap: 10px;

    }


    .titulo-secao h2 {

        font-size: 23px;

    }


    .card-informacao {

        padding: 22px 17px;

    }


    .visita-texto h2,
    .agenda h2,
    .temas h2,
    .final-informacoes h2 {

        font-size: 26px;

    }


    .atencao-titulo h2 {

        font-size: 24px;

    }


    .estrutura-card strong {

        font-size: 31px;

    }

}





/* ==================================================
   RESPONSIVIDADE DAS FOTOS
================================================== */

@media (max-width: 600px) {

    .estrutura-fotos {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 20px;

    }


    .foto-estrutura {

        width: 100%;

        aspect-ratio: 1 / 1;

        border-radius: 17px;

    }

}