/* =========================================================
   IGREJA SEMENTES
   HOME.CSS
   Identidade:
   Uma Família. Um Reino. Todas as Nações.
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {
    --home-preto: #0b0b0b;
    --home-grafite: #121212;
    --home-grafite-claro: #1a1a1a;

    --home-dourado: #d4af37;
    --home-dourado-claro: #f0cf63;
    --home-dourado-escuro: #a98518;

    --home-branco: #ffffff;
    --home-cinza: #b8b8b8;
    --home-cinza-escuro: #777777;

    --home-border: rgba(212, 175, 55, 0.22);

    --home-sombra:
        0 20px 60px rgba(0, 0, 0, 0.35);

    --home-transicao:
        all 0.35s ease;
}


/* =========================================================
   BASE DA HOME
========================================================= */

body {
    font-family: 'Inter', sans-serif;
    background: var(--home-preto);
    color: var(--home-branco);
}

.home-conteudo {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.home-hero {
    position: relative;

    min-height: calc(100vh - 70px);

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

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.68) 45%,
            rgba(0, 0, 0, 0.58) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.20),
            rgba(0, 0, 0, 0.80)
        ),
        url('../img/teens.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* brilho dourado discreto */

.home-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -220px;
    right: -180px;

    background: rgba(212, 175, 55, 0.10);

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


/* linha dourada inferior */

.home-hero::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 120px;
    height: 3px;

    transform: translateX(-50%);

    background: var(--home-dourado);
}


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

.home-hero-conteudo {
    position: relative;
    z-index: 2;

    width: min(900px, calc(100% - 40px));

    text-align: center;

    padding: 100px 0 90px;

    animation: homeHeroEntrada 1s ease forwards;
}


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

.home-logo {
    display: block;

    width: 90px;
    height: 90px;

    object-fit: contain;

    margin: 0 auto 28px;

    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));

    animation: homeLogoEntrada 1s ease forwards;
}


/* =========================================================
   PRÉ-TÍTULO
========================================================= */

.hero-pretitulo {
    display: block;

    margin-bottom: 18px;

    color: var(--home-dourado);

    font-family: 'Outfit', sans-serif;

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.32em;

    text-transform: uppercase;
}


/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

.home-hero h1 {
    margin: 0;

    color: var(--home-branco);

    font-family: 'Outfit', sans-serif;

    font-size: clamp(3.2rem, 7vw, 6.5rem);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.045em;

    text-shadow:
        0 8px 30px rgba(0, 0, 0, 0.55);
}


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

.hero-texto {
    max-width: 700px;

    margin: 34px auto 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: clamp(1rem, 1.5vw, 1.18rem);

    line-height: 1.8;

    font-weight: 400;
}


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

.hero-botoes {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 38px;
}


.hero-botoes a {
    min-height: 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 28px;

    border-radius: 4px;

    font-family: 'Outfit', sans-serif;

    font-size: 0.92rem;
    font-weight: 600;

    letter-spacing: 0.02em;

    text-decoration: none;

    transition: var(--home-transicao);
}


/* botão principal */

.hero-botoes .button-main {
    background: var(--home-dourado);

    color: #111111;

    border: 1px solid var(--home-dourado);

    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.20);
}


.hero-botoes .button-main:hover {
    background: var(--home-dourado-claro);

    border-color: var(--home-dourado-claro);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(212, 175, 55, 0.30);
}


/* botão secundário */

.hero-botoes .button-secondary {
    background: rgba(255, 255, 255, 0.04);

    color: var(--home-branco);

    border: 1px solid rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(10px);
}


.hero-botoes .button-secondary:hover {
    background: var(--home-branco);

    color: var(--home-preto);

    border-color: var(--home-branco);

    transform: translateY(-3px);
}


/* =========================================================
   BOTÕES DO YOUTUBE
========================================================= */

.home-botoes {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 24px;

    flex-wrap: wrap;
}


.button-live,
.home-button-video {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 4px;

    font-family: 'Inter', sans-serif;

    font-size: 0.82rem;

    text-decoration: none;

    transition: var(--home-transicao);
}


.button-live {
    background: rgba(180, 0, 0, 0.82);

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.15);
}


.button-live:hover {
    background: #d00000;

    transform: translateY(-2px);
}


.home-button-video {
    background: rgba(255, 255, 255, 0.08);

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.20);
}


.home-button-video:hover {
    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-2px);
}


.icone-yt {
    width: 18px;
    height: 18px;

    object-fit: contain;
}


