section {
    border : 0px;
    padding : var(--s-5) 0px;
}

main {
    background : var(--l-surface)
}

.section-header-div {
    margin-bottom : var(--s-4)
}

.card {
    border : 1px solid var(--l-border);
    border-radius : var(--r-lg);
    background : var(--l-bg)
}

.paths-container {
    color : var(--l-text-3);
    text-transform : uppercase;
    font-family : var(--font-mono);
    font-size : 12px;
    margin-bottom : var(--s-4)
}
    .paths-container a:hover,
    .paths-container span:hover {
        text-decoration : none;
        color : var(--pb-red)
    }

.container-head {
    padding : var(--s-2);
    display : flex;
    gap : var(--s-2);
    flex-direction : column
}

    .container-head h1 {
        padding : 0px;
        margin : 0px;
        font-size : 36px
    }

.section-head {
    background : var(--l-bg);
    display : flex;
    flex-direction : row;
    gap: var(--s-5);
    padding : var(--s-6);
    border : 1px solid var(--l-border);
    border-radius : var(--r-lg);
    margin-bottom : 0px
}

.rating-card {
    border-radius : var(--r-lg);
    border : 1px solid var(--l-border);
    display : flex;
    flex-direction : column;
    min-width : 300px
}

.rating-head {
    padding: var(--s-1) var(--s-3);
    align-items: center;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--l-border);
    padding-bottom: var(--s-1)
}

    .rating-head p {
        margin : 0;
        padding-block : auto;
        font-family : var(--font-mono);
        color : var(--l-text-3);
        text-transform : uppercase;
        font-size : 11px
    }

    /* Logo do google avaliações*/
    .rating-head span {
        margin-left: auto;
        line-height: 1;
        display: grid;
        place-items: center;
        justify-self : center;
        font-family: Arial, sans-serif;
        font-weight: 900;
        font-size: 40px;
        line-height: 1;
        margin-right : var(--s-2);
        letter-spacing: -0.05em;
        color: #4285F4;
        background: conic-gradient(from -45deg, #4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.rating-ratings {
    align-items: center;
    display: flex;
    padding: var(--s-3) var(--s-3);
    flex-direction: row;
    gap: var(--s-4);
    border-bottom: 1px solid var(--l-border)
}

    .rating-ratings h2 {
        font-family : var(--font-mono)
    }

    .rating-ratings .ratings-container p {
        color : var(--l-text-3);
        font-family : var(--font-mono);
        font-size : 11px;
        text-transform : uppercase
    }

    .rating-ratings .ratings-container .lead {
        color : var(--pb-gold);
        font-size : 16px
    }

.rating-footer {
    padding: var(--s-1) var(--s-3);
    margin-top: var(--s-3);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    font-family: var(--font-mono);
}

    .rating-footer > :nth-child(odd) {
        border-right: 1px solid var(--l-border);
    }

    .rating-footer > :nth-child(even) {
        padding-left : var(--s-3)
    }

.rating-footer strong {
    font-size : 24px
}

.rating-footer p {
    font-size : 11px;
    text-transform : uppercase;
    color : var(--l-text-3)
}

.informations-grid {
    display : flex;
    align-items : center;
    flex-direction : row;
    justify-items : center;
    border-radius : var(--r-lg);
    border : 1px solid var(--l-border);
    padding : var(--s-4);
    gap : var(--s-5)
}

.informations-logo {
    width: 100%;
    padding: var(--s-1) var(--s-4);
    max-width: 300px;
    display: flex;
    aspect-ratio: 1.5/1;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--l-border);
    border-radius: var(--r-md);
}

    .informations-logo img {
        display: block;
        object-fit: contain;
        height: 100%;
        width: 100%
    }

.informations-texts {
    width : 100%;
    min-width : 0;
    display : flex;
    color : var(--l-text-2);
    flex-direction : column;
    gap : var(--s-3)
}

.informations-texts p {
    margin : 0px
}

.informations-footer strong {
    color : var(--l-text)
}

.informations-footer  {
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    min-width : 0;
    gap : var(--s-3);
    white-space : nowrap;
    font-size : 11px;
    text-transform : uppercase;
    font-family : var(--font-mono)
}

    .informations-footer p {
        min-width : 0;
        white-space : normal;
        overflow-wrap : anywhere
    }

