/* Extraído de views/components/footer.php — estilos específicos da página. */

/* --- RODAPÉ COM CARDS MÍSTICOS E FADE SUAVE --- */
    .exotic-footer {
        /* Degradê longo, terminando na cor exata do fundo da página.

           SEM background-color sólido. Foi o que eu tinha posto para
           resolver o "Ecos da Casa" invisível, e criou o problema
           oposto: o rodapé passou a ser preto desde o primeiro pixel e a
           textura de café acima dele terminava numa linha reta — o corte
           seco relatado.

           A leitura do texto se resolve pelo espaço, não pela cor de
           fundo: o degradê leva 45% da altura para fechar, e o título
           mora abaixo dela, já na área escura.

           A transição é medida em PIXELS, não em porcentagem. No celular
           o rodapé tem mais de 2000px de altura: 45% dariam mil pixels de
           degradê, e o título cairia no meio da parte ainda clara. Em
           pixels a faixa de passagem tem sempre os mesmos 150px, seja o
           rodapé curto ou longo. */
        background-image: linear-gradient(to bottom,
            rgba(5, 2, 1, 0) 0,
            rgba(5, 2, 1, .70) 48px,
            rgba(5, 2, 1, .93) 96px,
            #050201 150px);
        width: 100%;
        margin-top: 40px;
        padding: 100px 20px 80px; /* 100px de espaço no topo para o degradê respirar perfeitamente */
        text-align: center;
        position: relative;
        z-index: 10;
        border-top: none; /* Removida a borda para não quebrar a magia da transição */
    }

    .footer-title {
        font-family: 'Cinzel Decorative', cursive;
        /* Padronizado no ouro da casa junto com os demais titulos. */
        color: var(--ouro-casa, #ffdf73);
        font-size: 2rem;
        letter-spacing: 5px;
        margin-bottom: 10px;
        text-transform: uppercase;
        text-shadow: 0 2px 10px rgba(0,0,0,1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .footer-title span {
        font-size: 1.2rem;
        color: var(--copper-main, #9c6650);
    }

    .footer-desc {
        font-family: 'Cormorant Garamond', serif;
        color: #bfb3a8;
        font-size: 1.3rem;
        max-width: 650px;
        margin: 0 auto 40px auto;
        line-height: 1.5;
        font-style: italic;
    }

    /* GRID DOS CARDS */
    .footer-cards-container {
        display: grid;
        /* São cinco ecos fixos: no computador eles formam uma única
           sequência, em vez de o último cair sozinho na linha seguinte. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 25px;
        max-width: 1400px;
        margin: 0 auto 60px auto;
    }

    /* ESTILO DE CADA CARD */
    .fc-card {
        background: linear-gradient(145deg, rgba(15, 8, 5, 0.4) 0%, rgba(5, 2, 1, 0.8) 100%);
        border: 1px solid rgba(156, 102, 80, 0.2);
        border-radius: 4px;
        padding: 40px 25px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.4s ease;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    }

    .fc-card:hover {
        border-color: rgba(184, 115, 51, 0.5);
        box-shadow: 0 10px 30px rgba(0,0,0,0.9), inset 0 0 30px rgba(184, 115, 51, 0.05);
        transform: translateY(-5px);
    }

    /* MOLDURA REDONDA DO ÍCONE */
    .fc-icon-ring {
        width: 80px;
        height: 80px;
        border: 1px dashed rgba(184, 115, 51, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        transition: all 0.4s ease;
        background: rgba(0,0,0,0.3);
    }

    .fc-card:hover .fc-icon-ring {
        border-style: solid;
        border-color: var(--gold-title, #B87333);
        box-shadow: 0 0 15px rgba(184, 115, 51, 0.2) inset;
        transform: scale(1.05);
    }

    .fc-icon-ring svg {
        width: 35px;
        height: 35px;
        transition: all 0.4s ease;
    }

    .fc-card:hover .fc-icon-ring svg {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
    }

    /* TEXTOS DO CARD */
    .fc-card-title {
        /* Era Cinzel em creme: a unica familia de titulo fora do padrao
           e a cor mais repetida do site, 65 ocorrencias. */
        font-family: 'Cinzel Decorative', cursive;
        color: var(--ouro-casa, #ffdf73);
        font-size: 0.9rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        justify-content: center;
        flex-wrap: nowrap;
        min-height: 5.3em;
        line-height: 1.35;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .fc-card-title span {
        color: var(--copper-dark, #6d4335);
        font-size: 0.7rem;
        line-height: 1;
        flex: 0 0 auto;
    }

    .fc-card-text {
        font-family: 'Cormorant Garamond', serif;
        color: #9f8d83;
        font-size: 1.1rem;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 30px;
        flex-grow: 1; /* Garante que os botões fiquem alinhados no fundo independente do tamanho do texto */
    }

    /* BOTÃO DO CARD */
    .fc-btn {
        width: 100%;
        background: transparent;
        border: 1px solid rgba(156, 102, 80, 0.3);
        color: var(--copper-light, #c2846b);
        font-family: 'Cinzel', serif;
        font-size: 0.75rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        white-space: normal;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .fc-card:hover .fc-btn {
        border-color: var(--gold-title, #B87333);
        color: var(--glow-gold, #ffdfba);
    }

    .fc-btn:hover {
        background: rgba(184, 115, 51, 0.1);
        text-shadow: 0 0 8px rgba(184, 115, 51, 0.8);
    }

    /* LOGO FINAL E DIREITOS AUTORAIS */
    .footer-logo-container {
        margin: 0 auto 15px auto;
        width: 70px;
    }

    .footer-home-link {
        display: inline-block;
        width: 70px;
        height: 70px;
        opacity: 0.8;
        transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    }

    .footer-logo-btn {
        position: relative;
        display: block;
        width: 70px;
        height: 70px;
    }

    .footer-logo-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.35s ease;
    }

    .footer-logo-active { opacity: 0; }

    .footer-home-link:hover,
    .footer-home-link:focus-visible,
    .footer-home-link.active {
        opacity: 1;
        transform: scale(1.08) translateY(-2px);
        filter: drop-shadow(0 5px 15px rgba(255, 140, 0, 0.5));
    }

    .footer-home-link:hover .footer-logo-default,
    .footer-home-link:focus-visible .footer-logo-default,
    .footer-home-link.active .footer-logo-default { opacity: 0; }

    .footer-home-link:hover .footer-logo-active,
    .footer-home-link:focus-visible .footer-logo-active,
    .footer-home-link.active .footer-logo-active { opacity: 1; }

    .footer-home-link:focus-visible {
        outline: 2px solid #ffdf73;
        outline-offset: 5px;
        border-radius: 50%;
    }

    .footer-copyright {
        font-family: 'Cinzel', serif;
        font-size: 0.75rem;
        color: rgba(196, 152, 122, 0.78);
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .fc-btn:focus-visible {
        outline: 2px solid #ffdf73;
        outline-offset: 3px;
    }

    @media (max-width: 1100px) and (min-width: 701px) {
        .footer-cards-container {
            gap: 12px;
        }

        .fc-card {
            padding: 32px 12px 26px;
        }

        .fc-card-title {
            font-size: clamp(.66rem, 1.15vw, .82rem);
            letter-spacing: 1px;
        }

        .fc-card-text {
            font-size: clamp(.88rem, 1.55vw, 1.02rem);
        }

        .fc-btn {
            font-size: clamp(.62rem, 1vw, .72rem);
            letter-spacing: 1px;
        }
    }

    @media (max-width: 700px) and (min-width: 601px) {
        .footer-cards-container {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 600px) {
        .exotic-footer {
            padding: 72px max(14px, env(safe-area-inset-right, 0px)) calc(52px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
        }

        .footer-title {
            font-size: clamp(1.02rem, 5.4vw, 2rem);
            letter-spacing: clamp(1px, 0.65vw, 5px);
            gap: clamp(5px, 2vw, 15px);
        }

        .footer-title span {
            font-size: clamp(.72rem, 3.4vw, 1.2rem);
            flex: 0 0 auto;
        }

        .footer-cards-container {
            grid-template-columns: minmax(0, 1fr);
        }

        .fc-btn {
            min-height: 44px;
        }
    }