.live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ffffff;

    animation: livePulse 1.5s infinite;
}


/* =========================================================
   SEÇÃO DOS TRÊS PILARES
========================================================= */

.home-pilares {
    position: relative;

    padding: 120px 0 130px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 175, 55, 0.08),
            transparent 45%
        ),
        var(--home-preto);
}


/* =========================================================
   TÍTULOS DE SEÇÃO (CORRIGIDO ALINHAMENTO)
========================================================= */

.titulo-secao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    text-align: center;

    margin-bottom: 25px;
}


.icone-secao {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    min-width: 42px;

    margin: 0;

    color: var(--home-dourado);

    border: 1px solid var(--home-border);

    border-radius: 50%;

    font-size: 1.1rem;
}


.titulo-secao h2 {
    margin: 0;

    color: var(--home-branco);

    font-family: 'Outfit', sans-serif;

    font-size: clamp(2rem, 4vw, 3.3rem);

    font-weight: 600;

    letter-spacing: -0.035em;
}


.texto-central {
    max-width: 650px;

    margin: 0 auto;

    color: var(--home-cinza);

    text-align: center;

    line-height: 1.8;

    font-size: 1rem;
}


/* =========================================================
   CARDS
========================================================= */

.cards-pilares {
    display: grid;

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

    gap: 20px;

    margin-top: 55px;
}


.card-pilar {
    position: relative;

    min-height: 390px;

    display: flex;

    flex-direction: column;

    padding: 42px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 8px;

    overflow: hidden;

    transition: var(--home-transicao);
}


.card-pilar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--home-dourado),
            transparent
        );

    opacity: 0;

    transition: var(--home-transicao);
}


.card-pilar:hover {
    transform: translateY(-8px);

    border-color: rgba(212, 175, 55, 0.35);

    box-shadow: var(--home-sombra);
}


.card-pilar:hover::before {
    opacity: 1;
}


/* =========================================================
   CARD DESTAQUE — GLOBAL
========================================================= */

.card-pilar.destaque {
    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, 0.14),
            rgba(212, 175, 55, 0.035)
        );

    border-color:
        rgba(212, 175, 55, 0.35);

    transform: translateY(-10px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.30);
}


.card-pilar.destaque:hover {
    transform: translateY(-16px);

    border-color:
        rgba(212, 175, 55, 0.60);
}


/* =========================================================
   ÍCONE DOS CARDS
========================================================= */

.card-icone {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background: rgba(212, 175, 55, 0.09);

    border: 1px solid rgba(212, 175, 55, 0.22);

    border-radius: 50%;

    font-size: 1.5rem;
}


/* =========================================================
   TÍTULO DOS CARDS
========================================================= */

.card-pilar h3 {
    margin: 0 0 16px;

    color: var(--home-branco);

    font-family: 'Outfit', sans-serif;

    font-size: 1.55rem;

    font-weight: 600;

    letter-spacing: -0.025em;
}


/* =========================================================
   TEXTO DOS CARDS
========================================================= */

.card-pilar p {
    margin: 0;

    color: var(--home-cinza);

    font-size: 0.95rem;

    line-height: 1.75;
}


/* =========================================================
   BOTÃO DOS CARDS
========================================================= */

.button-card {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-top: auto;
    padding-top: 30px;

    color: var(--home-dourado);

    font-family: 'Outfit', sans-serif;

    font-size: 0.88rem;

    font-weight: 600;

    text-decoration: none;

    transition: var(--home-transicao);
}


.button-card::after {
    content: "→";

    margin-left: 9px;

    transition: var(--home-transicao);
}


.button-card:hover {
    color: var(--home-dourado-claro);
}


.button-card:hover::after {
    transform: translateX(5px);
}


/* =========================================================
   SEÇÃO DE VISÃO
========================================================= */

.home-secao {
    position: relative;

    padding: 125px 0;

    background:
        linear-gradient(
            180deg,
            var(--home-grafite),
            var(--home-preto)
        );
}


.home-secao .home-conteudo {
    max-width: 900px;

    text-align: center;
}


.home-secao p {
    max-width: 760px;

    margin: 28px auto 0;

    color: var(--home-cinza);

    font-size: 1.08rem;

    line-height: 1.9;
}


/* =========================================================
   SEÇÃO ALTERNADA
========================================================= */

.home-secao-alternada {
    background: var(--home-grafite);
}


/* =========================================================
   MAPA
========================================================= */