.services-grid {
    display : grid;
    grid-template-columns : repeat(4, 1fr);
    padding : var(--s-4);
    gap : var(--s-3)
}

.services-card {
    display: flex;
    flex-direction: column;
    height: fit-content;
    background: var(--l-surface);
    border-radius: var(--r-md);
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--l-border);
    white-space : nowrap;
    transition: transform 160ms var(--ease);
}

.services-card:hover {
    text-decoration : none;
    color: initial;
    transform : translateY(-2px);
    border-color : var(--d-border)
}

.services-card h3,
.services-card p {
    margin : 0px;
    padding : 0px;
}

.services-card h3 {
    font-size : 16px
}

.services-card p {
    font-size : 11px;
    font-family : var(--font-mono);
    text-transform : uppercase;
    color : var(--l-text-2)
}

.related-suppliers-grid {
    display : grid;
    gap : var(--s-4);
    grid-template-columns : repeat(3, 1fr)
}

.related-supplier-card {
    color : var(--l-text-2);
    display : flex;
    flex-direction : column;
    border-radius : var(--r-lg);
    border : 1px solid var(--l-border);
    padding : var(--s-4);
    font-size : 16px
}

    .related-supplier-card .image-container {
        padding: var(--s-6);
        max-width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: var(--s-4);
        border-bottom: 1px solid var(--l-border);
        min-height: 304px;
    }

.related-supplier-card .image-container img {
    align-self : center;
    margin-inline : auto;
    width : 100%;
    object-fit : contain;
    border-radius : var(--r-lg)
}

.related-supplier-card h3 {
    color : var(--l-text);
    font-size : 16px
}

.related-supplier-card b {
    color : var(--pb-gold);
    font-size : 16px;
}

.related-supplier-card a {
    border-top : 1px solid var(--l-border);
    padding-top : var(--s-2);
    color : var(--l-text) 
}

.related-supplier-card a strong {
    color : var(--l-text)
}

.related-supplier-card a:hover strong {
    color : var(--pb-red)
}

.star-ratings {
    display : flex;
    flex-direction : row;
    gap : var(--s-2)
}

.how-to-grid {
    display : grid;
    grid-template-columns : repeat(4, 1fr);
    gap : var(--s-3);
    column-rule : 1px solid var(--l-border)
}

.how-to-card {
    color : var(--l-text-2);
    display : flex;
    flex-direction : column;
    gap : var(--s-2);
    padding : var(--s-5)
}

.how-to-card .how-to-card-step-num {
    margin : 0px;
    color : var(--l-text-2);
    font-size : 12px;
    font-family : var(--font-mono);
}

.how-to-card h3 {
    white-space : nowrap;
    color : var(--l-text)
}

.rankings-grid {
    display : grid;
    grid-template-columns : repeat(3, 1fr);
    gap : var(--s-4)
}

.ranking-card {
    padding : var(--s-4);
    display : flex;
    flex-direction : column;
    gap : var(--s-1);
    border-radius : var(--r-md);
    border : 1px solid var(--l-border)
}

.ranking-card:hover {
    text-decoration : none;
    color : initial
}

.ranking-card p {
    color : var(--l-text-2)
}

.ranking-card .eyebrow::before {
    display :none
}

.compare-final-cta {
    background : var(--d-bg);
    display : flex;
    flex-direction : column;
    align-items : center;
    color : var(--d-text);
    text-align : center
}

.compare-final-cta p {
    display : flex;
    margin-inline : auto;
    color : var(--d-text-2)
}

@media (max-width: 760px) {

    h1 {
        line-height : 48px
    }

    .section-head,
    .informations-grid {
        flex-direction: column;
        gap: var(--s-4);
    }

    .hero-head {
        gap : var(--s-5)
    }

    .container-head {
        border-bottom : 1px solid var(--l-border)
    }

    .services-grid,
    .related-suppliers-grid,
    .how-to-grid,
    .rankings-grid {
        grid-template-columns: 1fr;
    }

    .informations-footer {
        flex-direction : column;
        white-space : normal;
    }

    .how-to-grid {
        column-rule : 1px solid var(--l-border)
    }

    .services-card,
    .how-to-card h3 {
        white-space: normal;
    }

    .how-to-grid {
        row-rule : 1px solid var(--l-border)
    }

    .rating-card {
        min-width: 100%;
    }

    .rating-footer {
        gap: var(--s-3);
    }
}