/* Estilos extraídos da home enviada; disponíveis globalmente. */


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

:root {

    --vitel-black: #0a0a0a;

    --vitel-dark: #171717;

    --vitel-gray: #737373;

    --vitel-light: #f5f5f5;

    --vitel-white: #ffffff;

    --vitel-border:
        rgba(255,255,255,0.10);

}


/* =====================================================
   RESET
====================================================== */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

    background:
        var(--vitel-black);

}


body {

    margin:
        0;

    padding:
        0;

    background:
        var(--vitel-black);

    color:
        var(--vitel-light);

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

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* =====================================================
   TIPOGRAFIA
====================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        'Syne',
        sans-serif !important;

    letter-spacing:
        -0.025em;

}


/* =====================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar {

    width:
        8px;

}


::-webkit-scrollbar-track {

    background:
        var(--vitel-black);

}


::-webkit-scrollbar-thumb {

    background:
        #303030;

    border-radius:
        4px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #4a4a4a;

}


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

.vitel-logo {

    display:
        block;

    width:
        auto;

    height:
        42px;

    max-width:
        190px;

    object-fit:
        contain;

    object-position:
        left center;

    filter:
        none;

    transition:
        filter
        0.35s
        ease;

}


/*
    FUNDO ESCURO
    Logo preta -> branca
*/

.vitel-logo.logo-light {

    filter:
        brightness(0)
        invert(1);

}


@media (max-width: 640px) {

    .vitel-logo {

        height:
            34px;

        max-width:
            150px;

    }

}


/* =====================================================
   LOGO GIGANTE / GRAFISMO
====================================================== */

.brand-mark {

    position:
        absolute;

    right:
        -90px;

    top:
        50%;

    width:
        560px;

    height:
        560px;

    transform:
        translateY(-50%);

    object-fit:
        contain;

    opacity:
        0.055;

    filter:
        brightness(0)
        invert(1);

    pointer-events:
        none;

    user-select:
        none;

}


@media (max-width: 900px) {

    .brand-mark {

        right:
            -180px;

        width:
            480px;

        height:
            480px;

        opacity:
            0.035;

    }

}


@media (max-width: 640px) {

    .brand-mark {

        right:
            -190px;

        width:
            380px;

        height:
            380px;

    }

}


/* =====================================================
   SERVIÇOS
====================================================== */

.services-list {

    border-top:
        1px solid
        var(--vitel-border);

}


.service-row {

    display:
        grid;

    grid-template-columns:
        4fr 5fr 2.5fr;

    column-gap:
        48px;

    align-items:
        center;

    min-height:
        158px;

    padding:
        30px 16px;

    margin:
        0 -16px;

    border-bottom:
        1px solid
        var(--vitel-border);

    transition:
        background-color
        0.3s
        ease;

}


.service-row:hover {

    background:
        rgba(255,255,255,0.018);

}


/* =====================================================
   PARTE ESQUERDA DO SERVIÇO
====================================================== */

.service-main {

    display:
        grid;

    grid-template-columns:
        28px 1fr;

    column-gap:
        16px;

    align-items:
        center;

    min-width:
        0;

}


.service-number {

    align-self:
        start;

    padding-top:
        4px;

    color:
        var(--vitel-gray);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1;

}


.service-title {

    margin:
        0;

    color:
        var(--vitel-light);

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

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

    transition:
        transform
        0.3s
        ease;

}


.service-row:hover .service-title {

    transform:
        translateX(5px);

}


/* =====================================================
   DESCRIÇÃO
====================================================== */

.service-description {

    max-width:
        520px;

    margin:
        0;

    color:
        var(--vitel-gray);

    font-size:
        14px;

    font-weight:
        300;

    line-height:
        1.55;

}


/* =====================================================
   LISTA
====================================================== */

.service-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.service-list li {

    margin:
        0;

    padding:
        0;

    color:
        rgba(245,245,245,0.82);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.3;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


/* =====================================================
   MOBILE DOS SERVIÇOS
====================================================== */

@media (max-width: 900px) {

    .service-row {

        grid-template-columns:
            1fr;

        gap:
            18px;

        min-height:
            auto;

        padding:
            28px 16px;

    }


    .service-description {

        max-width:
            100%;

        padding-left:
            44px;

    }


    .service-list {

        padding-left:
            44px;

    }

}


@media (max-width: 640px) {

    .service-row {

        padding:
            26px 8px;

        margin:
            0 -8px;

    }


    .service-title {

        font-size:
            23px;

    }


    .service-description {

        padding-left:
            0;

    }


    .service-list {

        padding-left:
            0;

    }

}


/* =====================================================
   SELEÇÃO
====================================================== */

::selection {

    background:
        var(--vitel-light);

    color:
        var(--vitel-black);

}