.home-mapa {
    position: relative;

    margin-top: 45px;

    width: 100%;

    overflow: hidden;

    border-radius: 8px;

    border: 1px solid rgba(212, 175, 55, 0.20);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);
}


.home-mapa iframe {
    display: block;

    width: 100%;

    min-height: 430px;

    border: 0;
}


/* =========================================================
   EFEITO DE SEPARAÇÃO DAS SEÇÕES
========================================================= */

.home-pilares::after,
.home-secao::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 55px;
    height: 1px;

    transform: translateX(-50%);

    background: var(--home-dourado);

    opacity: 0.65;
}


/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes homeHeroEntrada {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes homeLogoEntrada {

    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes livePulse {

    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }

}


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

@media (max-width: 900px) {

    .home-hero {
        min-height: calc(100vh - 60px);

        background-position: center;
    }


    .home-hero-conteudo {
        padding: 90px 0 80px;
    }


    .home-hero h1 {
        font-size: clamp(3rem, 9vw, 5rem);
    }


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

        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }


    .card-pilar,
    .card-pilar.destaque {
        min-height: auto;

        transform: none;
    }


    .card-pilar:hover,
    .card-pilar.destaque:hover {
        transform: translateY(-5px);
    }


    .home-pilares,
    .home-secao {
        padding-top: 95px;
        padding-bottom: 100px;
    }

}


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

/* =========================================================
   CELULAR (CORREÇÃO DE OVERFLOW E BOTÕES)
========================================================= */

@media (max-width: 600px) {

    /* Trava a tela para impedir qualquer vazamento lateral */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .home-conteudo {
        width: calc(100% - 32px) !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       HERO COMPACTA E CENTRALIZADA
    ----------------------------------------------------- */

    .home-hero {
        min-height: auto !important; /* Remove a altura gigante de 100vh */
        padding: 40px 0 50px !important;
        background-position: center !important;
    }

    .home-hero::before {
        width: 250px;
        height: 250px;
        right: -100px;
    }

    .home-hero-conteudo {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        padding: 20px 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .home-logo {
        width: 65px !important;
        height: 65px !important;
        margin-bottom: 16px !important;
    }

    .hero-pretitulo {
        font-size: 0.68rem !important;
        letter-spacing: 0.2em !important;
        margin-bottom: 10px !important;
    }

    .home-hero h1 {
        font-size: clamp(2.1rem, 9vw, 3rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.03em !important;
    }

    .hero-texto {
        margin-top: 16px !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        padding: 0 5px !important;
    }


    /* -----------------------------------------------------
       BOTÕES HERO (AJUSTE FINO SEM ESTOURAR A TELA)
    ----------------------------------------------------- */

    .hero-botoes {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 24px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .hero-botoes a,
    .hero-botoes .button-main,
    .hero-botoes .button-secondary {
        width: 100% !important;
        max-width: 320px !important; /* Limite perfeito para smartphone */
        min-height: 48px !important;
        padding: 0 16px !important; /* Padding reduzido para caber o texto */
        margin: 0 auto !important;
        box-sizing: border-box !important; /* CRUCIAL: Inclui o padding no cálculo de 100% */
        font-size: 0.88rem !important;
        text-align: center !important;
    }

    .home-botoes {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .button-live,
    .home-button-video {
        width: 100% !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       SEÇÕES & CARDS
    ----------------------------------------------------- */

    .home-pilares,
    .home-secao {
        padding: 60px 0 !important;
    }

    .titulo-secao {
        gap: 10px;
        margin-bottom: 18px;
    }

    .icone-secao {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.95rem;
    }

    .titulo-secao h2 {
        font-size: 1.6rem !important;
        line-height: 1.1;
    }

    .texto-central {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .cards-pilares {
        gap: 14px;
        margin-top: 32px;
    }

    .card-pilar {
        padding: 28px 20px;
        border-radius: 7px;
    }

    .card-pilar h3 {
        font-size: 1.3rem;
    }

    .card-pilar p {
        font-size: 0.88rem;
    }

    .home-secao p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .home-mapa {
        margin-top: 28px;
        border-radius: 6px;
    }

    .home-mapa iframe {
        min-height: 300px;
    }
}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 380px) {

    .home-hero-conteudo {
        padding-top: 60px;
        padding-bottom: 60px;
    }


    .home-hero h1 {
        font-size: 2.5rem;
    }


    .hero-texto {
        font-size: 0.88rem;
    }


    .titulo-secao h2 {
        font-size: 1.5rem;
    }


    .card-pilar {
        padding: 28px 22px;
    }

}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}