/* =====================================================================
 * L'Éléphant — Página Serviços
 * ===================================================================== */

/* A fonte Span Regular está declarada no style.css global do tema. */

body.elephant-services-page {
    --ele-services-content-inset: 13.8vw;
    --ele-services-bg: #ede6e2;
    background: #ede6e2 !important;
}

body.elephant-services-page main#main {
    padding: 0;
    margin: 0;
    background: #ede6e2 !important;
}


/* =====================================================================
 * Header da página Serviços
 * Mantém-se branco em toda a página, exatamente como no layout.
 * O switcher global integra o mesmo #main-menu em todas as páginas.
 * ===================================================================== */
body.elephant-services-page header.menu-transparente #main-menu li a,
body.elephant-services-page header.menu-transparente #mobile-menu li a {
    color: #fff !important;
    transition: opacity .25s ease;
}

body.elephant-services-page header.menu-transparente #main-menu li a:hover,
body.elephant-services-page header.menu-transparente #main-menu li a:focus-visible,
body.elephant-services-page header.menu-transparente #mobile-menu li a:hover,
body.elephant-services-page header.menu-transparente #mobile-menu li a:focus-visible {
    color: #fff !important;
}

/* O menu utiliza unicamente opacidade: sem underline, pseudo-linhas ou sombras,
   incluindo estados ativos, focus e hover das opções WPML. */
body.elephant-services-page header.menu-transparente #main-menu li a,
body.elephant-services-page header.menu-transparente #mobile-menu li a {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: opacity .28s ease !important;
}
body.elephant-services-page header.menu-transparente #main-menu li a:hover,
body.elephant-services-page header.menu-transparente #main-menu li a:focus-visible,
body.elephant-services-page header.menu-transparente #mobile-menu li a:hover,
body.elephant-services-page header.menu-transparente #mobile-menu li a:focus-visible {
    opacity: .65;
}
body.elephant-services-page header.menu-transparente #main-menu li a::before,
body.elephant-services-page header.menu-transparente #main-menu li a::after,
body.elephant-services-page header.menu-transparente #mobile-menu li a::before,
body.elephant-services-page header.menu-transparente #mobile-menu li a::after {
    content: none !important;
    display: none !important;
}

body.elephant-services-page .site-lelephant,
body.elephant-services-page .site-lelephant.inverter,
body.elephant-services-page header.menu-transparente.inverter .site-lelephant {
    filter: none !important;
}

/* O logo permanece sempre na versão branca na página Serviços. */
body.elephant-services-page .elephant-header-logo {
    filter: none !important;
}

body.elephant-services-page #main-menu > li.elephant-menu-language > a {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
    color: #fff !important;
}

body.elephant-services-page #main-menu > li.elephant-menu-language:first-of-type {
    margin-top: 2px;
}


/* Hero usa a Imagem de destaque da página. */
.elephant-services__hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    background: var(--ele-services-bg);
}

.elephant-services__hero-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.elephant-services__hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .08);
}

/* Introdução — texto e assinatura centrados, mantendo a grelha editorial. */
.elephant-services__intro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: clamp(90px, 8.5vw, 160px) 0;
    background: #ede6e2 !important;
    border-bottom: 0 !important;
}

.elephant-services__intro-inner {
    width: calc(100% - (2 * var(--ele-services-content-inset)));
    margin: 0 var(--ele-services-content-inset);
    text-align: center !important;
}

body.elephant-services-page .elephant-services__intro-copy {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center !important;
    font-family: "Roboto", sans-serif;
    font-size: clamp(16px, 1vw, 19px);
    font-weight: 400;
    line-height: 1.35;
    color: var(--black);
}

body.elephant-services-page .elephant-services__intro-tagline {
    margin: clamp(30px, 3vw, 54px) auto 0;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(21px, 1.979167vw, 38px) !important;
    font-style: italic;
    font-weight: 100 !important;
    line-height: 1.175 !important; /* 47px a 40px */
    letter-spacing: 0;
    color: var(--black);
}

/* Serviços: faixas editoriais sem linha superior no primeiro serviço.
 * Mantêm-se as linhas inferiores a separar as restantes faixas. */
.elephant-services__list {
    width: 100%;
    border: 0 !important;
    background: #ede6e2 !important;
}

.elephant-services__card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(165px, 27.5svh, 300px);
    /* Sem linha acima do primeiro serviço. Apenas separadores entre serviços
       e a linha final antes da ligação aos projetos. */
    border: 0 !important;
    background: #ede6e2 !important;
}

body.elephant-services-page .elephant-services__card + .elephant-services__card {
    border-top: 1px solid rgba(0, 0, 0, .20) !important;
}
body.elephant-services-page .elephant-services__card:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .20) !important;
}
body.elephant-services-page .elephant-services__card:first-child {
    border-top: 0 !important;
}

.elephant-services__card-inner {
    width: calc(50% - 13.8vw);
    margin-left: var(--ele-services-content-inset);
    padding: 30px 0;
}
.elephant-services__card-title {
    margin: 0 0 7px;
    font-family: "Roboto", sans-serif;
    font-size: clamp(18px, 1.05vw, 22px);
    line-height: 1.18;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--black);
}

.elephant-services__card-copy {
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: clamp(12px, .73vw, 15px);
    line-height: 1.25;
    font-weight: 400;
    color: var(--black);
}

.elephant-services__projects-link-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(165px, 27.5svh, 300px);
    padding: 50px 30px;
    background: #ede6e2 !important;
}

.elephant-services__projects-link {
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: clamp(13px, .85vw, 16px);
    line-height: 1.3;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--black);
    transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.elephant-services__projects-link:hover {
    color: var(--black);
    opacity: .55;
    transform: translateY(-2px);
}

/* Movimento leve, alinhado com o resto do site. */
.elephant-services-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .72s cubic-bezier(.22, 1, .36, 1),
        transform .82s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.elephant-services-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) and (max-width: 1100px) {
    .elephant-services__hero {
        min-height: 520px;
    }
}

@media (max-width: 767px) {
    .elephant-services__hero {
        height: 100svh;
        min-height: 520px;
    }

    .elephant-services__intro {
        min-height: auto;
        padding: 82px 24px;
    }

    .elephant-services__intro-inner {
        width: 100%;
        margin: 0;
    }

    .elephant-services__intro-copy {
        max-width: none;
        text-align: center;
        font-size: 15px;
        line-height: 1.4;
    }

    body.elephant-services-page .elephant-services__intro-tagline {
        margin-top: 32px;
        font-size: 21px !important;
    }

    .elephant-services__card {
        min-height: 190px;
    }

    .elephant-services__card-inner {
        width: auto;
        margin: 0;
        padding: 42px 24px;
    }

    .elephant-services__card-title {
        font-size: 17px;
    }

    .elephant-services__card-copy {
        font-size: 13px;
        line-height: 1.4;
    }

    .elephant-services__projects-link-wrap {
        min-height: 180px;
        padding: 60px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elephant-services-reveal,
    .elephant-services-reveal.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}